/* growthhawaii.com — the in-page booking room (YONG 2026-10-07, BOOK-MODAL).
   Every "Book a time" door opens Calendly here instead of leaving the site (web/js/book.js).
   Calendly's free plan paints its own scheduler white and cannot be recoloured (its colour options are
   paid-plan only), so the room around it carries the brand: ink, ivory, one gold line. */
dialog.bk{position:fixed;inset:0;margin:auto;padding:0;border:0;background:transparent;color:var(--ivory,#f1e9d8);
  width:min(1080px,calc(100vw - 40px));height:min(860px,calc(100vh - 40px));height:min(860px,calc(100svh - 40px));
  max-width:none;max-height:none;overflow:visible;overscroll-behavior:contain}
dialog.bk::backdrop{background:radial-gradient(120% 90% at 50% 40%,rgba(18,10,6,.72),rgba(5,4,7,.94));
  -webkit-backdrop-filter:blur(10px) saturate(.8);backdrop-filter:blur(10px) saturate(.8)}
dialog.bk[open]{display:block;animation:bk-in .42s var(--ease,cubic-bezier(.2,.7,.1,1)) both}
dialog.bk[open]::backdrop{animation:bk-fade .42s ease both}
dialog.bk.bk-out{animation:bk-out .24s ease both}
dialog.bk.bk-out::backdrop{animation:bk-fade-out .24s ease both}
@keyframes bk-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bk-out{to{opacity:0;transform:translateY(10px) scale(.99)}}
@keyframes bk-fade{from{opacity:0}to{opacity:1}}
@keyframes bk-fade-out{from{opacity:1}to{opacity:0}}
.bk-shell{position:relative;height:100%;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#120c09 0%,#0a0708 60%,#070508 100%);
  border:1px solid rgba(227,190,107,.28);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 40px 120px -30px rgba(0,0,0,.9),0 0 80px -40px rgba(227,190,107,.45)}
.bk-shell::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(227,190,107,.85),transparent)}
.bk-top{display:flex;align-items:flex-start;gap:18px;padding:22px 24px 0 28px}
.bk-title{flex:1;min-width:0}
.bk-kick{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--sans,system-ui);letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold,#e3be6b)}
.bk-kick::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.bk-h{margin:10px 0 0;font:500 clamp(30px,3.6vw,44px)/1 var(--serif,Georgia,serif);letter-spacing:-.02em;color:var(--ivory,#f1e9d8)}
.bk-h em{font-style:italic;color:var(--gold,#e3be6b)}
.bk-x{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(241,233,216,.04);border:1px solid rgba(241,233,216,.18);color:var(--ivory,#f1e9d8);
  transition:border-color .2s,background .2s,transform .2s}
.bk-x:hover,.bk-x:focus-visible{border-color:var(--gold,#e3be6b);background:rgba(227,190,107,.1);transform:rotate(90deg)}
.bk-x:focus-visible{outline:2px solid var(--gold,#e3be6b);outline-offset:3px}
.bk-x svg{width:16px;height:16px}
.bk-consent{margin:12px 28px 0;max-width:92ch;font:400 12px/1.5 var(--sans,system-ui);color:var(--mute,#8d8676)}
.bk-consent a{color:var(--ivory2,#cfc6b3);text-decoration:none;border-bottom:1px solid rgba(241,233,216,.26)}
.bk-consent a:hover{color:var(--gold,#e3be6b);border-color:var(--gold,#e3be6b)}
.bk-cal{position:relative;flex:1;min-height:0;margin:8px 0 0;overflow:hidden;overscroll-behavior:contain}
.bk-cal iframe{position:relative;z-index:1;display:block;width:100%!important;height:100%!important;border:0}
.bk-cal .calendly-spinner{display:none}
.bk-load{position:absolute;inset:0;z-index:0;display:grid;place-items:center}
.bk-load i{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(241,233,216,.12);border-top-color:var(--gold,#e3be6b);animation:bk-spin .8s linear infinite}
@keyframes bk-spin{to{transform:rotate(1turn)}}
.bk-fb{display:none;position:absolute;inset:0;z-index:0;margin:0;padding:24px;align-items:center;justify-content:center;text-align:center;
  font:400 17px/1.5 var(--sans,system-ui);color:var(--ivory2,#cfc6b3)}
.bk-fb a{color:var(--ivory,#f1e9d8);text-decoration:none;border-bottom:1px solid var(--gold,#e3be6b)}
.bk-failed .bk-fb{display:flex}
.bk-failed .bk-load{display:none}
/* slow, not failed: the scheduler may still arrive, so the plain link rides along the bottom instead of covering it */
.bk-slow .bk-fb{display:flex;inset:auto 0 0 0;z-index:2;padding:11px 16px;font-size:13.5px;background:rgba(10,7,8,.94);
  border-top:1px solid rgba(227,190,107,.25)}
html.bk-lock,html.bk-lock body{overflow:hidden!important}
/* the site hides the system cursor for its own reticle; the reticle sits under the top layer, so give the room a real one */
html.bk-lock dialog.bk,html.bk-lock dialog.bk *{cursor:auto!important}
html.bk-lock dialog.bk .bk-x,html.bk-lock dialog.bk a{cursor:pointer!important}
html.bk-lock .ghc-canvas{visibility:hidden}
/* phones, and any short screen (a phone held sideways): the room takes the whole screen, inside the safe areas */
@media (max-width:700px),(max-height:520px){
  dialog.bk{width:100vw;height:100vh;height:100svh;height:100dvh;margin:0;inset:0}
  .bk-shell{border-radius:0;border:0;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .bk-top{padding:max(14px,env(safe-area-inset-top)) 14px 0 18px}
  .bk-h{font-size:30px}
  .bk-x{width:40px;height:40px}
  .bk-consent{margin:10px 18px 0;font-size:11px;line-height:1.45}
  @keyframes bk-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
}
@media (max-height:520px){
  .bk-shell{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .bk-cal{flex:none;height:max(420px,calc(100dvh - 40px))}
}
@media (prefers-reduced-motion:reduce){dialog.bk[open],dialog.bk[open]::backdrop,dialog.bk.bk-out{animation:none}.bk-x{transition:none}}
