/* Attua / shared booking modal. One stylesheet for every page.
   The DOM is built by booking-modal.js, so pages only carry this link and the script. */
.bkm{position:fixed;inset:0;z-index:1000;display:flex}
.bkm[hidden]{display:none}
.bkm__scrim{position:absolute;inset:0;background:rgba(1,33,56,.72);backdrop-filter:blur(2px)}
.bkm__sheet{position:relative;display:flex;flex-direction:column;width:100%;max-height:100%;
  margin:0;background:#f0f0e8;color:#012138;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;font:400 18px/1.4 var(--sans,Inter,Arial,sans-serif)}
.bkm__sheet ::selection{background:#012138;color:#f0f0e8}
.bkm__head{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:1fr 48px;gap:16px;
  align-items:start;padding:22px 22px 18px;background:#f0f0e8;border-bottom:1px solid rgba(1,33,56,.22)}
.bkm__eyebrow{margin:0 0 10px;font:400 10px/1.35 var(--mono,'IBM Plex Mono',monospace);
  letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.bkm__title{margin:0;font-weight:400;font-size:clamp(26px,5.6vw,34px);line-height:1.08;letter-spacing:-.035em;max-width:22ch}
.bkm__close{width:48px;height:48px;margin:-6px -6px 0 0;display:grid;place-items:center;
  background:transparent;color:#012138;border:1px solid rgba(1,33,56,.42);border-radius:0;
  font:400 26px/1 var(--sans,Inter,Arial,sans-serif);cursor:pointer}
.bkm__close:hover{background:#012138;color:#f0f0e8}
.bkm__body{padding:22px 22px 32px}
.bkm__lede{margin:0;font-size:17px;line-height:1.5;max-width:46ch}
.bkm__required{margin:12px 0 0;font:400 12px/1.5 var(--mono,'IBM Plex Mono',monospace)}
.bkm__notice{margin:20px 0 0;padding:14px 16px;border:1px solid #012138;
  font:400 12px/1.55 var(--mono,'IBM Plex Mono',monospace)}
.bkm__errors{margin:20px 0 0;padding:14px 16px;border:1px solid #012138;
  font:400 12px/1.55 var(--mono,'IBM Plex Mono',monospace)}
.bkm__errors:focus-visible{outline:2px solid #012138;outline-offset:3px}
.bkm__errors ul{margin:8px 0 0;padding-left:18px}
.bkm__errors a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.bkm__field{margin-top:20px}
.bkm__field label{display:flex;justify-content:space-between;gap:15px;margin:0 0 8px;
  font:400 13px/1.4 var(--sans,Inter,Arial,sans-serif)}
.bkm__field label span{font:400 10px/1.5 var(--mono,'IBM Plex Mono',monospace);opacity:.8}
/* 16px keeps iOS from zooming the page when a field takes focus. */
.bkm__field input,.bkm__field textarea{width:100%;min-height:52px;padding:14px;
  border:1px solid rgba(1,33,56,.42);border-radius:0;background:rgba(255,255,255,.55);color:#012138;
  font:400 16px/1.45 var(--sans,Inter,Arial,sans-serif);box-shadow:none;-webkit-appearance:none;appearance:none}
.bkm__field textarea{min-height:104px;resize:vertical}
.bkm__field input::placeholder,.bkm__field textarea::placeholder{color:#4d626f;opacity:1}
.bkm__field input:hover,.bkm__field textarea:hover{border-color:#012138}
.bkm__field input:focus-visible,.bkm__field textarea:focus-visible{outline:2px solid #012138;outline-offset:3px}
.bkm__field [aria-invalid=true]{border:2px solid #012138}
.bkm__error{margin:8px 0 0;font:400 12px/1.45 var(--mono,'IBM Plex Mono',monospace)}
.bkm__error:before{content:'↑ '}
.bkm__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bkm__privacy{margin:22px 0;font:400 12px/1.65 var(--sans,Inter,Arial,sans-serif)}
.bkm__privacy a{color:inherit;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.bkm__submit{display:flex;width:100%;min-height:56px;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 22px;background:#012138;color:#f0f0e8;border:1px solid #012138;border-radius:0;
  font:400 19px/1.2 var(--sans,Inter,Arial,sans-serif);letter-spacing:-.025em;cursor:pointer;
  transition:background .2s,color .2s}
.bkm__submit>span:last-child{font-size:26px;line-height:1}
.bkm__submit:hover{background:#f0f0e8;color:#012138}
.bkm__submit:disabled{cursor:wait;opacity:.65}
.bkm__submit:focus-visible{outline:3px solid #012138;outline-offset:4px}
.bkm__footnote{margin:14px 0 0;font:400 11px/1.6 var(--mono,'IBM Plex Mono',monospace)}
.bkm__done h3{margin:0 0 18px;font-weight:400;font-size:clamp(26px,4.4vw,34px);line-height:1.1;letter-spacing:-.035em}
.bkm__done p{margin:0 0 16px;font-size:17px;line-height:1.5;max-width:46ch}
.bkm__done:focus-visible{outline:2px solid #012138;outline-offset:4px}
.bkm__done button{min-height:48px;padding:12px 20px;background:transparent;color:#012138;
  border:1px solid #012138;border-radius:0;font:400 12px/1.4 var(--mono,'IBM Plex Mono',monospace);cursor:pointer}
.bkm__done button:hover{background:#012138;color:#f0f0e8}

/* Desktop: a centred dialog. Mobile stays a full screen sheet. */
@media (min-width:640px){
  .bkm{align-items:center;justify-content:center;padding:28px}
  .bkm__sheet{width:min(560px,100%);max-height:min(88dvh,780px);border:1px solid #012138}
  .bkm__head,.bkm__body{padding-left:34px;padding-right:34px}
  .bkm__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .bkm__row .bkm__field{margin-top:20px}
}
@media (max-width:639px){
  .bkm__sheet{min-height:100%;height:100dvh}
}

/* Motion is restrained and only ever an enhancement. */
@media (prefers-reduced-motion:no-preference){
  .bkm[data-entering] .bkm__scrim{animation:bkm-fade .2s ease-out both}
  .bkm[data-entering] .bkm__sheet{animation:bkm-rise .24s ease-out both}
}
@keyframes bkm-fade{from{opacity:0}to{opacity:1}}
@keyframes bkm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Scroll lock. The gutter keeps the page from reflowing when the scrollbar is taken away. */
html.bkm-open{overflow:hidden}
html.bkm-open body,html.bkm-open .header{padding-right:var(--bkm-gutter,0px)}
