/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Nav sits above --z-sticky so its dropdowns layer over any other
     sticky elements on the page (e.g. the .subcat-sticky filter bar
     on service pages, which is also at --z-sticky). Without this the
     dropdown appears under the filter bar and closes when the cursor
     crosses the filter bar's hit area. */
  z-index: calc(var(--z-sticky) + 10);
  padding: var(--space-4) 0;
  /* Always have a soft cream translucent backdrop so the cream-toned
     logo reads cleanly over a dark hero (e.g. the scroll video). */
  background: hsla(54, 22%, 98%, 0.7);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid hsla(208, 22%, 90%, 0.35);
  transition: padding var(--duration-normal) var(--ease-default),
              background var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

/* Mobile — keep the cream translucent backdrop on the nav even at the
   top of the page. Fully transparent was tested and lost legibility:
   the EN/中 toggle, hamburger lines and "Book" pill all sit on a
   light skin-toned eye image, so without a backdrop the contrast
   collapses. The base .nav rule already provides
   `background: hsla(54, 22%, 98%, 0.7)` + backdrop blur, which we
   keep on mobile — just push the lavender hairline a hair down so
   the visual divide between nav and hero reads as deliberate. */
@media (max-width: 640px) {
  .nav:not(.scrolled) {
    border-bottom-color: hsla(208, 22%, 90%, 0.25);
  }
}

.nav.scrolled {
  padding: var(--space-3) 0;
  background: hsla(54, 22%, 98%, 0.94);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Mobile — give the hamburger / Book / lang switch real breathing
   room from the right edge of the screen. The page now declares
   viewport-fit=cover so env(safe-area-inset-*) returns real device
   insets (notch, rounded corners, Dynamic Island in landscape).
   We add space-4 ON TOP of the safe inset so even on devices with
   no reported inset, the hamburger is comfortably away from the edge. */
@media (max-width: 640px) {
  .nav__inner {
    padding-left: calc(var(--container-padding) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--space-7) + env(safe-area-inset-right, 0px));
  }
}

/* Brand stamp logo (raster image) */
.nav__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav__logo-img {
  height: 60px;
  width: auto;
  display: block;
  transition: height var(--duration-normal) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              filter var(--duration-fast) var(--ease-default);
  filter: drop-shadow(0 1px 2px hsla(208, 22%, 18%, 0.06));
}
.nav__logo:hover .nav__logo-img {
  transform: scale(1.04);
  filter: drop-shadow(0 2px 8px hsla(208, 22%, 18%, 0.12));
}
.nav.scrolled .nav__logo-img { height: 48px; }

@media (max-width: 640px) {
  .nav__logo-img { height: 50px; }
  .nav.scrolled .nav__logo-img { height: 42px; }
}

.nav__menu {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.nav__link {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-text);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
}

/* ─── DESKTOP DROPDOWN (Services → Lashes / Nails / SPM / Hair) ─── */
.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__item--dropdown > .nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__dropdown-icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.nav__item--dropdown:hover .nav__dropdown-icon,
.nav__item--dropdown:focus-within .nav__dropdown-icon {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 240px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast);
  z-index: var(--z-overlay);
}
/* Invisible hover-bridge — prevents the dropdown from closing as the cursor
   crosses the gap between the parent link and the menu. */
.nav__dropdown::before {
  content: '';
  position: absolute;
  inset: -10px 0 auto 0;
  height: 10px;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav__dropdown li { margin: 0; padding: 0; }
.nav__dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible {
  background: var(--rose-50);
  color: var(--color-heading);
  outline: none;
}

/* Divider between service links and the Promotions entry. */
.nav__dropdown-divider {
  list-style: none;
  height: 1px;
  margin: var(--space-2) 0;
  background: var(--color-border);
}
/* Promotions entry — same shape as the service links, plum (brand-blue) tint
   so it reads as a distinct destination but doesn't dominate the dropdown. */
.nav__dropdown-promo {
  color: var(--color-heading) !important;
  font-weight: var(--weight-semibold) !important;
}
.nav__dropdown-promo:hover,
.nav__dropdown-promo:focus-visible {
  background: var(--plum-50) !important;
  color: var(--color-heading) !important;
}
.nav__link:hover { color: var(--color-heading-em); }

.nav__link.active {
  color: var(--color-heading);
  background: var(--rose-50);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  border-radius: var(--radius-full);
}
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--plum-600);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default);
}
.nav__toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile menu overlay (editorial drawer) ── */
.nav__mobile {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 35% at 0% 0%, var(--rose-50) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 100% 100%, var(--plum-50) 0%, transparent 60%),
    var(--cream-0);
  z-index: calc(var(--z-sticky) + 20); /* must sit above the fixed nav header (which is at +10 to clear subcat-sticky) */
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.nav__mobile.open { transform: translateX(0); }

/* Header — brand + close */
.nav__mobile-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: hsla(54, 22%, 98%, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--mist-200);
}
.nav__mobile-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav__mobile-brand-img {
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px hsla(208, 22%, 18%, 0.06));
}
.nav__mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream-0);
  border: 1px solid var(--mist-200);
  color: var(--color-heading);
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}
.nav__mobile-close:hover { background: var(--rose-50); }
.nav__mobile-close:active { transform: scale(0.94); }
.nav__mobile-close svg { width: 20px; height: 20px; }

/* Menu list — numbered editorial */
.nav__mobile-menu {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5);
}
.nav__mobile-link {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  text-decoration: none;
  color: var(--color-heading);
  border-bottom: 1px solid var(--mist-200);
  transition: color var(--duration-fast) var(--ease-default);
}
.nav__mobile-link:last-child { border-bottom: 0; }
.nav__mobile-link:active { color: var(--color-heading-em); }
.nav__mobile-link .num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--color-accent);
  line-height: 1;
}
.nav__mobile-link .label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--color-heading);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.nav__mobile-link .label em {
  display: inline-block;
  font-family: var(--font-display-zh);
  font-style: normal;
  font-size: 0.78em;
  color: var(--color-heading-em);
  letter-spacing: 0.1em;
  margin-left: 6px;
  font-weight: 400;
}
.nav__mobile-link .tag {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-heading-em);
  background: var(--rose-50);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.nav__mobile-link.is-signature {
  background: linear-gradient(to right, var(--rose-50) 0%, transparent 70%);
  margin: 0 calc(-1 * var(--space-5));
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  border-left: 2px solid var(--rose-400);
}
.nav__mobile-link.active .num,
.nav__mobile-link.active .label {
  color: var(--color-heading-em);
}

/* Foot — CTA + contact */
.nav__mobile-foot {
  margin-top: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  border-top: 1px solid var(--mist-200);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: linear-gradient(180deg, transparent 0%, hsla(208, 22%, 25%, 0.025) 100%);
}
.nav__mobile-cta {
  width: 100%;
  font-size: 0.9375rem;
}
.nav__mobile-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  line-height: 1.4;
}
.nav__mobile-contact a {
  color: var(--color-heading);
  font-weight: 600;
}
.nav__mobile-contact a:hover { color: var(--color-heading-em); }

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  cursor: pointer;
  /* Belt-and-braces: a button can NEVER make its container overflow the
     viewport. If its text + icon would push it past available width, it
     stays capped at the container's content-box. */
  max-width: 100%;
}
@media (max-width: 640px) {
  /* On narrow screens, allow long button text to wrap to a second line
     instead of pushing the button off the side of the viewport. */
  .btn { white-space: normal; text-align: center; }
}

.btn svg { width: 1.1em; height: 1.1em; }

.btn--primary {
  background: var(--plum-500);
  color: var(--color-text-on-dark);
}
.btn--primary:hover {
  background: var(--plum-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--color-text-on-dark);
}

.btn--accent {
  background: var(--rose-400);
  color: var(--color-heading);
}
.btn--accent:hover {
  background: var(--rose-300);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px hsla(252, 18%, 55%, 0.35);
  color: var(--color-heading);
}

.btn--ghost {
  background: transparent;
  color: var(--color-heading);
  border-color: var(--color-heading-em);
}
.btn--ghost:hover {
  background: var(--plum-500);
  color: var(--color-text-on-dark);
}

.btn--ghost-cream {
  /* Soft white veil — readable as a button on the hero's dark video
     without competing with the primary Book CTA next to it. White @
     low alpha = anchor-of-white veil (permitted on dark surfaces). */
  background: hsla(0, 0%, 100%, 0.14);
  color: var(--color-text-on-dark);
  border-color: hsla(0, 0%, 100%, 0.45);
}
.btn--ghost-cream:hover {
  background: var(--cream-0);
  color: var(--color-heading);
  border-color: var(--color-text-on-dark);
}

.btn--whatsapp {
  background: #25D366;
  color: white;
}
.btn--whatsapp:hover {
  background: #1ebc5a;
  transform: translateY(-1px);
  color: white;
}

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* ═══════════════════════════════════════════
   LANGUAGE SWITCH (EN ↔ 中)
   Persists choice in localStorage, swaps the
   html[lang] attribute, restores on every page.
   ═══════════════════════════════════════════ */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--mist-200);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-heading-em);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}
.lang-switch:hover {
  background: var(--rose-50);
  border-color: var(--rose-200);
}
.lang-switch__active {
  color: var(--color-heading);
  font-weight: 700;
}
.lang-switch__sep {
  color: var(--mist-200);
  font-weight: 400;
}
.lang-switch__inactive {
  color: var(--color-text-muted);
  font-family: var(--font-display-zh);
  font-size: 0.875rem;
}
/* Swap visual emphasis based on active language */
html[lang="zh"] .lang-switch__active {
  font-family: var(--font-display-zh);
  font-size: 0.875rem;
}
html[lang="zh"] .lang-switch__inactive {
  font-family: var(--font-body);
  font-size: 0.6875rem;
}

/* Inside the mobile drawer, the lang-switch sits in the head */
.nav__mobile-head .lang-switch {
  margin-right: var(--space-2);
}

/* On dark/transparent nav contexts, dim the border */
.nav.scrolled .lang-switch {
  border-color: var(--mist-200);
}

/* ═══════════════════════════════════════════
   HERO — SCROLL-DRIVEN VIDEO (Apple-style)
   The section is several viewports tall; an inner
   sticky child stays pinned for the full scroll
   distance, with a canvas redrawing the next frame
   as scroll progress advances. Once finished, the
   page continues normally to the marquee section.
   ═══════════════════════════════════════════ */
.scroll-hero {
  position: relative;
  /* Outer is 200vh tall: 100vh of pinned scroll-scrub for the canvas animation
     to play out, then 100vh release distance. While pinned, scrolling advances
     frames but the viewport content stays locked — scrolljacked-style.
     `dvh` tracks the mobile browser-chrome state (URL bar) so the sticky child
     truly matches the visible viewport — `vh` alone leaves a sliver gap when
     the iOS/Android URL bar collapses, which the user perceives as "the page
     moved a bit". `vh` fallback for browsers without dvh support. */
  height: 200vh;
  height: 200dvh;
  /* Don't let the scroll-jack bleed into pull-to-refresh / chain into the
     parent scroll on mobile. Keeps the "locked" feel honest. */
  overscroll-behavior-y: contain;
}

.scroll-hero__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  /* Full viewport — so scrolljacking feels like nothing is moving except the
     canvas frames advancing. Anything shorter would let the next section
     scroll into the bottom strip while the sticky stays pinned, breaking the
     "locked" illusion. dvh keeps the sticky exactly matching the live
     viewport on mobile as the URL bar collapses/expands. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "top"
    "overlay"
    "strip";
  background: var(--plum-700);
}

.scroll-hero__canvas,
.scroll-hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.scroll-hero__canvas { display: none; }
.scroll-hero.is-ready .scroll-hero__canvas { display: block; }
.scroll-hero.is-ready .scroll-hero__fallback { display: none; }

.scroll-hero__fallback {
  object-fit: cover;
  object-position: center;
}

/* Plum gradient veil for text legibility */
.scroll-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      hsla(208, 22%, 12%, 0.55) 0%,
      hsla(208, 22%, 12%, 0.18) 35%,
      hsla(208, 22%, 12%, 0.18) 60%,
      hsla(208, 22%, 12%, 0.85) 100%);
  pointer-events: none;
}

/* Scroll-driven dark fade. JS sets opacity from 1 → 0 over the first third
   of the scroll. Default 0 so reduced-motion / saveData users (where the JS
   bails) don't see a permanently-darkened hero. */
.scroll-hero__fade-in {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: hsl(208, 28%, 6%);
  opacity: 0;
  pointer-events: none;
}

/* Eye-opening reveal panels — top and bottom halves slide apart once the
   first frame is painted. Injected by scroll-hero.js, so they're absent on
   saveData / reduced-motion paths where the script early-exits. */
/* Eye-opening reveal — two cream panels meeting along an off-centre diagonal,
   so the opening sweeps along a slanted axis (not a flat horizontal split).
   Cream matches the page background, so the panels read like the page parting
   to reveal the hero, not like a dark overlay. */
.scroll-hero__eyelid {
  position: absolute;
  inset: 0;
  z-index: 4;
  background-color: var(--color-text-on-dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g stroke='%23A66E75' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.28'><g transform='translate(45 45)'><ellipse cx='0' cy='-8' rx='3.2' ry='5.5'/><ellipse cx='8' cy='0' rx='5.5' ry='3.2'/><ellipse cx='0' cy='8' rx='3.2' ry='5.5'/><ellipse cx='-8' cy='0' rx='5.5' ry='3.2'/></g><g transform='translate(130 115) scale(0.72)'><ellipse cx='0' cy='-8' rx='3.2' ry='5.5'/><ellipse cx='8' cy='0' rx='5.5' ry='3.2'/><ellipse cx='0' cy='8' rx='3.2' ry='5.5'/><ellipse cx='-8' cy='0' rx='5.5' ry='3.2'/></g></g><g fill='%23A66E75' fill-opacity='0.32'><circle cx='45' cy='45' r='1.4'/><circle cx='130' cy='115' r='1'/><circle cx='100' cy='30' r='1'/><circle cx='28' cy='125' r='1'/><circle cx='155' cy='60' r='0.8'/><circle cx='70' cy='150' r='0.8'/></g></svg>");
  background-repeat: repeat;
  background-size: 180px 180px;
  pointer-events: none;
  will-change: clip-path;
}
/* Diagonal meeting edge slopes from (0, 68%) on the left to (100%, 32%) on
   the right — convergence point sits high-right, around the iris. */
.scroll-hero__eyelid--top {
  clip-path: polygon(0 0, 100% 0, 100% 32%, 0 68%);
}
.scroll-hero__eyelid--bottom {
  clip-path: polygon(0 68%, 100% 32%, 100% 100%, 0 100%);
}
.scroll-hero.is-ready .scroll-hero__eyelid--top {
  animation: eyelid-open-top 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
.scroll-hero.is-ready .scroll-hero__eyelid--bottom {
  animation: eyelid-open-bottom 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
@keyframes eyelid-open-top {
  from { clip-path: polygon(0 0, 100% 0, 100% 32%, 0 68%); }
  to   { clip-path: polygon(0 -100%, 100% -100%, 100% -68%, 0 -32%); }
}
@keyframes eyelid-open-bottom {
  from { clip-path: polygon(0 68%, 100% 32%, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 168%, 100% 132%, 100% 200%, 0 200%); }
}

/* TOP STRAP — kicker + scroll hint */
.scroll-hero__top {
  grid-area: top;
  z-index: 3;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  color: hsla(0, 0%, 100%, 0.85);
}
.scroll-hero__strap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.scroll-hero__strap .dot { color: var(--rose-300); opacity: 0.7; }

.scroll-hero__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: hsla(0, 0%, 100%, 0.1);
  backdrop-filter: blur(6px);
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: hsla(0, 0%, 100%, 0.9);
  animation: scroll-hint-bob 2.4s ease-in-out infinite;
}
.scroll-hero__hint svg { width: 12px; height: 12px; }

@keyframes scroll-hint-bob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(4px); opacity: 0.6; }
}

/* MAIN OVERLAY — title, lead, CTAs */
.scroll-hero__overlay {
  grid-area: overlay;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6) clamp(1.5rem, 5vw, 4rem);
  max-width: 920px;
  width: 100%;
  margin-left: 0;
  color: var(--color-text-on-dark);
}
/* Desktop: shift the overlay rightward so the copy doesn't hug the left edge. */
@media (min-width: 900px) {
  .scroll-hero__overlay {
    padding-left: clamp(4rem, 10vw, 10rem);
  }
}

.scroll-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--color-text-on-dark);
  max-width: 14ch;
  margin: 0;
  text-shadow: 0 2px 32px hsla(212, 36%, 8%, 0.45);
}
.scroll-hero__title em {
  color: var(--rose-300);
  font-style: italic;
  font-weight: 500;
  /* Soft glowing-shimmer animation — multiple text-shadow layers pulse in
     intensity so the accent word breathes against the dark veil. */
  animation: hero-em-shimmer 3.2s ease-in-out infinite;
}
@keyframes hero-em-shimmer {
  0%, 100% {
    text-shadow:
      0 0 6px hsla(252, 60%, 88%, 0.35),
      0 0 18px hsla(252, 70%, 75%, 0.15);
  }
  50% {
    text-shadow:
      0 0 14px hsla(252, 80%, 92%, 0.80),
      0 0 36px hsla(252, 80%, 80%, 0.55),
      0 0 64px hsla(252, 70%, 70%, 0.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hero__title em { animation: none; }
}

.scroll-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: hsla(0, 0%, 100%, 0.92);
  max-width: 50ch;
  margin: 0;
  text-shadow: 0 1px 12px hsla(212, 36%, 8%, 0.35);
}

.scroll-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* BOTTOM STRIP — credentials */
.scroll-hero__strip {
  grid-area: strip;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: var(--space-4) var(--space-10);
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  margin: 0;
  color: var(--color-text-on-dark);
}
.scroll-hero__strip > div { display: flex; flex-direction: column; gap: 2px; }
.scroll-hero__strip dt {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: hsla(0, 0%, 100%, 0.6);
}
.scroll-hero__strip dd {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.35;
  color: hsla(0, 0%, 100%, 0.95);
}
.scroll-hero__strip .stars { color: var(--rose-300); letter-spacing: 0.08em; margin-right: 4px; }

/* PROGRESS BAR — scrub indicator */
.scroll-hero__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 4;
  background: hsla(0, 0%, 100%, 0.12);
}
.scroll-hero__progress-bar {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--rose-300) 0%, var(--rose-400) 100%);
  transition: width 60ms linear;
}

/* Mobile: keep the eye macro as the visual spotlight. Text becomes a
   compact anchored caption at the bottom — small headline + 1 CTA only.
   Lead paragraph + secondary CTA + credential strip are hidden so the
   user can actually see the lash/brow/Bo Jin animation. */
@media (max-width: 720px) {
  .scroll-hero { height: 165vh; }

  /* Lighter veil — only a soft top vignette + bottom anchor for the
     caption strip. The middle of the frame stays clean. */
  .scroll-hero__veil {
    background:
      linear-gradient(180deg,
        hsla(208, 28%, 8%, 0.35) 0%,
        hsla(208, 28%, 8%, 0.0) 18%,
        hsla(208, 28%, 8%, 0.0) 60%,
        hsla(208, 28%, 8%, 0.85) 100%);
  }

  .scroll-hero__sticky {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "top"
      "spacer"
      "overlay";
  }

  .scroll-hero__top {
    padding: var(--space-4) var(--space-5) 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .scroll-hero__strap { font-size: 0.5625rem; }
  .scroll-hero__hint { padding: 4px 10px; font-size: 0.5625rem; }

  /* Caption pinned to the bottom with a darker gradient veil so the title +
     lead + both CTAs sit clearly above the eye image. */
  .scroll-hero__overlay {
    align-self: end;
    padding: var(--space-5) var(--space-5) var(--space-6);
    gap: var(--space-4);
    background: linear-gradient(180deg,
      hsla(208, 28%, 8%, 0) 0%,
      hsla(208, 28%, 8%, 0.65) 45%,
      hsla(208, 28%, 8%, 0.92) 100%);
  }

  .scroll-hero__title {
    /* Bigger on mobile now that the zoomed-out eye leaves real room
       at the bottom. Title becomes the editorial anchor of the hero,
       not a secondary line under a dominant image. */
    font-size: clamp(2.6rem, 13vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    max-width: 14ch;
    text-shadow: 0 2px 16px hsla(212, 36%, 4%, 0.7);
    margin: 0;
  }

  /* Lead — shown on mobile, sized for legibility against the gradient veil */
  .scroll-hero__lead {
    font-size: 0.95rem;
    line-height: 1.5;
    color: hsla(0, 0%, 100%, 0.92);
    text-shadow: 0 1px 8px hsla(212, 36%, 4%, 0.6);
    margin: 0;
    max-width: 32ch;
  }

  /* Both CTAs visible. Stack them vertically so each is full-width and tappable. */
  .scroll-hero__actions {
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
  }
  .scroll-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Credential strip stays hidden on mobile — too noisy with full content above */
  .scroll-hero__strip { display: none; }

  /* Brand strap + scroll hint stay hidden on mobile — they bleed through
     the now-transparent nav and visually conflict with the logo + nav
     actions. The logo already carries the brand mark on this width. */
  .scroll-hero__top { display: none; }

  /* Mobile keeps the same scrolljacked pattern — outer 200dvh for scrub,
     sticky fills the LIVE viewport (dvh, not vh) so nothing visibly moves
     until release. Using vh on mobile causes a visible settling shift when
     the URL bar collapses; dvh tracks that chrome state exactly. */
  .scroll-hero { height: 200vh; height: 200dvh; }
  .scroll-hero__sticky { height: 100vh; height: 100dvh; }
}

/* Reduced motion: disable scrub, just show first frame */
@media (prefers-reduced-motion: reduce) {
  .scroll-hero { height: 100vh !important; height: 100dvh !important; }
  .scroll-hero__sticky { position: relative !important; }
  .scroll-hero__canvas { display: none !important; }
  .scroll-hero__fallback { display: block !important; }
  .scroll-hero__hint { animation: none !important; }
}

/* Mobile portrait — anchor the eye in the upper portion of the
   viewport instead of letting it fill the whole frame. The image
   element keeps full viewport width but takes only the top 62% of
   the height; object-fit: cover then fills that smaller box at the
   right aspect, naturally rendering the eye smaller and tighter to
   the top. A mask-image gradient feathers the bottom ~18% of the
   image into transparency so the eye dissolves smoothly into the
   ink-anchor surround below — no hard horizontal cut, no apparent
   "gap" between image and title. */
@media (max-width: 640px) {
  .scroll-hero__canvas,
  .scroll-hero__fallback {
    height: 62%;
    bottom: auto; /* override inset:0's bottom so height takes effect */
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 70%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 70%,
      transparent 100%
    );
  }
  /* Dark surround under and around the cropped image — ink anchor,
     brand-compliant. The image's bottom mask-fade dissolves into
     this same color, so the transition reads as one continuous
     surface, not a cut. */
  .scroll-hero__sticky {
    background: var(--color-bg-dark);
  }
}

/* ═══════════════════════════════════════════
   HERO — PHOTO-LED DIPTYCH (v3) — legacy
   No longer used on home; retained for any
   page that may want the diptych pattern.
   ═══════════════════════════════════════════ */
   Typography panel left, full-bleed beauty
   photograph right. Luxury-beauty-brand rhythm
   (Aesop / Tatcha / Rhode) rather than editorial
   magazine cover. Image leads, type is quiet.
   ═══════════════════════════════════════════ */
.hero-v3 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cream-50);
  min-height: 100vh;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hero-v3 {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* ── Left panel (typography) ── */
.hero-v3__text {
  position: relative;
  padding: 7rem var(--container-padding) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  z-index: 2;
}

@media (min-width: 900px) {
  .hero-v3__text {
    padding: 8rem clamp(3rem, 5vw, 5rem) 5rem clamp(3rem, 6vw, 6rem);
    max-width: none;
    margin: 0;
    min-height: 100vh;
  }
}

/* Subtle atmospheric backdrop */
.hero-v3__text::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 8% 30%, var(--rose-50) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 95% 95%, var(--plum-50) 0%, transparent 60%);
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}

/* Brand lockup (restrained, not the centerpiece) */
.hero-v3__lockup {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.hero-v3__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  color: var(--color-heading);
  line-height: 1;
  letter-spacing: -0.025em;
  padding-bottom: 0.15em;
}
.hero-v3__sub {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-heading-em);
}
.hero-v3__sub-kicker {
  color: var(--color-heading-em);
  padding: 2px 8px;
  background: var(--rose-50);
  border-radius: var(--radius-full);
}
.hero-v3__sub-dot { color: var(--rose-300); opacity: 0.7; }

/* Editorial headline */
.hero-v3__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--color-heading);
  max-width: 14ch;
  margin: 0;
}
.hero-v3__title em {
  color: var(--color-heading-em);
  font-style: italic;
  font-weight: 500;
}

/* Lead paragraph */
.hero-v3__lead {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.65;
  color: var(--color-text-soft);
  max-width: 46ch;
  margin: 0;
}

/* CTA row */
.hero-v3__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Trust strip at the foot of the left panel */
.hero-v3__strip {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--mist-200);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 560px) {
  .hero-v3__strip { grid-template-columns: repeat(3, auto); gap: var(--space-6) var(--space-8); }
}
.hero-v3__strip > div { display: flex; flex-direction: column; gap: 2px; }
.hero-v3__strip dt {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero-v3__strip dd {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-heading);
  font-weight: 500;
  margin: 0;
  line-height: 1.35;
}
.hero-v3__stars {
  color: var(--color-heading-em);
  letter-spacing: 0.08em;
  margin-right: 4px;
}

/* ── Right panel (photograph) ── */
.hero-v3__image {
  position: relative;
  min-height: 58vh;
  margin: 0;
  overflow: hidden;
  background: var(--plum-100);
}

@media (min-width: 900px) {
  .hero-v3__image {
    min-height: 100vh;
  }
}

.hero-v3__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.95) contrast(1.02);
}

/* Soft plum gradient overlay for editorial depth */
.hero-v3__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, hsla(208, 22%, 18%, 0) 55%, hsla(208, 22%, 18%, 0.55) 100%),
    linear-gradient(90deg, hsla(0, 0%, 100%, 0.15) 0%, transparent 35%);
  z-index: 2;
  pointer-events: none;
}

/* Bottom-left editorial caption over image */
.hero-v3__tag {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  max-width: 28ch;
}
.hero-v3__tag-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--rose-300);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Top-right pricing chip — signature hybrid lash */
.hero-v3__chip {
  position: absolute;
  top: var(--space-8);
  right: var(--space-6);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  background: hsla(0, 0%, 100%, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid hsla(208, 22%, 25%, 0.06);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px hsla(208, 22%, 15%, 0.2);
  transform: rotate(2deg);
  text-align: right;
}
.hero-v3__chip .kicker {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-heading-em);
}
.hero-v3__chip .price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.25rem, 3vw, 2.75rem);
  color: var(--color-heading);
  line-height: 0.9;
  padding: 2px 0;
}
.hero-v3__chip .label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--color-heading-em);
  letter-spacing: 0.02em;
}

/* Mobile tweaks */
@media (max-width: 900px) {
  .hero-v3__image { order: -1; min-height: 68vh; }
  .hero-v3__text { padding-top: var(--space-12); }
  .hero-v3__chip {
    top: calc(6rem + var(--space-4));
    right: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .hero-v3__chip .price { font-size: 2rem; }
  .hero-v3__tag { left: var(--space-4); bottom: var(--space-4); font-size: 0.625rem; }
}

@media (max-width: 480px) {
  .hero-v3__image { min-height: 58vh; }
  .hero-v3__title { font-size: clamp(2rem, 9vw, 3rem); max-width: 16ch; }
}

/* Legacy v2 editorial hero CSS (no longer used on home, kept for reference) */
/* ═══════════════════════════════════════════
   HERO — EDITORIAL SPECIMEN (legacy v2)
   ═══════════════════════════════════════════ */
.hero-ed {
  position: relative;
  padding: 9rem 0 var(--space-16);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 88% 15%, var(--rose-100) 0%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 8% 95%, var(--plum-50) 0%, transparent 70%),
    var(--cream-50);
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Top strap — editorial kicker */
.hero-ed__strap {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--container-padding);
  max-width: var(--container-xl);
  margin: 0 auto var(--space-12);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-heading-em);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  width: 100%;
}
.hero-ed__strap .dot-sep {
  color: var(--color-accent);
  opacity: 0.8;
}

/* Thin diagonal rule element behind the composition */
.hero-ed__rule {
  position: absolute;
  top: 22%;
  left: -5%;
  right: -5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rose-200) 30%,
    var(--plum-200) 70%,
    transparent 100%
  );
  transform: rotate(-2deg);
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}

.hero-ed__container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-ed__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "wordmark"
    "specimen"
    "index"
    "caption"
    "ctas"
    "tags";
  gap: var(--space-6);
  align-items: start;
}

/* ── WORDMARK — the hero ── */
.hero-ed__wordmark {
  grid-area: wordmark;
  position: relative;
  line-height: 1;
}
.hero-ed__word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(5.5rem, 17vw, 15rem);
  letter-spacing: -0.045em;
  color: var(--color-heading);
  line-height: 1;
  margin: 0;
  padding-bottom: 0.22em; /* clearance for the italic 'y' descender */
  position: relative;
  z-index: 3;
}
.hero-ed__letter-e {
  color: var(--color-heading-em);
  font-style: italic;
}

.hero-ed__word-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  padding-left: 0.18em;
}
.hero-ed__word-sub {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-heading-em);
  padding: 3px 10px;
  background: var(--rose-50);
  border-radius: var(--radius-full);
}
.hero-ed__word-zh {
  font-family: var(--font-display-zh);
  font-size: 0.9375rem;
  color: var(--color-heading-em);
  letter-spacing: 0.18em;
  font-weight: 500;
}

/* ── EYE SPECIMEN (line-art figure) ── */
.hero-ed__specimen {
  grid-area: specimen;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-heading-em);
  max-width: 360px;
  margin: 0 auto;
}
.hero-ed__specimen svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px hsla(208, 22%, 25%, 0.06));
}
.hero-ed__specimen-caption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-heading-em);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding-top: var(--space-2);
  border-top: 1px solid var(--mist-200);
}
.hero-ed__specimen-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-heading-em);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* ── SERVICE INDEX (annotated marginalia) ── */
.hero-ed__index {
  grid-area: index;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--mist-200);
  border-bottom: 1px solid var(--mist-200);
}
.hero-ed__index li {
  display: block;
}
.hero-ed__index li + li {
  border-top: 1px solid var(--mist-200);
}
.hero-ed__index a {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              padding var(--duration-fast) var(--ease-default);
}
.hero-ed__index a:hover {
  background: var(--rose-50);
  padding-left: var(--space-4);
  color: var(--color-heading);
}
.hero-ed__index .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1;
  align-self: center;
}
.hero-ed__index .name {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-heading);
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hero-ed__index .name em {
  font-family: var(--font-display-zh);
  font-style: normal;
  font-size: 0.78em;
  color: var(--color-heading-em);
  letter-spacing: 0.12em;
  font-weight: 400;
  margin-left: 0;
}
.hero-ed__index .price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-heading-em);
  white-space: nowrap;
  letter-spacing: 0;
}

.hero-ed__index .is-signature a {
  background: linear-gradient(to right, var(--rose-50) 0%, transparent 70%);
  border-left: 2px solid var(--rose-400);
}
.hero-ed__index .is-signature .num,
.hero-ed__index .is-signature .price {
  color: var(--color-heading-em);
}

/* ── CAPTION ── */
.hero-ed__caption {
  grid-area: caption;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-heading);
  letter-spacing: -0.005em;
  max-width: 34ch;
  padding-left: var(--space-4);
  border-left: 2px solid var(--rose-400);
}
.hero-ed__caption em {
  color: var(--color-heading-em);
  font-style: italic;
}

/* ── CTAS ── */
.hero-ed__ctas {
  grid-area: ctas;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ── BOTTOM TAG STRIP ── */
.hero-ed__tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-6);
  margin-top: var(--space-4);
  border-top: 1px dashed var(--mist-200);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-heading-em);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.hero-ed__tags .dot-sep {
  color: var(--color-accent);
  opacity: 0.7;
}

/* ── Desktop layout ── */
@media (min-width: 900px) {
  .hero-ed {
    padding: 7rem 0 var(--space-12);
  }
  .hero-ed__grid {
    grid-template-columns: 1.35fr 0.65fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "wordmark  specimen"
      "wordmark  index"
      "caption   index"
      "ctas      tags";
    gap: var(--space-4) var(--space-10);
    align-items: start;
  }
  .hero-ed__wordmark {
    align-self: end;
  }
  .hero-ed__specimen {
    margin: 0;
    max-width: 280px;
    padding-top: 0;
    transform: rotate(-2deg);
    transform-origin: center;
    justify-self: end;
  }
  .hero-ed__specimen svg { max-width: 260px; }
  .hero-ed__index {
    margin-top: var(--space-4);
  }
  .hero-ed__caption {
    margin-top: var(--space-8);
  }
  .hero-ed__ctas {
    align-self: end;
    padding-top: var(--space-6);
  }
  .hero-ed__tags {
    justify-content: flex-end;
    border-top: 1px dashed var(--mist-200);
    padding-top: var(--space-6);
    margin-top: var(--space-8);
  }
}

@media (min-width: 1200px) {
  .hero-ed__grid {
    grid-template-columns: 1.5fr 0.55fr;
  }
  .hero-ed__word {
    font-size: clamp(9rem, 15vw, 17rem);
  }
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-20);
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: hsla(54, 22%, 98%, 0.85);
  border: 1px solid var(--rose-100);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-heading-em);
}
.hero__eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--rose-400);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.hero__title {
  margin-top: var(--space-5);
  font-size: var(--text-6xl);
  color: var(--color-heading);
}
.hero__title em {
  color: var(--color-heading-em);
  font-weight: var(--weight-regular);
}

.hero__lead {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-text-soft);
  max-width: 42ch;
}

.hero__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.hero__trust {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rose-100);
}
.hero__trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__trust-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-heading);
  line-height: 1;
}
.hero__trust-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Hero visual — editorial macro panel */
.hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  min-height: 360px;
  margin: 0 auto;
}

.hero__card {
  position: absolute;
  background: var(--cream-0);
  border: 1px solid var(--rose-100);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
}

.hero__card--main {
  inset: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(150deg, var(--plum-500), var(--plum-600));
  color: var(--color-text-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-8);
  border: none;
}
.hero__card--main::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 15%, hsla(252, 18%, 65%, 0.32) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, hsla(208, 22%, 45%, 0.2) 0%, transparent 45%);
}
/* SVG eye mark at top of card */
.hero__eye-mark {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  right: var(--space-8);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: hsla(0, 0%, 100%, 0.85);
}
.hero__eye-mark svg { width: 36px; height: 36px; }
.hero__eye-mark .tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.hero__card--main::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero__card--main .inner {
  position: relative;
  z-index: 2;
}
.hero__card--main h3 {
  color: var(--color-text-on-dark);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}
.hero__card--main h3 em { color: var(--rose-300); font-style: italic; }
.hero__card--main p {
  color: hsla(0, 0%, 100%, 0.75);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.hero__card--price {
  top: var(--space-8);
  right: calc(-1 * var(--space-4));
  padding: var(--space-5) var(--space-6);
  text-align: center;
  border-radius: var(--radius-2xl);
  background: var(--rose-400);
  color: var(--color-heading);
  border: none;
  transform: rotate(4deg);
}
.hero__card--price .label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  opacity: 0.75;
}
.hero__card--price .price {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-style: italic;
  line-height: 1;
  margin-top: 2px;
  font-weight: 500;
}
.hero__card--price .strike {
  font-size: var(--text-xs);
  text-decoration: line-through;
  opacity: 0.6;
  margin-top: var(--space-1);
}

.hero__card--chip {
  bottom: calc(-1 * var(--space-4));
  left: calc(-1 * var(--space-6));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  transform: rotate(-3deg);
}
.hero__card--chip .stars {
  color: var(--color-heading-em);
  letter-spacing: 0.08em;
  font-size: var(--text-base);
}
.hero__card--chip .label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   MARQUEE / CREDENTIAL STRIP
   ═══════════════════════════════════════════ */
.marquee {
  padding: var(--space-8) 0;
  /* Brand slate anchor (#7698b1) — turns the credential strip into a
     deliberate brand band between the cream hero and the cream pillars
     section, rather than a slightly-off cream tone. Anchor-on-anchor,
     no derived shades. */
  background: var(--color-primary);
  /* Soft white hairlines top + bottom to give the band a clean edge
     against the cream sections above and below — alpha-of-white, a
     permitted derivative on a brand-anchor surface. */
  border-top: 1px solid hsla(0, 0%, 100%, 0.10);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.10);
  overflow: hidden;
}
.marquee__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--text-sm);
  /* White @ 88% — strong contrast on the slate band for the credential
     copy. White-on-anchor is a permitted alpha-of-white derivative. */
  color: hsla(0, 0%, 100%, 0.88);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.marquee__row span { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Icons in the lavender anchor — gentle cool accent against the slate band. */
.marquee__row svg { color: var(--color-accent); }

/* ═══════════════════════════════════════════
   PILLAR CARD (4 services overview)
   ═══════════════════════════════════════════ */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pillar-grid { grid-template-columns: repeat(4, 1fr); }
}

.pillar {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 2;
  background: var(--pillar-accent, var(--rose-400));
  transform-origin: left;
  transform: scaleX(0.2);
  transition: transform var(--duration-slow) var(--ease-out);
}

.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--pillar-accent, var(--rose-400));
  box-shadow: var(--shadow-lg);
  color: inherit;
}
.pillar:hover::before { transform: scaleX(1); }

.pillar--lashes { --pillar-accent: var(--rose-400); }
.pillar--brows  { --pillar-accent: var(--rose-500); }
.pillar--bojin  { --pillar-accent: var(--jade-500); }
.pillar--nails  { --pillar-accent: var(--plum-400); }

.pillar__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-100);
}

/* Real photography — primary visual for each pillar */
.pillar__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  transition: transform 900ms var(--ease-out),
              filter 600ms var(--ease-out);
  filter: saturate(0.92) contrast(0.98);
}
/* Lashes + SPM (legacy class --brows): anchor lower so the face/treatment area shows, not the top of the head. */
.pillar--lashes .pillar__photo,
.pillar--brows  .pillar__photo {
  object-position: center 75%;
}
.pillar:hover .pillar__photo {
  transform: scale(1.04);
  filter: saturate(1.02) contrast(1);
}

/* Story visual — real studio photo fills the frame */
.story-visual__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.story-visual:has(.story-visual__photo) {
  background: var(--cream-100);
}

/* Journal article feature photo */
.article-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.article-card:hover .article-card__photo {
  transform: scale(1.03);
}
.article-card__media {
  position: relative;
  overflow: hidden;
}

/* CSS-only fallback illustrations (replaceable with real photography) */
.pillar__art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pillar-accent, var(--rose-400));
}
.pillar__art svg { width: 64%; height: 64%; }

.pillar__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, hsla(252, 18%, 90%, 0.9) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, hsla(208, 20%, 90%, 0.7) 0%, transparent 55%),
    var(--cream-50);
  z-index: 0;
}
.pillar__media .pillar__art { z-index: 1; }

.pillar--bojin .pillar__media::before {
  background:
    radial-gradient(circle at 30% 30%, hsla(208, 20%, 85%, 0.95) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, hsla(0, 0%, 100%, 0.9) 0%, transparent 55%),
    var(--jade-50);
}

.pillar__body {
  /* Asymmetric padding: extra clearance at the bottom so the italic
     price line never collides with the card's rounded corner */
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pillar__title {
  font-size: var(--text-xl);
  color: var(--color-heading);
}

.pillar__zh {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: var(--font-display-zh);
  font-size: var(--text-base);
  color: var(--color-heading-em);
  letter-spacing: 0.04em;
}

.pillar__desc {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.pillar__from {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.pillar__from strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-heading-em);
  letter-spacing: 0;
  text-transform: none;
}

/* ═══════════════════════════════════════════
   TREATMENT MENU (services / bo jin)
   ═══════════════════════════════════════════ */
/* MENU ZONE
   Every menu-section sits on a continuous cream-0 lifted deck that
   starts at the sticky filter bar above and ends at the CTA banner
   below. Horizontal padding on the section gives the card breathing
   room from the screen edge on mobile; vertical padding controls
   inter-card spacing. */
.menu-section {
  background: var(--cream-0);
  padding: var(--space-8) var(--container-padding);
}
/* First menu-section sits flush against the filter bar (no extra top
   gap — the filter bar already provides breathing room). */
.subcat-sticky + .menu-section { padding-top: var(--space-10); }
/* Last menu-section adds a bit of extra room before the CTA banner. */
.menu-section:last-of-type { padding-bottom: var(--space-14); }

/* Inset card — each treatment group is a cream-50 panel carved into
   the cream-0 deck. The card returns to the page's anchor colour,
   creating a visual rhyme with the hero above (hero text floats on
   cream-50; menu cards repeat that same surface as anchor panels). */
.menu-section > .container {
  background: var(--cream-50);
  border-radius: var(--radius-3xl);
  padding: var(--space-10) var(--space-8) var(--space-12);
  border: 1px solid hsla(327, 10%, 18%, 0.05);      /* ink @ 5% hairline */
  box-shadow: 0 1px 2px hsla(327, 10%, 18%, 0.03);  /* near-invisible drop */
}
@media (max-width: 640px) {
  /* Tighten horizontal padding on narrow screens so the price-row
     content doesn't crowd the card edges. */
  .menu-section > .container {
    padding: var(--space-8) var(--space-5) var(--space-10);
    border-radius: var(--radius-2xl);
  }
}

/* ═══════════════════════════════════════════
   FEATURED LASH SHOWCASE — Zero-Sensation Ultra-Lock
   A premium "spotlight" block at the top of the lashes
   menu. Two-column desktop layout (copy + media); stacks
   on mobile. The media side combines a vertical product
   video with two landscape before/after photos arranged
   as an editorial collage.
   ═══════════════════════════════════════════ */
.featured-lash {
  padding: var(--space-12) 0 var(--space-16);
  background: var(--cream-0);
  /* Soft lavender hairline top + bottom signals "this is a different
     surface" against the surrounding cream. Anchor-of-anchor alpha. */
  border-top: 1px solid hsla(251, 13%, 82%, 0.55);
  border-bottom: 1px solid hsla(251, 13%, 82%, 0.55);
}
.featured-lash__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 880px) {
  .featured-lash__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-12);
  }
}

/* ── Copy column ────────────────────────── */
.featured-lash__eyebrow {
  color: var(--color-cta-secondary);   /* mauve anchor — "new" badge weight */
  margin-bottom: var(--space-5);
}
.featured-lash__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}
.featured-lash__title em {
  color: var(--color-heading-em);      /* slate anchor accent on "Ultra-Lock" */
  font-style: italic;
  font-weight: 400;
}
.featured-lash__lead {
  font-size: var(--text-lg);
  color: var(--color-text-soft);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
  margin: var(--space-4) 0 var(--space-8);
}

.featured-lash__features {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 540px) {
  .featured-lash__features { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); }
}
.featured-lash__features li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-4);
  border-left: 2px solid hsla(207, 27%, 58%, 0.5);   /* slate alpha — feature-tick rail */
}
.featured-lash__features strong {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  letter-spacing: -0.005em;
}
.featured-lash__features span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* ── CTA row ─────────────────────────────── */
.featured-lash__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.featured-lash__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.featured-lash__price-strike {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-style: italic;
}
.featured-lash__price-trial {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: var(--weight-medium);
  color: var(--color-heading-em);      /* slate accent — trial price hero */
  letter-spacing: -0.01em;
  line-height: 1;
}
.featured-lash__price-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── Media column ────────────────────────── */
.featured-lash__media {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-3);
  grid-template-areas:
    "video photo-top"
    "video photo-bot";
}
@media (max-width: 540px) {
  .featured-lash__media {
    grid-template-columns: 1fr;
    grid-template-areas:
      "video"
      "photo-top"
      "photo-bot";
  }
}

.featured-lash__video {
  grid-area: video;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-bg-dark);
  box-shadow: 0 18px 40px hsla(327, 10%, 18%, 0.14);
}
.featured-lash__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-lash__photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 28px hsla(327, 10%, 18%, 0.10);
  background: var(--cream-50);
}
.featured-lash__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.featured-lash__photo--top { grid-area: photo-top; }
.featured-lash__photo--bottom { grid-area: photo-bot; }

/* ── "Read full breakdown" link below ────── */
.featured-lash__more {
  display: block;
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid hsla(207, 27%, 58%, 0.35);
  padding-bottom: 2px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}
.featured-lash__more:hover {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary);
}

/* Respect reduced-motion: pause the auto-playing video. */
@media (prefers-reduced-motion: reduce) {
  .featured-lash__video video { animation: none; }
}

/* Soft footer line inside a menu card — used for things like the brow
   consultation CTA on the SPM page. Sits below the price-table, centered,
   tonally quiet so it reads as a closing invitation rather than a banner.
   Override the global `p { max-width: 62ch }` so the line spans the full
   card width and text-align: center actually visually centers within the
   card — without this, the 62ch cap collapses the p toward the left edge. */
.menu-section__consult {
  margin: var(--space-8) auto 0;
  max-width: none;
  text-align: center;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-soft);
}
.menu-section__consult a {
  color: var(--color-primary);   /* slate anchor */
  text-decoration: none;
  font-style: normal;
  font-weight: var(--weight-medium);
  border-bottom: 1px solid hsla(207, 27%, 58%, 0.35);
  transition: border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
  /* Inline-flex so an optional leading icon (e.g. Instagram) sits on
     the baseline next to the text rather than stacking above it. */
  display: inline;
}
.menu-section__consult a:hover {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary);
}
.menu-section__consult-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;       /* settle the icon onto the text baseline */
  margin-right: 0.4em;
  stroke-width: 1.8;
}

.menu-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-8) 0 var(--space-10);
  border-bottom: 1px solid var(--color-border-strong);
  align-items: start;
}

/* Tag is the PRIMARY identifier: customers scan "Classic Lashes" /
   "Pedicure" / "Brow Embroidery" before they read the editorial tagline.
   Display-serif, sentence case, big and centered visually. */
.menu-head__tag {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--color-heading);
  padding: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-transform: none;
  margin-bottom: var(--space-3);
}
.menu-head__tag [lang="zh"] {
  font-family: var(--font-display-zh);
}
/* The em accent inside the tag carries the slate-italic brand emphasis —
   e.g. "Classic Lashes" → the word "Classic" gets the slate accent. */
.menu-head__tag em {
  color: var(--color-heading-em);   /* slate anchor */
  font-style: italic;
  font-weight: var(--weight-regular);
}

/* The editorial subline (was the H2) is the SECONDARY layer — a quiet
   tagline that adds meaning, not the headline itself. Sits below the
   name at body-text size with italic emphasis so it reads as a caption,
   not a competing heading. */
.menu-head h2 {
  font-size: var(--text-lg);          /* steady 1.125rem — no clamp wobble */
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-style: italic;
  color: var(--color-text-soft);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  margin: 0;
}
/* No color accent on the h2 em anymore — the whole subline is one quiet
   italic phrase. Slate accent moved up to the title where the user
   actually scans it. */
.menu-head h2 em {
  color: inherit;
  font-style: italic;
  font-weight: var(--weight-medium);
}
.menu-head p {
  font-size: var(--text-sm);          /* 0.875rem — clearly tertiary copy */
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
  max-width: 58ch;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.menu-item:last-child { border-bottom: none; }

.menu-item--link {
  position: relative;
  display: grid;
}
.menu-item--link:hover {
  background-color: var(--rose-50);
  transform: translateX(4px);
  border-radius: var(--radius-lg);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
  border-bottom-color: transparent;
}

.menu-item__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-heading);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}

.menu-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.menu-item__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }

.menu-item__desc {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  max-width: 56ch;
  grid-column: 1;
}

.menu-item__price {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-style: italic;
  color: var(--color-heading-em);
  white-space: nowrap;
  line-height: 1;
  font-weight: 500;
  /* Anchor both the price digits and the SIGNATURE/FROM caption to the
     same right edge — otherwise wider captions widen the block and pull
     the price text leftwards relative to other rows. */
  text-align: right;
}

.menu-item__price small {
  display: block;
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-top: 4px;
  text-align: right;
  font-family: var(--font-body);
}

/* Promo pricing — trial price dominates, usual sits small + struck through above */
.promo-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.promo-price__usual {
  font-size: var(--text-base);
  font-style: normal;
  font-family: var(--font-body);
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.promo-price__usual-amount {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-text);
}
.promo-price__usual small {
  display: inline;
  margin: 0 0 0 4px;
  color: var(--color-text);
}
.promo-price__trial {
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-style: italic;
  font-family: var(--font-display);
  color: var(--color-heading-em);
  font-weight: 500;
  line-height: 1;
  margin-top: var(--space-1);
}

.menu-item--signature {
  background: linear-gradient(
    to right,
    var(--rose-50) 0%,
    transparent 60%
  );
  margin: 0 calc(-1 * var(--space-6));
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  border-radius: var(--radius-xl);
  border-bottom: 1px solid var(--color-border);
}

.menu-item--signature .menu-item__name::after {
  content: 'Signature';
  display: inline-block;
  margin-left: var(--space-3);
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  background: var(--rose-400);
  color: var(--color-heading);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

/* ═══════════════════════════════════════════
   SIGNATURE OFFER CARD
   ═══════════════════════════════════════════ */
.offer-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-10);
  background: linear-gradient(145deg, var(--plum-500) 0%, var(--plum-600) 100%);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-3xl);
  position: relative;
  overflow: hidden;
}

.offer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, hsla(252, 18%, 65%, 0.28) 0%, transparent 40%),
    radial-gradient(circle at 10% 90%, hsla(208, 22%, 45%, 0.2) 0%, transparent 45%);
  pointer-events: none;
}

@media (min-width: 820px) {
  .offer-card {
    grid-template-columns: 1.3fr 1fr;
    padding: var(--space-16);
    align-items: center;
  }
}

.offer-card > * { position: relative; z-index: 2; }
.offer-card h2 { color: var(--color-text-on-dark); font-size: var(--text-4xl); }
.offer-card h2 em { color: var(--rose-300); font-weight: var(--weight-regular); }
.offer-card p { color: hsla(0, 0%, 100%, 0.8); }

.offer-card__price-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: hsla(0, 0%, 100%, 0.08);
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(8px);
  align-items: center;
  text-align: center;
}
.offer-card__price-col .kicker {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--rose-300);
}
.offer-card__price-col .big {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6rem);
  font-style: italic;
  color: var(--rose-300);
  line-height: 0.95;
  font-weight: 500;
}
.offer-card__price-col .was {
  color: hsla(0, 0%, 100%, 0.55);
  text-decoration: line-through;
  font-size: var(--text-sm);
}

.offer-card__benefits {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.offer-card__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: hsla(0, 0%, 100%, 0.9);
  font-size: var(--text-sm);
}
.offer-card__benefits li svg {
  flex-shrink: 0;
  color: var(--rose-300);
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════
   STORY / APPROACH SPLIT
   ═══════════════════════════════════════════ */
.story-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: linear-gradient(160deg, var(--rose-200), var(--plum-400));
}

.story-visual__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, hsla(252, 18%, 75%, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, hsla(208, 22%, 25%, 0.3) 0%, transparent 50%);
}

.story-visual__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
  opacity: 0.12;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════
   RESULT GALLERY — Ken Burns crossfade slideshow
   Reads like a slow cinematic edit: 8 client photos
   crossfade through a single framed window, each
   getting a subtle scale + drift (Ken Burns) while
   visible. Pure CSS — no JS. The `--i` index on
   each <img> shifts that slide's animation-delay
   so they cycle through one at a time.
   ═══════════════════════════════════════════ */
.result-gallery {
  padding: var(--section-padding) 0;
}
.result-gallery__head {
  text-align: center;
  max-width: var(--container-md);
  margin: 0 auto var(--space-10);
}
.result-gallery__frame {
  position: relative;
  width: min(94%, 1100px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  /* Dark surround so any letterboxing between portrait images and the
     16/9 frame reads as a cinema cabinet rather than a white gap.
     Ink anchor, brand-compliant. */
  background: var(--color-bg-dark);
  /* Soft anchor-tinted lift so the gallery floats off the cream zone. */
  box-shadow: 0 24px 60px hsla(327, 10%, 18%, 0.18);
  isolation: isolate;
}
.result-gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  /* Two animations on each slide:
       1. result-gallery-fade   — opacity dissolve, shared by all slides
       2. result-gallery-pan-N  — unique pan direction per slide (set via
          :nth-child below), so the cinematic drift never repeats
          back-to-back.
     Both run the same 40s loop with the same staggered delay so they
     stay in sync per slide. */
  animation:
    result-gallery-fade 40s linear infinite,
    result-gallery-pan-1 40s ease-out infinite;
  animation-delay: calc(var(--i, 0) * -5s), calc(var(--i, 0) * -5s);
  will-change: opacity, transform;
}

/* Per-slide pan-direction assignment. Each slide gets its own keyframe
   name so the drift differs every time — no two consecutive slides
   pan in the same direction. */
.result-gallery__slide:nth-child(1) { animation-name: result-gallery-fade, result-gallery-pan-1; }
.result-gallery__slide:nth-child(2) { animation-name: result-gallery-fade, result-gallery-pan-2; }
.result-gallery__slide:nth-child(3) { animation-name: result-gallery-fade, result-gallery-pan-3; }
.result-gallery__slide:nth-child(4) { animation-name: result-gallery-fade, result-gallery-pan-4; }
.result-gallery__slide:nth-child(5) { animation-name: result-gallery-fade, result-gallery-pan-5; }
.result-gallery__slide:nth-child(6) { animation-name: result-gallery-fade, result-gallery-pan-6; }
.result-gallery__slide:nth-child(7) { animation-name: result-gallery-fade, result-gallery-pan-7; }
.result-gallery__slide:nth-child(8) { animation-name: result-gallery-fade, result-gallery-pan-8; }

/* Per-slide object-position overrides — biases the cover-fit visible
   window so the eye sits where it should in the gallery frame. Without
   these, cover-fit centers the image and the eye can drift below the
   horizontal axis on portrait/squarish sources. */
.result-gallery__slide:nth-child(7) { object-position: 50% 75%; }   /* slight bottom bias — eye sits above the horizontal midline without flying to the very top */

/* Opacity dissolve — same for every slide. With 8 slides on a 5s stagger
   (= 12.5% of the 40s cycle), the fade-out window (12.5% → 20%) fully
   overlaps the next slide's fade-in (0% → 6%) — giving a long, true
   crossfade of ≈2.4s instead of a quick swap. */
@keyframes result-gallery-fade {
  0%    { opacity: 0; }
  6%    { opacity: 1; }       /* fade-in done at 2.4s */
  12.5% { opacity: 1; }       /* solo visible 6% → 12.5% (≈2.6s) */
  20%   { opacity: 0; }       /* fade-out done at 8s */
  100%  { opacity: 0; }       /* dormant for the rest of the loop */
}

/* Pan keyframes — one per slide. Transform runs from a "start" pose
   at 0% to an "end" pose at 20%, then holds at end for the rest of
   the loop (slide is invisible during the hold so the held value
   doesn't matter visually). ease-out timing makes the drift slow
   gracefully toward the end of its visible window.
   Scale range stays very tight (1.00 → 1.05 at the peak) so the
   image starts at its natural cover-fit and only nudges slightly,
   rather than feeling permanently zoomed in. Translation values
   are ≤1.5% so the pan is felt, not seen as motion. */
@keyframes result-gallery-pan-1 {  /* gentle zoom in + drift up-right */
  0%   { transform: scale(1.00) translate(0, 0); }
  20%  { transform: scale(1.05) translate(1%, -0.8%); }
  100% { transform: scale(1.05) translate(1%, -0.8%); }
}
@keyframes result-gallery-pan-2 {  /* slight zoom out + drift left */
  0%   { transform: scale(1.05) translate(1%, 0); }
  20%  { transform: scale(1.01) translate(-0.5%, 0); }
  100% { transform: scale(1.01) translate(-0.5%, 0); }
}
@keyframes result-gallery-pan-3 {  /* diagonal up-left drift */
  0%   { transform: scale(1.02) translate(1%, 0.8%); }
  20%  { transform: scale(1.05) translate(-1%, -0.6%); }
  100% { transform: scale(1.05) translate(-1%, -0.6%); }
}
@keyframes result-gallery-pan-4 {  /* diagonal up-right + zoom in */
  0%   { transform: scale(1.00) translate(-1%, 0.8%); }
  20%  { transform: scale(1.05) translate(1%, -0.8%); }
  100% { transform: scale(1.05) translate(1%, -0.8%); }
}
@keyframes result-gallery-pan-5 {  /* horizontal pan right (landscape eye) */
  0%   { transform: scale(1.02) translate(-1%, 0); }
  20%  { transform: scale(1.05) translate(1%, 0.3%); }
  100% { transform: scale(1.05) translate(1%, 0.3%); }
}
@keyframes result-gallery-pan-6 {  /* vertical drift up + zoom in */
  0%   { transform: scale(1.00) translate(0, 0.8%); }
  20%  { transform: scale(1.05) translate(0, -0.8%); }
  100% { transform: scale(1.05) translate(0, -0.8%); }
}
@keyframes result-gallery-pan-7 {  /* pan left + zoom in */
  0%   { transform: scale(1.00) translate(1%, -0.5%); }
  20%  { transform: scale(1.05) translate(-1%, 0.5%); }
  100% { transform: scale(1.05) translate(-1%, 0.5%); }
}
@keyframes result-gallery-pan-8 {  /* slight zoom out from a tight close */
  0%   { transform: scale(1.06) translate(0.5%, -0.5%); }
  20%  { transform: scale(1.01) translate(-0.5%, 0.5%); }
  100% { transform: scale(1.01) translate(-0.5%, 0.5%); }
}

/* Respect prefers-reduced-motion — show the first slide statically. */
@media (prefers-reduced-motion: reduce) {
  .result-gallery__slide { animation: none; opacity: 0; }
  .result-gallery__slide:first-child { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .result-gallery__frame {
    /* Taller frame on mobile so the portrait shots (most of the set)
       show the face area more generously. */
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-2xl);
  }
}

.story-visual__eye {
  position: absolute;
  inset: 12% 8% 32% 8%;
  color: hsla(0, 0%, 100%, 0.85);
}
.story-visual__eye svg { width: 100%; height: 100%; }

.story-visual__chip {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  right: var(--space-6);
  padding: var(--space-5);
  background: hsla(54, 22%, 98%, 0.94);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-xl);
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
.story-visual__chip svg {
  width: 40px; height: 40px;
  color: var(--color-heading-em);
  flex-shrink: 0;
}
.story-visual__chip strong {
  display: block;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.story-visual__chip span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

.story__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-10);
}
@media (min-width: 640px) {
  .story__list { grid-template-columns: repeat(2, 1fr); }
}

.story__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.story__item svg {
  width: 22px;
  height: 22px;
  color: var(--color-heading-em);
  flex-shrink: 0;
  margin-top: 4px;
}
.story__item h3, .story__item h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-heading);
  letter-spacing: 0;
}
.story__item p {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════ */
.testimonial {
  padding: var(--space-8);
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial__stars {
  color: var(--color-heading-em);
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  letter-spacing: var(--tracking-tight);
  flex: 1;
  font-weight: 500;
}

.testimonial__quote::before {
  content: '"';
  font-size: 2.5em;
  line-height: 0.4;
  color: var(--rose-300);
  margin-right: 4px;
  vertical-align: -0.3em;
}

.testimonial__author {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* Fallback fill when there's no <img> child — slate→lavender anchor
     gradient instead of the legacy rose/plum derivatives. */
  background: linear-gradient(145deg, var(--color-primary), var(--color-accent));
  color: var(--color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial__name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-heading);
}
.testimonial__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Review source badge */
.testimonial__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Long-form review card (reviews page) */
.review-long {
  padding: var(--space-10);
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .review-long { grid-template-columns: auto 1fr; gap: var(--space-10); }
}
.review-long__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* Fallback fill when there's no <img> child — slate→lavender anchor
     gradient instead of legacy rose/plum derivatives. */
  background: linear-gradient(150deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-dark);
  font-family: var(--font-display);
  font-size: 3rem;
  font-style: italic;
  flex-shrink: 0;
  font-weight: 500;
  overflow: hidden;
}
.review-long__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
img.review-long__photo {
  object-fit: cover;
  object-position: center;
}
.review-long__body blockquote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-heading);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-5);
}
.review-long__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  align-items: center;
}
.review-long__name {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}
.review-long__stars {
  color: var(--color-heading-em);
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════
   LOCATION / VISIT CARD
   ═══════════════════════════════════════════ */

/* Wrap multiple visit cards inside a single section so they stack with
   a tight rhythm instead of taking two full section paddings between them. */
.visit-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.visit {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-10);
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
}

/* Branch card uses the same elevated surface as the main card so both
   visit blocks read as a matched pair. The "Branch · Bugis" pill label
   already differentiates the card visually — no need for a bg shift. */
.visit--branch {
  background: var(--cream-0);
}
@media (min-width: 900px) {
  .visit {
    grid-template-columns: 1.1fr 1fr;
    padding: var(--space-12);
    gap: var(--space-12);
  }
}

.visit__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.visit__branch-label {
  display: inline-block;
  padding: 2px 10px;
  background: var(--plum-500);
  color: var(--color-text-on-dark);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
  width: fit-content;
}
.visit__branch-label--branch {
  background: var(--rose-400);
  color: var(--color-heading);
}

.visit__row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.visit__row svg {
  width: 22px;
  height: 22px;
  color: var(--color-heading-em);
  flex-shrink: 0;
  margin-top: 2px;
}
.visit__row h3, .visit__row h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.visit__row p {
  color: var(--color-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  max-width: 36ch;
}
.visit__row a:hover { color: var(--color-heading-em); }

.visit__map {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 40% 30%, var(--rose-100) 0%, transparent 45%),
    radial-gradient(circle at 70% 70%, var(--plum-100) 0%, transparent 50%),
    var(--cream-50);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-heading);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.visit__map:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.visit__map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsla(208, 22%, 25%, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsla(208, 22%, 25%, 0.08) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
}
.visit__map-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.visit__map-pin {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rose-400);
  color: var(--color-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px hsla(252, 18%, 55%, 0.35);
  margin-bottom: var(--space-2);
  position: relative;
}
.visit__map-pin::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--rose-400);
  opacity: 0.4;
  animation: pulse 2.5s ease-in-out infinite;
}
.visit__map-pin svg { width: 26px; height: 26px; }
.visit__map-addr {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-heading);
  line-height: 1.2;
}
.visit__map-hint {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-heading-em);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Real Google Maps embed — sits in same slot as the placeholder
   .visit__map, but renders an iframe instead of the grid graphic.
   The "Open in Google Maps" pill floats bottom-right so the user
   can still hand off to the full app for directions. */
.visit__map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--cream-50);
}
.visit__map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.85) contrast(0.96);
}
.visit__map-link {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background: var(--cream-0);
  color: var(--color-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 6px 16px hsla(208, 22%, 25%, 0.18);
  transition: transform var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-default);
}
.visit__map-link:hover {
  transform: translateY(-2px);
  color: var(--color-heading-em);
}
.visit__map-link svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════ */
.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.faq__item { border-bottom: 1px solid var(--color-border); }

.faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-heading);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}

.faq__question .toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}
.faq__question .toggle svg {
  width: 14px;
  height: 14px;
  color: var(--color-heading-em);
  transition: transform var(--duration-fast) var(--ease-default);
}

.faq__item.open .faq__question .toggle {
  background: var(--plum-500);
  border-color: var(--color-heading-em);
}
.faq__item.open .faq__question .toggle svg {
  color: var(--color-text-on-dark);
  transform: rotate(180deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-in-out);
}
.faq__answer-inner {
  padding: 0 0 var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text-soft);
  max-width: 64ch;
  line-height: var(--leading-relaxed);
}
.faq__item.open .faq__answer { max-height: 600px; }

/* ═══════════════════════════════════════════
   ARTICLE PAGE (long-form journal post)
   ═══════════════════════════════════════════ */
.article {
  background: var(--cream-0);
  color: var(--ink-500);
}

.article__head {
  position: relative;
  padding: calc(var(--section-padding) + 4rem) 0 var(--space-12);
  background:
    radial-gradient(ellipse at top right, var(--rose-100) 0%, transparent 55%),
    var(--cream-50);
  text-align: center;
}
.article__head .container { max-width: var(--container-md); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-5);
}
.breadcrumb a {
  color: var(--color-text-soft);
  transition: color var(--duration-fast) var(--ease-default);
}
.breadcrumb a:hover { color: var(--color-heading-em); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb [aria-current] { color: var(--color-heading-em); }

.article__title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tightest);
  color: var(--color-heading);
  margin: var(--space-3) 0 var(--space-5);
  font-weight: var(--weight-medium);
}
.article__title em { color: var(--color-heading-em); font-weight: var(--weight-regular); }

.article__deck {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 56ch;
  margin: 0 auto;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}
.article__meta .author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}
.article__meta .author::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rose-300), var(--plum-400));
}
.article__meta .dot { color: var(--rose-300); }
.article__meta time { font-variant-numeric: tabular-nums; }

.article__hero {
  margin: 0;
  padding: 0;
}
.article__hero img {
  width: 100%;
  max-width: var(--container-2xl);
  margin: 0 auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article__hero figcaption {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-soft);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--container-padding);
  background: var(--cream-50);
}

/* Body — narrow column for comfortable long-read */
.article__body {
  padding: var(--section-padding) var(--container-padding);
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-500);
}
.article__body > * + * { margin-top: 1.25em; }

.article__body p { color: var(--ink-500); max-width: none; }
.article__body p strong { color: var(--color-heading); font-weight: 600; }
.article__body p em { font-style: italic; color: var(--ink-500); font-family: inherit; }

.article__body a {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-color: var(--rose-300);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.article__body a:hover {
  color: var(--color-heading-em);
  text-decoration-color: var(--color-heading-em);
}

.article__body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: var(--weight-medium);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: 2em 0 0.5em;
  scroll-margin-top: 100px;
}
.article__body h2 em { color: var(--color-heading-em); font-style: italic; font-weight: 400; }

.article__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: 1.6em 0 0.4em;
  scroll-margin-top: 100px;
}

.article__body ul,
.article__body ol {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}
.article__body ul li,
.article__body ol li {
  position: relative;
  padding-left: 1.6em;
  margin-top: 0.6em;
}
.article__body ul li::before {
  content: '';
  position: absolute;
  left: 0.4em;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-400);
}
.article__body ol { counter-reset: olstep; }
.article__body ol li::before {
  counter-increment: olstep;
  content: counter(olstep) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-heading-em);
  font-weight: 500;
}

.article__body blockquote {
  margin: 2em 0;
  padding: var(--space-6) var(--space-8);
  background: var(--cream-50);
  border-left: 3px solid var(--rose-400);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-heading);
  font-weight: 500;
}
.article__body blockquote p { color: inherit; }
.article__body blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-soft);
  letter-spacing: var(--tracking-wide);
}

.article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.9375rem;
  border: 1px solid var(--mist-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.article__body table th,
.article__body table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--mist-200);
}
.article__body table th {
  background: var(--cream-50);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  letter-spacing: var(--tracking-wide);
}
.article__body table tr:last-child td { border-bottom: none; }

/* Inline pull-quote / aside (for emphasis breaks) */
.article__body .pullquote {
  margin: 2.4em -1rem;
  padding: 0 var(--space-4);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  font-style: italic;
  color: var(--color-heading-em);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}

/* CTA box mid- or end-article */
.article__cta {
  max-width: 720px;
  margin: var(--space-12) auto;
  padding: var(--space-8) var(--space-7);
  background: linear-gradient(135deg, var(--plum-500), var(--plum-700));
  color: var(--color-text-on-dark);
  border-radius: var(--radius-2xl);
  text-align: center;
}
.article__cta-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--rose-300);
  margin-bottom: var(--space-3);
}
.article__cta h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}
.article__cta h3 em { color: var(--rose-300); font-style: italic; }
.article__cta p {
  color: hsla(0, 0%, 100%, 0.85);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 auto var(--space-6);
  max-width: 50ch;
}
.article__cta .btn { margin: 0 var(--space-1); }

/* Related articles strip */
.article__related {
  background: var(--cream-50);
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--mist-200);
}
.article__related h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  margin: 0 0 var(--space-10);
}
.article__related h2 em { color: var(--color-heading-em); font-style: italic; }

/* Bilingual block (ZH translation aside) */
.article__zh {
  margin: 2em 0;
  padding: var(--space-6) var(--space-7);
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mist-200);
  font-family: var(--font-body-zh);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text);
}
.article__zh::before {
  content: '中文';
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 2px 10px;
  background: var(--rose-50);
  color: var(--color-heading-em);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  border-radius: var(--radius-full);
}

@media (max-width: 720px) {
  .article__head { padding: 6.5rem var(--container-padding) var(--space-8); }
  .article__title { font-size: 1.875rem; }
  .article__body { padding: var(--space-12) var(--container-padding); font-size: 1rem; }
  .article__body h2 { font-size: 1.5rem; }
  .article__body h3 { font-size: 1.1875rem; }
  .article__body blockquote { padding: var(--space-5) var(--space-5); font-size: 1.0625rem; }
  .article__body .pullquote { font-size: 1.375rem; }
  .article__cta { padding: var(--space-7) var(--space-5); }
  .article__hero img { aspect-ratio: 4 / 3; }
}

/* ═══════════════════════════════════════════
   JOURNAL / BLOG
   ═══════════════════════════════════════════ */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.article-card:hover { color: inherit; }
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.article-card__media {
  aspect-ratio: 16 / 7;
  position: relative;
  background: linear-gradient(135deg, var(--rose-100), var(--plum-100));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-heading-em);
}
.article-card__media svg { width: 72px; height: 72px; opacity: 0.6; }

.article-card--jade .article-card__media {
  background: linear-gradient(135deg, var(--jade-100), var(--cream-50));
  color: var(--color-heading-em);
}

.article-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-card__tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-heading-em);              /* slate anchor */
  /* Lavender anchor @ 35% — soft tag pill bg, alpha-of-anchor derivative. */
  background: var(--color-accent-soft);
  border-radius: var(--radius-full);
  width: fit-content;
}
/* Variants — all use anchor-derived alpha bgs. */
.article-card__tag--jade { color: var(--color-heading); background: var(--color-primary-soft); }
.article-card__tag--plum { color: var(--color-heading-em); background: var(--color-primary-soft); }

.article-card__title {
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-heading);
  line-height: var(--leading-snug);
  font-weight: 500;
}
.article-card__excerpt {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  flex: 1;
}
.article-card__meta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}
.article-card__meta .read {
  color: var(--color-heading-em);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   JOURNAL FILTER CHIPS — scale to 50+ articles
   without a redesign. Future-compatible with
   landing-page conversion when count > 100.
   ═══════════════════════════════════════════ */
.journal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.journal-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.journal-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-heading);
}
.journal-chip.is-active {
  /* Active chip = slate anchor bg + white text (per nav-active goal rule). */
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-dark);
}
.journal-chip__count {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.journal-chip.is-active .journal-chip__count { opacity: 0.85; }
.journal-chip:empty,
.journal-chip__count:empty { display: none; }

/* [hidden] override — display:flex on .article-card and display:inline-flex on
   .journal-chip beat the browser's implicit [hidden] { display:none }. Restore. */
.article-card[hidden],
.journal-chip[hidden] { display: none !important; }

.article-card--feature {
  grid-column: 1 / -1;
}
/* Featured cards flip to horizontal (image-left / text-right) on tablet+, so
   they read like a magazine spread rather than a giant banner. */
@media (min-width: 640px) {
  .article-card--feature {
    display: grid;
    grid-template-columns: 5fr 6fr;
  }
  .article-card--feature .article-card__media {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .article-card--feature .article-card__body {
    padding: var(--space-6) var(--space-7);
    justify-content: center;
  }
  .article-card--feature .article-card__title {
    font-size: var(--text-2xl);
  }
  .article-card--feature .article-card__excerpt {
    font-size: var(--text-base);
    max-width: 52ch;
  }
}
@media (min-width: 1024px) {
  .article-card--feature .article-card__title { font-size: var(--text-3xl); }
}

/* ═══════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════ */
.cta-banner {
  position: relative;
  padding: var(--section-padding) 0;
  /* Slate anchor → ink anchor gradient = dark surface using only anchor colors. */
  background: linear-gradient(135deg, var(--color-primary), var(--color-bg-dark));
  color: var(--color-text-on-dark);  /* white on dark */
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, hsla(252, 18%, 65%, 0.24) 0%, transparent 45%),
    radial-gradient(circle at 15% 90%, hsla(208, 22%, 50%, 0.2) 0%, transparent 45%);
}
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
}
.cta-banner > .container { position: relative; z-index: 2; text-align: center; }
.cta-banner h2 { color: var(--color-text-on-dark); font-size: var(--text-5xl); }
.cta-banner h2 em { color: var(--color-accent); font-weight: var(--weight-regular); }  /* lavender anchor */
.cta-banner p {
  color: hsla(0, 0%, 100%, 0.8);  /* white @ 80% — body on dark */
  max-width: 52ch;
  margin: var(--space-4) auto 0;
  font-size: var(--text-lg);
}
.cta-banner__actions {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   COMPARISON MATRIX TABLE (journal posts)
   Forces fixed-layout table that fits any viewport width without
   horizontal scroll. Bilingual content can wrap inside each cell.
   ═══════════════════════════════════════════ */
.matrix {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 0.9rem;
  table-layout: fixed;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.matrix th,
.matrix td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--mauve-100);
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.matrix th {
  background: var(--cream-50);
  font-weight: var(--weight-semibold);
  color: var(--mauve-600);
}
@media (max-width: 640px) {
  .matrix { font-size: 0.8rem; }
  .matrix th, .matrix td { padding: var(--space-2) var(--space-2); }
}

/* ═══════════════════════════════════════════
   BOOKING / CONTACT FORM
   ═══════════════════════════════════════════ */
.book-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  background: var(--cream-0);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  font-family: inherit;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-heading-em);
  box-shadow: var(--shadow-glow-plum);
}
.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.form-consent input { margin-top: 4px; }

.form-alt {
  text-align: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}
.form-alt a {
  color: var(--color-heading-em);
  font-weight: var(--weight-semibold);
}
.form-alt a:hover { color: var(--color-heading-em); }

.form-status {
  display: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.form-status.success {
  display: block;
  background: hsla(142, 50%, 95%, 1);
  color: var(--color-success);
  border: 1px solid hsla(142, 50%, 80%, 1);
}
.form-status.error {
  display: block;
  background: hsla(0, 66%, 95%, 1);
  color: var(--color-error);
  border: 1px solid hsla(0, 66%, 85%, 1);
}

/* ═══════════════════════════════════════════
   FLOATING WHATSAPP BUTTON
   ═══════════════════════════════════════════ */
.float-whatsapp {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px hsla(140, 70%, 40%, 0.35);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.float-whatsapp:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 16px 40px hsla(140, 70%, 40%, 0.5);
  color: white;
}
.float-whatsapp svg { width: 28px; height: 28px; }
.float-whatsapp::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
  animation: whatsapp-ring 2s ease-in-out infinite;
}
@keyframes whatsapp-ring {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ═══════════════════════════════════════════
   PILLAR CARDS — services hub grid
   ═══════════════════════════════════════════ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}
@media (max-width: 760px) {
  .pillar-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.pillar-card {
  --pc-accent: var(--plum-500);
  --pc-accent-soft: var(--plum-50);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream-0);
  border: 1px solid hsla(208, 22%, 53%, 0.12);
  border-radius: var(--radius-2xl);
  text-decoration: none;
  color: var(--color-heading);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.pillar-card:hover,
.pillar-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px hsla(208, 22%, 18%, 0.12);
  border-color: var(--pc-accent);
  color: var(--color-heading);
  outline: none;
}

.pillar-card--lashes  { --pc-accent: var(--plum-500);  --pc-accent-soft: var(--plum-50); }
.pillar-card--nails   { --pc-accent: var(--rose-500);  --pc-accent-soft: var(--rose-50); }
.pillar-card--spm     { --pc-accent: var(--plum-600);  --pc-accent-soft: var(--cream-100); }
.pillar-card--hair    { --pc-accent: var(--rose-600);  --pc-accent-soft: var(--rose-100); }

/* Media banner — full-width photo across the top of the card */
.pillar-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--pc-accent-soft);
}
.pillar-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}
/* Lashes + SPM photos: anchor lower so the face/treatment area is in frame, not the top of the head. */
.pillar-card--lashes .pillar-card__photo,
.pillar-card--spm .pillar-card__photo {
  object-position: center 75%;
}
.pillar-card:hover .pillar-card__photo {
  transform: scale(1.04);
}
.pillar-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top, hsla(0, 0%, 0%, 0.18), transparent);
  pointer-events: none;
}

.pillar-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: var(--space-5) var(--space-6) var(--space-6);
}
.pillar-card__tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-1);
}
.pillar-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 500;
  color: var(--color-heading);
}
[lang="zh"] .pillar-card__title { font-family: var(--font-display-zh); }
.pillar-card__desc {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  line-height: 1.5;
  font-size: 0.875rem;
}
.pillar-card__price {
  font-weight: 600;
  color: var(--pc-accent);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.pillar-card__arrow {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--color-text-on-dark);
  background: hsla(0, 0%, 0%, 0.4);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  z-index: 2;
  transition: transform var(--duration-normal) var(--ease-out),
              background var(--duration-normal) var(--ease-out);
}
.pillar-card:hover .pillar-card__arrow {
  transform: translateX(4px);
  background: var(--pc-accent);
}

/* ═══════════════════════════════════════════
   VALUE BUNDLES — credit top-ups
   ═══════════════════════════════════════════ */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (max-width: 760px) {
  .bundle-grid { grid-template-columns: 1fr; }
}

.bundle-card {
  position: relative;
  padding: var(--space-7) var(--space-5);
  background: var(--cream-0);
  border: 1px solid hsla(208, 22%, 53%, 0.14);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.bundle-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-heading-em);
}
.bundle-card--featured {
  background: linear-gradient(160deg, var(--plum-500), var(--plum-600));
  color: var(--color-text-on-dark);
  border-color: transparent;
  transform: scale(1.04);
}
.bundle-card--featured:hover { transform: scale(1.04) translateY(-3px); }

.bundle-card__amount {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.bundle-card--featured .bundle-card__amount { color: var(--color-text-on-dark); }

.bundle-card__bonus {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-heading-em);
  margin-bottom: var(--space-3);
}
.bundle-card--featured .bundle-card__bonus { color: var(--color-text-on-dark); opacity: 0.95; }

.bundle-card__total {
  font-size: 0.85rem;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.bundle-card--featured .bundle-card__total { color: var(--color-text-on-dark); opacity: 0.78; }

.bundle-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rose-600);
  color: var(--color-text-on-dark);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.bundle-foot {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-text);
  font-size: 0.92rem;
  font-style: italic;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════
   PILLAR PAGE — sub-category sticky tabs
   Used on /services/lashes.html etc.
   ═══════════════════════════════════════════ */
.subcat-sticky {
  position: sticky;
  top: 64px;
  z-index: var(--z-sticky);
  /* Top of the menu zone — a lifted cream-0 deck that continues
     downward through every menu-section. The top hairline marks the
     transition from the hero (cream anchor) into the deck; no bottom
     border so the bar dissolves seamlessly into the cards below. */
  background: hsla(60, 16%, 94%, 0.94);              /* cream-0 @ alpha */
  backdrop-filter: blur(12px);
  border-top: 1px solid hsla(327, 10%, 18%, 0.06);   /* ink anchor @ 6% — zone transition */
  border-bottom: 0;
  padding: var(--space-3) 0;
}
.subcat-sticky nav {
  display: flex;
  flex-wrap: wrap;                                 /* never side-scroll on mobile */
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: 0 var(--space-2);
}
.subcat-sticky a {
  padding: 6px var(--space-4);
  border-radius: var(--radius-full);
  background: transparent;
  /* Slate anchor @ low alpha = subtle pill outline. */
  border: 1px solid hsla(207, 27%, 58%, 0.28);
  color: var(--color-heading);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.subcat-sticky a:hover,
.subcat-sticky a:focus-visible {
  /* Active pill = slate anchor bg + white text (nav-active rule per
     brand hierarchy: anchors carry interactive emphasis). */
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-dark);
  outline: none;
}

/* ═══════════════════════════════════════════
   PRICE TABLE — clean menu rows
   Used on pillar pages for compact price lists
   ═══════════════════════════════════════════ */
.price-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-5);
}
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px dashed hsla(208, 22%, 53%, 0.18);
}
.price-row:last-child { border-bottom: none; }
.price-row__name {
  font-weight: 500;
  color: var(--color-heading);
  font-size: 1rem;
  line-height: 1.4;
}
.price-row__sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text);
  margin-top: 2px;
  font-style: italic;
}
.price-row__value {
  font-weight: 600;
  color: var(--color-heading);
  font-size: 1.05rem;
  white-space: nowrap;
}
.price-row__value--free { color: hsla(140, 50%, 36%, 1); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }

/* Add-on grid — used in nails for the colourful add-ons */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.addon-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--cream-50);
  border: 1px solid hsla(208, 22%, 53%, 0.12);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}
.addon-pill__name { color: var(--color-heading); font-weight: 500; }
.addon-pill__price { color: var(--color-heading-em); font-weight: 600; }

/* Package deals card — for hair removal */
.deal-card {
  padding: var(--space-6);
  background: linear-gradient(135deg, hsla(252, 22%, 96%, 1), hsla(252, 18%, 92%, 1));
  border: 1px solid hsla(252, 22%, 70%, 0.3);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.deal-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--rose-500);
  color: var(--color-text-on-dark);
  border-radius: 50%;
}
.deal-card__icon svg { width: 22px; height: 22px; }
.deal-card__body strong {
  display: block;
  font-size: 1.1rem;
  color: var(--color-heading);
  margin-bottom: 2px;
}
.deal-card__body span { color: var(--color-text); font-size: 0.92rem; }

/* Mobile nav sub-link (indented under Services) */
.nav__mobile-link--sub {
  padding-left: var(--space-8) !important;
  font-size: 0.92em;
  opacity: 0.85;
}
.nav__mobile-link--sub .num {
  opacity: 0.4;
  font-size: 1.2em;
}

/* Active nav link */
.nav__link--active {
  color: var(--color-heading) !important;
  font-weight: 600;
}
.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--plum-500);
  border-radius: 2px;
}
.nav__link { position: relative; }

/* ═══════════════════════════════════════════
   TOP ANNOUNCEMENT BAR — dormant by default
   To activate: remove `hidden` from .top-bar element OR
   set `--top-bar-active: 1` and remove `hidden` attr.
   Use sparingly — only for time-sensitive sitewide messages.
   ═══════════════════════════════════════════ */
.top-bar {
  background: var(--plum-600);
  color: var(--color-text-on-dark);
  padding: 8px var(--space-4);
  font-size: 0.85rem;
  text-align: center;
  position: relative;
  z-index: var(--z-sticky);
}
.top-bar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.top-bar a:hover { opacity: 0.85; }
.top-bar__close {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  line-height: 0;
}
.top-bar__close:hover { opacity: 1; }

/* ═══════════════════════════════════════════
   WHAT'S ON THIS MONTH — homepage promo cards
   ═══════════════════════════════════════════ */
.whats-on-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (max-width: 880px) {
  .whats-on-grid { grid-template-columns: 1fr; }
}

/* Custom property — lets us animate a conic-gradient angle (rotating aurora). */
@property --whats-aurora-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Section-wide aurora — a single soft rotating halo BEHIND the three cards,
   not per-card. Keeps the cards themselves clean and uniform. */
.whats-on-grid {
  position: relative;
  isolation: isolate;
}
.whats-on-grid::before {
  content: '';
  position: absolute;
  inset: -60px;
  border-radius: var(--radius-3xl);
  /* Aurora halo runs on the mauve anchor (#7a6174 brand "dusty rose")
     for visibility on the cream page bg — lavender was disappearing
     into the light background. Blends to slate at the off-beats so it
     reads as warm-cool brand cycling, not solid mauve. Anchor-to-anchor
     gradient per brand hierarchy rule #4. */
  background: conic-gradient(
    from var(--whats-aurora-angle),
    var(--color-cta-secondary) 0%,
    var(--color-primary) 25%,
    var(--color-cta-secondary) 50%,
    var(--color-primary) 75%,
    var(--color-cta-secondary) 100%
  );
  filter: blur(80px);
  opacity: 0.28;
  z-index: -1;
  animation: whats-aurora-spin 20s linear infinite;
  pointer-events: none;
}

.whats-on-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: #fff;
  /* Static resting border = mauve anchor at low alpha (functional divider,
     alpha-of-anchor). Mauve is the brand "dusty rose" pinkish color
     (#7a6174) — visible against the cream bg unlike lavender. */
  border: 1px solid hsla(317, 11%, 43%, 0.30);
  border-radius: var(--radius-2xl);
  text-decoration: none;
  color: var(--color-heading);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

/* Rotating "comet" border — a bright spot travels around the card edge.
   conic-gradient with mostly transparent stops + a short bright arc, masked
   to a thin ring using the mask-composite: exclude trick.
   Bright arc = mauve anchor (#7a6174) — the brand "dusty rose" that actually
   shows on the cream page bg. Lavender was getting lost in the light. */
.whats-on-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--whats-aurora-angle),
    transparent 0deg,
    transparent 250deg,
    hsla(317, 11%, 43%, 0.45) 285deg,
    var(--color-cta-secondary) 320deg,
    hsla(317, 11%, 43%, 0.45) 345deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: whats-aurora-spin 6s linear infinite;
  pointer-events: none;
}

.whats-on-card:hover,
.whats-on-card:focus-visible {
  transform: translateY(-4px);
  /* Hover lift = mauve-anchor shadow tint, picks up the brand pink. */
  box-shadow: 0 18px 40px hsla(317, 11%, 43%, 0.18);
  outline: none;
}
/* Speed up the comet on hover for a small "responding to you" cue. */
.whats-on-card:hover::before,
.whats-on-card:focus-visible::before {
  animation-duration: 3s;
}

@keyframes whats-aurora-spin {
  to { --whats-aurora-angle: 360deg; }
}

/* Respect users who opted out of motion. */
@media (prefers-reduced-motion: reduce) {
  .whats-on-grid::before,
  .whats-on-card::before { animation: none; }
}

.whats-on-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.whats-on-card__tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-heading-em);
}
.whats-on-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.2;
}
[lang="zh"] .whats-on-card__title { font-family: var(--font-display-zh); }
.whats-on-card__desc {
  margin: 0;
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.55;
  flex: 1;
}
.whats-on-card .promo-price {
  align-self: flex-start;
  align-items: flex-start;
  margin-top: var(--space-3);
}
.whats-on-card .promo-price__usual { font-size: 0.85rem; }
.whats-on-card .promo-price__trial { font-size: clamp(2rem, 3vw, 2.5rem); }

.whats-on-foot {
  text-align: center;
  margin-top: var(--space-8);
}

/* ═══════════════════════════════════════════
   DIRECTIONS VIDEO — visit page walk-up clip
   ═══════════════════════════════════════════ */
.directions-video {
  margin: 0 auto;
  max-width: 720px;
  padding: var(--space-7);
  background: var(--cream-0);
  border: 1px solid hsla(208, 22%, 53%, 0.12);
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.directions-video__head { max-width: 44ch; }
.directions-video__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-heading-em);
  margin-bottom: var(--space-3);
}
.directions-video__head h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.25;
}
[lang="zh"] .directions-video__head h3 { font-family: var(--font-display-zh); }
.directions-video__head p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.55;
}
.directions-video__player {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16; /* portrait phone footage — matches actual video shape so the frame doesn't render as a wide black box before play */
  background: var(--plum-700);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  display: block;
  object-fit: cover;
}

/* ═══════════════════════════════════════════
   CHATBOT — floating AI concierge
   Replaces .float-whatsapp on every page.
   ═══════════════════════════════════════════ */
.chatbot {
  --chatbot-bg: var(--cream-0);
  --chatbot-fg: var(--plum-700);
  --chatbot-muted: var(--cream-600);
  --chatbot-border: hsla(208, 22%, 53%, 0.14);
  --chatbot-accent: var(--plum-500);
  --chatbot-accent-soft: hsla(208, 22%, 53%, 0.08);
  --chatbot-wa: #25D366;
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  font-family: var(--font-body);
}
[lang="zh"] .chatbot { font-family: var(--font-body-zh); }

/* ── FAB ────────────────────────────────── */
.chatbot__fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--chatbot-accent);
  color: var(--color-text-on-dark);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px hsla(208, 22%, 30%, 0.3);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.chatbot__fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 40px hsla(208, 22%, 30%, 0.42);
}
.chatbot__fab:focus-visible {
  outline: none;
  box-shadow: 0 10px 30px hsla(208, 22%, 30%, 0.3),
              0 0 0 4px hsla(208, 22%, 53%, 0.35);
}
.chatbot__fab-icon {
  width: 26px;
  height: 26px;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.chatbot__fab-icon--close {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
}
.chatbot--open .chatbot__fab-icon--chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}
.chatbot--open .chatbot__fab-icon--close {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.chatbot__fab-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--chatbot-accent);
  opacity: 0;
  animation: chatbot-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.chatbot--open .chatbot__fab-pulse { animation: none; }
@keyframes chatbot-pulse {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* ── PANEL ──────────────────────────────── */
.chatbot__panel {
  position: absolute;
  bottom: calc(100% + var(--space-3));
  right: 0;
  width: min(380px, calc(100vw - var(--space-8)));
  max-height: min(620px, calc(100vh - var(--space-20)));
  display: flex;
  flex-direction: column;
  background: var(--chatbot-bg);
  border-radius: var(--radius-2xl);
  box-shadow: 0 30px 70px hsla(208, 22%, 18%, 0.25),
              0 8px 20px hsla(208, 22%, 18%, 0.1);
  overflow: hidden;
  transform-origin: bottom right;
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}
.chatbot--open .chatbot__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.chatbot__panel[hidden] { display: flex; }  /* override: animation needs it in DOM */

/* ── HEAD ───────────────────────────────── */
.chatbot__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--plum-500), var(--plum-600));
  color: var(--color-text-on-dark);
}
.chatbot__head-text { flex: 1; min-width: 0; }
.chatbot__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  /* Explicit cream — global `h1..h6 { color: plum-600 }` in base.css would
     otherwise win over the parent .chatbot__head { color: cream-0 } and make
     the title invisible against the plum gradient background. */
  color: var(--color-text-on-dark);
}
[lang="zh"] .chatbot__title { font-family: var(--font-display-zh); }
.chatbot__subtitle {
  margin: 2px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  /* Same reason — base.css gives <p> its own color which wins over inheritance. */
  color: var(--color-text-on-dark);
  opacity: 0.85;
}
.chatbot__close {
  background: hsla(0, 0%, 100%, 0.12);
  border: none;
  color: inherit;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.chatbot__close:hover { background: hsla(0, 0%, 100%, 0.22); }
.chatbot__close svg { width: 16px; height: 16px; }

/* ── WHATSAPP QUICK-ACTION ──────────────── */
.chatbot__wa {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-3) var(--space-4) 0;
  background: hsla(140, 70%, 96%, 1);
  border: 1px solid hsla(140, 60%, 70%, 0.4);
  border-radius: var(--radius-lg);
  color: var(--color-heading);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.chatbot__wa:hover {
  background: hsla(140, 70%, 92%, 1);
  transform: translateY(-1px);
}
.chatbot__wa-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--chatbot-wa);
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chatbot__wa-icon svg { width: 18px; height: 18px; }
.chatbot__wa-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chatbot__wa-label { font-size: 0.88rem; font-weight: 600; line-height: 1.2; }
.chatbot__wa-subtle { font-size: 0.72rem; color: var(--chatbot-muted); margin-top: 1px; }
.chatbot__wa-arrow { width: 14px; height: 14px; opacity: 0.6; flex-shrink: 0; }

/* ── THREAD ─────────────────────────────── */
.chatbot__thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 200px;
  scroll-behavior: smooth;
}
.chatbot__thread::-webkit-scrollbar { width: 6px; }
.chatbot__thread::-webkit-scrollbar-thumb {
  background: var(--cream-200);
  border-radius: var(--radius-full);
}

.chatbot__msg {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: chatbot-msg-in var(--duration-normal) var(--ease-out);
}
.chatbot__msg--assistant {
  background: var(--chatbot-accent-soft);
  color: var(--chatbot-fg);
  border-bottom-left-radius: var(--radius-sm);
  align-self: flex-start;
}
.chatbot__msg--user {
  background: var(--chatbot-accent);
  color: var(--color-text-on-dark);
  border-bottom-right-radius: var(--radius-sm);
  align-self: flex-end;
}
.chatbot__msg--pending {
  color: var(--chatbot-muted);
  font-style: italic;
}
.chatbot__msg--error {
  background: hsla(0, 70%, 96%, 1);
  color: hsla(0, 60%, 36%, 1);
}
@keyframes chatbot-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── QUICK REPLIES ──────────────────────── */
.chatbot__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-3);
}
.chatbot__quick[hidden] { display: none; }
.chatbot__quick-btn {
  background: var(--chatbot-bg);
  border: 1px solid var(--chatbot-border);
  color: var(--chatbot-fg);
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  font-family: inherit;
}
.chatbot__quick-btn:hover {
  background: var(--chatbot-accent-soft);
  border-color: var(--chatbot-accent);
}

/* ── INPUT ──────────────────────────────── */
.chatbot__form {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--chatbot-border);
  background: var(--chatbot-bg);
}
.chatbot__input {
  flex: 1;
  resize: none;
  border: 1px solid var(--chatbot-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: 0.92rem;
  color: var(--chatbot-fg);
  background: var(--cream-50);
  line-height: 1.4;
  max-height: 120px;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.chatbot__input:focus {
  outline: none;
  border-color: var(--chatbot-accent);
  background: var(--chatbot-bg);
}
.chatbot__input::placeholder { color: var(--chatbot-muted); }
.chatbot__send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--chatbot-accent);
  color: var(--color-text-on-dark);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.chatbot__send:hover:not(:disabled) {
  background: var(--plum-600);
  transform: translateY(-1px);
}
.chatbot__send:disabled { opacity: 0.5; cursor: not-allowed; }
.chatbot__send svg { width: 16px; height: 16px; }

.chatbot__disclaimer {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  font-size: 0.7rem;
  color: var(--chatbot-muted);
  text-align: center;
  letter-spacing: 0.01em;
}

/* ── MOBILE ─────────────────────────────── */
@media (max-width: 480px) {
  .chatbot {
    /* Real breathing room from the screen edge on mobile. Page declares
       viewport-fit=cover, so env(safe-area-inset-*) gives the real
       device unsafe area (notch, Dynamic Island, rounded corners,
       home indicator). We add space-4 on top so even devices that
       report no inset get a clear 28-32px buffer. */
    bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--space-7) + env(safe-area-inset-right, 0px));
  }
  .chatbot__panel {
    width: calc(100vw - var(--space-8));
    max-height: calc(100vh - var(--space-20));
    bottom: calc(100% + var(--space-2));
  }
  .chatbot--open .chatbot__panel {
    /* On small screens, anchor to right edge but allow the panel to span nearly full width */
    right: 0;
  }
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer {
  /* Dark surface = ink anchor. White text on ink = ~15:1 contrast. */
  background: var(--color-bg-dark);
  color: hsla(0, 0%, 100%, 0.78);  /* white @ 78% — body on dark */
  padding: var(--space-20) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, hsla(252, 18%, 65%, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, hsla(208, 22%, 50%, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
.footer > * { position: relative; z-index: 2; }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 720px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
  }
}

.footer__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  color: var(--color-text-on-dark);  /* white on dark */
}
.footer__brand-mark {
  font-size: 2.25rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.footer__brand-sub {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);  /* lavender anchor — subtle accent on dark */
  line-height: 1;
}

.footer__tagline {
  color: hsla(0, 0%, 100%, 0.7);  /* white @ 70% — secondary copy on dark */
  max-width: 34ch;
  font-size: var(--text-sm);
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);  /* lavender anchor — section labels on dark */
  margin-bottom: var(--space-4);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer__link {
  font-size: var(--text-sm);
  color: hsla(0, 0%, 100%, 0.78);  /* white @ 78% — links on dark */
  transition: color var(--duration-fast) var(--ease-default);
}
.footer__link:hover { color: var(--color-accent); }  /* lavender anchor on hover */

.footer__bottom {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: hsla(0, 0%, 100%, 0.5);
  letter-spacing: var(--tracking-wide);
}

.footer__credit {
  color: hsla(0, 0%, 100%, 0.55);
  transition: color var(--duration-fast) var(--ease-default);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.25);
  padding-bottom: 1px;
}
.footer__credit:hover {
  color: var(--rose-300);
  border-bottom-color: var(--rose-300);
}

.footer__socials {
  display: flex;
  gap: var(--space-2);
}
.footer__socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsla(0, 0%, 100%, 0.72);
  transition: all var(--duration-fast) var(--ease-default);
}
.footer__socials a:hover {
  background: var(--rose-400);
  border-color: var(--color-accent);
  color: var(--color-heading);
}
.footer__socials svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════
   PAGE HEAD (services / bo-jin / about / etc.)
   ═══════════════════════════════════════════ */
.page-head {
  position: relative;
  padding: calc(var(--section-padding) + 0.5rem) 0 calc(var(--section-padding) - 1rem);
  background:
    radial-gradient(ellipse at top right, var(--rose-100) 0%, transparent 55%),
    var(--cream-50);
  overflow: hidden;
}

.page-head--jade {
  background:
    radial-gradient(ellipse at top right, var(--jade-100) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, var(--cream-100) 0%, transparent 60%),
    var(--jade-50);
}

.page-head__inner {
  max-width: var(--container-md);
  text-align: center;
  margin: 0 auto;
}
.page-head__title {
  font-size: var(--text-6xl);
  margin-top: var(--space-4);
}
.page-head__title em {
  color: var(--color-heading-em);
  font-weight: var(--weight-regular);
}
.page-head--jade .page-head__title em { color: var(--color-heading-em); }

.page-head__lead {
  font-size: var(--text-lg);
  color: var(--color-text-soft);
  margin: var(--space-5) auto 0;
  max-width: 52ch;
}

.page-head__zh {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display-zh);
  font-size: var(--text-2xl);
  color: var(--color-heading-em);
  letter-spacing: 0.08em;
  font-weight: 400;
}
.page-head--jade .page-head__zh { color: var(--color-heading-em); }

/* Sticky category filter band (sits below nav) */
.category-sticky {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: hsla(54, 22%, 98%, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}
@media (max-width: 640px) {
  .category-sticky { top: 60px; padding: var(--space-2) 0; }
}

/* Anchor targets clear the nav + sticky bar */
[id="lashes"], [id="brows"], [id="bojin-link"], [id="nails"] {
  scroll-margin-top: 140px;
}

/* Category anchor pills */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-pills::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .category-pills {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0 var(--container-padding);
    margin: 0 calc(-1 * var(--container-padding));
  }
  .category-pills a { white-space: nowrap; flex-shrink: 0; }
}
.category-pills a {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--cream-0);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  transition: all var(--duration-fast) var(--ease-default);
}
.category-pills a:hover {
  background: var(--plum-500);
  color: var(--color-text-on-dark);
  border-color: var(--color-heading-em);
}

/* ═══════════════════════════════════════════
   BO JIN PROCESS TIMELINE
   ═══════════════════════════════════════════ */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  counter-reset: step;
}
@media (min-width: 720px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(4, 1fr); }
}

.process__step {
  position: relative;
  padding: var(--space-8) var(--space-6);
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  counter-increment: step;
}
.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-style: italic;
  color: var(--rose-300);
  font-weight: 500;
}
.process__step h3, .process__step h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  max-width: 14ch;
  font-weight: 500;
}
.process__step p {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

/* ═══════════════════════════════════════════
   STAT STRIP (reviews page)
   ═══════════════════════════════════════════ */
.stat-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-10);
  background: var(--cream-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  text-align: center;
}
@media (min-width: 720px) {
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
}
.stat-strip__value {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-style: italic;
  color: var(--color-heading-em);
  line-height: 1;
  font-weight: 500;
}
.stat-strip__label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.stat-strip__sub {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

/* ═══════════════════════════════════════════
   SPM PILLAR ARTICLE — service grid + quiz + part-of callout
   Scoped to the SPM complete-guide article and orphan callouts.
   ═══════════════════════════════════════════ */

.part-of {
  margin: var(--space-6) 0 var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--rose-50);
  border-left: 3px solid var(--rose-400);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.part-of__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-heading-em);
}
.part-of p { margin: 0; color: var(--color-text); font-size: var(--text-sm); }
.part-of a { color: var(--color-heading); text-decoration: underline; text-underline-offset: 3px; }
.part-of a:hover { color: var(--color-heading-em); }

.spm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: var(--space-8) 0;
}
.spm-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.spm-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.spm-card__head { display: flex; align-items: baseline; gap: var(--space-3); }
.spm-card__no {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-heading-em);
  letter-spacing: var(--tracking-wide);
}
.spm-card__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.spm-card__desc {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}
.spm-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.spm-card__stats div { display: flex; flex-direction: column; gap: 2px; }
.spm-card__stats dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.spm-card__stats dd { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }

.spm-quiz {
  margin: var(--space-8) 0;
  padding: var(--space-8);
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--rose-50) 100%);
  border-radius: var(--radius-xl);
  min-height: 280px;
}
.spm-quiz__step,
.spm-quiz__result { display: flex; flex-direction: column; gap: var(--space-5); }
.spm-quiz__progress { display: flex; gap: var(--space-2); }
.spm-quiz__dot {
  width: 22px; height: 4px; border-radius: 2px;
  background: var(--color-border-strong);
  transition: background var(--duration-normal);
}
.spm-quiz__dot.is-on { background: var(--rose-500); }
.spm-quiz__q {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0;
}
.spm-quiz__options { display: flex; flex-direction: column; gap: var(--space-3); }
.spm-quiz__option {
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: var(--text-base);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast),
              background var(--duration-fast),
              transform var(--duration-fast);
}
.spm-quiz__option:hover {
  border-color: var(--color-accent);
  background: var(--rose-50);
  transform: translateX(2px);
}
.spm-quiz__back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-2) 0;
}
.spm-quiz__back:hover { color: var(--color-heading-em); }
.spm-quiz__result-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-heading-em);
}
.spm-quiz__result-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0;
}
.spm-quiz__result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.spm-quiz__result-stats div { display: flex; flex-direction: column; gap: 2px; }
.spm-quiz__result-stats dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.spm-quiz__result-stats dd { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.spm-quiz__result-copy { font-size: var(--text-base); line-height: var(--leading-relaxed); margin: 0; }
.spm-quiz__result-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.spm-quiz__restart {
  background: none;
  border: none;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
}
.spm-quiz__restart:hover { color: var(--color-heading-em); }

@media (max-width: 720px) {
  .spm-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .spm-quiz { padding: var(--space-5); }
  .spm-quiz__q { font-size: var(--text-xl); }
  .spm-quiz__result-stats { grid-template-columns: 1fr 1fr; }
}