/* ABURA's "book a call" door (19 Oct 2026). The panel's own class is door-panel, never the bare door the home page's hero cards use
   (19 Oct 2026: a shared name stretched those cards to the panel's height and left a gap under the hero): the panel the front page's "Book a call" buttons open. Self-contained: its own colours,
   in the site's palette, so it looks the same on any page that loads it. */
.door-veil { position: fixed; inset: 0; background: rgba(4, 6, 9, .62); backdrop-filter: blur(3px); z-index: 1000; opacity: 0; transition: opacity .25s; }
.door-veil.on { opacity: 1; }
.door-panel { --d-bg: #0D131A; --d-bg2: #131B24; --d-line: rgba(214,226,240,.12); --d-text: #ECEFF3; --d-text2: #A9B2BD; --d-text3: #8A95A1; --d-lantern: #F4A55A; --d-ink: #1C1206; --d-pass: #72D3A4;
  position: fixed; z-index: 1001; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px));
  display: flex; flex-direction: column; background: var(--d-bg); color: var(--d-text); border: 1px solid var(--d-line); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5;
  transform: translateY(16px); opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; overflow: hidden; }
.door-panel.on { transform: none; opacity: 1; }
@media (max-width: 520px) { .door-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; } }
@media (prefers-reduced-motion: reduce) { .door-panel, .door-veil { transition: none; } .door-dot { animation: none !important; } }
.door-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--d-line); }
.door-head b { font-family: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-lantern); font-weight: 400; }
.door-head span { flex: 1; font-family: "Newsreader", Georgia, serif; font-size: 20px; }
.door-x { background: none; border: 1px solid var(--d-line); color: var(--d-text2); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 18px; line-height: 1; }
.door-x:hover { color: var(--d-text); border-color: var(--d-text3); }
.door-body { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 10px; align-content: start; }
.door-card { border: 1px solid var(--d-line); border-radius: 16px; background: linear-gradient(160deg, var(--d-bg2), var(--d-bg)); padding: 18px; }
.door-card .eb { font-family: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--d-lantern); margin: 0; }
.door-card h3 { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 24px; margin: 6px 0 6px; }
.door-card p { color: var(--d-text2); margin: 0 0 14px; }
.door-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--d-pass); margin-right: 8px; vertical-align: 1px; animation: door-pulse 2.4s infinite; }
@keyframes door-pulse { 0% { box-shadow: 0 0 0 0 rgba(114,211,164,.5); } 70% { box-shadow: 0 0 0 9px rgba(114,211,164,0); } 100% { box-shadow: 0 0 0 0 rgba(114,211,164,0); } }
/* a "Book a call" button can sit anywhere on the page, outside the panel, so its colours carry their own fallbacks */
.door-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--d-lantern, #F4A55A); background: var(--d-lantern, #F4A55A); color: var(--d-ink, #1C1206); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.door-btn:hover { background: #F7B676; }
.door-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; background: var(--d-bg2); border-top-left-radius: 4px; }
.door-msg.me { justify-self: end; background: rgba(244,165,90,.14); border: 1px solid rgba(244,165,90,.3); border-top-left-radius: 14px; border-top-right-radius: 4px; }
.door-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
.door-quick button { border: 1px solid rgba(214,226,240,.2); background: transparent; color: var(--d-text); border-radius: 999px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 14px; }
.door-quick button:hover { border-color: var(--d-lantern); }
.door-say { display: flex; gap: 8px; padding: 10px 16px 6px; border-top: 1px solid var(--d-line); }
.door-say input { flex: 1; min-width: 0; background: var(--d-bg2); color: var(--d-text); border: 1px solid var(--d-line); border-radius: 999px; padding: 10px 14px; font: inherit; }
.door-say input:focus { outline: 2px solid var(--d-lantern); outline-offset: 1px; }
.door-card .door-note { color: var(--d-text3); font-size: 12.5px; margin: 0 0 14px; }
.door-terms-head { font-size: 13px; margin-right: 4px; }
.door-link { background: none; border: 0; padding: 0; color: var(--d-text2); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; }
.door-link:hover { color: var(--d-lantern); }
.door-terms { border: 1px solid var(--d-line); border-radius: 14px; padding: 12px 14px; background: var(--d-bg2); font-size: 13.5px; color: var(--d-text2); }
.door-terms ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.door-terms b { color: var(--d-text); }
.door-draft { color: #DDBE63; background: rgba(221,190,99,.11); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; margin: 0 0 14px; }
.door-panel :focus-visible { outline: 2px solid var(--d-lantern); outline-offset: 2px; }
.door-panel [hidden] { display: none !important; }

/* Making it feel alive (19 Oct 2026): the concierge typing, messages arriving, quick replies rising in, and three ways to open. */
@keyframes door-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.door-msg.in, .door-btn.in, .door-quick button.in { animation: door-in .32s cubic-bezier(.2,.8,.2,1) both; }
.door-typing { display: inline-flex; gap: 5px; align-items: center; width: max-content; padding: 12px 14px; }
.door-typing i { width: 6px; height: 6px; border-radius: 50%; background: #A9B2BD; animation: door-blink 1.1s infinite; }
.door-typing i:nth-child(2) { animation-delay: .15s; } .door-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes door-blink { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.door-card.out { transition: opacity .25s, transform .25s; opacity: 0; transform: translateY(-6px); }
/* 1. gather: the heading forms from coloured data */
.door-word { display: inline-block; white-space: nowrap; }
.door-g { display: inline-block; animation: door-gather 1.1s cubic-bezier(.2,.75,.15,1) both; }
@keyframes door-gather { 0% { transform: translate(var(--x), var(--y)) scale(.35); color: var(--c); opacity: 0; text-shadow: 0 0 10px var(--c); filter: blur(1.5px); }
  25% { opacity: 1; } 70% { color: var(--c); text-shadow: 0 0 8px var(--c); filter: blur(0); } 100% { transform: none; color: inherit; text-shadow: none; opacity: 1; } }
/* 2. line: an orange line runs under the header, with a bright head, then stays, quieter */
.door-head { position: relative; }
.door-panel.m-line .door-head::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 1.5px; transform-origin: left; background: linear-gradient(90deg, rgba(244,165,90,.15), #F4A55A); animation: door-line 1.4s cubic-bezier(.65,0,.35,1) both, door-line-rest .6s 1.6s both; }
.door-panel.m-line .door-head::before { content: ""; position: absolute; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px #F4A55A; animation: door-head-run 1.4s cubic-bezier(.65,0,.35,1) both; }
@keyframes door-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes door-line-rest { to { opacity: .55; } }
@keyframes door-head-run { 0% { left: 12px; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 20px); opacity: 0; } }
.door-panel.m-line .door-card { animation: door-in .5s .35s cubic-bezier(.2,.8,.2,1) both; }
/* 3. arrive: the card's lines arrive one by one */
.door-panel.m-arrive .door-card > * { animation: door-in .5s cubic-bezier(.2,.8,.2,1) both; }
.door-panel.m-arrive .door-card > :nth-child(1) { animation-delay: .1s; } .door-panel.m-arrive .door-card > :nth-child(2) { animation-delay: .3s; }
.door-panel.m-arrive .door-card > :nth-child(3) { animation-delay: .55s; } .door-panel.m-arrive .door-card > :nth-child(4) { animation-delay: .75s; }
.door-panel.m-arrive .door-card > :nth-child(5) { animation-delay: .85s; } .door-panel.m-arrive .door-card > :nth-child(6) { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) { .door-panel *, .door-panel::before, .door-panel::after { animation: none !important; transition: none !important; } }

/* The living background behind the chat: a canvas under everything else in the panel. */
.door-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.door-panel > :not(.door-bg) { position: relative; z-index: 1; }
.door-card { background: linear-gradient(160deg, rgba(19,27,36,.92), rgba(13,19,26,.88)); backdrop-filter: blur(2px); }
.door-msg { background: rgba(19,27,36,.92); }
.door-msg.me { background: rgba(60,42,22,.85); }
.door-say, .door-head { background: rgba(13,19,26,.72); backdrop-filter: blur(4px); }