/* Boreal Kitchens: getting in touch (assets/conv.js, assets/track.js, assets/chat.js), the client page section, and the
   additions to the calculators (monthly figure, WhatsApp, saved estimates, the live estimate tile). Same drafting-table
   language as the sheets: ink frames, mono labels, deep green. */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- calculators: monthly figure, WhatsApp, saved estimate note, live tile ---------- */
.hc-card .hc-time-r:empty{min-height:78px}.hc-card .hc-time-k:empty{min-height:150px} /* room for the timeline before calc.js fills it: no shift */
.hc-card .hc-fin{display:flex;flex-direction:column;gap:2px;margin-top:8px;color:var(--green-hi);text-decoration:none;font-size:15px;line-height:1.3;width:fit-content}
.hc-card .hc-fin span{border-bottom:1px solid rgba(166,220,191,.45)}
.hc-card .hc-fin:hover span{border-color:var(--green-hi)}
.hc-card .hc-fin small{color:var(--on-dark-2);font-size:10.5px;letter-spacing:.04em}
.hc-card .hc-fin[hidden],.hc-card .hc-wa[hidden]{display:none}
.hc-card .hc-wa{margin-top:8px;justify-content:center;color:var(--on-dark);border-color:rgba(242,245,242,.45)}
.hc-card .hc-wa:hover{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.summary .fin-ln a{color:var(--green);font-weight:500;text-decoration:none;border-bottom:1px solid var(--green-wash)}
.summary .fin-ln a:hover{border-color:var(--green)}
.hc-wa-l{display:inline-block;margin-top:12px;color:var(--green);text-decoration:none;border-bottom:1px solid transparent}
.hc-wa-l:hover{border-color:var(--green)}
.hc-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:8px 8px 8px 12px;border:1px dashed var(--green);background:var(--green-wash);color:var(--green);font-size:11.5px}
.hc-note span{flex:1 1 200px}
.hc-note button{all:unset;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px;padding:4px 6px}
.hc-note button.x{text-decoration:none;font-size:18px;line-height:1;padding:2px 8px}
.hc-note button:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.hc-facts .hc-live{background:var(--green-wash)}
.hc-facts .hc-live dt{color:var(--green)}
.hc-live .hc-lv{display:block;font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-live .hc-lvm{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;text-transform:none;letter-spacing:.02em;color:var(--green);margin-top:3px}
.hc-live .hc-lvm:empty{display:none}

/* ---------- call-back promise ---------- */
.bk-cbp{margin:4px 0 0;font-size:13.5px;color:var(--green);display:flex;gap:8px;align-items:baseline}
.bk-cbp::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#3aa070;box-shadow:0 0 0 3px rgba(58,160,112,.18);transform:translateY(-1px)}
.bk-cbp.off::before{background:var(--rule);box-shadow:none}
.bk-cbp.off{color:var(--ink-2)}
.ty-cbp{grid-column:1/-1;font-size:15px}
.ty-cbp[hidden]{display:none}

/* ---------- cookie notice ---------- */
.bkck{position:fixed;left:20px;bottom:20px;z-index:57;max-width:430px;background:var(--paper);border:1px solid var(--ink);padding:16px 18px;box-shadow:0 20px 40px -24px rgba(0,0,0,.5);font-size:14px;line-height:1.45}
.bkck p{margin:0;color:var(--ink-2)}
.bkck b{color:var(--ink)}
.bkck a{color:var(--green)}
.bkck-b{display:flex;gap:8px;margin-top:12px}
.bkck-b .btn{padding:10px 18px;flex:1 1 0;justify-content:center}
@media (max-width:760px){.bkck{left:10px;right:10px;max-width:none;bottom:calc(66px + env(safe-area-inset-bottom,0px));padding:14px 16px;font-size:13.5px}}
.ck-set{all:unset;cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px}
.ck-set[hidden]{display:none}
.ck-set:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---------- phone bar: Call · WhatsApp · Price it ---------- */
.bkmb{display:none}
@media (max-width:760px){
  .bkmb{position:fixed;left:0;right:0;bottom:0;z-index:34;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--dark);border-top:1px solid #0f2a20;
    padding:0 max(0px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(0px,env(safe-area-inset-left,0px));transition:transform .2s ease-out;box-shadow:0 -10px 24px -18px rgba(0,0,0,.6)}
  .bkmb a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;color:var(--on-dark);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
  .bkmb a+a{border-left:1px solid var(--dark-line)}
  .bkmb svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
  .bkmb .mb-price{background:#a6dcbf;color:#0f2a20}
  .bkmb a:active{background:rgba(255,255,255,.08)}.bkmb .mb-price:active{background:var(--on-dark)}
  .bkmb a:focus-visible{outline:2px solid var(--on-dark);outline-offset:-4px}
  body.bk-mb{padding-bottom:calc(80px + 58px + env(safe-area-inset-bottom,0px))}
  body.bkmb-off .bkmb,body.bkp-open .bkmb,body.bkc-open .bkmb{transform:translateY(110%)}
  body.bk-mb .hc-bar{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  body.bk-mb.bkmb-off .hc-bar{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  body.bk-chat .hc-bar{right:76px}
}
@media (prefers-reduced-motion:reduce){.bkmb{transition:none}}

/* ---------- exit survey ---------- */
.bks{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:58;width:min(480px,calc(100vw - 24px));background:var(--paper);border:1px solid var(--ink);box-shadow:0 26px 50px -26px rgba(0,0,0,.55)}
.bks-head{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--rule);padding:6px 6px 6px 16px;color:var(--ink-2)}
.bks-x{width:40px;height:40px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;padding:0}
.bks-x:hover{background:var(--ink);color:var(--paper)}
.bks-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px}
.bks h2{font-size:clamp(28px,6vw,36px)}
.bks-p{margin:0;color:var(--ink-2);font-size:14.5px}
.bks-a{display:flex;flex-wrap:wrap;gap:8px}
.bks-a button{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 14px;border:1px solid var(--ink);background:var(--paper);font-size:15px;line-height:1.2;min-height:44px}
.bks-a button:hover,.bks-a button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--paper)}
.bks-a button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bks-o{display:flex;gap:8px;align-items:flex-end}
.bks-o[hidden]{display:none}
.bks-o label{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
.bks-o input{font:inherit;font-size:16px;border:1px solid var(--ink);background:var(--paper-2);padding:10px 12px;border-radius:0;color:var(--ink)}
.bks-o .btn{padding:11px 16px}
.bks-acts{margin-top:4px}
@media (max-width:760px){.bks{bottom:calc(68px + env(safe-area-inset-bottom,0px))}body.bkmb-off .bks{bottom:10px}}
@media (max-width:420px){.bks-a button{flex:1 1 calc(50% - 4px);text-align:center}.bks-acts .btn{flex:1 1 100%;justify-content:center}}
@media (prefers-reduced-motion:no-preference){.bks{animation:bks-up .25s cubic-bezier(.2,.7,.2,1)}}
@keyframes bks-up{from{transform:translate(-50%,16px);opacity:0}}

/* ---------- chat helper ---------- */
.bkc-l{position:fixed;right:20px;bottom:20px;z-index:36;display:flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border:1px solid #0f2a20;background:var(--dark);color:var(--on-dark);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.bkc-l svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.bkc-l:hover{background:var(--green)}
.bkc-l:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.bkc-l.wait{opacity:.7;cursor:progress}
body.bkc-open .bkc-l,body.bkp-open .bkc-l,body.bks-on .bkc-l{display:none}
@media (min-width:761px){body.bk-ck .bkc-l{bottom:20px}}
@media (max-width:760px){
  .bkc-l{right:12px;bottom:calc(68px + env(safe-area-inset-bottom,0px));width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}
  .bkc-l span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  body.bkmb-off .bkc-l,body.bk-ck .bkc-l{display:none}
}
.bkc{position:fixed;right:20px;bottom:20px;z-index:55;width:min(400px,calc(100vw - 24px));height:min(620px,calc(100vh - 40px));height:min(620px,calc(100dvh - 40px));
  display:none;flex-direction:column;background:var(--paper);border:1px solid var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.bkc.open{display:flex}
.bkc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-bottom:1px solid var(--rule);color:var(--ink-2);background:var(--paper)}
.bkc-x{flex:none;width:40px;height:40px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;padding:0}
.bkc-x:hover{background:var(--ink);color:var(--paper)}
.bkc-log{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--paper-2);
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);background-size:24px 24px;overscroll-behavior:contain}
.bkc-log:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.bkc-m{max-width:90%;padding:10px 12px;font-size:14.5px;line-height:1.45;border:1px solid var(--ink)}
.bkc-m p{margin:0;white-space:pre-wrap}
.bkc-m.b{align-self:flex-start;background:var(--paper)}
.bkc-m.u{align-self:flex-end;background:var(--dark);color:var(--on-dark);border-color:#0f2a20}
.bkc-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.bkc-act .btn{padding:8px 11px;font-size:11.5px;letter-spacing:.04em}
.bkc-more{color:var(--green);text-decoration:none;font-size:11px;padding:4px 2px}
.bkc-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;border-top:1px solid var(--rule);scrollbar-width:none;flex:none}
.bkc-chips::-webkit-scrollbar{display:none}
.bkc-chips button{all:unset;box-sizing:border-box;cursor:pointer;flex:none;padding:6px 10px;border:1px solid var(--rule);background:var(--paper);font-size:13px;white-space:nowrap}
.bkc-chips button:hover{border-color:var(--ink)}
.bkc-chips button:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.bkc-in{display:flex;gap:6px;padding:8px 10px 10px;border-top:1px solid var(--rule);flex:none}
.bkc-in input{flex:1 1 auto;min-width:0;font:inherit;font-size:16px;border:1px solid var(--ink);background:var(--paper-2);padding:10px 12px;border-radius:0;color:var(--ink)}
.bkc-in input:focus{outline:2px solid var(--green);outline-offset:1px}
.bkc-in .btn{padding:10px 14px}
.bkc-f{display:flex;flex-direction:column;gap:8px}
.bkc-f>b{font-weight:600}
.bkc-f label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-2)}
.bkc-f input,.bkc-f textarea{font:inherit;font-size:16px;border:1px solid var(--ink);background:var(--paper-2);padding:8px 10px;border-radius:0;color:var(--ink);resize:vertical}
.bkc-f .btn{justify-content:center}
.bkc-f .err{margin:0;color:#9b2c1f;font-size:13.5px}
.bkc-f .err[hidden]{display:none}
.bkc-f .hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.bkc-m:has(.bkc-f){max-width:100%;width:100%}
@media (max-width:760px){
  .bkc{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;height:min(600px,calc(100vh - 90px));height:min(600px,calc(100dvh - 90px))}
}
@media (prefers-reduced-motion:no-preference){.bkc.open{animation:bks-in .2s ease-out}}
@keyframes bks-in{from{opacity:0;transform:translateY(12px)}}

/* ---------- "Your project online": real screens of the client page, example project ---------- */
.pt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pt-scr{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.pt-frame{position:relative;border:1px solid var(--ink);background:#f4f5f2;overflow:hidden;padding-top:27px}
.pt-scr .pt-frame{aspect-ratio:9/14}
.pt-frame .pt-k{position:absolute;top:0;left:0;right:0;height:27px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--rule);background:var(--paper);color:var(--ink-2);font-size:10.5px;z-index:1}
.pt-frame picture,.pt-frame img{display:block;width:100%;height:auto}
.pt-scr h3{font-size:clamp(20px,1.7vw,24px)}
.pt-scr p{margin:6px 0 0;color:var(--ink-2);font-size:15px}
.pt-foot{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:clamp(28px,4vw,44px)}
.pt-foot .cta-row{margin:0}
.pt-note{margin:0;color:var(--ink-2);font-size:11px}
.pt-compact{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.pt-compact .lede{margin-top:18px}
.pt-compact .ticks{margin-top:18px}
.pt-compact .cta-row{margin-top:24px}
.pt-compact .pt-note{margin-top:14px}
.pt-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.pt-pair .pt-frame{padding-top:0;aspect-ratio:9/15}
.pt-rows{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.pt-row{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.pt-row.flip{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.pt-row.flip>.pt-frame{order:2}
.pt-row .pt-frame{padding-top:0}
.pt-row h3{font-size:clamp(26px,2.6vw,36px);margin-top:6px}
.pt-row p{margin:14px 0 0;color:var(--ink-2);font-size:17px;max-width:52ch}
@media (max-width:1000px){.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.pt-compact{grid-template-columns:1fr}}
@media (max-width:640px){
  .pt-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:-16px;padding-right:16px}
  .pt-scr{scroll-snap-align:start}
  .pt-row,.pt-row.flip{grid-template-columns:1fr}
  .pt-row.flip>.pt-frame{order:0}
  .pt-row .pt-frame{max-width:320px}
  .pt-foot .cta-row .btn{flex:1 1 100%;justify-content:center}
}