/* ============================================================
   Booking — the screens the static site never had.
   Same tokens and the same restraint as styles.css: sharp
   corners, hairline rules, one accent, air between things.
   ============================================================ */

.bk { background: var(--paper); color: var(--ink); overflow-x: clip; }
/* the fixed nav must never sit on top of the question being answered */
.bk-hero { scroll-margin-top: 80px; }
.bk .wrap { width: min(1180px, 92vw); margin: 0 auto; }

/* ---------- the band that carries the question ---------- */
.bk-hero {
  background:
    radial-gradient(120% 90% at 78% -10%, rgba(201,162,39,.16), transparent 62%),
    linear-gradient(158deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: clamp(92px, 12vw, 156px) 0 clamp(28px, 3.4vw, 44px);
  position: relative;
  transition: padding .5s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
/* Once the flow is under way the question matters more than the entrance. */
.bk-hero.tight { padding-top: clamp(84px, 9vw, 118px); padding-bottom: clamp(22px, 2.6vw, 32px); }
.bk-hero.tight h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.bk-hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.5), transparent);
}
.bk-hero .eyebrow { color: var(--gold); }
.bk-hero h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.16; margin: 10px 0 0;
  animation: bkRise .5s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both;
}
.bk-lead {
  color: rgba(255,255,255,.7); font-weight: 300; max-width: 60ch;
  margin: 12px 0 0; line-height: 1.9; font-size: clamp(.92rem, 1.2vw, 1rem);
  animation: bkRise .5s .06s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both;
}

@keyframes bkRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bkFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bkPop {
  from { opacity: 0; transform: translateY(9px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes bkBarUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}
@keyframes bkShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- the rail of steps ---------- */
.bk-steps {
  list-style: none; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 26px); align-items: center;
}
.bk-step button {
  display: flex; align-items: center; gap: 10px; background: none; border: 0;
  padding: 0; font: inherit; color: rgba(255,255,255,.42); cursor: default;
  transition: color .3s;
}
.bk-step button:not(:disabled) { cursor: pointer; }
.bk-step button:not(:disabled):hover { color: #fff; }
.bk-step-n {
  inline-size: 30px; block-size: 30px; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); font-size: .74rem; letter-spacing: .04em;
  transition: border-color .3s, background .3s, color .3s;
}
.bk-step-l { font-size: .82rem; white-space: nowrap; }
.bk-step.on button { color: #fff; }
.bk-step.on .bk-step-n { border-color: var(--gold); background: var(--gold); color: var(--navy-950); font-weight: 600; }
.bk-step.done button { color: rgba(255,255,255,.68); }
.bk-step.done .bk-step-n { border-color: rgba(201,162,39,.6); color: var(--gold); }
.bk-step + .bk-step::before {
  content: ""; inline-size: clamp(12px, 3vw, 40px); block-size: 1px; display: block;
  background: rgba(255,255,255,.16); position: relative; overflow: hidden;
}
.bk-step.done + .bk-step::before, .bk-step.done + .bk-step.on::before {
  background: linear-gradient(90deg, rgba(201,162,39,.75), rgba(201,162,39,.25));
}
.bk-step-n { position: relative; }
.bk-step.on .bk-step-n::after {
  content: ""; position: absolute; inset: -5px; border: 1px solid rgba(201,162,39,.35);
  animation: bkHalo 2.6s ease-out infinite;
}
@keyframes bkHalo {
  0%   { opacity: .9; transform: scale(.9); }
  70%  { opacity: 0;  transform: scale(1.25); }
  100% { opacity: 0;  transform: scale(1.25); }
}
.bk-steps { counter-reset: none; }
.bk-step { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }

/* ---------- stage ---------- */
.bk-stage { padding: clamp(36px, 5vw, 68px) 0 clamp(64px, 9vw, 120px); }
.bk-screen { animation: bkFade .42s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both; }
.bk-muted { color: var(--muted); font-size: .9rem; font-weight: 300; }
.bk-pad { padding: 28px 4px; }

.bk-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin-top: clamp(24px, 3vw, 38px); padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
}

/* ---------- step 1 · the two doors ---------- */
.bk-doors {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}
.bk-door {
  position: relative; text-align: start; background: #fff; border: 1px solid var(--line);
  padding: clamp(28px, 3.6vw, 44px); display: grid; gap: 14px; align-content: start;
  font: inherit; color: inherit; cursor: pointer; overflow: hidden;
  transition: border-color .4s, transform .4s, box-shadow .4s;
}
.bk-door::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px;
  background: var(--metal); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.bk-door:hover { border-color: rgba(201,162,39,.5); transform: translateY(-4px); box-shadow: 0 22px 52px rgba(13,21,35,.10); }
.bk-door:hover::before { transform: scaleY(1); }
.bk-door-n { color: var(--gold-deep); font-size: .76rem; letter-spacing: .22em; }
.bk-door h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 2rem); margin: 0; }
.bk-door > p { color: var(--muted); font-weight: 300; line-height: 1.95; font-size: .95rem; margin: 0; }
.bk-door-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.bk-door-list li {
  color: var(--ink); font-size: .86rem; font-weight: 300;
  display: flex; align-items: start; gap: 9px; line-height: 1.7;
}
.bk-door-list li::before {
  content: ""; inline-size: 6px; block-size: 6px; margin-top: 8px; flex: none;
  background: var(--gold); transform: rotate(45deg);
}
.bk-door-go {
  margin-top: 8px; color: var(--navy); font-size: .84rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.bk-arrow {
  inline-size: 20px; block-size: 1px; background: currentColor; display: block;
  transition: inline-size .35s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.bk-door:hover .bk-arrow { inline-size: 34px; }

/* ---------- step 2 · consultants ---------- */
.bk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.bk-card {
  background: #fff; border: 1px solid var(--line); padding: clamp(24px, 2.8vw, 32px);
  display: grid; gap: 16px; align-content: start;
  transition: border-color .35s, box-shadow .35s, transform .35s;
}
.bk-card.live { cursor: pointer; }
.bk-card.live:hover { border-color: rgba(201,162,39,.5); box-shadow: 0 20px 46px rgba(13,21,35,.09); transform: translateY(-3px); }
.bk-card.live:hover .btn { background: var(--navy); color: #fff; }
.bk-card-top { display: flex; gap: 14px; align-items: center; }
.bk-card h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.28rem; margin: 0; }
.bk-role { color: var(--gold-deep); font-size: .8rem; margin: 4px 0 0; font-weight: 400; }
.bk-bio { color: var(--muted); font-size: .9rem; font-weight: 300; line-height: 1.95; margin: 0; }
.bk-ph {
  inline-size: 58px; block-size: 58px; flex: none; border-radius: 50%;
  background: var(--ivory-2) center/cover no-repeat; border: 1px solid var(--line);
}
.bk-ph-empty {
  display: grid; place-items: center; font-family: var(--f-display);
  font-size: 1.4rem; color: var(--navy); background: var(--ivory);
}
.bk-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0;
  padding: 15px 0; border-block: 1px solid var(--line-2);
}
.bk-meta dt { font-size: .68rem; color: var(--muted-2); margin-bottom: 5px; letter-spacing: .02em; }
.bk-meta dd { margin: 0; font-size: .85rem; font-weight: 500; line-height: 1.5; }
.bk-card .btn, .bk-pay { justify-content: center; }
.bk-card .btn:disabled, .bk-pay:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- step 3 & 4 · two columns with a standing summary ---------- */
.bk-two {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(20px, 3vw, 44px); align-items: start;
}
.bk-two > * { min-width: 0; }
/* The month and the day's hours sit side by side while there is room,
   so the panel never leaves a void beside a narrow calendar. */
.bk-panel {
  background: #fff; border: 1px solid var(--line); padding: clamp(20px, 2.6vw, 32px);
  display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
.bk-panel > p { grid-column: 1 / -1; }

/* ---------- the month ---------- */
.bk-cal { min-width: 0; }
.bk-cal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--line-2);
}
.bk-cal-title { font-family: var(--f-display); font-size: 1.24rem; font-weight: 500; }
.bk-cal-nav {
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); color: var(--navy);
  font-size: 1.1rem; line-height: 1; cursor: pointer; transition: border-color .25s, background .25s;
}
.bk-cal-nav:hover:not(:disabled) { border-color: var(--gold); background: var(--ivory); }
.bk-cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal-names span {
  text-align: center; font-size: .64rem; color: var(--muted-2);
  padding: 6px 0 8px; letter-spacing: .02em;
}
.bk-cell {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; gap: 3px;
  background: none; border: 1px solid transparent; color: var(--muted-2);
  font: inherit; font-size: .9rem; cursor: not-allowed;
  transition: border-color .2s, background .2s, color .2s;
}
.bk-cell.empty { border: 0; }
.bk-cell.open {
  color: var(--ink); border-color: var(--line); background: #fff; cursor: pointer;
  animation: bkPop .3s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both;
}
.bk-cell.open:hover { border-color: rgba(201,162,39,.6); background: var(--ivory); transform: translateY(-1px); }
.bk-cell.on {
  background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px rgba(29,44,77,.22);
}
.bk-cal { animation: bkFade .34s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both; }
.bk-dot {
  inline-size: 4px; block-size: 4px; background: var(--gold); border-radius: 50%;
  display: block; position: absolute; bottom: 7px;
}
.bk-cell.on .bk-dot { background: var(--gold-lift); }
.bk-cal-key {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
  font-size: .74rem; color: var(--muted-2);
}
.bk-cal-key .bk-dot { position: static; }

/* ---------- the day's hours ---------- */
.bk-times { min-width: 0; }
@media (max-width: 860px) {
  .bk-times { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
}
.bk-times-day { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 16px; }
.bk-timegroup { margin-bottom: 18px; }
.bk-timegroup-l {
  display: block; font-size: .7rem; color: var(--muted-2); margin-bottom: 8px;
  letter-spacing: .1em;
}
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.bk-slot {
  position: relative; background: #fff; border: 1px solid var(--line); cursor: pointer;
  font: inherit; padding: 13px 8px; text-align: center; color: var(--ink); overflow: hidden;
  transition: border-color .28s var(--ease-out, ease), background .28s, color .28s,
              transform .28s var(--ease-out, ease), box-shadow .28s;
  animation: bkPop .32s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}
.bk-slot::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; block-size: 2px;
  background: var(--metal); transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--ease-out, ease);
}
.bk-slot:hover { border-color: rgba(201,162,39,.55); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,21,35,.07); }
.bk-slot:hover::after { transform: scaleX(.5); }
.bk-slot.on {
  background: var(--ivory); border-color: var(--gold); color: var(--navy);
  font-weight: 600; box-shadow: inset 0 0 0 1px rgba(201,162,39,.35);
}
.bk-slot.on::after { transform: scaleX(1); }

/* ---------- the standing summary ---------- */
.bk-sum {
  position: sticky; top: 96px; background: var(--navy); color: #fff;
  padding: clamp(20px, 2.4vw, 26px); display: grid; gap: 18px;
}
.bk-sum-top { display: flex; align-items: center; gap: 12px; }
.bk-sum-top b { display: block; font-size: .98rem; font-weight: 500; }
.bk-sum-top span { display: block; color: rgba(255,255,255,.55); font-size: .76rem; margin-top: 3px; }
.bk-sum .bk-ph { inline-size: 46px; block-size: 46px; border-color: rgba(255,255,255,.18); }
.bk-sum .bk-ph-empty { background: rgba(255,255,255,.08); color: var(--gold); }
.bk-sum-list { margin: 0; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.bk-sum-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bk-sum-list dt { color: rgba(255,255,255,.5); font-size: .76rem; }
.bk-sum-list dd { margin: 0; font-size: .86rem; text-align: end; }
.bk-sum-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
}
.bk-sum-total span { color: rgba(255,255,255,.5); font-size: .78rem; }
.bk-sum-total b { color: var(--gold-lift); font-size: 1.16rem; font-weight: 600; }
.bk-sum-list dd { transition: color .3s; }
.bk-sum::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; block-size: 2px; background: var(--metal);
}
.bk-sum { position: sticky; overflow: hidden; }

/* ---------- the standing action bar ---------- */
.bk-stage.has-bar { padding-bottom: clamp(120px, 12vw, 160px); }
.bk-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  background: rgba(10,15,26,.92); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201,162,39,.28);
  animation: bkBarUp .38s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both;
}
.bk-bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0;
}
.bk-bar-info { display: grid; gap: 3px; min-width: 0; }
.bk-bar-info span { color: rgba(255,255,255,.5); font-size: .72rem; }
.bk-bar-info b { color: #fff; font-size: .95rem; font-weight: 500; overflow-wrap: anywhere; }
.bk-bar .btn { flex: none; }

/* ---------- waiting ---------- */
.bk-skel-card, .bk-skel-cal span {
  background: linear-gradient(100deg, var(--ivory) 30%, #fff 45%, var(--ivory) 60%);
  background-size: 200% 100%; animation: bkShimmer 1.4s linear infinite;
}
.bk-skel-card { block-size: 300px; border: 1px solid var(--line); }
.bk-skel-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-skel-cal span { aspect-ratio: 1 / 1; animation-delay: calc(var(--i, 0) * 26ms); }

/* ---------- step 4 · details ---------- */
.bk-form {
  background: #fff; border: 1px solid var(--line);
  padding: clamp(22px, 2.8vw, 34px); display: grid; gap: 18px; align-content: start;
}
.bk-f { display: grid; gap: 7px; }
.bk-f > span { font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
.bk-f input, .bk-f textarea {
  font: inherit; font-size: .94rem; padding: 12px 14px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); width: 100%; resize: vertical;
  transition: border-color .25s, background .25s;
}
.bk-f input::placeholder, .bk-f textarea::placeholder { color: var(--muted-2); }
.bk-f input:focus, .bk-f textarea:focus { outline: none; border-color: var(--navy); background: #fff; }
.bk-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-mode {
  background: var(--paper); border: 1px solid var(--line); cursor: pointer; font: inherit;
  font-size: .84rem; padding: 10px 16px; color: var(--ink);
  transition: border-color .2s, background .2s, color .2s;
}
.bk-mode:hover { border-color: var(--gold); }
.bk-mode.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- step 5 · the receipt ---------- */
.bk-review { display: grid; place-items: center; }
.bk-receipt {
  width: min(560px, 100%); background: #fff; border: 1px solid var(--line);
  padding: clamp(24px, 3.2vw, 40px);
}
.bk-rrow {
  display: grid; grid-template-columns: 34% 1fr auto; gap: 12px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
}
.bk-rrow > span { color: var(--muted); font-size: .8rem; }
.bk-rrow > b { font-weight: 500; font-size: .94rem; overflow-wrap: anywhere; }
.bk-edit {
  background: none; border: 0; color: var(--gold-deep); font: inherit; font-size: .74rem;
  cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px;
}
.bk-edit:hover { color: var(--navy); }
.bk-rtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 0 22px; margin-top: 4px;
}
.bk-rtotal span { color: var(--muted); font-size: .84rem; }
.bk-rtotal b { font-family: var(--f-display); font-size: 1.7rem; font-weight: 500; }
.bk-pay { margin-top: 4px; }
.bk-err { color: #B42318; font-size: .85rem; background: rgba(180,35,24,.07); padding: 11px 13px; margin: 0 0 14px; }
.bk-note { color: var(--muted-2); font-size: .75rem; margin: 12px 0 0; text-align: center; line-height: 1.8; }
.bk-secure { color: var(--muted-2); opacity: .8; }

/* ---------- narrow ---------- */
@media (max-width: 1080px) {
  .bk-two { grid-template-columns: 1fr; }
  .bk-sum { position: static; order: -1; }
}
@media (max-width: 860px) {
  .bk-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bk-bar-in { padding: 11px 0; }
  .bk-bar-info span { display: none; }
  .bk-bar .btn { padding-inline: 20px; }
}
@media (max-width: 560px) {
  .bk-f2 { grid-template-columns: 1fr; }
  .bk-meta { grid-template-columns: 1fr 1fr; }
  /* numbers only, except the step being answered right now */
  .bk-step-l { display: none; }
  .bk-step.on .bk-step-l { display: block; font-size: .78rem; }
  .bk-step + .bk-step::before { inline-size: 10px; }
  .bk-rrow { grid-template-columns: 1fr auto; }
  .bk-rrow > span { grid-column: 1 / -1; }
}

/* ============================================================
   The client's own appointment page — server rendered, no React.
   ============================================================ */
.ap-body { background: var(--paper); color: var(--ink); font-family: var(--f-body); margin: 0; }
.ap-wrap { width: min(620px, 92vw); margin: 0 auto; padding: clamp(40px, 8vw, 90px) 0; }
.ap-card { background: #fff; border: 1px solid var(--line); }
.ap-head {
  background:
    radial-gradient(120% 90% at 80% -20%, rgba(201,162,39,.18), transparent 60%),
    linear-gradient(158deg, var(--navy-900), var(--navy-700));
  color: #fff; padding: 32px clamp(22px, 4vw, 36px);
}
.ap-head .eyebrow { color: var(--gold); font-size: .72rem; letter-spacing: .2em; }
.ap-head h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 8px 0 0; }
.ap-state { display: inline-block; margin-top: 14px; padding: 6px 14px; font-size: .76rem; background: rgba(255,255,255,.12); }
.ap-state.ok { background: rgba(23,140,122,.22); color: #7FE3D2; }
.ap-state.bad { background: rgba(180,35,24,.2); color: #FFB4AC; }
.ap-body-in { padding: clamp(22px, 4vw, 36px); }
.ap-kv { display: grid; grid-template-columns: 40% 1fr; gap: 12px 16px; margin: 0 0 20px; font-size: .92rem; }
.ap-kv dt { color: var(--muted); font-size: .82rem; }
.ap-kv dd { margin: 0; font-weight: 500; }
.ap-ref { text-align: center; border: 1px solid var(--line); padding: 18px; margin-bottom: 22px; }
.ap-ref span { display: block; font-size: .74rem; color: var(--muted); }
.ap-ref b { font-size: 1.5rem; letter-spacing: .18em; direction: ltr; display: block; margin-top: 6px; }
.ap-msg { background: var(--ivory); padding: 14px 16px; font-size: .9rem; line-height: 1.9; white-space: pre-wrap; margin-bottom: 20px; }
.ap-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.ap-acts .btn { text-decoration: none; }
.ap-foot { border-top: 1px solid var(--line); padding: 16px clamp(22px, 4vw, 36px); font-size: .78rem; color: var(--muted); line-height: 2; }
.ap-foot a { color: var(--navy); }