/* ============================================================
   OPTIMAL WELLNESS — design system
   Teal-noir clinical luxe · "Soft & Warm" type system:
   Young Serif display (single chunky warm weight) /
   Karla body & eyebrows (humanist warmth, tracked caps for labels)
   Accents: drip aqua (hydration) · vitamin gold (nutrients)
            LED violet (head spa, sparingly) · gold (prices, marks)
   ============================================================ */

:root {
  /* ---- Lavender-noir, 2026-08-25 --------------------------------------------
     Plum-black ground, lavender-white light rooms, a light LAVENDER accent,
     deep violet beside it on light grounds, gold for prices and hairlines.
     Teal is not gone — it kept ONE job (see --teal below), the way a colour
     has to earn its place rather than just being present.

     This palette arrived in two steps: off teal onto rose, then off rose onto
     lavender once the client saw it. The token NAMES were rewritten both times
     — --aqua became --rose became --lav — because a token whose name disagrees
     with its value is how a stylesheet becomes unreadable.

     --lav and --violet are deliberately different weights of one family:
     --lav is the LIGHT one and carries the accent (buttons, brand, hovers),
     --violet is the mid one and stays the head-spa LED. 10:1 against the
     ground versus 7:1 keeps them separable rather than muddy.                */

  --ink:        #120C1E;   /* page ground — behind the clips */
  --ink-2:      #1F1636;   /* raised panels */
  --ink-3:      #0C0716;   /* footer well */
  --line:       rgba(207, 178, 230, .16);
  --text:       #F2ECF2;
  --text-dim:   rgba(242, 236, 242, .74);

  /* The accent, in its two grounds. Lavender reads on the dark rooms, deep
     violet on the light ones — the same split the Journal uses, so they match. */
  --lav:         #CFB2E6;  /* accent on dark  — 10.2:1 on --ink, hue 273° */
  --lav-deep:    #71499E;  /* lavender when it must carry small text on light — 6.2:1 */
  --violet-deep: #654093;  /* accent on light — 7.7:1 on --porcelain */

  --gold:       #E2A94E;   /* vitamin gold — prices, everywhere, unchanged */
  --gold-deep:  #A8781F;   /* gold on light ground */
  --violet:     #A395E4;   /* head-spa LED */

  /* Teal's one remaining job: it marks HYDRATION. The dose chips, the IV
     infusion cards, the drip-bar markers — the places the page is talking
     about fluid going into a vein. Everywhere else it used to be decoration,
     and that is what came out. */
  /* The client's mark is a desaturated mauve at ~310°. The accent above was
     rotated from 257° to 273° and desaturated to meet it halfway — close enough
     to read as one family, far enough to stay lavender rather than pink. */
  --logo-h:     56px;      /* nav lockup height */

  --teal:       #6ED8CC;
  --teal-deep:  #0E7C6E;

  /* Two plum rooms: medical weight loss opens the second half, Book closes the
     page. They now sit closer to the ground than they used to, so they read as
     a deepening rather than a different site. */
  --plum:       #1A1130;
  --plum-2:     #241938;
  --plum-3:     #2E2150;
  --plum-line:  rgba(163, 149, 228, .20);

  --porcelain:  #FAF8FC;   /* the light rooms — white with lavender in it */
  --porcelain-2:#F2EEFA;
  --ink-light:  #1A1020;   /* text on porcelain — 17.4:1 */
  --dim-light:  rgba(26, 16, 32, .72);

  --font-display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-caps: 'Karla', system-ui, sans-serif; /* tracked-caps label voice */
  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1180px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
  margin: 0;
}
h1 { font-size: clamp(34px, 4.4vw, 62px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); }
h1 em { font-style: normal; color: var(--gold); }

.eyebrow {
  font-family: var(--font-caps);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--lav);
  margin: 0 0 14px;
}
.lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; color: var(--text-dim); margin: 18px 0 0; }

/* dose chip — the house signature */
.chip {
  display: inline-block;
  margin-top: 22px;
  border: 1px solid rgba(110, 216, 204, .45);  /* teal kept: dose chip */
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--lav);
  background: rgba(18, 12, 30, .45);
  backdrop-filter: blur(4px);
}
.chip-violet { border-color: rgba(163, 149, 228, .5); color: var(--violet); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 15px 30px;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-drip { background: var(--lav); color: #1E1033; box-shadow: 0 8px 30px rgba(207, 178, 230, .24); }
.btn-drip:hover { background: #E1C9F2; box-shadow: 0 12px 36px rgba(207, 178, 230, .32); }
.btn-gold { background: var(--gold); color: #2A1D06; box-shadow: 0 8px 30px rgba(226, 169, 78, .2); }
.btn-gold:hover { background: #F0BE6C; }
.btn-cream { background: var(--porcelain); color: var(--ink-light); }
/* For the porcelain rooms: btn-cream is porcelain on porcelain and disappears. */
/* Gold on near-black, not white on near-black. Both uses are in the apothecary,
   a light room, where the dark button is already the loudest object — gold keeps
   the weight without the flat white and ties it to the prices it leads to.
   8.8:1, and 9.4:1 on the darker hover. */
.btn-ink { background: var(--ink-light); color: var(--gold); box-shadow: 0 8px 30px rgba(18, 12, 30, .18); }
.btn-ink:hover { background: var(--ink); color: #EDBB69; }
.btn-cream:hover { background: #fff; }
.btn-ghost { border-color: rgba(242, 236, 242, .35); color: var(--text); background: rgba(18, 12, 30, .25); backdrop-filter: blur(4px); }
.btn-ghost:hover { border-color: var(--lav); color: var(--lav); }
/* flex:none + nowrap — the nav CTA is a flex sibling of .nav-links, so a longer
   nav label squeezed it until "Book a visit" wrapped onto three lines. */
.btn-nav { padding: 11px 22px; background: var(--lav); color: #1E1033; flex: none; white-space: nowrap; }
.btn-nav:hover { background: #E1C9F2; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 28px; }

/* ---------- Global scroll progress ---------- */
.page-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 55;
  background: rgba(207, 178, 230, .13); pointer-events: none;
}
.page-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--lav), var(--gold));
  transition: width .08s linear;
}
.btn-nav-short { display: none; }

/* ---------- Skip link (keyboard users: 5+ viewports of scrub hero otherwise) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 14px 22px; background: var(--lav); color: #1E1033;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity .7s ease .15s, visibility .7s ease .15s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-drop {
  width: 74px; height: 74px; margin: 0 auto 22px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: linear-gradient(to top, var(--lav) calc(var(--p, 0) * 100%), rgba(207, 178, 230, .18) calc(var(--p, 0) * 100%));
}
.loader-word { font-family: var(--font-display); font-size: 19px; letter-spacing: .1em; margin: 0 0 18px; text-indent: .1em; }
.loader-bar { width: 176px; height: 2px; margin: 0 auto; background: rgba(207, 178, 230, .16); border-radius: 2px; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--lav); transition: width .3s ease; }
.loader-note { font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 0; }

html:not(.ready) body { overflow: hidden; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 18px var(--gutter);
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.scrolled {
  background: rgba(18, 12, 30, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 12px; padding-bottom: 12px;
}
.brand {
  /* padding/-margin pair grows the hit area to 44px without moving the row. */
  padding: 12px 0; margin: -12px 0;
  font-family: var(--font-display);
  font-size: 15.5px;
  letter-spacing: .06em;
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
  color: var(--text);
}
.brand span { color: var(--lav); margin-left: .3em; }
.brand-drop { width: 17px; height: 17px; fill: var(--lav); flex: none; filter: drop-shadow(0 0 8px rgba(207, 178, 230, .5)); }
.nav-links { display: flex; gap: 16px; margin-left: auto; white-space: nowrap; }
.nav-links a {
  font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--text-dim); white-space: nowrap;
  transition: color .25s ease;
}
.nav-links a:hover { color: var(--lav); }
.nav-toggle { display: none; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  /* Opaque: at .97 the hero copy ghosted through behind the links. */
  background: var(--ink-3);
  display: none;
  flex-direction: column; align-items: flex-start;
  /* `safe center` balances the block vertically but falls back to flex-start
     rather than clipping the top when the list is taller than the screen.
     Plain `center` is the fallback-unsafe one, so flex-start is declared first. */
  justify-content: flex-start;
  justify-content: safe center;
  gap: clamp(2px, .6vh, 8px);
  /* Real air under the wordmark — the first link used to start ~40px below the
     fixed logo and read as a line of it. Top-aligned + scrollable so short
     phones clip nothing. */
  padding: clamp(96px, 15vh, 128px) var(--gutter) 40px;
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu.open { display: flex; }
/* Direct children only — the tel: link inside .mm-foot is body copy, not a menu
   item, and was being rendered at 32px display type. */
.mobile-menu > a {
  font-family: var(--font-display); font-size: clamp(25px, 6.6vw, 32px); line-height: 1.15;
  text-decoration: none; padding: 7px 0; color: var(--text);
}
.mobile-menu > a:hover { color: var(--lav); }
/* .mobile-menu > a (0,1,1) outranks .btn-drip (0,1,0), so the menu's Book
   button inherited the menu's light text and rendered pale-on-accent. It was
   wrong before the repaint too — 1.6:1 on the old aqua — just less obvious. */
.mobile-menu > a.btn-drip { color: #1E1033; }
.mobile-menu > a.btn-gold { color: #2A1D06; }
.mobile-menu > a.btn-cream, .mobile-menu > a.btn-ink { color: var(--ink-light); }

.mobile-menu .btn { font-family: var(--font-body); font-size: 13px; margin-top: clamp(16px, 2.4vh, 24px); padding: 15px 30px; }
.mm-foot { color: var(--text-dim); font-size: 13.5px; line-height: 1.55; margin-top: clamp(18px, 3vh, 28px); }
/* 17px tall measured — under the 24px minimum for a touch target. */
.mm-foot a { display: inline-block; padding: 5px 0; color: var(--lav); text-decoration: none; box-shadow: inset 0 -1px 0 rgba(207, 178, 230, .38); }

/* ---------- Scrub stages ---------- */
.scrub { position: relative; height: 520vh; }
.scrub.dripbar { height: 460vh; }
.scrub.ritual { height: 460vh; }
.scrub.apothecary { height: 440vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .4s ease; }
.scrub.has-frame .poster { opacity: 0; }
.stage-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18, 12, 30, .62) 0%, rgba(18, 12, 30, .28) 30%, rgba(18, 12, 30, 0) 55%),
    linear-gradient(180deg, rgba(18, 12, 30, .45) 0%, rgba(18, 12, 30, 0) 22%),
    linear-gradient(0deg, rgba(18, 12, 30, .55) 0%, rgba(18, 12, 30, 0) 30%);
}
.stage-shade.shade-warm {
  background:
    linear-gradient(90deg, rgba(18, 12, 30, .58) 0%, rgba(18, 12, 30, .26) 28%, rgba(18, 12, 30, 0) 52%),
    linear-gradient(270deg, rgba(18, 12, 30, .66) 0%, rgba(18, 12, 30, .3) 26%, rgba(18, 12, 30, 0) 46%),
    linear-gradient(0deg, rgba(18, 12, 30, .55) 0%, rgba(18, 12, 30, 0) 30%);
}

.reveal-line { position: absolute; opacity: 0; will-change: opacity, transform; max-width: min(540px, 40vw); }
.reveal-line.ml { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.reveal-line.mr { right: var(--gutter); top: 50%; transform: translateY(-50%); text-align: right; }
.reveal-line.mr .cta-row { justify-content: flex-end; }
.reveal-line.center { left: 50%; top: 50%; transform: translate(-50%, -50%) !important; text-align: center; max-width: min(780px, 86vw); }
.reveal-line.center.low { top: auto; bottom: 9vh; transform: translateX(-50%) !important; }
.scrub .display { color: var(--text); text-shadow: 0 2px 26px rgba(0, 0, 0, .55); font-size: clamp(30px, 4.2vw, 54px); }
.scrub .lead { color: rgba(242, 236, 242, .95); text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.scrub .eyebrow { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

/* hero overlay placements — the bag lives on the right; copy owns the left */
.hero-title { left: var(--gutter); top: 16vh; }
.hero-title h1 { margin-top: 4px; text-shadow: 0 3px 34px rgba(0, 0, 0, .6); }
.hero-ctas { left: var(--gutter); bottom: 13vh; }
.hero-ctas .lead { max-width: 470px; }
.hero-mid { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.mid-mark {
  font-family: var(--font-display);
  font-size: 54px; line-height: 1; color: var(--gold);
  margin: 0 0 14px; text-shadow: 0 0 34px rgba(226, 169, 78, .45);
}
.mid-note { font-size: clamp(19px, 2vw, 27px); line-height: 1.5; font-weight: 420; margin: 0; max-width: 480px; text-shadow: 0 1px 16px rgba(0, 0, 0, .65); }
.hero-end { left: var(--gutter); bottom: 15vh; }
.hero-end .awards { font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 30px); margin: 10px 0 0; text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.hero-end .awards small { display: block; font-family: var(--font-body); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
.hero-end .btn { margin-top: 26px; }

.board-list { font-family: var(--font-display); font-size: clamp(17px, 1.8vw, 24px); color: var(--text); text-shadow: 0 1px 14px rgba(0, 0, 0, .65); margin: 0 0 20px; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--text-dim);
  transition: opacity .4s ease;
}
.scroll-hint span {
  display: block; width: 1px; height: 34px; margin: 0 auto 10px;
  background: linear-gradient(to bottom, transparent, var(--lav));
  animation: hintdrip 1.8s ease-in-out infinite;
}
@keyframes hintdrip { 0% { transform: scaleY(.2); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(207, 178, 230, .13); }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--lav), var(--gold)); }

/* ---------- Beltline ---------- */
.beltline { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.belt-track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  padding: 15px 0;
  animation: belt 30s linear infinite;
  font-size: 12.5px; font-weight: 650; letter-spacing: .26em; text-transform: uppercase; color: var(--lav);
  white-space: nowrap;
}
.belt-track i { font-style: normal; font-size: 7px; color: var(--gold); }
@keyframes belt { to { transform: translateX(-50%); } }

/* ---------- Story ---------- */
.story { padding: clamp(90px, 12vw, 150px) 0; background: var(--ink); }
.story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.story-text h2 { margin: 0 0 8px; }
.story-text p:not(.eyebrow) { color: var(--text-dim); margin: 18px 0 0; font-size: 16.5px; }
.facts { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.facts li { background: var(--ink-2); padding: 18px 20px; font-size: 14.5px; color: var(--text-dim); }
.facts strong { display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--lav); margin-bottom: 6px; }
.story-photo { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-photo figcaption { position: absolute; } /* replaced below */
.story-photo { position: relative; }
.story-photo figcaption {
  left: 16px; bottom: 14px; margin: 0;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--text);
  background: rgba(18, 12, 30, .55); backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: 999px;
}

/* ---------- Menu (the one light room) ---------- */
.menu { background: var(--porcelain); color: var(--ink-light); padding: clamp(90px, 12vw, 150px) 0; }
.menu .eyebrow { color: var(--violet-deep); }
.menu-head { max-width: 640px; }
.menu-head h2 { color: var(--ink-light); }
.menu-head .lead { color: var(--dim-light); }
/* ---------- Find your drip (picker) ---------- */
.picker {
  margin-top: clamp(32px, 4vw, 46px);
  border: 1px solid rgba(26, 16, 32, .12); border-radius: 18px;
  background: #F8FBFA; padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 18px 44px rgba(26, 16, 32, .07);
}
.picker-q {
  margin: 0 0 16px; font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 25px); color: var(--ink-light);
}
.picker-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pchip {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 650;
  color: var(--violet-deep); background: #fff;
  border: 1px solid rgba(101, 64, 147, .32); border-radius: 999px;
  padding: 11px 20px; min-height: 44px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pchip:hover { border-color: var(--violet-deep); transform: translateY(-1px); }
.pchip.on { background: var(--violet-deep); color: #fff; border-color: var(--violet-deep); }
.pchip:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 2px; }

.picker-cards { margin-top: 20px; }
.pcard[hidden] { display: none; }
/* The flagship IV infusion card keeps teal for the same reason the dose chip
   does — it is an IV, and teal is now the hydration mark. */
.pcard.feat { border-color: rgba(14, 124, 110, .35); background: linear-gradient(180deg, rgba(14,124,110,.06), rgba(14,124,110,.02)), #fff; }
.picker-extra { margin-top: 20px; border-top: 1px dashed rgba(26, 16, 32, .16); padding-top: 18px; }
.picker-extra-h { margin: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--violet-deep); }
.picker-lead { margin: 16px 0 0; font-size: 15px; color: var(--dim-light); }
.picker-lead[hidden] { display: none; }
.picker-lead strong { color: var(--ink-light); }
.picker-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pcard { background: #fff; border: 1px solid rgba(26, 16, 32, .1); border-radius: 14px; padding: 16px 18px; }
.pcard-kind { margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-deep); }
.pcard h3, .pcard h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--ink-light); }
.pcard-desc { margin: 6px 0 10px; font-size: 13px; line-height: 1.5; color: var(--dim-light); }
.pcard-price { margin: 0; font-family: var(--font-display); font-size: 20px; color: var(--gold-deep); }
.pcard-price .size { font-family: var(--font-body); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-light); }
.pcard-price .pp { display: inline-block; margin-right: 14px; }
.pcard-price .pp:last-child { margin-right: 0; }
.pcard-price.is-consult { font-size: 17px; color: var(--violet-deep); }
.picker-foot { margin: 18px 0 0; font-size: 14.5px; color: var(--dim-light); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.picker-foot strong { color: var(--ink-light); }

.boards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: clamp(32px, 4vw, 48px); align-items: start; }
.board {
  background: #F8FBFA;
  border: 1px solid rgba(26, 16, 32, .1);
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 18px 44px rgba(26, 16, 32, .08);
}
.board-featured { background: var(--ink-2); border-color: rgba(207, 178, 230, .22); color: var(--text); box-shadow: 0 26px 60px rgba(12, 7, 22, .42); }
.board header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.board-mark {
  font-family: var(--font-display); font-size: 16px; margin: 0;
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(101, 64, 147, .4); border-radius: 50%; color: var(--violet-deep);
}
.board-featured .board-mark { border-color: rgba(207, 178, 230, .45); color: var(--lav); }

/* Filled purple disc, gold letters. Note the disc is DEEPER than --violet-deep:
   gold on #654093 is only 3.70:1, under the floor for text this small. #412869
   is the same hue family two steps down and clears it at 5.78:1, while still
   reading as a solid purple against the light room. */
.labs-card .board-mark {
  background: #412869; border-color: #412869; color: var(--gold);
}
.board h3 { font-size: 25px; }
.board h3 .tag { display: block; font-family: var(--font-body); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-top: 5px; }
.board-featured h3 .tag { color: var(--gold); }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { padding: 11px 0; border-bottom: 1px dashed rgba(26, 16, 32, .14); }
.board-featured .menu-list li { border-bottom-color: rgba(242, 236, 242, .14); }
.menu-list li:last-child { border-bottom: none; }
.menu-list span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 650; font-size: 15.5px; }
.menu-list span b { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--gold-deep); white-space: nowrap; }
.board-featured .menu-list span b { color: var(--gold); }
.menu-list p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dim-light); }
.board-featured .menu-list p { color: rgba(242, 236, 242, .66); }
.menu-list li.feat { margin: 8px -14px 0; padding: 14px; background: rgba(101, 64, 147, .08); border: 1px solid rgba(101, 64, 147, .18); border-radius: 12px; }
.board-featured .menu-list li.feat { background: rgba(207, 178, 230, .09); border-color: rgba(207, 178, 230, .24); }
.tiers { display: grid; gap: 12px; }
.tier { border: 1px solid rgba(26, 16, 32, .12); border-radius: 12px; padding: 14px 16px; background: #fff; }
/* Filled purple bubble, white text. This rule also still carried a teal
   border — rgba(14,124,110,.35), the old --aqua-deep — that the palette
   sweep missed because its spacing differed from the rules around it. */
.tier-chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #FFFFFF; background: var(--violet-deep); border: 1px solid var(--violet-deep); padding: 5px 12px; border-radius: 999px; margin-bottom: 8px; }
.tier p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dim-light); }
.board-notes { margin-top: 16px; border-top: 1px solid rgba(26, 16, 32, .12); padding-top: 14px; }
.board-notes h4 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.board-notes h4 span { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-deep); margin-left: 8px; }
.board-notes p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--dim-light); }
.board-notes b { font-family: var(--font-display); font-weight: 400; color: var(--gold-deep); }
.board-fine { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: rgba(26, 16, 32, .55); }
.board-fine a { color: var(--violet-deep); }

/* ---------- Ritual detail band (violet chapter) ---------- */
.btn-violet { background: var(--violet); color: #171233; box-shadow: 0 8px 30px rgba(163, 149, 228, .22); }
.btn-violet:hover { background: #B7ABF0; }
.ritualband { background: var(--ink-2); border-top: 1px solid rgba(163, 149, 228, .16); border-bottom: 1px solid var(--line); padding: clamp(70px, 9vw, 120px) 0; }
.ritual-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ritualband .eyebrow { color: var(--violet); }
.ritual-text p:not(.eyebrow) { color: var(--text-dim); margin: 18px 0 0; font-size: 16px; }
.ritual-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ritual-ticks li {
  background: rgba(163, 149, 228, .06); border: 1px solid rgba(163, 149, 228, .18);
  border-radius: 14px; padding: 18px 18px 16px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5;
}
.ritual-ticks strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text); margin-bottom: 5px; }

/* ---------- Weight loss (the one plum room) ----------------------------
   Violet used to do every job in here — ground, eyebrow, tags, ribbon,
   bullets, headings — which is why the room read as one flat note. The jobs
   are now split three ways, and every colour choice below answers to it:

     VIOLET is the ROOM.   Ground, aurora, borders. It sets the light and then
                           gets out of the way. (Its documented job: violet is
                           head-spa *light* on teal, and *ground* on plum.)
     GOLD   is the VALUE.  Prices, the flagship frame, what-you-get marks,
                           the stage labels. Anything answering "what do I get
                           for the money" is gold.
     WHITE  is the VOICE.  Headings and the statement — the things the clinic
                           is actually saying. Porcelain, not dimmed text.
   ------------------------------------------------------------------- */
.fine { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.menu .fine, .shop .fine, .faq .fine { color: var(--dim-light); }
/* Ground shifts teal -> plum over the first quarter of the section so the change
   reads as the light changing, not as a pasted-in block; ::after fades back to
   ink before the apothecary scrub takes over. */
.weightloss {
  position: relative;
  padding: clamp(90px, 12vw, 150px) 0 clamp(96px, 12vw, 156px);
  border-top: 1px solid rgba(163, 149, 228, .18);
  background:
    radial-gradient(88% 52% at 50% 0%, rgba(163, 149, 228, .17), rgba(163, 149, 228, 0) 64%),
    linear-gradient(180deg, #0E1425 0%, var(--plum) 24%, var(--plum) 100%);
}
.weightloss::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(180deg, rgba(18, 12, 30, 0), var(--ink));
  pointer-events: none;
}
.weightloss > .wrap { position: relative; z-index: 1; }
.weightloss .eyebrow { color: var(--gold); }
.wl-head { max-width: 660px; }
.wl-head h2 { color: var(--porcelain); }
.wl-head h2 em { font-style: normal; color: var(--gold); }
.wl-head .lead { color: rgba(242, 236, 242, .82); }
.wl-banner {
  position: relative;
  margin: clamp(30px, 4vw, 48px) 0 0;
  border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 1;
  border: 1px solid var(--plum-line); box-shadow: 0 30px 70px rgba(11, 6, 26, .55);
}
.wl-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } /* 42% keeps the vial cap and the needle-tip droplet inside the 3:1 desktop crop */
/* Ties the warm still-life into the plum room without muddying the gold. */
.wl-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(22, 16, 42, .34) 0%, rgba(22, 16, 42, 0) 42%),
    linear-gradient(0deg, rgba(22, 16, 42, .62) 0%, rgba(22, 16, 42, 0) 58%),
    linear-gradient(90deg, rgba(120, 96, 208, .20), rgba(120, 96, 208, 0) 55%);
  mix-blend-mode: normal;
}
.wl-banner figcaption {
  position: absolute; left: 16px; bottom: 14px; margin: 0; z-index: 1;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text);
  background: rgba(22, 16, 42, .6); border: 1px solid rgba(163, 149, 228, .22);
  backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: 999px;
}
.wl-steps {
  list-style: none; counter-reset: none; margin: clamp(28px, 3.4vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--plum-line); border: 1px solid var(--plum-line);
  border-radius: 16px; overflow: hidden;
}
.wl-steps li { background: var(--plum-2); padding: clamp(22px, 2.6vw, 34px); }
.step-when {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-caps); font-weight: 800; font-size: 11px;
  color: var(--gold); letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid rgba(226, 169, 78, .45); padding-bottom: 5px;
}
.wl-steps h3 { font-size: 21px; margin: 0 0 8px; color: var(--porcelain); }
.wl-steps p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }

/* Panel strip — deliberately not a box, so the section stops reading as
   six stacked cards. Names the real panels already listed under Shop. */
.wl-panels {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 18px 0 0; padding: 16px 2px 0;
  border-top: 1px solid rgba(163, 149, 228, .14);
}
.wl-panels > strong {
  font-family: var(--font-caps); font-size: 10.5px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.wl-panels ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.wl-panels li {
  font-size: 12.5px; letter-spacing: .02em; color: var(--text-dim);
  border: 1px solid rgba(163, 149, 228, .26); border-radius: 999px;
  padding: 6px 13px; background: rgba(163, 149, 228, .07);
}
.wl-panels .wl-panels-link {
  /* Standalone CTA, so it gets the 44px this site uses everywhere else — the
     footer, the nav and every button. It was built to the 24px AA floor while
     the rest of the build moved to 44px, which is how it ended up the smallest
     target on a phone. */
  display: inline-block; padding: 13px 0 12px; min-height: 44px; box-sizing: border-box;
  font-size: 12.5px; color: var(--violet); text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(163, 149, 228, .4);
}
.wl-panels .wl-panels-link:hover { color: #C6BCF4; border-bottom-color: #C6BCF4; }

/* The GLP-1 trio is a LIGHT shelf inside the plum room (Justin, 2026-08-27):
   the cards were --plum-2, the exact background of the .wl-steps band above
   them, so the two read as one undifferentiated block. Cards go light purple
   and the shelf behind them lighter still, which turns the programme line-up
   into the section's payoff instead of more of the same panel. Everything
   inside the cards flips with the ground — see the gold note on .glp-price. */
.glp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: clamp(30px, 3.6vw, 44px); align-items: stretch;
  background: #F7F4FD; border-radius: 24px;
  padding: clamp(22px, 2.6vw, 32px);
}
.glp-card {
  position: relative;
  background: #E4D9F7; border: 1px solid rgba(101, 64, 147, .22); border-radius: 18px;
  padding: clamp(24px, 2.8vw, 34px); display: flex; flex-direction: column;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.glp-card:hover { transform: translateY(-4px); border-color: var(--violet-deep); }
/* The flagship programme is the value claim of the section, so it is framed
   in gold rather than violet — it should read as the expensive one. */
.glp-featured {
  border-color: rgba(168, 120, 31, .55);
  background: linear-gradient(180deg, rgba(226, 169, 78, .22), rgba(226, 169, 78, .06) 62%), #E4D9F7;
  box-shadow: 0 20px 44px rgba(60, 38, 122, .16);
}
.glp-featured:hover { border-color: rgba(140, 98, 16, .85); box-shadow: 0 24px 52px rgba(90, 62, 20, .22); }
.glp-ribbon {
  position: absolute; top: 0; right: clamp(20px, 2.4vw, 30px); transform: translateY(-50%);
  font-family: var(--font-caps); font-size: 10px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--gold); color: #2A1D06;
  padding: 6px 13px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(226, 169, 78, .32);
}
.glp-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--violet-deep); margin: 0 0 12px; }
.glp-card h3 { font-size: 27px; color: var(--ink-light); }
.glp-best { color: var(--dim-light); font-size: 14px; line-height: 1.55; margin: 10px 0 0; }
.glp-card ul { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed rgba(101, 64, 147, .30); flex: 1; }
.glp-card ul li { position: relative; padding: 4px 0 4px 20px; font-size: 13.5px; color: rgba(26, 16, 32, .78); }
/* Droplet marks: --gold vanishes on the light card (1.6:1), so they take the
   deeper gold too. Decorative, but invisible decoration is just noise. */
.glp-card ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; background: #996B15;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Price stays gold everywhere — but --gold is 1.6:1 on this light purple and
   --gold-deep only 2.9:1, under the 3:1 a price this size needs. #996B15 is the
   same hue carried far enough down to clear it at 3.5:1. */
.glp-price { font-family: var(--font-display); font-size: 34px; color: #996B15; margin: 18px 0 0; }
.glp-price span { font-family: var(--font-body); font-size: 13px; color: var(--dim-light); margin-left: 4px; }

/* Statement band — breaks the card rhythm and answers the real objection
   (what happens when the shot stops) before the "included" list makes its case. */
.wl-statement {
  margin: clamp(34px, 4.4vw, 56px) 0 0;
  padding: clamp(26px, 3.2vw, 40px) clamp(24px, 3.4vw, 48px);
  border-radius: 20px;
  border: 1px solid rgba(226, 169, 78, .28);
  background:
    radial-gradient(80% 130% at 12% 0%, rgba(226, 169, 78, .10), rgba(226, 169, 78, 0) 70%),
    var(--plum-2);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.6vw, 30px); align-items: start;
}
.wl-statement svg { width: 38px; height: 38px; margin-top: 2px; fill: var(--gold); flex: none; opacity: .95; }
.wl-statement p {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 29px); line-height: 1.32; color: var(--porcelain);
  text-wrap: balance; /* keeps the two sentences on two even lines instead of orphaning "off." */
}
.wl-statement p b { font-weight: 400; color: var(--gold); }
.wl-statement .fine { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; margin-top: 10px; }

.wl-foot { display: grid; grid-template-columns: 1fr 1.15fr auto; gap: clamp(24px, 3.4vw, 44px); align-items: start; margin-top: clamp(30px, 3.6vw, 44px); }
.wl-foot h3 { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
/* Boxed, so the footer is not two identical bare lists side by side. */
/* The one porcelain object in the plum room. What is included is the concrete
   half of the offer, so it reads as a printed plan laid on the dark table
   rather than one more translucent panel. It is also what keeps the section
   from being an unbroken field of plum. */
.wl-included {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--porcelain) 100%);
  border: 1px solid rgba(226, 169, 78, .45);
  border-radius: 18px; padding: clamp(24px, 2.8vw, 32px);
  box-shadow: 0 26px 60px rgba(10, 6, 20, .45);
}
.wl-foot .wl-included h3 { color: var(--gold-deep); }
.wl-included ul { list-style: none; margin: 0; padding: 0; }
.wl-included li { position: relative; padding: 5px 0 5px 22px; font-size: 14.5px; color: var(--ink-light); }
.wl-included li::before { content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 9px; background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wl-more { padding-top: clamp(2px, 1vw, 8px); }
.wl-more p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-dim); }
.wl-more-list { list-style: none; margin: 0; padding: 0; }
.wl-more-list li { position: relative; padding: 5px 0 5px 20px; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.wl-more-list li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wl-cta { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding-top: clamp(2px, 1vw, 8px); }

/* ---------- Shop (light) ---------- */
.shop { background: var(--porcelain); color: var(--ink-light); padding: clamp(90px, 12vw, 150px) 0; }
.shop .eyebrow { color: var(--violet-deep); }
.shop-head { max-width: 620px; }
.shop-head h2 { color: var(--ink-light); }
.shop-head .lead { color: var(--dim-light); }
.shop-shelf {
  position: relative; margin: 22px 0 0; /* closes the section, below the cards */
  border-radius: 20px; overflow: hidden;
  aspect-ratio: 21 / 9; /* gentler crop — the flat-lay's content spans top to bottom */
  border: 1px solid rgba(26, 16, 32, .14);
  box-shadow: 0 30px 70px rgba(18, 12, 30, .18);
}
.shop-shelf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.shop-shelf figcaption {
  position: absolute; left: 16px; bottom: 14px; margin: 0;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text);
  background: rgba(18, 12, 30, .55); backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: 999px;
}
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(36px, 4.6vw, 56px); }
.product {
  background: #F8FBFA; border: 1px solid rgba(26, 16, 32, .1); border-radius: 16px;
  padding: 22px 22px 18px; box-shadow: 0 12px 30px rgba(26, 16, 32, .06);
  display: flex; flex-direction: column;
  transition: transform .3s ease, border-color .3s ease;
}
.product:hover { transform: translateY(-4px); border-color: rgba(101, 64, 147, .35); }
.product h3 { font-size: 19px; line-height: 1.2; }
.product h3 small { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim-light); margin-top: 3px; }
.product p { margin: 8px 0 12px; font-size: 13px; line-height: 1.5; color: var(--dim-light); flex: 1; }
.product b { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--gold-deep); }
.product-gift { background: var(--ink-2); border-color: rgba(207, 178, 230, .26); color: var(--text); }
.product-gift p { color: rgba(242, 236, 242, .68); }
.product-gift b { color: var(--lav); font-size: 15px; letter-spacing: .1em; }
.shop-duo { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; margin-top: 22px; align-items: stretch; }
.labs-card { background: #F8FBFA; border: 1px solid rgba(26, 16, 32, .1); border-radius: 18px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 18px 44px rgba(26, 16, 32, .08); }
.labs-card header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.labs-card h3 { font-size: 24px; }
.labs-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--dim-light); }
.lab-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lab-chips li {
  font-size: 12px; font-weight: 650; letter-spacing: .04em; color: var(--violet-deep);
  border: 1px solid rgba(101, 64, 147, .3); border-radius: 999px; padding: 6px 13px; background: #fff;
}
.biobox { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-top: 18px; border-top: 1px solid rgba(26, 16, 32, .12); padding-top: 18px; }
.biobox h4 { font-family: var(--font-display); font-weight: 400; font-size: 19px; margin: 0 0 4px; }
.chip-mini { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-deep); border: 1px solid rgba(101, 64, 147, .35); border-radius: 999px; padding: 3px 9px; margin-left: 8px; vertical-align: 2px; }
/* Matches the Lab disc above it — same filled purple, same gold letters, so the
   two badges in this card read as one pair rather than two conventions. */
.labs-card .chip-mini { background: #412869; border-color: #412869; color: var(--gold); }
.biobox p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--dim-light); max-width: 480px; }
.biobox b { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--gold-deep); }
.peptide-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 3vw, 36px); color: var(--text); box-shadow: 0 26px 60px rgba(18, 12, 30, .3); display: flex; flex-direction: column; align-items: flex-start; }
.peptide-card .eyebrow { color: var(--lav); }
.peptide-card h3 { font-size: clamp(24px, 2.3vw, 30px); }
.peptide-card > p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 12px 0 0; }
.ticks { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; flex: 1; }
.ticks li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--text-dim); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; background: var(--lav);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.4 4.6 7 8.6 7 12.6a7 7 0 1 1-14 0c0-4 3.6-8 7-12.6z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Gallery (real photographs of both shops) ---------- */
/* Deepest ground on the site — the interiors are bright and white, and they
   punch hardest against ink-3. Sits between the porcelain Shop band and Visit. */
.gallery {
  background: var(--ink-3);
  border-top: 1px solid var(--line);
  padding: clamp(84px, 10vw, 130px) 0 clamp(84px, 10vw, 130px);
}
.gal-head { max-width: 640px; margin-bottom: clamp(30px, 4vw, 48px); }
.gallery .eyebrow { color: var(--lav); }

.gal-grid { display: grid; gap: clamp(10px, 1.1vw, 15px); }

.gal-item {
  position: relative; display: block; overflow: hidden;
  margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--ink-2); cursor: zoom-in; -webkit-appearance: none; appearance: none;
  transition: border-color .3s ease, transform .4s ease, box-shadow .4s ease;
}
.gal-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .4s ease;
}
.gal-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 7, 22, .78) 0%, rgba(12, 7, 22, .12) 34%, rgba(12, 7, 22, 0) 58%);
  transition: opacity .4s ease;
}
.gal-cap {
  position: absolute; left: 13px; right: 13px; bottom: 11px; z-index: 1;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242, 236, 242, .82); text-align: left;
  transition: color .3s ease, transform .4s ease;
}
.gal-item:hover, .gal-item:focus-visible { border-color: rgba(207, 178, 230, .42); box-shadow: 0 22px 50px rgba(10, 5, 18, .58); }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.055); }
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { color: var(--lav); transform: translateY(-2px); }
.gal-item:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }

/* The "see more" frames sit in the DOM so the lightbox can walk into them, but
   never take grid space — the section is the same height whether or not anyone
   opens it. .gal-item sets display:block, which outranks the UA sheet's
   [hidden] rule, so this partner rule is required, not tidiness. */
.gal-item[hidden] { display: none; }

.gal-more-row { display: flex; justify-content: center; margin-top: clamp(18px, 2.4vw, 30px); }
.gal-more {
  font: inherit; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--porcelain); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 14px 26px; min-height: 44px; cursor: pointer;
  transition: color .25s, border-color .25s;
}
.gal-more:hover, .gal-more:focus-visible { color: var(--lav); border-color: rgba(207, 178, 230, .42); }
.gal-more:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }

/* Checkout confirmation: where to look when the invoice is not in the inbox.
   Paired [hidden] rule because shop.js hides this when the send failed, and an
   author display rule outranks the UA sheet's [hidden] -- the trap that has now
   appeared six times on this build. */
.sp-done-spam { display: block; margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--dim-light); }
.sp-done-spam[hidden] { display: none; }
.sp-done-spam b { color: var(--ink-light); }
.sp-done-spam a { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Phones: one clean column at the photos' native 3:2 — no crop, no mosaic. */
.gal-grid { grid-template-columns: 1fr; }
.gal-item { aspect-ratio: 3 / 2; }

@media (min-width: 641px) {
  /* Tablet: two columns, spans only — auto-flow packs it with no holes. */
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(58px, 7vw, 86px); grid-auto-flow: dense; }
  .gal-item { aspect-ratio: auto; }
  .gal-item.feature { grid-column: span 2; grid-row: span 4; }
  .gal-item.wide    { grid-column: span 2; grid-row: span 2; }
  .gal-item.normal  { grid-column: span 1; grid-row: span 2; }
}
@media (min-width: 1021px) {
  /* Desktop mosaic, placed explicitly in three bands so the feature tile
     alternates left / right / left instead of marching down one edge.
     Areas sum exactly to 4 cols x 12 rows — no dense-flow holes. */
  .gal-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(62px, 5.6vw, 82px); }
  .gal-item:nth-child(1)  { grid-column: 1 / span 2; grid-row: 1 / span 4; }
  .gal-item:nth-child(2)  { grid-column: 3;          grid-row: 1 / span 2; }
  .gal-item:nth-child(3)  { grid-column: 4;          grid-row: 1 / span 2; }
  .gal-item:nth-child(4)  { grid-column: 3 / span 2; grid-row: 3 / span 2; }
  .gal-item:nth-child(5)  { grid-column: 3 / span 2; grid-row: 5 / span 4; }
  .gal-item:nth-child(6)  { grid-column: 1;          grid-row: 5 / span 2; }
  .gal-item:nth-child(7)  { grid-column: 2;          grid-row: 5 / span 2; }
  .gal-item:nth-child(8)  { grid-column: 1 / span 2; grid-row: 7 / span 2; }
  .gal-item:nth-child(9)  { grid-column: 1 / span 2; grid-row: 9 / span 4; }
  .gal-item:nth-child(10) { grid-column: 3;          grid-row: 9 / span 2; }
  .gal-item:nth-child(11) { grid-column: 4;          grid-row: 9 / span 2; }
  .gal-item:nth-child(12) { grid-column: 3 / span 2; grid-row: 11 / span 2; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(2, 8, 10, .95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(6px, 2vw, 24px); padding: clamp(56px, 7vh, 84px) clamp(10px, 2.5vw, 34px);
}
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.lb-stage img {
  max-width: 100%; max-height: calc(100vh - 190px); width: auto; height: auto;
  border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
}
.lb-stage figcaption {
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lav); text-align: center;
}
.lb-nav, .lb-close {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  width: 48px; height: 48px; flex: none; border-radius: 999px;
  border: 1px solid rgba(242, 236, 242, .28); background: rgba(18, 12, 30, .6);
  position: relative; transition: border-color .25s ease, background .25s ease;
}
.lb-nav:hover, .lb-close:hover { border-color: var(--lav); background: rgba(18, 12, 30, .9); }
.lb-nav:focus-visible, .lb-close:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }
/* Chevrons and the X are drawn from two rotated bars — no icon font, no SVG. */
.lb-nav::before, .lb-nav::after,
.lb-close::before, .lb-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--text); border-radius: 2px;
}
.lb-nav::before, .lb-nav::after { width: 2px; height: 13px; }
.lb-prev::before { transform: translate(-50%, -50%) translateY(-5px) rotate(40deg); }
.lb-prev::after  { transform: translate(-50%, -50%) translateY(5px)  rotate(-40deg); }
.lb-next::before { transform: translate(-50%, -50%) translateY(-5px) rotate(-40deg); }
.lb-next::after  { transform: translate(-50%, -50%) translateY(5px)  rotate(40deg); }
.lb-close { position: absolute; top: clamp(12px, 2.4vh, 22px); right: clamp(12px, 2.5vw, 26px); }
.lb-close::before, .lb-close::after { width: 17px; height: 2px; }
.lb-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lb-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 640px) {
  /* Arrows move below the photo — 48px targets either side of a phone-width
     image would otherwise eat most of the frame. */
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 62px 14px 20px; }
  .lb-stage { grid-column: 1 / -1; grid-row: 1; }
  .lb-stage img { max-height: calc(100vh - 210px); }
  .lb-prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .lb-next { grid-column: 2; grid-row: 2; justify-self: end; }
  .lb-nav { margin-top: 4px; }
}

/* Closing hand-off from the home page's six-product teaser to the full shop. */
.shop-foot {
  margin: clamp(30px, 3.6vw, 44px) auto 0; max-width: 620px; text-align: center;
}
.shop-foot p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--dim-light); }

/* ---------- Visit ---------- */
.visit { background: var(--ink); padding: clamp(76px, 9vw, 116px) 0; }
.visit-head { max-width: 620px; margin-bottom: clamp(36px, 4.6vw, 60px); }
.visit-head .lead { color: var(--text-dim); }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.loc-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px; padding: clamp(28px, 3.4vw, 44px); }
.loc-tag { display: inline-block; margin: 0 0 18px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.loc-tag.walkin { color: #1E1033; background: var(--lav); }
.loc-tag.appt { color: #2A1D06; background: var(--gold); }
.loc-card h3 { font-size: clamp(28px, 2.8vw, 38px); }
.loc-addr { font-size: 16.5px; line-height: 1.55; margin: 14px 0 0; }
.loc-note { color: var(--text-dim); font-size: 14.5px; margin: 12px 0 0; }
.hours { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px dashed rgba(242, 236, 242, .16); }
.hours li { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; font-size: 14px; color: var(--text-dim); }
.hours strong { font-weight: 650; color: var(--text); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; }
.hours a { color: var(--lav); text-decoration: none; }
.visit-fine { margin: 34px 0 0; font-size: 13.5px; color: var(--text-dim); }
.visit-fine a { color: var(--lav); }

/* Inline links in running text: vertical padding grows the touch box without
   affecting the line box, so the hit area clears 24px with zero layout shift. */
.hours a, .visit-fine a { padding: 5px 0; }

/* ---------- FAQ (light band — breaks up the Locations→Book dark run) ---------- */
.faq { background: var(--porcelain); color: var(--ink-light); padding: clamp(72px, 8.5vw, 110px) 0; }
.faq .eyebrow { color: var(--violet-deep); }
.faq h2 { color: var(--ink-light); }
.faq-head { max-width: 620px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.faq-list { display: grid; gap: 1px; background: rgba(26, 16, 32, .1); border: 1px solid rgba(26, 16, 32, .1); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px rgba(26, 16, 32, .07); }
.faq-item { background: #F8FBFA; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px clamp(20px, 2.6vw, 32px);
  display: flex; align-items: center; gap: 16px;
  transition: background .25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(101, 64, 147, .05); }
.faq-item summary h3 { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; margin: 0; flex: 1; color: var(--ink-light); }
.faq-item summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-left: auto;
  border-right: 2px solid var(--violet-deep); border-bottom: 2px solid var(--violet-deep);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.faq-item p { margin: 0; padding: 0 clamp(20px, 2.6vw, 32px) 24px; font-size: 15.5px; line-height: 1.7; color: var(--dim-light); max-width: 74ch; }
.faq-item summary:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: -2px; }

/* ---------- Book (the second plum room) ---------- */
/* Same aurora + fade recipe as .weightloss so the two plum rooms rhyme —
   one opens the second half of the page, this one closes it. */
.book {
  position: relative;
  padding: clamp(76px, 9vw, 116px) 0 clamp(88px, 10vw, 130px);
  border-top: 1px solid rgba(163, 149, 228, .2);
  background:
    radial-gradient(88% 52% at 50% 0%, rgba(163, 149, 228, .16), rgba(163, 149, 228, 0) 64%),
    var(--plum);
}
/* Lands the plum on the footer's ink well instead of butting against it. */
.book::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, rgba(12, 7, 22, 0), var(--ink-3));
  pointer-events: none;
}
.book > .wrap { position: relative; z-index: 1; }
.book .eyebrow { color: var(--violet); }
.book-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
.book-text .lead { color: var(--text-dim); }
.book-facts { list-style: none; margin: 30px 0 0; padding: 0; }
.book-facts li { display: flex; align-items: center; gap: 16px; border-bottom: 1px dashed rgba(163, 149, 228, .22); font-size: 15px; }
/* CALL OR TEXT / EMAIL / DM sits beside the booking form and is the "just phone
   them instead" escape hatch — on a phone it is the highest-intent target on
   the page. It was 24px with no padding. The padding moves from the li to the
   link so the whole 44px is tappable rather than just the text inside it. */
.book-facts li a { display: inline-block; padding: 12px 0; min-height: 44px; box-sizing: border-box; }
.book-facts li:last-child { border-bottom: none; }
.book-facts strong { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--violet); min-width: 96px; }
.book-facts a { color: var(--text); text-decoration: none; }
.book-facts a:hover { color: var(--violet); }
.book-form {
  background: var(--plum-2); border: 1px solid var(--plum-line); border-radius: 20px;
  padding: clamp(24px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 26px 60px rgba(11, 6, 26, .45);
}
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ff { display: flex; flex-direction: column; gap: 7px; }
.ff > span { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.ff input, .ff select, .ff textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: rgba(242, 236, 242, .05); border: 1px solid rgba(163, 149, 228, .22);
  border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color .25s ease, background .25s ease;
  appearance: none; -webkit-appearance: none;
}
.ff select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A395E4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 34px;
}
.ff textarea { resize: vertical; min-height: 74px; }
.ff input::placeholder, .ff textarea::placeholder { color: rgba(242, 236, 242, .45); } /* .35 measured 2.93:1 on the plum field — under the 3:1 floor */
.ff input:focus, .ff select:focus, .ff textarea:focus { outline: revert; border-color: var(--violet); background: rgba(163, 149, 228, .09); }
.book-form .btn { align-self: flex-start; margin-top: 4px; }
.form-note { margin: 0; font-size: 11.5px; letter-spacing: .06em; color: rgba(242, 236, 242, .38); }
.form-done { background: rgba(163, 149, 228, .12); border: 1px solid rgba(163, 149, 228, .4); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; color: var(--text); }
.form-done strong { color: var(--violet); }
form.sent .form-note { display: none; }
form.sent button[type="submit"] { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-3); border-top: 1px solid var(--line); }
.beltline-foot { background: transparent; border-bottom: 1px solid var(--line); border-top: none; }
.beltline-foot .belt-track { font-size: 11px; padding: 12px 0; color: rgba(207, 178, 230, .72); }
/* Five columns for five blocks. It was four, so Contact orphaned onto its own
   row with a wide empty gap beside it and the footer read as unfinished. */
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); padding-top: 56px; padding-bottom: 44px; }
.foot-word { font-family: var(--font-display); font-size: 17px; letter-spacing: .06em; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.foot-word span { color: var(--lav); margin-left: .3em; }
.foot-brand p:not(.foot-word) { color: var(--text-dim); font-size: 14px; line-height: 1.7; margin: 0; max-width: 300px; }
.btn-sm { padding: 11px 20px; font-size: 12px; min-height: 44px; } /* accessible tap target */
.foot-list { margin-top: 30px; max-width: 340px; }
.foot-list .ff { gap: 0; }
/* :not() keeps this off .ff-inline — it's a sibling span, and display:block here
   would drop the Join button onto its own line. */
.foot-list .ff > span:not(.ff-inline) {
  display: block; margin-bottom: 12px; line-height: 1.6; max-width: 260px;
}
.foot-list .ff-inline { display: flex; gap: 10px; align-items: center; }
.foot-list input {
  font-family: var(--font-body); font-size: 14px; color: var(--text); flex: 1 1 auto; min-width: 0; width: auto;
  background: rgba(242, 236, 242, .05); border: 1px solid rgba(242, 236, 242, .16);
  border-radius: 999px; padding: 11px 18px; min-height: 44px; /* matches the Join button */
}
.foot-list input::placeholder { color: rgba(242, 236, 242, .35); }
.foot-list input:focus { outline: revert; border-color: var(--lav); }
.foot-list .btn-sm { flex: none; }
.foot-list .form-done { margin-top: 12px; padding: 10px 14px; font-size: 13px; }
.foot-col h3 { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--lav); margin: 4px 0 16px; }
/* 11px vertical padding, not 8px: at 14.5px/1.5 the link box measured 39px on a
   390px phone, under the 44px minimum tap target. */
.foot-col a { display: block; text-decoration: none; color: var(--text-dim); font-size: 14.5px; padding: 11px 0; transition: color .2s ease; }
.foot-col a:hover { color: var(--lav); }
/* Social links live under the mailing list in the brand column, not in a fifth
   grid column: .foot-grid is 1.4fr 1fr 1fr 1fr and a fifth would crowd desktop
   while buying nothing on mobile, where it stacks to one column anyway. */
.foot-social { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.foot-social a {
  display: inline-block; padding: 11px 0; font-size: 14.5px;
  color: var(--text-dim); text-decoration: none; transition: color .2s ease;
}
.foot-social a:hover { color: var(--lav); }
.foot-legal {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 22px; padding-bottom: 30px;
  font-size: 12px; color: rgba(242, 236, 242, .45);
}

/* ---------- Reveals ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- QA static preview (?static=…) ---------- */
.static-preview .scrub, .static-preview .scrub.dripbar, .static-preview .scrub.ritual, .static-preview .scrub.apothecary { height: 100vh; }
.static-preview .stage { position: relative; height: 100vh; }
.static-preview .scroll-hint { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .boards { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .shop-duo { grid-template-columns: 1fr; }
  /* Extra gap so the "Most chosen" ribbon has clean gutter to sit in once the
     cards stack. */
  .glp-grid { grid-template-columns: 1fr; max-width: 520px; gap: 30px; }
  .wl-steps { grid-template-columns: 1fr; }
  .wl-foot { grid-template-columns: 1fr; gap: 28px; }
  .wl-cta { align-items: stretch; }
  .wl-cta .btn { justify-content: center; }
}
@media (max-width: 1139px) {
  .nav-links { display: none; }
  /* CTA stays on phones — booking was previously buried in the hamburger */
  .btn-nav { margin-left: auto; padding: 10px 18px; font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; flex: none; }
  .brand { min-width: 0; }
  .btn-nav-long { display: none; }
  .btn-nav-short { display: inline; }
  .nav { gap: 12px; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: none; cursor: pointer;
    width: 44px; height: 44px; position: relative; z-index: 51; /* 44px = min accessible tap target */
    /* flex: none — the brand does not shrink, so without this the toggle was the
       only flexible child and collapsed to ~12px on a 375px phone. */
    flex: none;
  }
  .nav-toggle span { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--text); transition: transform .3s ease, top .3s ease, opacity .3s ease; }
  .nav-toggle span:nth-child(1) { top: 15px; }
  .nav-toggle span:nth-child(2) { top: 24px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

  .scrub { height: 430vh; }
  /* dripbar is shorter than its siblings on phones: its portrait pan holds on
     the nurse from frame 125 of 150, so the last sixth of the old 390vh had no
     camera move left in it and read as dead scroll (Justin, 2026-08-27). Less
     scroll per frame also makes the pan itself feel deliberate rather than slow. */
  .scrub.dripbar { height: 320vh; }
  .scrub.ritual { height: 390vh; }
  .scrub.apothecary { height: 370vh; }

  .reveal-line { max-width: none; left: var(--gutter); right: var(--gutter); }
  .reveal-line.ml, .reveal-line.mr { top: auto; bottom: 9vh; transform: none; text-align: left; }
  .reveal-line.mr .cta-row { justify-content: flex-start; }
  .reveal-line.center, .reveal-line.center.low { left: var(--gutter); right: var(--gutter); transform: none !important; top: auto; bottom: 9vh; text-align: left; max-width: none; }
  /* Hero copy lives in the darkened lower third on phones — the bag owns the top */
  .hero-title { top: auto; bottom: 33vh; }
  .hero-title h1 {
    font-size: clamp(29px, 8.4vw, 38px);
    text-shadow: 0 2px 16px rgba(8, 4, 14, .9), 0 0 46px rgba(8, 4, 14, .65);
  }
  .hero-title .eyebrow { text-shadow: 0 1px 10px rgba(8, 4, 14, .9); }
  .hero-ctas { bottom: 9vh; }
  .hero-mid { top: auto; bottom: 12vh; transform: none; }
  .hero-end { bottom: 11vh; }
  .stage-shade, .stage-shade.shade-warm {
    background:
      linear-gradient(180deg, rgba(18, 12, 30, .55) 0%, rgba(18, 12, 30, 0) 24%),
      linear-gradient(0deg, rgba(18, 12, 30, .92) 0%, rgba(18, 12, 30, .66) 34%, rgba(18, 12, 30, .28) 54%, rgba(18, 12, 30, 0) 70%);
  }
  /* The heavy bottom scrim exists for hero 1's lower-third title over the bright
     bag. The head-spa scene is candlelit and its client reclines exactly in that
     zone — the scrim read as a shadow over her (Justin, 2026-08-27). The scene is
     dim enough to carry its own text; keep only a whisper at the very bottom for
     the CTA row. */
  .ritual .stage-shade {
    background: linear-gradient(0deg, rgba(18, 12, 30, .30) 0%, rgba(18, 12, 30, 0) 18%);
  }

  .story-grid, .loc-grid, .ritual-grid, .book-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .mid-note { font-size: 18px; }
}
@media (max-width: 560px) {
  /* Brand + BOOK + hamburger have to share ~335px on a 375px phone. */
  .nav { gap: 10px; }
  .brand { font-size: 13.5px; letter-spacing: .03em; gap: 7px; }
  .brand-drop { width: 15px; height: 15px; }
  .btn-nav { padding: 10px 15px; font-size: 11.5px; }
  .wl-statement { grid-template-columns: 1fr; gap: 14px; }
  .wl-panels { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Tracked caps wrapped to two lines and swallowed the bottom of the still-life. */
  .wl-banner figcaption { left: 12px; bottom: 11px; font-size: 10px; letter-spacing: .13em; padding: 7px 12px; }
  .facts, .ticks, .ritual-ticks, .ff-row { grid-template-columns: 1fr; }
  .shop-shelf, .wl-banner { aspect-ratio: 16 / 10; }
  .foot-grid { grid-template-columns: 1fr; }
  /* Clamped, not hidden — this is the page's clearest "what we do" sentence, and
     display:none would drop it from mobile-first indexing entirely. */
  .hero-ctas .lead {
    font-size: 14px; line-height: 1.4; margin-top: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .scrub .lead { font-size: 15px; }
  .menu-list li.feat { margin: 8px 0 0; }
  .biobox { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ---- Hero 1 only: unstack the copy so the bag's bloom stays visible ----
     The title block ended at the exact pixel the CTA block began, so six
     elements read as one wall covering 45% of the phone. Three fixes: the
     eyebrow fits one line instead of orphaning "Tampa"; the secondary CTA
     drops its pill so it sits beside the primary instead of under it; and
     the reclaimed height opens a real gap between the two groups. */
  .hero-title .eyebrow { font-size: 10px; letter-spacing: .14em; }
  .hero-title h1 { margin-top: 9px; }
  .hero-ctas { bottom: 11vh; }
  /* 18px gap + 30px pill padding needed 324px of the 320px available at 360w,
     which wrapped the pair onto two lines on Pixel/Galaxy widths. */
  .hero-ctas .cta-row { margin-top: 20px; gap: 8px 14px; }
  .hero-ctas .btn-drip { padding-left: 26px; padding-right: 26px; }
  /* Borderless, but still a 44px tap target. */
  .hero-ctas .btn-ghost {
    background: none; border: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-radius: 0; padding: 0; min-height: 44px;
    display: inline-flex; align-items: center;
    font-size: 12px; letter-spacing: .14em; color: var(--text);
    position: relative;
  }
  /* Underline drawn just under the baseline rather than at the bottom of the
     44px tap target, where it floated detached from the words. */
  .hero-ctas .btn-ghost::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 10px); height: 1px;
    background: rgba(207, 178, 230, .58); transition: background .25s ease;
  }
  .hero-ctas .btn-ghost:hover { color: var(--lav); transform: none; }
  .hero-ctas .btn-ghost:hover::after { background: var(--lav); }
}

/* Narrow phones (Pixel / Galaxy / SE): at 360w the wordmark, the BOOK pill and
   the hamburger exactly filled the 320px of usable row, leaving the pill's
   rounded edge almost touching "WELLNESS". Buy back ~20px. */
@media (max-width: 380px) {
  .nav { gap: 12px; }
  .brand { font-size: 12.5px; gap: 6px; letter-spacing: .02em; }
  .brand-drop { width: 14px; height: 14px; }
  .btn-nav { padding: 10px 13px; font-size: 11px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .belt-track { animation: none; }
  .scroll-hint span { animation: none; }
  /* .reveal-line included — the scrub overlays hold most of the page's copy and
     would otherwise stay at opacity:0 for reduced-motion users until JS runs. */
  .reveal, .reveal-line { opacity: 1; transform: none; transition: none; }
  .btn, .btn:hover { transform: none; transition: none; }
}

/* ==========================================================================
   Clip grading — bringing the footage onto the lavender-noir palette
   --------------------------------------------------------------------------
   Two of the four scroll clips were graded for the old teal-noir site and
   fight the new palette. Two are not touched, and the reason matters:

     hero (ivbag)     ROTATED. Pure abstract fluid, no skin tones, so a hue
                      shift is safe. The emerald and gold blooms land on
                      magenta, violet and pink, with a cyan edge surviving as
                      the "greenish blue" the client wanted kept.
     apothecary       UNGRADED, by decision. A plum tint was tried and pulled:
                      the jewel-box cabinet is the shot, and tinting it cost
                      more than the palette match was worth. It stays as shot.
     dripbar (lounge) UNTOUCHED. Faces and hands. A hue shift would wreck skin
                      tones, and the footage is already warm and neutral — its
                      one teal LED strip now reads as the accent, not a clash.
     ritual (headspa) UNTOUCHED. Already violet, magenta and rose-gold. It
                      looks like it was shot for this palette.

   This is a grade in CSS, not a fix. Regenerating the hero in the new palette
   would beat filtering it; this is what ships until then. The filter goes on
   the poster too, or the still flashes un-graded before frames load. */

.hero canvas,
.hero .poster {
  filter: hue-rotate(155deg) saturate(.92);
}


/* A hue rotation is a colour effect, not motion, so it stays under reduced
   motion — but the GPU cost of filtering a 1600x900 canvas every scroll frame
   is real on low-end phones, where the poster is doing more of the work. */
@media (max-width: 640px) {
  .hero canvas, .hero .poster { filter: hue-rotate(155deg) saturate(.9); }
}

/* ==========================================================================
   The mark
   --------------------------------------------------------------------------
   Two files, same geometry, different inks. The artwork's own plum is 3.69:1
   on the nav — it sinks. logo-mark-ondark.svg keeps the ~310° hue and lifts
   the value to 7.4:1, and that is the one every dark room uses. The authentic
   file is for light grounds, share cards and print.

   They are <img>, not inline SVG: an external file cannot inherit CSS custom
   properties, and inlining 33KB of path data into six pages to gain a colour
   hook nobody toggles at runtime is a bad trade.
   ========================================================================== */

.brand { gap: 12px; }
.brand-logo {
  height: var(--logo-h);
  width: auto;
  flex: none;
  display: block;
  /* The mark already carries its own internal contrast; a glow would fight it. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}
.nav.scrolled .brand-logo { height: calc(var(--logo-h) - 8px); }
.brand-logo, .nav.scrolled .brand-logo { transition: height .28s cubic-bezier(.4, 0, .2, 1); }

/* Footer lockup sits a touch smaller than the nav's. */
.foot-word .brand-logo { height: 44px; filter: none; }

@media (max-width: 900px) { .brand { --logo-h: 46px; } }
@media (max-width: 620px) { .brand { --logo-h: 40px; } }

@media (prefers-reduced-motion: reduce) {
  .brand-logo, .nav.scrolled .brand-logo { transition: none; }
}

/* ---------- The apothecary's shelves -------------------------------------
   This section used to carry seven product cards that the shop page already
   listed, so the site read as two catalogues, the smaller one worse. It now
   answers "what is this and what is the range" and lets the shop page answer
   "what exactly can I buy". These tiles are shelves, not products: a count, a
   name, a price floor, and a deep link into that filter. */

.shop-how {
  margin: 18px 0 0; max-width: 60ch;
  font-size: 15px; line-height: 1.7; color: var(--dim-light);
}
.shop-how b { color: var(--ink-light); font-weight: 700; }

.shelf-row {
  /* SEVEN across, explicitly. The catalogue grew a seventh category (capsules)
     and six columns left a single tile stranded on its own row. auto-fit was
     worse -- it silently chose six at 1440 and produced the same orphan. Seven
     is an awkward number, so the breakpoints are chosen to never strand one:
     7 -> 4+3 -> 2. */
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 12px; margin: clamp(30px, 4vw, 44px) 0 0;
}
.shelf {
  display: flex; flex-direction: column; gap: 2px;
  padding: 20px 18px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 16, 32, .10);
  border-radius: 16px;
  text-decoration: none; color: inherit;
  box-shadow: 0 12px 30px rgba(26, 16, 32, .06);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.shelf:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 120, 31, .5);
  box-shadow: 0 20px 44px rgba(26, 16, 32, .12);
}
.shelf-n {
  font-family: var(--font-display); font-size: 30px; line-height: 1;
  color: var(--gold-deep);
}
.shelf-name {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: var(--ink-light); margin-top: 8px;
}
.shelf-from {
  font-family: var(--font-caps); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dim-light);
}

.shop-foot p b { color: var(--ink-light); font-weight: 700; }

@media (max-width: 1100px) { .shelf-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  {
  .shelf-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shelf { padding: 16px 14px 14px; }
  .shelf-n { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .shelf { transition: none; }
  .shelf:hover { transform: none; }
}

/* The "show me everything" button. It sits below the shelves rather than in the
   section head: by that point the visitor knows what the range is, so the button
   is an answer to a question they now have instead of one they have not asked. */
.shop-all {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 20px; margin: clamp(24px, 3vw, 34px) 0 0;
}
.shop-all .fine { color: var(--dim-light); }
@media (max-width: 560px) {
  .shop-all { flex-direction: column; gap: 12px; }
  .shop-all .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Disclosure surfaces
   --------------------------------------------------------------------------
   These carry the qualifications that used to live only in a product drawer or
   a long article, while the pages holding the prices said nothing. They are
   deliberately plain and deliberately not dismissible — a disclosure the
   reader has to go looking for is not a disclosure.
   ========================================================================== */

.claim-band {
  margin: clamp(20px, 3vw, 30px) 0 clamp(24px, 3.4vw, 34px);
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: rgba(226, 169, 78, .07);
  border-radius: 0 10px 10px 0;
  font-size: 13.5px; line-height: 1.65; color: var(--dim-light);
  max-width: 78ch;
}
.claim-band-dark { color: rgba(242, 236, 242, .82); }

/* Florida s.456.062 requires this verbatim, in capitals, and visually
   distinguishable. Do not paraphrase it, sentence-case it, or move it behind
   a link. */
.rescission {
  margin: 12px 0 0; padding: 12px 14px;
  border: 1px solid rgba(226, 169, 78, .34); border-radius: 8px;
  font-size: 10.5px; line-height: 1.55; letter-spacing: .04em;
  color: rgba(242, 236, 242, .78); text-transform: uppercase;
  max-width: 62ch;
}
.offer-detail { margin: 10px 0 0; max-width: 52ch; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.wl-eligibility {
  margin: clamp(18px, 2.4vw, 26px) 0 0; max-width: 64ch;
  font-size: 14px; line-height: 1.65; color: rgba(242, 236, 242, .78);
}
.form-notice {
  margin: 4px 0 14px; font-size: 12.5px; line-height: 1.6;
  color: var(--text-dim); max-width: 56ch;
}
.form-notice a { color: var(--lav); }
.ff-help { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.ff-consent {
  /* .ff is flex-direction:column for stacked label-over-field. Without resetting
     it the box sat ON TOP of the sentence, and .ff > span styled that sentence
     as an uppercase field label — so the row did not read as a checkbox at all,
     which is why it looked broken (Justin, 2026-08-28). */
  display: flex; flex-direction: row; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
}
.ff-consent > span {
  font-size: 12.5px; font-weight: 400; letter-spacing: normal;
  text-transform: none; line-height: 1.55; color: var(--text-dim);
}
/* `.ff input` strips appearance from EVERY input so the text fields can be
   styled — which also strips the checkbox's tick, and once appearance is none,
   accent-color does nothing. The box toggled fine; it just never showed it, so
   it read as broken (Justin, 2026-08-28). Hand the native control back, and
   undo the 12px/14px text-field padding that was inflating an 18px box to
   30x26. The whole label stays clickable, so the tap target is the sentence,
   not the box. */
.ff-consent input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 20px; height: 20px; min-width: 20px; padding: 0; border: 0; border-radius: 0;
  background: none; flex: none; margin-top: 1px;
  accent-color: var(--lav-deep);
  cursor: pointer;
}
.ff-consent { cursor: pointer; }
.ff-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }
.foot-legal-col a { display: block; }


/* ==========================================================================
   Focus and forced colours
   --------------------------------------------------------------------------
   Focus was suppressed in a few places for looks, which makes the site
   unusable by keyboard. One global rule, plus a forced-colors fallback so the
   ring survives Windows high-contrast mode where custom colours are dropped.
   ========================================================================== */

.btn:focus-visible,
.nav a:focus-visible,
.nav-links a:focus-visible,
.foot-col a:focus-visible,
.mobile-menu a:focus-visible,
.pchip:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lav);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (forced-colors: active) {
  *:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* The flat-lay closing out the lab card. The two columns of .shop-duo are
   stretched to equal height by the grid, and the lab card's content ended well
   short of the peptide card's — this fills that tail rather than leaving a
   551px hole, and it does it by MOVING the section's closing image up here so
   the same photograph is not shown twice in one section. */
.labs-shelf {
  position: relative; margin: 22px -1px -1px; /* -1px bleeds over the card border */
  border-radius: 0 0 17px 17px; overflow: hidden;
  flex: 1; min-height: 220px;
  display: flex;
}
/* contain, not cover — the source is a square product shot and a landscape
   crop cuts the carton in half. The slot carries the same near-black plum the
   photograph was lit on, so the letterboxing is invisible. */
.labs-shelf { background: #150C16; }
.labs-shelf img { width: 100%; height: 100%; object-fit: contain; display: block; }
.labs-shelf figcaption {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text);
  background: rgba(18, 12, 30, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 7px 12px; border-radius: 999px;
}
/* The card has to become a column flexbox for the figure to claim the slack. */
.labs-card { display: flex; flex-direction: column; }
@media (max-width: 900px) { .labs-shelf { min-height: 180px; } }
/* ================= LABS =================
   A LIGHT room: white cards on lavender-white, gold prices, deep purple doing
   the outlines and the small type. It follows .shop, which is also light, so
   the ground is --porcelain-2 (the deeper lavender-white) against .shop's
   --porcelain — a different room, not a continuation of the same one.

   Colour jobs here, consistent with the rest of the site: gold is money and
   metal (prices, hairline rules, the caveat's edge), --violet-deep is language
   (headings, links, labels), --lav-deep carries small purple type at 6.2:1.
   Light lavender only ever appears as a wash or a border — never as text on
   white, where it would not clear contrast. */
.labs {
  background: var(--porcelain-2); color: var(--ink-light);
  padding: clamp(80px, 10vw, 130px) 0;
  border-top: 1px solid rgba(91, 62, 150, .16);
}
.labs .eyebrow { color: var(--violet-deep); }
.labs-head { max-width: 660px; margin-bottom: clamp(34px, 4vw, 52px); }
.labs-head h2 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 56px); line-height: 1.03; margin: 10px 0 16px; }
.labs .lead { color: var(--dim-light); max-width: 58ch; }

/* Group rule: deep purple label, gold hairline. */
/* Labs picker: same .picker/.pchip component as the drip menu above, so the page
   has one browsing model rather than two. The count rides in the chip because a
   chip that filters to a single panel should say so before it is tapped. */
.lab-picker { margin-bottom: clamp(22px, 3vw, 34px); }
.pchip-n { opacity: .6; font-variant-numeric: tabular-nums; margin-left: 2px; }
/* Seven chips at full padding stack one-per-row on a 390px phone — 0.6 of a
   screen of chrome on a section whose whole job is being short. */
@media (max-width: 640px) {
  .lab-picker .picker-chips { gap: 8px; }
  .lab-picker .pchip { font-size: 12.5px; padding: 10px 14px; min-height: 44px; }
}
.pchip.on .pchip-n { opacity: .85; }
/* Every display: rule on this site needs its [hidden] partner — .sp-card and
   .sp-deliv both shipped visible while the DOM reported them hidden. */
.lab-card[hidden] { display: none; }
/* .ff-row is display:grid, which outranks the UA [hidden] rule. */
.ff-row[hidden] { display: none; }

/* The cart's fulfilment chooser. Two radios, because this is a choice between
   two different things being bought, not a toggle on one thing. */
.sp-fulfil {
  display: grid; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border: 0;
  border-radius: 12px; background: rgba(242, 236, 242, .04);
}
.sp-fulfil legend {
  padding: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-dim);
}
.sp-fulfil label {
  display: flex; flex-direction: row; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.45; color: var(--text); cursor: pointer;
}
.sp-fulfil label > span { display: block; }
/* Same reasoning as .ff-consent: hand the native control back and stop the
   text-field padding inflating it. Radios and checkboxes both lose their mark
   the moment appearance is none, and accent-color goes inert with it. */
.sp-fulfil input[type="radio"] {
  appearance: auto; -webkit-appearance: auto;
  width: 18px; height: 18px; min-width: 18px; padding: 0; border: 0;
  background: none; flex: none; margin-top: 2px;
  accent-color: var(--lav-deep); cursor: pointer;
}
.sp-fulfil label b {
  display: block; margin-top: 2px; font-size: 12px; font-weight: 400;
  line-height: 1.45; color: var(--text-dim);
}
.sp-fulfil input[type="radio"]:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }
/* display: grid outranks the UA [hidden] rule — the partner this site keeps
   forgetting, three times and counting. */
.sp-fulfil[hidden] { display: none; }
.sp-rx { margin: 0 0 14px; }
.sp-rx[hidden] { display: none; }
/* FOURTH time on this project: an author `display:` rule outranks the UA
   `[hidden] { display: none }`, so JS sets hidden and nothing moves. Here it
   was `.sp-cart footer .fine`, which kept the shipping fine-print on screen
   during a visit order. Any display: rule needs its [hidden] partner. */
.sp-cart footer .fine[hidden] { display: none; }


/* ONE way to filter (Justin, 2026-08-27). The accordions and the chips were two
   controls answering the same question, so the accordions went. What is left is
   a list with two densities: compact rows by default — every panel name and
   price visible in about a screen — and full cards for whatever a chip matched.
   Same markup either way; only .is-filtered on the section switches it. */
.lab-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(91, 62, 150, .16); }
@media (min-width: 900px) { .lab-list { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 44px); } }

.lab-card {
  background: #fff; border: 1px solid transparent; border-bottom-color: rgba(91, 62, 150, .16);
  border-radius: 0; padding: 0;
  background: none;
}
.lab-card .lab-top {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 2px;
}
/* Compact rows are read, not tapped — the chips are the only control — so they
   are sized for scanning 18 of them rather than for a 44px target. */
.lab-card .lab-top h3 { margin: 0; flex: 1; font-size: 16.5px; line-height: 1.25; }
.lab-card .lab-price { font-size: 16.5px; }
.lab-card .lab-code { display: none; }
.labs.is-filtered .lab-card .lab-top h3 { font-size: 21px; }
.labs.is-filtered .lab-card .lab-price { font-size: 22px; }
.labs.is-filtered .lab-card .lab-code { display: inline-block; }
.lab-card .lab-price { margin-left: auto; white-space: nowrap; }
/* Compact rows hide the detail, not the data — it stays in the DOM for crawlers
   and for the moment a chip promotes this row to a full card. */
.lab-card .lab-more { display: none; }

.labs.is-filtered .lab-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; border-top: 0; }
.labs.is-filtered .lab-card {
  background: #fff; border: 1px solid rgba(91, 62, 150, .18); border-radius: 14px;
  padding: 18px 20px 16px;
}
.labs.is-filtered .lab-card .lab-top { display: flex; min-height: 0; padding: 0 0 2px; flex-wrap: wrap; }
.labs.is-filtered .lab-card .lab-more { display: block; }

.labs.is-filtered .lab-card {
  box-shadow: 0 10px 26px rgba(26, 16, 32, .05);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.labs.is-filtered .lab-card:hover { border-color: rgba(91, 62, 150, .38); box-shadow: 0 14px 34px rgba(26, 16, 32, .09); }
/* Lavender wash, deep-purple ink and border — the light-room inverse of the
   dark board's chip. */
.lab-code {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--lav-deep);
  background: rgba(198, 179, 247, .16);
  border: 1px solid rgba(91, 62, 150, .3); border-radius: 999px; padding: 3px 9px;
}
.lab-price { font-family: var(--font-display); font-size: 22px; color: var(--gold-deep); margin: 0 0 0 auto; }
.lab-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 400; margin: 0 0 7px; line-height: 1.15; color: var(--ink-light); }
.lab-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dim-light); }

/* Eighteen panels with up to twenty markers each would bury the prices, so the
   marker list is collapsed. It is real markup, not a tooltip — crawlable, and
   open-able without JS. */
.lab-what { margin-top: 12px; border-top: 1px solid rgba(91, 62, 150, .14); padding-top: 10px; }
.lab-what summary {
  cursor: pointer; list-style: none; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet-deep);
  min-height: 24px; display: flex; align-items: center; gap: 6px;
}
.lab-what summary::-webkit-details-marker { display: none; }
.lab-what summary::after { content: "+"; margin-left: auto; font-size: 15px; line-height: 1; color: var(--gold-deep); }
.lab-what[open] summary::after { content: "–"; }
.lab-what summary span { color: var(--dim-light); letter-spacing: .06em; font-weight: 700; }
.lab-what summary:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 3px; border-radius: 4px; }
.lab-what ul { margin: 10px 0 2px; padding: 0 0 0 16px; }
.lab-what li { font-size: 12.5px; line-height: 1.7; color: var(--dim-light); }
.lab-what li::marker { color: var(--gold-deep); }

.lab-caveat {
  margin: 12px 0 0; padding: 10px 12px; font-size: 12px; line-height: 1.55;
  color: var(--ink-light); background: rgba(226, 169, 78, .12);
  border-left: 2px solid var(--gold-deep); border-radius: 0 8px 8px 0;
}

.lab-book {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--violet-deep); text-decoration: none; border-bottom: 1px solid transparent;
}
.lab-book:hover, .lab-book:focus-visible { border-bottom-color: var(--gold-deep); }

.labs-foot {
  margin-top: 44px; padding-top: 26px; max-width: 70ch;
  border-top: 1px solid rgba(168, 120, 31, .32);
}
.labs-foot p { color: var(--dim-light); font-size: 15px; line-height: 1.65; }
.labs-foot a { color: var(--violet-deep); font-weight: 600; }
.labs-foot .fine { font-size: 12.5px; color: rgba(26, 16, 32, .6); margin-top: 10px; }
.labs-foot .btn { margin-top: 20px; }

@media (max-width: 640px) {
  .lab-grid { grid-template-columns: 1fr; }
  .labs-head h2 { font-size: clamp(30px, 8vw, 38px); }
}

/* The apothecary's pointer at the labs section — light room, so deep purple. */
.labs-point { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--dim-light); }
.labs-point a { color: var(--violet-deep); font-weight: 600; }

/* Screen-reader-only text. The site had no such utility, so the first markup
   that used .sr-only rendered it visibly — always ship the class with the use. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}