.booking {
  color: var(--ink, #33352e);
  background: #e9e5da;
  font-family: var(--font-body, "Figtree", sans-serif);
  padding: clamp(4rem, 8vw, 8rem) max(1.25rem, calc((100vw - 1200px) / 2));
  scroll-margin-top: 6rem;
}
.booking *, .booking *::before, .booking *::after { box-sizing: border-box; }
.booking [hidden] { display: none !important; }
.booking button, .booking input { font: inherit; }
.booking button, .booking a, .booking input { -webkit-tap-highlight-color: transparent; }
.booking button { cursor: pointer; }
.booking button:focus-visible, .booking a:focus-visible, .booking input:focus-visible,
.booking [tabindex="-1"]:focus-visible { outline: 3px solid #5b624f; outline-offset: 4px; }
.booking__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; max-width: 1200px; margin: 0 auto; }
.booking__intro { padding-top: 1.5rem; }
.booking__eyebrow { font-size: .88rem; margin: 0 0 1.5rem; color: #485543; }
.booking__intro h2 { font-family: var(--font-display, "Gloock", Georgia, serif); font-size: clamp(2.25rem, 4.3vw, 3.7rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 1.5rem; text-wrap: balance; }
.booking__intro > p:not(.booking__eyebrow) { max-width: 35ch; line-height: 1.7; }
.booking__details { display: flex; gap: 2rem; border-top: 1px solid #b7bdaf; margin-top: 2rem; padding-top: 1.25rem; flex-wrap: wrap; }
.booking__details p { margin: 0; }
.booking__details strong, .booking__details span { display: block; }
.booking__details strong { font-size: 1rem; font-weight: 600; }
.booking__details span { font-size: .8rem; margin-top: .4rem; line-height: 1.4; color: #485543; }
.booking__intro .booking__contact { margin-top: 2.5rem; font-size: .94rem; }
.booking__contact a, .booking__real-contact { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; }
.booking__panel { background: #f4f1e9; border: 1px solid #bcc2b4; border-radius: 6px; overflow: hidden; min-width: 0; }
.booking__demo { background: #e5e3d8; padding: 1rem clamp(1.1rem, 3vw, 2rem); }
.booking__demo-label { display: block; font-size: .82rem; font-weight: 650; line-height: 1.4; }
.booking__demo p { margin: .25rem 0 0; font-size: .82rem; line-height: 1.5; }
.booking__interactive, .booking__no-js { padding: clamp(1.1rem, 3vw, 2rem); }
.booking__steps { display: flex; list-style: none; padding: 0 0 1.3rem; margin: 0 0 1.5rem; gap: 1.5rem; border-bottom: 1px solid #d5d9cf; }
.booking__steps li { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #586251; }
.booking__steps li[aria-current="step"] { font-weight: 650; color: #33352e; }
.booking__steps li span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; border: 1px solid #b3bcaa; font-size: .73rem; }
.booking__steps li[aria-current="step"] span { color: #fff; background: #5b624f; border-color: #5b624f; }
.booking__panel-title { font-size: 1.55rem; line-height: 1.2; font-weight: 500; letter-spacing: -.025em; margin: 0 0 1.5rem; text-wrap: balance; }
.booking__fieldset { min-width: 0; margin: 0 0 1.45rem; border: 0; padding: 0; }
.booking__fieldset legend { font-size: .88rem; font-weight: 550; margin-bottom: .65rem; padding: 0; }
.booking__types { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.booking__type { border: 1px solid #b5bfad; border-radius: 5px; background: transparent; color: #33352e; padding: .7rem .75rem; min-height: 48px; font-size: .88rem; line-height: 1.4; }
.booking__type span { font-size: .65rem; margin-left: .2rem; color: #5b624f; }
.booking__type[aria-pressed="true"] { background: #e5e3d8; border-color: #5b624f; box-shadow: inset 0 0 0 1px #5b624f; }
.booking__week-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.booking__week-nav p { text-align: center; margin: 0; min-width: 0; }
.booking__week-nav strong { display: block; font-size: .95rem; font-weight: 600; }
.booking__week-nav p span { display: block; font-size: .75rem; color: #5b624f; margin-top: .2rem; }
.booking__arrow { display: grid; place-items: center; height: 44px; width: 44px; flex: 0 0 44px; background: transparent; color: #33352e; border: 1px solid #b5bfad; border-radius: 50%; }
.booking__arrow:disabled { color: #858e7e; border-color: #d5d9cf; cursor: not-allowed; }
.booking__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.booking__day { min-height: 76px; border: 1px solid #c3cbbb; border-radius: 5px; background: transparent; color: #33352e; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: .3rem; padding: .5rem .25rem; }
.booking__day-name { font-size: .75rem; }
.booking__day-number { font-size: 1.2rem; font-weight: 500; }
.booking__day[aria-pressed="true"] { background: #5b624f; color: #fff; border-color: #5b624f; }
.booking__slots { display: flex; gap: .55rem; flex-wrap: wrap; }
.booking__slot { min-height: 44px; min-width: 76px; padding: .6rem 1rem; color: #33352e; background: transparent; border: 1px solid #b5bfad; border-radius: 4px; font-size: .9rem; }
.booking__slot[aria-pressed="true"] { background: #5b624f; color: #fff; border-color: #5b624f; }
.booking__type:hover, .booking__slot:hover, .booking__day:hover, .booking__arrow:not(:disabled):hover { border-color: #33352e; }
.booking__empty { font-size: .9rem; line-height: 1.6; margin: .25rem 0 0; color: #5b624f; }
.booking__selection { min-height: 45px; font-size: .82rem; line-height: 1.55; margin: 0 0 1rem; color: #485543; }
.booking__primary { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; border: 1px solid #5b624f; border-radius: 4px; padding: .85rem 1rem; background: #5b624f; color: #fff; font-size: .92rem; font-weight: 550; text-align: left; line-height: 1.45; transition: background-color 160ms ease-out; }
.booking__primary:hover { background: #474e3d; }
.booking__primary:disabled { background: #e2e5db; border-color: #d5d9cf; color: #616b58; cursor: not-allowed; }
.booking__fine { margin: .7rem 0 0; font-size: .73rem; text-align: center; line-height: 1.5; color: #5b624f; }
.booking__back { display: inline-flex; align-items: center; min-height: 44px; gap: .65rem; background: transparent; border: 0; color: #485543; padding: 0; margin: -.6rem 0 1rem; font-size: .85rem; text-decoration: underline; text-underline-offset: 4px; }
.booking__appointment { font-size: .95rem; font-weight: 550; line-height: 1.65; padding-bottom: 1rem; margin: -.5rem 0 1rem; border-bottom: 1px solid #d5d9cf; }
.booking--expanded [data-booking-view="details"] { padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid #c9c9b9; }
.booking__appointment--review { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 1rem; border: 1px solid #c9c9b9; border-radius: 5px; background: #edece2; padding: .8rem; margin: 0 0 1.25rem; }
.booking__review-time { display: flex; align-items: center; justify-content: center; min-height: 64px; border-radius: 4px; color: #fff; background: #5b624f; font-size: 1.1rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.booking__review-copy { display: flex; flex-direction: column; gap: .18rem; min-width: 0; line-height: 1.4; }
.booking__review-label { font-size: .7rem; font-weight: 400; color: #5b624f; }
.booking__review-copy strong { font-size: .9rem; font-weight: 550; }
.booking__review-meta { font-size: .75rem; font-weight: 400; color: #5b624f; }
.booking__slot--transferring, .booking__review-time--arriving { opacity: 0; }
.booking__slot--transferring:focus-visible { opacity: 1; }
.booking__transfer { position: fixed; z-index: 80; display: flex; align-items: center; justify-content: center; pointer-events: none; border-radius: 4px; color: #fff; background: #5b624f; font: 550 .9rem var(--font-body, "Figtree", sans-serif); font-variant-numeric: tabular-nums; line-height: 1; box-sizing: border-box; contain: layout style; will-change: transform, width, height; }
.booking__privacy { font-size: .85rem; line-height: 1.6; margin: 0 0 .65rem; color: #485543; }
.booking__example { min-height: 44px; background: transparent; border: 0; padding: 0; color: #33352e; text-decoration: underline; text-underline-offset: 4px; font-size: .85rem; margin-bottom: 1.25rem; }
.booking__field { margin-bottom: 1.2rem; }
.booking__field label { display: block; font-size: .9rem; margin-bottom: .5rem; font-weight: 550; }
.booking__field label span { font-size: .75rem; font-weight: 400; color: #5b624f; }
.booking__field input { width: 100%; height: 48px; padding: .75rem; border: 1px solid #aab69e; border-radius: 4px; background: #fffefa; color: #33352e; font-size: 1rem; }
.booking__field input[aria-invalid="true"] { border-color: #973f32; }
.booking__error { color: #88392e; font-size: .82rem; line-height: 1.5; margin: .5rem 0 0; }
.booking__form-note { font-size: .8rem; line-height: 1.5; color: #5b624f; margin: 0 0 1.1rem; }
.booking__success { padding: .5rem 0 0; }
.booking__success-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #7b8b6d; border-radius: 50%; margin-bottom: 1.5rem; color: #5b624f; font-size: 1.4rem; }
.booking__success > p:not(.booking__appointment) { font-size: .93rem; line-height: 1.65; margin: 0 0 1.25rem; }
.booking__success .booking__primary { margin-top: 2rem; }
.booking__real-contact { margin-top: .6rem; font-size: .83rem; line-height: 1.5; }
.booking__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 800px) {
  .booking__layout { grid-template-columns: 1fr; gap: 2.5rem; max-width: 580px; }
  .booking__intro { padding-top: 0; }
  .booking__intro h2 { font-size: clamp(2.35rem, 8vw, 3.8rem); }
  .booking__intro > p:not(.booking__eyebrow) { max-width: 48ch; }
  .booking__details { gap: 2rem; }
  .booking__intro .booking__contact { margin-top: 1.5rem; }
}
@media (max-width: 380px) {
  .booking { padding-left: 1rem; padding-right: 1rem; }
  .booking__interactive, .booking__demo { padding-left: 1rem; padding-right: 1rem; }
  .booking__days { gap: .3rem; }
  .booking__type { padding-left: .35rem; padding-right: .35rem; font-size: .8rem; }
  .booking__type span { display: block; margin: .1rem 0 0; }
  .booking__steps { gap: .8rem; }
  .booking__steps li { font-size: .75rem; }
  .booking__week-nav strong { font-size: .85rem; }
  .booking__appointment--review { grid-template-columns: 60px minmax(0, 1fr); gap: .65rem; padding: .7rem; }
  .booking__review-time { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .booking__primary { transition: none; }
  .booking__transfer { display: none; }
  .booking__slot--transferring, .booking__review-time--arriving { opacity: 1; }
}
