/* Booking page layout A, shared by /book/ and /separation/book/ so the two cannot drift.
   Who you will speak to on the left, the choice of meeting and the calendar on the right;
   on a tablet or phone: heading, choice, calendar, then the rest.
   Colours come from these custom properties, set by each site:
     --ink --ink-2 --ink-3 --page --page-alt --rule --rule-strong --on-ink-soft
   (/css/theme-a.css on the main site, the page's own style block on separation).
   The rules that restyle the booking widget itself are written .bkm .bk ..., which
   outranks each site's booking.css wherever this file sits in the page.
   Bump ?v= on BOTH pages when this file changes. */
/* ---- layout A (11 Nov 2026) ----
   Who you will speak to on the left, the choice of meeting and the calendar
   on the right; on a tablet or phone: heading, choice, calendar, then the rest.
   Contract: the approved mockup option-a.html. Every rule is under .bkm, so the
   follow-on booking pages (confirmed, reschedule, cancel, private) are not touched. */
.bkm{background:var(--page)}
.bkm[hidden]{display:none}
.bkm-wrap{max-width:1180px;margin:0 auto;padding:28px 24px 72px}
.bkm h1{font-size:40px;font-weight:300;line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:balance}
.bkm h1 em{font-style:normal;color:var(--ink-3)}
.bkm .bk .card{display:block;height:auto;min-height:0;overflow:visible}
.bkm .bk .panel{padding:28px 32px 32px}
.bkm .bk .step-head{margin-bottom:20px}
.bkm .bk .step-eyebrow{margin-bottom:8px}
.bkm .bk .step-title{font-size:28px;margin-bottom:0;outline:0}
.bkm .bk .cal-controls{margin-bottom:10px}
.bkm .bk .cal-dow{padding:6px 0}
.bkm .bk .cal-day{aspect-ratio:auto;height:42px}
.bkm .bk .cal-legend{margin-top:16px}
.bkm .bk .slot{min-height:48px}
.bkm .bk .confirm-title{outline:0}
.bkm-tz{font-size:12px;color:var(--ink-3);margin-top:16px;text-wrap:pretty}
.bkm-privacy a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:1px}
.bkm-privacy a:hover{border-color:var(--ink)}
.lp .bkm-privacy a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* chosen appointment, repeated above the Confirm button */
:is(body .bk,body.bk) .bkm-sum{font-size:15px;line-height:1.5;font-weight:500;color:var(--ink);margin:28px 0 0;padding-top:24px;border-top:1px solid var(--rule);text-wrap:balance}
:is(body .bk,body.bk) .bkm-sum:empty{display:none}
:is(body .bk,body.bk) .bkm-sum:not(:empty) + .action-row{border-top:0!important;margin-top:16px!important;padding-top:0!important}
.bkm-loading{padding:72px 0;text-align:center}
/* a time that was just taken, and times that would not load */
.bkm-note{font-size:15px;line-height:1.5;color:var(--ink);border-left:2px solid var(--ink);padding:2px 0 2px 12px;margin:0 0 18px;text-wrap:pretty}
.bkm-fail{font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.bkm-fail a,.bkm-fail button{font:inherit;color:var(--ink);font-weight:500;background:none;border:0;border-bottom:1px solid var(--rule-strong);padding:0 0 1px;cursor:pointer;text-decoration:none;white-space:nowrap}
.bkm-fail a:hover,.bkm-fail button:hover{border-color:var(--ink)}
.lp .bkm-fail a:focus-visible,.lp .bkm-fail button:focus-visible,.lp .bkm-call:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* booked: the choice of meeting has done its job */
.bkm .bk .card.bkm-done .bkm-choose{display:none}

/* the choice of meeting: two small groups of buttons, styled like the time buttons */
.bkm-choose{display:grid;gap:10px;margin:0;padding:0;border:0}
.bkm-group{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.bkm-group legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bkm-what{grid-template-columns:1fr 1fr}
.bkm-who{grid-template-columns:1.25fr 1fr 1fr}
.bkm-opt{
  display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:6px 10px;
  background:#fff;border:1px solid var(--rule-strong);border-radius:4px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:400;line-height:1.2;color:var(--ink);text-align:left;
  transition:background .15s,border-color .15s,color .15s;
}
.bkm-opt:hover{border-color:var(--ink)}
/* .lp in front: the site-wide ring is mint, which is too faint on white here */
.lp .bkm-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bkm-opt.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.bkm-opt small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;white-space:nowrap}
.bkm-opt.is-on small{color:var(--on-ink-soft)}
.bkm-opt img{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;background:var(--page-alt)}
.bkm-opt span{min-width:0;white-space:nowrap}
.bkm-addr{font-size:13px;line-height:1.45;color:var(--ink-3);margin:0}
.bkm-addr[hidden]{display:none}

/* who, no cost, confidential, what happens next */
.bkm-people{display:flex;align-items:center;gap:16px}
.bkm-faces{display:flex;gap:8px;flex:none}
.bkm-faces img{width:56px;height:56px;border-radius:50%;border:1px solid var(--rule);object-fit:cover;background:var(--page-alt);display:block}
.bkm-people p{margin:0;font-size:17px;line-height:1.4;color:var(--ink);text-wrap:balance}
.bkm-people p span{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}
.bkm-points{list-style:none;margin:0;padding:0}
.bkm-points li{padding:16px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.bkm-points li:last-child{border-bottom:1px solid var(--rule)}
.bkm-points li span{display:block;text-wrap:balance}
.bkm-points strong{display:block;font-size:16px;font-weight:500;color:var(--ink);margin-bottom:2px}
.bkm-call{display:inline-block;margin-top:20px;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:2px}
.bkm-call:hover{border-color:var(--ink)}

/* side by side */
/* In the page the order is heading, booking card, reassurance, so the keyboard
   reaches the booking first; on a wide screen the card sits in the right column. */
.bkm-a .bkm-wrap{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);grid-template-rows:auto 1fr;column-gap:56px;align-items:start}
.bkm-a .bkm-wrap > h1{grid-column:1;grid-row:1;margin-bottom:28px}
.bkm-a .bkm-assure{grid-column:1;grid-row:2}
.bkm-a .bkm-book{grid-column:2;grid-row:1 / span 2}
.bkm-a .bkm-people{margin-bottom:24px}
.bkm-a .bkm-choose{grid-template-columns:auto 1fr;gap:10px 16px;padding:20px 32px;border-bottom:1px solid var(--rule)}
.bkm-a .bkm-addr{grid-column:1 / -1}
.bkm-a .bkm-what .bkm-opt{min-width:104px}
.bkm-a .bkm-who{grid-template-columns:1.5fr 1fr 1fr}
@media (min-width:981px){
  .bkm-a .bk .slots-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bkm-a .bk .slot-meta{display:none}
  .bkm-a .bk .slot{justify-content:center}
}
/* small laptops and tablets on their side: the booking column is too narrow for
   five buttons in a row, so the choice takes two rows as it does on a phone */
@media (min-width:981px) and (max-width:1179px){
  .bkm-a .bkm-choose{grid-template-columns:1fr}
  .bkm-a .bkm-what .bkm-opt{min-width:0}
}

/* tablet and phone: heading, booking card, then who you will speak to */
@media (max-width:980px){
  .bkm-wrap{padding:14px 16px 56px}
  .bkm h1{font-size:28px;line-height:1.15}
  .bkm-a .bkm-wrap{display:flex;flex-direction:column;align-items:stretch}
  .bkm .bk .panel{padding:20px 16px 24px}
  .bkm .bk .step-head{margin-bottom:10px}
  .bkm .bk .cal-controls{margin-bottom:6px}
  .bkm .bk .step-title{font-size:24px}
  .bkm .bk .cal-day{height:40px}
  .bkm .bk .cal-grid{gap:4px}
  .bkm .bk .slots-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bkm .bk .slot{padding:10px 4px;font-size:14px;white-space:nowrap;justify-content:center}
  .bkm .bk .slot-meta{display:none}
  .bkm-opt{font-size:14px;padding:6px 6px;gap:6px}
  .bkm-opt img{width:24px;height:24px}
  .bkm-people p{font-size:16px}
  .bkm-a .bkm-wrap > h1{margin-bottom:12px}
  .bkm-a .bkm-assure{margin-top:36px}
  .bkm-a .bkm-choose{grid-template-columns:1fr;padding:14px 16px}
  .bkm-a .bkm-what .bkm-opt{min-width:0}
}
@media (max-width:380px){
  .bkm-opt{font-size:13px}
  .bkm-opt small{font-size:11px}
}