/* Beautyville V3: brand layer over the template styles. Only colour tokens, the logo mark and a few Beautyville-only bits.
   Palette from Beautyville v1: ink #1c1714, ivory #f6f1ea, sand #ece3d7, gold #8c6a36, light gold #b8955f / #d8bf93, mute #6f645b. */
:root{--ink:#1c1714;--text:#2a221d;--muted:#6f645b;--bg:#f6f1ea;--paper:#fffdf9;--mist:#ece3d7;--stone:#efe7dc;--line:rgba(28,23,20,.12);--accent:#8c6a36;--accent-soft:#e9dcc4;--dark:var(--ink);--cream:var(--bg);--pink:var(--accent-soft);--grey:var(--muted)}
.find em,.find.dark em{color:#d8bf93}
.wm small{display:block;font-family:var(--body);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin-top:3px;font-style:normal}
.lg svg{display:block;width:100%;height:100%}
.bv-ph{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:var(--pill);padding:4px 9px;vertical-align:middle}
.dark .bv-ph,.find .bv-ph{background:#ffffff1f;color:#e7d3ad}
.find .bv-note{font-size:13px;line-height:1.5;color:#efe6d9b3;margin:-18px 0 26px;max-width:46ch}
.pop .r3-ph{margin:0 auto 4px}
.pop .r3-ph[hidden],.bv-ph[hidden]{display:none!important}
/* service Details dialog: same .pop/.box as the promo popup */
/* 82% mobile drawer with a scrim (the template menu is full screen) */
.bv-scrim{position:fixed;inset:0;background:rgba(18,14,12,.55);z-index:99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.bv-scrim[hidden]{display:none}
@media (max-width:1180px){
  .mnav{left:auto!important;right:0;width:82vw;max-width:420px;box-shadow:-18px 0 40px rgba(0,0,0,.28);animation:bvdr .28s ease}
}
@keyframes bvdr{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.mnav{animation:none}}
.mnav .mtop .bv-mk{display:block;width:52px;height:52px}
.ft .social svg{width:20px;height:20px}
.ft .bottom .bv-cred{font-size:12px;opacity:.7}
.bs-btn.bv-ext::after{content:" \2197"}
.lg .ld,.lg .ll{display:block;width:48px;height:48px}
.bv-logo{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(28,23,20,.08)}
.lg .ll{position:absolute;inset:0}
.ft .social a{color:var(--bg)}
.ft .logo .bv-fmk{display:inline-block;width:56px;height:56px;flex:none}
.bv-stock{margin:22px 0 0;font-size:13px;color:var(--muted)}
.pop .bv-pmk{display:block;width:96px;height:96px;margin:0 auto 6px}

/* v3.1: hero stars (brand gold, inline SVG) and multi-page bits */
.stats .bv-stars{display:inline-flex;align-self:center;justify-content:center;gap:2px;color:#d8bf93;margin:-2px 0 0}
.stats .bv-stars svg{display:block}
.bv-grp+.bv-grp{margin-top:72px}
.bv-grp .shead{margin-bottom:28px}
.bv-gd{margin:10px 0 0;color:var(--muted);max-width:60ch}
.bv-grp[hidden]{display:none}
.phero p a{color:inherit}
@media(max-width:640px){.bv-grp+.bv-grp{margin-top:48px}.stats .bv-stars svg{width:11px;height:11px}}
/* v3.1 (Zach 12:46): on phones the hero content sits in the middle of the hero, both ways (R3 anchors it to the bottom).
   Same R3 hero, video, gradient family and type; only the vertical anchor and padding change. Never wider than the screen. */
html,body{overflow-x:clip}
.hero[data-astro-cid-j7pv25f6]{width:100%;max-width:100vw}
.hero .media,.hero .media img,.hero .media video{max-width:100%}
@media(max-aspect-ratio:1/1) and (max-width:900px){
 .hero.hero[data-astro-cid-j7pv25f6]{justify-content:center}
 .hero.hero[data-astro-cid-j7pv25f6]:after{background:radial-gradient(ellipse 90% 55% at 50% 50%,#0d0d0b8c,#0d0d0b40 70%,#0d0d0b1f),linear-gradient(#0d0d0b6b,#0d0d0b00 20% 80%,#0d0d0b8c)}
 .hin.hin[data-astro-cid-j7pv25f6]{width:100%;margin-left:auto;margin-right:auto;padding-top:calc(72px + env(safe-area-inset-top));padding-bottom:calc(72px + env(safe-area-inset-bottom));box-sizing:border-box}
}
.bv-optq{margin:0 0 12px;color:var(--muted);font-size:15px}
.bv-opts{margin:0 0 8px!important}
.bv-opts li{justify-content:space-between}
.bv-opts li em{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:14px;margin-top:2px}
.bv-opts .btn{flex:none;min-height:44px}
