/* Booking page, standalone on purpose.
   It does NOT load gridpoint-enhance.css. That stylesheet is the theme layer
   that converts the old dark site to a light one, and its very first rules
   are html,body{background:var(--gp-bg) !important} plus a redefinition of
   --white to navy. Loading it here repainted this page white and left light
   grey type on a white ground. Trap 2: an !important declaration beats
   anything this page can say about itself, so the answer is not to fight it
   but not to invite it.
   The faces are declared here against the same woff2 files the rest of the
   site uses, under their real family names. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-display:swap;
  src:url('ASSETS/fonts/archivo-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('ASSETS/fonts/manrope-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('ASSETS/fonts/instrumentserif-latin.woff2') format('woff2')}

:root{--navy:#011134;--deep:#000B24;--orange:#FE8B03;--ink:#DCE5F7;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--orange);color:#011134;border:0;border-radius:999px;
  padding:14px 26px;font-family:'Archivo',sans-serif;font-weight:800;font-size:15.5px;
  letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:background .18s ease,transform .18s ease}
.btn-gold:hover{background:#F07800;transform:translateY(-1px)}
.btn-gold:disabled{opacity:.6;cursor:default;transform:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Booking page. Deliberately its own stylesheet and its own small page:
   the whole job here is to pick a time, so the site's navigation, menu and
   floating controls are left off. One decision, nothing competing with it. */
.bk-body{background:var(--navy);color:#fff;margin:0;
  font-family:'Manrope',system-ui,sans-serif;
  min-height:100vh;
  background-image:
    radial-gradient(62% 48% at 84% 4%,rgba(254,139,3,.17),transparent 68%),
    radial-gradient(52% 44% at 4% 96%,rgba(0,149,254,.14),transparent 70%)}
.bk-back{position:absolute;top:26px;left:26px;color:rgba(255,255,255,.72);
  text-decoration:none;font-weight:600;font-size:14.5px;letter-spacing:.01em}
.bk-back:hover{color:var(--orange)}
.bk-wrap{max-width:980px;margin:0 auto;padding-inline:20px;padding-block:96px 90px}

.bk-head{max-width:720px;margin-bottom:clamp(30px,4vw,46px)}
.bk-eyebrow{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 12px}
.bk-head h1{font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(32px,5.4vw,56px);line-height:1.04;letter-spacing:-.025em;
  margin:0 0 16px;text-wrap:balance}
.bk-head h1 em{font-style:normal;font-family:'Instrument Serif',Georgia,serif;
  color:var(--orange)}
.bk-lead{color:var(--ink);font-size:clamp(16px,1.5vw,19px);
  line-height:1.6;margin:0 0 14px}
.bk-tz{color:rgba(255,255,255,.62);font-size:14px;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;line-height:1.55}
.bk-tz strong{color:#fff}
.bk-tz-lead{display:inline}
.bk-tz-tail{flex-basis:100%;margin-top:2px;max-width:640px}
/* the timezone picker: a real select, so it works with a keyboard, a screen
   reader and a phone's native wheel rather than a hand built menu */
.bk-tz-sel{background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.25);border-radius:9px;
  font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:600;
  padding:5px 9px;cursor:pointer;max-width:min(62vw,260px)}
.bk-tz-sel:hover{border-color:var(--orange)}
.bk-tz-sel option{background:#011134;color:#fff}
/* the next day marker on a slot whose local date has rolled over */
.bk-slot b i{font-style:normal;font-size:11.5px;font-weight:700;
  color:var(--orange);vertical-align:2px;margin-left:3px}

/* day strip */
.bk-days{display:flex;gap:9px;overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.bk-day{flex:0 0 auto;scroll-snap-align:start;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.15);border-radius:13px;
  padding:11px 15px;color:#fff;cursor:pointer;min-width:84px;text-align:center;
  font-family:'Manrope',sans-serif;transition:all .18s ease}
.bk-day:hover{border-color:rgba(254,139,3,.55)}
.bk-day[aria-selected="true"]{background:var(--orange);
  border-color:var(--orange);color:#011134}
.bk-day b{display:block;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:15.5px;letter-spacing:-.01em}
.bk-day span{display:block;font-size:12px;opacity:.8;margin-top:2px}

/* slots */
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:10px;margin-top:22px}
.bk-slot{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15);
  border-radius:13px;padding:13px 10px;color:#fff;cursor:pointer;text-align:center;
  font-family:'Manrope',sans-serif;transition:all .18s ease}
.bk-slot:hover{background:rgba(254,139,3,.14);border-color:var(--orange);
  transform:translateY(-2px)}
.bk-slot b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:17px}
.bk-slot span{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px}

/* form, confirmation, trust */
.bk-form,.bk-done{background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);border-radius:20px;
  padding:clamp(24px,3vw,36px);max-width:560px}
.bk-change{background:none;border:0;color:var(--orange);cursor:pointer;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;padding:0;margin-bottom:14px}
.bk-form h2,.bk-done h2{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(21px,2.3vw,27px);margin:0 0 6px;letter-spacing:-.015em}
.bk-chosen-sub{color:var(--orange);font-size:14.5px;margin:0 0 22px}
.bk-label{display:block;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin:16px 0 7px}
.bk-label span{text-transform:none;letter-spacing:0;font-weight:400;opacity:.55}
.bk-input{width:100%;box-sizing:border-box;background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:13px 15px;
  color:#fff;font-family:'Manrope',sans-serif;font-size:15.5px}
.bk-input::placeholder{color:rgba(255,255,255,.4)}
.bk-input:focus{outline:3px solid var(--orange);outline-offset:2px;
  border-color:transparent}
.bk-area{resize:vertical;min-height:84px}
.bk-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bk-submit{margin-top:22px;width:100%;justify-content:center}
.bk-err{color:#FFB4A0;font-size:14.5px;margin:12px 0 0}
.bk-note{color:rgba(255,255,255,.55);font-size:13.5px;margin:14px 0 0;line-height:1.55}

.bk-tick svg{width:56px;height:56px;fill:none;stroke:var(--orange);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.bk-when{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(18px,2vw,22px);color:var(--orange);margin:0 0 4px}
.bk-yours,.bk-sent{color:var(--ink);font-size:15px;margin:0 0 6px}
.bk-done .btn-gold{margin-top:18px;display:inline-flex}

.bk-empty{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
  border-radius:20px;padding:clamp(24px,3vw,36px);max-width:560px}
.bk-empty h2{font-family:'Archivo',sans-serif;font-weight:800;margin:0 0 10px}
.bk-empty p{color:var(--ink);margin:0 0 18px}

.bk-trust{margin-top:clamp(44px,6vw,72px);padding-top:30px;
  border-top:1px solid rgba(255,255,255,.14);max-width:760px}
.bk-trust h2{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(17px,1.8vw,21px);margin:0 0 16px}
.bk-trust ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.bk-trust li{color:var(--ink);font-size:15px;line-height:1.6;
  padding-left:20px;position:relative}
.bk-trust li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--orange)}
.bk-trust strong{color:#fff}

@media (max-width:620px){
  .bk-wrap{padding-block:80px 64px}
  .bk-slots{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
  .bk-back{top:18px;left:18px}
}
