:root{color-scheme:light dark;--ground:#fff;--panel:#f3f4f7;--ink:#15161c;--muted:#5d6070;--rule:#e3e5ec;
--accent:#ff5a1f;--accent-ink:#c2410c;--warn-bg:#fff1e8;--ease:cubic-bezier(.16,1,.3,1);
--c-pool:#1fb8ea;--c-roofing:#ff5b4f;--c-seismic-retrofit:#ffc61a;--c-remodel:#7c3aed;--c-addition:#2bc766;--c-adu:#ff7eb9}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ground:#101116;--panel:#1a1c23;--ink:#f2f3f7;--muted:#a3a7b7;
--rule:#2b2e38;--accent-ink:#ff8a5b;--warn-bg:#2a1a12;--c-remodel:#9466ff}}
:root[data-theme=dark]{--ground:#101116;--panel:#1a1c23;--ink:#f2f3f7;--muted:#a3a7b7;--rule:#2b2e38;--accent-ink:#ff8a5b;--warn-bg:#2a1a12;--c-remodel:#9466ff}
.k-pool{--c:var(--c-pool);--on:#08222c}.k-roofing{--c:var(--c-roofing);--on:#260806}
.k-seismic-retrofit{--c:var(--c-seismic-retrofit);--on:#2a1f00}.k-remodel{--c:var(--c-remodel);--on:#fff}
.k-addition{--c:var(--c-addition);--on:#062812}.k-adu{--c:var(--c-adu);--on:#2e0a1c}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:16.5px/1.55 "Bricolage Grotesque",system-ui,sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
aside{padding:26px 16px;position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--rule);view-transition-name:side}
.mark{display:flex;align-items:center;gap:10px;margin:0 8px 30px;font-weight:800;font-size:22px;letter-spacing:-.04em;line-height:1}
.mark svg{width:30px;height:30px;flex:none;border-radius:8px}
aside h2{font-size:13px;font-weight:700;color:var(--muted);margin:0 12px 8px}
aside ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
aside li a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:999px;font-size:15.5px;font-weight:600;
transition:background .2s,color .2s}
aside li a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,var(--ink));flex:none}
aside li a em{margin-left:auto;font-style:normal;font-weight:500;color:var(--muted);font-size:14px}
aside li a:hover{background:var(--panel)}
aside li a.on{background:var(--c,var(--ink));color:var(--on,var(--ground))}aside li a.on em{color:inherit;opacity:.8}
aside li a.on::before{background:currentColor}
.main{min-width:0;display:flex;flex-direction:column}
main{width:100%;max-width:1120px;padding:44px 48px 32px}
h1{font-weight:800;font-size:clamp(38px,5.4vw,74px);line-height:.98;letter-spacing:-.04em;margin:0 0 18px;text-wrap:balance}
h2{font-weight:800;font-size:25px;letter-spacing:-.03em;line-height:1.15;margin:56px 0 16px}
.lede{font-size:19px;color:var(--muted);max-width:52ch;margin:0 0 34px;text-wrap:pretty}
/* home: six boxes */
.home h1{max-width:13ch}
.boxes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.boxes li{grid-column:span 2}.boxes li:nth-child(1){grid-column:span 4}.boxes li:nth-child(2){grid-column:span 2}
.box{display:flex;flex-direction:column;height:100%;background:var(--c);color:var(--on);border-radius:26px;overflow:hidden;
box-shadow:0 1px 2px rgb(20 20 30/.06),0 12px 28px -14px rgb(20 20 30/.28);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.box .ph{position:relative;aspect-ratio:16/10;overflow:hidden;margin:8px 8px 0;border-radius:20px;background:rgb(0 0 0/.12)}
.boxes li:nth-child(1) .ph{aspect-ratio:16/8}
.box img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.box .tag{position:absolute;left:12px;bottom:12px;background:var(--ground);color:var(--ink);border-radius:999px;padding:5px 12px;
font-size:13.5px;font-weight:600;box-shadow:0 6px 16px -8px rgb(0 0 0/.4);max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box .tag b{font-weight:800}
.box .lab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 20px 20px}
.box .lab b{display:block;font-size:26px;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.box .lab small{font-size:15px;font-weight:600;opacity:.85}
.box .go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--on);color:var(--c);
transition:transform .45s var(--ease)}
.box:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgb(20 20 30/.06),0 22px 40px -18px rgb(20 20 30/.4)}
.box:hover img{transform:scale(1.05)}.box:hover .go{transform:rotate(45deg)}
/* category: box art header */
.art{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--c);color:var(--on);
border-radius:32px;padding:36px 36px 36px 40px;margin:0 0 28px}
.art h1{font-size:clamp(36px,4.6vw,64px);margin:0 0 14px}
.art p{margin:0;font-size:18px;font-weight:500;max-width:36ch}
.art .ph{border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 20px 40px -18px rgb(0 0 0/.45);rotate:2deg}
.art .ph img{width:100%;height:100%;object-fit:cover}
.find{position:relative;margin:0 0 18px}.find svg{position:absolute;left:18px;top:50%;translate:0 -50%;color:var(--muted)}
.find input{width:100%;font:inherit;font-size:16.5px;padding:14px 20px 14px 48px;border:1.5px solid var(--rule);border-radius:999px;
background:var(--ground);color:var(--ink);transition:border-color .2s}
.find input:hover,.find input:focus{border-color:var(--ink)}.find input::placeholder{color:var(--muted)}
table.rank{width:100%;border-collapse:separate;border-spacing:0}
.rank th{font-size:13.5px;font-weight:700;color:var(--muted);text-align:left;padding:0 12px 10px}
.rank td{padding:16px 12px;border-top:1px solid var(--rule);vertical-align:middle}
.rank tbody tr{transition:background .2s}.rank tbody tr:hover{background:var(--panel)}
.rank td.pos{width:60px;padding-left:4px}
.num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--c);font-weight:800;font-size:15px}
tr:nth-child(-n+3) .num{background:var(--c);color:var(--on)}
.rank .who a.nm{font-weight:750;font-size:17.5px;letter-spacing:-.015em}.rank .who a.nm:hover{color:var(--accent-ink)}
.rank .who div{font-size:14.5px;color:var(--muted)}.rank .count{width:24%}
.bar{position:relative;height:30px;display:flex;align-items:center}
.bar span{position:absolute;inset:0 auto 0 0;background:var(--c,var(--accent));border-radius:999px;min-width:30px;opacity:.9}
.bar b{position:relative;padding:0 12px;font-weight:800;font-size:15px;color:var(--on,var(--ink))}
.rank td.money,.rank th.money{text-align:right;white-space:nowrap;font-weight:600}
.rank .zips{font-size:14px;color:var(--muted);white-space:nowrap}
.rank td.act{text-align:right;white-space:nowrap;padding-right:4px}
.rank tr.more{display:none}.rank.open tr.more{display:table-row}.rank tr.hit-none{display:none!important}
.badge{display:inline-flex;align-items:center;gap:5px;margin:6px 0 0;padding:3px 10px 3px 8px;border-radius:999px;background:var(--c,var(--ink));
color:var(--on,var(--ground));font-size:12.5px;font-weight:700}.badge svg.i{width:14px;height:14px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:16px;font-weight:700;padding:12px 22px;
border-radius:999px;border:1.5px solid transparent;background:var(--accent);color:#1a0a02;cursor:pointer;
box-shadow:0 8px 18px -10px rgb(255 90 31/.9);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s}
.pill:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgb(255 90 31/.9)}.pill:active{transform:translateY(0)}
.pill.ghost{background:var(--ground);color:var(--ink);border-color:var(--rule);box-shadow:none}.pill.ghost:hover{border-color:var(--ink)}
.pill.sm{font-size:14.5px;padding:8px 16px}
button.show{margin:20px 0 0}
.fine{font-size:14.5px;color:var(--muted);margin-top:22px;max-width:70ch}
/* profile */
.head{background:var(--c);color:var(--on);border-radius:32px;padding:36px 40px 32px;margin:0 0 20px}
.head h1{font-size:clamp(34px,4.6vw,60px);margin:0 0 6px;max-width:20ch}
.where{font-size:18px;font-weight:500;margin:0 0 20px;opacity:.9}
.facts{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{display:inline-flex;align-items:center;gap:8px;background:var(--ground);color:var(--ink);border-radius:999px;padding:7px 14px 7px 12px;font-size:15px;font-weight:600}
.facts li b{font-weight:800}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.head .pill:not(.ghost){background:var(--on);color:var(--c);box-shadow:0 10px 20px -12px rgb(0 0 0/.6)}.head .pill.ghost{border-color:transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.warn{display:flex;gap:12px;align-items:flex-start;background:var(--warn-bg);border:1.5px solid var(--accent);border-radius:20px;padding:16px 20px;
margin:0 0 20px;font-weight:600}.warn svg.i{color:var(--accent-ink);margin-top:3px;width:20px;height:20px}
.mix{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.mix li a{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;font-weight:650}
.mix li a:hover span.n{text-decoration:underline}
table.list{width:100%;border-collapse:collapse}
.list td,.list th{padding:13px 12px;border-top:1px solid var(--rule);text-align:left;vertical-align:top;font-size:16px}
.list th{font-size:13.5px;color:var(--muted);font-weight:700;border-top:0;padding-top:0}
.list .desc{display:block;font-size:14px;color:var(--muted)}
.list td.r,.list th.r{text-align:right;white-space:nowrap}.list td:first-child,.list th:first-child{padding-left:0}
.more-tile{display:grid;grid-template-columns:200px 1fr auto;gap:22px;align-items:center;margin:56px 0 0;padding:10px 22px 10px 10px;
background:var(--c);color:var(--on);border-radius:26px;transition:transform .45s var(--ease)}
.more-tile img{width:200px;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.more-tile b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.1}.more-tile small{font-size:15px;font-weight:600;opacity:.85}
.more-tile .go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--on);color:var(--c)}
.more-tile:hover{transform:translateY(-3px)}
@media (min-width:721px){.boxes li:nth-child(2) .box .ph{aspect-ratio:auto;flex:1 1 auto;min-height:200px}}
.q-intro{position:sticky;top:40px;align-self:start}
/* quote request: the category's color block, fields on white */
.qstart{display:flex;gap:8px;margin:24px 0 0;max-width:430px}
.qstart input{flex:1;min-width:0;font:inherit;font-size:16.5px;padding:12px 18px;border-radius:999px;border:0;background:var(--ground);color:var(--ink)}
.qstart input::placeholder{color:var(--muted)}
.art .pill,.quote .pill{background:var(--on);color:var(--c);box-shadow:0 10px 20px -12px rgb(0 0 0/.6)}
.quote{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 44px;background:var(--c);color:var(--on);
border-radius:32px;padding:40px;margin:56px 0 0;scroll-margin-top:24px}
.quote h2{margin:0 0 12px;font-size:clamp(26px,3vw,36px);line-height:1.05}.q-intro p{margin:0;font-size:17px;font-weight:500;max-width:38ch}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;align-content:start}
.qform .wide,.qform fieldset{grid-column:1/-1}
.qform label{display:grid;gap:6px;font-size:15px;font-weight:700}.qform label small{font-weight:500;font-size:13.5px;opacity:.85}
.qform input:not([type=radio]):not([type=checkbox]),.qform select,.qform textarea{width:100%;font:inherit;font-size:16px;font-weight:500;
padding:11px 14px;border-radius:14px;border:2px solid transparent;background:var(--ground);color:var(--ink)}
.qform textarea{resize:vertical;min-height:84px}.qform ::placeholder{color:var(--muted)}
.qform :user-invalid{border-color:#b00020}
.qform fieldset{border:0;margin:0;padding:0}.qform legend{font-size:15px;font-weight:700;padding:0;margin:0 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:block;padding:8px 14px;border-radius:999px;background:var(--ground);color:var(--ink);font-weight:600;font-size:15px;
transition:background .2s,color .2s}
.opt input:checked+span{background:var(--on);color:var(--c)}.opt input:focus-visible+span{outline:3px solid var(--on);outline-offset:2px}
.qform label.check{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15px}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--on)}
.q-send{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14.5px;font-weight:500}
.q-send a{text-decoration:underline;text-underline-offset:2px}
.pill:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.q-status{margin:0;font-weight:700}.q-status:empty{display:none}
.q-done{display:none}.quote.sent .qform{display:none}.quote.sent .q-done{display:block}.q-done:focus{outline:0}
/* paying for it */
.pay{margin:56px 0 0}.pay-lede{color:var(--muted);margin:-6px 0 18px}
.ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.ways li{border-top:2px solid var(--ink);padding:14px 0 0}.ways b{display:block;font-size:17.5px;letter-spacing:-.01em;margin:0 0 4px}
.ways span{color:var(--muted);font-size:15.5px}
.grant{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border-radius:20px;padding:16px 20px;margin:22px 0 0;font-size:15.5px}
.grant svg.i{margin-top:3px;width:20px;height:20px}.grant a,.pay.sm a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pay.sm h2{font-size:21px;margin-bottom:6px}.pay.sm p{margin:0}
.partners{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;margin:20px 0 0}.pline{color:var(--muted);font-size:15px}
.doc h2{margin-top:36px}.doc p{max-width:65ch}.doc a{text-decoration:underline}
footer{margin-top:auto;padding:28px 48px 40px;color:var(--muted);font-size:13.5px;max-width:1120px}
footer p{max-width:80ch;margin:0 0 6px}footer a{text-decoration:underline;text-underline-offset:2px}footer a:hover{color:var(--ink)}
@media (max-width:900px){.shell{grid-template-columns:1fr}
aside{position:sticky;z-index:5;height:auto;border-right:0;border-bottom:1px solid var(--rule);padding:12px 0 10px;background:var(--ground)}
.mark{margin:0 16px 10px;font-size:20px}.mark svg{width:26px;height:26px}aside h2{display:none}
aside ul{display:flex;gap:6px;overflow-x:auto;padding:0 16px 2px;scrollbar-width:none}aside ul::-webkit-scrollbar{display:none}
aside li a{white-space:nowrap;border:1.5px solid var(--rule);padding:7px 12px;font-size:15px}aside li a.on{border-color:transparent}
main{padding:24px 16px 16px}footer{padding:20px 16px 32px}
.quote{grid-template-columns:1fr;scroll-margin-top:110px}.q-intro{position:static}.art{grid-template-columns:1fr;padding:26px 22px 22px;border-radius:26px;gap:20px}.art .ph{rotate:0deg;aspect-ratio:16/9}
.head{padding:26px 22px 22px;border-radius:26px}}
@media (max-width:720px){.quote{grid-template-columns:1fr;padding:26px 20px;border-radius:26px}.qform{grid-template-columns:1fr}.ways{grid-template-columns:1fr;gap:18px}
.qstart .pill{padding:12px 16px}.boxes{grid-template-columns:1fr 1fr;gap:12px}.boxes li,.boxes li:nth-child(n){grid-column:span 1}
.boxes li:nth-child(1){grid-column:span 2}.box{border-radius:22px}.box .ph{border-radius:16px;margin:6px 6px 0}.boxes li:nth-child(1) .ph{aspect-ratio:16/9}
.box .lab{padding:12px 14px 14px}.box .lab b{font-size:19px}.box .lab small{font-size:13.5px}.box .go,.box .tag{display:none}
.boxes li:nth-child(1) .tag{display:block}
.rank thead{display:none}.rank,.rank tbody{display:block}
.rank tr{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 10px;padding:14px 0;border-top:1px solid var(--rule)}
.rank.open tr.more{display:grid}.rank td{border:0;padding:0}.rank td.pos{grid-row:1/4;padding:2px 0 0}
.rank .count{width:auto;grid-column:2}.rank td.act{grid-column:2;text-align:left;padding-top:6px}
.rank .zips,.hide-sm{display:none}.mix li a{grid-template-columns:110px 1fr}
.more-tile{grid-template-columns:110px 1fr;padding-right:14px}.more-tile img{width:110px}.more-tile .go{display:none}}
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
.boxes li{animation:deal .9s var(--ease) both;animation-delay:calc(var(--n)*70ms + 80ms)}
@keyframes deal{from{opacity:0;transform:translateY(28px) rotate(1.5deg) scale(.97)}}
.box img,.art .ph img{animation:settle 1.4s var(--ease) both}@keyframes settle{from{scale:1.12}}
.art .ph{animation:land 1s var(--ease) .1s both}@keyframes land{from{opacity:0;rotate:9deg;translate:40px 10px}}
.art h1,.head h1,.home h1{animation:rise .8s var(--ease) both}.art p,.head .where,.home .lede{animation:rise .8s var(--ease) .08s both}
.facts li{animation:rise .7s var(--ease) both;animation-delay:calc(var(--n)*50ms + 150ms)}
@keyframes rise{from{opacity:0;translate:0 16px}}
.bar span{transform-origin:left;animation:grow 1s var(--ease) both;animation-delay:calc(var(--n,0)*40ms + 250ms)}
@keyframes grow{from{transform:scaleX(0)}}
@supports (animation-timeline:view()){.rank tbody tr:nth-child(n+9){animation:rowin linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
@keyframes rowin{from{opacity:0;translate:0 18px}}}}