/* ==========================================================================
   Camelback Construction Group - site.css
   Extracted from index.html 2026-08-01. Shared across all routes.

   Dead rules retired in this extraction (their markup was deleted in the
   Phase 1 safety pass and nothing referenced them): .pj-* project gallery,
   .rev-* testimonial marquee plus @keyframes scr, the .hero-counters /
   .hc-item / .hc-val / .hc-lbl / .check-draw / @keyframes drawCheck stat
   counters, and .hero-btns. Phase 1 overrides merged in place rather than
   appended, so there is now one declaration per selector.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#FAF8F5;--bg2:#EEEBE4;--dk:#1B1B1B;--dk2:#252525;--card:#FFF;--brd:rgba(0,0,0,.07);--brdl:rgba(255,255,255,.08);--tx:#1B1B1B;--tx2:#5C5650;--tx3:#9A9390;--w:#B8956A;--wl:#CCAD89;--wg:rgba(184,149,106,.12);--ws:rgba(184,149,106,.25);--ok:#3D8B5E;--al:#C1362B;--alh:#D14536;--fd:'Playfair Display',Georgia,serif;--fb:'Outfit',system-ui,sans-serif;--r:12px;--rl:20px;--e:cubic-bezier(.25,.1,.25,1)}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--fb);background:var(--bg);color:var(--tx);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;overscroll-behavior-x:none}
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}ul{list-style:none}
.ct{max-width:1240px;margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--w);outline-offset:2px}

/* REVEALS */
.r{opacity:0;transform:translateY(30px);transition:opacity .7s var(--e),transform .7s var(--e)}.r.v{opacity:1;transform:translateY(0)}
.rl{opacity:0;transform:translateX(-40px);transition:opacity .7s var(--e),transform .7s var(--e)}.rl.v{opacity:1;transform:translateX(0)}
.rr{opacity:0;transform:translateX(40px);transition:opacity .7s var(--e),transform .7s var(--e)}.rr.v{opacity:1;transform:translateX(0)}
.rs{opacity:0;transform:scale(.94);transition:opacity .7s var(--e),transform .7s var(--e)}.rs.v{opacity:1;transform:scale(1)}

/* TYPOGRAPHY */
.ey{font-family:var(--fb);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--w);margin-bottom:16px;display:flex;align-items:center;gap:12px}.ey::before{content:'';width:28px;height:1.5px;background:var(--w)}
.ey-sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;flex-shrink:0}
.hl{font-family:var(--fd);font-size:clamp(2.4rem,5vw,4rem);font-weight:600;line-height:1.1;margin-bottom:20px}
.hl .accent{color:var(--w)}
.sl{font-size:1.05rem;font-weight:300;color:var(--tx2);max-width:520px;line-height:1.75}
.sec{padding:140px 0}

/* BUTTONS. --al is the single alert color: emergency CTAs and the sticky
   call bar ONLY. It does not appear anywhere else on the site. */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:var(--r);font-weight:600;font-size:.85rem;letter-spacing:.02em;transition:all .35s var(--e)}
.btn-w{background:var(--w);color:#fff}.btn-w:hover{background:var(--wl);transform:translateY(-2px);box-shadow:0 8px 30px var(--ws)}
.btn-d{background:var(--dk);color:#fff}.btn-d:hover{background:var(--dk2);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.15)}
.btn-g{border:1.5px solid rgba(255,255,255,.3);color:#fff}.btn-g:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-al{background:var(--al);color:#fff}.btn-al:hover{background:var(--alh);transform:translateY(-2px);box-shadow:0 8px 30px rgba(193,54,43,.32)}

/* === NAVBAR === */
.nb{position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;display:flex;align-items:center;padding:0 28px;background:transparent;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
/* DEFAULT: white text, for pages with a dark hero behind the bar */
.nb .nlt,.nb .nk a,.nb .np{color:rgba(255,255,255,.85)}
.nb .nk a:hover,.nb .np:hover{color:#fff}
.nb .nl svg path{stroke:#fff}
.nb .hb span{background:#fff}
/* SCROLLED, or .nb-solid for interior pages with no dark hero */
.nb.scrolled,.nb-solid{background:rgba(250,248,245,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--brd)}
.nb.scrolled .nlt,.nb.scrolled .nk a,.nb.scrolled .np,.nb-solid .nlt,.nb-solid .nk a,.nb-solid .np{color:var(--tx2)}
.nb.scrolled .nk a:hover,.nb.scrolled .np:hover,.nb-solid .nk a:hover,.nb-solid .np:hover{color:var(--tx)}
.nb.scrolled .nl svg path,.nb-solid .nl svg path{stroke:var(--tx)}
.nb.scrolled .hb span,.nb-solid .hb span{background:var(--tx)}
.ni{max-width:1240px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
.nl{display:flex;align-items:center;gap:12px;transition:opacity .3s}.nl:hover{opacity:.7}
.nlm{height:28px}.nlt{font-family:var(--fd);font-size:1.05rem;font-weight:600;transition:color .4s}
.nk{display:flex;gap:36px}.nk a{font-size:.82rem;font-weight:500;transition:color .4s}
.nr{display:flex;align-items:center;gap:24px}
.np{font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:6px;transition:color .4s}
.hb{display:none;flex-direction:column;gap:5px;padding:4px}.hb span{width:22px;height:2px;transition:transform .3s,opacity .3s,background .4s}
.hb.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hb.active span:nth-child(2){opacity:0}.hb.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mm{display:none;position:fixed;inset:0;z-index:999;background:rgba(250,248,245,.98);flex-direction:column;align-items:center;justify-content:center;gap:28px}.mm.open{display:flex}.mm a{font-family:var(--fd);font-size:1.6rem;color:var(--tx)}

/* Sticky emergency call bar (mobile only) */
.mcb{display:none;position:fixed;bottom:0;left:0;right:0;z-index:998;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(250,248,245,.96);backdrop-filter:blur(16px);border-top:1px solid var(--brd);gap:10px}
.mcb a{flex:1;text-align:center;padding:14px 0;border-radius:var(--r);font-weight:600;font-size:.85rem}
.mcb .mc1{background:var(--al);color:#fff}.mcb .mc2{border:1.5px solid var(--brd);color:var(--tx)}

/* === HERO === */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:-10% 0 0 0;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:120%;object-fit:cover}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(27,27,27,.93) 0%,rgba(27,27,27,.7) 40%,rgba(27,27,27,.25) 100%),linear-gradient(to top,rgba(27,27,27,.95) 0%,transparent 30%)}
.hc{position:relative;z-index:1;max-width:700px;padding-top:76px}
.hero .ey{color:var(--wl)}.hero .ey::before{background:var(--wl)}
.hero-title{font-family:var(--fd);font-size:clamp(3.4rem,8.5vw,6rem);font-weight:700;line-height:1;color:#fff;margin-bottom:28px;letter-spacing:-.02em}
.hero-title .accent{color:var(--wl)}
.hero-sub{font-size:1.15rem;font-weight:300;color:rgba(255,255,255,.88);max-width:500px;margin-bottom:44px;line-height:1.75}
/* Split hero: emergency path first, remodel path second */
.hpaths{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:660px;margin-bottom:56px}
.hpath{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--rl);padding:26px 24px;display:flex;flex-direction:column;gap:12px;text-align:left;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hpath-em{border-color:rgba(193,54,43,.5);background:rgba(193,54,43,.1)}
.hpath-ey{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wl)}
.hpath-em .hpath-ey{color:#F0A79E}
.hpath-tx{font-size:.9rem;font-weight:300;color:rgba(255,255,255,.82);line-height:1.6;flex:1}
.hpath .btn{width:100%;justify-content:center;padding:13px 20px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:.76rem;font-weight:500;letter-spacing:.05em;color:rgba(255,255,255,.55);text-transform:uppercase}
.hero-trust .sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0}

/* === TRUST BAR === */
.tb{padding:32px 0;border-bottom:1px solid var(--brd);background:var(--card)}
.tis{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.ti{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--tx3);font-weight:500;white-space:nowrap}.ti svg{width:18px;height:18px;color:var(--w);flex-shrink:0}

/* === SERVICES === */
.svc-featured{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--dk);border-radius:var(--rl);overflow:hidden;margin-bottom:16px;min-height:420px;transition:box-shadow .45s var(--e)}
.svc-featured:hover{box-shadow:0 20px 60px rgba(0,0,0,.2)}
.svc-f-img{position:relative;overflow:hidden}
.svc-f-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.svc-featured:hover .svc-f-img img{transform:scale(1.04)}
.svc-f-content{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;color:#fff}
.svc-f-num{font-family:var(--fd);font-size:7rem;color:rgba(255,255,255,.04);line-height:1;margin-bottom:-20px}
.svc-f-ico{width:48px;height:48px;color:var(--w);margin-bottom:24px}
.svc-f-title{font-family:var(--fd);font-size:1.8rem;font-weight:600;margin-bottom:14px}
.svc-f-desc{font-size:.95rem;color:rgba(255,255,255,.6);line-height:1.7;font-weight:300;margin-bottom:20px}
.svc-f-badge{display:inline-block;padding:6px 16px;border-radius:100px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:rgba(184,149,106,.15);color:var(--wl);width:fit-content}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sc{position:relative;border-radius:var(--rl);overflow:hidden;background:var(--card);border:1px solid var(--brd);padding:40px 32px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .45s var(--e)}
.sc:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.08);border-color:transparent}
.svc-num{font-family:var(--fd);font-size:5.5rem;position:absolute;top:12px;right:24px;line-height:1;color:rgba(0,0,0,.03);pointer-events:none}
.svc-ico{width:36px;height:36px;color:var(--w);margin-bottom:20px}
.svc-title{font-family:var(--fd);font-size:1.2rem;margin-bottom:10px;font-weight:600}
.svc-desc{font-size:.875rem;color:var(--tx2);line-height:1.65;font-weight:300}

/* === CTA BANNER === */
.cb{background:var(--dk);padding:80px 0;position:relative;overflow:hidden}
.cb::before{content:'';position:absolute;top:-60px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,var(--ws),transparent 70%);pointer-events:none}
.cbi{display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:1}
.cbt{font-family:var(--fd);font-size:clamp(1.5rem,3vw,2.2rem);color:#fff;font-weight:600;line-height:1.2;max-width:500px}.cbt .accent{color:var(--wl)}

/* === WHY US === */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.why-img{position:relative;border-radius:var(--rl);overflow:hidden}.why-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.why-badge{position:absolute;bottom:28px;left:28px;background:var(--card);border-radius:var(--r);padding:18px 22px;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.wb-val{font-family:var(--fd);font-size:1.5rem;font-weight:600;color:var(--tx)}.wb-lbl{font-size:.7rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.why-list{margin-top:44px;display:flex;flex-direction:column;gap:28px}
.why-item{display:flex;gap:18px;align-items:flex-start}
.why-dot{width:40px;height:40px;border-radius:10px;background:var(--wg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.why-dot svg{width:18px;height:18px;color:var(--w)}
.wi-t{font-weight:600;font-size:.92rem;margin-bottom:4px}.wi-d{font-size:.85rem;color:var(--tx2);line-height:1.65;font-weight:300}

/* === PROCESS (five steps) === */
.proc-sec{background:var(--dk);color:#fff}
.proc-sec .ey{color:var(--wl)}.proc-sec .ey::before{background:var(--wl)}.proc-sec .hl{color:#fff}.proc-sec .sl{color:rgba(255,255,255,.5)}
.proc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:40px}
.proc-step{text-align:center;position:relative}
.proc-num{font-family:var(--fd);font-size:4rem;font-weight:700;color:var(--w);line-height:1;margin-bottom:16px;opacity:0;transform:translateY(20px);transition:opacity .6s var(--e),transform .6s var(--e)}
.proc-step.active .proc-num{opacity:1;transform:translateY(0)}
.proc-title{font-family:var(--fd);font-size:1.15rem;color:#fff;margin-bottom:10px;font-weight:600;opacity:0;transform:translateY(15px);transition:opacity .5s .3s var(--e),transform .5s .3s var(--e)}
.proc-step.active .proc-title{opacity:1;transform:translateY(0)}
.proc-desc{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.7;max-width:100%;margin:0 auto;font-weight:300;opacity:0;transform:translateY(10px);transition:opacity .5s .5s var(--e),transform .5s .5s var(--e)}
.proc-step.active .proc-desc{opacity:1;transform:translateY(0)}
.proc-line{width:60px;height:2px;background:rgba(255,255,255,.08);margin:0 auto 24px;opacity:0;transition:opacity .4s .15s var(--e)}
.proc-step.active .proc-line{opacity:1}

/* === COMMITMENTS === */
.cmt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cmt{background:var(--card);border:1px solid var(--brd);border-radius:var(--rl);padding:32px 26px;transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .45s var(--e)}
.cmt:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.08);border-color:var(--ws)}
.cmt-ico{width:40px;height:40px;border-radius:10px;background:var(--wg);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cmt-ico svg{width:18px;height:18px;color:var(--w)}
.cmt-t{font-family:var(--fd);font-size:1.05rem;font-weight:600;margin-bottom:8px}
.cmt-d{font-size:.87rem;color:var(--tx2);line-height:1.65;font-weight:300}

/* === AREA === */
.area-sec{text-align:center;background:var(--bg2)}
.area-tags{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:36px}
.area-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.area-tag{padding:10px 22px;border-radius:100px;border:1px solid var(--brd);background:var(--card);font-size:.85rem;color:var(--tx2);font-weight:500;transition:all .3s var(--e)}
.area-tag:hover{border-color:var(--w);color:var(--tx);transform:translateY(-2px)}
.area-tag.home{border-color:var(--w);color:var(--w);background:var(--wg);font-weight:600}

/* === FAQ === */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--brd)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:1.02rem;font-weight:600;text-align:left;cursor:pointer;gap:16px;color:var(--tx);transition:color .3s}.faq-q:hover{color:var(--w)}
.faq-chev{width:18px;height:18px;flex-shrink:0;color:var(--tx3);transition:transform .3s,color .3s}.faq-item.open .faq-chev{transform:rotate(180deg);color:var(--w)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--e)}.faq-ai{padding-bottom:26px;font-size:.9rem;color:var(--tx2);line-height:1.75;font-weight:300}

/* === QUOTE / FORM === */
.quote-sec{background:var(--dk);color:#fff}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;max-width:1040px;margin:0 auto}
.q-info .ey{color:var(--wl)}.q-info .ey::before{background:var(--wl)}.q-info .hl{color:#fff}.q-info .sl{color:rgba(255,255,255,.5);margin-bottom:36px}
.q-perks{display:flex;flex-direction:column;gap:16px}
.q-perk{display:flex;align-items:center;gap:12px;font-size:.9rem;color:rgba(255,255,255,.6);font-weight:300}.q-perk svg{width:18px;height:18px;color:var(--ok);flex-shrink:0}
.q-form{background:rgba(255,255,255,.04);border:1px solid var(--brdl);border-radius:var(--rl);padding:40px}
.q-form-t{font-family:var(--fd);font-size:1.15rem;margin-bottom:28px;color:#fff;font-weight:600}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.f-grp{margin-bottom:14px}
.f-lbl{display:block;font-size:.7rem;color:rgba(255,255,255,.35);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.f-in,.f-sel,.f-ta{width:100%;padding:13px 16px;border-radius:var(--r);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-family:var(--fb);font-size:.88rem;font-weight:300;transition:border-color .25s}
.f-in:focus,.f-sel:focus,.f-ta:focus{border-color:var(--w);outline:none}
.f-in::placeholder,.f-ta::placeholder{color:rgba(255,255,255,.25)}
.f-sel{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.3)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.f-sel option{background:var(--dk);color:#fff}.f-ta{resize:vertical;min-height:80px}
.f-sub{width:100%;padding:15px;border-radius:var(--r);background:var(--w);color:var(--dk);font-weight:700;font-size:.95rem;cursor:pointer;border:none;transition:background .3s,transform .3s,box-shadow .3s;margin-top:8px}
.f-sub:hover{background:var(--wl);transform:translateY(-2px);box-shadow:0 8px 30px var(--ws)}
.f-or{text-align:center;margin-top:20px;font-size:.82rem;color:rgba(255,255,255,.3)}.f-or a{color:var(--wl);font-weight:600}
.f-hide{display:none}
.f-ok{display:none;text-align:center;padding:48px 24px}.f-ok.visible{display:block}
.f-ok-ico{width:64px;height:64px;border-radius:50%;background:var(--wg);border:2px solid var(--w);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:spop .5s cubic-bezier(.175,.885,.32,1.275)}
.f-ok-ico svg{width:28px;height:28px;color:var(--wl)}
@keyframes spop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.f-ok h3{font-family:var(--fd);font-size:1.4rem;color:#fff;margin-bottom:8px;font-weight:600}.f-ok p{color:rgba(255,255,255,.5);font-size:.9rem;font-weight:300}
/* === CUSTOM SELECT ===
   Replaces the native OS dropdown on the quote form. The real <select> is kept
   in the DOM (visually hidden, not display:none) so it still posts and still
   participates in validation. Built by site.js; if JS never runs, .cs-native is
   never applied and the styled native .f-sel above is what the user sees. */
.cs{position:relative}
.cs-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;padding:0;border:0;margin:0}
.cs-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-radius:var(--r);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-family:var(--fb);font-size:.88rem;font-weight:300;text-align:left;cursor:pointer;transition:border-color .25s,background .25s}
.cs-btn:hover{background:rgba(255,255,255,.08)}
.cs-btn:focus-visible{border-color:var(--w);outline:none}
.cs-open .cs-btn{border-color:var(--w);background:rgba(255,255,255,.08)}
.cs-empty .cs-txt{color:rgba(255,255,255,.25)}
.cs-chev{width:12px;height:12px;flex-shrink:0;color:rgba(255,255,255,.3);transition:transform .25s var(--e),color .25s}
.cs-open .cs-chev{transform:rotate(180deg);color:var(--w)}
.cs-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;max-height:264px;overflow-y:auto;padding:6px;border-radius:var(--r);border:1px solid rgba(255,255,255,.12);background:#20201F;box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--e),transform .18s var(--e),visibility .18s;overscroll-behavior:contain}
.cs-open .cs-list{opacity:1;visibility:visible;transform:translateY(0)}
.cs-opt{padding:11px 14px;border-radius:8px;font-size:.88rem;font-weight:300;color:rgba(255,255,255,.75);cursor:pointer;line-height:1.35;transition:background .15s,color .15s}
.cs-opt.cs-hot{background:rgba(255,255,255,.08);color:#fff}
.cs-opt.cs-on{color:var(--wl);font-weight:500}
.cs-opt.cs-on::after{content:'';float:right;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--w)}
.cs-list::-webkit-scrollbar{width:8px}
.cs-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
@media (prefers-reduced-motion:reduce){.cs-list,.cs-chev{transition:none}}

/* ==========================================================================
   MOTION PASS, ported from the Effects Library (local repo at
   ~/projects/clairvos/effects-library). React/shadcn originals rebuilt in
   vanilla CSS + tiny JS. The library is a catalogue of ideas, never a
   dependency here.

   SCOPING IS THE WHOLE POINT. Everything below sits under body[data-motion],
   which is set on / and /remodeling/ ONLY. The four emergency pages and the
   claims page carry the same stylesheet and pay nothing: no selectors match,
   and site.js returns before wiring any listener.

   Ported:  ScrollFloat, GlareHover, SpotlightCard, GradualBlur
   Remapped: every default from the library's Cortex Noir violet to --w/--wl.
   Blocked:  ImageComparison (before/after slider) needs real paired
             photography. Build it the day Steven delivers the first pair.
   ========================================================================== */

/* --- ScrollFloat. Headline lifts and settles as it enters the viewport. --- */
body[data-motion] .sfloat{display:inline-block}
body[data-motion] .sfloat-w{display:inline-block;white-space:pre;opacity:0;transform:translateY(26px) rotate(1.2deg);transition:opacity .7s var(--e),transform .7s var(--e)}
body[data-motion] .sfloat.v .sfloat-w{opacity:1;transform:none}

/* --- GlareHover. A light sweep crosses the card once on hover. ------------
   Pointer-fine only, so a phone never runs it and never pays the repaint. */
@media(hover:hover) and (pointer:fine){
  body[data-motion] .rel{position:relative;overflow:hidden;isolation:isolate}
  body[data-motion] .rel::before{content:'';position:absolute;top:0;left:-120%;width:70%;height:100%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.55) 55%,transparent 100%);transform:skewX(-18deg);transition:left .75s var(--e)}
  body[data-motion] .rel:hover::before{left:135%}
  body[data-motion] .rel:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.09);border-color:var(--ws)}
}

/* --- SpotlightCard. Warm radial follows the cursor across the grid. -------
   --sx/--sy are written by site.js; the gradient is inert until hover. */
@media(hover:hover) and (pointer:fine){
  body[data-motion] .rel::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s var(--e);background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),var(--wg),transparent 62%)}
  body[data-motion] .rel:hover::after{opacity:1}
  body[data-motion] .rel>*{position:relative;z-index:3}
}

/* --- GradualBlur. Stacked backdrop layers soften the base of the page hero.
   Pure CSS, no JS, no scroll listener. Six thin bands rather than one blur so
   the falloff reads progressive instead of like a frosted panel edge. */
body[data-motion] .pghero{isolation:isolate}
body[data-motion] .pghero .gblur{position:absolute;left:0;right:0;bottom:0;height:130px;z-index:2;pointer-events:none}
body[data-motion] .pghero .gblur i{position:absolute;left:0;right:0;display:block}
body[data-motion] .pghero .gblur i:nth-child(1){bottom:0;height:100%;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);mask-image:linear-gradient(to top,#000 0%,#000 12%,transparent 30%);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 12%,transparent 30%)}
body[data-motion] .pghero .gblur i:nth-child(2){bottom:0;height:82%;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);mask-image:linear-gradient(to top,#000 0%,#000 14%,transparent 34%);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 14%,transparent 34%)}
body[data-motion] .pghero .gblur i:nth-child(3){bottom:0;height:62%;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);mask-image:linear-gradient(to top,#000 0%,#000 16%,transparent 40%);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 16%,transparent 40%)}
body[data-motion] .pghero .gblur i:nth-child(4){bottom:0;height:42%;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:linear-gradient(to top,#000 0%,transparent 55%);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 55%)}
body[data-motion] .pghero .gblur::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--dk) 0%,rgba(27,27,27,.55) 45%,transparent 100%)}

@media(prefers-reduced-motion:reduce){
  body[data-motion] .sfloat-w{opacity:1!important;transform:none!important;transition:none!important}
  body[data-motion] .rel::before,body[data-motion] .rel::after{display:none}
  body[data-motion] .rel:hover{transform:none}
}

/* === FOOTER === */
.foot{background:var(--dk);color:rgba(255,255,255,.45);padding:72px 0 36px;border-top:1px solid rgba(255,255,255,.06)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px}
.foot-brand{font-family:var(--fd);font-size:1.05rem;color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:10px;font-weight:600}
.foot-desc{font-size:.85rem;line-height:1.7;max-width:300px;color:rgba(255,255,255,.35);font-weight:300}
.foot-heading{font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-bottom:18px}
.foot-links{display:flex;flex-direction:column;gap:10px}.foot-links a{font-size:.85rem;color:rgba(255,255,255,.35);transition:color .3s;font-weight:300}.foot-links a:hover{color:var(--wl)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid rgba(255,255,255,.06);font-size:.75rem;color:rgba(255,255,255,.25)}

/* === UTILITIES === */
.btt{position:fixed;bottom:90px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;color:var(--tx2);cursor:pointer;opacity:0;visibility:hidden;transition:all .3s;z-index:997;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.btt.visible{opacity:1;visibility:visible}.btt:hover{border-color:var(--w);color:var(--w)}
.skip-link{position:absolute;top:-100px;left:16px;padding:8px 16px;background:var(--dk);color:#fff;border-radius:0 0 8px 8px;z-index:10001;font-weight:600;transition:top .2s}.skip-link:focus{top:0}

/* === RESPONSIVE === */
@media(max-width:1024px){.svc-grid{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr 1fr;gap:32px}.proc-steps{grid-template-columns:1fr;gap:48px}.proc-num{font-size:5rem}.cmt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
.sec{padding:100px 0}
.nk,.np,.nr{display:none}.hb{display:flex}.mcb{display:flex}body{padding-bottom:76px}
.nlt{white-space:nowrap;font-size:.95rem}
.hc{text-align:center;max-width:100%;padding-bottom:64px}
.hero-sub{margin:0 auto 44px}
.hero .ey{justify-content:center}
.hpaths{grid-template-columns:1fr;gap:12px;max-width:100%;margin-bottom:48px}
.hero-trust{justify-content:center;font-size:.7rem}
.svc-featured{grid-template-columns:1fr}.svc-f-img{min-height:250px}
.svc-grid{grid-template-columns:1fr}.sc:nth-child(n+4){display:none}.svc-show-all .sc:nth-child(n+4){display:flex}
.svc-more-btn{display:block;margin:16px auto 0;padding:12px 28px;border-radius:var(--r);border:1.5px solid var(--brd);background:var(--card);color:var(--tx2);font-weight:600;font-size:.85rem;cursor:pointer;transition:all .3s var(--e)}.svc-more-btn:hover{border-color:var(--w);color:var(--w)}
.why-grid{grid-template-columns:1fr;gap:48px}
.cmt-grid{grid-template-columns:1fr}
.cbi{flex-direction:column;text-align:center}
.q-grid{grid-template-columns:1fr;gap:40px}.f-row{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr}.foot-bottom{flex-direction:column;gap:8px;text-align:center}
.tb{padding:24px 0}.tis{flex-direction:column;align-items:flex-start;gap:14px;justify-content:flex-start;padding:0}
.ti{white-space:normal;align-items:flex-start;line-height:1.5}.ti svg{margin-top:1px}
.btt{bottom:84px;right:16px}
}
@media(min-width:769px){.svc-more-btn{display:none}}
@media(max-width:375px){.hero-title{font-size:2.8rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.r,.rl,.rr,.rs{opacity:1;transform:none}.proc-num,.proc-title,.proc-desc,.proc-line{opacity:1;transform:none}}

/* ==========================================================================
   MOTION PASS  (2026-08-01)

   Ported by hand from the Clairvos Effects Library. Nothing here is a
   dependency: the library is React + Tailwind + shadcn and Camelback stays
   vanilla. These are the ideas, rebuilt in CSS.

   Rules this pass holds to:
   - ZERO added JavaScript. Everything hangs off the .v class the existing
     IntersectionObserver already sets, or off :hover.
   - Hover effects are gated behind (hover:hover) and (pointer:fine), so a
     phone never computes them.
   - Emergency surfaces get restraint. The only looping animation on an
     emergency element is the call-button ring and the live dot, both cheap
     compositor-only properties.
   - Everything is disabled under prefers-reduced-motion at the bottom.

   Deliberately NOT ported: every WebGL/Three background (Aurora, Plasma,
   Prism, LiquidChrome, Galaxy, Hyperspeed, PixelBlast), the whole threecn
   category, all cursor effects (BlobCursor, SplashCursor, TargetCursor,
   Crosshair, GhostCursor) which do nothing on an 80%-mobile site, and
   CountUp, which is the component the client asked us to remove today.
   ========================================================================== */

:root{--live:#5FD08A}

/* --- Hero headline: per-line mask reveal (SplitText, rebuilt in CSS) ------
   The .r class stays on the h1 purely so the observer still sets .v. Its own
   transform is neutralised and the inner lines do the work instead. */
.hero-title.r{opacity:1;transform:none;transition:none}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero-title .ln>span{display:block;transform:translateY(115%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.hero-title.v .ln>span{transform:translateY(0)}
.hero-title.v .ln:nth-child(1)>span{transition-delay:.06s}
.hero-title.v .ln:nth-child(2)>span{transition-delay:.17s}

/* --- Live dot on "Answered 24/7" -----------------------------------------
   Reads as "someone is there right now", which is the single claim the
   emergency pillar rests on. One new token, one use. */
.hero-trust span:first-child{display:inline-flex;align-items:center;gap:8px}
.hero-trust span:first-child::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--live);flex-shrink:0;animation:livePulse 2.6s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(95,208,138,.5)}70%{box-shadow:0 0 0 7px rgba(95,208,138,0)}100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}}

/* --- Emergency call button: breathing ring (hero only) --------------------
   Not applied to the CTA banner button. One pulsing element per page. */
.hpath-em .btn-al{position:relative}
.hpath-em .btn-al::after{content:'';position:absolute;inset:-3px;border-radius:calc(var(--r) + 3px);border:1px solid var(--al);pointer-events:none;animation:emPulse 3s cubic-bezier(.25,.1,.25,1) infinite}
@keyframes emPulse{0%{opacity:.6;transform:scale(1)}65%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}

/* --- Process rail: the existing 60px line now draws instead of fading ----- */
.proc-line{transform:scaleX(0);transform-origin:center;transition:opacity .4s .15s var(--e),transform .7s .15s cubic-bezier(.16,1,.3,1)}
.proc-step.active .proc-line{transform:scaleX(1)}

/* --- Commitment cards: icon tile settles in on reveal --------------------- */
.cmt-ico{transform:scale(.82);opacity:0;transition:transform .65s .12s cubic-bezier(.34,1.4,.64,1),opacity .5s .12s var(--e),background .45s var(--e)}
.cmt.v .cmt-ico{transform:scale(1);opacity:1}

/* --- Why-us icon tiles: settle in with the row --------------------------- */
.why-dot{transition:background .45s var(--e),transform .45s var(--e)}

/* --- Hover-only refinements. Never computed on touch. -------------------- */
@media(hover:hover) and (pointer:fine){

  /* GlareHover: a light sweep across the card face. Both card types already
     carry overflow:hidden, so the sweep clips to the rounded corner.
     .sc is already position:relative; .svc-featured is not, so it needs it
     or the pseudo-element escapes to the nearest positioned ancestor. */
  .svc-featured{position:relative}
  .sc::after,.svc-featured::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;transform:translateX(-130%) skewX(-18deg);transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .sc::after{background:linear-gradient(90deg,transparent,rgba(184,149,106,.16),transparent)}
  .svc-featured::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
  .sc:hover::after,.svc-featured:hover::after{transform:translateX(130%) skewX(-18deg)}

  /* Service card interior lifts with the card */
  .svc-ico{transition:transform .45s var(--e),color .45s var(--e)}
  .sc:hover .svc-ico{transform:translateY(-3px)}
  .svc-num{transition:color .5s var(--e)}
  .sc:hover .svc-num{color:rgba(184,149,106,.10)}

  /* Icon tiles warm and tilt on card hover */
  .cmt:hover .cmt-ico{background:var(--ws);transform:translateY(-3px) rotate(-5deg)}
  .why-item:hover .why-dot{background:var(--ws);transform:translateY(-2px)}

  /* Nav and footer links get a quiet underline wipe */
  .nk a{position:relative}
  .nk a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .nk a:hover::after{transform:scaleX(1);transform-origin:left}

  /* Area tags settle rather than jump */
  .area-tag{transition:border-color .3s var(--e),color .3s var(--e),background .3s var(--e),transform .45s cubic-bezier(.34,1.4,.64,1)}
}

/* --- Reduced motion: kill every loop and every offset added above -------- */
/* ==========================================================================
   NAVIGATION DROPDOWN
   The service routes have to be reachable from the nav, not just from cards
   mid-page and the footer. Desktop gets a hover/focus panel under Services;
   mobile gets every route listed flat in the hamburger menu instead, because
   a nested dropdown on a phone is worse than a longer list.
   CSS only, no JS. :focus-within keeps it keyboard-reachable.
   ========================================================================== */
.nk{align-items:stretch}
.nk-item{position:relative;display:flex;align-items:center;height:76px}
.nk-item>a{display:flex;align-items:center;gap:6px}
.nk-chev{width:11px;height:11px;flex-shrink:0;transition:transform .3s var(--e)}
.nk-item:hover .nk-chev,.nk-item:focus-within .nk-chev{transform:rotate(180deg)}
.nk-panel{position:absolute;top:100%;left:50%;min-width:252px;transform:translateX(-50%) translateY(6px);background:rgba(250,248,245,.985);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--brd);border-radius:var(--rl);padding:10px;box-shadow:0 18px 50px rgba(0,0,0,.16);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s var(--e),transform .26s var(--e)}
.nk-item:hover .nk-panel,.nk-item:focus-within .nk-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nk-panel a{display:block;padding:11px 14px;border-radius:9px;font-size:.84rem;font-weight:500;line-height:1.3;color:var(--tx2)!important;transition:background .22s var(--e),color .22s var(--e)}
.nk-panel a:hover,.nk-panel a:focus-visible{background:var(--wg);color:var(--tx)!important}
.nk-panel .nk-sep{height:1px;background:var(--brd);margin:8px 10px}

/* Mobile menu carries every route, so it needs to fit on a short screen */
@media(max-width:768px){
.mm{gap:16px;justify-content:flex-start;padding:96px 24px 40px;overflow-y:auto}
.mm a{font-size:1.22rem}
}

/* ==========================================================================
   INTERIOR PAGES
   Shared by every route other than /. Emergency pages (water, fire, storm)
   and the calmer pages (remodeling, about) use the same shell; the only
   difference is whether .estrip appears and how often.
   ========================================================================== */

/* --- Compact page hero. Dark, so the default white nav still works. ------ */
.pghero{position:relative;background:var(--dk);color:#fff;padding:148px 0 76px;overflow:hidden}
.pghero::before{content:'';position:absolute;top:-140px;right:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--ws),transparent 68%);pointer-events:none}
.pghero .ct{position:relative;z-index:1}
.pghero .ey{color:var(--wl)}.pghero .ey::before{background:var(--wl)}
.crumb{display:flex;gap:9px;align-items:center;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.38);margin-bottom:20px}
.crumb a{transition:color .3s}.crumb a:hover{color:var(--wl)}
.crumb i{font-style:normal;opacity:.45}
.pgh1{font-family:var(--fd);font-size:clamp(2.5rem,5.4vw,4rem);font-weight:700;line-height:1.06;letter-spacing:-.02em;color:#fff;margin-bottom:20px;max-width:17ch}
.pgh1 .accent{color:var(--wl)}
.pgsub{font-size:1.05rem;font-weight:300;color:rgba(255,255,255,.75);max-width:620px;line-height:1.75;margin-bottom:34px}
.pgcta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pgnote{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:500;margin-top:22px}

/* --- Long-form body copy ------------------------------------------------- */
.split{display:grid;grid-template-columns:1.12fr 1fr;gap:72px;align-items:start}
.prose{max-width:720px}
.prose h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:600;line-height:1.2;margin-bottom:18px}
.prose h2 .accent{color:var(--w)}
.prose h3{font-family:var(--fd);font-size:1.18rem;font-weight:600;margin:34px 0 10px}
.prose p{font-size:1rem;color:var(--tx2);line-height:1.8;font-weight:300;margin-bottom:18px}
.prose p strong{color:var(--tx);font-weight:600}
.prose p:last-child{margin-bottom:0}

/* --- Checklist ----------------------------------------------------------- */
.chk{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.chk li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;color:var(--tx2);font-weight:300;line-height:1.7}
.chk li strong{color:var(--tx);font-weight:600}
.chk svg{width:17px;height:17px;color:var(--w);flex-shrink:0;margin-top:5px}
.chk.chk-no svg{color:var(--al)}

/* --- Sidebar card -------------------------------------------------------- */
.aside{background:var(--card);border:1px solid var(--brd);border-radius:var(--rl);padding:34px 30px;position:sticky;top:100px}
.aside-t{font-family:var(--fd);font-size:1.2rem;font-weight:600;margin-bottom:8px}
.aside-d{font-size:.88rem;color:var(--tx2);font-weight:300;line-height:1.7;margin-bottom:22px}
.aside .btn{width:100%;justify-content:center}
.aside-meta{margin-top:20px;padding-top:20px;border-top:1px solid var(--brd);font-size:.76rem;color:var(--tx3);line-height:1.7;font-weight:500;letter-spacing:.04em;text-transform:uppercase}

/* --- Emergency strip. The alert color's third and final home. ------------ */
.estrip{background:var(--al);color:#fff;padding:26px 0}
.estrip .ct{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;text-align:center}
.estrip-t{font-weight:600;font-size:1rem;letter-spacing:.01em}
.estrip-t span{opacity:.75;font-weight:300}
.estrip a{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--al);padding:12px 24px;border-radius:var(--r);font-weight:700;font-size:.92rem;transition:transform .3s var(--e),box-shadow .3s var(--e)}
.estrip a svg{width:16px;height:16px}

/* --- Related services ---------------------------------------------------- */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel{display:block;background:var(--card);border:1px solid var(--brd);border-radius:var(--rl);padding:28px 26px;transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .45s var(--e)}
.rel-t{font-family:var(--fd);font-size:1.06rem;font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:9px}
.rel-t svg{width:17px;height:17px;color:var(--w);flex-shrink:0}
.rel-d{font-size:.85rem;color:var(--tx2);font-weight:300;line-height:1.65}

@media(max-width:1024px){.split{grid-template-columns:1fr;gap:48px}.aside{position:static}.rel-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
.pghero{padding:118px 0 58px}
.pgh1{max-width:100%}
.pgcta{flex-direction:column;align-items:stretch}.pgcta .btn{justify-content:center}
.rel-grid{grid-template-columns:1fr}
.estrip .ct{flex-direction:column;gap:14px}
.estrip a{width:100%;justify-content:center}
}
@media(hover:hover) and (pointer:fine){
.rel:hover{transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,.08);border-color:var(--ws)}
.estrip a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
}

@media(prefers-reduced-motion:reduce){
  .hero-title .ln>span{transform:none!important}
  .hero-trust span:first-child::before,.hpath-em .btn-al::after{animation:none!important}
  .hpath-em .btn-al::after{opacity:.4}
  .proc-line{transform:none!important}
  .cmt-ico{transform:none!important;opacity:1!important}
  .sc::after,.svc-featured::after{display:none}
}