:root{
  --bg:#f6f7f4;--card:#fff;--ink:#14231c;--muted:#5d6b64;--line:#e3e7e2;
  --brand:#0b6b45;--brand-ink:#fff;--brand-soft:#e3f2ea;--accent:#e8a33d;--accent-soft:#fdf2df;
  --ok:#137a43;--warn:#a15c00;--warn-soft:#fff4e0;--bad:#b42318;--bad-soft:#fdecea;--info-soft:#e8f0fb;--info:#1d4f91;
  --radius:14px;--shadow:0 1px 2px rgba(20,35,28,.06),0 4px 14px rgba(20,35,28,.05);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1512;--card:#17201b;--ink:#e8efe9;--muted:#9fb0a6;--line:#2a362f;--brand:#3fb67f;--brand-ink:#06150d;--brand-soft:#173628;
  --accent-soft:#3a2c14;--warn-soft:#352711;--bad-soft:#3a1714;--info-soft:#16253a;--info:#8db4ea;--ok:#5bd394;--bad:#ff8a80;--warn:#f5b759;
  --shadow:none;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);padding-bottom:76px}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.45rem}h2{font-size:1.15rem}h3{font-size:1rem}
p{margin:.3em 0 .8em}
small,.muted{color:var(--muted)}
.wrap{max-width:760px;margin:0 auto;padding:16px}
header.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px}
.logo{font-weight:800;font-size:1.1rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.logo b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:var(--brand-ink);font-size:.95rem}
.spacer{flex:1}
.iconbtn{position:relative;background:none;border:0;font-size:1.25rem;padding:6px;cursor:pointer;color:var(--ink)}
.dot{position:absolute;top:2px;right:0;background:var(--bad);color:#fff;font-size:.65rem;border-radius:9px;padding:0 5px;font-weight:700}
nav.bottom{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--card);border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)}
nav.bottom a{flex:1;text-align:center;padding:8px 0 7px;font-size:.72rem;color:var(--muted);position:relative}
nav.bottom a span{display:block;font-size:1.25rem;line-height:1.2}
nav.bottom a.on{color:var(--brand);font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 12px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.row{display:flex;gap:10px;align-items:center}
.row.top{align-items:flex-start}
.wrapx{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:420px){.grid3{grid-template-columns:1fr 1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:var(--brand);color:var(--brand-ink);border-radius:11px;padding:11px 16px;font:600 .95rem var(--font);cursor:pointer;min-height:44px;text-align:center}
.btn.alt{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost{background:none;color:var(--brand);padding:8px 10px;min-height:0}
.btn.bad{background:var(--bad);color:#fff}
.btn.sm{padding:7px 12px;min-height:34px;font-size:.85rem}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:default}
label{display:block;font-weight:600;font-size:.88rem;margin:12px 0 4px}
label small{font-weight:400}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 12px;min-height:44px}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:8px 0}
.check input{width:auto;min-height:0;margin-top:4px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:.78rem;font-weight:600;border:0}
.chip.grey{background:var(--line);color:var(--ink)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.info{background:var(--info-soft);color:var(--info)}
button.chip{cursor:pointer;font:600 .82rem var(--font);padding:7px 12px}
button.chip.on{background:var(--brand);color:var(--brand-ink)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;color:var(--ok);background:var(--brand-soft);border-radius:8px;padding:2px 8px;cursor:help}
.av{width:52px;height:52px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;flex:none;object-fit:cover;font-size:1.1rem}
.av.lg{width:76px;height:76px;font-size:1.6rem}
.av.sm{width:36px;height:36px;font-size:.85rem}
.stars{color:var(--accent);letter-spacing:1px;white-space:nowrap}
.stat{background:var(--bg);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:1.2rem}
.stat small{font-size:.74rem}
.hero{background:linear-gradient(135deg,#0b6b45,#0e4f37);color:#fff;border-radius:18px;padding:22px 18px;margin-bottom:14px}
.hero h1{font-size:1.6rem;margin-bottom:6px}
.hero p{opacity:.9}
.search{display:flex;gap:8px;background:#fff;border-radius:12px;padding:6px;margin-top:12px}
.search input{border:0;min-height:40px;color:#14231c;background:#fff}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (min-width:560px){.cats{grid-template-columns:repeat(6,1fr)}}
.cat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center;font-size:.76rem;color:var(--ink);line-height:1.2}
.cat span{display:block;font-size:1.5rem;margin-bottom:3px}
.list>a,.list>div.item{display:block;color:var(--ink);border-bottom:1px solid var(--line);padding:12px 0}
.list>a:last-child,.list>div.item:last-child{border-bottom:0}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px;scrollbar-width:none}
.tabs a,.tabs button{white-space:nowrap;padding:8px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink);font:600 .85rem var(--font);cursor:pointer}
.tabs .on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.note{border-radius:12px;padding:11px 13px;margin:0 0 12px;font-size:.9rem;background:var(--info-soft);color:var(--info)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.note.ok{background:var(--brand-soft);color:var(--ok)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 12px 22px}
.timeline li:before{content:"";position:absolute;left:5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--line)}
.timeline li.done:before{background:var(--brand)}
.timeline li:after{content:"";position:absolute;left:9px;top:16px;bottom:-2px;width:1px;background:var(--line)}
.timeline li:last-child:after{display:none}
.bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.dims{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;font-size:.88rem}
.bubble{max-width:82%;padding:9px 12px;border-radius:14px;margin:4px 0;background:var(--card);border:1px solid var(--line);white-space:pre-wrap;word-wrap:break-word}
.bubble.me{margin-left:auto;background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--card);padding:11px 16px;border-radius:12px;z-index:100;max-width:90vw;font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.toast.err{background:var(--bad);color:#fff}
dialog{border:0;border-radius:16px;padding:0;width:min(520px,94vw);background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog .wrap{padding:18px}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.scrollx{overflow-x:auto}
.empty{text-align:center;color:var(--muted);padding:26px 10px}
.skeleton{height:80px;border-radius:var(--radius);background:linear-gradient(90deg,var(--line),var(--card),var(--line));background-size:200% 100%;animation:sk 1.2s infinite;margin-bottom:12px}
@keyframes sk{to{background-position:-200% 0}}
.mt{margin-top:12px}.mb0{margin-bottom:0}.right{text-align:right}.nowrap{white-space:nowrap}.pre{white-space:pre-wrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:900px){body{padding-bottom:0}nav.bottom{position:sticky;top:57px;bottom:auto;max-width:760px;margin:0 auto;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px}}

/* ── home v2 ── */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 140% at 100% 0%,#14905e 0%,#0b6b45 45%,#083f2a 100%);padding:26px 18px 20px}
.hero-in{position:relative;z-index:1}
.hero-art{position:absolute;right:-30px;top:-20px;width:190px;height:190px;opacity:.9}
@media (max-width:520px){.hero-art{width:140px;height:140px;right:-40px;top:-30px;opacity:.55}}
.hero h1{font-size:1.75rem;max-width:15ch}
@media (min-width:600px){.hero h1{font-size:2.2rem}}
.pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:600;margin-bottom:10px}
.suggest{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:none}
.sg{flex:none;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 11px;font:500 .8rem var(--font);cursor:pointer}
.sg:hover{background:rgba(255,255,255,.22)}
.roles{margin-bottom:14px}
.role-card{display:flex;flex-direction:column;gap:4px;color:var(--ink);border-top:4px solid var(--brand)}
.role-card.alt{border-top-color:var(--accent)}
.role-card h3{margin:2px 0 0}
.ri{font-size:1.6rem}
.go{margin-top:auto;padding-top:6px;color:var(--brand);font-size:.88rem}
.role-card.alt .go{color:var(--warn)}
.urgent{border-left:5px solid var(--bad);background:linear-gradient(90deg,var(--bad-soft),var(--card) 55%)}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.hscroll>*{scroll-snap-align:start;flex:none}
.urg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:96px;height:88px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:.76rem;font-weight:600;text-align:center;line-height:1.15;padding:6px}
.urg span{font-size:1.6rem}
.urg:hover,.cat:hover,.catcard:hover,.wcard:hover{border-color:var(--brand);transform:translateY(-1px)}
.cat,.catcard,.urg,.wcard{transition:transform .12s ease,border-color .12s ease}
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:600px){.catgrid{grid-template-columns:repeat(3,1fr)}}
.catcard{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--ink);overflow:hidden}
.catcard:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--c)}
.catcard .ci{font-size:1.5rem;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--c) 14%,transparent);margin-bottom:4px}
.catcard small{color:var(--muted);font-size:.76rem;line-height:1.3}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px}
@media (min-width:600px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;position:relative;padding:12px 12px 12px 52px;border-radius:12px;background:var(--bg)}
.steps li:before{content:counter(s);position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:800}
.steps b,.pillars b{display:block}
.steps small,.pillars small{color:var(--muted);line-height:1.4;display:block}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:10px}
@media (max-width:420px){.pillars{grid-template-columns:1fr}}
.pillars span{font-size:1.5rem;display:block;margin-bottom:2px}
.cta-band{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-radius:18px;padding:20px 18px;margin:0 0 12px;background:linear-gradient(120deg,#fdf2df,#fbe3b8);color:#3a2a0c}
.cta-band h2{margin-bottom:4px}.cta-band p{margin:0;max-width:52ch;font-size:.92rem}
.cta-band .btn{background:#14231c;color:#fff}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.statband b{display:block;font-size:1.25rem;color:var(--brand)}.statband small{color:var(--muted);font-size:.72rem}
.wcard{width:150px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:14px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:.85rem}
.wcard small{color:var(--muted)}
.cities{margin:18px 0 8px}
.foot{margin:24px -16px 0;padding:22px 16px 18px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}
.foot .logo{justify-content:center;margin-bottom:4px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:10px 0}
.svcgroup{margin-bottom:18px}.svcgroup h2{border-left:4px solid var(--c);padding-left:8px}
.cat{position:relative}.idreq{position:absolute;top:4px;right:5px;font-style:normal;font-size:.7rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cta-band{background:linear-gradient(120deg,#3a2c14,#4a3613);color:#fbe3b8}:root:not([data-theme="light"]) .cta-band .btn{background:#e8a33d;color:#14231c}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.urgent .btn{white-space:nowrap;flex:none}.urgent h2{font-size:1.05rem}

/* ── round 2: calls, photos, escrow, panic, price guide ── */
.callui{position:fixed;inset:0;z-index:200;background:rgba(6,21,13,.88);display:grid;place-items:center;padding:16px}
.callbox{background:var(--card);color:var(--ink);border-radius:20px;padding:26px 20px;width:min(360px,100%);text-align:center}
.callbox .av{margin:0 auto 10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:8px 0}
.gallery figure{margin:0;position:relative}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;background:var(--line)}
.gallery figcaption{font-size:.72rem;color:var(--muted);margin-top:2px}
.gallery button{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.55);color:#fff;border-radius:8px;padding:2px 7px}
.wa{color:#128c4b}
.wa-float{position:fixed;right:14px;bottom:86px;z-index:40;background:#25d366;color:#fff;border-radius:999px;padding:10px 14px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.2);display:flex;gap:6px;align-items:center}
@media (min-width:900px){.wa-float{bottom:20px}}
.codebox{font-size:2.4rem;font-weight:800;letter-spacing:.35em;text-align:center;background:var(--brand-soft);color:var(--brand);border-radius:14px;padding:12px 0 12px .35em;margin:8px 0}
.escrow{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 4px;text-align:center;font-size:.72rem}
.escrow div{padding:8px 2px;border-radius:10px;background:var(--bg);color:var(--muted)}
.escrow div.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
.escrow div b{display:block;font-size:1.1rem}
.sos{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#c81e1e;color:#fff;border:0;border-radius:14px;padding:14px;font:800 1.05rem var(--font);cursor:pointer;box-shadow:0 4px 14px rgba(200,30,30,.35)}
.sosbig{display:block;text-align:center;font-size:1.05rem;padding:14px;margin:6px 0;border-radius:12px}
.pricecard{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.pricecard:last-child{border-bottom:0}
.pricecard b.amt{white-space:nowrap;color:var(--brand)}
.hint{background:var(--accent-soft);color:var(--warn);border-radius:10px;padding:8px 11px;font-size:.85rem;margin-top:8px}
.btn.bad.sosbig,.btn.bad.sosbig:visited{background:#c81e1e;color:#fff}

/* ── icons (Lucide) & gradient tiles ── */
.i{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
.tile{display:inline-grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;color:#fff;
  background:linear-gradient(140deg,var(--t1,#10b981),var(--t2,#065f46));
  box-shadow:0 8px 16px -8px var(--t2,#065f46),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.12);position:relative;overflow:hidden}
.tile:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.28),transparent 55%);pointer-events:none}
.tile .i{width:24px;height:24px;stroke-width:1.9;position:relative;z-index:1}
.tile.sm{width:32px;height:32px;border-radius:10px}.tile.sm .i{width:18px;height:18px}
.tile.lg{width:52px;height:52px;border-radius:16px}.tile.lg .i{width:27px;height:27px}
.tile.me{--t1:#14905e;--t2:#0b5236}
.cat{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px}
.cat span:not(.tile){display:block;font-size:inherit;margin:0}
.cat .cl{line-height:1.2}
.cat .tile{margin:0 auto}
.urg .tile{width:42px;height:42px}
.urg{height:auto;padding:12px 6px;gap:7px}
.catcard .tile{margin-bottom:8px}
.catcard:before{display:none}
.catcard{border-top:3px solid var(--c)}
.role-card .tile,.pillars .tile,.grid2 .card>.tile{margin-bottom:8px}
.pillars .tile{width:40px;height:40px;border-radius:12px}.pillars .tile .i{width:21px;height:21px}
.svcgroup h2{border-left:0;padding-left:0;gap:10px}
.idreq{color:var(--brand)}.idreq .i{width:14px;height:14px}
nav.bottom a span .i{width:22px;height:22px;stroke-width:1.8}
nav.bottom a.on span .i{stroke-width:2.3}
#bell .i{width:22px;height:22px}
.pulse{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#c81e1e;color:#fff;animation:pulse 1.6s infinite}
.pulse .i{width:18px;height:18px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,30,30,.5)}70%{box-shadow:0 0 0 10px rgba(200,30,30,0)}100%{box-shadow:0 0 0 0 rgba(200,30,30,0)}}
.hscroll .wcard small .i,.list .i,.card h1 .i,.muted .i{color:var(--brand)}

/* ── 3D icon tiles (override the flat gradient tiles) ── */
.tile{background:linear-gradient(150deg,color-mix(in srgb,var(--t1) 20%,var(--card)) 0%,color-mix(in srgb,var(--t2) 9%,var(--card)) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t1) 22%,transparent),0 6px 14px -10px var(--t2);width:58px;height:58px;border-radius:18px}
.tile:after{background:radial-gradient(90% 70% at 25% 0%,rgba(255,255,255,.35),transparent 60%)}
.tile .p3d{width:40px;height:40px;position:relative;z-index:1;filter:drop-shadow(0 4px 5px rgba(0,0,0,.18));transition:transform .18s ease}
.tile.sm{width:36px;height:36px;border-radius:11px}.tile.sm .p3d{width:24px;height:24px}
.tile.lg{width:64px;height:64px;border-radius:20px}.tile.lg .p3d{width:46px;height:46px}
.tile.me{--t1:#14905e;--t2:#0b5236}
.urg .tile{width:50px;height:50px}.urg .tile .p3d{width:34px;height:34px}
.pillars .tile{width:48px;height:48px;border-radius:14px}.pillars .tile .p3d{width:32px;height:32px}
a:hover .tile .p3d,a:focus-visible .tile .p3d{transform:scale(1.08) rotate(-3deg)}
.p3d.inl{width:1.35em;height:1.35em;vertical-align:-.3em;margin-right:2px}
.pulse{background:transparent;width:36px;height:36px}
.pulse .p3d{width:32px;height:32px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile{background:linear-gradient(150deg,color-mix(in srgb,var(--t1) 30%,#17201b),color-mix(in srgb,var(--t2) 22%,#17201b))}}

/* ── terms ── */
.termsbox{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:12px 0}
.tsum{margin:0 0 6px;padding-left:18px;font-size:.86rem;color:var(--muted)}
.tsum li{margin:2px 0}
.termsbox .check{margin:4px 0 0;font-size:.9rem}
.terms h3{margin-top:16px}.terms p,.terms li{font-size:.92rem;line-height:1.55}
dialog .terms{max-height:60vh;overflow:auto;padding-right:4px}

/* ════════ Liquid glass ════════
   Used only on chrome that floats over content (top bar, tab bar, hero search, dialogs, call screen, icon tiles,
   floating buttons). Forms, prices and terms stay solid for readability in sunlight.
   Fallbacks: no backdrop-filter support → solid; "reduce transparency" → solid; low-memory / data-saver phones get
   html.lite (set in app.js) → solid, no blur cost. */
:root{
  --glass:rgba(255,255,255,.58);--glass-strong:rgba(255,255,255,.72);--glass-line:rgba(255,255,255,.75);--glass-edge:rgba(20,35,28,.08);
  --glass-hi:rgba(255,255,255,.9);--glass-shadow:0 10px 30px -12px rgba(16,40,28,.28);--glass-blur:blur(22px) saturate(185%);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glass:rgba(22,32,26,.52);--glass-strong:rgba(22,32,26,.7);--glass-line:rgba(255,255,255,.14);--glass-edge:rgba(0,0,0,.35);
  --glass-hi:rgba(255,255,255,.22);--glass-shadow:0 12px 34px -12px rgba(0,0,0,.6);}}

/* soft ambient light behind everything so the glass has something to bend */
body{position:relative;padding-bottom:104px}
body:before{content:"";position:fixed;inset:-20vh -20vw;z-index:-1;pointer-events:none;
  background:radial-gradient(40vmax 40vmax at 8% 12%,rgba(16,185,129,.16),transparent 60%),
             radial-gradient(36vmax 36vmax at 95% 30%,rgba(232,163,61,.14),transparent 60%),
             radial-gradient(44vmax 44vmax at 50% 105%,rgba(37,99,235,.10),transparent 60%),var(--bg)}

.glass,header.top,nav.bottom,dialog,.callbox,.wa-float{
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-edge),var(--glass-shadow)}

/* top bar: frosted strip */
header.top{border-width:0 0 1px;box-shadow:inset 0 -1px 0 var(--glass-edge),0 6px 20px -16px rgba(0,0,0,.35)}

/* tab bar: floating liquid-glass pill with a lens behind the active tab */
nav.bottom{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));border-radius:28px;padding:6px;max-width:560px;margin:0 auto;overflow:hidden}
nav.bottom:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%)}
nav.bottom a{border-radius:22px;padding:7px 0 6px;transition:background .25s ease,color .2s ease}
nav.bottom a.on{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(11,107,69,.12),0 4px 12px -6px rgba(11,107,69,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.bottom:before{background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%)}
  :root:not([data-theme="light"]) nav.bottom a.on{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.08)}}
@media (min-width:900px){nav.bottom{position:fixed;top:auto;bottom:18px;border:1px solid var(--glass-line);border-radius:28px}body{padding-bottom:104px}}

/* hero: glass search bar + glass chips over the green */
.hero .search{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px -14px rgba(0,0,0,.5);border-radius:16px}
.hero .search input{background:transparent;color:#fff}
.hero .search input::placeholder{color:rgba(255,255,255,.78)}
.hero .search .btn{background:#fff;color:#0b6b45;box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.sg,.pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}

/* dialogs + call screen */
dialog{background:var(--glass-strong);border-radius:24px}
dialog::backdrop{background:rgba(6,21,13,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.callui{background:rgba(6,21,13,.45);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.callbox{background:var(--glass-strong);border-radius:28px}

/* 3D icon tiles: glass case with a curved specular highlight */
.tile{border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -6px 12px -8px color-mix(in srgb,var(--t2) 45%,transparent),0 8px 18px -12px var(--t2)}
.tile:after{background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 38%,transparent 39%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile{border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -12px #000}
  :root:not([data-theme="light"]) .tile:after{background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 38%,transparent 39%)}}

/* floating action buttons */
.wa-float{background:rgba(37,211,102,.82);color:#fff;bottom:calc(98px + env(safe-area-inset-bottom));border-color:rgba(255,255,255,.45)}
@media (min-width:900px){.wa-float{bottom:24px}}
.toast{bottom:104px;background:rgba(20,35,28,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.toast.err{background:rgba(180,35,24,.88)}

/* ── fallbacks: solid surfaces ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.top,nav.bottom,dialog,.callbox{background:var(--card)}.hero .search{background:#fff}.hero .search input{color:#14231c}.hero .search input::placeholder{color:#5d6b64}}
@media (prefers-reduced-transparency:reduce){
  header.top,nav.bottom,dialog,.callbox,.wa-float,.toast{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero .search{background:#fff;backdrop-filter:none}.hero .search input{color:#14231c}.hero .search input::placeholder{color:#5d6b64}body:before{display:none}}
html.lite header.top,html.lite nav.bottom,html.lite dialog,html.lite .callbox,html.lite .wa-float,html.lite .toast,html.lite .hero .search,html.lite .sg,html.lite .pill,html.lite dialog::backdrop,html.lite .callui{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lite header.top,html.lite nav.bottom,html.lite dialog,html.lite .callbox{background:var(--card)}
dialog .terms{padding:2px 10px;border-radius:12px}dialog .terms:focus{outline:none}dialog .terms:focus-visible{outline:2px solid var(--brand)}

/* ── animated background: slow drifting light blobs behind the glass ──
   Only transform/opacity are animated (GPU compositor, no layout or repaint), so it's cheap even on mid-range phones.
   Static on low-memory phones (html.lite) and for "reduce motion". */
body:before,body:after{content:"";position:fixed;z-index:-1;pointer-events:none;width:140vmax;height:140vmax;left:50%;top:50%;margin:-70vmax 0 0 -70vmax;will-change:transform}
body:before{inset:auto;background:
  radial-gradient(22vmax 22vmax at 30% 30%,rgba(16,185,129,.30),transparent 70%),
  radial-gradient(18vmax 18vmax at 72% 40%,rgba(232,163,61,.24),transparent 70%),
  radial-gradient(20vmax 20vmax at 45% 72%,rgba(37,99,235,.18),transparent 70%);
  animation:drift1 34s ease-in-out infinite alternate}
body:after{background:
  radial-gradient(16vmax 16vmax at 65% 65%,rgba(236,72,153,.14),transparent 70%),
  radial-gradient(20vmax 20vmax at 25% 60%,rgba(20,144,94,.20),transparent 70%),
  radial-gradient(14vmax 14vmax at 70% 25%,rgba(139,92,246,.14),transparent 70%);
  animation:drift2 46s ease-in-out infinite alternate}
html{background:var(--bg)}
body{background:transparent}
@keyframes drift1{0%{transform:translate3d(-6%,-4%,0) rotate(0deg) scale(1)}50%{transform:translate3d(5%,3%,0) rotate(20deg) scale(1.08)}100%{transform:translate3d(-2%,6%,0) rotate(-12deg) scale(.96)}}
@keyframes drift2{0%{transform:translate3d(5%,4%,0) rotate(0deg) scale(1.05)}50%{transform:translate3d(-6%,-2%,0) rotate(-24deg) scale(.95)}100%{transform:translate3d(3%,-6%,0) rotate(16deg) scale(1.1)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body:before{opacity:.75}:root:not([data-theme="light"]) body:after{opacity:.6}}

/* hero: slow light sweep across the green banner */
.hero:before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0 70%,rgba(255,255,255,.14) 80%,transparent 90%);animation:sweep 14s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){body:before,body:after,.hero:before{animation:none}}
html.lite body:before,html.lite body:after,html.lite .hero:before{animation:none}
@media (prefers-reduced-transparency:reduce){body:after{display:none}}

/* stronger ambient colour (light mode reads too pale) */
body:before{background:
  radial-gradient(24vmax 24vmax at 30% 30%,rgba(16,185,129,.42),transparent 70%),
  radial-gradient(20vmax 20vmax at 72% 40%,rgba(232,163,61,.36),transparent 70%),
  radial-gradient(22vmax 22vmax at 45% 72%,rgba(37,99,235,.26),transparent 70%)}
body:after{background:
  radial-gradient(18vmax 18vmax at 65% 65%,rgba(236,72,153,.22),transparent 70%),
  radial-gradient(22vmax 22vmax at 25% 60%,rgba(20,144,94,.30),transparent 70%),
  radial-gradient(16vmax 16vmax at 70% 25%,rgba(139,92,246,.22),transparent 70%)}
/* hero aurora: moving colour inside the green banner */
.hero{background:linear-gradient(120deg,#0e7a50,#0b6b45 30%,#0a5a3b 55%,#127e57 75%,#083f2a);background-size:300% 300%;animation:aurora 18s ease-in-out infinite alternate}
.hero-in:before{content:"";position:absolute;z-index:-1;width:260px;height:260px;left:-80px;bottom:-140px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,163,61,.45),transparent 65%);animation:float 12s ease-in-out infinite alternate;pointer-events:none}
@keyframes aurora{0%{background-position:0% 40%}100%{background-position:100% 60%}}
@keyframes float{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(180px,-60px,0) scale(1.25)}}
@media (prefers-reduced-motion:reduce){.hero,.hero-in:before{animation:none}}
html.lite .hero,html.lite .hero-in:before{animation:none}

/* ════════ Livelier: floating icons + slide-in cards ════════ */
/* 3D icons gently float, each on its own rhythm (delay set inline by app.js) */
.tile .p3d{animation:bob 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes bob{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-4px,0) rotate(-3deg)}}
a:hover .tile .p3d,a:focus-visible .tile .p3d{animation-play-state:paused;transform:scale(1.12) rotate(-4deg)}
.tile.lg .p3d{animation-duration:5s}
.tile:after{animation:gloss 6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes gloss{0%,100%{opacity:.85}50%{opacity:1}}

/* slide-in on scroll: only when JS has armed it (html.anim), so content never stays hidden if JS fails */
html.anim .reveal{opacity:0;transform:translate3d(0,22px,0) scale(.985);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
html.anim .reveal.in{opacity:1;transform:none}

/* shimmer on the main call-to-action buttons */
.btn.shine{position:relative;overflow:hidden}
.btn.shine:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}

@media (prefers-reduced-motion:reduce){.tile .p3d,.tile:after,.btn.shine:after{animation:none}html.anim .reveal{opacity:1;transform:none;transition:none}}
html.lite .tile .p3d,html.lite .tile:after,html.lite .btn.shine:after{animation:none}

/* ════════ Icon style B: premium gradient tiles (Phosphor) ════════ */
.tile{background:linear-gradient(145deg,var(--t1,#10b981) 0%,var(--t2,#065f46) 100%) !important;color:#fff;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 6px rgba(0,0,0,.18),0 10px 18px -10px var(--t2,#065f46) !important}
.tile:after{background:linear-gradient(160deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 42%,transparent 43%) !important}
.tile .g{width:28px;height:28px;position:relative;z-index:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));animation:bob 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.tile.sm .g{width:18px;height:18px}.tile.lg .g{width:32px;height:32px}
.urg .tile .g{width:26px;height:26px}.pillars .tile .g{width:24px;height:24px}
.tile.me{--t1:#14905e;--t2:#0b5236}
.tile.sos-tile{--t1:#ef4444;--t2:#991b1b;animation:pulse 1.6s infinite}
.pulse:has(.sos-tile){width:auto;height:auto;background:none;animation:none}
a:hover .tile .g,a:focus-visible .tile .g{animation-play-state:paused;transform:scale(1.12) rotate(-4deg)}
.g.inl{width:1.15em;height:1.15em;vertical-align:-.18em;color:var(--brand);margin-right:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 6px rgba(0,0,0,.3),0 10px 18px -10px #000 !important}}
@media (prefers-reduced-motion:reduce){.tile .g,.tile.sos-tile{animation:none}}
html.lite .tile .g,html.lite .tile.sos-tile{animation:none}
.tile.sos-tile{width:40px;height:40px;border-radius:13px}.tile.sos-tile .g{width:22px;height:22px}

/* ════════ Photos (illustrative, category level only) ════════ */
.ph{display:block;overflow:hidden;background:var(--line)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a:hover .ph img{transform:scale(1.06)}
/* category cards: photo on top, icon tile overlapping the edge */
.catcard.photo{padding:0 0 14px;border-top:0;gap:0}
.catcard.photo .ph{height:112px;margin-bottom:-26px;position:relative}
.catcard.photo .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--c) 55%,transparent) 100%)}
.catcard.photo .tile{margin:0 0 8px 12px;position:relative;z-index:1;box-shadow:0 0 0 3px var(--card),0 10px 18px -8px var(--t2) !important}
.catcard.photo b,.catcard.photo small{padding:0 12px}
@media (min-width:600px){.catcard.photo .ph{height:140px}}
/* photo cards (business / towing) */
.photo-card{padding-top:0;overflow:hidden}
.photo-card .ph{height:120px;margin:0 -16px 0;position:relative}
.photo-card .tile{margin:-24px 0 8px;position:relative;z-index:1;box-shadow:0 0 0 3px var(--card),0 10px 18px -8px var(--t2) !important}
/* worker banner: full-bleed photo with readable gradient */
.photo-band{position:relative;overflow:hidden;color:#fff !important;background:#0b3d29 !important;min-height:200px;align-items:flex-end}
.photo-band .ph.bg{position:absolute;inset:0;z-index:0}
.photo-band .ph.bg img{object-position:50% 25%}
.photo-band:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,30,20,.92) 0%,rgba(6,30,20,.72) 55%,rgba(6,30,20,.25) 100%)}
.photo-band>div,.photo-band>a{position:relative;z-index:2}
.photo-band p{color:rgba(255,255,255,.88)}
.photo-band .btn{background:#fff !important;color:#0b6b45 !important}
@media (max-width:520px){.photo-band:before{background:linear-gradient(180deg,rgba(6,30,20,.35) 0%,rgba(6,30,20,.88) 55%,rgba(6,30,20,.95) 100%)}.photo-band{padding-top:120px}}

/* FIX: the legacy `.cat span{display:block}` rule out-ranked .tile and broke centring (icons sat off-centre) */
.tile,.cat .tile,.urg .tile,.catcard .tile{display:grid !important;place-items:center;font-size:0;line-height:0;margin-bottom:0}
.cat .tile,.urg .tile{margin:0 auto}
.catcard.photo .tile,.photo-card .tile{display:grid !important}

/* ════════ Hero video reel ════════ */
.hero.has-video{min-height:380px;display:flex;flex-direction:column;justify-content:flex-end}
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:#083f2a url(/video/poster.webp) center/cover no-repeat}
.hero-video .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;transform:scale(1.04)}
.hero.video-on .hero-video .hv.on{opacity:1}
/* brand-green tint + bottom fade keeps the headline readable over any clip */
.hero-video:after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,40,27,.35) 0%,rgba(6,40,27,.55) 40%,rgba(6,48,32,.92) 100%),
  linear-gradient(90deg,rgba(11,107,69,.55),rgba(11,107,69,.12))}
.hero.has-video{animation:none;background:#083f2a}
.hero.has-video .hero-art{display:none}
.hero.has-video .hero-in{z-index:2}
.hero.has-video:before{z-index:1}
.hero.has-video .hero-in:before{display:none}
.hero h1,.hero p{text-shadow:0 2px 14px rgba(0,0,0,.35)}
/* scene label, top-right */
.hero-tag{position:absolute;top:14px;right:14px;z-index:2;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#fff;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0}
.hero-tag:empty{display:none}
.hero-tag.show{animation:tagin 4.6s ease forwards}
@keyframes tagin{0%{opacity:0;transform:translateY(-4px)}12%,85%{opacity:1;transform:none}100%{opacity:.0}}
@media (min-width:600px){.hero.has-video{min-height:440px}}
html.lite .hero-video .hv{display:none}
/* lighter tint: show the people up top, keep a dark fade only behind the text */
.hero-video:after{background:
  linear-gradient(180deg,rgba(6,40,27,.05) 0%,rgba(6,40,27,.18) 30%,rgba(6,40,27,.62) 58%,rgba(5,38,25,.94) 100%),
  linear-gradient(90deg,rgba(11,107,69,.32),rgba(11,107,69,0) 70%)}
.hero-video .hv{filter:saturate(1.08) contrast(1.04)}
.hero.has-video{min-height:440px}
@media (min-width:600px){.hero.has-video{min-height:480px}}

/* ════════ Header extras (all sizes) ════════ */
.topnav{display:none}
.deskonly{display:none}
.getapp{background:linear-gradient(135deg,#14905e,#0b6b45);color:#fff;gap:6px;white-space:nowrap}
.getapp .g{width:16px;height:16px}
.getapp[hidden]{display:none}
.postjob{display:none}
@media (max-width:420px){.getapp span{display:none}.getapp{padding:7px 10px}}

/* ════════ App install: home band, phone mock, /app page, smart banner ════════ */
.appband{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;border-radius:20px;padding:20px 18px;margin:0 0 12px;overflow:hidden;position:relative;
  background:radial-gradient(120% 120% at 100% 0%,#1f3b8f 0%,#14284f 55%,#0b1a33 100%);color:#fff}
.appband h2{margin:8px 0 4px;font-size:1.3rem}.appband p{opacity:.85;margin:0 0 12px;font-size:.92rem}
.appband .btn.ghost{color:#fff}
.appband .btn .g{width:18px;height:18px}
.storebadges{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.storebadges span{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;padding:5px 10px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.storebadges .g{width:14px;height:14px}
.phone-mock{width:150px;aspect-ratio:9/19;border-radius:28px;padding:7px;background:linear-gradient(145deg,#2b2f36,#0d0f12);box-shadow:0 20px 40px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);transform:rotate(6deg)}
.phone-mock.sm{width:118px}
.phone-screen{position:relative;height:100%;border-radius:22px;overflow:hidden;background:#0b6b45}
.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.pm-ui{position:absolute;inset:auto 0 0 0;padding:14px 10px;background:linear-gradient(180deg,transparent,rgba(5,38,25,.95) 40%);display:flex;flex-direction:column;gap:5px;color:#fff;font-size:.62rem}
.pm-ui b{font-size:.78rem}.pm-ui i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.25)}.pm-ui i:nth-child(4){width:70%}.pm-ui i:nth-child(5){width:45%}
@media (max-width:420px){.appband{grid-template-columns:1fr}.appband .phone-mock{display:none}}
.apphero{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border-radius:22px;padding:24px 20px;margin-bottom:14px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#14905e 0%,#0b6b45 45%,#083f2a 100%)}
.apphero h1{font-size:1.8rem;margin:10px 0 6px}.apphero p{opacity:.9}
.apphero .btn.big{background:#fff;color:#0b6b45;font-size:1.05rem;padding:14px 22px}.apphero .btn .g{width:20px;height:20px}
@media (max-width:560px){.apphero{grid-template-columns:1fr}.apphero .phone-mock{display:none}}
.appfeat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.appfeat .card{margin:0}.appfeat .tile{margin-bottom:8px}
.howgrid{display:grid;gap:14px}
.isteps{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.isteps li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.stepn{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;background:var(--brand);color:var(--brand-ink)}
.installhead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.appbanner{position:fixed;left:10px;right:10px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:18px;
  background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
  transform:translateY(20px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.appbanner.in{transform:none;opacity:1}
.appbanner img{border-radius:11px}.appbanner div{flex:1;min-width:0;line-height:1.25}.appbanner small{display:block;color:var(--muted);font-size:.76rem}
.appbanner .x{background:none;border:0;color:var(--muted);font-size:1rem;padding:6px;cursor:pointer}
html.standalone .getapp,html.standalone .appband{display:none !important}

/* ════════ DESKTOP (≥1024px): real website layout ════════ */
@media (min-width:1024px){
  body{padding-bottom:0}
  nav.bottom{display:none !important}
  .wrap{max-width:1200px;padding:20px 24px}
  header.top .wrap{padding-top:12px;padding-bottom:12px;gap:18px}
  .topnav{display:flex;gap:4px;margin-left:12px}
  .topnav a{color:var(--ink);font-weight:600;font-size:.93rem;padding:8px 12px;border-radius:10px}
  .topnav a:hover{background:var(--brand-soft);color:var(--brand)}
  .topnav a.on{background:var(--brand-soft);color:var(--brand)}
  .deskonly{display:inline-flex}.deskonly .i{width:22px;height:22px}
  .postjob{display:inline-flex}
  .getapp span{display:inline}
  .appbanner{display:none}
  .wa-float{bottom:24px}
  .toast{bottom:30px}
  /* narrow pages (forms, reading) stay comfortable to read */
  body:not([data-page=home]):not([data-page=find]):not([data-page=jobs]):not([data-page=services]):not([data-page=w]):not([data-page=admin]):not([data-page=me]):not([data-page=bookings]):not([data-page=inbox]):not([data-page=app]):not([data-page=org]):not([data-page=project]) main.wrap{max-width:820px}

  /* home */
  .hero{padding:44px 44px 36px;border-radius:26px}
  .hero.has-video{min-height:560px}
  .hero h1{font-size:3.1rem;max-width:16ch;letter-spacing:-.02em}
  .hero p{font-size:1.1rem;max-width:52ch}
  .hero .search{max-width:620px}
  .hero .suggest{max-width:760px;flex-wrap:wrap}
  .hero-tag{top:22px;right:22px;font-size:.8rem}
  .roles{grid-template-columns:1fr 1fr;gap:16px}
  .urgent .hscroll{display:grid;grid-template-columns:repeat(8,1fr);overflow:visible}
  .urg{width:auto}
  .cats{grid-template-columns:repeat(6,1fr);gap:12px}
  .catgrid{grid-template-columns:repeat(3,1fr);gap:16px}
  .catcard.photo .ph{height:170px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:repeat(4,1fr);gap:20px}
  .photo-band{min-height:280px;padding:36px 40px}
  .photo-band h2{font-size:1.8rem}
  .appband{padding:36px 40px}.appband h2{font-size:1.8rem}.appband .phone-mock.sm{width:150px}
  .grid2{gap:16px}
  .photo-card .ph{height:170px}
  .foot{margin:40px 0 0;text-align:left;display:grid;grid-template-columns:1.2fr 2fr;gap:20px;align-items:start;padding:30px 0 24px}
  .foot .logo{justify-content:flex-start}
  .foot nav{justify-content:flex-end}
  .foot small{grid-column:1/-1}
  .statband{grid-template-columns:repeat(4,1fr)}
  .hscroll .wcard{width:180px}

  /* search: filters sidebar + 2-column results */
  .sgrid{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
  .sgrid #sf{position:sticky;top:84px}
  .sgrid #sf details{display:block}
  .sgrid #sf details>summary{display:none}
  #res{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
  #res>.card{margin:0}#res>p{grid-column:1/-1;margin:0}#res>.card.empty{grid-column:1/-1}
  /* jobs board: 2 columns */
  #jl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #jl>.card{margin:0}#jl>.card.empty{grid-column:1/-1}
  /* worker profile: sticky identity/booking sidebar + details */
  .pgrid{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start}
  .pside{position:sticky;top:84px}
  /* services, me hub, admin */
  body[data-page=services] .cats{grid-template-columns:repeat(8,1fr)}
  body[data-page=me] .cats{grid-template-columns:repeat(6,1fr)}
  body[data-page=admin] .grid3{grid-template-columns:repeat(6,1fr)}
  /* app page */
  .apphero{padding:44px}.apphero h1{font-size:2.6rem}
  .appfeat{grid-template-columns:repeat(4,1fr);gap:16px}
  .howgrid{grid-template-columns:repeat(3,1fr);gap:24px}
  .phone-mock{width:200px}
}
@media (min-width:1024px) and (max-width:1180px){.topnav a[data-nav=trust]{display:none}}
/* standalone (installed app): hide browser-only bits */
html.standalone .wa-float{bottom:calc(98px + env(safe-area-inset-bottom))}

/* ════════ Footer v2 (fixes squashed desktop footer) ════════ */
.foot{display:grid !important;grid-template-columns:1fr 1fr;gap:22px 16px;text-align:left !important;margin:28px -16px 0 !important;padding:26px 16px 18px !important;border-top:1px solid var(--line)}
.foot .logo{justify-content:flex-start !important;margin:0 0 6px}
.foot-brand{grid-column:1/-1}
.foot-brand p{margin:0 0 10px;color:var(--muted);font-size:.9rem;max-width:42ch}
.getapp-foot{background:var(--brand);color:var(--brand-ink)}.getapp-foot .g{width:15px;height:15px}
.foot-col{display:flex !important;flex-direction:column;gap:9px;margin:0 !important;justify-content:flex-start !important}
.foot-col h4{margin:0 0 2px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.foot-col a{color:var(--muted);font-size:.92rem}
.foot-col a:hover{color:var(--brand)}
.foot-col:last-of-type{grid-column:1/-1}
.foot-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
html.standalone .getapp-foot{display:none}
@media (min-width:640px){.foot{grid-template-columns:repeat(3,1fr)}.foot-col:last-of-type{grid-column:auto}}
@media (min-width:1024px){
  .foot{grid-template-columns:1.6fr 1fr 1fr 1fr !important;gap:28px !important;margin:48px 0 0 !important;padding:36px 0 22px !important;align-items:start}
  .foot-brand{grid-column:auto}
  .foot-bottom{justify-content:space-between}
}
.sg{min-height:36px;padding:7px 13px}

/* ════════ PHONE POLISH (≤600px): app-like, compact, less scrolling ════════ */
@media (max-width:600px){
  .wrap{padding:12px}
  .card{padding:14px;border-radius:16px}
  h2{font-size:1.08rem}
  /* header: subtle app button instead of a heavy green block */
  .getapp{background:var(--brand-soft) !important;color:var(--brand) !important;border:0;padding:6px 10px !important;min-height:34px;border-radius:999px;box-shadow:none}
  .getapp .g{width:15px;height:15px}
  .getapp span{display:inline !important;font-size:.78rem}
  /* hero: tighter */
  .hero{padding:18px 16px 16px;border-radius:20px;margin-bottom:12px}
  .hero.has-video{min-height:390px}
  .hero h1{font-size:1.6rem;margin-bottom:6px}
  .hero p{font-size:.92rem;margin-bottom:6px}
  .hero-tag{top:10px;right:10px;font-size:.66rem;padding:4px 8px}
  .pill{font-size:.7rem;margin-bottom:8px}
  /* "I need someone / I need work": compact rows */
  .roles{grid-template-columns:1fr !important;gap:8px;margin-bottom:12px}
  .role-card{display:grid !important;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;row-gap:0;align-items:center;padding:12px 14px;border-top-width:0;border-left:4px solid var(--brand)}
  .role-card.alt{border-left-color:var(--accent)}
  .role-card .tile{grid-row:1/3;width:46px !important;height:46px !important;border-radius:14px;margin:0 !important}
  .role-card .tile .g{width:24px !important;height:24px !important}
  .role-card h3{margin:0;font-size:1rem}
  .role-card small{grid-column:2;font-size:.8rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .role-card .go{grid-column:3;grid-row:1/3;padding:0;font-size:0;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center}
  .role-card .go:after{content:"→";font-size:1rem;color:var(--brand)}
  .role-card.alt .go{background:var(--accent-soft)}.role-card.alt .go:after{color:var(--warn)}
  /* urgent help: title + small button on one line, 4×2 grid, no sideways scrolling */
  .urgent{padding:14px}
  .urgent>.row{flex-wrap:nowrap;gap:8px}
  .urgent h2{font-size:1rem !important;gap:6px !important;white-space:nowrap}
  .urgent .tile.sos-tile{width:30px !important;height:30px !important;border-radius:9px}
  .urgent .tile.sos-tile .g{width:17px !important;height:17px !important}
  .urgent .btn.bad{padding:6px 10px;min-height:32px;font-size:.76rem;border-radius:999px}
  .urgent>p{font-size:.84rem;margin:6px 0 10px}
  .urgent .hscroll{display:grid !important;grid-template-columns:repeat(4,1fr);gap:6px;overflow:visible;padding:0}
  .urg{width:auto !important;height:auto;padding:8px 2px 7px;border-radius:12px;font-size:.66rem;gap:5px;line-height:1.15}
  .urg .tile{width:38px !important;height:38px !important;border-radius:11px}
  .urg .tile .g{width:20px !important;height:20px !important}
  /* popular services & services page: app-icon grid (no boxes) */
  .cats{gap:14px 6px}
  .cat{background:transparent;border:0;box-shadow:none;padding:2px 0;font-size:.72rem;gap:6px}
  .cat .tile{width:54px !important;height:54px !important;border-radius:16px}
  .cat .tile .g{width:27px !important;height:27px !important}
  .cat .cl{max-width:76px}
  /* categories: photo cards with label on the photo */
  .catgrid{gap:8px}
  .catcard.photo{position:relative;padding:0 !important;min-height:120px;justify-content:flex-end;border:0;border-radius:16px;overflow:hidden;color:#fff}
  .catcard.photo .ph{position:absolute;inset:0;height:auto !important;margin:0 !important}
  .catcard.photo .ph:after{background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.72) 100%) !important}
  .catcard.photo .tile{position:absolute !important;top:8px;left:8px;width:32px !important;height:32px !important;border-radius:10px;margin:0 !important;box-shadow:0 4px 10px rgba(0,0,0,.25) !important}
  .catcard.photo .tile .g{width:17px !important;height:17px !important}
  .catcard.photo b{position:relative;z-index:1;padding:0 10px 10px !important;font-size:.88rem;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.5)}
  .catcard.photo small{display:none}
  /* side-by-side cards stack on phones */
  .grid2:has(.photo-card),.grid2.mt:has(.card.mb0 .tile){grid-template-columns:1fr}
  .photo-card .ph{height:120px !important}
  /* trust pillars: compact 2×2 */
  .pillars{grid-template-columns:1fr 1fr !important;gap:14px 12px}
  .pillars .tile{width:36px !important;height:36px !important;border-radius:11px;margin-bottom:6px !important}
  .pillars .tile .g{width:19px !important;height:19px !important}
  .pillars b{font-size:.88rem}
  .pillars small{font-size:.76rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  /* how it works: tighter steps */
  .steps li{padding:10px 10px 10px 46px}.steps li:before{width:26px;height:26px;left:10px;top:10px}
  /* app band + worker banner */
  .appband{padding:18px 16px}.appband h2{font-size:1.2rem}
  .appband .row{gap:4px !important}
  .photo-band{min-height:0;padding:110px 16px 16px !important}
  .photo-band h2{font-size:1.15rem}
  .photo-band p{font-size:.86rem}
  .cities .chips{gap:5px}.cities .chip{font-size:.72rem}
}
@media (max-width:360px){
  .urg{font-size:.62rem}
  .cat .tile{width:50px !important;height:50px !important}
  .hero h1{font-size:1.5rem}
}
@media (max-width:600px){.hide-sm{display:none}.urgent>.row{flex-wrap:wrap !important;row-gap:8px}.urgent .btn.bad{margin-left:auto;flex:none}}
@media (max-width:600px){
  .grid3{grid-template-columns:repeat(3,1fr) !important;gap:6px}
  .stat{padding:8px 4px;border-radius:12px}
  .stat b{font-size:1.05rem}
  .stat small{font-size:.66rem;line-height:1.2;display:block}
  .stat .btn.ghost.sm{padding:0;min-height:0;font-size:.7rem}
  .pside .card h1{font-size:1.3rem}
}

/* ── support card, star picker ── */
.supgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sup{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--bg);color:var(--ink);border:1px solid var(--line);min-width:0}
.sup:hover{border-color:var(--brand)}
.sup span{min-width:0;line-height:1.25}.sup b{display:block;font-size:.88rem}.sup small{display:block;color:var(--muted);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup .tile{width:36px !important;height:36px !important;border-radius:11px;flex:none}.sup .tile .g{width:19px !important;height:19px !important}
@media (max-width:360px){.supgrid{grid-template-columns:1fr}}
@media (min-width:1024px){.supgrid{grid-template-columns:repeat(4,1fr)}}
.stars-in{display:flex;gap:4px}
.stars-in label{margin:0;cursor:pointer;font-size:2rem;line-height:1;color:var(--line)}
.stars-in input{position:absolute;opacity:0;width:1px;height:1px}
.stars-in label span{transition:color .12s,transform .12s;display:inline-block}
/* light every star up to the checked / hovered one */
.stars-in:has(input:checked) label span{color:var(--accent)}
.stars-in label:has(input:checked) ~ label span{color:var(--line)}
.stars-in:hover label span{color:var(--accent) !important}
.stars-in label:hover ~ label span{color:var(--line) !important}
.stars-in label:has(input:focus-visible) span{outline:2px solid var(--brand);border-radius:4px}
.stars-in label:active span{transform:scale(1.2)}

/* ════════ PERFORMANCE BUDGET for phones & tablets (touch / ≤1023px) ════════
   Phones' GPUs struggle with many simultaneous animations + backdrop blurs (was 81 animations + 12 blurred layers).
   Keep: hero video, one-shot slide-ins, frosted bottom menu (light blur). Freeze: decorative loops. Drop: blur on header/small chips. */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  /* decorative loops off (look identical when still) */
  body:before,body:after{animation:none !important;will-change:auto;width:100vw;height:100vh;left:0;top:0;margin:0;inset:0}
  .hero,.hero:before,.hero-in:before,.tile .g,.tile:after,.btn.shine:after,.tile.sos-tile,.pulse{animation:none !important}
  .hero:before,.hero-in:before,.btn.shine:after{display:none}
  .tile .g{filter:none}
  .hero-video .hv{transform:none;filter:none}
  /* glass: cheap on scroll */
  header.top{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:color-mix(in srgb,var(--card) 94%,transparent) !important}
  nav.bottom{-webkit-backdrop-filter:blur(10px) !important;backdrop-filter:blur(10px) !important;background:color-mix(in srgb,var(--card) 80%,transparent) !important}
  .hero .search,.sg,.pill,.hero-tag,.toast,.wa-float,.storebadges span{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .hero .search{background:rgba(255,255,255,.2)}
  .sg,.pill,.hero-tag{background:rgba(0,0,0,.28)}
  /* lighter shadows (fewer offscreen paints) */
  .card,.cat,.urg,.catcard,.wcard{box-shadow:none}
  .tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -6px var(--t2) !important}
  /* isolate big sections so scrolling repaints less */
  .card,.catcard,.hero,.appband,.photo-band,.urgent{contain:layout paint}
  /* slide-ins: shorter, transform-only */
  html.anim .reveal{transition-duration:.35s}
}

/* ════════ ULTRA-LIGHT PHONES: zero scroll-time effects (real-device feedback: "not smooth") ════════ */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  body:before,body:after{display:none !important}
  html,body{background:var(--bg) !important}
  *,*:before,*:after{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  nav.bottom{background:var(--card) !important;box-shadow:0 -1px 0 var(--line),0 8px 24px -12px rgba(0,0,0,.25) !important}
  nav.bottom:before{display:none}
  header.top{background:var(--card) !important}
  dialog::backdrop{background:rgba(6,21,13,.55)}
  dialog,.callbox,.appbanner{background:var(--card) !important}
  .callui{background:rgba(6,21,13,.85)}
  html.anim .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .tile:after{display:none}
  .hero-video .hv{transition:opacity .6s linear}
}
@media (max-width:1023px), (hover:none) and (pointer:coarse){nav.bottom,header.top{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}}

/* ════════ iPhone installed-app fixes (real-device screenshot) ════════ */
/* 1. header clears the status bar / notch / Dynamic Island */
header.top{padding-top:env(safe-area-inset-top)}
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  /* 3. bottom menu: docked flush to the bottom like a native tab bar, covering the home-indicator area */
  nav.bottom{left:0 !important;right:0 !important;bottom:0 !important;max-width:none;margin:0;border-radius:18px 18px 0 0 !important;border:0 !important;border-top:1px solid var(--line) !important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important}
  .wa-float{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
  .appbanner{bottom:calc(80px + env(safe-area-inset-bottom)) !important}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom)) !important}
  /* 2. Safari: rounded box must clip the video (stops the leak/red smear and the costly off-screen redraw) */
  .hero.has-video,.hero-video{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);transform:translateZ(0)}
  .hero{contain:none !important}
  .hero-video .hv{will-change:opacity}
}
/* installed app: give the top a little breathing room under the status bar */
html.standalone header.top .wrap{padding-top:6px}

/* iPhone: no empty band under the bottom menu — its background always runs to the very bottom edge */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  nav.bottom{overflow:visible !important}
  nav.bottom:after{content:"";position:absolute;left:0;right:0;top:100%;height:120px;background:var(--card);pointer-events:none}
}