/* KZM Contractors' booking sheet: B, Quiet Concierge (kzm-book-v-b.html, Luke's pick 27 Oct 2026), mounted by shared/kzmbook.js into the host's box.
   .kbk-d (box 640px or wider): one centred 792x652 card on paper, scaled whole (--kbk-z, set by the module) when the box is smaller, so it always reads as B.
   .kbk-p: a page sheet from the bottom, --kbk-top (38px) below the box's top edge, --kbk-safe (18px) of room under the footer for a home bar, top corners
   --kbk-radius. Shorter than its design height (--kbk-ph) the sheet is laid out at that height and scaled to fit (.kbk-fit). Needs shared/kzm-tokens.css. Every class and custom property kbk- prefixed. The resets weigh one class, so the host's bare tag rules lose to them and the
   module's own rules (written after) beat them. .kbk-box clips everything, so the week track or a flying icon never widens the host page. */
.kbk-box{position:absolute;inset:0;overflow:hidden}
.kbk{--kbk-line:var(--kzm-line-paper);--kbk-f2:rgba(29,58,41,.74);--kbk-f3:rgba(29,58,41,.42);
  /* the picked card's wash: warm in winter (heating weather), cool in summer */
  --kbk-w1:color-mix(in srgb,var(--kzm-mustard) 30%,transparent);--kbk-w2:color-mix(in srgb,var(--kzm-orange) 9%,transparent);
  position:absolute;inset:0;pointer-events:none;font-family:var(--kzm-sans);font-stretch:100%;font-size:15px;font-weight:400;font-style:normal;line-height:1.4;letter-spacing:normal;
  text-transform:none;white-space:normal;color:var(--kzm-forest);text-align:left;-webkit-font-smoothing:antialiased}
.kbk[data-season=summer]{--kbk-w1:color-mix(in srgb,var(--kzm-mint) 50%,transparent);--kbk-w2:color-mix(in srgb,var(--kzm-teal) 10%,transparent)}
.kbk :where(*){box-sizing:border-box;margin:0}
.kbk :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kbk :where(button:disabled){cursor:default}
.kbk :where(:focus-visible){outline:2px solid var(--kzm-forest);outline-offset:3px}
.kbk-i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the surface */
.kbk-d{display:flex;align-items:center;justify-content:center}
.kbk-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--kzm-paper);pointer-events:auto}
.kbk-d .kbk-card{flex:none;width:792px;height:652px;scale:var(--kbk-z,1);border-radius:var(--kzm-r-sheet);box-shadow:var(--kzm-sh-sheet),0 0 0 1px rgba(15,35,24,.06)}
.kbk-p .kbk-card{position:absolute;left:0;right:0;top:var(--kbk-top,38px);bottom:0;border-radius:var(--kbk-radius,var(--kzm-r-sheet-top) var(--kzm-r-sheet-top) 0 0);box-shadow:0 -14px 40px rgba(8,18,12,.32)}
.kbk-fit .kbk-p .kbk-card{top:auto;right:auto;width:calc(100% / var(--kbk-z));height:var(--kbk-ph);scale:var(--kbk-z);transform-origin:0 100%}
.kbk-open.kbk-d .kbk-card{animation:kbk-rise .6s var(--kzm-ease-out) both}
.kbk-open.kbk-p .kbk-card{animation:kbk-up .55s var(--kzm-ease-out) both}
@keyframes kbk-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes kbk-up{from{transform:translateY(100%)}}
.kbk-bye.kbk-d .kbk-card{animation:kbk-drop .38s cubic-bezier(.5,0,.75,0) forwards}
.kbk-bye.kbk-p .kbk-card{animation:kbk-down .42s cubic-bezier(.5,0,.75,0) forwards}
@keyframes kbk-drop{to{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes kbk-down{to{transform:translateY(100%)}}

/* the van stripe, thin, along the top edge: duco ground, three bands in the season's colours, painted on as far as you have got */
.kbk-stripe{position:relative;flex:none;height:16px;background:var(--kzm-forest)}
.kbk-stripe::before,.kbk-stripe i{content:"";position:absolute;top:0;bottom:0;left:0;
  background:linear-gradient(180deg,transparent 0 2px,var(--kzm-season-1) 2px 4px,transparent 4px 6px,var(--kzm-season-2) 6px 9px,transparent 9px 11px,var(--kzm-season-3) 11px 14px,transparent 14px)}
.kbk-stripe::before{right:0;opacity:.13}
.kbk-stripe i{display:block;width:calc(var(--p) * 100%);animation:kbk-paint var(--kzm-t-paint) var(--kzm-ease-paint) .08s both}
@keyframes kbk-paint{from{width:calc(var(--p0) * 100%)}}
.kbk-grab{display:block;flex:none;width:36px;height:5px;margin:6px auto 0;border-radius:3px;background:rgba(29,58,41,.2)}

/* top: back, the KZM lockup, close */
.kbk-top{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:66px;padding:0 20px}
.kbk-top>:first-child{justify-self:start}.kbk-top>:last-child{justify-self:end}
.kbk-lock{text-align:center;line-height:1;user-select:none}
.kbk-lock b{display:block;font-family:var(--kzm-display);font-weight:400;font-size:22px;letter-spacing:.01em}
.kbk-lock small{display:block;margin:3px -.3em 0 0;font-size:7.5px;font-weight:800;font-stretch:125%;letter-spacing:.3em;text-transform:uppercase;color:var(--kzm-on-cream-2)}
.kbk-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--kzm-white);box-shadow:var(--kzm-sh-card);transition:transform .45s var(--kzm-ease-spring),box-shadow .25s}
.kbk-x .kbk-i{width:18px;height:18px}
.kbk-x:hover{transform:rotate(90deg);box-shadow:var(--kzm-sh-lift)}
.kbk-back{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px 0 8px;border-radius:999px;font-size:14px;font-weight:600;color:var(--kbk-f2);transition:background .2s,color .2s}
.kbk-back .kbk-i{width:18px;height:18px;transition:transform .3s var(--kzm-ease-out)}
.kbk-back:hover{background:rgba(29,58,41,.06);color:var(--kzm-forest)}
.kbk-back:hover .kbk-i{transform:translateX(-2px)}

/* the question */
.kbk-main{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 48px 0}
.kbk-ask{flex:none;text-align:center}
.kbk-eye{display:inline-flex;align-items:center;gap:8px;height:16px;font-size:11px;font-weight:700;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--kzm-on-cream-2)}
@keyframes kbk-draw{to{stroke-dashoffset:0}}
.kbk-q{margin-top:10px;font-family:var(--kzm-display);font-weight:400;font-size:var(--kzm-fs-q-d);line-height:var(--kzm-lh-q);letter-spacing:-.005em;text-wrap:balance}
.kbk-q:focus,.kbk-band-h:focus{outline:0}
.kbk-sub{margin-top:9px;font-size:15.5px;line-height:1.45;color:var(--kbk-f2);text-wrap:balance}
.kbk-body{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:22px}
.kbk-d:not([data-step="1"]) .kbk-body{justify-content:center;padding-bottom:18px}

/* foot: what you have picked so far on the left, the one button on the right */
.kbk-foot{position:relative;flex:none;display:flex;align-items:center;gap:16px;height:88px;padding:0 24px 0 28px;border-top:1px solid var(--kbk-line)}
.kbk-foot-l{flex:1;min-width:0}
.kbk-acts{display:flex;gap:10px;margin-left:auto}
.kbk-go{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;min-width:184px;padding:0 24px;border-radius:var(--kzm-r-button);
  font-size:16px;font-weight:700;white-space:nowrap;color:var(--kbk-f3);background:var(--kzm-white);box-shadow:inset 0 0 0 1px var(--kbk-line),0 0 0 rgba(15,35,24,0);
  transition:color .3s .1s,box-shadow .45s var(--kzm-ease-out),transform .15s}
/* asleep: paper with a hairline. Awake: forest paint laid on left to right, the ledge comes up under it */
.kbk-go::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--kzm-forest);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--kzm-ease-paint)}
.kbk-go.kbk-on{color:var(--kzm-cream);box-shadow:0 3px 0 var(--kzm-forest-deep),0 14px 26px -12px rgba(15,35,24,.6)}
.kbk-go.kbk-on::before{transform:none}
.kbk-go.kbk-on:hover{transform:translateY(-1px)}
.kbk-go.kbk-on:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kzm-forest-deep),0 6px 14px -8px rgba(15,35,24,.5)}
.kbk-go.kbk-wake .kbk-i{animation:kbk-nudge .7s .3s var(--kzm-ease-out)}
@keyframes kbk-nudge{40%{transform:translateX(5px)}}
.kbk-gl{display:inline-flex;align-items:center;gap:10px}
.kbk-gl.kbk-swap{animation:kbk-lab .35s var(--kzm-ease-out)}
@keyframes kbk-lab{from{opacity:0;transform:translateY(7px)}}
.kbk-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 20px;border-radius:var(--kzm-r-button);font-size:15px;font-weight:700;white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--kzm-forest);transition:background .2s}
.kbk-sec:not(:disabled):hover{background:rgba(29,58,41,.05)}
.kbk-sec .kbk-i{width:18px;height:18px;stroke-width:2.6}
.kbk-sec:disabled{color:var(--kbk-f2);box-shadow:inset 0 0 0 1px var(--kbk-line)}

/* the pick cards: the 3D icon is the hero, it sits on a soft contact shadow; picked, it lifts and settles and the card warms or cools */
.kbk-t{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:18px;background:var(--kzm-white);box-shadow:var(--kzm-sh-card);
  transition:box-shadow .35s var(--kzm-ease-out);animation:kbk-tin .5s var(--kzm-ease-out) both;animation-delay:calc(.06s + var(--i,0) * .045s)}
@keyframes kbk-tin{from{opacity:0;transform:translateY(10px)}}
.kbk-t::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transform:scale(.55);
  background:radial-gradient(90% 80% at var(--kbk-tx,50%) var(--kbk-ty,38%),var(--kbk-w1),var(--kbk-w2) 58%,transparent 84%);transition:opacity .5s var(--kzm-ease-out),transform .8s var(--kzm-ease-out)}
.kbk-t:hover{box-shadow:var(--kzm-sh-lift)}
.kbk-t.kbk-on{box-shadow:inset 0 0 0 2px var(--kzm-forest),0 16px 30px -18px rgba(15,35,24,.55)}
.kbk-t.kbk-on::before{opacity:1;transform:none}
.kbk-ic{position:relative;display:block;flex:none}
.kbk-ic img{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:none;user-select:none;transition:transform .55s var(--kzm-ease-spring)}
.kbk-ic::after{content:"";position:absolute;left:20%;right:20%;bottom:1%;height:11%;border-radius:50%;background:radial-gradient(closest-side,rgba(15,35,24,.2),transparent);transition:transform .55s var(--kzm-ease-out),opacity .55s}
.kbk-t:hover .kbk-ic img{transform:translateY(-3px)}
.kbk-t.kbk-on .kbk-ic img{transform:translateY(-7px)}
.kbk-t.kbk-on .kbk-ic::after{transform:scale(.8);opacity:.7}
.kbk-t.kbk-pop .kbk-ic img{animation:kbk-lift .7s var(--kzm-ease-out)}
.kbk-t.kbk-pop .kbk-ic::after{animation:kbk-shd .7s var(--kzm-ease-out)}
@keyframes kbk-lift{0%{transform:none}30%{transform:translateY(-17px) scale(1.07) rotate(-3deg)}66%{transform:translateY(-4px) scale(.99) rotate(.6deg)}100%{transform:translateY(-7px)}}
@keyframes kbk-shd{0%{transform:none;opacity:1}30%{transform:scale(.52);opacity:.3}66%{transform:scale(.9);opacity:.85}}
.kbk-tt{display:flex;flex-direction:column;align-items:inherit;min-width:0}
.kbk-tt b{font-weight:600;letter-spacing:-.005em;line-height:1.2}
.kbk-tt small{margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--kbk-f2)}
.kbk-ck{position:absolute;top:11px;right:11px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--kzm-forest);color:var(--kzm-cream);transform:scale(0);transition:transform .45s var(--kzm-ease-spring),background .2s,box-shadow .2s}
.kbk-ck .kbk-i{width:14px;height:14px;stroke-width:3;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s .15s var(--kzm-ease-out)}
.kbk-t.kbk-on .kbk-ck{transform:none}
.kbk-t.kbk-on .kbk-ck .kbk-i{stroke-dashoffset:0}

/* step 0: three ways in */
.kbk-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kbk-way{height:280px;justify-content:flex-start;gap:14px;padding:42px 14px 0}
.kbk-way .kbk-ic{width:136px;height:136px}
.kbk-way .kbk-tt b{font-size:18px}
.kbk-way .kbk-tt small{font-size:13.5px}
.kbk-proof{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--kbk-f2)}
.kbk-proof b{font-weight:700;color:var(--kzm-forest)}
.kbk-proof i{width:3px;height:3px;flex:none;border-radius:50%;background:currentColor;opacity:.6}
.kbk-stars{display:inline-flex;gap:1px;color:var(--kzm-mustard-ledge)}
.kbk-stars svg{width:13px;height:13px;fill:currentColor}

/* step 1: six jobs, two rows of three */
.kbk-tiles{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}
.kbk-svc{gap:8px;padding:8px 12px 4px}
.kbk-svc .kbk-ic{width:110px;height:110px}
.kbk-svc .kbk-tt b{font-size:15.5px}
.kbk-uns{font-size:13.5px;line-height:1.4;color:var(--kbk-f2)}

/* step 2: one week, then the windows. This week starts today, a week with nothing left is skipped */
.kbk-wkh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kbk-mon{font-family:var(--kzm-display);font-weight:400;font-size:22px;line-height:1}
.kbk-wks{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--kzm-white);box-shadow:var(--kzm-sh-card)}
.kbk-wks span{min-width:92px;text-align:center;font-size:13.5px;font-weight:600;white-space:nowrap}
.kbk-ar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transition:background .2s,opacity .2s}
.kbk-ar .kbk-i{width:17px;height:17px;stroke-width:2.4}
.kbk-ar:disabled{opacity:.28}
.kbk-ar:not(:disabled):hover{background:rgba(29,58,41,.07)}
.kbk-dview{overflow:hidden;margin:-6px -14px 0;padding:6px 0 10px}
.kbk-dtrack{display:flex;width:100%;transition:transform .55s var(--kzm-ease-out)}
.kbk-dwk{flex:0 0 100%;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:0 14px}
.kbk-dy{position:relative;isolation:isolate;height:80px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:var(--kzm-white);box-shadow:var(--kzm-sh-card);transition:color .25s,box-shadow .3s}
.kbk-dy small{font-size:9.5px;font-weight:700;font-stretch:125%;letter-spacing:.16em;margin-right:-.16em;text-transform:uppercase;color:var(--kbk-f2);transition:color .25s}
.kbk-dy span{font-size:22px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.kbk-dy::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--kzm-forest);opacity:0;transform:scale(.55);transition:transform .5s var(--kzm-ease-spring),opacity .2s}
.kbk-dy:not(:disabled):not(.kbk-on):hover{box-shadow:var(--kzm-sh-lift)}
.kbk-dy.kbk-on{color:var(--kzm-cream);box-shadow:0 12px 22px -12px rgba(15,35,24,.75)}
.kbk-dy.kbk-on small{color:rgba(243,233,210,.78)}
.kbk-dy.kbk-on::before{opacity:1;transform:none}
.kbk-dy:disabled{background:transparent;box-shadow:inset 0 0 0 1px var(--kbk-line);color:rgba(29,58,41,.34)}
.kbk-dy:disabled small{color:inherit}
.kbk-dy.kbk-full span{text-decoration:line-through;text-decoration-thickness:1.5px}
.kbk-tms{display:grid;grid-template-columns:repeat(var(--kbk-am,3),1fr) 6px repeat(var(--kbk-pm,2),1fr);gap:10px;margin-top:24px}
.kbk-tl{grid-row:1;font-size:10.5px;font-weight:700;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--kzm-on-cream-2)}
.kbk-tl-am{grid-column:1/span var(--kbk-am,3)}.kbk-tl-pm{grid-column:span var(--kbk-pm,2)/-1}
.kbk-tm,.kbk-tsp{grid-row:2}
.kbk-tm{position:relative;isolation:isolate;overflow:hidden;height:64px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--kzm-white);box-shadow:var(--kzm-sh-card);transition:color .3s .05s,box-shadow .3s}
.kbk-tm b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.kbk-tm small{font-size:12px;color:var(--kbk-f2);white-space:nowrap;transition:color .3s .05s}
.kbk-tm::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--kzm-forest);clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--kzm-ease-paint)}
.kbk-tm:not(:disabled):not(.kbk-on):hover{box-shadow:var(--kzm-sh-lift)}
.kbk-tm.kbk-on{color:var(--kzm-cream);box-shadow:0 12px 22px -12px rgba(15,35,24,.75)}
.kbk-tm.kbk-on small{color:rgba(243,233,210,.8)}
.kbk-tm.kbk-on::before{clip-path:inset(0)}
.kbk-tm:disabled{background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(29,58,41,.05) 6px 7px);box-shadow:inset 0 0 0 1px var(--kbk-line);color:rgba(29,58,41,.4)}
.kbk-tm:disabled b{font-weight:500;text-decoration:line-through}
.kbk-tm:disabled small{color:rgba(29,58,41,.55);font-weight:600}
/* before a day is picked the windows wait, quiet, so nothing jumps when they come alive */
.kbk-tm.kbk-wait:disabled{background:var(--kzm-white);box-shadow:var(--kzm-sh-card);color:rgba(29,58,41,.34)}
.kbk-tm.kbk-wait:disabled b{font-weight:600;text-decoration:none}
.kbk-tm.kbk-wait:disabled small{color:inherit;font-weight:400}

/* step 3: what you are booking on a tinted card, then each field its own white card: a line icon, the label in wide caps, the value, a mustard check once it is filled */
.kbk-det{width:min(624px,100%);margin:0 auto}
.kbk-pk{display:flex;align-items:center;gap:14px;height:72px;padding:0 10px 0 12px;border-radius:var(--kzm-r-card);background:var(--kzm-cream);box-shadow:inset 0 0 0 1px rgba(29,58,41,.07)}
.kbk-pk .kbk-sum-i{width:52px;height:52px}
.kbk-pk .kbk-sum-t{flex:1}
.kbk-pk .kbk-sum-t b{font-size:15.5px}
.kbk-pk .kbk-chg{height:44px;padding:0 10px}
.kbk-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kbk-fl{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:0 46px 0 16px;border-radius:var(--kzm-r-control);background:var(--kzm-white);box-shadow:var(--kzm-sh-card);cursor:text;
  transition:box-shadow .3s var(--kzm-ease-out);animation:kbk-tin .5s var(--kzm-ease-out) both;animation-delay:calc(.1s + var(--i,0) * .05s)}
.kbk-fl.kbk-fw{grid-column:1/-1}
.kbk-fl>.kbk-i{width:20px;height:20px;color:rgba(29,58,41,.5);transition:color .25s}
.kbk-fv{display:block;flex:1;min-width:0}
.kbk-fv small{display:block;margin-bottom:3px;font-size:9.5px;font-weight:700;font-stretch:125%;letter-spacing:.17em;line-height:13px;text-transform:uppercase;color:var(--kzm-on-cream-2)}
.kbk-fv small em{font-style:normal;font-weight:500;letter-spacing:.08em;color:var(--kbk-f3)}
.kbk-fl input,.kbk-fl textarea{display:block;width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;outline:0;background:none;box-shadow:none;-webkit-appearance:none;appearance:none;
  font:inherit;font-size:16px;font-weight:500;line-height:22px;color:var(--kzm-forest)}
/* the note grows to two lines and never scrolls inside */
.kbk-fl textarea{height:22px;max-height:44px;overflow:hidden;resize:none;scrollbar-width:none}
.kbk-fl textarea::-webkit-scrollbar{display:none}
.kbk-fl input::placeholder,.kbk-fl textarea::placeholder{color:rgba(29,58,41,.35);font-weight:400;opacity:1}
.kbk-fl.kbk-note{align-items:flex-start;padding-top:13px;padding-bottom:12px}
.kbk-fl.kbk-note>.kbk-i{margin-top:9px}
.kbk-fl:hover{box-shadow:var(--kzm-sh-lift)}
.kbk-fl:focus-within,.kbk-fl.kbk-typing{box-shadow:0 0 0 2px var(--kzm-forest),0 12px 24px -16px rgba(15,35,24,.45)}
.kbk-fl:focus-within>.kbk-i,.kbk-fl.kbk-typing>.kbk-i{color:var(--kzm-forest)}
/* walk's typing: a drawn caret laid over the input (same box, same type), its text clear, the bar after it */
.kbk-caret{position:absolute;overflow:hidden;pointer-events:none;font:inherit;font-style:normal;font-size:16px;font-weight:500;line-height:22px;color:transparent;white-space:pre}
.kbk-caret span::after{content:"";display:inline-block;width:2px;height:19px;margin-left:1px;vertical-align:-4px;border-radius:1px;background:var(--kzm-forest)}
.kbk-caret.kbk-blink span::after{animation:kbk-blink 1.06s .5s steps(1) infinite}
@keyframes kbk-blink{50%{opacity:0}}
.kbk-ok{position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;display:grid;place-items:center;background:var(--kzm-mustard);color:var(--kzm-ink);box-shadow:0 2px 0 var(--kzm-mustard-ledge);transform:scale(0);transition:transform .45s var(--kzm-ease-spring)}
.kbk-fl.kbk-note .kbk-ok{top:21px;margin-top:0}
.kbk-ok .kbk-i{width:12px;height:12px;stroke-width:3.2;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s .15s var(--kzm-ease-out)}
.kbk-fl.kbk-valid .kbk-ok{transform:none}
.kbk-fl.kbk-valid .kbk-ok .kbk-i{stroke-dashoffset:0}
.kbk-priv{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--kbk-f2)}
.kbk-priv .kbk-i{width:16px;height:16px;color:var(--kzm-forest)}

/* the summary: the picked job's icon, the job, the time */
.kbk-sum{display:flex;align-items:center;gap:12px;min-width:0}
.kbk-sum-i{width:48px;height:48px;flex:none;display:block;max-width:none}
.kbk-sum-t{min-width:0;display:flex;flex-direction:column}
.kbk-sum-t b{font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbk-sum-t span{font-size:13.5px;line-height:1.3;color:var(--kbk-f2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbk-sum-t span.kbk-fresh{animation:kbk-tick .4s var(--kzm-ease-out)}
@keyframes kbk-tick{from{opacity:.2;transform:translateY(3px)}}
.kbk-chg{flex:none;height:36px;padding:0 8px;margin-left:2px;font-size:13.5px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(29,58,41,.3);text-underline-offset:3px;transition:text-decoration-color .2s}
.kbk-chg:hover{text-decoration-color:currentColor}

/* step 4, the van door: a short band of duco rolls down from the stripe, KZM's enamel badge turns in on its bottom edge (it bridges the band like it bridges
   the window in the hero), the penguin waves once. The only screen he is on. Under it the booking as a clean table with the ref band */
.kbk-band{position:relative;z-index:3;flex:none;display:flex;flex-direction:column;justify-content:center;height:164px;padding:0 320px 6px 48px;color:var(--kzm-cream)}
.kbk-duco{position:absolute;inset:0;z-index:-1;background:var(--kzm-duco);animation:kbk-roll .75s var(--kzm-ease-paint) both}
.kbk-duco::before{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.kbk-duco::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(180deg,var(--kzm-forest-deep) 0 1px,rgba(255,255,255,.55) 1px 2px)}
@keyframes kbk-roll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -4px 0)}}
.kbk-band-e{font-size:11px;font-weight:700;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--kzm-mustard)}
.kbk-band-h{margin-top:10px;font-family:var(--kzm-display);font-weight:400;font-size:44px;line-height:.98;color:var(--kzm-cream);text-shadow:var(--kzm-shade) var(--kzm-forest-deep)}
.kbk-band-c{margin-top:10px;font-size:14.5px;line-height:1.35;color:var(--kzm-on-forest-2);text-wrap:balance}
.kbk-band-e,.kbk-band-h,.kbk-band-c{animation:kbk-rise .6s var(--kzm-ease-out) .3s both}
.kbk-band-h{animation-delay:.36s}.kbk-band-c{animation-delay:.42s}
.kbk-band .kbk-x{position:absolute;top:14px;right:18px;background:rgba(243,233,210,.12);color:var(--kzm-cream);box-shadow:inset 0 0 0 1px rgba(243,233,210,.3)}
.kbk-band .kbk-x:hover{box-shadow:inset 0 0 0 1px rgba(243,233,210,.6)}
.kbk-badge{position:absolute;right:56px;bottom:-114px;width:228px;height:228px;animation:kbk-bin .7s var(--kzm-ease-spring) .18s both}
@keyframes kbk-bin{from{opacity:0;transform:translateY(-16px) scale(.72)}}
.kbk-badge svg{display:block;width:100%;height:100%;overflow:visible;filter:var(--kzm-sh-badge)}
.kbk-bring{transform-box:view-box;transform-origin:200px 200px;animation:kbk-turn var(--kzm-t-spin) var(--kzm-ease-spin) .18s both}
@keyframes kbk-turn{from{transform:rotate(-150deg)}}
.kbk-rt{font-family:var(--kzm-sans);font-weight:800;font-stretch:125%;letter-spacing:.16em;fill:var(--kzm-forest)}
.kbk-rw{fill:var(--kzm-season-lit)}.kbk-rw-o{fill:var(--kzm-forest)}
.kbk[data-season=summer] .kbk-rw-h,.kbk[data-season=winter] .kbk-rw-c{fill:var(--kzm-forest)}
.kbk-sc-s,.kbk[data-season=summer] .kbk-sc-w{opacity:0}
.kbk[data-season=summer] .kbk-sc-s{opacity:1}
.kbk-penw{transform-box:fill-box;transform-origin:50% 100%;animation:kbk-wave 1.6s ease-in-out .95s both}
@keyframes kbk-wave{0%,100%{transform:rotate(0)}18%{transform:rotate(-5deg)}36%{transform:rotate(4deg)}54%{transform:rotate(-3deg)}72%{transform:rotate(2deg)}}
.kbk-d[data-step="4"] .kbk-main{display:grid;grid-template-columns:1fr 228px;column-gap:44px;padding:24px 56px 0 48px}
.kbk-okh{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.kbk-okc{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--kzm-mustard);color:var(--kzm-ink);box-shadow:0 3px 0 var(--kzm-mustard-ledge);animation:kbk-ckp .5s var(--kzm-ease-spring) .25s both}
.kbk-okc .kbk-i{width:20px;height:20px;stroke-width:2.8;stroke-dasharray:24;stroke-dashoffset:24;animation:kbk-draw .4s .55s var(--kzm-ease-out) forwards}
.kbk-tbl{margin-top:14px;border-radius:var(--kzm-r-card);background:var(--kzm-white);box-shadow:var(--kzm-sh-card);overflow:hidden}
.kbk-tr{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 16px 8px 18px;animation:kbk-row .5s var(--kzm-ease-out) both;animation-delay:calc(.3s + var(--i,0) * .06s)}
.kbk-tr+.kbk-tr{border-top:1px solid var(--kbk-line)}
@keyframes kbk-row{from{opacity:0;transform:translateY(5px)}}
.kbk-tr>small{width:60px;flex:none;font-size:10px;font-weight:700;font-stretch:125%;letter-spacing:.17em;text-transform:uppercase;color:var(--kzm-on-cream-2)}
.kbk-tval{flex:1;min-width:0;display:flex;flex-direction:column}
.kbk-tval b{font-size:15.5px;font-weight:600;line-height:1.25}
.kbk-tval span{margin-top:1px;font-size:13px;line-height:1.3;color:var(--kbk-f2)}
.kbk-tr img{width:44px;height:44px;flex:none;max-width:none;margin:-8px -4px -8px 0}
.kbk-ref{display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;padding:0 18px;background:var(--kzm-cream);border-top:1.5px dashed rgba(29,58,41,.24);animation:kbk-row .5s var(--kzm-ease-out) .55s both}
.kbk-ref small{font-size:10px;font-weight:700;font-stretch:125%;letter-spacing:.17em;text-transform:uppercase;color:var(--kzm-on-cream-2)}
.kbk-ref b{font-size:15px;font-weight:800;font-stretch:112%;letter-spacing:.12em}
.kbk-side{padding-top:112px;text-align:center;animation:kbk-rise .6s var(--kzm-ease-out) .6s both}
.kbk-sms{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--kbk-f2);text-align:left}
.kbk-sms .kbk-i{width:18px;height:18px;margin-top:1px;color:var(--kzm-forest)}
.kbk-sms b{font-weight:700;color:var(--kzm-forest)}
.kbk-cap{font-size:15px;font-weight:600;line-height:1.4}
.kbk-sms-w{margin-top:16px;padding-top:16px;border-top:1px solid var(--kbk-line)}
.kbk-by{font-size:12.5px;color:var(--kbk-f2)}
.kbk-by b{font-weight:700;color:var(--kzm-forest)}

/* moving between steps in place: the old screen goes, the new one comes, kept parts stay still */
.kbk-old{pointer-events:none;z-index:2;animation:kbk-fo .26s ease forwards}
.kbk-old .kbk-card{pointer-events:none;background:transparent;box-shadow:none}
.kbk-old .kbk-foot{border-top-color:transparent}
.kbk-old .kbk-main{animation:kbk-out .26s var(--kzm-ease-out) forwards}
.kbk-old[data-dir="-1"] .kbk-main{animation-name:kbk-out-r}
@keyframes kbk-fo{to{opacity:0}}
@keyframes kbk-out{to{opacity:0;transform:translateX(-26px)}}
@keyframes kbk-out-r{to{opacity:0;transform:translateX(26px)}}
.kbk-new .kbk-main{animation:kbk-in .55s .15s var(--kzm-ease-out) both}
.kbk-new[data-dir="-1"] .kbk-main{animation-name:kbk-in-l}
@keyframes kbk-in{from{opacity:0;transform:translateX(26px)}}
@keyframes kbk-in-l{from{opacity:0;transform:translateX(-26px)}}
.kbk-new [data-keep]:not(.kbk-stay),.kbk-new .kbk-foot-l>:not([data-keep]),.kbk-new .kbk-sec{animation:kbk-fi .45s .22s var(--kzm-ease-out) both}
@keyframes kbk-fi{from{opacity:0;transform:translateY(5px)}}
.kbk-measure,.kbk-measure *{animation:none!important;transition:none!important}
.kbk-ghost{position:absolute;z-index:30;pointer-events:none;transform-origin:0 0}
.kbk-ghost>*{display:block;width:100%;height:100%;max-width:none;transform-origin:0 0}
.kbk-settle{animation:kbk-settle .45s var(--kzm-ease-out)}
@keyframes kbk-settle{0%{transform:scale(1.09)}55%{transform:scale(.97)}100%{transform:none}}

/* phone: a page sheet, the summary pinned under the top bar */
.kbk-p{font-size:15px}
.kbk-p .kbk-top{height:52px;padding:0 12px}
.kbk-p .kbk-x,.kbk-p .kbk-back{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.kbk-p .kbk-back{background:var(--kzm-white);box-shadow:var(--kzm-sh-card);color:var(--kzm-forest)}
.kbk-p .kbk-main{padding:4px 16px 0}
.kbk-p .kbk-eye{font-size:var(--kzm-fs-caps)}
.kbk-p .kbk-q{margin-top:8px;font-size:var(--kzm-fs-q)}
.kbk-p .kbk-sub{margin-top:7px;font-size:14.5px}
.kbk-p .kbk-body{margin-top:18px}
.kbk-p .kbk-foot{height:auto;padding:12px 16px calc(12px + var(--kbk-safe,18px))}
/* start and job take one tap, so the phone has no footer there: the home bar's room goes under the cards */
.kbk-p[data-step="0"] .kbk-main,.kbk-p[data-step="1"] .kbk-main{padding-bottom:calc(12px + var(--kbk-safe,18px))}
.kbk-p .kbk-acts{flex:1;min-width:0;margin:0}
.kbk-p .kbk-go{flex:1;height:56px;min-width:0}
.kbk-p .kbk-sec{flex:none;height:56px;padding:0 18px}
.kbk-strip{flex:none;margin:2px 16px 8px;height:64px;padding:0 6px 0 10px;border-radius:16px;background:var(--kzm-white);box-shadow:var(--kzm-sh-card)}
.kbk-strip .kbk-sum-i{width:46px;height:46px}
.kbk-strip .kbk-sum-t{flex:1}
.kbk-strip .kbk-chg{height:44px;padding:0 10px}
.kbk-p .kbk-ways{grid-template-columns:1fr;gap:12px;margin-top:0}
.kbk-p .kbk-way{--kbk-tx:16%;--kbk-ty:50%;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;height:100px;padding:0 54px 0 10px;text-align:left}
.kbk-p .kbk-way .kbk-tt{align-items:flex-start}
.kbk-p .kbk-way .kbk-ic{width:76px;height:76px}
.kbk-p .kbk-way .kbk-tt b{font-size:17px}
.kbk-p .kbk-way .kbk-tt small{font-size:13.5px}
.kbk-chev{position:absolute;top:50%;right:16px;width:24px;height:24px;margin-top:-12px;display:grid;place-items:center;color:var(--kzm-forest);transition:transform .4s var(--kzm-ease-spring)}
.kbk-chev .kbk-i{width:20px;height:20px;stroke-width:2.4}
.kbk-way:hover .kbk-chev{transform:translateX(2px)}
.kbk-way.kbk-on .kbk-chev{transform:translateX(5px)}
@keyframes kbk-ckp{from{transform:scale(.4)}}
.kbk-p .kbk-proof{justify-content:center;margin-top:18px;font-size:13px}
.kbk-p .kbk-tiles{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:0}
.kbk-p .kbk-svc{gap:5px;padding:6px 8px 4px}
.kbk-p .kbk-svc .kbk-ic{width:84px;height:84px}
.kbk-p .kbk-svc .kbk-tt b{font-size:14.5px}
.kbk-p .kbk-svc .kbk-tt small{display:none}
.kbk-p .kbk-t .kbk-ck{width:22px;height:22px}
.kbk-p .kbk-svc .kbk-ck{top:8px;right:8px}
.kbk-p .kbk-uns{flex:none;padding:12px 8px 12px;text-align:center;font-size:13px}
.kbk-p .kbk-wkh{margin-bottom:10px}
.kbk-p .kbk-mon{font-size:22px}
.kbk-p .kbk-wks span{min-width:84px;font-size:13px}
.kbk-p .kbk-ar{width:40px;height:40px}
.kbk-p .kbk-dwk{gap:5px}
.kbk-p .kbk-dy{height:66px;border-radius:12px}
.kbk-p .kbk-dy span{font-size:19px}
.kbk-p .kbk-dy small{font-size:8.5px;letter-spacing:.12em;margin-right:-.12em}
.kbk-p .kbk-tms{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.kbk-p .kbk-tsp{display:none}
.kbk-p .kbk-tl-am{grid-column:1/-1;grid-row:1}
.kbk-p .kbk-tm.kbk-am{grid-row:2}
.kbk-p .kbk-tl-pm{grid-column:1/-1;grid-row:3;margin-top:6px}
.kbk-p .kbk-tm.kbk-pm{grid-row:4}
.kbk-p .kbk-tm{height:56px}
.kbk-p .kbk-det{width:auto}
.kbk-p .kbk-pk{height:64px;gap:10px;padding:0 6px 0 8px}
.kbk-p .kbk-pk .kbk-sum-i{width:46px;height:46px}
.kbk-p .kbk-pk .kbk-sum-t b{font-size:15px}
.kbk-p .kbk-pk .kbk-sum-t span{font-size:13px}
.kbk-p .kbk-form{grid-template-columns:1fr;gap:8px;margin-top:10px}
.kbk-p .kbk-fl{min-height:60px;gap:10px;padding:0 40px 0 14px}
.kbk-p .kbk-ok{right:12px}
.kbk-p .kbk-fl.kbk-note{padding-top:12px;padding-bottom:11px}
.kbk-p .kbk-priv{margin-top:12px;padding:0 4px;font-size:13px}
.kbk-p .kbk-band{height:auto;padding:58px 168px 20px 16px}
.kbk-p .kbk-band .kbk-grab{position:absolute;top:6px;left:50%;margin:0 0 0 -18px;background:rgba(243,233,210,.35)}
.kbk-p .kbk-band .kbk-x{top:10px;right:12px}
.kbk-p .kbk-band-e{font-size:10px;letter-spacing:.18em}
.kbk-p .kbk-band-h{margin-top:8px;font-size:29px}
.kbk-p .kbk-band-c{margin-top:8px;font-size:13px}
.kbk-p .kbk-badge{right:14px;bottom:-22px;width:142px;height:142px}
.kbk-p[data-step="4"] .kbk-main{padding:30px 16px 0}
.kbk-p .kbk-okh{gap:10px;font-size:19px}
.kbk-p .kbk-okc{width:32px;height:32px}
.kbk-p .kbk-okc .kbk-i{width:18px;height:18px}
.kbk-p .kbk-tbl{margin-top:12px}
.kbk-p .kbk-tr{min-height:52px;padding:7px 12px 7px 14px;gap:10px}
.kbk-p .kbk-tr>small{width:52px;font-size:9.5px;letter-spacing:.14em}
.kbk-p .kbk-tval b{font-size:15px}
.kbk-p .kbk-tr img{width:40px;height:40px}
.kbk-p .kbk-ref{height:44px;padding:0 14px}
.kbk-p .kbk-sms{margin-top:12px;padding:0 4px;font-size:13px}

@media (prefers-reduced-motion:reduce){
  .kbk,.kbk *,.kbk *::before,.kbk *::after{animation:none!important;transition:none!important}
  .kbk-okc .kbk-i{stroke-dashoffset:0}
}