/* ======================================================================
   v84: BOOK A CALL as an overlay. The booking flow from booking/booking-direction-v1.html (same design and code), namespaced
   .bk-* so nothing clashes with the page (.slot, .rx, .pn, .wa ...). Desktop: a centred grey cell (#171717, the slim info
   panel and the flow panel as #0b0b0b panels seated 8px in), 6px corners, a hairline, max 1120 wide, the page dimmed and
   blurred behind. Phones (<640): a full height bottom sheet. Every "Book a call" CTA opens it; /#book links to it.
   ====================================================================== */
.bk { --bk-hc: #171717; --bk-pn: #0b0b0b; --bk-ln: #1e1e1e; --bk-ln2: #2a2a2a; --bk-text: #f5f5f3; --bk-text2: rgba(245, 245, 243, .78);
  --bk-muted: rgba(245, 245, 243, .5); --bk-faint: rgba(245, 245, 243, .42); --bk-off: rgba(245, 245, 243, .24); --bk-dot: #f5f5f3;
  --bk-ease: cubic-bezier(.22, 1, .36, 1); --bk-ring: 0 0 0 3px rgba(255, 255, 255, .08);
  --bk-display: "Articulat CF", "Inter Display", Inter, system-ui, sans-serif; --bk-sans: "Inter Display", Inter, system-ui, -apple-system, sans-serif;
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; font-family: var(--bk-sans); font-size: 16px; line-height: 1.5; color: var(--bk-text);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
.bk[hidden] { display: none !important; }
.bk [hidden] { display: none !important; }
:where(.bk) *, :where(.bk) *::before, :where(.bk) *::after { box-sizing: border-box; }
:where(.bk) :is(h2, h3, p, ol, ul, dl, dd, fieldset) { margin: 0; padding: 0; }
:where(.bk) :is(ol, ul) { list-style: none; }
:where(.bk) fieldset { border: 0; min-width: 0; }
:where(.bk) a { color: inherit; text-decoration: none; }
:where(.bk) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.bk) button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.bk) svg { display: block; }
.bk :focus { outline: none; }
.bk :focus-visible { outline: 2px solid rgba(245, 245, 243, .34); outline-offset: 2px; }
.bk-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* the page behind: dimmed and blurred; scroll locked (the scrollbar's width goes back as padding, so nothing moves) */
.bk-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); }   /* v85: lighter, so the page shows through */
html.bk-lock { overflow: hidden; }
html.bk-lock body { overflow: hidden; padding-right: var(--bk-sbw, 0px); }
/* heavy page motion pauses while the overlay is open (the scripted loops pause too, see the script) */
html.bk-still main *, html.bk-still header.nav *, html.bk-still footer * { animation-play-state: paused !important; }   /* v-smooth: set once the fold has opened */

/* the dialog: the grey cell */
/* v85: the dialog is as tall as its content (the taller of the info panel and the current step), up to 100vh - 64px; the
   step change animates the stage's height, so the dialog follows with the same easing; shorter steps sit centred */
.bk-dlg { position: relative; display: flex; flex-direction: column; width: min(1120px, calc(100vw - 64px)); height: auto; max-height: calc(100vh - 64px);
  border-radius: 6px; background: var(--bk-hc); box-shadow: inset 0 0 0 1px var(--bk-ln), 0 40px 120px -24px rgba(0, 0, 0, .8); overflow: hidden; overflow: clip;
  transform-origin: 50% 50%; }
/* v-smooth: the dialog and the backdrop sit on their own compositor layers from the moment the overlay shows, so the fold's
   first frame does not wait for a layer to be made (the overlay is display:none when shut, so this costs nothing then) */
.bk-dlg { will-change: transform, opacity; backface-visibility: hidden; }
.bk-bd { will-change: opacity; }
.bk-grab { display: none; }
.bk-x { position: absolute; z-index: 3; top: 28px; right: 28px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--bk-text2);
  box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #0e0e0e; transition: background-color 200ms var(--bk-ease), box-shadow 200ms var(--bk-ease), color 200ms var(--bk-ease); }
.bk-x:hover { background: #151515; box-shadow: inset 0 0 0 1px #3a3a3a; color: var(--bk-text); }
.bk-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bk-sc { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.bk-cell { min-height: 100%; padding: 8px; display: grid; grid-template-columns: minmax(0, 344px) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.bk-pn { background: var(--bk-pn); border-radius: 6px; min-width: 0; }

/* ---------- left: the slim info panel */
.bk-info { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.bk-lbl { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); }
.bk-t { font-family: var(--bk-display); font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; color: var(--bk-text); }
.bk-t:focus-visible { outline: none; }
.bk-ts { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--bk-muted); }
.bk-info .bk-lbl { margin-bottom: 16px; }
.bk-how { display: grid; gap: 12px; }
.bk-how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; font-size: 16px; line-height: 24px; color: var(--bk-text2); }
.bk-n { width: 28px; height: 28px; margin-top: -2px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--bk-text);
  box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #111; font-variant-numeric: tabular-nums; }
.bk-alt { padding-top: 24px; border-top: 1px solid var(--bk-ln); margin-top: auto; }
.bk-alt .bk-lbl { margin-bottom: 8px; }
.bk-alt-p { color: var(--bk-text2); margin-bottom: 16px; }
.bk-wa { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; overflow: hidden;
  border-radius: 999px; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: box-shadow 450ms var(--bk-ease); }
.bk-wa svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.bk-wa-fx { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: inherit; border-radius: inherit;
  background: #25D366; color: #0b0b0b; pointer-events: none; white-space: nowrap; clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 450ms var(--bk-ease); }
.bk-wa:hover .bk-wa-fx, .bk-wa:focus-visible .bk-wa-fx { clip-path: inset(0 0 0 0 round 999px); }
.bk-wa:hover, .bk-wa:focus-visible { box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .6), 0 0 24px -6px rgba(37, 211, 102, .45); }
.bk-mail { margin-top: 16px; color: var(--bk-muted); font-size: 16px; }
.bk-mail a { color: var(--bk-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245, 245, 243, .3); transition: text-decoration-color 200ms var(--bk-ease); }
.bk-mail a:hover { text-decoration-color: var(--bk-text); }

/* ---------- right: the flow */
.bk-flow { position: relative; padding: 24px 32px 24px; display: flex; flex-direction: column; overflow: hidden; }
.bk-prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bk-ln); }
.bk-prog i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); border-radius: 0 1px 1px 0;
  background: linear-gradient(90deg, rgba(212, 212, 212, .3), #d4d4d4 72%, #fff); transition: transform 700ms var(--bk-ease); }   /* v86: no lime, light grey on the #1e1e1e track */
.bk-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 16px; padding-right: 56px; }
.bk-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; margin-left: -10px; border-radius: 999px; color: var(--bk-text2); font-size: 15px; font-weight: 500;
  transition: background-color 200ms var(--bk-ease), color 200ms var(--bk-ease), opacity 300ms var(--bk-ease); }
.bk-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--bk-ease); }
.bk-back:hover { background: rgba(255, 255, 255, .05); color: var(--bk-text); }
.bk-back:hover svg { transform: translateX(-2px); }
.bk-back.off { opacity: 0; visibility: hidden; }
.bk-count { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); font-variant-numeric: tabular-nums; }

.bk-stage { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; }
.bk-stage.busy { overflow: hidden; transition: height 500ms var(--bk-ease); }
.bk-step { position: relative; }
.bk-step:not(.leaving) { margin-block: auto; }   /* v85: a step shorter than the panel sits centred in it */
.bk-step.leaving { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.bk-step.entering { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); }
.bk-step.entering.in { opacity: 1; transform: none; transition: opacity 360ms ease-out 80ms, transform 520ms var(--bk-ease); }
.bk-step.leaving.out { opacity: 0; transform: translateX(calc(var(--dir, 1) * -28px)); transition: opacity 220ms ease-out, transform 420ms var(--bk-ease); }

.bk-q { font-family: var(--bk-display); font-weight: 500; font-size: 36px; line-height: 40px; letter-spacing: -0.02em; color: var(--bk-text); text-wrap: balance; }
.bk-q:focus-visible { outline: none; }
.bk-qs { margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--bk-muted); max-width: 560px; }

/* quiz options: dark cards, a hairline, a white ring and dot when picked. No cursor glow and no accent colour, like the rest of the
   site (Ajay, 28 Oct 2026). */
.bk-opts { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-opts > .bk-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bk-opt { display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; align-items: center; column-gap: 16px; min-height: 76px; padding: 20px 24px; text-align: left;
  border-radius: 6px; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln); transition: box-shadow 250ms var(--bk-ease), background-color 250ms var(--bk-ease), transform 250ms var(--bk-ease); }
.bk-opt:hover { box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #141414; }
/* v85: desktops: the options are one column of larger cards, so the questions fill the panel the info sets; the info panel
   drops the WhatsApp intro line (as short screens already did) */
@media (min-width: 1024px) { .bk-opts { grid-template-columns: minmax(0, 1fr); } .bk-opt { min-height: 84px; } .bk-alt-p { display: none; } }
@media (min-width: 1024px) and (max-height: 760px) { .bk-opt { min-height: 72px; padding-top: 16px; padding-bottom: 16px; } }
.bk-opt:active { transform: scale(.995); }
.bk-opt-k { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--bk-muted); box-shadow: inset 0 0 0 1px var(--bk-ln2);
  font-variant-numeric: tabular-nums; transition: color 250ms var(--bk-ease), box-shadow 250ms var(--bk-ease); }
.bk-opt-t { font-size: 18px; line-height: 26px; font-weight: 500; color: var(--bk-text); letter-spacing: -0.005em; }
.bk-opt-r { position: relative; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px #3a3a3a; transition: box-shadow 250ms var(--bk-ease); }
.bk-opt-r::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bk-dot); transform: scale(0); transition: transform 300ms var(--bk-ease); }
.bk-opt[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--bk-text); background: #111; }
.bk-opt[aria-checked="true"] .bk-opt-k { color: var(--bk-text); box-shadow: inset 0 0 0 1px rgba(245, 245, 243, .4); }
.bk-opt[aria-checked="true"] .bk-opt-r { box-shadow: inset 0 0 0 1px var(--bk-text); }
.bk-opt[aria-checked="true"] .bk-opt-r::after { transform: scale(1); }
.bk-opt:focus-visible { outline-offset: 3px; }
.bk-hint { margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--bk-faint); }
@media (hover: none) { .bk-hint { display: none; } }

/* inputs: 16px text, a soft grey focus ring */
.bk-in { width: 100%; height: 48px; padding: 0 16px; border-radius: 6px; border: 0; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln2); color: var(--bk-text); font-size: 16px;
  transition: box-shadow 200ms var(--bk-ease), background-color 200ms var(--bk-ease); -webkit-appearance: none; appearance: none; }
.bk-in::placeholder { color: var(--bk-faint); }
.bk-in:hover { box-shadow: inset 0 0 0 1px #343434; }
.bk-in:focus, .bk-in:focus-visible { outline: none; background: #111; box-shadow: inset 0 0 0 1px #4a4a4a, var(--bk-ring); }
.bk-in[aria-invalid="true"] { box-shadow: inset 0 0 0 1px rgba(245, 245, 243, .55); }
textarea.bk-in { height: auto; min-height: 0; padding: 10px 16px; line-height: 24px; resize: none; }
.bk-msg { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--bk-text); }
.bk-msg svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* the one loud control: the light pill */
.bk-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; flex: none;
  background: linear-gradient(#f7f7f5, #e4e4e2); color: #0b0b0b; font-size: 16px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); transition: filter 200ms var(--bk-ease), transform 200ms var(--bk-ease); }
.bk-btn:hover { filter: brightness(1.04); }
.bk-btn:active { transform: scale(.985); }
.bk-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--bk-ease); }
.bk-btn:hover svg { transform: translateX(3px); }
.bk-btn[disabled] { cursor: progress; filter: none; opacity: .85; }
.bk-gb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; color: var(--bk-text); font-size: 15px; font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); white-space: nowrap; transition: box-shadow 200ms var(--bk-ease), background-color 200ms var(--bk-ease); }
.bk-gb:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bk-gb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-lnk { color: var(--bk-text2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245, 245, 243, .3); font-size: 16px; font-weight: 500;
  transition: color 200ms var(--bk-ease), text-decoration-color 200ms var(--bk-ease); }
.bk-lnk:hover { color: var(--bk-text); text-decoration-color: var(--bk-text); }

/* ---------- not a fit */
.bk-nf { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.bk-nf a { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 6px; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln); transition: box-shadow 250ms var(--bk-ease); }
.bk-nf a:hover { box-shadow: inset 0 0 0 1px var(--bk-ln2); }
.bk-nf b { font-weight: 500; font-size: 18px; line-height: 26px; }
.bk-nf span { color: var(--bk-muted); font-size: 16px; }
.bk-nf-any { margin-top: 32px; }

/* ---------- calendar */
.bk-cal-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.bk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-tz { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 280px; padding: 0 12px 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bk-ln2);
  background: #0e0e0e; color: var(--bk-text); font-size: 15px; font-weight: 500; cursor: pointer; transition: box-shadow 200ms var(--bk-ease), background-color 200ms var(--bk-ease); }
.bk-tz:hover, .bk-tz[aria-expanded="true"] { box-shadow: inset 0 0 0 1px #343434; background: #111; }
.bk-tz:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #4a4a4a, var(--bk-ring); }
.bk-cs svg { flex: none; pointer-events: none; fill: none; stroke: var(--bk-muted); stroke-linecap: round; stroke-linejoin: round; }
.bk-tz .gl { width: 16px; height: 16px; stroke-width: 1.4; }
.bk-cs .cv { width: 12px; height: 12px; stroke-width: 1.6; transition: transform 250ms var(--bk-ease); }
.bk-cs[aria-expanded="true"] .cv { transform: rotate(180deg); }
.bk-cs-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v86: the custom dropdown (time zone, and the two chips on the details step). A dark #0b0b0b panel, #1e1e1e hairline, 6px
   corners, a soft shadow; for the time zone a search field on top and grouped zones under grey caps headers; each row the
   city (white), its current local time and UTC offset (grey) and a tick on the selected one. It opens with a scale from .98
   and a fade on the homepage ease. It lives in the dialog (so nothing clips it), placed under its trigger; on phones (v87)
   it is a panel nested inside the booking sheet with a back arrow header (see the phone block). */
.bk-pop { position: absolute; z-index: 20; left: 0; top: 0; width: 336px; max-width: calc(100% - 32px); display: flex; flex-direction: column; border-radius: 6px; background: #0b0b0b;
  box-shadow: inset 0 0 0 1px var(--bk-ln), 0 24px 64px -16px rgba(0, 0, 0, .85), 0 4px 16px rgba(0, 0, 0, .4); transform-origin: 50% 0; overflow: hidden; }
.bk-pop[hidden] { display: none; }
.bk-pop.sm { width: auto; min-width: 240px; }
.bk-pop-hd { display: none; }
.bk-pop-s { position: relative; flex: none; padding: 8px; border-bottom: 1px solid var(--bk-ln); }
.bk-pop-s svg { position: absolute; left: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--bk-muted); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.bk-pop-s input { width: 100%; height: 40px; padding: 0 12px 0 38px; border: 0; border-radius: 6px; background: #111; box-shadow: inset 0 0 0 1px var(--bk-ln2); color: var(--bk-text); font-size: 16px;
  -webkit-appearance: none; appearance: none; transition: box-shadow 200ms var(--bk-ease); }
.bk-pop-s input::placeholder { color: var(--bk-faint); }
.bk-pop-s input:focus { outline: none; box-shadow: inset 0 0 0 1px #3a3a3a; }
.bk-pop-l { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 8px; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.bk-pop-g { padding: 12px 12px 4px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); }
.bk-pop-o { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background-color 150ms var(--bk-ease); }
.bk-pop-o.act { background: #161616; box-shadow: inset 0 0 0 1px #232323; }
.bk-pop-o .on { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--bk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-pop-o .om { flex: none; font-size: 14px; line-height: 20px; color: var(--bk-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-pop-o .ot { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--bk-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bk-pop-o[aria-selected="true"] .ot { opacity: 1; }
.bk-pop-o[hidden], .bk-pop-gr[hidden] { display: none; }
.bk-pop-no { padding: 16px 12px; font-size: 14px; line-height: 20px; color: var(--bk-muted); }
.bk-pop-sc { position: absolute; z-index: 19; inset: 0; background: rgba(0, 0, 0, .55); }
.bk-pop-sc[hidden] { display: none; }
.bk-seg { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #0e0e0e; }
.bk-seg button { height: 34px; min-width: 48px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--bk-muted); transition: background-color 250ms var(--bk-ease), color 250ms var(--bk-ease); }
.bk-seg button[aria-pressed="true"] { background: #232323; color: var(--bk-text); }
.bk-seg button:hover { color: var(--bk-text); }
.bk-seg button:focus-visible { outline-offset: 0; }

.bk-cal-bd { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.bk-mo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk-mo-t { font-family: var(--bk-display); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.bk-mo-t.roll { font-size: 20px; white-space: nowrap; }   /* v85: the rolling 5 week label ("October / November 2026") on one line */
.bk-mo-b { display: flex; gap: 4px; }
.bk-ib { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--bk-text2); box-shadow: inset 0 0 0 1px var(--bk-ln2);
  transition: background-color 200ms var(--bk-ease), box-shadow 200ms var(--bk-ease), opacity 200ms var(--bk-ease); }
.bk-ib:hover:not(:disabled) { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px #3a3a3a; color: var(--bk-text); }
.bk-ib:disabled { opacity: .3; cursor: default; }
.bk-ib svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk-grid { display: grid; gap: 4px; }
.bk-grid [role="row"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-wd { height: 28px; display: grid; place-items: center; font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--bk-muted); }
.bk-dc { aspect-ratio: 1; min-height: 40px; }
.bk-day { position: relative; width: 100%; height: 100%; border-radius: 6px; display: grid; place-items: center; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--bk-off); transition: background-color 200ms var(--bk-ease), box-shadow 200ms var(--bk-ease), color 200ms var(--bk-ease); }
.bk-day.av { color: var(--bk-text); box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #0e0e0e; }
.bk-day.av:hover { box-shadow: inset 0 0 0 1px #4a4a4a; background: #131313; }
.bk-day[aria-disabled="true"] { cursor: default; }
.bk-day.today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--bk-dot); }
.bk-day[aria-selected="true"] { background: linear-gradient(#f7f7f5, #e4e4e2); color: #0b0b0b; box-shadow: none; }
.bk-day:focus-visible { outline-offset: 1px; }

.bk-slots-col { min-width: 0; }
.bk-sl-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 12px; }
.bk-sl-t { font-family: var(--bk-display); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.bk-sl-n { font-size: 14px; color: var(--bk-muted); white-space: nowrap; }
.bk-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--bk-ln); color: var(--bk-muted); font-size: 16px; }
.bk-empty svg { width: 20px; height: 20px; fill: none; stroke: var(--bk-muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* a slot: picking one gives it the white ring and a small lime dot; nothing else in the grid moves */
.bk-slot { position: relative; height: 48px; border-radius: 999px; display: grid; place-items: center; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--bk-text);
  background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln2); transition: box-shadow 250ms var(--bk-ease), background-color 250ms var(--bk-ease); }
.bk-slot::after { content: ""; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--bk-dot); transform: scale(0); transition: transform 300ms var(--bk-ease); }
.bk-slot:hover { box-shadow: inset 0 0 0 1px #3a3a3a; }
.bk-slot[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--bk-text); background: #111; }
.bk-slot[aria-pressed="true"]::after { transform: scale(1); }
/* the Continue button: its own reserved row under the list, so nothing below jumps; it fades and rises in, opening out from the picked slot */
.bk-go-row { position: relative; height: 48px; margin-top: 16px; }
.bk-go { position: absolute; inset: 0; width: 100%; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(#f7f7f5, #e4e4e2); color: #0b0b0b; font-size: 16px; font-weight: 500; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 300ms var(--bk-ease), transform 420ms var(--bk-ease), visibility 0s linear 420ms; }
.bk-go.on { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--bk-ease), transform 480ms var(--bk-ease), visibility 0s; }
.bk-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--bk-ease); }
.bk-go:hover svg { transform: translateX(3px); }
.bk-go:focus-visible { outline-offset: 3px; }
.bk-foot { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--bk-faint); }

/* phone day strip and the sheet's sticky button (hidden on desktop) */
.bk-strip-wrap { display: none; }
.bk-mbar { display: none; }

/* ---------- details: compact, two columns; the quiz answers are small editable chips, not asked again */
.bk-sum { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 12px; border-radius: 6px; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln); }
.bk-sum-ic { width: 32px; height: 32px; flex: none; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--bk-ln2); }
.bk-sum-ic svg { width: 16px; height: 16px; fill: none; stroke: var(--bk-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-sum-t { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.bk-chips { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bk-ln2); background: #0e0e0e;
  font-size: 14px; font-weight: 500; color: var(--bk-text); cursor: pointer; transition: box-shadow 200ms var(--bk-ease); }
.bk-chip:hover { box-shadow: inset 0 0 0 1px #3a3a3a; }
.bk-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #4a4a4a, var(--bk-ring); }
.bk-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 1px #3a3a3a; }
.bk-chip .ck { padding-left: 14px; color: var(--bk-muted); font-weight: 500; white-space: nowrap; }
.bk-form { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bk-f { min-width: 0; }
.bk-f.w { grid-column: 1 / -1; }
.bk-f > label, .bk-f > legend { display: block; margin-bottom: 6px; padding: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--bk-muted); }
.bk-pair { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.bk-rad { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-rad label { position: relative; display: inline-flex; }
.bk-rad input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bk-rad span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--bk-text2);
  background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln2); white-space: nowrap; transition: box-shadow 200ms var(--bk-ease), color 200ms var(--bk-ease), background-color 200ms var(--bk-ease); }
.bk-rad span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bk-dot); transform: scale(0); margin-right: -12px; transition: transform 300ms var(--bk-ease), margin 300ms var(--bk-ease); }
.bk-rad label:hover span { box-shadow: inset 0 0 0 1px #3a3a3a; color: var(--bk-text); }
.bk-rad input:checked + span { box-shadow: inset 0 0 0 1px var(--bk-text); color: var(--bk-text); background: #111; }
.bk-rad input:checked + span::before { transform: scale(1); margin-right: 0; }
.bk-rad input:focus-visible + span { box-shadow: inset 0 0 0 1px #4a4a4a, var(--bk-ring); }
.bk-rad input:checked:focus-visible + span { box-shadow: inset 0 0 0 1px var(--bk-text), var(--bk-ring); }
.bk-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.bk-note { font-size: 14px; line-height: 20px; color: var(--bk-faint); }

/* ---------- confirmation */
.bk-ok-top { display: flex; align-items: center; gap: 24px; }
.bk-mark { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--bk-ln2); }
.bk-mark svg { width: 20px; height: 20px; fill: none; stroke: var(--bk-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk-mark .dot { position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--bk-dot); box-shadow: 0 0 0 3px var(--bk-pn); }
.bk-mark .ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(245, 245, 243, .5); opacity: 0; pointer-events: none; }
.bk-ok-p { margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--bk-muted); max-width: 620px; }
.bk-ok-p b { color: var(--bk-text); font-weight: 500; overflow-wrap: anywhere; }
.bk-ok-bd { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.bk-card { border-radius: 6px; background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln); }
.bk-card-hd { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--bk-ln); }
.bk-meet { width: 40px; height: 40px; border-radius: 6px; flex: none; display: grid; place-items: center; background: #151515; box-shadow: inset 0 0 0 1px var(--bk-ln2); }
.bk-meet svg { width: 22px; height: 22px; }
.bk-card-hd b { display: block; font-weight: 500; font-size: 16px; }
.bk-card-hd span { display: block; font-size: 14px; color: var(--bk-muted); }
.bk-rows { padding: 4px 24px; }
.bk-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 16px; }
.bk-rows div + div { border-top: 1px solid var(--bk-ln); }
.bk-rows dt { color: var(--bk-muted); }
.bk-rows dd { margin: 0; text-align: right; font-weight: 500; }
.bk-add { padding: 20px 24px; border-top: 1px solid var(--bk-ln); }
.bk-add .bk-lbl { margin-bottom: 12px; }
.bk-add-l { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-next .bk-lbl { margin-bottom: 16px; }
.bk-next ol { display: grid; }
.bk-next li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; border-top: 1px solid var(--bk-ln); color: var(--bk-text2); }
.bk-next li:last-child { border-bottom: 1px solid var(--bk-ln); }
.bk-next-wa { margin-top: 24px; }
.done-anim .bk-mark .dot { animation: bkDot 900ms var(--bk-ease) 200ms both; }
.done-anim .bk-mark .ring { animation: bkRing 1100ms var(--bk-ease) 260ms both; }
.done-anim .bk-rise { animation: bkRise 700ms var(--bk-ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes bkDot { 0% { transform: scale(0); } 45% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes bkRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes bkRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- short laptop screens (1280x720): a little tighter so the details step still fits without scrolling */
@media (min-width: 640px) and (max-height: 760px) {
  .bk-dlg { max-height: calc(100vh - 48px); }
  .bk-x { top: 24px; right: 24px; }
  .bk-info { padding: 24px; gap: 24px; }
  .bk-alt { padding-top: 20px; }
  .bk-alt-p { display: none; }
  .bk-flow { padding: 16px 28px 16px; }
  .bk-top { margin-bottom: 12px; }
  .bk-q { font-size: 32px; line-height: 36px; }
  .bk-opts { margin-top: 24px; }
  .bk-cal-bd { margin-top: 20px; }
  .bk-dc { min-height: 36px; }
  .bk-form { margin-top: 16px; gap: 12px 16px; }
  .bk-in { height: 44px; }
  textarea.bk-in { padding: 8px 16px; line-height: 22px; }
  .bk-ok-bd { margin-top: 24px; }
}
@media (max-width: 1023.98px) and (min-width: 640px) {
  .bk-cell { grid-template-columns: minmax(0, 1fr); }
  .bk-info { order: 2; }
  .bk-alt { margin-top: 0; }
}
@media (max-width: 899.98px) {
  .bk-cal-bd { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .bk-ok-bd { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- phone: a full height bottom sheet; the flow first, the call info under it; Continue pinned to the sheet's foot */
@media (max-width: 639.98px) {
  .bk { place-items: end stretch; }
  .bk-dlg { width: 100%; height: calc(100% - 16px); height: calc(100dvh - 16px); border-radius: 12px 12px 0 0; box-shadow: inset 0 1px 0 var(--bk-ln), 0 -24px 64px -16px rgba(0, 0, 0, .7); }
  .bk-grab { display: block; flex: none; height: 52px; position: relative; }
  .bk-grab::before { content: ""; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #3a3a3a; }
  .bk-x { top: 8px; right: 12px; }
  .bk-cell { padding: 0 8px 8px; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bk-info { order: 2; padding: 24px 20px; gap: 24px; }
  .bk-alt { margin-top: 0; }
  .bk-flow { padding: 16px 16px 24px; }
  .bk-top { margin-bottom: 16px; padding-right: 0; }
  .bk-q { font-size: 28px; line-height: 32px; }
  .bk-qs { font-size: 16px; line-height: 24px; }
  .bk-opts { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .bk-opts > .bk-opt:last-child:nth-child(odd) { grid-column: auto; }
  .bk-opt { min-height: 64px; padding: 16px; }
  .bk-opt-t { font-size: 17px; }
  .bk-nf { grid-template-columns: minmax(0, 1fr); }
  .bk-cal-hd { align-items: stretch; flex-direction: column; }
  .bk-tools { justify-content: space-between; flex-wrap: nowrap; }
  .bk-tz { flex: 1; min-width: 0; }
  .bk-tz { max-width: none; }
  .bk-cs-v { flex: 1 1 auto; text-align: left; }
  /* v87: on phones the time zone list is a panel nested INSIDE the booking sheet (under its one grab handle), sliding in
     from the right over the flow with a back arrow "Time zone" header; no second sheet, no second handle, no dim */
  .bk-pop.bk-sheet { left: 8px !important; right: 8px; top: 52px !important; bottom: 8px; width: auto; max-width: none; max-height: none !important; border-radius: 6px; transform-origin: 50% 50%;
    box-shadow: inset 0 0 0 1px var(--bk-ln); padding-bottom: env(safe-area-inset-bottom); }
  .bk-pop.bk-sheet .bk-pop-hd { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px 8px; }
  .bk-pop-bk { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--bk-text2); }
  .bk-pop-bk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .bk-pop-hd b { font-family: var(--bk-display); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--bk-text); }
  .bk-pop.bk-sheet .bk-pop-s { padding: 8px 16px 12px; }
  .bk-pop.bk-sheet .bk-pop-s svg { left: 30px; }
  .bk-pop.bk-sheet .bk-pop-s input { height: 48px; }
  .bk-pop.bk-sheet .bk-pop-l { padding: 4px 8px 16px; }
  .bk-pop.bk-sheet .bk-pop-o { min-height: 52px; }
  .bk-cal-bd { margin-top: 24px; }
  .bk-grid-col { display: none; }
  .bk-strip-wrap { display: block; margin: 0 -16px; }
  .bk-strip-mo { padding: 0 16px; margin-bottom: 12px; font-family: var(--bk-display); font-size: 20px; line-height: 28px; font-weight: 500; }
  .bk-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bk-strip::-webkit-scrollbar { display: none; }
  .bk-chipd { position: relative; flex: none; width: 60px; height: 76px; border-radius: 6px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--bk-off); transition: background-color 200ms var(--bk-ease), box-shadow 200ms var(--bk-ease), color 200ms var(--bk-ease); }
  .bk-chipd .cdw { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .06em; }
  .bk-chipd .cdn { font-size: 20px; line-height: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .bk-chipd.av { color: var(--bk-text); background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--bk-ln2); }
  .bk-chipd.av .cdw { color: var(--bk-muted); }
  .bk-chipd.today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--bk-dot); }
  .bk-chipd[aria-pressed="true"] { background: linear-gradient(#f7f7f5, #e4e4e2); color: #0b0b0b; box-shadow: none; }
  .bk-chipd[aria-pressed="true"] .cdw { color: rgba(11, 11, 11, .6); }
  .bk-chipd:focus-visible { outline-offset: 1px; }
  .bk-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-slot { height: 52px; border-radius: 6px; }
  .bk-go-row { display: none; }
  .bk-sl-t { font-size: 20px; }
  .bk-mbar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: block; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(23, 23, 23, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--bk-ln);
    transform: translateY(110%); transition: transform 450ms var(--bk-ease); }
  .bk-mbar.on { transform: none; }
  .bk-mbar .bk-btn { width: 100%; height: 52px; }
  .bk-dlg.has-mbar .bk-sc { padding-bottom: 84px; }
  .bk-sum { flex-wrap: wrap; padding: 8px 8px 8px 12px; }
  .bk-sum-t { flex-basis: calc(100% - 48px); }
  .bk-form { grid-template-columns: minmax(0, 1fr); }
  .bk-pair { grid-template-columns: minmax(0, 1fr); }
  .bk-rad { flex-wrap: wrap; }
  .bk-acts .bk-btn { width: 100%; }
  .bk-ok-top { align-items: flex-start; flex-direction: column; gap: 16px; }
  .bk-ok-p { font-size: 16px; line-height: 24px; }
  .bk-rows div { flex-direction: column; gap: 2px; }
  .bk-rows dd { text-align: left; }
}
/* ---------- reduced motion: instant swaps, opacity only, no glow */
@media (prefers-reduced-motion: reduce) {
  .bk *, .bk *::before, .bk *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ======================================================================
   v99: the mobile and tablet pass (Dylan: "a load of sections not optimised for mobile"). Every rule below sits in a
   max-width query under 1024, so desktop (1024 and up) is untouched. The phone rhythm: 24px side gutters, heading cells
   64px over / 32px under (tablet 72 / 40), 24px panel padding, every control at least 44 x 44.
   ====================================================================== */
@media (max-width: 1023.98px) {
  /* the sticky nav clears the notch / rounded corners when the page runs edge to edge (viewport-fit=cover) */
  header.nav { padding-top: env(safe-area-inset-top); }
  header.nav > .nav-in { padding-left: max(var(--s4), env(safe-area-inset-left)); padding-right: max(var(--s4), env(safe-area-inset-right)); }
  footer.ft { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
  /* text: balanced headings, no lone last words in paragraphs */
  main.wrap h2, .cd-t, .cz-b, .bk-q, #fcH { text-wrap: balance; }
  .sec-sub, .cd-p, .cz-t, #sub, .ft-line, .fq-a p, .bk-qs { text-wrap: pretty; }
  /* the hero's page arrows: 44px targets */
  .dn-b { width: 44px; height: 44px; }
  /* Results: the 100vh floor of the screenshot panel follows the small viewport (no jump when the URL bar slides) */
  .cz-v { min-height: max(380px, min(440px, calc(100svh - 301px))); }
  /* How we work stacked: the head is a heading cell like every other section (it was a panel, 24px further in) */
  .ps-hd { margin: 0 calc(var(--gutter) * -1) 8px; padding: 72px var(--gutter) 40px; border-radius: 0; background: none; border-bottom: 1px solid var(--ln); }
  .ps-sec .ps-hd .sec-sub { max-width: 440px; }
  /* tablet heading cells: one rhythm (72 over, 40 under) for every section */
  main.wrap > .rs-sec > .sec-h, main.wrap > .rv-sec > .sec-h { padding-top: 72px; padding-bottom: 40px; }
  /* footer links: 44px tall rows */
  .ft-ls a, .ft-legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .ft-ls { gap: 0; }
  .ft-h { margin-bottom: 4px; }
  /* the booking footnote is a sentence: body size */
  .bk-foot { font-size: 16px; line-height: 24px; }
  footer.ft .brand { min-height: 44px; }
  /* booking (sheet on phones, dialog on tablets): every control 44px */
  .bk-x, .bk-pop-bk, .bk-ib { width: 44px; height: 44px; }
  .bk-back, .bk-tz, .bk-gb, .bk-chip, .bk-rad span, .bk-pop-s input { height: 44px; }
  .bk-seg { padding: 0; }
  .bk-seg button { height: 44px; }
  .bk-rad { gap: 8px; }
  .bk-lnk { display: inline-flex; align-items: center; min-height: 44px; }
  .bk-mail a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  /* FAQ ask row: a 44px input and send target (the send dot stays 32px, painted in the content box) */
  .fq-in { height: 44px; }
  .fq-go { width: 44px; height: 44px; margin: -6px; padding: 6px; background-clip: content-box; }
  .ak-cta { min-height: 44px; }
}

/* ---------- the nav menu (under 901, where the links hide): one button opens the links as a panel under the nav */
.nav-mb { display: none; }
@media (max-width: 900px) {
  header.nav .nav-in { grid-template-columns: 1fr auto auto; column-gap: 8px; }
  .nav-mb { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 999px; background: none; color: var(--text); cursor: pointer; }
  .nav-mb:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
  .nav-mb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; overflow: visible; }
  .nav-mb path { transition: transform 260ms var(--ease), opacity 200ms var(--ease); transform-origin: 10px 10px; }
  header.nav.mo .nav-mb .t { transform: translateY(3.5px) rotate(45deg); }
  header.nav.mo .nav-mb .b { transform: translateY(-3.5px) rotate(-45deg); }
  header.nav .nav-links { position: absolute; left: -1px; right: -1px; top: 100%; display: none; flex-direction: column; gap: 0; margin: 0;
    padding: 8px var(--gutter) 16px; border: 1px solid var(--ln); border-top: 0;
    background: #0b0b0b; font-size: 18px; color: var(--text); }
  header.nav.mo .nav-links { display: flex; }
  header.nav .nav-links a { display: flex; align-items: center; min-height: 52px; padding: 0; border-radius: 0; color: var(--text); }
  header.nav .nav-links a + a { border-top: 1px solid var(--ln); }
  header.nav .nav-links a:focus-visible { outline-offset: -2px; }
  header.nav .nav-hl { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    header.nav.mo .nav-links { animation: navMo 280ms var(--ease) both; }
  }
}
@keyframes navMo { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  header.nav .nav-cta { height: 44px; }
  header.nav .brand { min-height: 44px; }
}

/* ---------- tablets (601 to 900): the hero's two CTAs sit side by side at the phone's 52px height (they were two narrow
   stacked pills); the Results tabs size to their names so no name breaks over three lines */
@media (min-width: 601px) and (max-width: 900px) {
  #top .lead .cta-row { flex-direction: row; flex-wrap: nowrap; gap: 16px; }
  #top .lead .cta-row .cta-bar, #top .lead .cta-row .wa { height: 52px; width: auto; flex: 0 0 auto; }
  #top .lead .cta-row .cta-bar { --av: 40px; padding-left: 6px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .cz-tb .cz-tabs { grid-template-columns: repeat(5, auto); }
  .cz-tab { padding: 12px 16px; }
}

/* ---------- small phones (under 375, e.g. 360): the headline at 28px so it sets in five lines, not six, and the Book a call pill
   clears the fold on a 640 tall screen */
@media (max-width: 374.98px) {
  #top .lead #h1 { font-size: 28px; line-height: 31px; }
}

/* ---------- phones (under 640) */
@media (max-width: 639.98px) {
  :root { --navh: calc(64px + env(safe-area-inset-top)); }
  /* heading cells: 64 over, 32 under, in every section */
  main.wrap .sec-h, main.wrap > .rs-sec > .sec-h, main.wrap > .rv-sec > .sec-h, .ps-hd { padding-top: 64px; padding-bottom: 32px; }
  .lw-k { padding-top: 32px; padding-bottom: 32px; }
  /* problem: 24px panel padding like every other panel; the drawing slot is cropped to 16:10 (its empty top and foot go) */
  .pp-grid .cd { padding: 24px; }
  .pp-grid .pp-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 16px; }
  .pp-grid .pp-art .pp-svg { position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 4 / 3; transform: translateY(-50%); }
  /* Results: tabs as wide as their names (no name cut inside its tab), the strip snaps; stat panels shorter */
  .cz-tab { width: auto; min-width: 136px; }
  .cz-n { font-size: 48px; }
  .cz-s { padding-bottom: 96px; }
  /* FAQ ask row: the prompt fits on one line at 16px (it was cut at 18px) */
  .fq-in { font-size: 16px; }
  /* footer: the legal links get room between them */
  .ft-legal { display: flex; gap: 24px; }
  .bk-x { top: 6px; right: 10px; }
  /* the day strip: five and a half days across, so the half day says "swipe for more" */
  .bk-chipd { width: calc((100% - 40px) / 5.5); min-width: 52px; }
}

/* ======================================================================
   v100 leftovers (v99 review)
   ====================================================================== */
/* a. hero scroll hint: under the phone, never on it. 1280 and up: in the caption row, left of the arrows (vertically
   centred on them). Under 1280: stacked above the arrows, centred, 12px over them. No shade (it no longer sits on a screen). */
.stage-cap { position: relative; }
.stage-cap > .sh { position: absolute; left: var(--px, 24px); right: auto; top: 0; bottom: 0; height: auto; display: flex; align-items: center;
  padding: 0; padding-top: inherit; padding-bottom: inherit; background: none; z-index: 2; }
.stage-cap > .sh.away { opacity: 0; visibility: hidden; }
@media (max-width: 1279.98px) {   /* under 1280 the caption row is too narrow for the pill beside the arrows (they touched at 1024 to 1100) */
  .stage-cap { flex-direction: column; gap: 12px; }
  .stage-cap > .sh { position: static; padding: 0; }
}
/* b. phone menu: while open, the nav and the panel are one solid surface (the 80% glass nav let the logo wall show through
   above the solid panel, and the panel's 6px slide opened a see-through strip under the nav). The panel overlaps the nav
   by 1px (no seam at fractional DPRs) and opens as a solid wipe (no fade, no slide). */
@media (max-width: 900px) {
  header.nav.mo { background: #0b0b0b; -webkit-backdrop-filter: none; backdrop-filter: none; }
  header.nav .nav-links { top: calc(100% - 1px); box-shadow: inset 0 1px 0 var(--ln); }
}
@keyframes navMo { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }   /* a solid wipe down from the nav: never see-through */
/* c. booking sheet: the scroll room under the content covers the Continue bar's full height on any phone (12 + 52 + 12px,
   plus the home bar inset it grows by) and 32px of air, so the footnote and the last panel clear it at the end */
@media (max-width: 639.98px) {
  .bk-dlg.has-mbar .bk-sc { padding-bottom: calc(108px + var(--sab, env(safe-area-inset-bottom, 0px))); }
  .bk-mbar { padding-bottom: calc(12px + var(--sab, env(safe-area-inset-bottom, 0px))); }
}

/* ======================================================================
   v110: mobile and tablet pass (see MOBILE-AUDIT-v110.md). Results section untouched.
   ====================================================================== */
/* a. safe areas: in landscape on a notched phone (viewport-fit=cover) the whole frame (nav, main, footer and their side
   lines) keeps clear of the side insets, not just the nav. env() is 0 elsewhere, so every other screen is unchanged. */
:root { --fw: calc(min(var(--max), 100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px) + 8px, env(safe-area-inset-right, 0px) + 8px)) + 18px); }
@media (max-width: 1023.98px) {
  header.nav > .nav-in { padding-left: var(--s4); padding-right: var(--s4); }   /* the frame already clears the insets */
}
/* b. touch tablets at 1024 and up (iPad landscape: 1024 to 1366): the same 44px targets the phones and tablets under 1024
   got in v99. Mouse and trackpad screens are unchanged (coarse pointers only). */
@media (min-width: 1024px) and (pointer: coarse) {
  header.nav .brand, footer.ft .brand { min-height: 44px; }
  header.nav .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  header.nav .nav-cta { height: 44px; }
  .dn-b { width: 44px; height: 44px; }
  .ft-ls a, .ft-legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .ft-ls { gap: 0; }
  .ft-h { margin-bottom: 4px; }
  .fq-in { height: 44px; }
  .fq-go { width: 44px; height: 44px; margin: -6px; padding: 6px; background-clip: content-box; }
  .ak-cta { min-height: 44px; }
  .bk-x, .bk-pop-bk, .bk-ib { width: 44px; height: 44px; }
  .bk-back, .bk-tz, .bk-gb, .bk-chip, .bk-rad span, .bk-pop-s input { height: 44px; }
  .bk-seg { padding: 0; }
  .bk-seg button { height: 44px; }
  .bk-lnk { display: inline-flex; align-items: center; min-height: 44px; }
  .bk-mail a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
/* c. hero stats on phones: one row of three columns (figure over label) instead of a three line list */
@media (max-width: 600px) {
  .hs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  .hs li { flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; font-size: 14px; line-height: 20px; }
  .hs-n { font-size: 20px; line-height: 28px; }
  .hs-st .hs-r { height: 28px; gap: 2px; }
  .hs-st svg { width: 13px; height: 13px; }
}
/* d. the Slack window on tablets: no cut names. 640 to 799: the narrow window drops the sidebar (as Slack does), so the
   channel view has the width. 800 to 1023: a wider sidebar without the compose and share icons, and no brand avatars in
   the channel header. 1024 to 1179: the header shows two avatars (+550 more stays) so the channel name fits. */
@media (min-width: 640px) and (max-width: 799.98px) {
  .sk-win { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); }
  .sk-side { display: none; }
}
@media (min-width: 800px) and (max-width: 1023.98px) {
  .sk-win { width: calc(100% - 32px); grid-template-columns: 272px minmax(0, 1fr); }
  .sk-side .sk-new, .sk-side .sk-shr, .sk-avs { display: none; }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .sk-win { grid-template-columns: 280px minmax(0, 1fr); }
  .sk-side .sk-shr, .sk-hd .sk-shr, .sk-avs .sk-sa:nth-child(n+3) { display: none; }
}

/* v110 QA: the phone menu holds the page still while it is open (html only, so the sticky nav keeps its place) */
html.nav-lock { overflow: hidden; }
html.nav-lock body { padding-right: var(--nav-sbw, 0px); }

/* 31 Oct 2026: the Google Calendar booking page (step 3). Google draws it on white, so it sits in a white rounded panel. */
.bk-gc-f { margin-top: 24px; border-radius: 6px; overflow: hidden; background: #fff; }
.bk-gc-f iframe { display: block; width: 100%; height: min(640px, calc(100vh - 260px)); min-height: 420px; border: 0; }
@media (max-width: 767.98px) { .bk-gc-f iframe { height: calc(100vh - 220px); min-height: 480px; } }