/* Kit: menu mechanics from website/MENUS.md section 5, with mo- names so a site's old header styles and script are left alone.
   The site's motion.css sets the look by overriding the --mo-nav-* values and the .mo-* rules. */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px; --mo-nav-move: 320ms cubic-bezier(.2,.7,.2,1);
  --mo-nav-bg: #fff; --mo-nav-ink: #111; --mo-nav-line: rgba(0,0,0,.14); --mo-nav-shadow: 0 10px 30px rgba(0,0,0,.14); --mo-nav-radius: 999px; --mo-nav-pad: clamp(16px, 4vw, 40px); }
html { scroll-padding-top: calc(var(--mo-nav-h) + 16px); }
.mo-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.mo-hdr { position: sticky; top: 0; z-index: 60; display: flow-root; height: var(--mo-nav-h); padding: 0 var(--mo-nav-gap); pointer-events: none; }
.mo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; height: var(--mo-nav-h); max-width: 100%; margin: 0 auto; padding: 0 calc(var(--mo-nav-pad) - var(--mo-nav-gap));
  color: var(--mo-nav-ink); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), border-radius var(--mo-nav-move), padding var(--mo-nav-move), background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
.mo-scrolled .mo-bar { height: var(--mo-nav-h-float); max-width: var(--mo-nav-max); margin-top: var(--mo-nav-gap); padding: 0 12px 0 18px; border-color: var(--mo-nav-line); border-radius: var(--mo-nav-radius); background: var(--mo-nav-bg); box-shadow: var(--mo-nav-shadow); }
.mo-hidden .mo-hdr { transform: translateY(calc(-100% - 24px)); }
.mo-hdr { transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.mo-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.mo-nav { margin-left: auto; }
.mo-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mo-has-sub { position: relative; }
.mo-has-sub > .mo-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.mo-has-sub > .mo-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mo-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; display: none; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 14px; box-shadow: var(--mo-nav-shadow); }
.mo-link[aria-expanded="true"] + .mo-sub { display: block; }
.mo-sub a { display: grid; gap: 2px; padding: 10px 12px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.mo-sub a small { opacity: .75; font-weight: 400; }
.mo-cta { flex: none; white-space: nowrap; }
.mo-menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--mo-nav-radius); cursor: pointer; flex: none; }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-menu-btn { display: inline-flex; }
  .mo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none; max-height: calc(100dvh - var(--mo-nav-h) - 32px); overflow-y: auto; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 18px; box-shadow: var(--mo-nav-shadow); }
  .mo-nav-open .mo-nav { display: block; }
  .mo-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mo-link { width: 100%; min-height: 48px; justify-content: space-between; }
  .mo-sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 12px; background: none; }
  .mo-bar { gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; }
  .mo-nav-open .mo-bar, .mo-bar { }
}
@media (max-width: 380px) { .mo-menu-btn svg { display: none; } .mo-menu-btn { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mo-bar, .mo-hdr { transition: none; } }
/* Kit: pinned hero mechanics. The site's motion.css animates the hero's parts with var(--mo-pin), which runs 0 to 1. */
.mo-pin { --mo-pin: 0; --mo-pin-extra: 90vh; --mo-pin-offset: 0px; position: relative; }
/* the room to scroll through has to be real height (a sticky element cannot travel into its parent's padding) */
.mo-pin.is-pinned { height: calc(var(--mo-pin-h, 100vh) + var(--mo-pin-extra)); }
.mo-pin.is-pinned > :first-child { position: sticky; top: var(--mo-pin-top, 0px); }
/* Lumen Skin Studio: motion in the site's own language, light passing through frosted glass.
   Things do not slide or bounce in. They start out of focus, as if seen through the frosted pane, and settle into focus.
   Only the waiting state is styled, so an arrived element falls back to exactly what the site gave it. */
.mo-ready .mo { transition: opacity .85s cubic-bezier(.3, .1, .3, 1), filter .85s cubic-bezier(.3, .1, .3, 1), transform .85s cubic-bezier(.2, .6, .2, 1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo:not(.in) { opacity: 0; filter: blur(9px); transform: translateY(10px); }
/* photos pull focus a little more slowly, with the light still on them */
.mo-ready .kind-img.mo:not(.in), .mo-ready .split-img.mo:not(.in), .mo-ready .cat-img.mo:not(.in) { filter: blur(16px) brightness(1.12); transform: scale(1.03); }
/* glass panes already blur what is behind them, so they only rise and clear */
.mo-ready .glass.mo:not(.in) { filter: none; transform: translateY(16px); }
/* menu rows keep the site's own highlight fade */
.mo-ready .trow.mo { transition: opacity .85s cubic-bezier(.3, .1, .3, 1), filter .85s cubic-bezier(.3, .1, .3, 1), transform .85s cubic-bezier(.2, .6, .2, 1), background-color .3s; transition-delay: calc(var(--mo-i, 0) * 70ms), calc(var(--mo-i, 0) * 70ms), calc(var(--mo-i, 0) * 70ms), 0s; }

/* the photo behind each glass pane drifts very slightly as it passes, so the blur in the glass is alive */
@supports (animation-timeline: view()) {
  .mo-ready .photo-band > .band-img { animation: mo-band-drift linear both; animation-timeline: view(); }
  @keyframes mo-band-drift { from { transform: scale(1.08) translateY(-3%); } to { transform: scale(1.08) translateY(3%); } }
}

/* The object band: four frosted-glass miniatures, set out like the facts strip (hairlines top and bottom, hairline dividers).
   Each floats a little as the page moves, and the soft shadow under it slides as if the light were crossing the room. */
.mo-band { padding-block: var(--s6) 0; }
.mo-band--end { padding-block: var(--s6) clamp(56px, 6.5vw, 96px); }
.mo-band__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hair); border-bottom: var(--hair); }
.mo-item { display: grid; align-content: start; gap: var(--s3); padding: var(--s5) var(--s4) var(--s4); border-left: var(--hair); color: var(--ink); text-decoration: none; }
.mo-item:first-child { border-left: 0; padding-left: 0; }
.mo-item:hover { color: var(--ink); }
.mo-fig { position: relative; display: block; width: 120px; height: 136px; }
.mo-float { display: block; }
.mo-float img { width: 120px; height: 120px; object-fit: contain; transition: transform .6s cubic-bezier(.2, .6, .2, 1), filter .6s ease; }
.mo-shadow { position: absolute; left: 14%; right: 14%; bottom: 0; height: 12px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(36, 33, 42, .2), rgba(36, 33, 42, 0)); transform: translateX(calc((var(--mo-p, .5) - .5) * 26px)); transition: opacity .6s ease; }
.mo-txt { display: grid; gap: var(--s1); }
.mo-name { font: 500 1.25rem/1.35 var(--f-text); justify-self: start; position: relative; padding-bottom: 6px; }
.mo-name::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--plum); transform: scaleX(.18); transform-origin: left; transition: transform .45s cubic-bezier(.2, .6, .2, 1); }
.mo-item small { font-size: .9375rem; line-height: 1.55; color: var(--pewter); max-width: 30ch; }
.mo-item:hover .mo-name, .mo-item:focus-visible .mo-name { color: var(--plum); }
.mo-item:hover .mo-name::after, .mo-item:focus-visible .mo-name::after { transform: scaleX(1); }
.mo-item:hover .mo-float img, .mo-item:focus-visible .mo-float img { transform: translateY(-7px); filter: brightness(1.05); }
.mo-item:hover .mo-shadow, .mo-item:focus-visible .mo-shadow { opacity: .55; }
.mo-item:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }
@media (max-width: 899px) {
  .mo-band__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-item { padding: var(--s4) var(--s3) var(--s4) var(--s4); }
  .mo-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .mo-item:nth-child(n+3) { border-top: var(--hair); }
  .mo-band { padding-top: var(--s5); } .mo-band--end { padding-bottom: var(--s6); }
}
@media (max-width: 560px) {
  .mo-band__in { grid-template-columns: minmax(0, 1fr); }
  .mo-item { grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s3) 0; border-left: 0; }
  .mo-item + .mo-item { border-top: var(--hair); }
  .mo-fig { width: 72px; height: 84px; }
  .mo-float img { width: 72px; height: 72px; }
  .mo-shadow { height: 9px; }
}
/* after a section that already ends in its own space, the band does not add more */
.section + .mo-band--end, .book-band + .mo-band--end { padding-top: 0; }

/* ---- Menu: a soft floating pill in frosted porcelain glass. At the top of the page it lies flat on the porcelain; after the first
   scroll it lifts off as a pill with the site's silver hairline, a white top light like the glass panes, and a soft shadow.
   Treatments opens on a click into a frosted card; on a phone the links drop down as a sheet from the pill. ---- */
:root { --mo-nav-bg: rgba(246, 247, 249, .93); --mo-nav-ink: var(--ink); --mo-nav-line: rgba(167, 174, 184, .75);
  --mo-nav-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(36, 33, 42, .05), 0 22px 44px -22px rgba(36, 33, 42, .32);
  --mo-nav-radius: 999px; --mo-nav-pad: var(--gut); --mo-nav-max: 1040px; --mo-sheet: #F7F8FA; --mo-bar-h: var(--mo-nav-h); }
.mo-scrolled { --mo-bar-h: var(--mo-nav-h-float); }
.mo-hdr { background: rgba(244, 246, 248, .92); transition: transform 340ms cubic-bezier(.2, .7, .2, 1), background-color .2s linear; }
.mo-scrolled .mo-hdr { background: rgba(244, 246, 248, 0); }
.mo-bar { max-width: calc(var(--max) + 2 * var(--gut) - 2 * var(--mo-nav-gap)); }
.mo-scrolled .mo-bar { -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); padding: 0 6px 0 22px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --mo-nav-bg: rgba(246, 247, 249, .98); } }
.mo-brand .mark { transition: width var(--mo-nav-move), height var(--mo-nav-move); }
.mo-brand .brand-word { transition: font-size var(--mo-nav-move); }
.mo-scrolled .mo-brand .mark { width: 26px; height: 26px; }
.mo-scrolled .mo-brand .brand-word { font-size: 1.7rem; }
.mo-link { position: relative; min-height: 44px; padding: 0 14px; font: 500 1rem/1 var(--f-text); color: var(--ink); border-radius: var(--r-pill); transition: color .15s; }
.mo-link::before { content: ''; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 1px; background: var(--plum); transform: scaleX(0); transform-origin: left; transition: transform .15s; }
.mo-has-sub > .mo-link::before { right: 27px; }
.mo-has-sub > .mo-link::after { width: 6px; height: 6px; border-width: 0 1.5px 1.5px 0; }
.mo-link:hover, .mo-link[aria-current], .mo-link[aria-expanded="true"] { color: var(--plum); }
.mo-link:hover::before, .mo-link[aria-current]::before, .mo-link[aria-expanded="true"]::before { transform: scaleX(1); }
.mo-phone { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 500 1rem/1 var(--f-text); color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .15s; }
.mo-phone:hover { color: var(--plum); }
.mo-cta { min-height: 44px; transition: background-color .15s, min-height var(--mo-nav-move); }
.mo-menu-btn { min-height: 44px; padding: 0 16px 0 12px; font: 500 1rem/1 var(--f-text); color: var(--ink); border-color: var(--line-ctl); border-radius: var(--r-pill); transition: border-color .15s, color .15s; }
.mo-menu-btn:hover, .mo-menu-btn[aria-expanded="true"] { color: var(--plum); border-color: var(--plum); }
.mo-menu-btn .mo-ic-close, .mo-menu-btn .mo-w-close, .mo-menu-btn[aria-expanded="true"] .mo-ic-open, .mo-menu-btn[aria-expanded="true"] .mo-w-open { display: none; }
.mo-menu-btn[aria-expanded="true"] .mo-ic-close { display: block; }
.mo-menu-btn[aria-expanded="true"] .mo-w-close { display: inline; }
.mo-only-sheet { display: none; }
/* the bar is always on screen, so the room kept clear for it belongs to the things on the page, not to the page as a whole:
   a jump to a section still lands below the pill, and moving the keyboard into the bar no longer drags the page */
html { scroll-padding-top: 0; }
main, main [id], main a, main button, main input, main select, main textarea, main summary, .site-foot a { scroll-margin-top: calc(var(--mo-nav-h) + 16px); }

/* the Treatments card: the two pages on the left in the display face, the four kinds of treatment on the right */
.mo-sub { top: calc(100% + (var(--mo-bar-h) - 44px) / 2 + 10px); left: -18px; width: 590px; padding: 10px; background: var(--mo-sheet); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(36, 33, 42, .05), 0 30px 60px -28px rgba(36, 33, 42, .38); }
.mo-link[aria-expanded="true"] + .mo-sub { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); gap: 6px 10px; animation: mo-focus .22s cubic-bezier(.3, .1, .3, 1) both; }
.mo-sub a { align-content: center; gap: 3px; padding: 9px 14px; border-radius: var(--r-sm); color: var(--ink); transition: background-color .15s, box-shadow .15s; }
.mo-sub a:hover { background: rgba(91, 37, 80, .06); color: var(--ink); }
.mo-sub a b { font: 500 1rem/1.3 var(--f-text); }
.mo-sub a small { opacity: 1; font-size: .875rem; line-height: 1.45; color: var(--pewter); }
.mo-sub .mo-sub-page { grid-column: 1; grid-row: 1 / span 2; align-content: end; padding: 16px 18px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(167, 174, 184, .55); }
.mo-sub .mo-sub-page + .mo-sub-page { grid-row: 3 / span 2; }
.mo-sub .mo-sub-page:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--plum); }
.mo-sub .mo-sub-page b { font: 500 1.5rem/1.15 var(--f-display); color: var(--plum); }
.mo-sub .mo-sub-kind { grid-column: 2; }
.mo-sub a[aria-current] b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mo-sub a:focus-visible { outline-offset: -2px; }
@keyframes mo-focus { from { opacity: 0; filter: blur(6px); transform: translateY(-6px); } }
/* without scripts the card opens when the pointer or the keyboard is on Treatments */
html:not(.js) .mo-has-sub:hover > .mo-sub, html:not(.js) .mo-has-sub:focus-within > .mo-sub { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 6px 10px; }

@media (max-width: 1180px) { .mo-has-sub { position: static; } .mo-sub { left: auto; right: 0; top: calc(100% + 10px); width: min(590px, 100%); } }
@media (max-width: 1099px) { .mo-phone { display: none; } .mo-link { padding: 0 11px; } .mo-link::before { left: 11px; right: 11px; } .mo-has-sub > .mo-link::before { right: 24px; } .mo-cta { padding: 0 20px; } }
@media (max-width: 860px) {
  .mo-scrolled .mo-bar { padding: 0 5px 0 16px; }
  .mo-menu-btn { margin-left: auto; min-height: 42px; }
  /* the sheet stops above the Book and Call dock */
  .mo-nav { padding: 4px 20px 12px; background: var(--mo-sheet); border-radius: var(--r-lg); max-height: calc(100dvh - var(--mo-nav-h) - 110px);
    box-shadow: inset 0 1px 0 #fff, 0 30px 60px -28px rgba(36, 33, 42, .4); overscroll-behavior: contain; }
  .mo-nav-open .mo-nav { animation: mo-focus .22s cubic-bezier(.3, .1, .3, 1) both; }
  .mo-nav > ul > li { border-bottom: var(--hair); }
  .mo-nav > ul > li:last-child { border-bottom: 0; }
  .mo-link { min-height: 56px; padding: 0; font-size: 1.2rem; border-radius: var(--r-sm); }
  .mo-link::before, .mo-has-sub > .mo-link::before { left: 0; right: auto; width: 32px; bottom: 11px; }
  .mo-has-sub > .mo-link::after { margin-right: 6px; width: 8px; height: 8px; }
  .mo-sub, .mo-link[aria-expanded="true"] + .mo-sub { width: auto; padding: 0 0 10px; background: none; box-shadow: none; border-radius: 0; animation: none; }
  .mo-link[aria-expanded="true"] + .mo-sub { display: block; }
  .mo-sub a, .mo-sub .mo-sub-page { padding: 10px 14px; min-height: 48px; }
  .mo-sub a + a { margin-top: 6px; }
  .mo-sub .mo-sub-page b { font-size: 1.35rem; }
  .mo-only-sheet { display: block; padding-top: 4px; }
  .mo-only-sheet .mo-sheet-call { justify-content: flex-start; gap: 10px; min-height: 48px; font-size: 1.0625rem; color: var(--plum); }
  .mo-only-sheet .mo-sheet-call::before { display: none; }
  .mo-only-sheet p { margin: 0; color: var(--pewter); font-size: .9375rem; }
  /* without scripts the links simply sit under the bar */
  html:not(.js) .mo-hdr { position: static; height: auto; }
  html:not(.js) .mo-bar { height: auto; flex-wrap: wrap; padding-block: 10px; }
  html:not(.js) .mo-menu-btn { display: none; }
  html:not(.js) .mo-nav { position: static; display: block; width: 100%; max-height: none; padding: 0; background: none; border: 0; box-shadow: none; }
  html:not(.js) .mo-sub { display: block; }
}
@media (max-width: 400px) { .mo-menu-btn { padding: 0 14px 0 10px; } }

/* ---- Hero: one pinned scroll section. Light crosses the room. A band of warm light passes over the photograph while it brightens
   and draws closer; along the hairline over the three facts the Lumen mark travels, filling from crescent to full, with a pool
   of light under it that lands on each fact in turn. The glass pane, the headline and the buttons stay exactly where they are. ---- */
.mo-pin { --mo-pin-offset: 76px; --mo-pin-extra: 85vh; }
.mo-prog { display: none; }
.mo-pin.is-pinned .hero-media { height: clamp(440px, 70vh, 700px); }
.mo-pin.is-pinned .hero-media img { transform: scale(calc(1 + var(--mo-pin) * .09)); transform-origin: 62% 36%; filter: brightness(calc(1 + var(--mo-pin) * .07)) saturate(calc(1 + var(--mo-pin) * .1)); }
.mo-pin.is-pinned .hero-media::before { content: ''; position: absolute; z-index: 1; inset: -10% -60%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 34%, rgba(255, 248, 240, .22) 43%, rgba(255, 252, 247, .5) 50%, rgba(255, 248, 240, .22) 57%, rgba(255, 255, 255, 0) 66%);
  transform: translateX(calc(-62% + var(--mo-pin) * 124%)); }
.mo-pin.is-pinned .hero > .wrap:last-child { position: relative; }
.mo-pin.is-pinned .facts { position: relative; z-index: 1; }
.mo-pin.is-pinned > .hero { overflow-x: clip; }
.mo-pin.is-pinned .mo-prog { display: block; position: absolute; z-index: 0; left: var(--gut); right: var(--gut); top: -12px; height: 24px; pointer-events: none; }
.mo-prog__line { position: absolute; left: 0; right: 23px; top: 12px; height: 1px; background: var(--plum); transform-origin: 0 50%; transform: scaleX(var(--mo-pin)); }
.mo-prog__run { position: absolute; left: 0; top: 0; width: 100%; height: 24px; transform: translateX(calc((var(--mo-pin) - 1) * (100% - 24px))); }
.mo-prog__pool { position: absolute; right: -168px; top: 12px; width: 360px; height: 84px; background: radial-gradient(50% 100% at 50% 0, #fff, rgba(255, 255, 255, .75) 38%, rgba(255, 255, 255, 0)); opacity: min(1, calc(var(--mo-pin) * (1 - var(--mo-pin)) * 9)); }
.mo-phase { position: absolute; right: 0; top: 0; overflow: visible; }
.mo-phase__disc, .mo-phase__dark { fill: var(--porcelain); }
.mo-phase__half, .mo-phase__lit { fill: var(--plum); }
.mo-phase__ring { fill: none; stroke: var(--plum); stroke-width: 1; }
.mo-phase__dark, .mo-phase__lit { transform-box: fill-box; transform-origin: 50% 50%; }
.mo-phase__dark { transform: scaleX(max(0, calc(.586 - var(--mo-pin) * 1.3))); }
.mo-phase__lit { transform: scaleX(clamp(0, calc(var(--mo-pin) * 2.1 - 1), 1)); }