/* BumpBuddy companion. Self-contained; uses brand tokens from style.css with fallbacks. */
.bb-root{--bb-lav:var(--lavender,#9675b2);--bb-lilac:var(--lilac,#cdb8e6);--bb-soft:var(--lilac-soft,#efe7f8);--bb-plum:var(--plum,#362962);--bb-ink:var(--ink,#190d27);--bb-gold:var(--gold,#c7893c);
  position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:62;
  font-family:var(--sans,Inter,system-ui,sans-serif);color:var(--bb-ink);line-height:1.45;font-size:16px}
.bb-root *{box-sizing:border-box}
.bb-launch{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit}
.bb-pill{background:#fff;color:var(--bb-plum);font:700 .82rem var(--sans,Inter,system-ui,sans-serif);letter-spacing:.01em;padding:8px 14px;border-radius:999px;
  border:1px solid var(--bb-lilac);box-shadow:0 10px 24px -12px rgba(54,41,98,.55);white-space:nowrap}
.bb-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;background:var(--bb-soft);
  border:3px solid #fff;box-shadow:0 0 0 2px var(--bb-lav),0 14px 30px -10px rgba(54,41,98,.6);transition:transform .2s}

.bb-launch:hover .bb-avatar{transform:translateY(-2px) scale(1.03)}
.bb-launch:focus-visible{outline:none}
.bb-launch:focus-visible .bb-avatar{box-shadow:0 0 0 3px var(--bb-gold),0 14px 30px -10px rgba(54,41,98,.6)}
.bb-launch:focus-visible .bb-pill{outline:3px solid var(--bb-gold);outline-offset:2px}
.bb-root.is-open .bb-pill{display:none}
.bb-panel{position:absolute;right:0;bottom:80px;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow:auto;
  background:#fff;border:1px solid var(--bb-lilac);border-radius:22px;box-shadow:0 24px 60px -18px rgba(54,41,98,.5);padding:18px 18px 16px}
.bb-panel[hidden]{display:none}
.bb-head{display:flex;align-items:center;gap:12px;margin:0 34px 12px 0}
.bb-head-img{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;background:var(--bb-soft);box-shadow:0 0 0 2px var(--bb-lilac)}

.bb-title{font:700 1.02rem/1.3 var(--serif,Georgia,serif);color:var(--bb-plum);margin:0}
.bb-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--bb-lilac);background:var(--bb-soft);color:var(--bb-plum);
  font:700 1.15rem/1 var(--sans,system-ui,sans-serif);cursor:pointer;display:grid;place-items:center;padding:0}
.bb-close:hover{background:var(--bb-lilac)}
.bb-close:focus-visible,.bb-start:focus-visible,.bb-look:focus-visible{outline:3px solid var(--bb-gold);outline-offset:2px}
.bb-say{background:var(--bb-soft);color:var(--bb-ink);border-radius:4px 16px 16px 16px;padding:10px 14px;margin:0 0 12px;font-size:.93rem}
.bb-starts{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.bb-start{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;color:var(--bb-plum);background:#fff;border:1px solid var(--bb-lilac);
  border-radius:999px;padding:9px 16px;font:700 .88rem var(--sans,Inter,system-ui,sans-serif);transition:background .15s,border-color .15s}
.bb-start:hover{background:var(--bb-soft);border-color:var(--bb-lav)}
.bb-start span[aria-hidden]{color:var(--bb-lav)}
.bb-custom{border-top:1px solid var(--bb-soft);padding-top:12px}
.bb-custom-h{font:700 .74rem var(--sans,Inter,system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#7a5a98;margin:0 0 8px}
.bb-looks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none}
.bb-look{width:42px;height:42px;border-radius:50%;padding:0;border:2px solid #fff;box-shadow:0 0 0 1px var(--bb-lilac);overflow:hidden;cursor:pointer;background:var(--bb-soft)}

.bb-look[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bb-lav)}
.bb-note{font-size:.8rem;color:#5b4a73;margin:0}
@media (max-width:560px){
  .bb-root{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .bb-avatar{width:58px;height:58px}
  .bb-pill{font-size:.76rem;padding:6px 11px}
  .bb-panel{bottom:72px;width:calc(100vw - 24px);max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);padding:16px 14px 14px}
  .bb-start{padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){.bb-avatar,.bb-start{transition:none}.bb-launch:hover .bb-avatar{transform:none}}
@media print{.bb-root{display:none}}

/* Portrait framing: never crop hair. The whole square portrait is scaled down inside the circle,
   centered on a soft lilac background, and its corners fade out so the full head and hair stay visible. */
.bb-avatar,.bb-head-img,.bb-look{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#f4eefb,#e3d6f2)}
.bb-avatar img,.bb-head-img img,.bb-look img{width:78%;height:78%;object-fit:contain;display:block;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 74%,transparent 98%);mask-image:radial-gradient(circle at 50% 50%,#000 74%,transparent 98%)}
@media (max-width:560px){
  /* On phones the round launcher stands alone so the pill never sits on page buttons; its aria-label still says "Meet your BumpBuddy". */
  .bb-pill{display:none}
  html.bb-on .site-footer{padding-bottom:96px}
}

/* "Meet BumpBuddy" link at the foot of the panel. */
.bb-meet{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--bb-plum);font:700 .86rem var(--sans,Inter,system-ui,sans-serif);text-decoration:none;border-bottom:2px solid var(--bb-lilac)}
.bb-meet:hover{border-color:var(--bb-lav)}
.bb-meet:focus-visible{outline:3px solid var(--bb-gold);outline-offset:2px}
.bb-meet span[aria-hidden]{color:var(--bb-lav)}

/* Future art: set ART.kind = "cutout" in bumpbuddy.js to show full-figure transparent PNGs.
   No circle, no square, no mask: the whole figure is drawn with object-fit: contain. */
.bb-art-cutout .bb-avatar,.bb-art-cutout .bb-head-img,.bb-art-cutout .bb-look{border-radius:0;overflow:visible;background:none;box-shadow:none;border:0}
.bb-art-cutout .bb-avatar{width:64px;height:88px}
.bb-art-cutout .bb-head-img{width:48px;height:66px}
.bb-art-cutout .bb-look{width:40px;height:56px;border-radius:12px;box-shadow:0 0 0 1px var(--bb-lilac)}
.bb-art-cutout .bb-look[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bb-lav)}
.bb-art-cutout .bb-avatar img,.bb-art-cutout .bb-head-img img,.bb-art-cutout .bb-look img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 8px 14px rgba(54,41,98,.28))}

/* ===== Help panel: "How can we help you today?" (2026-10-17) ===== */
.bb-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bb-panel{width:min(384px,calc(100vw - 32px))}
.bb-panel:focus{outline:none}
.bb-panel:focus-visible{outline:3px solid var(--bb-gold);outline-offset:2px}
.bb-head{align-items:flex-start;margin:0 34px 12px 0}
.bb-title{font-size:1.12rem}
.bb-sub{margin:4px 0 0;font-size:.86rem;color:#4a3b62;line-height:1.4}
.bb-host[hidden],.bb-results[hidden],.bb-chipnav[hidden],.bb-custom[hidden],.bb-nudge[hidden]{display:none}
.bb-host,.bb-results{margin:0 0 12px}
.bb-say{margin:0 0 10px}
.bb-go-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bb-go{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:var(--bb-plum);color:#fff;border-radius:999px;padding:8px 16px;font:700 .86rem var(--sans,Inter,system-ui,sans-serif)}
.bb-go span[aria-hidden]{color:var(--bb-lilac)}
.bb-go:hover{background:#4a3a80}
.bb-back,.bb-look-toggle{background:none;border:0;padding:6px 4px;color:var(--bb-plum);font:700 .82rem var(--sans,Inter,system-ui,sans-serif);cursor:pointer;text-decoration:underline;text-decoration-color:var(--bb-lilac);text-underline-offset:3px}
.bb-back:hover,.bb-look-toggle:hover{text-decoration-color:var(--bb-lav)}
.bb-chips{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bb-chip{border:1px solid var(--bb-lilac);background:#fff;color:var(--bb-plum);border-radius:999px;padding:6px 12px;font:700 .8rem/1.25 var(--sans,Inter,system-ui,sans-serif);cursor:pointer;text-align:left;transition:background .15s,border-color .15s}
.bb-chip:hover{background:var(--bb-soft);border-color:var(--bb-lav)}
.bb-chip.is-picked{background:var(--bb-soft);border-color:var(--bb-lav);box-shadow:inset 0 0 0 1px var(--bb-lav)}
.bb-chip-alt{background:var(--bb-soft);border-style:dashed}
.bb-search{border-top:1px solid var(--bb-soft);padding-top:12px;margin:0 0 8px}
.bb-q-label{display:block;font:700 .84rem var(--sans,Inter,system-ui,sans-serif);color:var(--bb-plum);margin:0 0 6px}
.bb-q-row{display:flex;gap:6px}
.bb-q{flex:1;min-width:0;border:1px solid var(--bb-lilac);border-radius:12px;padding:9px 12px;font:400 .92rem var(--sans,Inter,system-ui,sans-serif);color:var(--bb-ink);background:#fff}
.bb-q::placeholder{color:#7d6f92}
.bb-find{border:0;border-radius:12px;background:var(--bb-lav);color:#fff;font:700 .86rem var(--sans,Inter,system-ui,sans-serif);padding:0 14px;cursor:pointer}
.bb-find:hover{background:#7f5f9c}
.bb-q-hint{font-size:.74rem;color:#5b4a73;margin:6px 0 0}
.bb-results-h{font:700 .84rem var(--sans,Inter,system-ui,sans-serif);color:var(--bb-plum);margin:0 0 8px}
.bb-sugg{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.bb-sugg-item{border:1px solid var(--bb-lilac);border-radius:14px;padding:10px 12px;background:#fff}
.bb-sugg-h{margin:0 0 2px;font:700 .9rem var(--sans,Inter,system-ui,sans-serif);color:var(--bb-plum)}
.bb-sugg-say{margin:0 0 8px;font-size:.84rem;color:#3d3150}
.bb-disclaimer{font-size:.74rem;color:#5b4a73;margin:6px 0 4px}
.bb-foot{display:flex;justify-content:flex-start}
.bb-caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s}
.bb-look-toggle[aria-expanded="true"] .bb-caret{transform:rotate(180deg)}
.bb-custom{padding-top:10px;margin-top:4px}
.bb-chip:focus-visible,.bb-go:focus-visible,.bb-back:focus-visible,.bb-look-toggle:focus-visible,.bb-find:focus-visible,.bb-nudge-go:focus-visible,.bb-nudge-x:focus-visible{outline:3px solid var(--bb-gold);outline-offset:2px}
.bb-q:focus{outline:none}
.bb-q:focus-visible,.bb-q:focus{box-shadow:0 0 0 3px var(--bb-gold);border-color:var(--bb-plum)}
.bb-root.is-open .bb-panel{animation:bb-in .22s ease-out}
@keyframes bb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Mobile "Need help?" nudge: a small bubble by the corner, never an overlay. */
.bb-nudge{position:absolute;right:4px;bottom:72px;display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--bb-lilac);border-radius:999px;padding:3px 3px 3px 4px;
  box-shadow:0 12px 26px -12px rgba(54,41,98,.55);animation:bb-in .22s ease-out;white-space:nowrap}
.bb-nudge::after{content:"";position:absolute;right:24px;bottom:-6px;width:10px;height:10px;background:#fff;border-right:1px solid var(--bb-lilac);border-bottom:1px solid var(--bb-lilac);transform:rotate(45deg)}
.bb-nudge-go{border:0;background:none;color:var(--bb-plum);font:700 .84rem var(--sans,Inter,system-ui,sans-serif);padding:8px 8px 8px 10px;cursor:pointer;border-radius:999px}
.bb-nudge-x{width:30px;height:30px;border-radius:50%;border:0;background:var(--bb-soft);color:var(--bb-plum);font:700 1rem/1 var(--sans,system-ui,sans-serif);cursor:pointer;display:grid;place-items:center;padding:0}
.bb-root.has-nudge .bb-pill{display:none}
@media (max-width:560px){
  .bb-panel{width:calc(100vw - 24px)}
  .bb-chip{font-size:.78rem;padding:6px 11px}
}
@media (prefers-reduced-motion:reduce){
  .bb-root.is-open .bb-panel,.bb-nudge{animation:none}
  .bb-chip,.bb-caret{transition:none}
}

/* ===== Crew art + panel layout fixes (2026-10-17, crew) ===== */
/* The root sits above the sticky site header (z-index 50), so the panel and its X are never hidden under it. */
.bb-root{z-index:62;--bb-hh:72px;--bb-lh:100px}
/* Cutout launcher: the Care Providers host (head and upper body), whole, no circle crop. A soft lilac disc sits behind her. */
.bb-art-cutout .bb-avatar{position:relative;width:76px;height:84px;overflow:visible}
.bb-art-cutout .bb-avatar::before{content:"";position:absolute;left:4px;right:4px;bottom:0;height:64px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#f6f0fc,#dccbef);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bb-lilac),0 14px 30px -10px rgba(54,41,98,.55)}
.bb-art-cutout .bb-avatar img{position:relative;filter:drop-shadow(0 4px 8px rgba(54,41,98,.25));
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
.bb-art-cutout .bb-launch:focus-visible .bb-avatar{box-shadow:none}
.bb-art-cutout .bb-launch:focus-visible .bb-avatar::before{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--bb-gold)}
.bb-art-cutout .bb-head-img{position:relative;width:58px;height:64px;overflow:visible}
.bb-art-cutout .bb-head-img::before{content:"";position:absolute;left:3px;right:3px;bottom:0;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#f6f0fc,#dccbef);box-shadow:0 0 0 2px var(--bb-lilac)}
.bb-art-cutout .bb-head-img img{position:relative;filter:none;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
.bb-art-cutout .bb-look{width:48px;height:54px}

/* Panel: header row (title + X) fixed at the top of the panel, body scrolls inside.
   Height cap keeps the whole panel below the site header: viewport minus header minus 24px gap minus the launcher area. */
.bb-panel{bottom:calc(100% + 12px);display:flex;flex-direction:column;overflow:hidden;padding:0;
  max-height:calc(100vh - var(--bb-hh) - 24px - var(--bb-lh));max-height:calc(100dvh - var(--bb-hh) - 24px - var(--bb-lh))}
.bb-panel[hidden]{display:none}
.bb-top{position:relative;flex:none;padding:16px 18px 10px;background:#fff;border-bottom:1px solid transparent;border-radius:22px 22px 0 0}
.bb-top .bb-head{margin:0 40px 0 0;align-items:flex-end}
.bb-top .bb-close{top:12px;right:12px}
.bb-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 18px 14px}
.bb-panel.is-scrolled .bb-top{border-bottom-color:var(--bb-soft);box-shadow:0 6px 12px -10px rgba(54,41,98,.35)}
.bb-nudge{bottom:calc(100% + 8px)}
/* Host figure next to the host line when an area is picked */
.bb-host-row{display:flex;align-items:flex-end;gap:10px;margin:0 0 10px}
.bb-host-row .bb-say{margin:0;flex:1}
.bb-host-art{flex:none;width:66px;height:112px;display:block}
.bb-host-fig{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 6px 10px rgba(54,41,98,.22))}
.bb-foot{align-items:center;gap:14px;flex-wrap:wrap}
.bb-foot .bb-meet{margin-top:2px}
.bb-look-toggle[hidden]{display:none}
/* The corner launcher must never cover the footer's last lines */
html.bb-on .site-footer{padding-bottom:132px}
@media (max-width:560px){
  .bb-root{--bb-lh:0px}
  .bb-art-cutout .bb-avatar{width:68px;height:76px}
  .bb-art-cutout .bb-avatar::before{height:58px}
  html.bb-on .site-footer{padding-bottom:110px}
  /* Bottom sheet: at most 70% of the screen, the page top stays visible, the X is in the fixed header row */
  .bb-panel{position:fixed;left:0;right:0;bottom:0;width:100%;border-radius:22px 22px 0 0;border-bottom:0;
    max-height:min(70vh,calc(100vh - var(--bb-hh) - 12px));max-height:min(70dvh,calc(100dvh - var(--bb-hh) - 12px));
    box-shadow:0 -18px 50px -18px rgba(54,41,98,.55)}
  .bb-top{padding:14px 14px 8px}
  .bb-body{padding:6px 14px calc(14px + env(safe-area-inset-bottom,0px))}
  .bb-root.is-open .bb-launch{visibility:hidden}
}