/* Lux Eternal Spa — Easton Automations */
:root{
  --ink:#1B2419;          /* deep forest, her brand card's ground */
  --ink-2:#2E3B29;
  --moss:#4A5A42;
  --sage:#8A9A7B;
  --gold:#B08D57;
  --gold-lt:#C9A96A;
  --cream:#F7F3EA;
  --cream-2:#FFFDF7;
  --line:#E2DACB;
  --body:#3D453A;
  --muted:#6E7768;
  --leaf:#6FA344;         /* only ever the logo mark */
  /* Ambient brand light. Sections are never a flat fill: each one carries a soft gold and
     sage glow so the page reads lit rather than printed. Adam's standing rule is that a plain
     white or plain cream section is unacceptable. (Adam, 2026-08-26.) */
  --glow-gold:rgba(176,141,87,.22);
  --glow-sage:rgba(122,150,104,.17);
  --hair:rgba(176,141,87,.22);
  /* A tiled film grain. Large soft gradients band badly on cheap panels, and a few percent of
     noise both hides that and is most of why a gradient reads expensive instead of flat. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  --shadow:0 1px 2px rgba(27,36,25,.05),0 8px 30px -12px rgba(27,36,25,.18);
  --shadow-lg:0 2px 4px rgba(27,36,25,.06),0 30px 60px -22px rgba(27,36,25,.30);
  --r:14px; --r-lg:22px;
  /* Header size lives here. Deliberately large: this audience skews older and the nav has to
     be readable and tappable without anyone leaning in. Never shrink these to fit more links,
     drop a link instead. (Adam, 2026-08-26.) */
  --nav-h:100px;
  --serif:"Cormorant Garamond",'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;color:var(--body);
  background:var(--cream);
  font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:500;line-height:1.12;
  letter-spacing:-.005em;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 44px,860px);margin-inline:auto}
@media(max-width:640px){.wrap,.narrow{width:min(100% - 32px,var(--wrap))}}

/* ── eyebrow / section headings ── */
.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;
  font-weight:500;color:var(--gold);margin:0 0 16px}
.eyebrow.on-dark{color:var(--gold-lt)}
.dhead{font-size:clamp(2rem,4.4vw,3.25rem);letter-spacing:-.012em}
.lede{font-size:clamp(1.06rem,1.6vw,1.2rem);line-height:1.72;color:var(--muted);max-width:62ch}
.lede.on-dark{color:rgba(247,243,234,.80)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;padding:15px 30px;border-radius:100px;
  border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1),
  background-color .25s,color .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 10px 24px -12px rgba(176,141,87,.85)}
.btn-gold:hover{background:#9C7B49;box-shadow:0 16px 30px -12px rgba(176,141,87,.9)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:#0F160E}
.btn-out{border-color:var(--ink);color:var(--ink)}
.btn-out:hover{background:var(--ink);color:var(--cream)}
.btn-ghost{border-color:rgba(247,243,234,.42);color:var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btns{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
@media(max-width:430px){.btns .btn{width:100%}.btns .btn,.thanks .btn{padding:15px 20px}.btns{gap:10px}}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:70;background:rgba(247,243,234,.86);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);transition:background .3s,border-color .3s}
.nav-in{display:flex;align-items:center;gap:24px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto;margin-right:auto;
  min-height:44px}
.brand .mk{width:36px;height:36px;flex:0 0 36px}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .w1{font-family:var(--serif);font-size:27px;letter-spacing:.10em;color:var(--ink);font-weight:500}
.brand .w2{font-family:var(--sans);font-size:10.5px;letter-spacing:.32em;color:var(--gold);
  text-transform:uppercase;margin-top:4px;font-weight:500}
/* 21px, down from 26. The eighth tab plus 18px type overflowed the page by up to 36px in the band
   just above the 1240px burger breakpoint. Buying the room out of the GAPS keeps Brian's bigger
   type and all eight labels — the design rule forbids shrinking the header itself, not its
   spacing. Measured after: no overflow at any width, clearance holds. */
.nlinks{display:flex;align-items:center;gap:21px}
/* 18px, up from 17px: Brian asked for a bigger header on the 2026-08-28 call ("it looks a little
   bit small in my opinion"). Paid for by the shorter tab labels above. */
.nlinks a{font-size:18px;text-decoration:none;color:var(--body);position:relative;
  padding:7px 0;transition:color .2s;white-space:nowrap}
.nlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .3s cubic-bezier(.2,.7,.3,1)}
.nlinks a:hover{color:var(--ink)}
.nlinks a:hover::after,.nlinks a[aria-current]::after{right:0}
.nlinks a[aria-current]{color:var(--ink)}
.ncta{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.nphone{font-size:18px;text-decoration:none;color:var(--body);white-space:nowrap;transition:color .2s}
.nphone:hover{color:var(--gold)}
.ncta .btn{padding:14px 28px;font-size:14.5px}
.burger{display:none;width:52px;height:52px;border:1px solid var(--line);background:none;
  border-radius:13px;cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto;
  transition:border-color .2s,background .2s}
.burger:hover{border-color:var(--gold)}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:22px;height:2px;
  background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.3,1),background .2s}
.burger span::before{top:-7px}.burger span::after{top:7px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* pages whose banner is dark invert the nav until you scroll */
body.dark-top .nav{background:transparent;border-bottom-color:transparent}
body.dark-top .nav .w1{color:var(--cream)}
body.dark-top .nav .nlinks a,body.dark-top .nav .nphone{color:rgba(247,243,234,.85)}
body.dark-top .nav .nlinks a:hover,body.dark-top .nav .nlinks a[aria-current]{color:#fff}
body.dark-top .nav .burger{border-color:rgba(247,243,234,.38)}
body.dark-top .nav .burger span,body.dark-top .nav .burger span::before,body.dark-top .nav .burger span::after{background:var(--cream)}
body.dark-top .nav .btn-ink{background:var(--cream);color:var(--ink)}
body.dark-top.scrolled .nav,body.menu-open .nav{background:rgba(247,243,234,.94);border-bottom-color:var(--line)}
body.dark-top.scrolled .nav .w1,body.menu-open .nav .w1{color:var(--ink)}
body.dark-top.scrolled .nav .nlinks a,body.dark-top.scrolled .nav .nphone,
body.menu-open .nav .nlinks a,body.menu-open .nav .nphone{color:var(--body)}
body.dark-top.scrolled .nav .burger,body.menu-open .nav .burger{border-color:var(--line)}
body.dark-top.scrolled .nav .burger span,body.dark-top.scrolled .nav .burger span::before,
body.dark-top.scrolled .nav .burger span::after,body.menu-open .nav .burger span,
body.menu-open .nav .burger span::before,body.menu-open .nav .burger span::after{background:var(--ink)}
body.dark-top.scrolled .nav .btn-ink,body.menu-open .nav .btn-ink{background:var(--ink);color:var(--cream)}

/* -- mobile drawer -------------------------------------------------------------
   REBUILT 2026-08-31. Three separate faults, all visible at once on a phone:
   (1) STACKING. The drawer sat at z-index 69 while .bookbar (75) and .chatfab (80)
       floated ABOVE it, so the sticky Book bar covered the drawer's own buttons and
       the round chat bubble landed directly on top of "Book an appointment".
   (2) UNREACHABLE CTAs. The whole drawer was one scrolling box, so its buttons
       scrolled away under the bookbar and could not be tapped at all.
   (3) OVERFLOW. Ten links at 21px with 16px padding are taller than a phone screen,
       so the menu opened ALREADY SCROLLED with Facials, Waxing and Lashes cut off
       above the fold, which is why the list appeared to begin at "Infusions".
   It is now a flex column: the link list scrolls on its own, the buttons are PINNED
   to the bottom and always reachable, and the bookbar and fab are taken out of the
   way while it is open because they duplicate those exact two actions. */
.drawer{position:fixed;inset:var(--nav-h) 0 auto;background:var(--cream);border-bottom:1px solid var(--line);
  z-index:90;padding:0;transform:translateY(-118%);transition:transform .38s cubic-bezier(.3,.8,.3,1);
  max-height:calc(100dvh - var(--nav-h));overflow:hidden;box-shadow:var(--shadow)}
body.menu-open .drawer{transform:translateY(0)}
.dwrap{display:flex;flex-direction:column;max-height:calc(100dvh - var(--nav-h))}
/* min-height:0 is what actually lets a flex child scroll instead of growing */
.dlinks{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:6px 0 0}
/* SCOPED TO .dlinks ON PURPOSE. Written as "drawer a" this also hit the two CTA
   buttons and beat the .btn rule on specificity, which is why they rendered
   left-aligned, in the serif at 23px, and with cream text on the gold pill
   instead of dark. */
.dlinks a{display:block;padding:17px 0;font-size:23px;line-height:1.3;font-family:var(--serif);
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.dlinks a:last-child{border-bottom:0}
.drawer .dbtns{flex:0 0 auto;display:grid;gap:10px;border-top:1px solid var(--line);
  padding:14px 0 calc(16px + env(safe-area-inset-bottom))}
.drawer .dbtns .btn{width:100%}
/* the sticky bar and the chat bubble were the things overlapping the drawer, and
   they offer the same two actions it already shows -- hide them while it is open */
body.menu-open .bookbar,body.menu-open .chatfab,body.menu-open .chatpanel{
  opacity:0;visibility:hidden;pointer-events:none}
/* backdrop: without it the page shows through beneath the drawer and you see half a
   button poking out below its bottom edge. z-index sits under the nav (70) so the
   close button stays lit, and under the drawer (90). Tapping it closes the menu. */
.scrim{position:fixed;inset:0;z-index:68;background:rgba(9,14,8,.58);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
body.menu-open .scrim{opacity:1;visibility:visible}
@media(min-width:1061px){.scrim{display:none}}
@media(max-width:1240px){
  .nlinks,.nphone{display:none}
  .burger{display:flex}
}
/* The lockup, the Book button and the burger together have an intrinsic width of ~411px, so
   below that the header pushed every page sideways. Shrink the lockup and the button first,
   then drop the button entirely on the narrowest phones — the drawer opens with the same
   CTA, and every page carries its own. The 44px burger tap target is never reduced. */
@media(max-width:640px){
  :root{--nav-h:86px}
  .nav-in{gap:14px}
  .brand{gap:10px}
  .brand .mk{width:30px;height:30px;flex:0 0 30px}
  .brand .w1{font-size:22px;letter-spacing:.08em}
  .brand .w2{font-size:9px;letter-spacing:.28em}
  .ncta{gap:11px}
  .ncta .btn{padding:12px 17px;font-size:12.5px;letter-spacing:.04em}
  /* 19px/13px keeps every row a 51px tap target (over the 44px minimum) while
     letting all ten links plus the pinned buttons fit a 932px phone unscrolled */
  .dlinks a{font-size:19px;padding:13px 0}
}
@media(max-width:430px){.ncta .btn{display:none}}
@media(min-width:1061px){.drawer{display:none}}

/* ── hero ── */
.hero{position:relative;min-height:min(94dvh,880px);display:flex;align-items:flex-end;
  margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 70px) 0 84px;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,18,11,.58) 0%,rgba(12,18,11,.22) 30%,rgba(12,18,11,.52) 66%,rgba(12,18,11,.90) 100%),
             linear-gradient(96deg,rgba(12,18,11,.80) 0%,rgba(12,18,11,.58) 34%,rgba(12,18,11,.12) 66%,rgba(12,18,11,0) 100%)}
.hero-in{position:relative;z-index:2;color:var(--cream);width:min(100% - 44px,var(--wrap));margin-inline:auto}
.hero h1{color:#fff;font-size:clamp(2.9rem,7vw,5.4rem);font-weight:400;letter-spacing:-.018em;
  line-height:1.02;max-width:15ch;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero .sub{margin:24px 0 0;font-size:clamp(1.05rem,1.9vw,1.32rem);color:rgba(247,243,234,.88);
  max-width:52ch;line-height:1.62}
.hero .btns{margin-top:38px}
.hero-meta{margin-top:44px;padding-top:26px;border-top:1px solid rgba(247,243,234,.20);
  display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;
  font-size:14px;color:rgba(247,243,234,.78)}
.hero-meta b{color:#fff;font-weight:500}
.hero-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--gold-lt);flex:0 0 3px}
@media(max-width:700px){
  .hero{min-height:0;margin-top:0;padding:0 0 46px;display:block;background:var(--ink)}
  .hero-img{position:relative;inset:auto;height:74vw;max-height:440px;margin-top:calc(-1 * var(--nav-h))}
  .hero-img::after{background:linear-gradient(180deg,rgba(12,18,11,.52) 0%,rgba(12,18,11,.10) 44%,rgba(12,18,11,.78) 100%)}
  .hero-in{padding-top:34px}
  .hero h1{max-width:none}
  .hero-meta{gap:10px 22px;margin-top:30px}
}

/* ── page banner (every interior page) ── */
.pbanner{position:relative;margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 92px) 0 78px;
  overflow:hidden;background:var(--ink);min-height:420px;display:flex;align-items:flex-end}
.pbanner .bimg{position:absolute;inset:0}
.pbanner .bimg img{width:100%;height:100%;object-fit:cover}
.pbanner .bimg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,18,11,.62) 0%,rgba(12,18,11,.34) 44%,rgba(12,18,11,.84) 100%),
             linear-gradient(96deg,rgba(12,18,11,.82) 0%,rgba(12,18,11,.60) 36%,rgba(12,18,11,.14) 70%,rgba(12,18,11,0) 100%)}
.pbanner-in{position:relative;z-index:2;color:var(--cream);width:min(100% - 44px,var(--wrap));margin-inline:auto}
.pbanner h1{color:#fff;font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:400;letter-spacing:-.015em;max-width:18ch}
.pbanner .lede{margin-top:20px}
.crumbs{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(247,243,234,.62);margin-bottom:20px}
.crumbs a{color:rgba(247,243,234,.62);text-decoration:none;transition:color .2s;
  display:inline-block;padding:13px 6px;margin:-13px -6px;min-height:44px;box-sizing:content-box}
.crumbs a:hover{color:var(--gold-lt)}
.crumbs span{margin:0 8px;opacity:.5}
@media(max-width:700px){.pbanner{padding:calc(var(--nav-h) + 56px) 0 52px;min-height:0}}

/* ── sections ──
   Every band is lit, never filled flat. Light sections get a warm gold glow off one corner and
   a sage glow off the opposite one; dark sections get the same treatment turned up, which reads
   like the lamp light in her own rooms. Painted as background-image on the section itself rather
   than a pseudo-element, so there is no stacking context to get wrong. */
.sec{padding:clamp(64px,8.5vw,118px) 0;position:relative}
.sec-ink,.sec-moss{border-top:1px solid rgba(201,169,106,.20);border-bottom:1px solid rgba(201,169,106,.14)}
.sec-tight{padding:clamp(48px,6vw,80px) 0}
.sec-cream{}
.sec-ink{color:rgba(247,243,234,.80)}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-moss{color:rgba(247,243,234,.80)}
.sec-moss h2,.sec-moss h3{color:#fff}
.shead{max-width:70ch;margin-bottom:clamp(34px,4.5vw,58px)}
.shead.center{margin-inline:auto;text-align:center}
.shead h2{font-size:clamp(1.95rem,4.2vw,3.05rem)}
.shead p{margin-top:16px}

/* ── grids ── */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.g2.ba-pair{align-items:center}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── split ── */
.split{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(34px,5.5vw,80px);align-items:center}
.split.flip .s-media{order:2}
.split .s-media img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}.split.flip .s-media{order:0}}

/* ── service cards ── */
.scard{position:relative;display:flex;flex-direction:column;
  background:linear-gradient(168deg,#FFFEFA 0%,#FDFAF3 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;
  box-shadow:0 1px 2px rgba(27,36,25,.04),0 14px 34px -22px rgba(27,36,25,.20);
  transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s,border-color .34s}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#D5CBB6}
.scard .ph{aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.scard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.scard:hover .ph img{transform:scale(1.045)}
.scard .bd{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.scard h3{font-size:1.5rem;margin-bottom:9px}
.scard p{font-size:15px;color:var(--muted);line-height:1.62;flex:1}
.scard .from{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);font-weight:500}
.scard .arw{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.scard:hover .arw{transform:translateX(5px)}

/* ── price list ──
   Every service is a cream card, two across, matching the .itreat treatment on the Infusion
   Studio page (Adam, 2026-08-28: "add the white bubble around the other services... so they do
   not all look hard to read, and make them pop and look luxury").

   Worth recording because it was measured: the old light-on-dark rows were NOT a contrast
   failure — names ran 17.35:1 and descriptions 7.48:1. What was wrong was that sustained body
   copy is harder to read light-on-dark whatever the ratio (this audience skews older, per the
   client-site-design skill), the descriptions sat at 66% opacity so they read as recessed, and a
   flat hairline-separated list has no depth. Hence a treatment change, not a colour change.

   Two-up rather than full width is a deliberate density choice: the price list carries 47
   services and was already 12,093px tall. Two across makes it SHORTER than the plain list was;
   full-width cards would have pushed it past 16,000px. */
.menu-g{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:760px){.menu-g{grid-template-columns:1fr}}
.mrow{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px 24px;
  align-items:baseline;align-content:start;overflow:hidden;
  padding:clamp(24px,2.6vw,32px);
  background:linear-gradient(168deg,#FFFEFA 0%,#FCF8F0 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.mrow::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--gold-lt),rgba(176,141,87,.15))}
.mrow .mn{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.24}
/* --body, not --muted: on this card's darkest gradient stop --muted measures 4.40:1 and misses
   AA by a hair. It is the obvious-looking choice and it is wrong. Same trap for .mt below. */
.mrow .md{grid-column:1/-1;font-size:16px;color:var(--body);line-height:1.6;margin-top:2px}
.mrow .mp{font-family:var(--serif);font-size:1.5rem;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.mrow .mt{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#616B58;
  display:block;margin-top:6px;font-weight:500}
.mrow .fav{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#7C5F33;border:1px solid rgba(124,95,51,.38);border-radius:100px;padding:4px 11px;
  vertical-align:middle;margin-left:11px;font-weight:500;white-space:nowrap}
.mgroup+.mgroup{margin-top:clamp(44px,5vw,70px)}
.mgroup>h3{font-size:clamp(1.85rem,3.4vw,2.5rem);margin-bottom:10px}
.mgroup>.gnote{font-size:17px;color:var(--muted);max-width:66ch;margin-bottom:30px}
@media(max-width:560px){.mrow .mn,.mrow .mp{font-size:1.3rem}.mrow .md{font-size:15.5px}}

/* ── infusion treatment cards (Lux Infusion Studio) ──
   One card per treatment, each carrying Brian's full copy: hook, body, "what you feel and see",
   and the closing line. Wide single column so the copy stays readable at 17px+ — this audience
   skews older and the client-site-design floor applies to body text, not just headings. */
.itreats{display:grid;gap:clamp(22px,2.6vw,32px)}
/* Sectioning pass 2026-09-03. These were one per row at 1180x600, so choosing between $189,
   $165 and $285 meant holding three cards in your head across 2.2 screens of scrolling. The two
   SINGLE treatments now sit side by side so the comparison happens at a glance, and the Dual
   Infusion spans the full width underneath, because it is not a third alternative: it is the
   other two combined at a saving, so it reads as the upgrade rather than the last item in a
   list. Phones keep the single column, which is where most of her traffic is and where stacked
   is correct. 1000px is where two cards still hold a readable line length. */
@media(min-width:1000px){
  .itreats{grid-template-columns:1fr 1fr}
  .itreats > :last-child{grid-column:1 / -1}
  /* stretch, not start: side by side the two cards ran 840px and 891px, so their bottom edges
     and their Book buttons sat at different heights, which reads as two unrelated blocks rather
     than two options being compared. Flex column plus margin-top:auto pins both buttons to the
     same line. Only the infusion page uses .itreat, so this cannot affect another page. */
  .itreats > .itreat{display:flex;flex-direction:column}
  .itreats > .itreat .btns{margin-top:auto;padding-top:8px}
}
.itreat{position:relative;background:linear-gradient(168deg,#FFFEFA 0%,#FCF8F0 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:clamp(30px,3.4vw,48px);overflow:hidden}
.itreat::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--gold-lt),rgba(176,141,87,.15))}
.itreat.feature{background:linear-gradient(168deg,#FFFDF6 0%,#F8F1E2 100%);
  border-color:rgba(176,141,87,.42);box-shadow:var(--shadow-lg)}
.itreat .ihead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
/* These cards are a LIGHT surface on a dark page, like the review cards. Headings inherit the
   page's light-on-dark colour, which on cream is invisible (measured 1.04:1), and the brand gold
   only reaches 2.75:1 on the feature card's darkest gradient stop. So both are set explicitly
   here: ink for the name, and a darkened gold that clears AA for normal text at 5.27:1 while
   still reading as the same accent. Do not swap these back to var(--gold) on a light card. */
.itreat h3{font-size:clamp(1.7rem,3.1vw,2.3rem);line-height:1.16;margin:0;flex:1 1 auto;
  color:var(--ink)}
.itreat .ip{font-family:var(--serif);font-size:clamp(1.7rem,3.1vw,2.3rem);
  color:#7C5F33;white-space:nowrap;font-weight:500;display:flex;flex-direction:column;
  align-items:flex-end;line-height:1.1}
/* #616B58, not var(--muted): --muted measures 4.40:1 on this card and misses AA at 13px. Shipped
   that way earlier on 2026-08-28 and corrected when the same trap came up on the price list. */
.itreat .idur{font-family:var(--sans);font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:#616B58;margin-top:6px;font-weight:500}
.itreat .isub{font-size:16.5px;color:var(--muted);flex:1 0 100%;margin:-2px 0 0}
.itreat .isave{display:inline-block;font-size:14px;letter-spacing:.04em;color:var(--ink);
  background:rgba(176,141,87,.16);border:1px solid rgba(176,141,87,.38);
  border-radius:100px;padding:6px 14px;font-weight:500;white-space:nowrap}
.itreat .ihook{font-family:var(--serif);font-size:clamp(1.24rem,2.1vw,1.5rem);
  line-height:1.42;color:var(--ink-2);margin-bottom:18px}
.itreat p{font-size:17.5px;line-height:1.66;color:var(--body)}
.itreat p+p{margin-top:16px}
.itreat h4{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:#7C5F33;
  font-family:var(--sans);font-weight:600;margin:26px 0 10px}
.itreat .iclose{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-size:17px;color:var(--ink-2);font-style:italic}
.itreat .btns{margin-top:28px}
@media(max-width:560px){.itreat p{font-size:16.5px}.itreat .ip{font-size:1.9rem}}

/* ── treatment clip ── */
.ivid-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--ink);max-width:1000px;margin-inline:auto;aspect-ratio:16/9}
.ivid-wrap video{width:100%;height:100%;display:block;object-fit:cover}
.ivid-cap{margin-top:18px;font-size:14.5px;color:var(--muted);text-align:center;
  max-width:60ch;margin-inline:auto;line-height:1.6}
/* Portrait video, added 2026-09-03 for Karen's own infusion room tour. It is a phone video,
   9:16, so it CANNOT reuse .ivid-wrap: that is aspect-ratio 16/9 with object-fit:cover and
   would throw away about two thirds of her frame. Height-capped rather than width-capped so a
   tall video never runs past a laptop screen; the width follows from the aspect ratio. */
.pvid-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--ink);aspect-ratio:9/16;max-height:min(74vh,780px);margin-inline:auto;
  width:auto;max-width:100%}
.pvid-wrap video{width:100%;height:100%;display:block;object-fit:contain;background:#0B110A}
/* Room tour: the portrait video alone was 375px wide in a 1600px viewport, floating in an
   1117px-tall band of empty dark. Pairing it with the copy and a booking CTA fills the width
   and turns the last section before the booking band into a conversion step. */
.roomtour{display:grid;gap:clamp(26px,3.4vw,52px);align-items:center}
.roomtour-copy h2{margin:6px 0 0}
.roomtour-copy .lede{margin-top:12px}
.roomtour-copy p{margin-top:14px}
.roomtour-copy .btns{margin-top:26px}
@media(min-width:900px){.roomtour{grid-template-columns:minmax(300px,380px) 1fr}}
/* only .shead.center existed; the in-content CTA rows need it on the button row itself */
.btns.center{justify-content:center}

/* ── awards lineup (Rezenerate) ──
   Nineteen badges cut out of the supplied sheet and laid straight on the page ground, so the
   dark section reads between them rather than behind a slab. This works ONLY because each
   badge carries its own opaque disc; the black type on them is printed on white, not on
   transparency. Verified by compositing every badge over #1B2419 and measuring before
   building this. The drop shadow is what stops a white disc looking pasted on.
   Rows land 5/5/5/4, matching the sheet. */
.awards{text-align:center}
/* FLEX, not grid, and this is deliberate: 19 badges in a 5-column grid leaves the last row of
   four hard against the left with a 337px hole beside it. justify-content:center centres every
   row INCLUDING the short last one, and because the files are all one square size the rows
   still line up like a grid. Wrapping is natural, so no column-count media queries either. */
/* The column count is PINNED rather than left to natural wrapping. There are 19 badges, so the
   per-row count decides the shape of the last row: 5 gives 5/5/5/4 and 4 gives 4/4/4/4/3, both
   tidy, while 6 gives 6/6/6/1 and 3 gives 3x6/1 — a single stranded badge that reads as a bug.
   Natural wrapping hit exactly that at 753-1009px. Width is derived from the count so N fit per
   row exactly; the 0.5px is slack against sub-pixel rounding dropping one to the next row. */
.awgrid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  --aw-cols:5;--aw-gap:clamp(6px,1.4vw,22px);
  /* Row gap is deliberately tighter than the column gap: every badge is centred on a square
     canvas, so short marks already carry transparent padding above and below and an equal gap
     reads as a hole between rows. Column gap must stay var(--aw-gap) — the width calc uses it. */
  gap:clamp(0px,0.4vw,6px) var(--aw-gap);max-width:952px;margin-inline:auto}
.awgrid img{flex:0 0 auto;height:auto;display:block;
  width:calc((100% - (var(--aw-cols) - 1)*var(--aw-gap) - 0.5px)/var(--aw-cols));
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
@media(max-width:1180px){.awgrid{--aw-cols:4;max-width:760px}}
.awards .acap{margin-top:clamp(24px,3vw,34px);font-size:14.5px;color:var(--muted);
  max-width:64ch;margin-inline:auto;line-height:1.6}
.awcta{text-align:center;margin-top:clamp(28px,3.4vw,42px)}
.awcta .pills{justify-content:center;margin-bottom:24px}
.awcta .btns{justify-content:center}
.awfrom{margin-top:18px;font-size:15.5px;color:var(--muted)}
.awfrom b{color:var(--gold-lt);font-weight:500}

/* ── reviews ── */
.rvw{margin:0;background:linear-gradient(168deg,#FFFEFA 0%,#FDFAF3 100%);
  box-shadow:0 1px 2px rgba(27,36,25,.04),0 12px 30px -24px rgba(27,36,25,.20);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;gap:16px;break-inside:avoid}
.rvw q{quotes:none;font-family:var(--serif);font-size:1.16rem;line-height:1.56;color:var(--ink-2);flex:1}
.rvw q::before{content:'“';color:var(--gold);margin-right:1px}
.rvw q::after{content:'”';color:var(--gold)}
.stars{color:var(--gold);letter-spacing:2px;font-size:13px}
.who{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted)}
.who .av{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--cream);
  display:grid;place-items:center;font-family:var(--serif);font-size:16px;flex:0 0 36px}
.who .nm{display:block;color:var(--ink);font-weight:500;font-size:14.5px}
.who .mt{display:block;font-size:12.5px;margin-top:1px}
.rcols{columns:3;column-gap:clamp(18px,2.4vw,30px)}
.rcols .rvw{margin-bottom:clamp(18px,2.4vw,30px);display:inline-flex;width:100%}
@media(max-width:980px){.rcols{columns:2}}
@media(max-width:620px){.rcols{columns:1}}

/* ── before / after slider ── */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--ink);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba img{width:100%;display:block;pointer-events:none}
.ba .aft{position:absolute;inset:0;overflow:hidden;width:50%}
.ba .aft img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.ba .hnd{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.92);
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 18px rgba(0,0,0,.35)}
.ba .hnd::after{content:'';position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.96);
  box-shadow:0 4px 18px rgba(0,0,0,.34)}
.ba .hnd .ar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  color:var(--ink);font-size:12px;letter-spacing:1px}
.ba .lbl{position:absolute;bottom:14px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(15,22,14,.72);color:#fff;padding:6px 13px;border-radius:100px;
  backdrop-filter:blur(6px);pointer-events:none;font-weight:500}
.ba .lbl.l{left:14px}.ba .lbl.r{right:14px}
.ba-cap{margin-top:14px;font-size:14px;color:var(--muted);text-align:center}

/* ── gallery ── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal .tall{grid-row:span 2;aspect-ratio:auto}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}.gal .tall{grid-row:span 1;aspect-ratio:4/3}}

/* ── product cards ── */
.pcard{background:linear-gradient(168deg,#FFFEFA 0%,#FDFAF3 100%);
  box-shadow:0 1px 2px rgba(27,36,25,.04),0 12px 30px -24px rgba(27,36,25,.20);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;display:flex;flex-direction:column;gap:10px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pcard h3{font-size:1.36rem}
.pcard .sz{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:500}
.pcard .ac{font-size:14px;color:var(--ink-2);font-style:italic;font-family:var(--serif);font-size:1.02rem}
.pcard p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ── facts / hours ── */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,58px)}
@media(max-width:820px){.facts{grid-template-columns:1fr}}
.hrow{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:15.5px}
.hrow:last-child{border-bottom:0}
.hrow .d{color:var(--ink)}
.hrow .t{color:var(--muted);font-variant-numeric:tabular-nums}
.hrow.closed .t{color:#A79B85}
.hrow.today{position:relative}
.hrow.today .d{font-weight:500;color:var(--gold)}
.hrow.today .t{color:var(--gold)}
.sec-ink .hrow,.sec-moss .hrow{border-color:rgba(247,243,234,.14)}
.sec-ink .hrow .d,.sec-moss .hrow .d{color:rgba(247,243,234,.94)}
.sec-ink .hrow .t,.sec-moss .hrow .t{color:rgba(247,243,234,.62)}
.sec-ink .hrow.today .d,.sec-ink .hrow.today .t,
.sec-moss .hrow.today .d,.sec-moss .hrow.today .t{color:var(--gold-lt)}

.iline{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.iline:last-child{border-bottom:0}
.iline svg{flex:0 0 19px;margin-top:3px;color:var(--gold)}
.iline .k{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sage);
  display:block;margin-bottom:3px;font-weight:500}
/* These are the phone, email and address links in the Find us blocks — a phone tap is a tracked
   lead, so this is a conversion target, not decoration. It measured 112x26 on a phone. Padded to
   clear 44px without moving the underline off the text. */
.iline a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color .2s;display:inline-block;padding:9px 0;margin:-9px 0;min-height:44px;
  box-sizing:content-box}
.iline a:hover{border-color:var(--gold)}
.sec-ink .iline,.sec-moss .iline{border-color:rgba(247,243,234,.14)}
.sec-ink .iline a,.sec-moss .iline a{color:#fff;border-color:rgba(247,243,234,.30)}

/* ── steps ── */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,44px)}
.steps>div{counter-increment:s;position:relative;padding-top:56px}
.steps>div::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--serif);font-size:2.5rem;color:var(--gold);opacity:.5;line-height:1}
.steps h3{font-size:1.36rem;margin-bottom:9px}
.steps p{font-size:15px;color:var(--muted)}
.sec-ink .steps p,.sec-moss .steps p{color:rgba(247,243,234,.72)}
@media(max-width:800px){.steps{grid-template-columns:1fr;gap:30px}.steps>div{padding-top:0;padding-left:62px}
  .steps>div::before{font-size:2.1rem}}

/* ── FAQ ── */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative;
  font-family:var(--serif);font-size:1.28rem;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq .ans{padding:0 40px 24px 0;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:74ch}

/* ── form ── */
.form{background:linear-gradient(168deg,#FFFEFA 0%,#FCF9F1 100%);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,46px);box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.fld label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:500}
.fld input,.fld select,.fld textarea{font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 15px;width:100%;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B08D57' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(176,141,87,.14)}
.fld input:invalid:not(:placeholder-shown){border-color:#C0796B}
.fnote{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.6}
.thanks{text-align:center;padding:36px 10px}
.thanks .tick{width:58px;height:58px;border-radius:50%;background:var(--gold);color:#fff;
  display:grid;place-items:center;margin:0 auto 20px;font-size:26px}
.thanks h3{font-size:1.9rem;margin-bottom:10px}
.thanks p{color:var(--muted)}

/* ── CTA band ── */
.cta{position:relative;overflow:hidden;background:var(--ink);text-align:center;
  padding:clamp(64px,8vw,112px) 0}
.cta .cimg{position:absolute;inset:0;opacity:.30}
.cta .cimg img{width:100%;height:100%;object-fit:cover}
.cta .cimg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,22,14,.72),rgba(15,22,14,.90))}
.cta-in{position:relative;z-index:2}
.cta h2{color:#fff;font-size:clamp(2rem,4.6vw,3.3rem);max-width:20ch;margin-inline:auto}
.cta p{margin:20px auto 0;color:rgba(247,243,234,.80);max-width:56ch;font-size:1.06rem}
.cta .btns{justify-content:center;margin-top:34px}

/* ── footer ── */
.foot{background-color:var(--ink);color:rgba(247,243,234,.62);padding:clamp(52px,6vw,80px) 0 34px;font-size:14.5px;
  background-image:
    radial-gradient(760px 420px at 10% 0%,rgba(198,163,102,.16),transparent 62%),
    radial-gradient(680px 400px at 94% 90%,rgba(122,150,104,.12),transparent 65%)}
.foot a{color:rgba(247,243,234,.62);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--gold-lt)}
/* Footer links were rendering 21px tall on a phone — measured 19 tap targets under the 44px
   minimum, and this audience skews older (client-site-design skill). The link itself is padded
   rather than the row spaced, so the whole target grows, not just the gap between them.
   Negative inline margin keeps the left edge optically aligned with the heading above. */
.foot ul a{display:inline-block;padding:11px 8px;margin:-11px -8px;min-height:44px;
  line-height:1.45;box-sizing:content-box}
@media(hover:none){.foot ul a{padding:13px 8px;margin:-13px -8px}}
/* mailing list strip, above the footer columns on every page */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flist{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,44px);align-items:center;
  padding-bottom:clamp(34px,4vw,46px);margin-bottom:clamp(34px,4vw,46px);
  border-bottom:1px solid rgba(247,243,234,.13)}
/* Scoped .foot .flist rather than .flist alone: the .foot h4 rule is defined later at the same
   specificity and was winning, rendering this as an 11.5px uppercase column label instead of a
   heading. (No backticks in these comments — the whole stylesheet is a template literal.) */
.foot .flist h4{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);color:#fff;
  letter-spacing:0;text-transform:none;margin:0 0 8px;font-weight:500}
.flist p{margin:0;max-width:46ch;line-height:1.62}
/* Three fields now, not one (Karen, 2026-09-03): she wants name and phone so she can add
   signups to Vagaro by hand. The input rules are NOT scoped to [type=email] any more, or the
   new text and tel fields would render as unstyled browser boxes on a dark ground. */
.flist-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flist-form input{min-height:52px;padding:14px 16px;font:inherit;width:100%;
  font-size:16px;color:#FBF8F1;background:rgba(255,255,255,.06);border-radius:10px;
  border:1px solid rgba(247,243,234,.22)}
.flist-form input::placeholder{color:rgba(247,243,234,.42)}
.flist-form input:focus{outline:none;border-color:var(--gold-lt);
  box-shadow:0 0 0 3px rgba(201,169,106,.20)}
.flist-form .f-wide,.flist-form .btn{grid-column:1 / -1}
.flist-form .btn{min-height:52px;width:100%}
/* the footer band is narrow; below this the two-up row crowds the placeholders */
@media(max-width:520px){.flist-form{grid-template-columns:1fr}}
.flist-slot .thanks{text-align:left;padding:0}
.flist-slot .thanks h3{font-size:1.25rem;margin:8px 0 6px;color:#fff}
.flist-slot .thanks p{font-size:15px}
@media(max-width:760px){.flist{grid-template-columns:1fr;gap:20px}
  .flist-form .btn{width:100%}}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(26px,3.4vw,48px)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;gap:32px}}
.foot h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);
  font-family:var(--sans);font-weight:500;margin-bottom:16px}
/* gap trimmed from 11px because each link now carries its own 11px of padding — without this
   the footer columns grow by ~90px on a phone for no visual gain. */
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fbrand .w1{font-family:var(--serif);font-size:26px;letter-spacing:.10em;color:#fff;display:block}
.fbrand .w2{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-lt);margin-top:5px;display:block}
.fbrand p{margin-top:18px;max-width:34ch;line-height:1.7}
.social{display:flex;gap:11px;margin-top:20px}
/* 44px, up from 38px: the icon stays visually the same size, the hit area does not. */
.social a{width:44px;height:44px;border:1px solid rgba(247,243,234,.20);border-radius:50%;
  display:grid;place-items:center;transition:border-color .25s,background .25s,color .25s}
.social a:hover{border-color:var(--gold);background:var(--gold);color:#fff}
.fbot{margin-top:clamp(38px,5vw,60px);padding-top:26px;border-top:1px solid rgba(247,243,234,.13);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:13px;
  color:rgba(247,243,234,.44)}
.fbot .by{color:rgba(247,243,234,.44)}
.fbot .by a{color:rgba(247,243,234,.62);display:inline-block;padding:12px 6px;margin:-12px -6px;
  min-height:44px;box-sizing:content-box}

/* ── misc ── */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:100px;padding:8px 16px;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:var(--cream-2)}
.pill.on-dark{border-color:rgba(247,243,234,.22);color:rgba(247,243,234,.78);background:transparent}
/* A pill used as a LINK is a tap target (the price list's jump nav), so it gets the 44px floor.
   Decorative pills — the qualifier chips on the awards band and the treatment pages — are not
   links and are deliberately left alone. */
a.pill{min-height:44px;padding-block:12px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.note{border-left:2px solid var(--gold);padding:4px 0 4px 20px;color:var(--muted);font-size:15px;
  max-width:70ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);
  padding:12px 20px;z-index:100;border-radius:0 0 10px 0}
.skip:focus{left:0}
/* .reveal is deliberately INERT. It used to start every section at opacity:0 and rely on an
   IntersectionObserver to reveal it, which left whole bands blank when the observer did not
   fire — and because a transparent parent also defers its lazy-loaded images, eleven of the
   twelve photographs on the home page never downloaded at all. A client demo cannot have a
   failure mode where a section is simply not there, so the animation is gone. The class is
   left in the markup as an inert hook. Do not restyle it to hide anything. */

/* ═══════════════════════════════════════════════════════════════════════════
   DARK LUXE LAYER
   Everything above assumes a light page. It read as flat bands of cream with text
   sitting on them, which is exactly the templated look this is meant to avoid.

   Her own material is dark: the treatment rooms are lit blue and amber at night,
   her brand card is deep forest green and gold, and the hero is a lit sign in a
   dark room. So the page ground is dark and the accents are the light sources she
   actually has in the building: the warm ring of her illuminated sign, and the blue
   LED wash on the walls.

   This is an override layer on purpose. Delete from here down and the light version
   returns intact.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#0F160E;
  --panel:#182116;
  --panel-2:#1E2A1C;
  --amber:#E2B87A;        /* her illuminated LUX ETERNAL ring */
  --amber-hot:#F0CE9A;
  --led:#7FA6D6;          /* the blue wash on her treatment room walls */
  --txt:rgba(242,240,231,.86);
  --txt-dim:rgba(242,240,231,.66);   /* 6.9:1 on the ground — this audience skews older */
  --edge:rgba(226,184,122,.16);
  --edge-hot:rgba(226,184,122,.42);
}
body{background:var(--ground);background-image:none;color:var(--txt)}
h1,h2,h3,h4{color:#FBF8F1}

/* section grounds. no flat fills: each band is a dark ground with two soft light
   sources bled into it, plus the grain. */
.sec,.sec-tight{position:relative;overflow:hidden;background-color:transparent;background-image:none;
  border-top:0;border-bottom:0}
/* isolation:isolate added 2026-09-03. Karen reported the Book button under the homepage
   reviews looking like it had a film over it on her desktop, readable only while hovered, and
   it did not reproduce here. The mechanism: ::before carries filter:blur(58px), which promotes
   it to its own composited layer, and inset:-10% -20% lets it bleed outside the section box.
   A composited filtered layer can paint over non-composited siblings on some GPU and browser
   combinations regardless of z-index. Hover added transform:translateY(-2px) to the button,
   promoting the BUTTON to its own layer too and lifting it clear, which is exactly why it went
   readable under the cursor. Forcing a stacking context on the section pins both pseudo-elements
   inside it, and the explicit z-indexes stop content ever relying on hover promotion. */
.sec,.sec-tight{isolation:isolate}
.sec::before,.sec-tight::before{content:'';position:absolute;inset:-10% -20%;pointer-events:none;
  z-index:0;
  background:
    radial-gradient(38% 46% at 6% 8%,rgba(226,184,122,.30),transparent 68%),
    radial-gradient(40% 48% at 96% 96%,rgba(127,166,214,.20),transparent 68%);
  filter:blur(58px);opacity:.9}
.sec::after,.sec-tight::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);background-size:180px 180px;opacity:.75}
.sec>*,.sec-tight>*{position:relative;z-index:2}

/* alternate the light source so consecutive bands never look the same */
.sec-cream{background-color:var(--panel);background-image:none;border-top:1px solid rgba(226,184,122,.12);
  border-bottom:1px solid rgba(226,184,122,.12)}
.sec-cream::before{background:
    radial-gradient(42% 50% at 94% 6%,rgba(226,184,122,.34),transparent 68%),
    radial-gradient(38% 46% at 2% 98%,rgba(127,166,214,.22),transparent 68%)}
.sec-ink{background-color:var(--ground);background-image:none}
.sec-moss{background-color:var(--panel-2);background-image:none}
.sec-moss::before{background:
    radial-gradient(44% 52% at 14% 2%,rgba(226,184,122,.36),transparent 66%),
    radial-gradient(40% 48% at 92% 100%,rgba(127,166,214,.24),transparent 68%)}

/* a hairline of light where bands meet */
.sec+.sec,.sec+.sec-tight,.sec-tight+.sec{border-top:1px solid rgba(226,184,122,.10)}

/* type */
.lede,.lede.on-dark{color:var(--txt-dim)}
/* .mrow .md is NOT in this list: the service rows are cream cards, and --txt-dim (near-white at
   66%) measures 1.05:1 against that card — invisible. Its colour is owned by the base rule. */
p,.scard p,.pcard p,.steps p,.faq .ans,.fnote,.ba-cap,.gnote,.mgroup>.gnote{color:var(--txt-dim)}
.sec-ink .steps p,.sec-moss .steps p{color:var(--txt-dim)}
.eyebrow,.eyebrow.on-dark{color:var(--amber);text-shadow:0 0 22px rgba(226,184,122,.45)}
.note{border-left-color:var(--amber);color:var(--txt-dim)}
.note strong{color:#FBF8F1}

/* cards: raised glass on the dark ground, with a light edge that ignites on hover.
   this is the "neon accent" — it is her own signage colour, not a generic glow. */
.scard,.rvw,.pcard,.form{
  background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border:1px solid var(--edge);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 34px 70px -38px rgba(0,0,0,.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scard:hover{transform:translateY(-6px);border-color:var(--edge-hot);
  box-shadow:0 0 0 1px rgba(226,184,122,.30),0 0 46px -12px rgba(226,184,122,.42),
             0 40px 80px -38px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.07) inset}
.scard .from{color:var(--amber)}
.rvw q{color:rgba(245,242,233,.92)}
.rvw q::before,.rvw q::after{color:var(--amber)}
.stars{color:var(--amber);text-shadow:0 0 16px rgba(226,184,122,.55)}
.who{color:var(--txt-dim)}
.who .nm{color:#FBF8F1}
.who .av{background:linear-gradient(150deg,var(--amber),#B98B4C);color:#17200F;
  box-shadow:0 0 22px -4px rgba(226,184,122,.6)}
.pcard .sz{color:var(--amber)}
.pcard .ac{color:rgba(245,242,233,.86)}

/* price list — the service rows are CREAM CARDS on this dark ground, not dark rows, so the
   overrides that used to recolour them for the dark theme are gone on purpose. Every one of them
   was wrong against the card and would have been invisible or failing:
     .mn/.mp  #FBF8F1 near-white -> 1.1:1, invisible
     .mt      var(--led) blue    -> 2.38:1, fails
     .fav     var(--amber)       -> 1.74:1, fails
   The base rules now own these colours. Do not "restore" this block. */

/* faq, hours, icon lines */
.faq details{border-bottom-color:rgba(226,184,122,.13)}
.faq summary{color:#FBF8F1}
.faq summary:hover{color:var(--amber)}
.faq summary::after{border-color:var(--amber)}
.hrow,.sec-ink .hrow,.sec-moss .hrow{border-bottom-color:rgba(226,184,122,.12)}
.hrow .d,.sec-ink .hrow .d,.sec-moss .hrow .d{color:rgba(245,242,233,.92)}
.hrow .t,.sec-ink .hrow .t,.sec-moss .hrow .t{color:var(--txt-dim)}
.hrow.closed .t{color:rgba(240,238,228,.36)}
.hrow.today .d,.hrow.today .t,.sec-ink .hrow.today .d,.sec-ink .hrow.today .t,
.sec-moss .hrow.today .d,.sec-moss .hrow.today .t{color:var(--amber);text-shadow:0 0 18px rgba(226,184,122,.5)}
.iline,.sec-ink .iline,.sec-moss .iline{border-bottom-color:rgba(226,184,122,.12)}
.iline svg{color:var(--amber)}
.iline .k{color:var(--led)}
.iline a,.sec-ink .iline a,.sec-moss .iline a{color:#FBF8F1;border-bottom-color:rgba(226,184,122,.30)}
.iline a:hover{border-bottom-color:var(--amber)}

/* pills and steps */
.pill,.pill.on-dark{border-color:var(--edge);color:var(--txt-dim);
  background:rgba(255,255,255,.035)}
a.pill:hover{border-color:var(--edge-hot);color:#FBF8F1;box-shadow:0 0 26px -10px rgba(226,184,122,.5)}
.steps>div::before{color:var(--amber);opacity:.65;text-shadow:0 0 26px rgba(226,184,122,.4)}

/* buttons */
.btn-gold{background:linear-gradient(150deg,var(--amber-hot),#C0904F);color:#151E12;
  box-shadow:0 0 34px -10px rgba(226,184,122,.65)}
.btn-gold:hover{background:linear-gradient(150deg,#F7DCB4,#CE9E5C);
  box-shadow:0 0 48px -8px rgba(226,184,122,.85)}
.btn-out,.btn-ink{border-color:var(--edge-hot);color:#FBF8F1;background:transparent}
.btn-out:hover,.btn-ink:hover{background:rgba(226,184,122,.14);color:#fff;border-color:var(--amber);
  box-shadow:0 0 30px -12px rgba(226,184,122,.7)}
.btn-ghost{border-color:rgba(240,238,228,.34);color:#FBF8F1}
.btn-ghost:hover{background:rgba(226,184,122,.16);border-color:var(--amber);color:#fff}

/* form fields */
.fld label{color:var(--led)}
.fld input,.fld select,.fld textarea{background-color:rgba(255,255,255,.055);border-color:var(--edge);
  color:#FBF8F1}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(240,238,228,.38)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(226,184,122,.16)}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23E2B87A' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.fld select option{background:#182116;color:#FBF8F1}
.thanks .tick{background:linear-gradient(150deg,var(--amber),#B98B4C);color:#151E12;
  box-shadow:0 0 40px -8px rgba(226,184,122,.7)}
.thanks p{color:var(--txt-dim)}

/* nav: the whole page is dark now, so it never inverts to cream */
.nav{background:rgba(15,22,14,.55);border-bottom-color:transparent}
body.scrolled .nav,body.dark-top.scrolled .nav,body.menu-open .nav{
  background:rgba(15,22,14,.86);border-bottom-color:rgba(226,184,122,.16)}
.nav .w1,body.dark-top.scrolled .nav .w1,body.menu-open .nav .w1{color:#FBF8F1}
.nav .w2{color:var(--amber)}
.nav .nlinks a,.nav .nphone,body.dark-top.scrolled .nav .nlinks a,
body.dark-top.scrolled .nav .nphone,body.menu-open .nav .nlinks a,
body.menu-open .nav .nphone{color:rgba(240,238,228,.80)}
.nav .nlinks a:hover,.nav .nlinks a[aria-current]{color:#fff}
.nav .nlinks a::after{background:var(--amber);box-shadow:0 0 12px rgba(226,184,122,.8)}
.nav .burger,body.dark-top.scrolled .nav .burger,body.menu-open .nav .burger{border-color:rgba(226,184,122,.30)}
.nav .burger span,.nav .burger span::before,.nav .burger span::after,
body.dark-top.scrolled .nav .burger span,body.dark-top.scrolled .nav .burger span::before,
body.dark-top.scrolled .nav .burger span::after,body.menu-open .nav .burger span,
body.menu-open .nav .burger span::before,body.menu-open .nav .burger span::after{background:#FBF8F1}
body.dark-top .nav .btn-ink,body.dark-top.scrolled .nav .btn-ink,body.menu-open .nav .btn-ink,
.nav .btn-ink{background:transparent;color:#FBF8F1;border-color:var(--edge-hot)}
.drawer{background:rgba(18,26,17,.98);border-bottom-color:rgba(226,184,122,.18);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.dlinks a{color:#FBF8F1;border-bottom-color:rgba(226,184,122,.13)}

/* gallery tiles get an edge so they do not float on the dark */
.gal figure{border:1px solid var(--edge);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.split .s-media img,.ba{box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px var(--edge)}

/* banners and CTA sit on the same ground */
.cta{background:var(--panel)}
.foot{background-color:var(--ground);border-top:1px solid rgba(226,184,122,.14)}
.err404 .code{color:rgba(226,184,122,.22)}
.form{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
::selection{background:var(--amber);color:#151E12}
:focus-visible{outline-color:var(--amber)}

/* ── Circadia retail tiles ──
   The packshots are white-background, so each sits on its own light tile. That is what makes
   a white product read as premium retail on a dark page rather than a floating white square. */
/* Flex rather than grid so a short final row centres under the one above instead of
   hanging off the left. Fixed widths, not flex-grow, or a three-item last row stretches
   into three oversized tiles. Four across on desktop: at five the tiles fell to 218px and
   the whole range read as a spreadsheet. */
.crange{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.crange>.ctile{flex:0 0 auto;width:calc(25% - 16.5px)}
@media(max-width:1080px){.crange{gap:18px}.crange>.ctile{width:calc(33.333% - 12px)}}
@media(max-width:700px){.crange{gap:14px}.crange>.ctile{width:calc(50% - 7px)}}
.ctile{display:flex;flex-direction:column;background:linear-gradient(168deg,#FFFDF8,#F4EFE4);
  border:1px solid rgba(226,184,122,.20);border-radius:16px;overflow:hidden;text-decoration:none;
  box-shadow:0 26px 54px -32px rgba(0,0,0,.85);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s,border-color .32s}
.ctile:hover{transform:translateY(-5px);border-color:var(--edge-hot);
  box-shadow:0 0 0 1px rgba(226,184,122,.32),0 0 42px -14px rgba(226,184,122,.5),0 34px 66px -30px rgba(0,0,0,.9)}
/* 4:5 rather than square. These are tall narrow tubes and bottles, so a square frame left
   a band of empty white above and below and made every product look small. */
.ctile .shot{aspect-ratio:4/5;background:#fff;display:grid;place-items:center;padding:14px 10px}
.ctile .shot img{width:100%;height:100%;object-fit:contain}
.ctile .cb{padding:16px 17px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.ctile .cn{font-family:var(--serif);font-size:1.32rem;line-height:1.22;color:#1B2419}
.ctile .cs{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8A7442;font-weight:500}
.ctile .cp{margin-top:auto;padding-top:12px;font-family:var(--serif);font-size:1.42rem;color:#1B2419;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ctile .cp .go{font-family:var(--sans);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:#8A7442;font-weight:500}
/* the travel/trial strip is deliberately denser than the main range */
.ctrav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.ctrav>.ctile{flex:0 0 auto;width:calc(16.666% - 12px)}
.ctrav .shot{aspect-ratio:1;padding:8px}
.ctrav .cb{padding:11px 12px 13px;gap:3px}
.ctrav .cn{font-size:1.02rem}
.ctrav .cs{font-size:10.5px}
.ctrav .cp{font-size:1.1rem;padding-top:8px}
.ctrav .cp .go{display:none}
@media(max-width:1080px){.ctrav>.ctile{width:calc(25% - 11px)}}
@media(max-width:700px){.ctrav>.ctile{width:calc(33.333% - 10px)}}
@media(max-width:460px){.ctrav>.ctile{width:calc(50% - 7px)}}
.cgroup+.cgroup{margin-top:clamp(38px,4.5vw,58px)}
.cgroup>h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:5px}
.cgroup>.cnote{font-size:16px;color:var(--txt-dim);margin-bottom:26px}
.cgroup+.cgroup{margin-top:clamp(46px,5.5vw,72px)}
/* ── the Circadia credential plate ──
   Their logo is navy vector artwork, so it sits on its own light plate rather than being
   recoloured — you do not restyle another company's mark. The "Licensed Esthetician &
   Authorized Reseller" line is real text in her typography rather than part of a raster
   badge, so it stays crisp at any size and is readable to a search engine. */
.cbrand{text-align:center;margin-bottom:clamp(34px,4.5vw,56px)}
.cplate{display:inline-flex;flex-direction:column;align-items:center;gap:16px;
  background:linear-gradient(168deg,#FFFDF8,#F3EEE2);
  padding:clamp(30px,4vw,46px) clamp(38px,5vw,70px);border-radius:22px;
  border:1px solid rgba(226,184,122,.34);
  box-shadow:0 0 0 1px rgba(226,184,122,.14),0 0 70px -18px rgba(226,184,122,.45),
             0 44px 90px -40px rgba(0,0,0,.95)}
.cplate img{width:clamp(150px,17vw,224px);height:auto;display:block}
.cplate .cred{font-size:clamp(12px,1.15vw,14px);letter-spacing:.17em;text-transform:uppercase;
  font-weight:500;color:#24374A;line-height:1.6;text-align:center}
.cbrand .cbl{margin-top:26px;font-size:clamp(1.05rem,1.7vw,1.24rem);color:var(--txt-dim);
  max-width:62ch;margin-inline:auto;line-height:1.6}
.cbrand .cbl b{color:#FBF8F1;font-weight:500}
.cbrand .btns{justify-content:center;margin-top:28px}
@media(max-width:520px){.cplate{padding:26px 24px}.cplate .cred{letter-spacing:.13em}}

.mapwrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--edge);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);background:var(--panel)}
.mapwrap iframe{filter:invert(91%) hue-rotate(180deg) brightness(.92) contrast(.86) saturate(.8);
  display:block}
/* ── sticky book bar: phones only ──
   The nav CTA is dropped under 430px and a visitor reading a price list is a long way from
   any button. This keeps Book and Call one thumb away at all times. Body gets matching
   padding so it can never cover the last line of a page. */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;gap:10px;padding:11px 14px
  calc(11px + env(safe-area-inset-bottom));
  background:rgba(15,22,14,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(226,184,122,.28)}
.bookbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;padding:15px 10px;border-radius:100px;white-space:nowrap}
.bookbar .b1{background:linear-gradient(150deg,var(--amber-hot),#C0904F);color:#151E12;
  box-shadow:0 0 26px -10px rgba(226,184,122,.7)}
.bookbar .b2{border:1px solid rgba(226,184,122,.5);color:#FBF8F1}
@media(max-width:760px){
  .bookbar{display:flex}
  body{padding-bottom:84px}
}

/* ── inline CTA under each price group ── */
.mcta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(226,184,122,.16)}
.mcta .why{font-size:15px;color:var(--txt-dim);flex:1 1 240px;margin:0}

/* ── chat widget ── */
.chatfab{position:fixed;right:18px;bottom:18px;z-index:80;width:60px;height:60px;border-radius:50%;
  border:1px solid rgba(226,184,122,.5);cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(150deg,#22301C,#151E12);color:var(--amber);
  box-shadow:0 0 34px -8px rgba(226,184,122,.55),0 18px 40px -18px rgba(0,0,0,.9);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.chatfab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 46px -6px rgba(226,184,122,.75)}
/* "Ask a question" tag beside the bubble. Adam's own note on the 2026-08-28 call: Brian had the
   site open on his phone and had not registered what the bubble was for. Hidden once the panel is
   open, and dropped entirely on phones where it would crowd the sticky Book bar. */
.chattag{position:fixed;right:88px;bottom:33px;z-index:79;pointer-events:none;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;color:var(--cream);
  background:linear-gradient(150deg,#22301C,#151E12);border:1px solid rgba(226,184,122,.45);
  border-radius:100px;padding:9px 16px;white-space:nowrap;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.9);
  opacity:0;transform:translateX(8px);transition:opacity .45s ease .8s,transform .45s ease .8s}
body.chat-ready .chattag{opacity:1;transform:none}
body.chat-open .chattag{opacity:0;transform:translateX(8px);transition-delay:0s}
@media(max-width:760px){.chattag{display:none}}
.chatfab .x{display:none}
body.chat-open .chatfab .q{display:none}
body.chat-open .chatfab .x{display:block}
@media(max-width:760px){.chatfab{bottom:96px;width:56px;height:56px}}

.chatpanel{position:fixed;right:18px;bottom:88px;z-index:81;width:min(380px,calc(100vw - 36px));
  max-height:min(600px,calc(100dvh - 130px));display:flex;flex-direction:column;
  background:linear-gradient(168deg,#1E2A1C,#141C13);border:1px solid rgba(226,184,122,.32);
  border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1)}
body.chat-open .chatpanel{opacity:1;transform:none;pointer-events:auto}
@media(max-width:760px){.chatpanel{bottom:164px;max-height:calc(100dvh - 210px)}}
.chathead{display:flex;align-items:center;gap:11px;padding:16px 18px;
  border-bottom:1px solid rgba(226,184,122,.18);background:rgba(226,184,122,.07)}
.chathead .mk{width:30px;height:30px;flex:0 0 30px;color:var(--amber)}
.chathead b{font-family:var(--serif);font-size:19px;color:#FBF8F1;font-weight:500;display:block;line-height:1.15}
.chathead span{font-size:12px;color:var(--txt-dim);display:block;margin-top:1px}
.chatbody{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth}
.msg{max-width:86%;padding:12px 15px;border-radius:16px;font-size:15px;line-height:1.55}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);color:rgba(242,240,231,.92);
  border:1px solid rgba(226,184,122,.16);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:linear-gradient(150deg,var(--amber-hot),#C0904F);
  color:#151E12;border-bottom-right-radius:5px;font-weight:500}
.msg a{color:var(--amber);text-underline-offset:3px}
.msg.bot b{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px}
.chips button{font-family:var(--sans);font-size:13px;color:rgba(242,240,231,.86);cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(226,184,122,.26);border-radius:100px;
  padding:8px 14px;transition:background .2s,border-color .2s,color .2s}
.chips button:hover{background:rgba(226,184,122,.16);border-color:var(--amber);color:#fff}
.chatact{display:flex;gap:9px;padding:0 18px 14px}
.chatact a{flex:1;text-align:center;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:500;text-decoration:none;padding:12px 8px;border-radius:100px}
.chatact .p{background:linear-gradient(150deg,var(--amber-hot),#C0904F);color:#151E12}
.chatact .s{border:1px solid rgba(226,184,122,.45);color:#FBF8F1}
.chatform{display:flex;gap:8px;padding:13px 15px;border-top:1px solid rgba(226,184,122,.18);
  background:rgba(0,0,0,.22)}
.chatform input{flex:1;font-family:var(--sans);font-size:15px;color:#FBF8F1;
  background:rgba(255,255,255,.07);border:1px solid rgba(226,184,122,.22);border-radius:100px;
  padding:12px 16px;-webkit-appearance:none}
.chatform input::placeholder{color:rgba(242,240,231,.42)}
.chatform input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(226,184,122,.14)}
.chatform button{flex:0 0 46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(150deg,var(--amber-hot),#C0904F);color:#151E12;display:grid;place-items:center}
.chatnote{font-size:11px;color:rgba(242,240,231,.42);text-align:center;padding:0 18px 12px;line-height:1.4}

.err404{text-align:center;padding:clamp(90px,14vw,180px) 0}
.err404 .code{font-family:var(--serif);font-size:clamp(5rem,16vw,11rem);color:var(--line);line-height:.9}