/* ============================================================
   BOOK NOW OVERLAY  ·  shared by every page
   Nuli's concept (photo panel beside a stepped flow, progress
   dashes, one question per screen) rebuilt in our system:
   plum / lilac / onyx / paper, Inter only, ghost pill, sharp
   corners, dashed empty slots.

   Loaded with two lines per page:
     <link rel="stylesheet" href="book.css" />
     <script src="book.js" defer></script>
   Every <a href="#book"> on the page opens it. Config lives at
   the top of book.js.
   ============================================================ */

.bk{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:clamp(0px,4vh,44px) clamp(0px,4vw,44px);
  opacity:0; visibility:hidden;
  transition:opacity .42s var(--ease,cubic-bezier(.22,.61,.36,1)), visibility .42s;
}
.bk.open{opacity:1; visibility:visible}
.bk::before{               /* the same glass the phone menu uses */
  content:""; position:absolute; inset:0;
  background:rgba(23,19,14,.56);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}

.bk__card{
  position:relative;
  width:min(1040px,100%); height:min(700px,92vh);
  display:grid; grid-template-columns:.82fr 1fr;
  background:var(--paper,#FAF8F3);
  box-shadow:0 60px 120px -50px rgba(2,2,2,.7);
  overflow:hidden;
  transform:translateY(22px) scale(.985);
  transition:transform .55s var(--sweep,cubic-bezier(.76,0,.24,1));
}
.bk.open .bk__card{transform:none}

/* ---- left photo panel, taken into the lilac like the contact hero ---- */
.bk__media{position:relative; overflow:hidden}
.bk__media img{width:100%; height:100%; object-fit:cover; object-position:50% 24%}
.bk__wash{position:absolute; inset:0; background:var(--lilac,#E2D0A6); mix-blend-mode:color}
.bk__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(23,19,14,.28), rgba(23,19,14,.06) 42%, rgba(23,19,14,.62));
}
.bk__cap{
  position:absolute; left:28px; right:28px; bottom:26px; z-index:2;
  color:#fff;
}
.bk__cap b{
  display:block;
  font-family:var(--h,Inter); font-weight:600;
  font-size:13px; letter-spacing:.42em; text-transform:uppercase;
  margin-bottom:10px;
}
.bk__cap span{
  display:block;
  font-family:var(--h,Inter); font-weight:300;
  font-size:14px; line-height:1.55; color:rgba(255,255,255,.82);
}

/* ---- right pane ----
   min-height:0 is load bearing. A grid item defaults to min-height:auto,
   so the pane refuses to shrink below its content and pushes past the
   card's fixed height, which kills the body's scroll and any sticky
   inside it. Same class of bug as an img at height:100% stretching a
   hero past 100vh. */
.bk__pane{display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden}
.bk__top{
  display:flex; align-items:center; gap:18px;
  padding:22px clamp(20px,2.4vw,30px);
  border-bottom:1px solid rgba(23,19,14,.12);
}
.bk__mark{
  font-family:var(--h,Inter); font-weight:600;
  font-size:13px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--plum,#17130E); padding-left:.42em;
}
.bk__dots{display:flex; gap:7px; margin-left:auto}
.bk__dots i{
  display:block; width:26px; height:2px;
  background:rgba(23,19,14,.2);
  transition:background .45s var(--ease,ease);
}
.bk__dots i.on{background:var(--plum,#17130E)}
.bk__x{
  width:34px; height:34px; flex:none;
  background:none; border:1px solid rgba(23,19,14,.24); border-radius:50%;
  color:var(--plum,#17130E); cursor:pointer;
  display:grid; place-items:center; font-size:15px; line-height:1;
  transition:background .35s var(--ease,ease), color .35s var(--ease,ease),
             border-color .35s var(--ease,ease), transform .4s var(--sweep,ease);
}
.bk__x:hover{background:var(--plum,#17130E); color:var(--lilac,#E2D0A6);
  border-color:var(--plum,#17130E); transform:rotate(90deg)}
.bk__x:focus-visible{outline:2px solid var(--plum,#17130E); outline-offset:3px}

.bk__body{
  flex:1; min-height:0; overflow-y:auto;
  padding:clamp(24px,3.4vh,38px) clamp(20px,2.6vw,34px) 10px;
  scrollbar-width:thin;
}
.bk__body::-webkit-scrollbar{width:5px}
.bk__body::-webkit-scrollbar-thumb{background:rgba(23,19,14,.22)}

.bk__step{animation:bkin .48s var(--sweep,ease)}
@keyframes bkin{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.bk__h{
  font-family:var(--h,Inter); font-weight:300;
  font-size:clamp(22px,2.3vw,30px); line-height:1.22;
  letter-spacing:.005em; color:var(--plum,#17130E);
  margin-bottom:8px;
}
.bk__sub{
  font-family:var(--h,Inter); font-weight:400;
  font-size:13.5px; line-height:1.6; color:rgba(2,2,2,.46);
  margin-bottom:24px;
}

/* option pills, same language as the contact enquiry */
.bk__opts{display:flex; flex-wrap:wrap; gap:9px}
.bk__opt{
  position:relative; text-align:left;
  font-family:var(--h,Inter); font-weight:600;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--plum,#17130E);
  background:transparent;
  border:1px solid rgba(23,19,14,.28); border-radius:999px;
  padding:11px 18px; cursor:pointer;
  transition:background .35s var(--ease,ease), color .35s var(--ease,ease),
             border-color .35s var(--ease,ease), transform .35s var(--sweep,ease);
}
.bk__opt:hover{border-color:var(--plum,#17130E); transform:translateY(-1px)}
.bk__opt.on{background:var(--plum,#17130E); color:var(--lilac,#E2D0A6); border-color:var(--plum,#17130E)}
.bk__opt:focus-visible{outline:2px solid var(--plum,#17130E); outline-offset:3px}
.bk__opt em{
  font-style:normal; font-weight:400; letter-spacing:.02em;
  text-transform:none; opacity:.62; margin-left:8px;
}
/* category rule between groups */
.bk__group{
  display:block;
  font-family:var(--h,Inter); font-weight:600;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(23,19,14,.42);
  margin:24px 0 12px; padding-top:14px;
  border-top:1px solid rgba(23,19,14,.12);
}
.bk__group:first-child{margin-top:0; padding-top:0; border-top:none}

/* provider cards, empty slots until a client supplies the team */
.bk__people{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.bk__person{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:transparent; cursor:pointer;
  border:1px solid rgba(23,19,14,.22);
  padding:13px 14px;
  transition:background .35s var(--ease,ease), border-color .35s var(--ease,ease);
}
.bk__person:hover{border-color:rgba(23,19,14,.5)}
.bk__person.on{background:rgba(226,208,166,.4); border-color:var(--plum,#17130E)}
.bk__ring{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px dashed rgba(23,19,14,.45);
  display:grid; place-items:center;
  font-family:var(--h,Inter); font-weight:600; font-size:10px; letter-spacing:.12em;
  color:rgba(23,19,14,.6); background:rgba(226,208,166,.3);
}
.bk__person.on .bk__ring{border-style:solid}
.bk__who{min-width:0}
.bk__who b{
  display:block;
  font-family:var(--h,Inter); font-weight:600;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--plum,#17130E);
}
.bk__who span{
  display:block;
  font-family:var(--h,Inter); font-weight:400; font-size:11px;
  color:rgba(2,2,2,.42); margin-top:3px;
}
.bk__person--any{grid-column:1 / -1}

/* ---- calendar ---- */
.bk__cal{border:1px solid rgba(23,19,14,.16); padding:16px 16px 12px}
.bk__calhead{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.bk__month{
  font-family:var(--h,Inter); font-weight:600;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--plum,#17130E);
}
.bk__nav{display:flex; gap:8px}
.bk__nav button{
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(23,19,14,.26); background:none;
  color:var(--plum,#17130E); cursor:pointer;
  display:grid; place-items:center; font-size:12px; line-height:1;
  transition:background .3s var(--ease,ease), color .3s var(--ease,ease), opacity .3s;
}
.bk__nav button:hover:not([disabled]){background:var(--plum,#17130E); color:var(--lilac,#E2D0A6)}
.bk__nav button[disabled]{opacity:.25; cursor:default}
.bk__dow, .bk__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.bk__dow span{
  text-align:center;
  font-family:var(--h,Inter); font-weight:600;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(23,19,14,.4); padding-bottom:8px;
}
.bk__day{
  height:38px;                    /* short cells so the times sit in the same view */
  display:grid; place-items:center;
  background:none; border:1px solid transparent; cursor:pointer;
  font-family:var(--h,Inter); font-weight:400; font-size:12.5px;
  color:var(--plum,#17130E);
  transition:background .28s var(--ease,ease), color .28s var(--ease,ease),
             border-color .28s var(--ease,ease);
}
.bk__day:hover:not([disabled]){border-color:rgba(23,19,14,.45)}
.bk__day[disabled]{color:rgba(23,19,14,.22); cursor:default}
.bk__day.on{background:var(--plum,#17130E); color:var(--lilac,#E2D0A6); border-color:var(--plum,#17130E)}
.bk__day.pad{visibility:hidden}

.bk__slotwrap{margin-top:20px}
.bk__slots{display:flex; flex-wrap:wrap; gap:7px}
.bk__slot{
  font-family:var(--h,Inter); font-weight:600;
  font-size:11px; letter-spacing:.06em;
  color:var(--plum,#17130E);
  background:none; border:1px solid rgba(23,19,14,.26);
  padding:9px 13px; cursor:pointer;
  transition:background .3s var(--ease,ease), color .3s var(--ease,ease), border-color .3s;
}
.bk__slot:hover{border-color:var(--plum,#17130E)}
.bk__slot.on{background:var(--plum,#17130E); color:var(--lilac,#E2D0A6); border-color:var(--plum,#17130E)}
.bk__empty{
  font-family:var(--h,Inter); font-weight:400; font-size:12.5px;
  color:rgba(2,2,2,.4); padding:6px 0;
}

/* free text escape hatch: nothing in the list fits, so type it.
   Pinned to the foot of the scroll area so it is visible without
   scrolling the whole treatment list first. */
.bk__freewrap{
  position:sticky; bottom:-1px; z-index:2;
  background:var(--paper,#FAF8F3);
  margin-top:22px; padding:12px 0 10px;
}
.bk__freewrap::before{        /* the list dissolves into it instead of colliding */
  content:""; position:absolute; left:0; right:0; bottom:100%; height:30px;
  background:linear-gradient(to top, var(--paper,#FAF8F3), rgba(251,250,249,0));
  pointer-events:none;
}
.bk__freewrap .bk__group{margin:0 0 4px; padding-top:0; border-top:none}
.bk__free{display:flex; align-items:center; gap:12px; max-width:27em; margin-top:6px}
.bk__free input{
  flex:1; min-width:0;
  font-family:var(--h,Inter); font-weight:400;
  font-size:14px; color:var(--onyx,#020202);
  background:transparent; border:none;
  border-bottom:1px solid rgba(23,19,14,.28); padding:8px 0 10px;
  transition:border-color .35s var(--ease,ease);
}
.bk__free input:focus{outline:none; border-bottom-color:var(--plum,#17130E)}
.bk__free input::placeholder{color:rgba(2,2,2,.28)}
.bk__free button{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:1px solid rgba(23,19,14,.3); background:none;
  color:var(--plum,#17130E); cursor:pointer;
  display:grid; place-items:center; font-size:13px; line-height:1;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease,ease), background .35s var(--ease,ease),
             color .35s var(--ease,ease), border-color .35s var(--ease,ease),
             transform .4s var(--sweep,ease);
}
.bk__free.has button{opacity:1; pointer-events:auto}
.bk__free button:hover{background:var(--plum,#17130E); color:var(--lilac,#E2D0A6);
  border-color:var(--plum,#17130E); transform:translateX(3px)}
.bk__free button:focus-visible{outline:2px solid var(--plum,#17130E); outline-offset:3px}

/* ---- fields ---- */
.bk__fields{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px}
.bk__f--wide{grid-column:1 / -1}
.bk__f label{
  display:block;
  font-family:var(--h,Inter); font-weight:600;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(23,19,14,.55); margin-bottom:8px;
}
.bk__f label i{font-style:normal; letter-spacing:.1em; opacity:.55; text-transform:none}
.bk__f input{
  width:100%; font-family:var(--h,Inter); font-weight:400;
  font-size:14.5px; color:var(--onyx,#020202);
  background:transparent; border:none;
  border-bottom:1px solid rgba(23,19,14,.28);
  padding:8px 0 10px;
  transition:border-color .35s var(--ease,ease);
}
.bk__f input:focus{outline:none; border-bottom-color:var(--plum,#17130E)}
.bk__f input::placeholder{color:rgba(2,2,2,.26)}

/* ---- confirm sheet ---- */
.bk__sheet{border-top:1px solid rgba(23,19,14,.16)}
.bk__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid rgba(23,19,14,.12);
}
.bk__row b{
  font-family:var(--h,Inter); font-weight:600;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(23,19,14,.5); white-space:nowrap;
}
.bk__row span{
  font-family:var(--h,Inter); font-weight:400; font-size:14px;
  color:var(--plum,#17130E); text-align:right; line-height:1.7;
}
.bk__row span em{font-style:normal; opacity:.5; margin-left:6px}
.bk__terms{
  list-style:none; margin-top:22px;
  font-family:var(--h,Inter); font-weight:400;
  font-size:12.5px; line-height:1.6; color:rgba(2,2,2,.46);
}
.bk__terms li{position:relative; padding-left:16px; margin-bottom:7px}
.bk__terms li::before{
  content:""; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:rgba(23,19,14,.35);
}

/* ---- done ---- */
.bk__done{text-align:center; padding:6vh 0 2vh}
.bk__tick{
  width:64px; height:64px; border-radius:50%; margin:0 auto 24px;
  border:1px solid var(--plum,#17130E);
  display:grid; place-items:center;
  animation:bkpop .6s var(--sweep,ease);
}
@keyframes bkpop{from{transform:scale(.7); opacity:0} to{transform:none; opacity:1}}
.bk__tick::after{
  content:""; width:20px; height:11px;
  border-left:1.5px solid var(--plum,#17130E);
  border-bottom:1.5px solid var(--plum,#17130E);
  transform:translateY(-3px) rotate(-45deg);
}

/* ---- foot ---- */
.bk__foot{
  display:flex; align-items:center; gap:16px;
  padding:18px clamp(20px,2.6vw,34px) clamp(20px,2.6vw,26px);
  border-top:1px solid rgba(23,19,14,.12);
}
.bk__back{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--h,Inter); font-weight:600;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(23,19,14,.6);
  transition:color .3s, opacity .3s;
}
.bk__back:hover{color:var(--plum,#17130E)}
.bk__back[disabled]{opacity:.26; cursor:default}
.bk__go{
  position:relative; overflow:hidden;
  margin-left:auto;
  font-family:var(--h,Inter); font-weight:600;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--plum,#17130E);
  background:transparent; border:1px solid rgba(23,19,14,.5);
  border-radius:999px; padding:14px 34px; cursor:pointer;
  transition:color .45s var(--sweep,ease), border-color .45s var(--sweep,ease),
             transform .45s var(--sweep,ease), opacity .3s;
}
.bk__go::before{              /* the house liquid rise */
  content:""; position:absolute; left:-12%; right:-12%; top:-6%; bottom:-6%;
  z-index:0; background:var(--plum,#17130E);
  border-radius:48% 48% 0 0 / 70% 70% 0 0;
  transform:translateY(110%);
  transition:transform .55s var(--sweep,ease), border-radius .55s var(--sweep,ease);
}
.bk__go:hover:not([disabled])::before, .bk__go:focus-visible::before{transform:translateY(0); border-radius:0}
.bk__go:hover:not([disabled]), .bk__go:focus-visible{color:var(--lilac,#E2D0A6); border-color:var(--plum,#17130E); transform:translateY(-1px)}
.bk__go > span{position:relative; z-index:1}
.bk__go[disabled]{opacity:.32; cursor:default}
.bk__go:focus-visible{outline:2px solid var(--plum,#17130E); outline-offset:3px}

/* ---- mobile ---- */
@media (max-width:860px){
  .bk{padding:0}
  .bk__card{width:100%; height:100%; height:100dvh; grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .bk__media{height:17vh; min-height:120px}
  .bk__media img{object-position:50% 22%}
  .bk__cap{left:20px; right:20px; bottom:14px}
  .bk__cap b{font-size:11px; margin-bottom:4px}
  .bk__cap span{font-size:12px}
  .bk__top{padding:16px 20px}
  .bk__dots i{width:18px}
  .bk__body{padding:22px 20px 8px}
  .bk__people{grid-template-columns:1fr}
  .bk__fields{grid-template-columns:1fr}
  .bk__foot{padding:14px 20px 18px}
  .bk__go{padding:13px 26px; font-size:11px}
}
@media (max-height:620px) and (min-width:861px){
  .bk__card{height:96vh}
}
@media (prefers-reduced-motion:reduce){
  .bk__card, .bk__step, .bk__tick{transition:none; animation:none}
}