/* ============================================================
   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: 20px; 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); }
.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 {
  display: inline-block; padding: 6px 0 5px; /* 22px tall measured — under the 24px touch minimum */
  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; }

.glp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(30px, 3.6vw, 44px); align-items: stretch; }
.glp-card {
  position: relative;
  background: var(--plum-2); border: 1px solid var(--plum-line); 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: rgba(163, 149, 228, .45); }
/* 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(226, 169, 78, .55);
  background: linear-gradient(180deg, rgba(226, 169, 78, .10), rgba(226, 169, 78, .02) 62%), var(--plum-3);
  box-shadow: 0 26px 60px rgba(60, 38, 122, .35);
}
.glp-featured:hover { border-color: rgba(226, 169, 78, .8); box-shadow: 0 30px 70px rgba(90, 62, 20, .40); }
.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(--gold); margin: 0 0 12px; }
.glp-card h3 { font-size: 27px; color: var(--porcelain); }
.glp-best { color: var(--text-dim); 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(226, 169, 78, .26); flex: 1; }
.glp-card ul li { position: relative; padding: 4px 0 4px 20px; font-size: 13.5px; color: rgba(242, 236, 242, .80); }
.glp-card ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; 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; }
/* Price stays gold everywhere on the site — value reads gold, the room reads plum. */
.glp-price { font-family: var(--font-display); font-size: 34px; color: var(--gold); margin: 18px 0 0; }
.glp-price span { font-family: var(--font-body); font-size: 13px; color: var(--text-dim); 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; }

/* 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: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px dashed rgba(163, 149, 228, .22); font-size: 15px; }
.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); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 60px); 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; }
.foot-col a { display: block; text-decoration: none; color: var(--text-dim); font-size: 14.5px; padding: 8px 0; transition: color .2s ease; }
.foot-col 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: 1080px) {
  .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; }
  .scrub.dripbar, .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%);
  }

  .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 {
  display: grid; grid-template-columns: repeat(6, 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: 1000px) { .shelf-row { grid-template-columns: repeat(3, 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 {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
}
.ff-consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--lav); }
.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; } }