/* the business's own colour on its primary actions */
.bz-br .btn-sig,.bz-br .bz-bar-call,.bz-br .bz-ask-ic{background:var(--brand);color:var(--on-brand)}
@media (hover:hover){.bz-br .btn-sig:hover{background:var(--brand);filter:brightness(1.1)}}
/* guides with a cover: picture tiles (a row of cards on laptops, a thumbnail beside the title on phones) */
.bz-g-th{flex:none;display:block;width:68px;height:68px;border-radius:14px;overflow:hidden;background:var(--chip)}
.bz-g-th img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:901px){
  .bz-gl.bz-gl-img{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px}
  .bz-more .bz-gl.bz-gl-img{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .bz-gl.bz-gl-img li{display:flex}
  .bz-gl.bz-gl-img a{flex:1;flex-direction:column;align-items:stretch;gap:12px;padding:10px 10px 16px;border-radius:24px}
  .bz-gl.bz-gl-img .bz-g-th{width:100%;height:auto;aspect-ratio:16/10;border-radius:16px}
  .bz-gl.bz-gl-img .bz-g-t{padding:0 6px}
  .bz-gl.bz-gl-img a > svg{display:none}
  .bz-gl.bz-gl-img .bz-g-th img{transition:transform .6s var(--e-out)}
}
@media (hover:hover) and (min-width:901px){.bz-gl-img a:hover .bz-g-th img{transform:scale(1.04)}}

:root{--pane:#f4f4f6;--grn:#13844f;--grn-s:#e3f5ec;--glow:var(--ink-rgb);
  /* small grey text (under 16px): ink3 is 3.4:1 on white, this is 5.3:1 on white and 4.8:1 on the
     grey pane (WCAG AA). ink3 stays for icons, dots and separators only */
  --bz-mute:#6f6b67}
html:has(.bz-body-pg),body.bz-body-pg{background:var(--paper)}
.bz{padding-bottom:48px}

/* top row: the page's own address + share (plain, like the home's nav) */
.bz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:76px}
.bz-url{display:inline-flex;align-items:center;gap:9px;min-width:0;min-height:44px;text-decoration:none;font:600 15px/1 var(--f);letter-spacing:-.01em;color:var(--bz-mute);white-space:nowrap}
.bz-url .ds-ico{height:19px;margin-right:1px;color:var(--ink);animation:none}.bz-url .ds-ico *{animation:none}
.bz-top-r{flex:none;display:flex;align-items:center;gap:6px}
.bz-thm{width:40px;padding:0;justify-content:center}.bz-thm .i-sun{display:none}
.bz-url span{overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.bz-url b{color:var(--ink);font-weight:750}
.bz-url em{font-style:normal}
@media (hover:hover){.bz-url:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}}
.bz-share{flex:none}
/* mouse clicks never leave a ring (keyboard focus keeps the ds :focus-visible ring) */
.bz .btn:focus:not(:focus-visible),.bz-bar a:focus:not(:focus-visible),.bz-cap a:focus:not(:focus-visible){outline:none}
@media (max-width:900px){
  .bz-top{height:64px;padding-left:15px}
  .bz-url .pre,.bz-url em{display:none}
  .bz-share{width:44px;height:44px;padding:0}
  .bz-share span{display:none}
}

/* avatar + open status */
.bz-av{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;background:var(--mono);color:var(--on-mono);font:800 20px/1 var(--d);letter-spacing:-.02em}
/* the owner's logo: same box, white under it, a hairline so a white logo still has an edge */
.bz-av-img{position:relative;overflow:hidden;background:#fff}
.bz-av-img img{display:block;width:100%;height:100%;object-fit:cover}
.bz-av-img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(17,17,17,.08);pointer-events:none}
.bz-open{display:inline-flex;align-items:center;gap:7px;font:700 14px/1.2 var(--f);letter-spacing:-.005em;color:var(--bz-mute)}
.bz-open i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink3)}
.bz-open.on{color:var(--grn)}
.bz-open.on i{background:var(--grn);animation:ds-live 1.8s infinite}

/* cards and section titles */
.bz-card{position:relative;padding:28px 26px 26px;border-radius:32px;background:var(--card);box-shadow:var(--sh);scroll-margin-top:24px}
.bz-ch{display:flex;align-items:last baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.bz-h{font:800 clamp(24px,21px + .6vw,30px)/1 var(--d);letter-spacing:-.045em;color:var(--ink)}
.bz-cm{flex:none;font:650 13.5px/1.2 var(--f);color:var(--bz-mute)}
/* phones: the same card everywhere (business page and guides), content 30px from the screen edge */
@media (max-width:900px){.bz-card{padding:22px 18px 20px;border-radius:28px}.bz-ch{margin-bottom:14px}}
.bz-lb{font:800 12px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--bz-mute)}

/* guide list (business page + "More from" on guides) */
.bz-gl{list-style:none;display:grid;gap:6px}
.bz-gl a{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:20px;background:var(--pane);text-decoration:none;
  transition:background-color var(--t-hover) var(--e-std),transform .45s var(--e-out)}
.bz-gl a:active{transform:scale(.985);transition-duration:var(--t-press)}
.bz-g-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;background:var(--chip);color:var(--ink2)}
.bz-g-t{flex:1;min-width:0}
.bz-g-t b{display:block;font:750 16px/1.3 var(--f);letter-spacing:-.015em;text-wrap:balance}
.bz-g-t small{display:block;margin-top:3px;font:600 13px/1.35 var(--f);color:var(--bz-mute)}
.bz-gl a > svg{flex:none;color:var(--ink3);transition:transform .55s var(--e-std),color var(--t-hover) var(--e-std)}
.bz-g-new{color:var(--grn);font-weight:750}
/* phones: the title column is narrow, so balance leaves short first lines. Instead the question
   and its answer part each get a line, and pretty fills them */
@media (max-width:699px){.bz-g-t b{text-wrap:pretty}.bz-g-t b > span{display:block}
  /* a slightly smaller icon and tighter gaps give the titles 12px more, so the question part fits one line */
  .bz-gl a{gap:12px;padding:12px 12px 12px 10px}.bz-g-ic{width:36px;height:36px;border-radius:12px}}
/* laptops, 3 cards in a row: the same question line + answer line split, and every title holds two
   lines, so the meta rows ("2 min read · ...") of one row line up */
@media (min-width:901px){.bz-guides.c3 .bz-g-t b{min-height:2.6em;text-wrap:pretty}.bz-guides.c3 .bz-g-t b > span{display:block}
  /* a title with no question part stays one sentence: balanced, so its second line is never 2 words */
  .bz-guides.c3 .bz-g-t b:not(:has(> span)){text-wrap:balance}}
@media (hover:hover){
  .bz-gl a:hover{background:var(--hover)}
  .bz-gl a:hover > svg{transform:translateX(3px);color:var(--ink)}
}

/* footer: name, address, phone (consistent NAP) + the onmap wordmark on the name line, then the
   example disclaimer on its own row */
/* footer: one quiet line under a hairline. Who this is on the left, the onmap mark on the right */
.bz-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:80px;padding-top:26px;border-top:1px solid var(--line)}
.bz-nap{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font:550 14.5px/1.45 var(--f);color:var(--ink2)}
.bz-nap b{flex-basis:100%;font:800 17px/1.2 var(--d);letter-spacing:-.03em;color:var(--ink)}
.bz-nap a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.bz-nap-c{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px}
.bz-nap i,.bz-nap-c i{font-style:normal;color:var(--ink3)}
@media (hover:hover){.bz-nap a:hover{text-decoration:underline;text-underline-offset:3px}}
.bz-made{flex:none;display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-size:17px;color:var(--ink);opacity:.5;text-decoration:none;transition:opacity .2s var(--e-std),transform .45s var(--e-out)}
.bz-made .ds-ico,.bz-made .ds-ico *,.bz-made .ds-wm path{animation:none}
.bz-made:active{transform:scale(.97);transition-duration:var(--t-press)}
@media (hover:hover){.bz-made:hover{opacity:1}}
@media (max-width:900px){.bz-foot{flex-direction:column;align-items:flex-start;gap:6px;margin:48px 18px 0;padding-top:22px}.bz-nap{flex-direction:column;align-items:flex-start;gap:0}.bz-nap > i{display:none}.bz-nap-c{flex-direction:column;align-items:flex-start}.bz-nap-c i{display:none}}

/* mobile contact bar: full width, always there, clears the home indicator. Same pills as every
   other button (999px); solid white with a soft fade above, so content slides under it cleanly. */
.bz-bar{display:none}
@media (max-width:900px){
  .bz{padding-bottom:calc(76px + max(10px,env(safe-area-inset-bottom)) + 28px)}
  .bz-bar{position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px;padding:8px 12px max(10px,env(safe-area-inset-bottom));
    background:var(--paper)}
  .bz-bar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;background:linear-gradient(to top,var(--paper),rgba(var(--paper-rgb),0));pointer-events:none}
  .bz-bar a{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;min-width:0;border-radius:999px;text-decoration:none;
    transition:transform .45s var(--e-out),background-color var(--t-hover) var(--e-std)}
  .bz-bar a:active{transform:scale(.97);transition-duration:var(--t-press)}
  .bz-bar-call{padding:0 16px;background:var(--ink);color:var(--on-ink);font:750 16px/1 var(--f);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
  .bz-bar-2{background:var(--fill);color:var(--ink);font:750 16px/1 var(--f);letter-spacing:-.01em}
  .bz-bar{transition:transform .3s var(--e-out),visibility 0s}
  .bz-bar.off{transform:translate3d(0,calc(100% + 34px),0);visibility:hidden;transition:transform .3s var(--e-std),visibility 0s .3s}
}
@media (prefers-reduced-motion:reduce){.bz-bar{transition:none!important}}
@media (max-width:389px){.bz-bar{gap:6px;padding-inline:10px}.bz-bar-call{font-size:15.5px;padding:0 12px;gap:7px}}

/* inside an /examples phone */
html.bz-embed{scrollbar-width:none}
html.bz-embed::-webkit-scrollbar{display:none}
/* /examples Storefront / Service area filter: ring only the block that changes (page stays put) */
html.bz-embed #areas,html.bz-embed #hours{isolation:isolate;transition:box-shadow var(--t-state) var(--e-std)}
html.bz-hl-place #areas,html.bz-hl-place #hours{box-shadow:0 0 0 1.5px rgba(var(--glow),.4)}

/* demo sheet */
.bz-sheet{width:min(440px,calc(100% - 24px));max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:32px;background:var(--raised);color:var(--ink);box-shadow:0 40px 90px -30px rgba(17,17,17,.5)}
.bz-sheet::backdrop{background:var(--scrim,rgba(17,17,17,.36));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bz-sheet[open]{animation:bz-pop .45s var(--e-out)}
@keyframes bz-pop{from{opacity:0;transform:translateY(18px) scale(.98)}}
.bz-sh-in{position:relative;padding:26px 22px 20px}
.bz-sh-x{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--fill);color:var(--ink);cursor:pointer;
  transition:background-color var(--t-hover) var(--e-std),transform .45s var(--e-out)}
.bz-sh-x:active{transform:scale(.94);transition-duration:var(--t-press)}
@media (hover:hover){.bz-sh-x:hover{background:var(--fill-h)}}
.bz-sh-body{min-height:150px}
.bz-sh-call{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 0 6px}
.bz-sh-av{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:24px;background:var(--mono);color:var(--on-mono);font:800 28px/1 var(--d);margin-bottom:16px}
.bz-sh-av i{position:absolute;inset:0;border-radius:24px;border:1.5px solid rgba(var(--glow),.7);animation:bz-callp 1.6s var(--e-out) infinite}
.bz-sh-av i+i{animation-delay:.8s}
@keyframes bz-callp{to{transform:scale(1.8);opacity:0}}
.bz-sh-call b{font:800 26px/1.1 var(--d);letter-spacing:-.04em}
.bz-sh-call small{margin-top:6px;font:600 15px/1.4 var(--f);color:var(--bz-mute);font-variant-numeric:tabular-nums}
.bz-sh-call.ended .bz-sh-av i{animation:none;opacity:0}
.bz-sh-h{display:flex;align-items:center;gap:12px;padding-right:48px}
.bz-sh-h .bz-av{width:44px;height:44px;border-radius:14px;font-size:17px}
.bz-sh-h b{display:block;font:800 21px/1.15 var(--d);letter-spacing:-.035em}
.bz-sh-h small{display:block;font:600 13.5px/1.4 var(--f);color:var(--bz-mute)}
.bz-sh-chat{margin-top:16px;padding:14px;border-radius:24px;background:var(--pane)}
.bz-sh-chat textarea{display:block;width:100%;min-height:84px;resize:none;border:0;border-radius:18px;padding:12px 14px;background:var(--chip);font:550 16px/1.4 var(--f);box-shadow:0 1px 2px rgba(17,17,17,.06);transition:box-shadow .25s var(--e-std)}
.bz-sh-chat textarea:focus{outline:0;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.26),0 0 0 5px rgba(var(--ink-rgb),.06)}
.bz-sh-send{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px}
/* "Send" with nothing added: a one-line hint left of the button (no height change while the keyboard is up) */
.bz-sh-hint{flex:1;min-width:0;padding-left:4px;font:600 13.5px/1.35 var(--f);color:var(--bz-mute)}
.bz-sh-hint:empty{visibility:hidden}
.bz-sh-chat textarea.nudge{animation:bz-nudge .18s var(--e-std)}
@keyframes bz-nudge{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.bz-sh-bub{margin-left:auto;max-width:88%;width:fit-content;padding:11px 14px;border-radius:20px 20px 6px 20px;background:var(--ink);color:var(--on-ink);font:580 15.5px/1.4 var(--f);white-space:pre-wrap;word-break:break-word;animation:bz-pop .45s var(--e-out)}
.bz-sh-st{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:6px;font:700 12.5px/1 var(--f);color:var(--bz-mute)}
.bz-sh-st svg{color:var(--grn)}
.bz-sh-dir{margin-top:16px;display:grid;gap:8px}
.bz-sh-dir a{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 18px;border-radius:18px;background:var(--pane);text-decoration:none;font:750 16px/1 var(--f);
  transition:background-color var(--t-hover) var(--e-std),transform .45s var(--e-out)}
.bz-sh-dir a:active{transform:scale(.98);transition-duration:var(--t-press)}
@media (hover:hover){.bz-sh-dir a:hover{background:var(--hover)}}
.bz-sh-dir a svg{color:var(--ink3)}
.bz-sh-addr{margin-top:14px;display:flex;align-items:flex-start;gap:9px;font:650 15.5px/1.45 var(--f);color:var(--ink2)}
.bz-sh-addr svg{flex:none;margin-top:3px;color:var(--ink)}
.bz-sh-note{display:flex;gap:9px;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:16px;background:var(--pane);color:var(--ink2);font:600 14px/1.4 var(--f)}
.bz-sh-note>span:first-child{flex:none;margin-top:1px}
.bz-sh-acts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.bz-sh-acts .btn{min-width:96px}
.bz-toast{position:fixed;z-index:80;left:50%;bottom:40px;transform:translate3d(-50%,16px,0);opacity:0;pointer-events:none;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--on-ink);font:700 14px/1.2 var(--f);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);transition:opacity var(--t-exit) var(--e-std),transform var(--t-state) var(--e-out)}
.bz-toast.on{opacity:1;transform:translate3d(-50%,0,0)}
/* phones: same bottom-centre spot, lifted above the contact bar (or just above the home indicator
   while the bar has stepped aside) */
@media (max-width:900px){.bz-toast{bottom:calc(env(safe-area-inset-bottom) + 84px);max-width:calc(100% - 32px);text-align:center}.bz-bar.off ~ .bz-toast{bottom:calc(env(safe-area-inset-bottom) + 24px)}}
@media (max-width:600px){
  /* bottom sheet: rides the keyboard (html.kb / --kb from core.ts) and never grows past the visible area */
  .bz-sheet{width:100%;margin:auto 0 0;border-radius:30px 30px 0 0;padding-bottom:env(safe-area-inset-bottom);
    max-height:calc(var(--vvh,100svh) - 12px);overflow:auto;overscroll-behavior:contain;transform:translate3d(0,calc(-1 * var(--kb,0px)),0);transition:transform .25s var(--e-out)}
  html.kb .bz-sheet{padding-bottom:0}
  .bz-sheet[open]{animation:bz-up .45s var(--e-out)}
  @keyframes bz-up{from{transform:translateY(100%)}}
  html.kb .bz-sh-note,html.kb .bz-sh-acts{display:none}
}
@media (prefers-reduced-motion:reduce){.bz-sheet[open],.bz-sh-bub,.bz-sh-chat textarea.nudge{animation:none}.bz-toast{transition:opacity .2s}.bz-open.on i{animation:none}}
/* dark (ds/theme.ts): lines instead of shadows; the owner's logo keeps its white backing */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bz-mute:#949494;--grn:#3ecf8e;--grn-s:rgba(62,207,142,.14);
  .bz-sheet{box-shadow:0 0 0 1px var(--line2),0 40px 90px -30px rgba(0,0,0,.7)}
  .bz-sh-chat textarea{box-shadow:0 0 0 1px var(--line)}
  .bz-toast{box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
  .bz-thm .i-moon{display:none}.bz-thm .i-sun{display:block}}}:root[data-theme=dark]{--bz-mute:#949494;--grn:#3ecf8e;--grn-s:rgba(62,207,142,.14);
  .bz-sheet{box-shadow:0 0 0 1px var(--line2),0 40px 90px -30px rgba(0,0,0,.7)}
  .bz-sh-chat textarea{box-shadow:0 0 0 1px var(--line)}
  .bz-toast{box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
  .bz-thm .i-moon{display:none}.bz-thm .i-sun{display:block}}

.bz-wrap{width:min(1180px,calc(100% - 64px));margin-inline:auto}

/* hero: the answer first (identity left), hours card right */
.bz-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:center;padding:8px 0 0}
.bz-id-av{width:64px;height:64px;border-radius:20px;font-size:26px}
.bz-name{margin-top:26px;font:800 clamp(46px,30px + 2.8vw,72px)/.95 var(--d);letter-spacing:-.052em;text-wrap:balance}
.bz-dim{display:block;margin-top:.14em;font-size:.6em;line-height:1.02;letter-spacing:-.045em;color:var(--ink-dim)}
/* the home's lead: 560 weight, 68% ink. Laptops: one sentence per line; phones: balanced lines */
.bz-sum{margin-top:22px;max-width:42ch;font:560 19px/1.45 var(--f);letter-spacing:-.014em;color:var(--lead);text-wrap:balance}
@media (min-width:700px){.bz-sum-s{display:block;text-wrap:balance}}
.bz-id .bz-open{margin-top:14px;font-size:15px}
.bz-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.bz-acts .btn span{font-variant-numeric:tabular-nums}
.bz-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;list-style:none}
.bz-facts li{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 12px;border-radius:999px;background:var(--pane);font:650 13.5px/1 var(--f);letter-spacing:-.01em;color:var(--ink2);white-space:nowrap}
.bz-facts svg{flex:none;color:var(--ink)}

/* hours / areas card */
/* every row is inset 12px, so the highlighted row's pane shares its edges with the address and areas panes */
.bz-rows > div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:14px;font:600 15px/1.3 var(--f)}
.bz-rows dt{color:var(--ink2)}
.bz-rows dd{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.bz-rows [data-closed] dd{color:var(--bz-mute);font-weight:600}
.bz-rows .today{background:var(--pane)}
.bz-rows .today dt,.bz-rows .today dd{color:var(--ink);font-weight:800}
.bz-hours .today dt::after{content:"Today";margin-left:8px;padding:3px 8px;border-radius:999px;background:var(--chip);color:var(--ink2);font:750 11.5px/1 var(--f);vertical-align:1px}
.bz-addr{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:16px;padding:14px;border-radius:22px;background:var(--pane)}
.bz-addr-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--chip);color:var(--ink)}
.bz-addr address{align-self:center;font:700 15px/1.4 var(--f);font-style:normal;letter-spacing:-.01em;text-wrap:balance}
.bz-addr-acts{grid-column:2;display:flex;gap:8px;flex-wrap:wrap}
.bz-ar-l{margin-top:22px}
.bz-areas{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding:14px;border-radius:22px;background:var(--pane)}
.bz-areas li{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 10px;border-radius:999px;background:var(--chip);box-shadow:0 6px 14px -10px rgba(17,17,40,.35);font:700 14px/1 var(--f);letter-spacing:-.01em;white-space:nowrap}
.bz-areas svg{color:var(--ink3)}

/* body: Asked nearby + Services side by side (they end level), then Guides as a full-width row */
.bz-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:24px;align-items:stretch;margin-top:72px}
.bz-gwrap{margin-top:24px}
@media (min-width:901px){
  .bz-guides .bz-gl{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bz-guides.c3 .bz-gl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bz-guides .bz-gl a{height:100%}
}
.bz-qa{display:grid;gap:8px}
.bz-q{padding:14px 16px 15px;border-radius:20px;background:var(--pane)}
.bz-q h3{font:750 16.5px/1.3 var(--f);letter-spacing:-.015em}
.bz-q p{margin-top:4px;font:550 15px/1.5 var(--f);letter-spacing:-.006em;color:var(--ink2)}
.bz-ask{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--card);text-decoration:none;font:600 15px/1.35 var(--f);color:var(--ink2);box-shadow:var(--sh);
  transition:box-shadow var(--t-hover) var(--e-std),transform .45s var(--e-out)}
.bz-ask:active{transform:scale(.985);transition-duration:var(--t-press)}
.bz-ask-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--on-ink)}
.bz-ask > span:nth-child(2){flex:1}
.bz-ask-nw{white-space:nowrap}
.bz-ask b{color:var(--ink);font-weight:800}
.bz-ask > svg{flex:none;color:var(--ink3);transition:transform .55s var(--e-std)}
@media (hover:hover){.bz-ask:hover{box-shadow:var(--sh),inset 0 0 0 1px var(--ink3)}.bz-ask:hover > svg{transform:translateX(3px);color:var(--ink)}}
/* both cards end on the same white "Text us" pill, pinned to the bottom. In Services the price note
   and the pill are one footer group (note pinned down, pill 14px under it), so any spare height
   sits after the last price, where the list ends, never between the note and the pill */
#asked,#services{display:flex;flex-direction:column}
#asked .bz-ask,#services .bz-ask{margin-top:auto}
#services .bz-svc-n{margin-top:auto}
#services .bz-svc-n + .bz-ask{margin-top:14px}
/* laptops: Services is stretched to end level with Asked nearby. The spare height goes into the
   price rows (each row grows a little, its divider stays midway), not into a hole above the note */
@media (min-width:901px){#services .bz-svc{flex:1 1 auto;display:flex;flex-direction:column}#services .bz-svc li{flex:1 1 auto}}
.bz-qa{margin-bottom:14px}
.bz-svc{list-style:none;margin-bottom:16px}
.bz-svc li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.bz-svc li:last-child{border-bottom:0;padding-bottom:2px}
.bz-svc li:first-child{padding-top:2px}
.bz-svc b{display:block;font:700 16px/1.3 var(--f);letter-spacing:-.012em}
.bz-svc small{display:block;margin-top:2px;font:600 13.5px/1.35 var(--f);color:var(--bz-mute)}
.bz-price{flex:none;font:800 16.5px/1 var(--f);letter-spacing:-.015em;white-space:nowrap}
.bz-svc-n{display:flex;gap:10px;align-items:flex-start;padding:13px 16px 14px 14px;border-radius:18px;background:var(--pane);font:600 14px/1.45 var(--f);color:var(--ink2);text-wrap:pretty}
.bz-svc-n svg{flex:none;margin-top:2px;color:var(--ink)}

/* desktop dock: a white card (24px radius, like the panes) the width of the page column, floating 16px above the bottom edge,
   only once the hero buttons are gone; same status line as the page. Solid surface, so nothing
   shows through it */
.bz-cap{position:fixed;z-index:40;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));pointer-events:none;
  transform:translate3d(0,calc(100% + 40px),0);visibility:hidden;transition:transform .35s var(--e-std),visibility 0s .35s}
.bz-cap.on{transform:none;visibility:visible;transition:transform .5s var(--e-out)}
.bz-cap-in{pointer-events:auto;width:min(1180px,calc(100% - 64px));height:68px;margin-inline:auto;padding:0 12px;border-radius:24px;background:var(--raised);
  box-shadow:0 0 0 1px rgba(17,17,17,.05),0 1px 0 rgba(17,17,17,.04),0 22px 50px -18px rgba(17,17,17,.3);display:flex;align-items:center;justify-content:space-between;gap:28px}
.bz-cap-id{min-width:0;display:flex;align-items:center;gap:12px}
.bz-cap-av{width:44px;height:44px;border-radius:13px;font-size:17px}
.bz-cap-t{min-width:0;display:flex;align-items:baseline;gap:14px}
.bz-cap-t b{font:800 17px/1.1 var(--d);letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz-cap-st{font-size:14px;white-space:nowrap}
.bz-cap-a{flex:none;display:flex;gap:8px}
.bz-cap .btn-sm{height:46px;padding:0 20px;font-size:15px}
@media (min-width:901px){.bz{padding-bottom:calc(68px + 16px + 40px)}html{scroll-padding-bottom:110px}}
@media (prefers-reduced-motion:reduce){.bz-cap,.bz-cap.on{transition:visibility 0s}}
/* the copy toast clears the dock while it is up */
@media (min-width:901px){.bz-cap.on ~ .bz-toast{bottom:104px}}

/* photos (real pages): one row of tiles on laptops (two rows of 3 for six), one wide frame for a single
   photo; phones swipe a strip (the next photo peeks in). Tiles crop to a fixed shape, so nothing moves while
   they load */
.bz-pwrap{margin-top:72px}
.bz-pwrap + .bz-grid{margin-top:24px}
.bz-ph{list-style:none;display:grid;grid-template-columns:repeat(var(--ph-c,3),minmax(0,1fr));gap:10px}
.bz-photos[data-n="1"]{--ph-c:1;--ph-r:21/9}
.bz-photos[data-n="2"]{--ph-c:2}
.bz-photos[data-n="4"]{--ph-c:4;--ph-r:1/1}
.bz-photos[data-n="5"]{--ph-c:5;--ph-r:4/5}
.bz-ph li{border-radius:20px;overflow:hidden;background:var(--pane)}
.bz-ph img{display:block;width:100%;height:auto;aspect-ratio:var(--ph-r,4/3);object-fit:cover}
@media (max-width:900px){
  .bz-pwrap{margin-top:14px}
  .bz-pwrap + .bz-grid{margin-top:14px}
  .bz-photos{padding-inline:0}
  .bz-photos .bz-ch{padding-inline:18px}
  .bz-ph{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;padding-inline:18px;scrollbar-width:none;overscroll-behavior-x:contain}
  .bz-ph::-webkit-scrollbar{display:none}
  .bz-ph li{flex:0 0 82%;scroll-snap-align:start;border-radius:18px}
  .bz-photos[data-n="1"] .bz-ph li{flex-basis:100%}
  .bz-ph img{aspect-ratio:4/3}
}

/* ---------- the new template (.bz-v2: a page with a cover) ---------- */
.bz-cvr{position:relative;width:min(1180px,calc(100% - 64px));height:clamp(240px,27vw,340px);margin:16px auto 0;border-radius:32px;overflow:hidden;background:var(--pane)}
.bz-cvr > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 82%}
.bz-cvr::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,0) 48%);pointer-events:none}
.bz-cvr .bz-top{position:relative;z-index:1;padding:0 18px}
.bz-cvr .bz-url{height:40px;min-height:40px;padding:0 16px 0 10px;border-radius:999px;background:rgba(12,13,15,.44);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:rgba(255,255,255,.76)}
.bz-cvr .bz-url b,.bz-cvr .bz-url .ds-ico{color:#fff}
.bz-cvr .bz-share{background:rgba(12,13,15,.44);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:#fff;box-shadow:none}
.bz-v2 .bz-hero{align-items:start;grid-template-areas:"id place" "ph ph";row-gap:44px;padding-top:0}
.bz-v2 .bz-hero.solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "ph"}
.bz-v2:not(.bz-cv) .bz-place{margin-top:0}
.bz-v2 .bz-id{grid-area:id}
.bz-v2 .bz-place{grid-area:place;margin-top:28px}
.bz-v2 .bz-ps{grid-area:ph}
/* laptops: the logo sits inside the cover, in from its lower left corner. Phones: it stands on the cover's lower edge */
.bz-cv .bz-id-av{position:relative;z-index:2;width:104px;height:104px;margin:-132px 0 0 28px;border-radius:30px;box-shadow:0 14px 34px -12px rgba(0,0,0,.55);font-size:40px}
.bz-cv .bz-name{margin-top:58px}
.bz-ps .bz-ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.bz-ps-all{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink2);font:650 15px/1 var(--f);cursor:pointer}
.bz-ps-all svg{transition:transform .3s var(--e-std)}
.bz-ps-l{list-style:none;display:grid;grid-template-columns:repeat(var(--pn,5),minmax(0,1fr));gap:12px}
.bz-ps-l button{display:block;width:100%;padding:0;border:0;border-radius:22px;overflow:hidden;background:var(--pane);cursor:zoom-in}
.bz-ps-l img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:transform .6s var(--e-out)}
@media (hover:hover){.bz-ps-l button:hover img{transform:scale(1.045)}.bz-ps-all:hover{color:var(--ink)}.bz-ps-all:hover svg{transform:translateX(3px)}}
.bz-ps-l button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the address under the name, with the two map apps */
.bz-loc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px}
.bz-also{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font:560 15.5px/1.45 var(--f);color:var(--ink2)}
.bz-also svg{flex:none;margin-top:2px;color:var(--ink3)}
.bz-also b{font-weight:750;color:var(--ink)}
.bz-loc-a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0;border:0;background:none;color:var(--ink);font:650 16px/1.3 var(--f);letter-spacing:-.01em;text-align:left;cursor:copy}
.bz-loc-a address{font-style:normal}
.bz-loc-a > svg:first-child{flex:none;color:var(--ink2)}
.bz-loc-c{flex:none;color:var(--ink3);transition:color .2s var(--e-std)}
@media (hover:hover){.bz-loc-a:hover .bz-loc-c{color:var(--ink)}}
.bz-loc-m{display:flex;gap:6px}
.bz-loc-m .btn{height:38px;padding:0 14px 0 12px;font-size:14px}
.bz-v2 .bz-sum{margin-top:18px}
/* laptops: the open line is on the hours card right beside the name, so the one under the summary steps aside */
@media (min-width:901px){.bz-v2 .bz-id > .bz-open{display:none}.bz-v2 .bz-acts{margin-top:24px}}
/* hours: seven day marks, then the hours in as few lines as the week needs */
.bz-hrs .bz-ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.bz-hrs .bz-open{margin:0;font-size:14.5px}
.bz-wk{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 12px;padding:0}
.bz-wk li{display:grid;place-items:center;height:44px;border-radius:14px;background:var(--pane);font:700 13px/1 var(--f);letter-spacing:-.01em;color:var(--ink2)}
.bz-wk li[data-closed]{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--bz-mute)}
.bz-wk li.today{background:var(--ink);color:var(--on-ink);box-shadow:none}
.bz-hrs-g > div{padding:11px 12px}
.bz-hrs-g .today{background:none}
.bz-hrs-g > div + div{border-top:1px solid var(--line);border-radius:0}
/* the photo viewer */
.bz-vw{position:fixed;inset:0;z-index:90;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,8,10,.95);color:#fff;overflow:hidden}
.bz-vw::backdrop{background:rgba(8,8,10,.6)}
.bz-vw[open]{animation:bz-vw-in .22s ease-out}
@keyframes bz-vw-in{from{opacity:0}}
.bz-vw-s{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.bz-vw-s::-webkit-scrollbar{display:none}
.bz-vw-s figure{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;margin:0;padding:68px 16px 76px}
.bz-vw-s img{display:block;max-width:100%;max-height:calc(100vh - 144px);max-height:calc(100dvh - 144px);width:auto;height:auto;border-radius:16px}
.bz-vw button{display:grid;place-items:center;position:absolute;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bz-vw-x{top:calc(12px + env(safe-area-inset-top));right:12px}
.bz-vw-p{left:16px;top:50%;translate:0 -50%}.bz-vw-nx{right:16px;top:50%;translate:0 -50%}
.bz-vw-c{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));translate:-50% 0;font:650 14px/1 var(--f);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.8)}
@media (hover:hover){.bz-vw button:hover{background:rgba(255,255,255,.22)}}
@media (pointer:coarse){.bz-vw-p,.bz-vw-nx{display:none}}
@media (prefers-reduced-motion:reduce){.bz-vw[open]{animation:none}.bz-ps-l img{transition:none}}
@media (max-width:900px){
  .bz-cvr{width:100%;height:min(58vw,260px);margin:0;border-radius:0 0 28px 28px}
  .bz-cvr .bz-top{padding:0 12px 0 14px}
  .bz-cvr .bz-url{padding:0 14px 0 9px}
  .bz-cv .bz-id-av{width:84px;height:84px;margin:-42px 0 0;border-radius:25px;box-shadow:0 0 0 5px var(--paper);font-size:32px}
  .bz-cv .bz-name{margin-top:16px}
  .bz-v2 .bz-place{margin-top:24px}
  .bz-loc{margin-top:12px;gap:8px}
  .bz-loc-a{font-size:15.5px}
  .bz-loc-m{flex-basis:100%}
  .bz-loc-m .btn{flex:1;justify-content:center;height:44px}
  .bz-wk{gap:4px}.bz-wk li{height:40px;border-radius:12px;font-size:12.5px}
  .bz-ps{margin-top:26px}
  .bz-ps .bz-ch{padding-inline:18px;margin-bottom:8px}
  .bz-ps-l{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:18px;padding-inline:18px;margin-inline:-12px;padding-inline:30px;scrollbar-width:none;overscroll-behavior-x:contain}
  .bz-ps-l::-webkit-scrollbar{display:none}
  .bz-ps-l li{flex:0 0 42%;scroll-snap-align:start}
  .bz-ps-l button{border-radius:18px}
  .bz-ps-l img{aspect-ratio:4/3}
}

/* real pages with only one of Asked nearby / Services: that card takes the row */
.bz-grid.one{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px) and (min-width:901px){.bz-hero{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:40px}}
@media (min-width:901px) and (max-height:760px){.bz-grid{margin-top:40px}.bz-name{margin-top:20px}.bz-sum{margin-top:16px}.bz-acts{margin-top:20px}.bz-facts{margin-top:18px}.bz-id-av{width:56px;height:56px;font-size:23px}
  .bz-place{padding-block:22px 20px}.bz-place .bz-ch{margin-bottom:12px}.bz-rows > div{padding-block:7px}}

@media (max-width:900px){
  .bz-wrap{width:calc(100% - 24px)}
  .bz-hero{display:block;padding:4px 0 0}
  .bz-id{padding:0 18px}
  .bz-id-av{width:56px;height:56px;border-radius:18px;font-size:23px}
  .bz-name{margin-top:18px;font-size:clamp(38px,11vw,48px);line-height:.98;letter-spacing:-.05em}
  .bz-dim{font-size:.66em}
  .bz-sum{margin-top:16px;font-size:17px;line-height:1.5}
  .bz-id .bz-open{margin-top:12px}
  .bz-acts{display:none}
  .bz-facts{margin-top:18px;gap:6px}
  .bz-facts li{height:32px;font-size:13px;padding:0 12px 0 10px}
  .bz-facts li:nth-child(n+3){display:none}
  .bz-place{margin-top:28px}
  .bz-grid{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:14px}
  .bz-gwrap{margin-top:14px}
  .bz-q{padding:13px 14px 14px;border-radius:18px}
  .bz-q h3{font-size:16px}
  .bz-cap{display:none}
}
/* phones up to 430px wide: the two fact chips share one row */
@media (max-width:430px){.bz-facts{gap:5px}.bz-facts li{gap:5px;font-size:12.5px;letter-spacing:-.015em;padding:0 10px 0 8px}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.bz-areas li{box-shadow:none}
  .bz-cap-in{box-shadow:0 0 0 1px var(--line2),0 22px 50px -18px rgba(0,0,0,.7)}}}:root[data-theme=dark]{.bz-areas li{box-shadow:none}
  .bz-cap-in{box-shadow:0 0 0 1px var(--line2),0 22px 50px -18px rgba(0,0,0,.7)}}

/* the request form: a card after Services. Laptops: the title on the left, the fields on the right */
.bz-rwrap{margin-top:24px}
.bz-req{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:24px 56px;align-items:start}
.bz-req .bz-ch{margin-bottom:0}
.bz-rq-l{margin-top:12px;max-width:24ch;font:560 16px/1.5 var(--f);letter-spacing:-.008em;color:var(--ink2);text-wrap:balance}
.bz-rq-g{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.bz-rq-fl{display:grid;gap:7px;align-content:start;min-width:0}
.bz-rq-fl.w{grid-column:1/-1}
.bz-rq-fl label{font:650 13.5px/1.2 var(--f);color:var(--ink2)}
.bz-rq-fl label small{font:inherit;font-weight:550;color:var(--bz-mute)}
.bz-rq-fl input,.bz-rq-fl textarea{display:block;width:100%;margin:0;border:0;border-radius:16px;background:var(--pane);color:var(--ink);font:550 16px/1.4 var(--f);letter-spacing:-.006em;transition:box-shadow .25s var(--e-std)}
.bz-rq-fl input{height:52px;padding:0 16px}
.bz-rq-fl textarea{min-height:96px;padding:14px 16px;resize:vertical}
.bz-rq-fl input:focus,.bz-rq-fl textarea:focus{outline:0;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.26),0 0 0 5px rgba(var(--ink-rgb),.06)}
.bz-rq-fl [aria-invalid="true"],.bz-rq-fl [aria-invalid="true"]:focus{box-shadow:0 0 0 1.5px var(--red)}
.bz-rq-e,.bz-rq-err{font:600 13.5px/1.4 var(--f);color:var(--red)}
.bz-rq-err{grid-column:1/-1}
.bz-rq-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.bz-rq-a{display:flex;align-items:flex-start;padding-top:23px}
.bz-rq-a .btn{width:100%;height:52px;font-size:16.5px}
.bz-rq-f[aria-busy="true"] .btn{opacity:.6;pointer-events:none}
.bz-rq-ok{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 18px 18px;border-radius:22px;background:var(--pane)}
.bz-rq-ok:focus{outline:0}
.bz-rq-ok-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--grn-s);color:var(--grn)}
/* an example page's answer ("Nothing was sent.") is a note, not a success */
.bz-rq-ok-ic svg + svg,.bz-rq-ok.ex .bz-rq-ok-ic svg:first-child{display:none}
.bz-rq-ok.ex .bz-rq-ok-ic svg + svg{display:block}
.bz-rq-ok.ex .bz-rq-ok-ic{background:var(--chip);color:var(--ink2)}
.bz-rq-ok p{font:600 16px/1.5 var(--f);letter-spacing:-.008em;color:var(--ink);text-wrap:pretty}
.bz-rq-ok .btn{margin-top:14px}
.bz-rq-f[hidden],.bz-rq-ok[hidden],.bz-rq-e[hidden],.bz-rq-err[hidden]{display:none}
@media (max-width:900px){
  .bz-rwrap{margin-top:14px}
  .bz-req{display:block}
  .bz-rq-l{margin-top:8px;max-width:none}
  .bz-rq{margin-top:18px}
  .bz-rq-g{grid-template-columns:minmax(0,1fr);gap:14px}
  .bz-rq-a{padding-top:2px}
  /* the contact bar is fixed over the bottom of the screen: a focused field or the button scrolls clear of it, and
     the bar steps aside while the keyboard is up (html.kb, src/motion/core.ts) */
  .bz-rq-fl input,.bz-rq-fl textarea,.bz-rq-a .btn{scroll-margin-bottom:112px}
  html.kb .bz-bar{transform:translate3d(0,calc(100% + 34px),0);visibility:hidden}
}
/* dark: a hairline instead of the grey pane's contrast; focus and error rings keep their place over it */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){.bz-rq-fl input,.bz-rq-fl textarea{box-shadow:0 0 0 1px var(--line)}
  .bz-rq-fl input:focus,.bz-rq-fl textarea:focus{box-shadow:0 0 0 1px rgba(var(--ink-rgb),.3),0 0 0 5px rgba(var(--ink-rgb),.07)}
  .bz-rq-fl [aria-invalid="true"],.bz-rq-fl [aria-invalid="true"]:focus{box-shadow:0 0 0 1.5px var(--red)}}}:root[data-theme=dark]{.bz-rq-fl input,.bz-rq-fl textarea{box-shadow:0 0 0 1px var(--line)}
  .bz-rq-fl input:focus,.bz-rq-fl textarea:focus{box-shadow:0 0 0 1px rgba(var(--ink-rgb),.3),0 0 0 5px rgba(var(--ink-rgb),.07)}
  .bz-rq-fl [aria-invalid="true"],.bz-rq-fl [aria-invalid="true"]:focus{box-shadow:0 0 0 1.5px var(--red)}}