/* =========================================================================
   /booking/ — the booking page (booking-page, 23 Sep).

   One card, phone-first, four screens. The tokens, fonts, buttons and
   fields come from styles.css; everything here is the card and its steps.
   ========================================================================= */

.bk-body{
  min-height:100dvh;background:var(--blush);
  background-image:radial-gradient(1200px 600px at 50% -200px,rgba(250,32,154,.10),transparent 70%);
  display:flex;flex-direction:column;
}

/* ---- slim header: the logo and the phone, nothing to wander off to ---- */
.bk-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;max-width:640px;width:100%;margin:0 auto;
}
.bk-call{
  display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.9rem;
  color:var(--pink-deep);padding:9px 14px;border-radius:999px;background:#fff;
  box-shadow:0 6px 18px rgba(34,59,92,.08);
}
.bk-call svg{flex:none}
@media (max-width:420px){ .bk-call span{display:none} .bk-call{padding:10px} }

/* ---- the card ----------------------------------------------------------- */
.bk-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:4px 12px 24px}
.bk-card{
  width:100%;max-width:520px;background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:18px 20px 22px;position:relative;
}
@media (min-width:560px){ .bk-card{padding:24px 28px 28px} }

.bk-head{display:flex;align-items:center;gap:12px;min-height:40px;margin-bottom:14px}
.bk-back{
  width:40px;height:40px;border-radius:50%;border:none;background:var(--blush);
  color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  margin-left:-6px;transition:background .15s,transform .15s;
}
.bk-back:hover{background:var(--pink-soft);transform:translateX(-1px)}
.bk-back[hidden]{display:none}
.bk-dots{display:flex;gap:7px;flex:1}
.bk-dots i{
  width:10px;height:10px;border-radius:50%;background:var(--pink-soft);border:2px solid var(--pink-soft);
  transition:background .25s,border-color .25s,transform .25s;
}
.bk-dots i.done{background:var(--pink);border-color:var(--pink)}
.bk-dots i.now{background:#fff;border-color:var(--pink-deep);transform:scale(1.25)}
.bk-chip{
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:1rem;color:var(--pink-deep);
  white-space:nowrap;min-height:1.2em;
}
.bk-chip small{display:block;font-family:'Nunito Sans',sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.1}

.bk-viewport{position:relative}
.bk-step{outline:none}
.bk-step h1:focus{outline:none}
.bk-step.in{animation:bkIn .32s ease both}
.bk-step.out{animation:bkOut .18s ease both}
@keyframes bkIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes bkOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-14px)}}
@media (prefers-reduced-motion:reduce){ .bk-step.in,.bk-step.out{animation:none} }

.bk-step h1{font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;margin:2px 0 4px}
.bk-step .lead{font-size:.93rem;color:var(--muted);font-weight:600;margin-bottom:14px;line-height:1.5}
.bk-fine{font-size:.8rem;color:var(--muted);font-weight:600;margin-top:12px;text-align:center;line-height:1.5}
.bk-fine a{color:var(--pink-deep);font-weight:700}

/* ---- 1. address --------------------------------------------------------- */
.bk-addr{position:relative}
.bk-addr input{
  width:100%;font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.08rem;
  background:#fff;border:2px solid var(--line);border-radius:var(--radius-md);
  padding:17px 18px 17px 46px;color:var(--navy);transition:border-color .18s,box-shadow .18s;
}
.bk-addr input:focus{outline:none;border-color:var(--pink-deep);box-shadow:0 8px 20px rgba(250,32,154,.16)}
.bk-addr .pin{position:absolute;left:16px;top:19px;color:var(--pink-deep);pointer-events:none}
.bk-sugg{
  position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:6px;
  background:#fff;border:2px solid var(--line);border-radius:var(--radius-md);
  box-shadow:0 18px 40px rgba(34,59,92,.16);max-height:290px;overflow-y:auto;
}
.bk-sugg[hidden]{display:none}
.bk-sugg li{padding:12px 15px;cursor:pointer;border-top:1px solid #f7ecf1;transition:background .12s}
.bk-sugg li:first-child{border-top:none}
.bk-sugg li.on{background:var(--pink-soft)}
.bk-sugg li b{display:block;font-family:'Quicksand',sans-serif;font-weight:700;font-size:.95rem;color:var(--navy);line-height:1.3}
.bk-sugg li span{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:1px}
.bk-note{font-size:.84rem;font-weight:700;margin-top:10px;min-height:1.3em;color:var(--muted)}
.bk-note.ok{color:#2ca6aa}
.bk-go{margin-top:12px}
.bk-go[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---- 2. how's it looking ----------------------------------------------- */
.bk-looks{display:grid;gap:10px}
.bk-look{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--blush);border:2px solid var(--line);border-radius:var(--radius-md);
  padding:16px 18px;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s,background .18s;
}
.bk-look:hover{transform:translateY(-2px);border-color:var(--pink)}
.bk-look.sel{border-color:var(--pink-deep);background:var(--pink-soft);box-shadow:0 8px 20px rgba(250,32,154,.18)}
.bk-look .ic{font-size:1.6rem;line-height:1;flex:none;width:36px;text-align:center}
.bk-look .t{flex:1;min-width:0}
.bk-look b{font-family:'Quicksand',sans-serif;font-size:1.05rem;display:block;line-height:1.2}
.bk-look small{display:block;font-size:.8rem;color:var(--muted);font-weight:600;margin-top:2px}
.bk-look .p{text-align:right;flex:none;line-height:1.15}
.bk-look .p b{font-size:1.05rem;color:var(--pink-deep)}
.bk-look .p small{margin-top:1px}

/* ---- 3. when ------------------------------------------------------------ */
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.bk-cal-head b{font-family:'Quicksand',sans-serif;font-size:1.02rem}
.bk-cal-arrow{width:38px;height:38px;border-radius:50%;border:none;background:var(--blush);cursor:pointer;font-size:1.3rem;line-height:1;color:var(--navy)}
.bk-cal-arrow:disabled{opacity:.3;cursor:default}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-cal-dow{text-align:center;font-size:.68rem;font-weight:800;color:var(--muted);padding:4px 0}
.bk-cal-day{
  position:relative;aspect-ratio:1;border-radius:50%;border:none;background:none;cursor:pointer;
  font-weight:700;font-size:1rem;color:var(--navy);transition:background .12s;
}
.bk-cal-day:hover:not(:disabled){background:var(--blush)}
.bk-cal-day.best{background:var(--pink-soft);color:var(--pink-deep);font-weight:800}
.bk-cal-day.today{box-shadow:inset 0 0 0 1.5px var(--line)}
.bk-cal-day.sel{background:var(--pink-deep);color:#fff;font-weight:800}
.bk-cal-day.off{color:#b8bec9;cursor:default}
.bk-cal-day i{position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#b8bec9}
.bk-status{font-size:.86rem;font-weight:600;color:var(--muted);margin:6px 0 4px;min-height:1.3em}
.bk-wins{margin-top:6px}
.bk-wins.many .bk-part{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-wins.many .bk-part h2{grid-column:1/-1;margin-bottom:0}
.bk-wins.many .bk-win-wide{margin-bottom:0;padding:12px 12px}
.bk-wins.many .bk-win-wide b{font-size:.92rem;white-space:nowrap}
.bk-part h2{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:12px 0 7px;font-family:'Nunito Sans',sans-serif}
.bk-win-row{display:flex;flex-wrap:wrap;gap:8px}
.bk-win{
  background:var(--blush);border:2px solid var(--line);border-radius:999px;padding:10px 15px;
  cursor:pointer;text-align:left;transition:border-color .18s,background .18s;
}
.bk-win b{font-family:'Quicksand',sans-serif;font-size:.95rem}
.bk-win small{display:block;font-size:.7rem;font-weight:700;color:var(--pink-deep)}
.bk-win:hover{border-color:var(--pink)}
.bk-win.sel{border-color:var(--pink-deep);background:var(--pink-soft)}
.bk-win-wide{display:block;width:100%;border-radius:var(--radius-md);padding:14px 18px;margin-bottom:8px}
.bk-win-wide b{font-size:1.05rem}
.bk-win-wide small{font-size:.76rem}

/* ---- 4. you ------------------------------------------------------------- */
.bk-lead{font-size:.95rem;line-height:1.55}
.bk-lead b{color:var(--navy);font-weight:800}
.bk-lead-price{font-family:'Quicksand',sans-serif;font-weight:700;color:var(--navy);font-size:1.05rem}
.bk-link{background:none;border:none;cursor:pointer;font:inherit;font-size:.86rem;font-weight:700;color:var(--pink-deep);text-decoration:underline;padding:0}
.bk-change{border:2px solid var(--line);border-radius:var(--radius-md);padding:12px 16px 10px;margin:-6px 0 16px;background:var(--blush)}
.bk-change[hidden]{display:none}
.bk-sum-once{margin:0 0 4px}
.bk-hours{margin:6px 0 2px;padding-top:8px;border-top:1px solid var(--line)}
.bk-hours p{font-size:.84rem;font-weight:600;color:var(--navy-soft);line-height:1.45}
.bk-hours p b{color:var(--navy);font-weight:800}
.bk-hours input[type=range]{width:100%;accent-color:var(--pink-deep);margin:8px 0 0}
.bk-hours-marks{display:flex;justify-content:space-between;font-size:.7rem;font-weight:700;color:var(--muted)}

.bk-due{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--blush);border:2px solid var(--line);border-radius:var(--radius-md);padding:12px 16px;margin:0 0 14px;
}
.bk-due .lbl{display:block;font-family:'Quicksand',sans-serif;font-size:1rem;font-weight:700;color:var(--navy)}
.bk-due .sub{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:2px;line-height:1.4}
.bk-due .amt{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.7rem;color:var(--navy);white-space:nowrap}
.bk-express{margin:0 0 12px;min-height:0}
.bk-cardbtn{margin-top:0;background:#fff;color:var(--navy);border:2px solid var(--line);box-shadow:none;font-size:1.02rem;padding:15px}
.bk-cardbtn:hover{transform:none;border-color:var(--pink)}
.bk-express[hidden],.bk-or[hidden]{display:none}
.bk-or{display:flex;align-items:center;gap:12px;margin:2px 0 12px;color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bk-or::before,.bk-or::after{content:"";flex:1;height:1px;background:var(--line)}
.bk-payel{margin:0 0 12px;min-height:48px}
.bk-payel-wait{font-size:.86rem;color:var(--muted);font-weight:600;padding:12px 2px}
.bk-cardfields .f-row{margin-bottom:10px}
.bk-form .field{margin-bottom:10px}
.bk-form label{font-size:.72rem;margin-bottom:4px}
.bk-form input{padding:12px 14px;font-size:.98rem}
.bk-form .f-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0}
.bk-form .field{margin-bottom:8px}
.bk-form .btn-block{padding:15px}
.bk-form .btn-block{margin-top:6px}

/* ---- done --------------------------------------------------------------- */
.bk-done{text-align:center;padding:10px 0 4px}
.bk-done .party{font-size:3rem;line-height:1;margin-bottom:10px}
.bk-done h1{font-size:1.6rem;margin-bottom:8px}
.bk-done p{font-size:.98rem;color:var(--navy-soft);line-height:1.55;margin-bottom:10px}
.bk-done .when{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.05rem;color:var(--navy);margin-bottom:14px}
.bk-done .btn{margin-top:8px}
.bk-done .bk-fine{margin-top:16px}

.bk-foot{display:none;
  max-width:520px;width:100%;text-align:center;font-size:.78rem;font-weight:600;
  color:var(--muted);margin:16px auto 0;line-height:1.5;
}

/* ---- short screens (an iPhone SE, a phone with the URL bar open) ------- */
@media (max-height:720px){
  .bk-top{padding:8px 16px}
  .bk-top .wordmark .mark{width:28px;height:23px}
  .bk-top .wordmark .wordmark-img{height:17px}
  .bk-card{padding:12px 16px 14px}
  .bk-head{margin-bottom:8px;min-height:36px}
  .bk-step h1{font-size:1.32rem;margin:0 0 2px}
  .bk-step .lead{font-size:.86rem;margin-bottom:10px;line-height:1.4}
  .bk-look{padding:12px 14px}
  .bk-looks{gap:8px}
  .bk-due{padding:9px 14px;margin-bottom:10px}
  .bk-due .amt{font-size:1.4rem}
  .bk-express{margin-bottom:8px}
  .bk-or{margin:0 0 8px}
  .bk-form .field{margin-bottom:6px}
  .bk-form input{padding:10px 12px}
  .bk-payel{margin-bottom:8px}
  .bk-fine{margin-top:8px;font-size:.74rem}
  .bk-win-wide{padding:11px 14px;margin-bottom:6px}
  .bk-cal-day{font-size:.92rem}
}

/* =========================================================================
   The landing (23 Sep): one hero that IS the form, soft pink weather
   behind it, the five-star platforms scrolling under it. Everything moves
   a little; nothing moves for anyone who asked it not to.
   ========================================================================= */
.bk-body{position:relative;overflow-x:hidden}
.bk-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bk-sky i{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  background:radial-gradient(circle at 30% 30%,rgba(250,32,154,.28),rgba(250,32,154,0) 70%);
  animation:bkFloat 18s ease-in-out infinite;
}
.bk-sky .b1{width:52vw;height:52vw;left:-14vw;top:-10vw}
.bk-sky .b2{width:46vw;height:46vw;right:-16vw;top:26vh;animation-delay:-6s;background:radial-gradient(circle at 60% 40%,rgba(127,209,212,.32),rgba(127,209,212,0) 70%)}
.bk-sky .b3{width:60vw;height:60vw;left:20vw;bottom:-30vw;animation-delay:-12s}
@keyframes bkFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,-3vh,0) scale(1.08)}}
.bk-top,.bk-main{position:relative;z-index:1}

/* the one line above the card */
.bk-hero{
  font-family:'Quicksand',sans-serif;font-weight:700;color:var(--navy);text-align:center;
  font-size:1.15rem;letter-spacing:-.01em;margin:2px 0 12px;
  animation:bkRise .6s ease both;
}
@media (min-width:700px){ .bk-hero{font-size:1.7rem;margin:10px 0 18px} }

/* the card arrives; the things inside a screen arrive one after another */
.bk-card{animation:bkRise .55s .08s ease both}
@keyframes bkRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:bkRise .42s ease both}
.bk-chip.pop{animation:bkPop .4s ease}
@keyframes bkPop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.bk-look.sel{animation:bkSel .38s ease}
@keyframes bkSel{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}
.bk-spark{
  position:fixed;z-index:90;pointer-events:none;color:var(--pink-deep);line-height:1;
  animation:bkSpark .7s ease-out forwards;
}
@keyframes bkSpark{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(110deg)}
}
.bk-cal-day.sel{animation:bkSel .3s ease}

/* rated five stars on … */
.bk-proof{width:100%;max-width:520px;margin:14px auto 0;text-align:center;animation:bkRise .6s .25s ease both}
.bk-proof-cap{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bk-marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.bk-track{display:flex;gap:28px;width:max-content;padding:4px 0;animation:bkSlide 22s linear infinite}
.bk-marquee:hover .bk-track{animation-play-state:paused}
@keyframes bkSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bk-badge{display:inline-flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap}
.bk-badge .stars{font-style:normal;color:#F5B400;font-size:.8rem;letter-spacing:.06em;line-height:1}
.bk-badge b{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.05rem;line-height:1.1}
.m-google span:nth-child(1){color:#4285F4}.m-google span:nth-child(2){color:#EA4335}.m-google span:nth-child(3){color:#FBBC05}
.m-google span:nth-child(4){color:#4285F4}.m-google span:nth-child(5){color:#34A853}.m-google span:nth-child(6){color:#EA4335}
.m-thumbtack{color:#009FD9}
.m-yelp{color:#D32323;font-family:'Nunito Sans',sans-serif;font-weight:800;letter-spacing:-.02em}
.m-yelp .burst{font-size:.7em;vertical-align:top;margin-left:1px}
.m-angi{color:#FF6153}
.m-nextdoor{color:#8ED500}
@media (prefers-reduced-motion:reduce){
  .bk-sky i,.bk-track,.bk-card,.bk-hero,.bk-proof,.rise,.bk-chip.pop,.bk-look.sel,.bk-cal-day.sel{animation:none}
}
.bk-deep .bk-hero,.bk-deep .bk-proof{display:none}
@media (max-height:720px){ .bk-hero{display:none} .bk-proof{margin-top:8px} .bk-proof-cap{margin-bottom:2px} .bk-badge b{font-size:.9rem} .bk-track{padding:2px 0} }