/* Scale blur modal. Rewritten from Vestris's booking modal (vestris.ai, Framer "Cal Booking Modal" code component):
   the page behind dims to rgba(10,10,12,.56) and blurs 8px while the panel grows from 98.5% to full size, both
   fading in over .22s. The overlay IS the <dialog> (full window, transparent native backdrop), so a press on the
   dimmed area outside the panel is a press on the dialog itself.
   Markup: <dialog class="sbm" data-sbm id="book" aria-labelledby="book-title">
             <div class="sbm__panel"> <button class="sbm__close" data-sbm-close aria-label="Close">...</button> ... </div>
           </dialog>
           opener: <button data-sbm-open="#book">Book a call</button>
   Knobs (on .sbm or any ancestor; fallbacks are Vestris's numbers):
     --sbm-dur / --sbm-ease     open + close time and ease (.22s / ease)
     --sbm-from                 panel start scale (.985)
     --sbm-scrim / --sbm-blur   overlay colour and page blur (rgba(10,10,12,.56) / 8px)
     --sbm-w / --sbm-h          panel size (min(1120px, 100vw - 48px) / 88dvh; phone: 100vw - 24px / 100dvh - 24px)
                                --sbm-h: auto for a content-sized dialog (it still stops at --sbm-max-h, 88dvh)
     --sbm-radius               corner radius (20px; 14px <= 767px)
     --sbm-bg / --sbm-shadow    panel fill and shadow (#fff / 0 30px 80px rgba(0,0,0,.3))
     --sbm-pad                  gap kept round the panel (12px) */
.sbm {
  position: fixed; inset: 0; z-index: 2147483000;
  width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: var(--sbm-pad, 12px); border: 0; box-sizing: border-box;
  display: none; place-items: center;
  background: var(--sbm-scrim, rgba(10, 10, 12, .56));
  -webkit-backdrop-filter: blur(var(--sbm-blur, 8px)); backdrop-filter: blur(var(--sbm-blur, 8px));
  color: inherit;
  opacity: 0;
  transition: opacity var(--sbm-dur, .22s) var(--sbm-ease, ease);
  overscroll-behavior: contain;
}
.sbm[open] { display: grid; }
.sbm::backdrop { background: transparent; }           /* the dialog itself is the scrim */
.sbm.is-open { opacity: 1; }

.sbm__panel {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column;
  width: var(--sbm-w, min(1120px, calc(100vw - 48px))); max-width: 1120px;
  height: var(--sbm-h, 88dvh); max-height: var(--sbm-max-h, 88dvh);
  border-radius: var(--sbm-radius, 20px); overflow: auto;
  background: var(--sbm-bg, #fff); color: var(--sbm-ink, #141414);
  box-shadow: var(--sbm-shadow, 0 30px 80px rgba(0, 0, 0, .3));
  opacity: 0; transform: scale(var(--sbm-from, .985));
  transition: transform var(--sbm-dur, .22s) var(--sbm-ease, ease), opacity var(--sbm-dur, .22s) var(--sbm-ease, ease);
  outline: none;
}
.sbm.is-open .sbm__panel { opacity: 1; transform: scale(1); }

@media (max-width: 767px) {
  .sbm__panel {
    width: var(--sbm-w, calc(100vw - 24px));
    height: var(--sbm-h, calc(100dvh - 24px)); max-height: var(--sbm-max-h, calc(100dvh - 24px));
    border-radius: var(--sbm-radius, 14px);
  }
}

/* the round close button (Vestris: 36px, 12px from the corner, hairline ring, frosted white) */
.sbm__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; padding: 0; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .92); color: #141414;
  cursor: pointer; font: 18px/1 system-ui, sans-serif;
}
.sbm__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* page scroll locked while open (scrollbar width padded back so nothing shifts) */
html.sbm-lock { overflow: hidden; padding-right: var(--sbm-sbw, 0px); }

@media (prefers-reduced-motion: reduce) {
  .sbm, .sbm__panel { transition-duration: .01s; }
  .sbm__panel { transform: none; }
}