/* ==========================================================================
   Great House Move — the booking wizard
   --------------------------------------------------------------------------
   Loaded by /book only, and ALWAYS after assets/site.css. Everything here is
   the wizard's own furniture: the step rail, the option cards, the calendar,
   the quote lines and the deposit panel. It uses the shared tokens and adds no
   colours of its own, so the page that takes the money looks like the page
   that made the promise.

   The class names are load-bearing — the booking engine addresses most of them
   from JavaScript (.opt.sel, .calday.part, .stepchip.on …). Restyle freely;
   do not rename.
   ========================================================================== */

/* ---------- the stage: form on the left, the reasons to trust it on the right ---------- */
.bookstage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.bookmain{
  min-width:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);padding:clamp(20px,2.4vw,32px);
}
.panelhead{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.panelhead h3{
  display:flex;align-items:center;gap:10px;flex:1;
  font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);
}
.panelhead h3 .ic{color:var(--orange-dark)}
.backchip{
  display:inline-flex;align-items:center;min-height:38px;padding:8px 16px;
  background:var(--orange-tint);color:var(--orange-dark);border:0;border-radius:999px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.84rem;text-decoration:none;cursor:pointer;
}
.backchip:hover{background:#FBDCBF}
.bookbox{padding:0}

/* ---------- the step rail ---------- */
.steps{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
  margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line);
}
.stepchip{
  font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.02em;
  padding:7px 14px;border-radius:999px;background:var(--cream);
  border:1px solid var(--line);color:var(--ink-3);
  transition:background var(--dur-ui) ease,color var(--dur-ui) ease,border-color var(--dur-ui) ease;
}
.stepchip.on{background:var(--orange-dark);border-color:var(--orange-dark);color:#fff}

/* ---------- panes ---------- */
.pane{display:none}
.pane.on{display:block;animation:paneIn .34s var(--ease-settle) both}
@keyframes paneIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.pane h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);margin-bottom:18px;text-align:center}
.pane h4{font-size:1.02rem;margin-bottom:10px;color:var(--ink)}

/* ---------- option cards ---------- */
.optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:8px}
.opt{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  min-height:112px;padding:18px 14px;text-align:center;cursor:pointer;
  background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r-md);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.98rem;line-height:1.3;color:var(--ink);
  transition:border-color var(--dur-ui) ease,background var(--dur-ui) ease,
             transform var(--dur-ui) var(--ease-settle),box-shadow var(--dur-ui) var(--ease-settle);
}
.opt:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.opt.sel{border-color:var(--orange-dark);background:var(--orange-tint);box-shadow:none}
.opt .em{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--orange-tint);color:var(--orange-dark);margin-bottom:8px;
}
.opt.sel .em{background:#fff}
.opt .em .ic{width:21px;height:21px}
.opt small{display:block;font-weight:600;color:var(--ink-3);margin-top:4px;font-size:.81rem;line-height:1.35}
.opt small.alloc{color:var(--orange-dark);font-weight:800;font-size:.74rem;margin-top:3px}
.subq{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- notes ---------- */
.stepnote{
  background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:14px 18px;
  font-size:.92rem;color:var(--ink-2);margin-top:18px;line-height:1.6;
}
.stepnote b{color:var(--ink);font-weight:800}
.stepnote a{color:var(--orange-dark);font-weight:800}
.carrynote:empty{display:none}
.fnote{display:block;font-weight:600;font-size:.8rem;color:var(--ink-3);margin-top:2px}

/* ---------- addresses ---------- */
.addr2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.addrcol h4{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:var(--ink)}
.addrcol h4 .ic{color:var(--orange-dark)}
.pcrow{display:flex;gap:9px;align-items:flex-end}
.pcrow .field{flex:1;margin-bottom:0}
.pcfind{
  min-height:50px;padding:13px 18px;border-radius:var(--r-sm);
  border:1.5px solid var(--orange-dark);background:var(--orange-tint);color:var(--orange-dark);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.92rem;cursor:pointer;white-space:nowrap;
}
.pcfind:hover{background:#FBDCBF}
.pcfind:disabled{opacity:.5;cursor:not-allowed}
.pcmsg{font-size:.83rem;font-weight:700;margin-top:7px;min-height:16px}
.pcmsg.ok{color:var(--green)}
.pcmsg.err{color:#B3261E}
.pcmsg.busy{color:var(--ink-3)}
.addrmore{display:none;margin-top:14px}
.addrmore.show{display:block;animation:paneIn .3s var(--ease-settle) both}
.addrsum{
  display:flex;align-items:center;gap:9px;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 14px;font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:12px;
}
.addrsum .ic{color:var(--green);flex:none}
.addrsum button{
  margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.79rem;
  color:var(--orange-dark);text-decoration:underline;
}
.addrpick{display:none}
.addrpick.show{display:block;animation:paneIn .3s var(--ease-settle) both}
.addrpick select{font-weight:700}
.distline{font-size:.92rem;color:var(--ink-3);font-weight:700;margin-top:14px;text-align:center;min-height:22px}
#manualMiles{display:none;max-width:280px;margin:12px auto 0}

/* ---------- the diary ---------- */
.cal{
  max-width:400px;margin:0 auto;padding:18px 18px 15px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.calhead .m{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.015em}
.calnav{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;
  color:var(--orange-dark);font-size:1.1rem;font-weight:800;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.calnav:hover:not(:disabled){background:var(--orange-tint);border-color:var(--orange-dark)}
.calnav:disabled{opacity:.32;cursor:not-allowed}
.caldow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:6px}
.caldow span{
  text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding:3px 0;
}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calday{
  aspect-ratio:1;border:1.5px solid transparent;background:var(--cream);border-radius:11px;
  font-family:'Nunito',sans-serif;font-size:.94rem;font-weight:800;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:transform var(--dur-ui) var(--ease-settle),border-color var(--dur-ui) ease,background var(--dur-ui) ease;
}
.calday:hover:not(:disabled){transform:translateY(-2px);border-color:var(--orange-dark)}
.calday.blank{background:none;border:0;cursor:default;pointer-events:none}
.calday.part{background:#FFF0C2;color:#7A5600}
.calday.part::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#C99400}
.calday.unk{background:transparent;border-style:dashed;border-color:var(--line-2);color:var(--ink-3)}
.calday.full,.calday:disabled{
  background:repeating-linear-gradient(135deg,#F3EAE1,#F3EAE1 4px,#EADFD3 4px,#EADFD3 8px);
  color:#7C6B5C;cursor:not-allowed;text-decoration:line-through;transform:none;
}
.calday.nopair{background:var(--cream);color:#B9AB9C;cursor:not-allowed;text-decoration:none;opacity:.62;transform:none}
.calday.sel{background:var(--orange-dark);border-color:var(--orange-dark);color:#fff}
.calday.sel::after{background:#fff}
.calday.today:not(.sel){box-shadow:inset 0 0 0 2px rgba(241,117,27,.5)}
.callegend{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
}
.callegend span{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--ink-3)}
.callegend span[hidden]{display:none}
.callegend i{width:13px;height:13px;border-radius:5px;display:inline-block}
.lg-free{background:var(--cream);border:1.5px solid var(--line-2)}
.lg-part{background:#FFF0C2;border:1.5px solid #C99400}
.lg-full{background:repeating-linear-gradient(135deg,#F3EAE1,#F3EAE1 4px,#EADFD3 4px,#EADFD3 8px);border:1.5px solid var(--line-2)}
.lg-unk{background:transparent;border:1.5px dashed var(--line-2)}
.calbusy{text-align:center;font-size:.8rem;color:var(--ink-3);font-weight:700;padding:8px 0 0}

/* ---------- start times ---------- */
.slotgrid{display:block;margin-top:20px}
.timegroup{margin-bottom:16px}
.timegroup h5{
  display:flex;align-items:center;gap:7px;margin:0 0 9px;
  font-family:'Nunito',sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.timegroup h5 .ic{width:15px;height:15px;color:var(--orange-dark)}
.timerow{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.timechip{
  border:1.5px solid var(--line-2);background:#fff;border-radius:var(--r-sm);
  padding:12px 6px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.95rem;
  color:var(--ink);cursor:pointer;min-height:46px;
  transition:border-color var(--dur-ui) ease,background var(--dur-ui) ease;
}
.timechip:hover{border-color:var(--orange)}
.timechip.sel{background:var(--orange-dark);border-color:var(--orange-dark);color:#fff}
.timepicked{
  margin-top:10px;padding:12px 16px;font-size:.9rem;line-height:1.55;color:var(--ink-2);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);
}
.timepicked:empty{display:none}
.timepicked b{color:var(--ink)}
.slot{
  border:1.5px solid var(--line-2);background:#fff;border-radius:var(--r-md);padding:16px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:1rem;color:var(--ink);cursor:pointer;
}
.slot small{display:block;font-weight:600;color:var(--ink-3);margin-top:3px}
.slot.sel{border-color:var(--orange-dark);background:var(--orange-tint)}
.slot[aria-disabled="true"]{opacity:.72;cursor:not-allowed;background:var(--cream)}
.slot[aria-disabled="true"] small{color:#8A1E17;font-weight:800}

/* ---------- extras ---------- */
.qty,.togglecard{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-bottom:12px;
  background:var(--white);
  transition:border-color var(--dur-ui) ease,background var(--dur-ui) ease;
}
.togglecard{cursor:pointer}
.togglecard:hover{border-color:var(--orange)}
.togglecard.sel{border-color:var(--orange-dark);background:var(--orange-tint)}
.qty .ql b,.togglecard .tl b{display:flex;align-items:center;gap:9px;font-family:'Nunito',sans-serif;font-weight:800}
.qty .ql b .ic,.togglecard .tl b .ic{color:var(--orange-dark)}
.qty .ql small,.togglecard .tl small{display:block;color:var(--ink-3);font-size:.87rem;margin-top:3px;line-height:1.5}
.togglecard .price{font-weight:800;color:var(--orange-dark);white-space:nowrap}
.qty .qbtns{display:flex;align-items:center;gap:12px;flex:none}
.qty button{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--orange-dark);
  background:#fff;color:var(--orange-dark);font-size:1.2rem;font-weight:800;line-height:1;cursor:pointer;
}
.qty button:hover{background:var(--orange-tint)}
.qty .qv{font-weight:800;min-width:20px;text-align:center;font-size:1.05rem}

/* ---------- what your price includes ---------- */
.inclbox{
  margin-top:18px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--cream);
}
.inclbox h4{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;
}
.incl{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5;padding:5px 0;color:var(--ink-2)}
.incl .ic{flex:none;width:16px;height:16px;margin-top:3px;color:var(--green)}
.incl b{font-weight:800;color:var(--ink)}
.incl small{display:block;color:var(--ink-3);font-size:.83rem;font-weight:600}
.incl.warn .ic{color:var(--orange-dark)}
.testbanner{
  margin-top:16px;padding:13px 16px;border:1.5px dashed var(--orange);border-radius:var(--r-md);
  background:var(--orange-tint);font-size:.89rem;font-weight:700;color:var(--ink);line-height:1.55;
}

/* ---------- the quote ---------- */
.quote-lines{border-top:1px solid var(--line);margin-top:8px}
.qline{
  display:flex;justify-content:space-between;gap:16px;padding:11px 2px;
  border-bottom:1px dashed var(--line);font-size:.97rem;color:var(--ink-2);
}
.qline span:last-child{font-weight:800;white-space:nowrap;color:var(--ink)}
.qline.tot{
  border-bottom:0;margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.3rem;color:var(--ink);
}
.qline.tot span:last-child{font-family:'Baloo 2',sans-serif;font-weight:700}
.qline.dep{
  background:var(--orange-tint);border:0;border-radius:var(--r-sm);
  padding:13px 15px;margin-top:8px;font-weight:800;color:var(--ink);
}
.qline.save span:last-child{color:var(--green)}

/* ---------- consent ---------- */
.consent{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin-top:12px;
  transition:border-color var(--dur-ui) ease,background var(--dur-ui) ease;
}
.consent:hover{border-color:var(--orange)}
.consent input{width:21px;height:21px;flex:none;margin-top:1px;accent-color:var(--orange-dark);cursor:pointer}
.consent b{display:block;font-size:.93rem;font-weight:800;line-height:1.4;color:var(--ink)}
.consent small{display:block;color:var(--ink-3);font-size:.82rem;margin-top:4px;line-height:1.5}
.consent a{color:var(--orange-dark);font-weight:800}
.consent.on{border-color:var(--orange-dark);background:var(--orange-tint)}
.consent.req.missing{border-color:#B3261E;background:#FDECEA}
.reqtag{
  display:inline-block;font-style:normal;font-size:.65rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;background:var(--orange-tint);color:var(--orange-dark);
  border-radius:999px;padding:3px 9px;margin-left:7px;vertical-align:1px;
}
.consent.on .reqtag{background:rgba(255,255,255,.8)}

/* ---------- promo ---------- */
.promorow{
  margin-top:16px;padding:16px 18px;
  border:1px solid rgba(241,117,27,.34);border-radius:var(--r-md);background:var(--cream);
}
.promorow label{display:block;font-weight:800;font-size:.92rem;margin-bottom:10px;color:var(--ink)}
.promorow label span{display:block;font-weight:600;font-size:.83rem;color:var(--ink-3);margin-top:3px}
.promoin{display:flex;gap:10px}
.promoin input{
  flex:1;min-width:0;padding:12px 14px;min-height:48px;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  font-family:'Nunito',sans-serif;font-size:.98rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
}
.promoin input:focus{outline:3px solid var(--orange-dark);outline-offset:1px;border-color:var(--orange-dark)}
.promoin .btn{padding:11px 22px;font-size:.92rem;min-height:48px}
.promomsg{font-size:.86rem;font-weight:800;margin-top:9px;min-height:18px}
.promomsg.ok{color:var(--green)}
.promomsg.err{color:#B3261E}

/* ---------- the deposit ---------- */
.paypanel{
  margin-top:20px;padding:clamp(24px,3vw,32px);text-align:center;
  background:var(--orange);border-radius:var(--r-lg);color:var(--ink);box-shadow:var(--shadow-sm);
}
.paypanel > div:first-child{font-weight:800;color:var(--ink);margin-bottom:2px}
.bignum{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:clamp(2.4rem,2rem + 1.6vw,3rem);
  color:var(--ink);line-height:1.05;letter-spacing:-.03em;margin:6px 0 4px;
}
.paypanel .btn{background:var(--ink);color:var(--cream);max-width:100%;white-space:normal}
.paypanel .btn:hover{background:#1F1206}
.paypanel .btn.ghost{background:transparent;border-color:rgba(56,34,14,.42);color:var(--ink)}
.paypanel .btn.ghost:hover{background:rgba(56,34,14,.09)}
.bookmsg{min-height:24px;font-weight:800;text-align:center;margin-top:12px}
.bookmsg.err{color:#7A1712}
.bookmsg.ok{color:#0B5A2E}
.terms{font-size:.84rem;color:var(--ink-3);margin-top:16px;text-align:center;line-height:1.6}
.terms a{color:var(--orange-dark)}

/* ---------- the two outcomes ---------- */
.confirmpanel{
  background:#EAF8F0;border:1px solid rgba(15,122,64,.3);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);text-align:center;margin-bottom:26px;
}
.confirmpanel h3{color:#0B5A2E}
.cancelpanel{
  background:#FDECEA;border:1px solid rgba(179,38,30,.28);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,30px);text-align:center;margin-bottom:26px;
}

/* ---------- wizard navigation ---------- */
.navbtns{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.navhint{display:none;margin-top:22px;text-align:right;font-size:.86rem;font-weight:700;color:var(--ink-3)}
.navhint.show{display:block}

/* ---------- the rail ---------- */
.bookrail{display:flex;flex-direction:column;gap:16px;position:sticky;top:104px}
.railref .rref{
  display:block;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.35rem;
  color:var(--ink);letter-spacing:.01em;
}

@media (max-width:1040px){
  .bookstage{grid-template-columns:minmax(0,1fr)}
  .bookrail{position:static;flex-direction:row;flex-wrap:wrap}
  .bookrail .railcard{flex:1 1 240px}
}
@media (max-width:760px){
  .addr2{grid-template-columns:1fr}
  .navhint{text-align:center}
}
@media (max-width:640px){
  .bookmain{padding:18px 15px}
  /* two option cards to a row on a phone. At the old 158px floor the grid fell
     to one column inside the card's padding, which made step 1 a seven-card
     scroll before anyone had answered anything. */
  .optgrid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
  .opt{min-height:104px;padding:15px 11px;font-size:.94rem}
  .opt .em{width:34px;height:34px;margin-bottom:6px}
  .opt .em .ic{width:18px;height:18px}
  .opt small{font-size:.77rem}
  .opt small.alloc{font-size:.71rem}
  .bookrail{flex-direction:column}
  .steps{gap:5px;margin-bottom:20px;padding-bottom:18px}
  .stepchip{font-size:.7rem;padding:5px 10px}
  .cal{padding:14px 12px 12px}
  .calday{font-size:.86rem;border-radius:9px}
  .timerow{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
  .timechip{padding:11px 4px;font-size:.88rem}
  .navbtns .btn{flex:1}
}

/* ==========================================================================
   PHONE: get the first question onto the first screen           (20 Sep 2026)
   Measured at 375x812 before this: the first input a customer can type into sat
   1,109px down the page — 1.37 screens — behind an H1, a four-line lead and four
   trust cards. Someone who has just tapped "Book my move" has already decided;
   making them scroll past the pitch to reach the form is friction at the exact
   moment they are ready to act.

   Everything here is safe to scope this way because book.css is loaded by
   book.html and NO other page — the page head and the proof bar keep their
   normal proportions everywhere else on the site.
   ========================================================================== */
@media (max-width:640px){
  .pagehead{padding:24px 0 16px}
  .pagehead h1{font-size:1.74rem;line-height:1.15;margin-bottom:10px}
  .pagehead .lead{font-size:1rem;line-height:1.5}
  /* The four trust cards stay — they answer the objections people actually have
     about paying a deposit online — but tightened. Nothing is hidden: the
     sub-lines carry real detail ("Not an estimate that moves on the day"), so
     they are worth their pixels even here. */
  .proofbar{margin-top:16px;gap:8px}
  .proofbar > li > a,.proofbar > li > span{padding:11px 12px}
  .proofbar .pi{width:30px;height:30px}
  .proofbar .pi svg{width:16px;height:16px}

  /* ONE progress indicator, not two. The chips wrapped onto two ragged rows and
     cost 85px to say what the line directly beneath them already says in words —
     "Step 1 of 5 · Where" — which is also the one a screen reader announces, as
     #bkCount is role="status". On a phone the words win. */
  .steps{display:none}
  .progrow{margin:0 0 14px}

  /* The offer strip keeps every word — it is a live discount and the detail about
     when the code goes in is what stops people hunting for a box on step one — but
     it is set tighter, because at 101px it was the single biggest thing between a
     phone and the first question. */
  .offerstrip{padding:11px 12px;gap:9px}
  .offerstrip .os-t{font-size:.83rem;line-height:1.4}
  .offerstrip .os-ic{width:28px;height:28px}

  /* The calendar gets the card's full width back. Seven columns on a 375px screen
     can never reach a 44px cell — 7x44 plus gaps is wider than the phone — so the
     honest goal is the largest cell the grid allows, not a number from a guideline
     that does not fit. This buys roughly 3px on every day. */
  .cal{padding:12px 6px 10px}
}

@media (prefers-reduced-motion:reduce){
  .pane.on,.addrmore.show,.addrpick.show{animation:none}
  .opt:hover,.calday:hover:not(:disabled){transform:none}
}

/* ---------- above the fold on a phone ----------
   Four full-width proof chips cost 360px and pushed the first booking question
   most of a screen down. Under 640px they go two-up and drop the sub-line: the
   detail is all repeated inside the wizard anyway. */
@media (max-width:640px){
  .pagehead .proofbar{grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
  .pagehead .proofbar .pl small{display:none}
  .pagehead .proofbar > li > span{min-height:54px;padding:10px 12px;font-size:.84rem;gap:9px}
  .pagehead .proofbar .pi{width:30px;height:30px}
  .pagehead .proofbar .pi svg{width:16px;height:16px}
}

/* The engine moves focus to the current step's heading so a screen reader
   announces the new question. That heading is not a tab stop — it only ever
   receives focus programmatically — so the shared focus ring on it reads as a
   stray box round the question rather than as "you are here". Every real
   control keeps its ring. */
.pane h3:focus,.pane h3:focus-visible{outline:none}

/* ==========================================================================
   ADDED 24 Aug 2026 — the customer-lens pass on the booking flow.

   Four things this section pays for, in order of how much they were costing:
   the running price (the first figure used to arrive on step 6, after the
   customer's name, mobile, email and a tick on the terms); the thumb bar that
   keeps Back/Next and the number reachable on a phone; progress said in words
   rather than only in six 11px chips; and the reassurance that belongs beside
   the pay button rather than only in the small print under it.
   ========================================================================== */

/* ---------- the online saving, at the top rather than only at the end ---------- */
.offerstrip{
  display:flex;align-items:center;gap:12px;
  background:var(--orange-tint);border:1px solid rgba(168,72,10,.22);
  border-radius:var(--r-lg);padding:11px 15px;margin-bottom:18px;
}
.offerstrip .os-ic{
  display:grid;place-items:center;flex:none;width:32px;height:32px;
  background:var(--white);border-radius:10px;
}
.offerstrip .os-ic .ic{width:17px;height:17px;color:var(--orange-dark)}
.offerstrip .os-t{font-size:.87rem;font-weight:600;color:var(--ink-2);line-height:1.45}
.offerstrip .os-t b{color:var(--ink);font-weight:800}

/* ---------- progress, in words ---------- */
.progrow{display:flex;align-items:center;gap:12px;margin:-6px 0 18px}
.stepcount{
  flex:none;font-family:'Nunito',sans-serif;font-weight:800;
  font-size:.79rem;color:var(--ink-3);letter-spacing:.01em;
}
.progline{
  flex:1;height:5px;border-radius:999px;background:var(--line);overflow:hidden;
}
.progline i{
  display:block;height:100%;width:16.6%;border-radius:999px;
  background:var(--orange-dark);transition:width .32s var(--ease-settle);
}

/* ---------- the running price ----------
   Cream rather than orange on purpose: it sits directly under the step rail
   for the whole of the wizard, and an orange slab there competes with the
   orange Next button for the same eye. */
.livebar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px 17px;margin-bottom:22px;
}
.livebar[hidden]{display:none}
.livebar .lb-left{display:flex;flex-direction:column;min-width:0}
.livebar .lb-label{font-weight:800;font-size:.9rem;color:var(--ink)}
.livebar .lb-note{font-size:.79rem;font-weight:600;color:var(--ink-3);margin-top:2px;line-height:1.4}
.livebar .lb-right{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.livebar .lb-num{
  font-family:'Baloo 2',sans-serif;font-weight:800;line-height:1;
  font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem);color:var(--orange-dark);
}
.livebar .lb-dep{font-size:.78rem;font-weight:700;color:var(--ink-3);margin-top:4px}
.livebar .lb-dep:empty{display:none}

/* ---------- why the details are being asked for ---------- */
.panelead{
  margin:-8px 0 18px;text-align:center;font-size:.89rem;font-weight:600;
  color:var(--ink-3);line-height:1.5;
}

/* ---------- a field that is still outstanding ----------
   Matched to .consent.req.missing above so the whole form flags the same way. */
.field.missing input,.field.missing select,.field.missing textarea{
  border-color:#B3261E;background:#FDECEA;
}
.navhint.nudge{color:#B3261E}

/* The size grid, the calendar and the time chips have no .field wrapper — they ARE the
   question, so they get marked themselves. outline, not border: a border would resize the
   grid and shuffle the options under the customer's thumb as it appears. */
.optgrid.missing,.cal.missing,.slotgrid.missing{
  outline:2px solid #B3261E;outline-offset:4px;border-radius:var(--r-md);
}
/* Colour on its own is not a message — WCAG 1.4.1, and useless to anyone who cannot see
   it. Every marked answer says what to do in words, tied to the input by aria-describedby. */
.fieldmsg{
  display:block;margin:6px 2px 0;color:#B3261E;font-size:.82rem;font-weight:700;line-height:1.45;
}
.optgrid.missing+.fieldmsg,.fieldmsg+.optgrid,.fieldmsg+.cal,.fieldmsg+.slotgrid{margin-top:0}
@media (prefers-contrast:more){
  .optgrid.missing,.cal.missing,.slotgrid.missing{outline-width:3px}
}

/* Next when the step is not finished yet. It is NOT disabled — see validate()
   in the engine. It looks unready and it is still pressable, because the press
   is what tells the customer what is outstanding. */
#bkNext.waiting{
  background:var(--line-2);color:var(--ink-3);box-shadow:none;
}
#bkNext.waiting:hover{background:var(--line-2);transform:none}

/* ---------- reassurance at the pay button ---------- */
.payassure{
  list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left;
}
.payassure li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:.84rem;font-weight:600;color:var(--ink-2);line-height:1.45;
}
.payassure .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--green)}
.payassure b{color:var(--ink);font-weight:800}

/* ---------- the wizard's own bar ---------- */
.wizbar{margin-top:28px}
.wizrow{display:flex;align-items:center;gap:14px}
.wizrow .navbtns{margin-top:0;flex:1}
.wb-price{display:none}

@media (max-width:760px){
  /* THE THUMB BAR. Step 2 alone is two postcodes, two address lines, two
     floors, two lifts and two carry questions — Next sat at the far end of
     that scroll, and so did the line explaining why it was not lit. Fixed to
     the bottom, both are always one thumb away, and the running price rides
     with them so the number is on screen at the moment of the decision. */
  .wizbar{
    position:fixed;left:0;right:0;bottom:0;z-index:90;margin:0;
    background:var(--white);border-top:1px solid var(--line);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 20px rgba(56,34,14,.1);
    transition:transform .22s var(--ease-settle);
  }
  /* Scrolled past the wizard — see the stand-down block in the engine. */
  .wizbar.down{transform:translateY(115%)}
  .wizbar .navhint{margin:0 0 8px;text-align:left;font-size:.82rem}
  .wb-price{display:flex;flex-direction:column;flex:none;line-height:1.1}
  .wb-price[hidden]{display:none}
  .wb-lab{font-size:.66rem;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
  .wb-num{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.12rem;color:var(--orange-dark)}
  .wizrow .navbtns{gap:8px}
  .navbtns .btn{padding-left:14px;padding-right:14px}
  /* Room for the bar, so it can never cover the last answer on a step. */
  body.has-wizbar main{padding-bottom:96px}
  /* The wizard owns the bottom of the screen on this page — two stacked bars
     is one too many, and the back-to-top button lands on the Next button. */
  #stickyCta{display:none}
  body.has-wizbar #toTop{bottom:104px}
}

@media (prefers-reduced-motion:reduce){
  .progline i,.wizbar{transition:none}
}