/* Pop-up call-back slip (23/10/2026). Same paper, ink and one red as the job card.
   The mobile call bar (z-index 50) stays above the backdrop, and the slip sits above the bar. */
:root{--mm-bar:3.5rem}
html.pop-open{overflow:hidden}
.pop{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:1rem}
.pop[hidden]{display:none}
.pop__back{position:absolute;inset:0;background:rgba(27,30,38,.62);opacity:0;transition:opacity .25s var(--ease)}
.pop__card{position:relative;width:min(100%,31rem);max-height:calc(100dvh - 2rem);overflow:auto;background:var(--sheet);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:1.4rem 1.3rem 1.2rem;transform:translateY(14px) rotate(-.4deg);opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.pop.is-in .pop__back{opacity:1}
.pop.is-in .pop__card{transform:rotate(-.4deg);opacity:1}
.pop__card::before{content:"";position:absolute;left:0;right:0;top:2.6rem;border-top:2px dashed var(--hair)}
.pop__x{position:absolute;top:.45rem;right:.5rem;width:2.75rem;height:2.75rem;border:0;background:none;color:var(--ink);font:400 2rem/1 var(--display);cursor:pointer}
.pop__x:hover{color:var(--red)}
.pop__x:focus-visible,.popform input:focus-visible,.popform textarea:focus-visible,.pop__fine a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.pop__tag{margin:0 0 1.6rem;font:500 .78rem var(--mono);color:var(--muted)}
.pop__h{margin:0 0 .5rem;font-family:var(--display);font-stretch:118%;font-weight:800;font-size:clamp(1.45rem,4.6vw,1.9rem);line-height:1.02;letter-spacing:-.01em}
.pop__lead{margin:0 0 1rem;color:var(--muted)}
.popform{display:grid;gap:.8rem}
.popform label{display:grid;gap:.3rem;font-weight:600}
.popform label span{font:500 .78rem var(--mono);color:var(--muted)}
.popform input,.popform textarea{font:inherit;padding:.7rem .8rem;border:2px solid var(--ink);border-radius:2px;background:#fff;color:var(--ink);width:100%}
.popform__row{display:grid;gap:.8rem}
@media (min-width:30rem){.popform__row{grid-template-columns:1fr 1fr}}
.pop__fine{margin:0;font-size:.85rem;color:var(--muted)}
.pop__fine a{color:var(--ink)}
.pop__send{justify-self:start;min-height:3rem}
.pop__msg{margin:0;font-weight:700}
.pop__msg:empty{display:none}
.pop__msg.is-ok,.pop__msg.is-bad{padding:.75rem .9rem;border:2px solid var(--ink)}
.pop__msg.is-ok{background:#dfeedb}
.pop__msg.is-bad{background:#f6dbd7}
.pop__msg a{color:var(--ink)}

/* Phones: a slip that rises from just above the call bar; the bar stays visible and tappable. */
@media (max-width:47.99rem){
  .pop{place-items:end center;padding:0 .6rem calc(var(--mm-bar) + .6rem)}
  .pop__card{max-height:calc(100dvh - var(--mm-bar) - 1.6rem);box-shadow:5px 5px 0 var(--ink);padding:1.2rem 1rem 1rem}
}
/* Option B: the floating pill bar sits 12px up, and corners are round. */
body.v-b{--mm-bar:calc(3.5rem + 12px)}
body.v-b .pop__card{border-radius:26px;border-color:rgba(20,22,28,.12);box-shadow:0 40px 90px -30px rgba(20,22,28,.55);transform:translateY(14px)}
body.v-b .pop.is-in .pop__card{transform:none}
body.v-b .pop__card::before{display:none}
body.v-b .pop__tag{margin-bottom:.8rem}
body.v-b .popform input,body.v-b .popform textarea{border-radius:14px;border-width:1px;border-color:rgba(20,22,28,.22)}
body.v-b .pop__msg.is-ok,body.v-b .pop__msg.is-bad{border-radius:14px;border-width:1px}

@media (prefers-reduced-motion:reduce){
  .pop__back,.pop__card{transition:none!important}
  .pop__card,.pop.is-in .pop__card{transform:none}
}
@media print{.pop{display:none!important}}