/* The booking flow, in the site's own clothes: gold #D4AF37 on #0a0a0a, Playfair Display for
   headings, Inter for everything else, square buttons with wide tracking (his .btn-gold). */
/* The snapshot's page is a few px wider than a phone (an element overflows), which made the
   layout viewport 399px on a 375px phone and clipped the sheet's right edge. Clamp it. */
html, body { overflow-x: hidden !important; max-width: 100% !important; }
#bk { position: fixed; inset: 0; width: 100%; z-index: 9999; display: none; background: rgba(10,10,10,.92); backdrop-filter: blur(6px); overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: Inter, system-ui, sans-serif; color: #e5e5e5; }
#bk.on { display: block; }
#bk .sheet { max-width: 520px; margin: 0 auto; min-height: 100%; background: #0f0f0f; border-left: 1px solid #d4af3733; border-right: 1px solid #d4af3733; padding: 0 0 84px; }
#bk .top { position: sticky; top: 0; background: #0f0f0f; border-bottom: 1px solid #d4af3733; padding: 18px 22px 14px; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
#bk .brand { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: #d4af37; font-size: 20px; letter-spacing: .02em; }
#bk .brand small { display: block; font-family: Inter, sans-serif; font-weight: 500; color: #a1a1aa; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; margin-top: 2px; }
#bk .x { background: none; border: 1px solid #d4af374d; color: #d4af37; width: 44px; height: 44px; font-size: 20px; cursor: pointer; }
#bk .steps { display: flex; gap: 6px; padding: 16px 22px 0; }
#bk .steps i { flex: 1; height: 3px; background: #27272a; display: block; }
#bk .steps i.on { background: #d4af37; }
#bk .body { padding: 22px; }
#bk .eyebrow { color: #d4af37; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; margin: 0 0 8px; }
#bk h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 28px; color: #fff; margin: 0 0 6px; line-height: 1.1; }
#bk .lede { color: #a1a1aa; font-size: 14px; margin: 0 0 20px; line-height: 1.5; }
#bk .svc { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; text-align: left; background: #141414; border: 1px solid #27272a; color: #e5e5e5; padding: 16px 18px; margin-bottom: 10px; cursor: pointer; min-height: 64px; }
#bk .svc:hover, #bk .svc.on { border-color: #d4af37; background: #171512; }
#bk .svc b { display: block; font-size: 15px; color: #fff; }
#bk .svc small { color: #a1a1aa; font-size: 12px; }
#bk .svc .pr { font-family: 'Playfair Display', Georgia, serif; color: #d4af37; font-size: 20px; font-weight: 700; white-space: nowrap; }
#bk .days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
#bk .day { flex: none; width: 64px; min-height: 64px; background: #141414; border: 1px solid #27272a; color: #e5e5e5; cursor: pointer; text-align: center; padding: 8px 0; }
#bk .day b { display: block; font-size: 18px; color: #fff; }
#bk .day small { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #a1a1aa; }
#bk .day.on { border-color: #d4af37; background: #171512; }
#bk .day.on b { color: #d4af37; }
#bk .day.off { opacity: .35; cursor: default; }
#bk .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#bk .slot { min-height: 52px; background: #141414; border: 1px solid #27272a; color: #e5e5e5; font-size: 14px; cursor: pointer; }
#bk .slot.on { border-color: #d4af37; color: #d4af37; background: #171512; }
#bk .slot.taken { display: none; }
#bk .lab { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #a1a1aa; margin: 14px 0 6px; }
#bk input { width: 100%; background: #141414; border: 1px solid #27272a; color: #fff; font-size: 16px; padding: 14px 14px; font-family: Inter, sans-serif; min-height: 52px; }
#bk input:focus { outline: none; border-color: #d4af37; }
#bk .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#bk .rule { border: 1px solid #d4af37; padding: 14px 16px; margin: 18px 0 6px; font-size: 13.5px; line-height: 1.5; color: #e5e5e5; }
#bk .rule b { color: #d4af37; }
#bk .gold { display: flex; align-items: center; justify-content: center; width: 100%; background: #d4af37; color: #0a0a0a; border: 0; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 18px 20px; min-height: 56px; margin-top: 20px; cursor: pointer; font-family: Inter, sans-serif; }
#bk .gold:hover { background: #e0c04e; }
#bk .ghost { display: block; width: 100%; background: none; border: 0; color: #a1a1aa; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; padding: 16px; min-height: 48px; cursor: pointer; font-family: Inter, sans-serif; }
#bk .sum { background: #141414; border: 1px solid #d4af374d; padding: 18px; margin: 6px 0 16px; }
#bk .sum div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #1f1f1f; font-size: 14px; }
#bk .sum div:last-child { border: 0; }
#bk .sum span:last-child { color: #fff; font-weight: 600; text-align: right; }
#bk .check { width: 72px; height: 72px; border: 2px solid #d4af37; color: #d4af37; display: flex; align-items: center; justify-content: center; font-size: 34px; margin: 6px 0 18px; }
#bk .note { font-size: 11px; color: #71717a; margin-top: 16px; line-height: 1.5; }
#bk .mock { white-space: nowrap; position: fixed; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: #71717a; padding: 6px; background: #0a0a0a; border-top: 1px solid #1f1f1f; z-index: 3; }

/* Phones: the site's header Book button was desktop-only and the hamburger's menu is not in
   this snapshot — show the button, hide the dead control. */
@media (max-width: 639px) { header a[data-book].hidden, nav a[data-book].hidden { display: inline-flex !important; } header button[aria-label="Open menu"], nav button[aria-label="Open menu"] { display: none !important; } }
@media (max-width: 639px) {
  header a[data-book], nav a[data-book] { white-space: nowrap !important; padding: 10px 14px !important; font-size: 11px !important; }
  /* the hero's "Scroll" cue lands on top of the second button on a short phone */
  .absolute.bottom-10.left-1\/2 { display: none !important; }
}