/* Booking page: the intro on the left, the form on the right; one column on phones. */
.book { padding: clamp(2rem, 1rem + 3vw, 4rem) 0 clamp(4rem, 2rem + 5vw, 6rem); }
.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.book-intro { position: sticky; top: 96px; }
.book-back { font-size: .9375rem; margin-bottom: 18px; }
.book-back a { color: var(--soft); text-underline-offset: 4px; }
.book h1 { font: 500 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1.02 var(--fd); font-variation-settings: "opsz" 72; letter-spacing: -.03em; margin-bottom: 16px; }
.lede { font-size: 1.125rem; max-width: 46ch; }
.book-how { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.book-how li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline; }
.book-how li::before { content: counter(s); font: 500 1.25rem/1 var(--fd); color: var(--soft); }
.book-call { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.book-call a { font-weight: 700; text-underline-offset: 4px; white-space: nowrap; }

.book-form, .book-done { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.25rem, .8rem + 2vw, 2.25rem); }
.book-form fieldset { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.book-form legend { padding: 0; margin-bottom: 14px; font: 500 1.375rem/1.2 var(--fd); }
.f { margin-bottom: 16px; min-width: 0; }
.f label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--soft); }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #b9bfc5; border-radius: 4px;
  background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--fb); }
.f textarea { resize: vertical; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.f [aria-invalid="true"] { border-color: #b3261e; }
.hint { margin-top: 6px; font-size: .875rem; color: var(--soft); }
.err { margin-top: 6px; font-size: .875rem; color: #b3261e; font-weight: 600; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.pick { display: flex; gap: 16px; align-items: flex-start; }
.pick .f { flex: 1; min-width: 0; }
.pick-img { width: 88px; height: 88px; object-fit: cover; border-radius: 4px; background: var(--beige); flex: none; }
.seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 16px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; text-align: center;
  border: 1px solid #b9bfc5; border-radius: 4px; font-weight: 600; font-size: .9375rem; transition: background-color .15s, color .15s; }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.book-send { width: 100%; min-height: 52px; }
.book-send[aria-busy="true"] { opacity: .7; cursor: progress; }
.send-err { text-align: center; }
.book-done { scroll-margin-top: 90px; }
.book-done h2 { font: 500 2rem/1.1 var(--fd); margin-bottom: 12px; }
.book-done p { font-size: 1.0625rem; }
.book-done .soft { color: var(--soft); margin-top: 10px; }
.book-done .row { margin-top: 24px; }

@media (max-width: 900px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); }
  .book-intro { position: static; }
  .book-how { margin-top: 20px; }
}
@media (max-width: 520px) { .two { grid-template-columns: minmax(0, 1fr); } .seg { grid-template-columns: minmax(0, 1fr); } .pick-img { width: 64px; height: 64px; } }