/* ============================================================
   Staffy Homes — THE FLOW (shared boiler-check overlay)
   Extracted from staffy.css so the same full-screen diagnostic
   overlay can render IN-PLACE on the homepage AND on every
   town/area page. Rendered by assets/flow.js into #flow.

   Self-sufficient: the homepage loads staffy.css + flow.css; the
   town pages load local.css + flow.css. local.css defines most
   of the shared tokens, but four the flow needs are absent there,
   so they're redeclared below. The .pulse helper and its keyframes
   are homepage furniture too (they stay in staffy.css); they're
   mirrored here so the flow animates on the town pages, which never
   load staffy.css.

   THE FLOW — the calmest interface a panicking person ever used.
   Warm paper for triage. Full temperature takeovers for danger:
   gas/CO go deep oxblood (serious, steadying); pouring water goes
   deep COLD slate — the one moment the cold palette leads.
   One question a screen. Nothing shouts.
   ============================================================ */

/* tokens the flow uses that local.css does NOT define (staffy.css
   does). Redeclared verbatim so flow.css is self-sufficient on the
   town pages. On the homepage these simply match staffy.css. */
:root{
  --danger:#c2331f;
  --cold-deep:#17272f;
  --ok:#3e7d4e;
  --ok-text:#2f6a3f;
}

/* the flow's option/tile/chip/call controls are <button>s with no
   font-family of their own — they inherit it from a bare button rule
   that lives in staffy.css but NOT local.css. Mirror it here (low
   specificity, so .make/.flow-brand's Fraunces still wins) so the
   flow uses Hanken on the town pages too. Also fixes the converted
   cb-diag callbar button. */
button{font-family:var(--body)}

/* visually-hidden screen-reader live region (flow.js injects #flowLive with
   this class) — announces each screen change without any visual footprint. */
.flow-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* shared helpers the flow depends on — mirrored from staffy.css so
   the town pages (which never load staffy.css) still animate. */
.pulse{width:9px;height:9px;border-radius:50%;background:var(--ember);flex:none;box-shadow:0 0 0 0 rgba(227,93,37,.55);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(227,93,37,0)}100%{box-shadow:0 0 0 0 rgba(227,93,37,0)}}

/* focus inside the danger/emergency takeovers goes gold (the dark
   ground needs it). Homepage gets this from staffy.css; mirrored
   here for the town pages. */
.scr-danger :focus-visible,.scr-emergency :focus-visible{outline-color:var(--gold)}

#flow{position:fixed;inset:0;z-index:60;background:var(--paper);
  background-image:radial-gradient(110% 60% at 85% -8%,rgba(242,195,104,.14),transparent 60%);
  /* ONE vertical rhythm for every screen — a deliberate 5-step scale that
     replaces a scatter of 14/16/18/20/22/24/26/28 one-offs. Chosen FROM the
     existing values: 22 is the mode of the top-level block rhythm (20/22/24),
     12 the header-cluster gap, 8 the label→control micro-gap. Scoped to #flow,
     so every .scr/.opts/.f-field/etc. inherits it (they only ever render here).
       tight  label→control, micro gaps
       head   kicker→headline→sub (the title cluster reads as one unit)
       nest   secondary / nested block, form-field stack, in-card question
       step   the primary block rhythm — even travel down the screen
       break  the emphatic beat before a commit action / a divider */
  --fg-tight:8px;--fg-head:12px;--fg-nest:16px;--fg-step:22px;--fg-break:28px}
#flow[hidden]{display:none}
/* the overlay arrives like a card laid on the desk — one calm rise.
   Killed under reduced motion by the block at the end of this file. */
#flow:not([hidden]){animation:flow-in .4s cubic-bezier(.2,.7,.25,1)}
@keyframes flow-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.flow-chrome{display:flex;flex-direction:column;height:100%;height:100dvh}
.flow-top{display:flex;align-items:center;gap:14px;padding:12px clamp(14px,4vw,28px);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 92%,transparent);flex:none;position:relative;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.flow-top:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--temp);opacity:.55}
.flow-brand{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:17px;white-space:nowrap}
.flow-brand svg{width:16px;height:19px}
.flow-brand img{height:20px;width:auto;display:block}
/* progress — a warming bar: each segment heats up as you pass it */
.flow-progress{display:flex;align-items:center;gap:6px;margin-inline:auto}
.flow-progress .fp-dot{width:26px;height:7px;border-radius:99px;background:var(--paper-3);transition:background .4s,box-shadow .4s}
.flow-progress .fp-dot.done{background:linear-gradient(90deg,var(--copper),var(--ember))}
.flow-progress .fp-dot.now{background:linear-gradient(90deg,var(--ember),var(--flame));box-shadow:0 0 10px rgba(227,93,37,.55)}
.flow-progress .fp-label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-left:8px}
.flow-close{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:16px;cursor:pointer;color:var(--steel);flex:none;
  transition:transform .15s,color .15s,border-color .15s}
.flow-close:hover{color:var(--ink);border-color:var(--ink)}
.flow-close:active{transform:scale(.92)}
/* overflow-x:hidden is the hard guard — no screen inside the flow may ever
   pan the page sideways; wide inner rows (the day picker) keep their OWN
   overflow-x:auto and scroll independently within this. */
.flow-stage{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;outline:none;overscroll-behavior:contain}
.flow-foot{flex:none;display:flex;align-items:center;gap:14px;padding:10px clamp(14px,4vw,28px) max(10px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--paper)}
.flow-back{background:none;border:0;cursor:pointer;font-weight:700;font-size:14px;color:var(--steel);min-height:var(--tap);padding:0 6px;flex:none}
.flow-back:hover{color:var(--ink)}
.flow-trust{font-size:11px;color:var(--steel);line-height:1.45;margin-left:auto;text-align:right;max-width:60ch}
.flow-trust b{font-family:var(--mono);letter-spacing:.06em;color:var(--ink)}

/* screen scaffold */
.scr{width:min(680px,100%);margin-inline:auto;padding:clamp(22px,4.5vw,44px) clamp(16px,4vw,24px) 44px;animation:scr-in .4s cubic-bezier(.2,.7,.25,1)}
@keyframes scr-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.scr-k{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--ember-text);margin-bottom:var(--fg-head)}
.scr-k:before{content:"";width:26px;height:2px;background:var(--temp);flex:none;border-radius:2px}
.scr h2{font-family:var(--disp);font-weight:600;font-size:clamp(27px,5.8vw,38px);line-height:1.04;letter-spacing:-.02em}
.scr .scr-sub{font-size:15.5px;color:var(--steel);margin-top:var(--fg-head);line-height:1.6}
.scr .scr-sub b{color:var(--ink)}

/* the REAL next-slot line — hidden until the live diary answers; filled by
   flow.js from the same /job-slots feed the picker books from. Never fake. */
.ns-line{position:relative;padding-left:18px;margin-top:var(--fg-nest);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--steel);font-weight:500;line-height:1.55}
.ns-line[hidden]{display:none}
.ns-line:before{content:"";position:absolute;left:0;top:4.5px;width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(62,125,78,.45);animation:pulse 2s infinite}
.ns-line b{color:var(--ink);font-weight:600;white-space:nowrap}

/* option cards / tiles — big, calm, warm to the touch */
.opts{display:flex;flex-direction:column;gap:11px;margin-top:var(--fg-step)}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fffdf7;border:1.5px solid var(--line);border-radius:18px;
  padding:16px 17px;min-height:64px;cursor:pointer;font-size:16.5px;font-weight:600;color:var(--ink);
  box-shadow:0 1px 0 rgba(22,16,9,.04);
  transition:border-color .18s,transform .18s,box-shadow .18s}
/* a quiet chevron — every option visibly goes somewhere */
.opt:after{content:"";flex:none;width:9px;height:9px;margin-left:auto;border-top:2px solid var(--copper);border-right:2px solid var(--copper);
  transform:rotate(45deg);opacity:.5;transition:opacity .18s,transform .18s}
.opt:hover{border-color:var(--copper);box-shadow:var(--shadow-soft)}
.opt:hover:after{opacity:.9;transform:rotate(45deg) translate(1px,-1px)}
.opt:active{transform:scale(.985)}
.opt .oi{width:42px;height:42px;flex:none;border-radius:13px;background:linear-gradient(140deg,#f7eedb,var(--paper-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(22,16,9,.05);
  display:flex;align-items:center;justify-content:center;color:var(--copper)}
.opt .oi svg{width:23px;height:23px}
.opt small{display:block;font-weight:400;font-size:13px;color:var(--steel);margin-top:2px;line-height:1.4}
.opt.opt-danger{border-color:rgba(194,51,31,.38);background:#fdf4f0}
.opt.opt-danger .oi{background:rgba(194,51,31,.1);box-shadow:none;color:var(--danger)}
.opt.opt-danger:after{border-color:var(--danger)}
.opt.opt-danger:hover{border-color:var(--danger)}
.opt.sel{border-color:var(--ember);box-shadow:0 0 0 1.5px var(--ember)}
/* the router's emergency route — a clear, red-accented SECONDARY control. Set
   apart from the primary ember "book" intents (tinted, not filled; a smaller
   38px icon; a --tap-tall bar, not the 64px option cards) so it reads as the
   distinct escape hatch it is without out-shouting the main jobs. */
.router-emergency{display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin-top:var(--fg-step);
  background:#fdf4f0;border:1.5px solid rgba(194,51,31,.42);border-radius:16px;
  padding:12px 15px;min-height:var(--tap);cursor:pointer;color:var(--danger);
  box-shadow:0 1px 0 rgba(22,16,9,.04);transition:border-color .18s,transform .18s,box-shadow .18s}
.router-emergency:hover{border-color:var(--danger);box-shadow:var(--shadow-soft)}
.router-emergency:active{transform:scale(.985)}
.router-emergency .re-ic{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(194,51,31,.1);color:var(--danger)}
.router-emergency .re-ic svg{width:21px;height:21px}
.router-emergency .re-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.35}
.router-emergency .re-tx b{font-size:14.5px;color:var(--danger);font-weight:700}
.router-emergency .re-tx small{font-size:12.5px;color:var(--steel)}
.router-emergency .re-go{flex:none;color:var(--danger);display:flex;align-items:center}
.router-emergency .re-go svg{width:18px;height:18px}
.tilegrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:var(--fg-step)}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#fffdf7;border:1.5px solid var(--line);border-radius:18px;
  padding:15px;min-height:108px;cursor:pointer;text-align:left;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink);
  box-shadow:0 1px 0 rgba(22,16,9,.04);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.tile:hover{border-color:var(--copper);box-shadow:var(--shadow-soft)}
.tile:active{transform:scale(.98)}
.tile .oi{width:38px;height:38px;border-radius:11px;background:linear-gradient(140deg,#f7eedb,var(--paper-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(22,16,9,.05);
  display:flex;align-items:center;justify-content:center;color:var(--copper)}
.tile .oi svg{width:22px;height:22px}
.tile.tile-wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:62px}
.tile.tile-code{border-color:var(--copper);background:#fff9ec;box-shadow:inset 0 0 0 1px rgba(185,106,53,.15)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--fg-step)}
#flow .chip{border:1.5px solid var(--line);background:#fffdf7;border-radius:999px;padding:11px 19px;min-height:var(--tap);font-size:15px;font-weight:600;cursor:pointer;color:var(--ink);transition:.18s}
#flow .chip:hover{border-color:var(--copper)}
#flow .chip.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* primary / secondary actions inside screens */
.scr-actions{display:flex;flex-direction:column;gap:11px;margin-top:var(--fg-break)}
.scr-actions .btn{width:100%}
.ghostlink{background:none;border:0;cursor:pointer;color:var(--steel);font-size:14px;font-weight:600;min-height:var(--tap);text-decoration:underline;text-underline-offset:3px}
.ghostlink:hover{color:var(--ink)}
.skipbook{display:block;margin:var(--fg-step) auto 0;background:none;border:0;cursor:pointer;color:var(--ember-text);font-weight:700;font-size:14.5px;min-height:var(--tap);text-decoration:underline;text-underline-offset:3px}
.skipbook:hover{color:var(--ember-deep)}

/* guardrail + note boxes */
.guard{margin-top:var(--fg-step);background:var(--paper-2);border-left:3px solid var(--copper);border-radius:0 12px 12px 0;padding:14px 16px;font-size:13.5px;color:var(--steel);line-height:1.55}
.guard b{color:var(--ink)}
.note-ok{margin-top:var(--fg-step);background:#edf4ec;border-left:3px solid var(--ok);border-radius:0 12px 12px 0;padding:14px 16px;font-size:14px;line-height:1.55}
.note-warn{margin-top:var(--fg-step);background:#fdf4f0;border-left:3px solid var(--danger);border-radius:0 12px 12px 0;padding:14px 16px;font-size:14px;line-height:1.55}

/* steps list (repressurise / thaw guides) */
.steps-list{list-style:none;margin-top:var(--fg-step);display:flex;flex-direction:column;gap:15px;counter-reset:s}
.steps-list li{display:flex;gap:14px;align-items:flex-start;counter-increment:s;font-size:15.5px;line-height:1.55}
.steps-list li:before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--ember),var(--flame));color:#2a1503;
  font-family:var(--mono);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:1px;
  box-shadow:0 4px 12px -4px rgba(200,70,14,.5)}
.steps-list b{color:var(--ink)}
.steps-list small{display:block;color:var(--steel);font-size:13px;margin-top:2px}

/* illustrative SVG figures (gauge, filling loop, condensate pipe) */
.figbox{margin-top:var(--fg-step);background:#fffdf7;border:1px solid var(--line);border-radius:var(--rad);padding:16px;display:flex;justify-content:center;box-shadow:var(--shadow-soft)}
.figbox svg{max-width:100%;height:auto}
.figcap{font-size:12.5px;color:var(--steel);text-align:center;margin-top:var(--fg-tight)}

/* photo capture */
.photo-cap{margin-top:var(--fg-step)}
.photo-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:150px;border:2px dashed var(--copper);
  border-radius:var(--rad-lg);background:#fff9ec;cursor:pointer;color:var(--copper);font-weight:700;font-size:15.5px;transition:.18s;text-align:center;padding:18px}
.photo-btn:hover{background:#fff5df;border-color:var(--ember);color:var(--ember-text)}
.photo-btn svg{width:34px;height:34px}
.photo-btn small{font-weight:500;font-size:12.5px;color:var(--steel)}
.photo-cap input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.photo-thumb{display:flex;align-items:center;gap:14px;background:#fffdf7;border:1.5px solid var(--ok);border-radius:var(--rad);padding:12px}
.photo-thumb img{width:72px;height:72px;object-fit:cover;border-radius:10px}
.photo-thumb .pt-ok{font-size:14px;font-weight:700;color:var(--ok-text)}
.photo-thumb .pt-sub{font-size:12.5px;color:var(--steel);display:block;font-weight:400;margin-top:2px}
.photo-thumb .ghostlink{margin-left:auto;flex:none}

/* forms */
.f-field{margin-top:var(--fg-nest)}
.f-field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);font-weight:500;margin-bottom:var(--fg-tight)}
.f-field label small{text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--body);font-size:11.5px}
.f-field input,.f-field textarea,.f-field select{width:100%;font-family:var(--body);font-size:16px;padding:14px 16px;min-height:52px;
  border-radius:13px;border:1.5px solid var(--line);background:#fffdf7;color:var(--ink);transition:border-color .15s}
.f-field input:focus,.f-field textarea:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:transparent}
.f-field textarea{min-height:88px;resize:vertical}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* On narrow phones a half-width cell is too tight for a full UK street address
   (and the phone/email pair) — stack the row so each field gets the full line. */
@media(max-width:400px){.f-row{grid-template-columns:1fr}}
.f-err{color:var(--danger);font-size:13px;font-weight:600;margin-top:6px;display:none}
/* textarea included: the emergency "what's happening" box is a <textarea> and
   was the one field that never got the red validation border */
.f-field.bad input,.f-field.bad textarea{border-color:var(--danger)}
.f-field.bad .f-err{display:block}

/* consent / CCR rows */
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:var(--fg-nest);background:#fffdf7;border:1.5px solid var(--line);border-radius:var(--rad);padding:15px 16px;cursor:pointer}
.consent input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--ember);cursor:pointer}
.consent span{font-size:13.5px;line-height:1.55;color:var(--steel)}
.consent b{color:var(--ink)}

/* slot picker */
.slot-days{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;margin-top:var(--fg-step)}
.slot-day{flex:none;border:1.5px solid var(--line);background:#fffdf7;border-radius:14px;padding:10px 17px;min-height:var(--tap);cursor:pointer;text-align:center;font-weight:700;font-size:14px}
.slot-day small{display:block;font-weight:500;font-size:11px;color:var(--steel);font-family:var(--mono);letter-spacing:.04em;margin-top:2px}
/* the picker IS the next action on the book screen — a chosen slot gets an
   ember ring + soft glow so it clearly out-weighs the (quieted) price card. */
.slot-day.sel{background:var(--ink);color:var(--paper);border-color:var(--ember);box-shadow:0 0 0 2px var(--ember),0 8px 20px -12px rgba(227,93,37,.5)}
.slot-day.sel small{color:var(--steel-2)}
/* time slots wrap into a grid — every time stays visible and the row can
   never run wider than the screen. Was a non-wrapping flex row (flex:1, no
   overflow) that, on a real day of ~16 slots, forced the whole booking
   screen past the viewport and made the page pan sideways on mobile. */
.slot-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px;margin-top:var(--fg-tight)}
.slot-times .chip{padding-inline:6px;text-align:center;justify-content:center;display:flex;align-items:center;font-family:var(--mono);font-weight:600;letter-spacing:.02em;white-space:nowrap}
#flow .slot-times .chip.sel{border-color:var(--ember);box-shadow:0 0 0 2px var(--ember),0 8px 20px -12px rgba(227,93,37,.5)}

/* price scope card — the number, stamped */
#flow .price-card{margin-top:var(--fg-step);background:linear-gradient(150deg,#241812,var(--ink) 70%);color:var(--paper);border-radius:var(--rad-lg);padding:22px;position:relative;overflow:hidden;
  border:1px solid rgba(242,195,104,.2);box-shadow:var(--shadow-soft)}
/* the price card states the terms; it must not out-shout the slot picker
   (the actual next action). Radial glow softened one notch from .2 -> .12. */
#flow .price-card:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,rgba(246,163,60,.12),transparent 55%)}
#flow .price-card:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--temp)}
#flow .price-card .pc-price{font-family:var(--mono);font-weight:600;font-size:33px;letter-spacing:.02em;position:relative;color:var(--gold);
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(242,195,104,.1)}
#flow .price-card .pc-price small{font-size:13px;font-family:var(--body);font-weight:500;color:var(--steel-2);letter-spacing:0}
#flow .price-card ul{list-style:none;margin-top:14px;position:relative;display:flex;flex-direction:column;gap:9px}
#flow .price-card li{display:flex;gap:9px;font-size:13.5px;color:var(--paper-2);align-items:flex-start;line-height:1.45}
#flow .price-card li svg{width:16px;height:16px;flex:none;color:var(--flame);margin-top:2px}

/* the install "free survey" line — longer than a single price, so it
   steps down and may wrap; clamp keeps 390px flawless */
#flow .price-card .pc-price.pc-range{font-size:clamp(21px,6.8vw,28px);overflow-wrap:anywhere}
#flow .price-card .pc-price.pc-range small{display:block;margin-top:4px}
/* the two honest routes (system / heat-only → keep it or go combi) */
#flow .price-card .pc-routes{position:relative;display:flex;flex-direction:column;gap:10px}
#flow .price-card .pc-routes span{display:flex;flex-direction:column;gap:1px;font-size:13px;color:var(--steel-2);line-height:1.45}
#flow .price-card .pc-routes span b{font-family:var(--mono);font-weight:600;font-size:22px;letter-spacing:.02em;color:var(--gold);
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(242,195,104,.1)}
#flow .price-card .pc-routes span+span{padding-top:10px;border-top:1px dashed rgba(242,195,104,.32)}

/* the credit arithmetic — the "comes off the repair" promise as one
   visceral equation, stamped inside the dark price card */
#flow .price-card .credit-math{margin-top:14px;padding-top:13px;border-top:1px dashed rgba(242,195,104,.32);
  position:relative;display:flex;flex-direction:column;gap:3px}
#flow .price-card .credit-math b{font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--gold)}
#flow .price-card .credit-math span{font-size:12.5px;color:var(--steel-2);line-height:1.5}

/* one quiet trust line under a commit button — real facts only. Colour
   darkened from --steel (#655c4d, ~5.5:1) to #524939 (~6.6:1 on --paper) so
   this smallest print keeps a comfortable margin over the 4.5:1 floor. */
.trust-inline{margin-top:var(--fg-head);font-size:12px;color:#524939;text-align:center;line-height:1.55}
.trust-inline b{color:var(--ink)}

/* booking-screen microcopy — the honest money line (£39 / no-upfront, or a
   planned job's price), kept to a whisper so the three-field money screen
   never needs a scroll. Replaces the old dark price-card. #524939 clears the
   4.5:1 contrast floor for this smallest print. */
.book-fine{margin-top:var(--fg-nest);font-size:12.5px;color:#524939;line-height:1.55}
.book-fine b{color:var(--ink)}
.book-ccr{margin-top:var(--fg-head)}

/* warranty redirect card */
.warranty-card{margin-top:var(--fg-step);background:#fff9ec;border:1.5px solid var(--gold);border-radius:var(--rad);padding:17px;font-size:14px;line-height:1.6}
.warranty-card .wc-h{display:block;font-family:var(--disp);font-weight:600;font-size:17px;margin-bottom:6px}
.warranty-card a{color:var(--ember-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   DANGER TAKEOVERS — the whole colour temperature shifts.
   Gas / CO: deep oxblood, candle-lit — urgent but steadying.
   Pouring water (.scr-cold): deep cold slate — the cold palette's
   one moment to lead. Never alarm-red panic.
   ============================================================ */
.scr-danger{width:100%;max-width:none;min-height:100%;margin:0;padding:0;color:#fff;animation:none;
  background:radial-gradient(120% 90% at 50% -20%,rgba(246,163,60,.16),transparent 55%),
    linear-gradient(170deg,#5c1710 0%,var(--danger-deep) 45%,#2f0a06 100%)}
.dgr-inner{width:min(660px,100%);margin-inline:auto;padding:clamp(24px,5vw,48px) clamp(16px,4vw,24px) 48px}
.dgr-flag{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:8px 16px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.dgr-flag .pulse{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.5)}
.scr-danger h2{font-family:var(--disp);font-weight:600;font-size:clamp(29px,6.4vw,42px);line-height:1.03;margin-top:var(--fg-nest);letter-spacing:-.02em}
.scr-danger .dgr-lead{font-size:17.5px;font-weight:600;line-height:1.55;margin-top:var(--fg-head)}
.dgr-list{list-style:none;margin-top:var(--fg-step);display:flex;flex-direction:column;gap:12px}
.dgr-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;background:rgba(255,255,255,.08);border-radius:14px;padding:14px 16px}
.dgr-list li svg{width:22px;height:22px;flex:none;margin-top:2px}
.dgr-list b{color:#fff}
.dgr-list small{display:block;font-size:13px;opacity:.85;margin-top:2px}
.btn-call{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:66px;border-radius:18px;border:0;cursor:pointer;
  background:#fff;color:var(--danger-deep);font-size:19px;font-weight:800;margin-top:var(--fg-step);text-align:center;line-height:1.25;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55)}
.btn-call svg{width:22px;height:22px}
.btn-call[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn-call.secondary{background:rgba(255,255,255,.13);color:#fff;min-height:56px;font-size:15.5px;border:1.5px solid rgba(255,255,255,.35);box-shadow:none}
.dgr-check{display:flex;gap:12px;align-items:center;margin-top:var(--fg-step);background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);border-radius:14px;padding:15px 16px;cursor:pointer;min-height:56px}
.dgr-check input{width:24px;height:24px;flex:none;accent-color:#fff;cursor:pointer}
.dgr-check span{font-size:15.5px;font-weight:700}
.dgr-after{margin-top:var(--fg-break);padding-top:var(--fg-step);border-top:1px solid rgba(255,255,255,.22);font-size:13.5px;line-height:1.6;opacity:.95}
.dgr-after button{margin-top:var(--fg-head)}
.scr-danger .ghostlink{color:rgba(255,255,255,.78)}
.scr-danger .ghostlink:hover{color:#fff}
.dgr-med{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);border-radius:14px;padding:16px;margin-top:var(--fg-step)}
.dgr-med b{display:block;font-size:15px;margin-bottom:8px}
.dgr-med .medrow{display:flex;gap:10px;margin-top:10px}
.dgr-med .medrow a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fff;color:var(--danger-deep);
  border-radius:12px;min-height:60px;font-weight:800;font-size:19px;text-align:center;font-family:var(--mono)}
.dgr-med .medrow a small{font-size:11px;font-weight:600;line-height:1.2;font-family:var(--body)}
/* pouring water — the cold takeover */
.scr-danger.scr-cold{background:radial-gradient(120% 90% at 50% -20%,rgba(127,163,184,.18),transparent 55%),
    linear-gradient(170deg,#24404f 0%,var(--cold-deep) 55%,#0e181e 100%)}
.scr-danger.scr-cold .btn-call{color:var(--cold-deep)}
.scr-danger.scr-cold .dgr-med .medrow a{color:var(--cold-deep)}

/* emergency (ink + ember — urgent but OURS) */
.scr-emergency{width:100%;max-width:none;min-height:100%;margin:0;padding:0;color:var(--paper);
  background:radial-gradient(110% 80% at 85% -15%,rgba(227,93,37,.26),transparent 58%),
    linear-gradient(170deg,#211510 0%,var(--ink) 60%,#1a1009 100%)}
.scr-emergency .dgr-inner{padding-top:clamp(24px,5vw,48px)}
.scr-emergency .scr-k{color:var(--flame)}
.scr-emergency h2{color:#fff;font-family:var(--disp);font-weight:600;font-size:clamp(28px,6vw,40px);line-height:1.04;letter-spacing:-.02em;margin-top:6px}
.scr-emergency .scr-sub{color:var(--steel-2)}
.scr-emergency .scr-sub b,.scr-danger .scr-sub b{color:var(--paper)}
.scr-emergency .f-field input,.scr-emergency .f-field textarea{background:var(--ink-2);border-color:var(--line-d);color:var(--paper)}
.scr-emergency .f-field label{color:var(--steel-2)}
.scr-emergency .consent{background:var(--ink-2);border-color:var(--line-d)}
.scr-emergency .consent span{color:var(--steel-2)}.scr-emergency .consent b{color:var(--paper)}
/* the ONE life-safety tap — near the top, shown once (never buried/tripled) */
.em-safety{display:flex;align-items:center;gap:13px;margin-top:var(--fg-step);
  background:rgba(194,51,31,.15);border:1.5px solid rgba(246,163,60,.5);border-radius:16px;
  padding:13px 15px;text-decoration:none;color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px -18px rgba(227,93,37,.55);
  transition:border-color .15s ease,background .15s ease}
.em-safety:hover,.em-safety:focus-visible{border-color:var(--flame);background:rgba(194,51,31,.22)}
.em-safety-ic{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--flame);color:#231409}
.em-safety-ic svg{width:22px;height:22px}
.em-safety-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.em-safety-tx>b{font-size:15px;color:#fff}
.em-safety-tx span{font-size:13.5px;color:var(--steel-2)}
.em-safety-tx span b{color:var(--paper);font-weight:700}
.em-safety-go{flex:none;color:var(--flame)}.em-safety-go svg{width:20px;height:20px}
/* the printed 0800 number must never break mid-number */
.em-safety-tx span b{white-space:nowrap}
/* dark-ground form craft: errors, focus and placeholders all tuned for the
   ink ground — the paper-palette values (danger red, ember ring, UA-default
   placeholder grey) sit at or under 3:1 here and effectively vanish. */
.scr-emergency .f-err,.scr-danger .f-err{color:#ffb3a0}
.scr-emergency .f-field.bad input,.scr-emergency .f-field.bad textarea{border-color:#ff9b83}
.scr-emergency .f-field input:focus,.scr-emergency .f-field textarea:focus{outline-color:var(--gold)}
.scr-emergency .f-field input::placeholder,.scr-emergency .f-field textarea::placeholder{color:var(--steel-2);opacity:.75}
/* rhythm: one clear beat between "what happens now" and the first question —
   the nest gap reads as part of the paragraph, not the start of the form */
.scr-emergency .scr-sub + .f-field{margin-top:var(--fg-step)}
/* call-out tiers — scannable rows instead of a run-on price sentence */
.em-tiers{margin-top:var(--fg-step);background:var(--ink-2);border:1px solid var(--line-d);border-radius:14px;padding:4px 16px 14px}
.em-tiers-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);font-weight:500;margin:13px 0 2px}
.em-tier{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line-d)}
.em-tier:first-of-type{border-top:0}
.em-tier span{font-size:14.5px;color:var(--steel-2)}
.em-tier b{font-family:var(--disp);font-size:19px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.em-tiers-note{font-size:12px;color:var(--steel-2);margin-top:9px}

/* confirmation + the self-fix WIN — a small sunrise */
.done-ic{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--ember),var(--flame));display:flex;align-items:center;justify-content:center;margin-bottom:var(--fg-step);
  box-shadow:0 16px 38px -14px rgba(200,70,14,.75),0 0 44px -6px rgba(246,163,60,.45)}
.done-ic svg{width:36px;height:36px;color:#2a1503}
/* the official Staffy mark is ember-orange, so it sits on paper, not on the
   ember gradient (orange-on-orange would vanish) */
.done-ic-mark{background:#fffdf7;border:1px solid var(--line)}
.done-ic-mark img{width:40px;height:40px;display:block}
.scr-win{position:relative}
.scr-win:before{content:"";position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:min(560px,90%);height:340px;pointer-events:none;
  background:radial-gradient(55% 55% at 50% 30%,rgba(246,163,60,.26),transparent 70%)}
.scr-win .done-ic{margin-inline:0}
.done-recap{margin-top:var(--fg-step);background:#fffdf7;border:1px solid var(--line);border-radius:var(--rad);padding:17px;font-size:14px;box-shadow:var(--shadow-soft)}
.done-recap dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);font-weight:500;margin-top:var(--fg-head)}
.done-recap dt:first-child{margin-top:0}
.done-recap dd{font-weight:600;margin-top:2px;line-height:1.5}
.scr-emergency .done-recap{background:var(--ink-2);border-color:var(--line-d)}
.scr-emergency .done-recap dd{color:var(--paper)}

/* make grid */
.makegrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:var(--fg-nest)}
.make{border:1.5px solid var(--line);background:#fffdf7;border-radius:12px;min-height:58px;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--ink-2);padding:8px;transition:.18s}
.make:hover{border-color:var(--copper)}
.make.sel{border-color:var(--ember);box-shadow:0 0 0 1.5px var(--ember)}

/* spinner on submit */
.spin{width:18px;height:18px;border:2.5px solid rgba(42,21,3,.3);border-top-color:#2a1503;border-radius:50%;animation:spin .7s linear infinite;flex:none}
.scr-danger .spin,.scr-emergency .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- responsive (flow-scoped; moved from staffy.css) ---------- */
@media(max-width:640px){
  .flow-progress .fp-label{display:none}
  .flow-progress .fp-dot{width:18px}
  .flow-trust{font-size:10px}
  .makegrid{grid-template-columns:1fr 1fr}
}
/* smallest phones (≤380px, e.g. 360-wide Androids): the sticky header carries
   the brand lockup + 5 progress dots + the 48px close in one non-wrapping row.
   At 360 that computes to ~325px against a ~331px inner box — under 6px of
   slack, close enough that font-render variance could clip the close button or
   (without the nowrap above) wrap the wordmark to a broken-looking 2nd line.
   Reclaim ~22px here by tightening the dot gap/size and the header gutters, so
   the row always fits with room to spare. No visual change at 390/430. */
@media(max-width:380px){
  .flow-top{gap:10px;padding-inline:12px}
  .flow-progress{gap:5px}
  .flow-progress .fp-dot{width:16px}
}
/* the emergency safety card on the narrowest phones (320–360): the 42px icon
   + 13px gaps + 20px chevron leave the text ~170px — "Smell gas or feel
   unsafe?" wraps twice and the row reads cramped. Tighten the furniture and
   drop the decorative chevron (the whole card is the tap target; nothing is
   lost) so the words keep the room. */
@media(max-width:360px){
  .em-safety{gap:10px;padding:12px 13px}
  .em-safety-ic{width:38px;height:38px;border-radius:10px}
  .em-safety-go{display:none}
  .em-tier b{font-size:18px}
  /* the router's emergency bar, same crunch: the 38px icon + gaps + chevron
     leave the label ~150px, so "Emergency — no heat…" cramps. Tighten the
     furniture and drop the decorative chevron (the whole bar is the tap target;
     min-height stays var(--tap), so nothing is lost). */
  .router-emergency{gap:10px;padding:12px 13px}
  .router-emergency .re-go{display:none}
}

/* ============================================================
   TOUCH CRAFT PASS (2026-08) — one-handed feel for the flow.
   Declared here (not staffy.css) so town pages get it too.
   ============================================================ */
#flow{-webkit-tap-highlight-color:transparent}
#flow button,#flow label,#flow a{touch-action:manipulation}

/* every pressable answers the thumb */
#flow .chip{transition:border-color .18s,transform .15s,background .18s}
#flow .chip:active{transform:scale(.96)}
.make{transition:border-color .18s,transform .15s,box-shadow .18s}
.make:active{transform:scale(.96)}
.slot-day{transition:border-color .18s,transform .15s}
.slot-day:active{transform:scale(.96)}
.btn-call{transition:transform .15s,box-shadow .2s}
.btn-call:active{transform:scale(.98)}
.dgr-check{transition:transform .15s,border-color .18s}
.dgr-check:active{transform:scale(.985)}
.photo-btn{transition:background .18s,border-color .18s,color .18s,transform .15s}
.photo-btn:active{transform:scale(.985)}
.skipbook,.ghostlink{transition:color .15s}

/* primary actions inside screens — a full 56px thumb bar */
.scr-actions{gap:12px}
.scr-actions .btn{min-height:56px}

/* the last screen's content never hides under the home indicator */
.scr{padding-bottom:max(44px,calc(28px + env(safe-area-inset-bottom)))}
.dgr-inner{padding-bottom:max(48px,calc(30px + env(safe-area-inset-bottom)))}

/* ============================================================
   v4 CRO PASS (2026-08) — inline booking rows + post-book extras
   ============================================================ */
/* optional questions folded inline (book screen + extras card) */
.inline-q{margin-top:var(--fg-step)}
.inline-q[hidden]{display:none}
.inline-q .iq-h{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45}
.inline-q .iq-h small{font-weight:400;color:var(--steel);font-size:12.5px}
.inline-q .chips{margin-top:var(--fg-tight)}
/* own / rent — a two-way segment, thumb-sized */
.seg{display:flex;gap:9px;margin-top:var(--fg-tight)}
.seg-btn{flex:1;border:1.5px solid var(--line);background:#fffdf7;border-radius:14px;min-height:52px;padding:12px 10px;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--ink);transition:border-color .18s,transform .15s,background .18s}
.seg-btn:hover{border-color:var(--copper)}
.seg-btn:active{transform:scale(.97)}
.seg-btn.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* post-book "arrive-ready" extras — optional, never blocking */
.extras{margin-top:var(--fg-step);background:#fffdf7;border:1.5px solid var(--line);border-radius:var(--rad-lg);padding:18px;text-align:left;box-shadow:var(--shadow-soft)}
.extras .ex-h{font-family:var(--disp);font-weight:600;font-size:18.5px;line-height:1.25}
.extras .ex-sub{font-size:13.5px;color:var(--steel);margin-top:var(--fg-tight);line-height:1.55}
.extras .inline-q{margin-top:var(--fg-nest)}
.extras .scr-actions{margin-top:var(--fg-step)}
.extras .photo-cap{margin-top:var(--fg-nest)}

/* ---------- the card step (pay gate): Stripe's Payment Element host ----------
   The Element renders in its own iframe — we only own the box around it. A
   min-height reserves the row while Stripe paints, so the "Secure my slot"
   button doesn't jump up and then back down as the form appears. */
.pay-el{margin:var(--fg-step) 0 4px;min-height:200px}
.pay-el:empty{min-height:0}

/* ---------- reduced motion: the overlay still, instantly ---------- */
@media(prefers-reduced-motion:reduce){
  #flow *,#flow *:before,#flow *:after{animation:none !important;transition:none !important}
  #flow:not([hidden]){animation:none !important}
}