/* Small footer utilities and contact options; the page keeps one main CTA. */
.footer-utilities{display:flex;gap:24px;flex-wrap:wrap;margin-left:auto}
.footer-utilities a,.footer-utilities button{font:inherit;padding:0;color:inherit}
.footer-utilities a:hover,.footer-utilities button:hover{color:var(--cream)}
.contact-options{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.contact-options a,.contact-options button{font-size:13px;padding:0;text-decoration:underline;text-underline-offset:5px;color:var(--cream)}
.contact-options [hidden]{display:none}
.booking-widget-host{position:fixed;left:-9999px;top:0;width:0;height:0;overflow:hidden}
/* The standalone page needs the same opaque booking surface as Orbion. */
iframe[src^="https://calendar.google.com/calendar/appointments/"]{background-color:#fff;color-scheme:light}
/* Reuse Orbion consent controls with Nebula's quieter palette. */
body .oc-root{--oc-paper:#101722;--oc-ink:#eee3d2;--oc-muted:#b4bbcb;--oc-rule:#ffffff26;--oc-amber:#bcb4de;--oc-blue:#c8bfe7;--oc-cream:#202838;--oc-head:General,Arial,sans-serif;--oc-body:General,Arial,sans-serif}
.oc-root .oc-banner{left:24px;right:auto;max-width:480px;border-radius:12px}
.oc-root .oc-title{letter-spacing:0;line-height:1.4}
.oc-root .oc-btn{background:#101722;color:#eee3d2;min-height:42px;border-radius:5px}
.oc-root .oc-btn--primary{background:#eee3d2;color:#080d14}
.oc-root .oc-btn--primary:hover{background:#dcd0f0;color:#080d14}
.oc-root .oc-btn--link{background:transparent}
.oc-root .oc-btn:focus-visible,.oc-root input:focus-visible+.oc-slider{outline:2px solid #bcb4de;outline-offset:3px}
.oc-root .oc-modal{border:1px solid #ffffff26;border-radius:12px}
.oc-root .oc-modal h2{line-height:1.4;letter-spacing:0}
.oc-root .oc-text a{color:#c8bfe7}
.oc-root .oc-row-title{letter-spacing:0;line-height:1.5}
@media(max-width:600px){.footer-utilities{margin-left:0;gap:18px;width:100%}.oc-root .oc-banner{left:12px;right:12px;bottom:12px;max-width:none;padding:18px}.oc-root .oc-actions{flex-direction:row;gap:8px}.oc-root .oc-actions .oc-btn{width:auto;flex:1}.oc-root .oc-actions .oc-btn--link{flex-basis:100%;order:1}.oc-root .oc-modal{padding:22px}.contact-options{gap:20px}}

/* Google's widget adds 72px gutters. On phones, use the full visible viewport
   with a separate close row; target its structure rather than generated classes. */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  html:has(body > div > iframe[src^="https://calendar.google.com/calendar/appointments/"]),
  body:has(> div > iframe[src^="https://calendar.google.com/calendar/appointments/"]) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body > div:has(> iframe[src^="https://calendar.google.com/calendar/appointments/"]) {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: hidden;
    background: #fff;
    color-scheme: light;
  }

  body > div:has(> iframe[src^="https://calendar.google.com/calendar/appointments/"]) > button {
    position: static;
    flex: 0 0 auto;
    align-self: flex-end;
    min-height: 44px;
    margin: 8px 12px;
  }

  body > div > iframe[src^="https://calendar.google.com/calendar/appointments/"] {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}