/* One-question booking form + the booking modal (FORM-ONE-QUESTION-SPEC.md, 7 Oct 2026).
   Linked site-wide after site.css (and before book.css on /book). The form lives in a bone
   panel: a navy header band with "STEP n OF N" and a thin gold progress bar, one question
   per screen as big white cards (selected = gold border + gold tint + check badge), and a
   footer with Back and Next. The same component sits inline in #book on a
   page and inside the modal. Markup: booking_form_html() in build/build.py. */

/* ---------- panel ---------- */
html .cal .book__panel.bkp,html .book__panel.bkp{display:block;padding:0;gap:0;align-content:stretch}
.bkf{display:block;width:100%}
.bkp .book__form{display:block;gap:0}
.bkp .book__form[hidden]{display:none}
/* The header is only the thin progress bar (no step count on screen: it put people off). */
.bkf__head{background:var(--navy);padding:0}
.bkf__head[hidden]{display:none}
.bkp .book__bar{height:4px;margin:0;border-radius:0;background:rgba(243,241,234,.14);overflow:hidden}
.bkp .book__bar i{display:block;height:100%;width:15%;border-radius:0 4px 4px 0;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .45s var(--ease)}
.bkf__stage{padding:clamp(24px,3.6vw,38px) clamp(20px,3.4vw,36px) clamp(24px,3.4vw,34px);min-height:380px;container-type:inline-size}
.js .bkf__screens:not(.is-ready) > .bkscreen ~ .bkscreen{display:none}
.bkscreen{border:0;margin:0;padding:0;min-width:0;display:block;color:var(--on-bone)}
.bkscreen[hidden]{display:none}
html.no-js .bkscreen ~ .bkscreen{margin-top:44px;padding-top:36px;border-top:1px solid var(--line-bone)}

/* ---------- heading block ---------- */
.bkq__legend{display:block;width:100%;padding:0;margin:0 0 8px;outline:none}
.bkq__kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 12px/1 "Sora",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.bkq__kicker::before{content:"";width:22px;height:1px;background:currentColor}
.bkq__title{display:block;font:700 clamp(25px,3.3vw,34px)/1.1 "Sora",sans-serif;letter-spacing:-.035em;color:var(--on-bone);text-wrap:balance}
.bkq__sub{margin:0 0 6px;font-size:16px;line-height:1.5;color:var(--on-bone-2);max-width:56ch}
.bkq__ask{margin:0 0 4px;font:600 17px/1.4 "Sora",sans-serif;color:var(--on-bone)}
.bkscreen > .bkgrid,.bkscreen > .bkf__fields,.bkscreen > .bkq__input{margin-top:22px}
.bkq__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bkq__priv{margin:20px 0 0;font-size:13px;line-height:1.5;color:var(--on-bone-2)}
.bkq__priv a{color:var(--on-bone);text-decoration:underline;text-underline-offset:3px}
.bkscreen .book__nearly{margin:20px 0 0;border-radius:12px;background:rgba(207,174,107,.12);color:var(--gold-ink);font-weight:600}
.bkscreen .book__nearly + .bkf__fields{margin-top:16px}

/* ---------- contact fields + website input ---------- */
.bkf__fields{display:grid;grid-template-columns:1fr;gap:14px}
@container (min-width:520px){.bkf__fields{grid-template-columns:1fr 1fr;gap:16px 18px}}
.bkp .field{display:grid;gap:8px;font:600 13px/1.2 "Sora",sans-serif;color:var(--on-bone-2)}
.bkp .field input,.bkq__input{appearance:none;width:100%;min-height:56px;padding:0 16px;border:1.5px solid var(--line-bone);border-radius:12px;background:#fff;color:var(--on-bone);font:500 16px "Sora",sans-serif;transition:border-color .2s,box-shadow .2s}
.bkp .field input:focus,.bkq__input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(207,174,107,.28)}
.bkp .field input[aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.bkq__input::placeholder{color:#8a8f9b}
.bkq__link{display:inline-flex;align-items:center;min-height:48px;margin-top:6px;padding:0;background:none;border:0;font:600 15px "Sora",sans-serif;color:var(--on-bone-2);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.bkq__link[hidden]{display:none}
.bkq__link:hover{color:var(--on-bone)}

/* ---------- cards ---------- */
.bkgrid{display:grid;grid-template-columns:1fr;gap:12px}
.bkgrid--ind{grid-template-columns:1fr 1fr;gap:10px}
@container (min-width:520px){.bkgrid{grid-template-columns:1fr 1fr}.bkgrid--ind{grid-template-columns:1fr 1fr 1fr}}
.bkcard{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 56px 12px 18px;border:1.5px solid var(--line-bone);border-radius:14px;background:#fff;color:var(--on-bone);font:600 16px/1.3 "Sora",sans-serif;letter-spacing:-.005em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s var(--ease)}
.bkcard input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bkcard__t{display:block;min-width:0;overflow-wrap:anywhere}
@media (hover:hover){.bkcard:hover{border-color:rgba(207,174,107,.8);box-shadow:0 10px 26px -16px rgba(11,22,38,.45);transform:translateY(-1px)}}
.bkcard:has(input:checked){border-color:var(--gold);background:linear-gradient(rgba(207,174,107,.17),rgba(207,174,107,.17)),#fff;box-shadow:0 0 0 1px var(--gold),0 12px 28px -18px rgba(122,94,44,.7)}
.bkcard:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:3px}
.bkcard__ck{position:absolute;right:16px;top:50%;width:24px;height:24px;margin-top:-12px;border:1.5px solid var(--line-bone);border-radius:50%;display:grid;place-items:center;color:var(--navy);background:#fff;transition:background .2s,border-color .2s,transform .25s var(--ease)}
.bkcard__ck--sq{border-radius:7px}
.bkcard__ck svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s var(--ease)}
.bkcard:has(input:checked) .bkcard__ck{background:var(--gold);border-color:var(--gold)}
.bkcard:has(input:checked) .bkcard__ck svg{opacity:1;transform:none}
/* industry cards: gold-tint icon tile + name; the badge sits in the corner */
.bkcard--ind{min-height:72px;padding:12px 12px 12px 14px;gap:12px;font-size:15px}
.bkcard--ind .bkcard__ck{top:8px;right:8px;width:20px;height:20px;margin-top:0}
.bkcard--ind .bkcard__ck svg{width:12px;height:12px}
.bkcard__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(207,174,107,.16);color:var(--gold-ink);transition:background .2s,color .2s}
.bkcard__ic svg{width:26px;height:26px}
.bkcard:has(input:checked) .bkcard__ic{background:var(--gold);color:var(--navy)}
@media (max-width:420px){.bkcard--ind{padding-left:10px;gap:10px;font-size:14.5px}.bkcard__ic{width:40px;height:40px}.bkcard__ic svg{width:24px;height:24px}}

/* ---------- needs screen: the 6 real needs as big cards (icon, title, one-line hint) + "Something else" ---------- */
.bkf__needs{display:none}
.bkgrid--need{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@container (min-width:640px){.bkgrid--need{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bkcard--need{min-height:84px;padding:14px 38px 14px 14px;gap:12px;align-items:center}
.bkcard--need .bkcard__ck{top:10px;right:10px;width:20px;height:20px;margin-top:0;border-radius:6px}
.bkcard--need .bkcard__ck svg{width:12px;height:12px}
.bkcard--need .bkcard__ic{width:44px;height:44px;border-radius:12px}
.bkcard--need .bkcard__ic svg{width:26px;height:26px}
.bkcard__tx{display:grid;gap:3px;min-width:0}
.bkcard--need .bkcard__t{font-size:15px;line-height:1.25}
.bkcard__hint{font:500 12.5px/1.35 "Sora",sans-serif;color:var(--on-bone-2)}
@media (max-width:420px){.bkcard--need{padding:12px 30px 12px 10px;gap:9px}.bkcard--need .bkcard__ic{width:36px;height:36px}.bkcard--need .bkcard__ic svg{width:22px;height:22px}.bkcard--need .bkcard__t{font-size:14px}.bkcard__hint{font-size:12px}}
.bkq__box{margin-top:20px}
.bkq__box[hidden]{display:none}
.bkq__boxlabel{display:block;margin:0 0 8px;font:600 14px/1.3 "Sora",sans-serif;color:var(--on-bone)}
.bkq__textarea{display:block;min-height:96px;padding:14px 16px;resize:vertical;line-height:1.5}
@media (max-width:420px){.bkcard--svc{font-size:14px;padding-left:10px;gap:8px}.bkcard--svc .bkcard__ic{width:32px;height:32px}.bkcard--svc .bkcard__ic svg{width:20px;height:20px}}

/* ---------- last screen ---------- */
.bkq__lastone{margin:20px 0 0;font:600 14px/1 "Sora",sans-serif;letter-spacing:.02em;color:var(--gold-ink)}
.bkq__lastone + .bkq__submit{margin-top:10px}
.bkscreen .book__consent{margin-top:22px;align-items:center;gap:12px;min-height:44px;font-size:14px;color:var(--on-bone-2)}
.bkscreen .book__consent input{width:20px;height:20px;margin:0;accent-color:var(--gold);flex:none}
.bkq__submit{width:100%;min-height:60px;margin-top:14px;font-size:17px}
.bkscreen .micro{margin:14px 0 0;font-size:13.5px;color:var(--on-bone-2);text-align:center}
.bkscreen .book__error{margin:12px 0 0}

/* ---------- footer: Back, Next ---------- */
.bkf__foot{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;padding:12px clamp(20px,3.4vw,36px);border-top:1px solid var(--line-bone);background:var(--bone-2)}
.bkf__foot[hidden]{display:none}
.bkf__foot [hidden]{display:none!important}
.bkf__back{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 6px;background:none;border:0;font:600 15px "Sora",sans-serif;color:var(--on-bone-2);cursor:pointer;transition:color .2s}
.bkf__back svg{width:16px;height:16px}
.bkf__back:hover{color:var(--on-bone)}
.bkf__next{grid-column:2;justify-self:end;min-height:52px;padding:0 26px;gap:10px;font-size:16px}
.bkf__next svg{width:16px;height:16px}

/* the calendar / thank-you panel that replaces the form after sending */
.bkp .book__step2{padding:clamp(24px,3.4vw,36px)}

/* ---------- phones ---------- */
@media (max-width:599px){
  .bkf__head{padding:14px 18px 0}
    .bkf__stage{padding:22px 18px 24px;min-height:0}
  .bkf__foot{padding:10px 14px}
  .bkf__next{padding:0 20px}
  .bkcard{padding-left:16px}
}

/* ---------- modal ---------- */
.bkm{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.bkm[hidden]{display:none}
.bkm__backdrop{position:absolute;inset:0;background:rgba(5,10,18,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .28s ease}
.bkm.is-open .bkm__backdrop{opacity:1}
.bkm__dialog{position:relative;display:flex;flex-direction:column;width:min(880px,100%);max-height:90vh;max-height:90dvh;border-radius:18px;overflow:hidden;background:var(--bone);box-shadow:0 40px 120px -20px rgba(0,0,0,.7),0 0 0 1px rgba(207,174,107,.35);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .28s ease,transform .32s var(--ease);outline:none}
.bkm.is-open .bkm__dialog{opacity:1;transform:none}
.bkm__body.cal{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-radius:0;background:var(--bone)}
.bkm__body .bkf__head{position:sticky;top:0;z-index:3}
.bkm__body .bkf__foot{position:sticky;bottom:0;z-index:3}
.bkm__x{position:absolute;top:8px;right:10px;z-index:6;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(243,241,234,.08);color:var(--on-navy);cursor:pointer;transition:background .2s}
.bkm__x:hover{background:rgba(243,241,234,.18)}
.bkm__x svg{width:16px;height:16px}
.bkm__x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bkm__body .bkf__stage{min-height:min(440px,60vh)}
@media (max-width:640px){
  .bkm{padding:0;align-items:stretch}
  .bkm__dialog{width:100%;max-height:none;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
  .bkm__body .bkf__stage{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .bkm__backdrop,.bkm__dialog,.bkcard,.bkcard__ck,.bkcard__ck svg,.bkp .book__bar i{transition:none!important}
}

/* "How did you hear about us?" select on the last screen */
.bkq__select{appearance:none;-webkit-appearance:none;width:100%;min-height:56px;padding:0 44px 0 16px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--on-bone-2) 50%),linear-gradient(135deg,var(--on-bone-2) 50%,transparent 50%);background-position:calc(100% - 22px) 25px,calc(100% - 17px) 25px;background-size:5px 5px;background-repeat:no-repeat}

/* website field spans the contact grid; chip rows for "A few quick taps" and the last screen */
.bkf__wide{grid-column:1/-1}
.bkrows{display:grid;gap:22px;margin-top:22px}
.bkrow[hidden]{display:none}
.bkrow__q{margin:0 0 10px;font:600 15px/1.35 "Sora",sans-serif;color:var(--on-bone)}
.bkrow__chips{display:flex;flex-wrap:wrap;gap:8px}
.bkcard--chip{min-height:46px;padding:8px 18px;border-radius:999px;font-size:14px;font-weight:600;gap:0}
.bkcard--chip .bkcard__ck{display:none}
.bkcard--chip:has(input:checked){color:var(--on-bone)}
.bkcard--chip .bkcard__t{text-align:center}
.bkq__box{margin-top:22px}
@media (max-width:420px){.bkcard--chip{font-size:13.5px;padding:8px 14px}}

/* Close button must be visible on the bone panel (Ben, 7 Oct 2026): it was
   bone-on-bone. Solid navy circle, bone X, everywhere; pinned on phones. */
.bkm__x{background:var(--navy);color:var(--bone);box-shadow:0 4px 14px rgba(11,22,38,.25)}
.bkm__x:hover{background:var(--navy-3)}
.bkm__x svg{width:18px;height:18px}
@media (max-width:767px){.bkm__x{position:fixed;top:12px;right:12px;z-index:20}}

/* Cloudflare Turnstile slot (bot check). Empty and invisible unless Cloudflare needs a tick-box. */
.ts-slot{display:flex;justify-content:center}


/* ---------- FAST BOOKING FORM (BOOKING-FAST-SPEC.md, 19 Oct 2026) ---------- */
/* needs cards: never wider than their column (they ran to x=390 on a 375 screen); text wraps; 1 column under 360px */
.bkcard{min-width:0}
.bkcard__t,.bkcard__hint{overflow-wrap:break-word;hyphens:none}
.bkgrid--need>.bkcard{width:100%;max-width:100%;box-sizing:border-box}
@media (max-width:359px){.bkgrid--need{grid-template-columns:minmax(0,1fr)}}
.bkgrid--compact{gap:8px;margin-top:2px}
.bkgrid--compact .bkcard--need{min-height:68px;padding:10px 30px 10px 10px;gap:8px}
.bkgrid--compact .bkcard--need .bkcard__ic{width:34px;height:34px;border-radius:10px}
.bkgrid--compact .bkcard--need .bkcard__ic svg{width:20px;height:20px}
.bkgrid--compact .bkcard--need .bkcard__t{font-size:13.5px}
.bkgrid--compact .bkcard--need .bkcard__hint{display:none}
.bkrow--needs .bkq__box{margin-top:12px}
.bkrow--needs .bkq__box[hidden]{display:none}
/* header: STEP n OF N */
.bkf__count{margin:0;padding:12px clamp(20px,3.4vw,36px) 10px;font:600 11.5px/1 "Sora",sans-serif;letter-spacing:.16em;color:var(--gold)}
@media (max-width:599px){.bkf__head .bkf__count{padding:0 0 10px}}
/* screen 2: trade cards, then (Not a trade) the industry cards in the same place */
.bkgrid--trade{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:520px){.bkgrid--trade{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bktrade{margin-top:22px;outline:none}
.bktrade [hidden]{display:none}
.bktrade__ind .bkq__ask{margin:0 0 14px}
.bktrade__back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;padding:0 4px;background:none;border:0;font:600 14px "Sora",sans-serif;color:var(--on-bone-2);cursor:pointer}
.bktrade__back svg{width:16px;height:16px}
.bkscreen>.bktrade .bkgrid{margin-top:0}
/* "We've filled in your details" */
.book__prefilled{margin:16px 0 0;padding:12px 16px;border-radius:12px;background:rgba(207,174,107,.14);color:var(--gold-ink);font:600 14px/1.4 "Sora",sans-serif}
.book__prefilled[hidden]{display:none}
.book__prefilled + .bkf__fields{margin-top:16px}
/* step 2: ring-now line, calendar, Help Sam prepare card */
.bkring{margin:0 0 16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.bkring__q{font-size:15px;color:inherit;opacity:.75}
.bkring__btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1.5px solid var(--gold);border-radius:999px;font-size:15px;font-weight:600;color:inherit;text-decoration:none;white-space:nowrap;transition:background-color .2s ease}
.bkring__btn:hover,.bkring__btn:focus-visible{background:rgba(201,169,97,.14)}
.bkring__btn svg{flex:none;width:20px;height:20px}
.bkp .book__step2{overflow-x:hidden}
.bkprep{margin-top:22px;padding:clamp(18px,3vw,26px);border:1px solid var(--line-bone);border-radius:14px;background:var(--bone-2);color:var(--on-bone);min-width:0}
.bkprep__title{margin:0;font:700 clamp(19px,2.4vw,22px)/1.2 "Sora",sans-serif;letter-spacing:-.02em;color:var(--on-bone)}
.bkprep__title span{display:block;margin-top:4px;font:600 14px/1.3 "Sora",sans-serif;letter-spacing:0;color:var(--gold-ink)}
.bkprep__sub{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--on-bone-2)}
.bkprep .bkrows{margin-top:18px;gap:18px}
.bkprep .bkq__box{margin-top:18px}
.bkprep__send{width:100%;min-height:54px;margin-top:20px;font-size:16px}
.bkprep__msg{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--on-bone-2)}
.bkprep__msg[hidden],.bkprep__done[hidden]{display:none}
.bkprep__done{margin:0;font:600 17px/1.45 "Sora",sans-serif;color:var(--on-bone)}
@media (max-width:480px){.bkring{flex-direction:column;align-items:stretch;text-align:center}.bkring__btn{justify-content:center}}
/* phones: the calendar panel's padding + the booking widget's 300px minimum must fit a 360px screen (no sideways scroll) */
@media (max-width:480px){.bkp .book__step2{padding:20px 14px}.bkp .booking-widget{min-width:0}}
/* trade + compact needs cards on a phone: smaller icon and text so whole words fit beside the tick badge */
@media (max-width:480px){
  .bkgrid--trade .bkcard{padding:10px 28px 10px 10px;gap:8px;min-height:64px}
  .bkgrid--trade .bkcard__ic{width:32px;height:32px;border-radius:9px}
  .bkgrid--trade .bkcard__ic svg{width:20px;height:20px}
  .bkgrid--trade .bkcard__t{font-size:13.5px;line-height:1.2}
  .bkgrid--trade .bkcard__ck{top:8px;right:8px;width:18px;height:18px}
  .bkgrid--compact .bkcard--need{padding:10px 28px 10px 10px}
  .bkgrid--compact .bkcard--need .bkcard__ic{display:none}
  .bkgrid--compact .bkcard--need .bkcard__t{font-size:13px}
}
@media (max-width:480px){
  .bkgrid--trade .bkcard .bkcard__t{font-size:13.5px!important;line-height:1.2!important}
}
@media (max-width:400px){
  .bkgrid--trade .bkcard__ic{display:none}
  .bkgrid--trade .bkcard{padding-left:14px}
}