/* Spa Daniel, shared site styles. IBM Plex Sans Hebrew for the text, Open Sans Bold for the big headlines, and the
   glow palette of the approved 1+3 opener. Every page uses these parts; a page adds only what is its own. */
:root {
  --bg: #050308;
  --text: #f4f1fa;
  --soft: #cdc5dc;
  --mute: #a69fba;
  --violet: #8e5cff;
  --magenta: #ff4fd8;
  --lilac: #cdbcff;
  --glass: rgba(20, 14, 31, .62);
  --line: rgba(255, 255, 255, .1);
  --f: "IBM Plex Sans Hebrew", "Heebo", "Arial Hebrew", system-ui, sans-serif;
  /* the big headlines: Open Sans has no geresh or gershayim (׳ ״), so those two come from Plex */
  --fh: "Open Sans", "IBM Plex Sans Hebrew", "Arial Hebrew", system-ui, sans-serif;
  --pad: clamp(18px, 3vw, 48px);
  --gl: max(var(--pad), env(safe-area-inset-left, 0px));
  --gr: max(var(--pad), env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hdr-h: 58px;
  --strand: linear-gradient(270deg, #fff, var(--violet) 55%, var(--magenta));
  /* gold: kept for light, the name, prices and the one main action, so it always means something */
  --gold: #e3c48c;
  --gold-hi: #fff1cf;
  --gold-lo: #a77d3c;
  --gold-line: rgba(227, 196, 140, .26);
  --leaf: linear-gradient(100deg, #a77d3c 0%, #e3c48c 22%, #fff3d4 40%, #e8c98e 56%, #b88d4a 76%, #f0d8a6 100%);
  --strand-gold: linear-gradient(270deg, #fff3d4, var(--gold) 55%, var(--gold-lo));
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
/* whatever the Tab key brings into view stops below the fixed header. Below the first screen it also stops well above
   the bottom edge, where phones keep the dock and where a message field, which brings only its first line into view,
   needs room for the rest (html.sd-down, from site.js). The first screen keeps no such room: its film tabs sit low, and
   a scroll to show one would fade the opening, and the tab with it */
html { scroll-padding-top: calc(var(--hdr-h) + 20px); }
html.sd-down { scroll-padding-bottom: 120px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: var(--f); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
.nw { white-space: nowrap; }
ul, ol { margin: 0; padding: 0; }
img, video { max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; top: 12px; inset-inline-start: -9999px; z-index: 90; padding: 10px 14px; background: #fff; color: #000; border-radius: 8px; }
.skip:focus { inset-inline-start: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }

/* light field and grain */
#fur { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 15.5px;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  transition: box-shadow .4s var(--ease), background .3s, transform .4s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #fbecc6 0%, #e8c98e 52%, #d2a961 100%);
  color: #1c1307;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(122, 82, 24, .35), 0 0 0 1px rgba(255, 230, 176, .5), 0 6px 26px rgba(214, 168, 90, .34), 0 0 56px rgba(142, 92, 255, .26);
}
/* a sheen crosses the gold, from the side where reading starts, when the button is approached */
.btn--glow::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(255deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .72) 48%, rgba(255, 255, 255, 0) 64%); transform: translateX(110%); transition: transform 0s .9s; pointer-events: none; }
.btn--glow:hover::after { transform: translateX(-110%); transition: transform .9s var(--ease); }
.btn--glow:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(122, 82, 24, .35), 0 0 0 1px rgba(255, 238, 196, .8), 0 8px 34px rgba(226, 184, 104, .55), 0 0 80px rgba(142, 92, 255, .36); }
.btn--glass {
  color: var(--text);
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.btn--glass:hover { background: rgba(255, 255, 255, .18); }
.btn--xl { height: 56px; padding: 0 30px; border-radius: 14px; font-size: 17px; }
.btn .ico { width: 18px; height: 18px; }
.ico { width: 18px; height: 18px; flex: none; }
.icon-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background .3s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .14); }
.icon-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.icon-btn svg { width: 18px; height: 18px; }
.linkbtn { all: unset; cursor: pointer; justify-self: start; padding-block: 1px; font-size: 14px; color: #d3cce2; text-decoration: underline; text-underline-offset: 4px; }
.linkbtn:hover { color: var(--text); }
.linkbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 15px; color: var(--soft); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-underline-offset: 5px; transition: color .25s, text-decoration-color .25s; }
.textlink:hover { color: var(--text); text-decoration-color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 12.5px; line-height: 1.4; padding: 4px 10px; border-radius: 8px; color: #ece5f5; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .3); }
.tag { flex: none; font-size: 11.5px; line-height: 1.5; padding: 1px 8px; border-radius: 7px; color: var(--gold); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .42); }

/* ---------- header ---------- */
.hdr {
  position: fixed;
  z-index: 40;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(1180px, calc(100% - 2 * var(--pad)));
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 7px;
  padding-inline-start: 12px;
  border-radius: 16px;
  transition: transform .7s var(--ease);
}
/* the glass lives on a layer of its own: a blur on the header itself would stop the menu below from blurring the page */
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(16, 11, 24, .66);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .16), 0 10px 40px rgba(0, 0, 0, .35);
  transition: background .4s;
  pointer-events: none;
}
.hdr.is-hidden { transform: translateY(calc(-100% - 24px)); }
.hdr.is-open::before { background: rgba(16, 11, 24, .84); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
.brand__name { font-weight: 600; font-size: 17px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; background: var(--leaf); background-size: 240% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.4s var(--ease); }
.brand:hover .brand__name { background-position: 100% 0; }
/* the crest: the logo exactly as drawn, a neon light behind it (its own outline, blurred: gold close, violet wide)
   and a gleam that only touches the logo's own pixels as it passes */
.crest { --crest-h: 46px; position: relative; isolation: isolate; flex: none; width: calc(var(--crest-h) * 1.1832); height: var(--crest-h); }
.crest > img { position: absolute; display: block; max-width: none; pointer-events: none; }
.crest__img { inset: 0; width: 100%; height: 100%; }
/* the light's outermost fringe (alpha under 6 of 255, too faint to see) is clipped away: what is left of its box is smaller
   than the shortest first line under a page title, so Chrome keeps the page's own words as the largest thing it paints */
.crest__light { z-index: -1; top: -30%; left: -30%; width: 160%; height: 160%; clip-path: inset(3.125% 8.51% 1.875% 11.17%); opacity: .5; transition: opacity .7s var(--ease); }
.brand:hover .crest__light { opacity: .95; }
.crest__lit, .ftr__lit { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; mix-blend-mode: plus-lighter; }
.crest__lit { -webkit-mask: url(media/brand/crest-46@2x.webp) center / 100% 100% no-repeat; mask: url(media/brand/crest-46@2x.webp) center / 100% 100% no-repeat; }
@media (min-width: 1000px) {
  .hdr .crest { --crest-h: 50px; }
  .hdr .crest__lit { -webkit-mask-image: url(media/brand/crest-50@2x.webp); mask-image: url(media/brand/crest-50@2x.webp); }
}
.crest__lit > i, .ftr__lit > i { position: absolute; top: 0; bottom: 0; left: -50%; width: 200%; background: linear-gradient(100deg, rgba(255, 243, 212, 0) 42%, rgba(255, 243, 212, .3) 50%, rgba(255, 243, 212, 0) 58%); transform: translateX(60%); }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; font-size: 14.5px; color: #cfc8de; }
.nav > a, .nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 11px;
  border-radius: 10px;
  transition: color .25s, background .25s;
}
.nav__btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 11px; border-radius: 10px; cursor: pointer; transition: color .25s, background .25s; }
.nav__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav > a:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav > a[aria-current="page"] { color: var(--text); }
.chev { width: 12px; height: 12px; flex: none; transition: transform .4s var(--ease); }
.nav__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr__end { display: flex; align-items: center; gap: 8px; }
.hdr .btn { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.menu-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--text);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.menu-btn__lines { display: grid; gap: 5px; width: 18px; }
.menu-btn__lines i { display: block; height: 1.5px; border-radius: 2px; background: currentColor; }
.menu-btn__lines i:last-child { width: 12px; }

/* treatments menu: a list on one side, a live preview on the other */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  height: min(410px, calc(100svh - var(--hdr-h) - 52px));
  border-radius: 18px;
  overflow: hidden;
  background: rgba(14, 10, 22, .92);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 120px rgba(0, 0, 0, .6), 0 0 120px rgba(142, 92, 255, .2);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(.985);
  transform-origin: top center;
  transition: opacity .3s var(--ease), transform .5s var(--ease), visibility 0s .5s;
}
.mega.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .55s var(--ease); }
.mega__list { padding: 8px; display: grid; align-content: start; gap: 1px; overflow: auto; border-inline-end: 1px solid var(--line); scrollbar-width: none; }
.mega__list::-webkit-scrollbar { display: none; }
.mega__sec { font-size: 12px; color: var(--mute); padding: 9px 12px 3px; }
.mega__sec:first-child { padding-top: 4px; }
.mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 12px; border-radius: 10px; font-size: 15px; transition: background .25s, box-shadow .25s; }
.mrow__sub { font-size: 12.5px; color: var(--mute); }
.mrow.is-on { background: rgba(142, 92, 255, .18); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .38); }
.mrow:focus-visible { outline-offset: -2px; }
.mrow[aria-current="page"] .mrow__name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.mpv { position: relative; overflow: hidden; }
.mpv__item { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; opacity: 0; transition: opacity .15s ease; }
/* one preview leaves before the next arrives, so two captions never show at once */
.mpv__item.on { opacity: 1; transition: opacity .3s ease .1s; }
.mpv__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.mpv__item.on img { transform: none; }
.mpv__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 5, 14, .78) 0%, rgba(8, 5, 14, 0) 55%); pointer-events: none; }
.mpv__item--type { background: radial-gradient(120% 90% at 50% 115%, rgba(142, 92, 255, .45), rgba(255, 79, 216, .12) 42%, rgba(5, 3, 8, .4) 78%); }
.mpv__item--type::after { display: none; }
.mpv__say { position: relative; z-index: 2; align-self: center; justify-self: center; text-align: center; padding: 0 28px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; max-width: 18ch; text-wrap: balance; }
.mpv__txt { position: relative; z-index: 2; grid-row: 2; padding: 18px 22px 20px; display: grid; gap: 8px; justify-items: start; }
.mpv__txt h3 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.mpv__txt p { font-size: 14.5px; color: #e2dcef; line-height: 1.55; max-width: 46ch; }

/* ---------- mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gr) calc(14px + env(safe-area-inset-bottom, 0px)) var(--gl);
  background: rgba(7, 4, 12, .95);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.menu[hidden] { display: none; }
/* without a graphics card the blur behind the menu would be painted by the processor at every tap: a solid sheet,
   since the page would show through unblurred */
.sd-soft .menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(7, 4, 12); }
/* the same for what opens over the Journal: its search, its sheets and the shade behind them */
.sd-soft .jx__scrim, .sd-soft .lib__scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4, 2, 8, .8); }
.sd-soft .jx__panel::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgb(24, 16, 38), rgb(12, 8, 20)); }
.sd-soft .pop::before, .sd-soft .side.is-pop::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(18, 12, 28); }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.menu__top .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.menu__body { overflow: auto; overscroll-behavior: contain; padding: 6px 0 18px; }
.acc { border-bottom: 1px solid var(--line); }
.acc__h { margin: 0; font: inherit; }
.acc__h button {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer;
}
.acc__h button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
/* under a closed world's name, what is inside it, in a quieter line; it steps aside while the world is open */
.acc__h button { padding: 10px 0; }
.acc__t { display: grid; gap: 3px; min-width: 0; }
.acc__says { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--mute); }
.acc__h button[aria-expanded="true"] .acc__says { display: none; }
.acc__h .chev { width: 16px; height: 16px; color: var(--mute); }
.acc__h button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acc__p { overflow: hidden; }
.acc__in { display: grid; padding: 0 0 12px; }
.acc__in a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; font-size: 16.5px; color: #e4ddf0; }
.acc__in a[aria-current="page"] { color: #fff; font-weight: 500; }
.acc__in small { color: var(--mute); font-size: 13px; }
.menu__foot { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.menu__foot .btn { height: 50px; border-radius: 14px; }
.menu__fine { grid-column: 1 / -1; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--mute); }

/* ---------- mobile dock ---------- */
.dock {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 8px;
  border-radius: 20px;
  background: rgba(16, 11, 24, .7);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 44px rgba(0, 0, 0, .5);
  transform: translateY(calc(100% + 30px));
  transition: transform .6s var(--ease);
}
.dock.is-on { transform: none; }
.dock .btn { height: 48px; border-radius: 13px; padding: 0 14px; }

/* ---------- music player ---------- */
.player {
  position: fixed;
  z-index: 44;
  left: max(18px, env(safe-area-inset-left, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: grid;
  justify-items: end;
  gap: 10px;
  pointer-events: none;
  transition: transform .6s var(--ease);
}
.player > * { pointer-events: auto; }
.player__btn {
  all: unset;
  pointer-events: auto; /* all: unset would inherit the wrapper's pointer-events: none */
  box-sizing: border-box;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(16, 11, 24, .62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 30px rgba(0, 0, 0, .4);
  transition: box-shadow .4s var(--ease), background .3s;
}
.player__btn:hover, .player.is-open .player__btn { background: rgba(26, 18, 40, .8); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .45), 0 0 30px rgba(142, 92, 255, .45), 0 0 18px rgba(240, 198, 120, .25); }
.player__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i { display: block; width: 2.5px; height: 35%; border-radius: 2px; background: linear-gradient(var(--gold-hi), var(--gold)); }
.eq i:nth-child(2) { height: 75%; }
.eq i:nth-child(3) { height: 50%; }
.eq i:nth-child(4) { height: 90%; }
.player.is-playing .eq i { animation: eq 1.2s ease-in-out infinite alternate; }
.player.is-playing .eq i:nth-child(2) { animation-delay: -.4s; }
.player.is-playing .eq i:nth-child(3) { animation-delay: -.8s; }
.player.is-playing .eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.eq i { transform-origin: bottom; }
.player__panel {
  width: min(304px, calc(100vw - 36px));
  padding: 16px;
  border-radius: 18px;
  display: grid;
  gap: 12px;
  background: rgba(16, 11, 24, .9);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .55), 0 0 80px rgba(142, 92, 255, .18);
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transform-origin: bottom left;
  transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.player.is-open .player__panel { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.player__title { font-size: 15px; font-weight: 500; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { all: unset; box-sizing: border-box; cursor: pointer; height: 36px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; color: var(--soft); transition: background .3s, color .3s; }
.seg button[aria-checked="true"] { background: var(--text); color: #0c0814; }
.seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.player__now { display: flex; align-items: center; gap: 12px; }
.player__play { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #0c0814; background: var(--text); box-shadow: 0 0 22px rgba(142, 92, 255, .6); }
.player__play svg { width: 20px; height: 20px; margin-inline-end: -2px; }
.player__play:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.player__now p { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.4; }
/* English titles read left to right but sit on the right like the rest of the panel; a long one fades out at its end */
.player__now b { overflow: hidden; white-space: nowrap; text-align: right; font-weight: 500; -webkit-mask-image: linear-gradient(to left, transparent, #000 22px); mask-image: linear-gradient(to left, transparent, #000 22px); }
.player__now b.fits { -webkit-mask-image: none; mask-image: none; }
.player__now small { color: var(--mute); font-size: 12.5px; }
.player__play .i-pause, .player.is-playing .player__play .i-play { display: none; }
.player.is-playing .player__play .i-pause { display: block; margin: 0; }
.player__next { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); transition: color .3s, box-shadow .3s; }
.player__next svg { width: 16px; height: 16px; }
.player__next:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.player__next:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* the line fills from the right, the way a Hebrew page reads */
.player__bar { display: block; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.player__bar i { display: block; height: 100%; background: linear-gradient(to left, #fff, var(--lilac)); transform: scaleX(0); transform-origin: right; }
.player__fine { font-size: 12px; line-height: 1.5; color: var(--mute); }

/* ---------- notes for actions this draft does not connect yet ---------- */
.toast {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: min(520px, calc(100% - 32px));
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
  background: rgba(20, 14, 31, .9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 40px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity .35s, transform .5s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- section scaffolding and type ---------- */
.sec { position: relative; z-index: 2; padding: clamp(72px, 15vh, 160px) var(--gr) clamp(72px, 13vh, 140px) var(--gl); }
.wrap { width: min(1200px, 100%); margin: 0 auto; }
.wrap--wide { width: min(1344px, 100%); }
.sec-head { display: grid; gap: clamp(12px, 2.2vh, 20px); justify-items: start; max-width: 760px; margin-bottom: clamp(32px, 7vh, 72px); }
.sec-h { font-weight: 500; font-size: clamp(34px, min(4.6vw, 10vh), 68px); line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }
.sec-p { color: var(--soft); font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.65; max-width: 44ch; text-wrap: pretty; }
.sub-h { font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -.018em; text-wrap: balance; }
.body-p { color: var(--soft); font-size: 16px; line-height: 1.7; max-width: 52ch; text-wrap: pretty; }
.small { font-size: 14px; color: var(--mute); line-height: 1.6; }
.ln2-mask { padding-bottom: .14em; margin-bottom: -.14em; }
.list-dash { list-style: none; display: grid; gap: 8px; }
.list-dash li { position: relative; padding-inline-start: 22px; color: var(--soft); line-height: 1.6; }
.list-dash li::before { content: ""; position: absolute; inset-inline-start: 0; top: .78em; width: 12px; height: 1.5px; border-radius: 2px; background: var(--strand-gold); box-shadow: 0 0 8px rgba(240, 198, 120, .55); }

/* statement: the words light up as you read down */
.say {
  position: relative;
  z-index: 2;
  min-height: 80svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: clamp(18px, 3.4vh, 30px);
  padding: 16vh var(--gr) 10vh var(--gl);
}
.say h2 { font-weight: 500; font-size: clamp(34px, min(5.4vw, 11vh), 84px); line-height: 1.05; letter-spacing: -.025em; max-width: 16ch; text-wrap: balance; }
.say p { color: var(--soft); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; max-width: 52ch; text-wrap: pretty; }

/* ---------- the big headlines speak in the letters of "SPA" in the crest ----------
   Raven chose Open Sans Bold for them (questionnaire, 2026-10-26): every page title, section title and statement,
   and the few titles of the same size that pages and the article template set themselves. Pages give their titles
   their own weight and tracking, so this one rule wins over them. Open Sans reaches .24em below the baseline, deeper
   than Plex, so the lines a title rises through leave that room. The story from the salon opens a section of its own,
   so its title (.case__h) is one of them. The tier below stays in Plex Medium: the titles inside a card or a row,
   the clauses of the legal pages and the titles of the forms. */
:is(h1, .sec-h, .say h2, .ph__say h2, .join h2, .way__h, .cat__head > h2, .series__in > h2, .lib__h, .card--lead .card__t, .jc__say, .st__h, .svc__h, .wpc h2, .case__h) {
  font-family: var(--fh) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
:is(h1 .ln, .lh__ln, .ah__ln) { padding-bottom: .2em !important; margin-bottom: -.2em !important; }

/* ---------- before and after: a strand of light splits each frame ---------- */
.cmp { margin: 0; }
.cmp__frame {
  --pos: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #120c1c;
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cmp__frame::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); pointer-events: none; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.cmp__before { position: absolute; inset: 0; clip-path: inset(0 0 0 calc(var(--pos) * 100%)); }
.cmp__lbl {
  position: absolute;
  z-index: 2;
  top: 14px;
  padding: 4px 11px;
  border-radius: 9px;
  font-size: 13px;
  color: #fff;
  background: rgba(10, 6, 16, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.cmp__lbl--b { right: 14px; opacity: clamp(0, calc((1 - var(--pos)) * 6 - .4), 1); }
.cmp__lbl--a { left: 14px; opacity: clamp(0, calc(var(--pos) * 6 - .4), 1); }
.cmp__seam {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 100%);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(255, 241, 207, 0), #fff1cf 18%, #e3c48c 50%, #fff1cf 82%, rgba(255, 241, 207, 0));
  box-shadow: 0 0 10px rgba(240, 198, 120, .9), 0 0 30px rgba(142, 92, 255, .5);
}
.cmp__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(16, 10, 26, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 228, 176, .6), 0 0 26px rgba(142, 92, 255, .55), 0 0 14px rgba(240, 198, 120, .35);
  transition: box-shadow .3s, transform .4s var(--ease);
}
.cmp__knob svg { width: 22px; height: 22px; }
.cmp__frame:hover .cmp__knob, .cmp__knob:focus-visible { transform: scale(1.06); box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 34px rgba(240, 198, 120, .7), 0 0 60px rgba(142, 92, 255, .45); }
.cmp__knob:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }
.cmp figcaption { margin-top: 12px; font-size: 14px; color: var(--mute); }

/* ---------- a real case from the salon: a strand of light runs down through its beats ---------- */
.case { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(26px, 5vw, 80px); align-items: start; padding: clamp(26px, 4vw, 56px); border-radius: 24px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .2), inset 0 1px 0 rgba(255, 255, 255, .15), 0 40px 120px rgba(0, 0, 0, .5), 0 0 120px rgba(142, 92, 255, .14); }
.case__side { display: grid; gap: 16px; justify-items: start; }
.case__h { font-size: clamp(26px, 2.7vw, 40px); font-weight: 500; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
.beats { --s: 0; position: relative; list-style: none; display: grid; gap: clamp(16px, 3vh, 26px); padding-inline-start: 34px; }
.beats::before, .beats::after { content: ""; position: absolute; inset-inline-start: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; }
.beats::before { background: rgba(255, 255, 255, .12); }
.beats::after { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--violet)); box-shadow: 0 0 12px rgba(240, 198, 120, .7); transform: scaleY(var(--s)); transform-origin: center top; }
.beats li { position: relative; display: grid; gap: 2px; }
.beats li::before { content: ""; position: absolute; inset-inline-start: -34px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #0d0915; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); z-index: 1; transition: background .5s, box-shadow .5s; }
.beats li.is-lit::before { background: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(240, 198, 120, .9), 0 0 30px rgba(142, 92, 255, .4); }
.beats b { font-size: 13.5px; font-weight: 500; color: var(--gold); }
.beats span { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; text-wrap: pretty; }

/* ---------- reviews: only the ones approved in the salon's own system ---------- */
.rev { background: radial-gradient(52% 70% at 20% 58%, rgba(142, 92, 255, .14), rgba(142, 92, 255, 0) 70%), var(--bg); }
.rev__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.rev__main { display: grid; gap: clamp(14px, 2.4vh, 22px); align-content: start; }
.quote { position: relative; margin: clamp(10px, 3vh, 30px) 0 0; padding-top: clamp(26px, 4.4vh, 44px); }
.quote::before { content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 2px; border-radius: 2px; background: var(--strand); box-shadow: 0 0 14px rgba(142, 92, 255, .85); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: clamp(24px, min(2.7vw, 5.8vh), 40px); line-height: 1.32; font-weight: 400; letter-spacing: -.015em; max-width: 24ch; text-wrap: balance; }
.quote figcaption { margin-top: clamp(16px, 3.2vh, 26px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 15px; color: var(--mute); }
.quote figcaption b { color: var(--text); font-weight: 500; }
.vbadge { display: inline-flex; align-items: center; gap: 7px; color: var(--lilac); }
.vbadge svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vbadge path { stroke-dasharray: 14; stroke-dashoffset: 0; }
.js .vbadge path { stroke-dashoffset: 14; transition: stroke-dashoffset .9s .5s var(--ease); }
.js .quote.is-in .vbadge path { stroke-dashoffset: 0; }
.rev__count { font-size: 14px; color: var(--mute); }
.quotes { display: grid; gap: clamp(26px, 4.4vh, 44px); }
.quotes[hidden], [data-reviews-sec][hidden] { display: none; }
/* at the foot of most pages the form waits behind "כתבו ביקורת" and opens in place (site.js); the reviews page keeps it open */
.rev__write { justify-self: start; margin-top: clamp(10px, 3.4vh, 30px); }
.rev__write[hidden], .rform[hidden] { display: none; }
.rev__write.is-opening { transform: scale(.98); }
.rform h3:focus { outline: none; }

.rform {
  position: relative;
  display: grid;
  align-content: center;
  border-radius: 22px;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .16), 0 40px 110px rgba(0, 0, 0, .5), 0 0 120px rgba(142, 92, 255, .18);
}
.rform h3 { margin: 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.rform .sub { margin-top: 6px; color: var(--mute); font-size: 14.5px; line-height: 1.55; }
.rform .sub .mail { display: block; width: fit-content; max-width: 100%; margin-top: 2px; color: var(--soft); overflow-wrap: anywhere; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.field { display: grid; gap: 6px; align-content: start; font-size: 13.5px; color: #d3cce2; }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: rgba(255, 255, 255, .05);
  border: 0;
  border-radius: 11px;
  padding: 11px 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  outline: none;
  transition: box-shadow .25s, background .25s;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field textarea:focus { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px var(--violet), 0 0 0 4px rgba(142, 92, 255, .2); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff7a9a; }
.err { color: #ffb3c4; font-size: 13px; }
.send { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 12px; }
.send .field { min-width: 0; }
.fine { margin-top: 12px; font-size: 13px; color: var(--mute); }
.rform__step { display: grid; }
.rform__step[hidden] { display: none; }
.rform__step[data-step="2"] { gap: 16px; }
.rform__step[data-step="2"] .btn { justify-self: start; }
.rform__links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.rform[aria-busy="true"] .btn { opacity: .6; cursor: progress; }
.linkbtn[aria-disabled="true"] { opacity: .6; cursor: default; text-decoration: none; }
.field--code { max-width: 300px; }
.field--code input { font-size: 26px; letter-spacing: .45em; text-align: center; padding: 10px 0 10px .45em; }
.rform__done { justify-items: center; text-align: center; gap: 10px; padding-block: 26px; outline: none; }
.rform__done svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(142, 92, 255, .9)); }

/* ---------- join: a strand of light runs through the steps ---------- */
.join {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: clamp(14px, 2.6vh, 22px);
  padding: clamp(72px, 14vh, 150px) var(--gr) clamp(48px, 8vh, 90px) var(--gl);
}
.join::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: min(42vh, 380px); background: linear-gradient(var(--bg), rgba(5, 3, 8, 0)); pointer-events: none; }
.join h2 { font-weight: 600; font-size: clamp(34px, min(5vw, 10.5vh), 76px); letter-spacing: -.03em; line-height: 1.04; max-width: 16ch; text-wrap: balance; }
.join .sec-p { max-width: 46ch; text-wrap: balance; }
.join__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.join__fine { max-width: 52ch; font-size: 13.5px; color: var(--mute); text-wrap: balance; }
.steps { --g: clamp(16px, 2.6vw, 40px); --n: 3; list-style: none; margin: clamp(16px, 4vh, 36px) 0 clamp(10px, 3vh, 26px); padding: 0; width: min(1040px, 100%); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--g); }
.step { --s: 0; position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; }
.step__n {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
  background: #0d0915;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: color .5s, background .6s, box-shadow .6s var(--ease);
}
.step.is-lit .step__n { color: #0c0814; background: var(--text); box-shadow: 0 0 0 1px #fff, 0 0 22px rgba(142, 92, 255, .9), 0 0 50px rgba(255, 79, 216, .4); }
.step:not(:last-child)::before, .step:not(:last-child)::after { content: ""; position: absolute; top: 17px; right: 50%; width: calc(100% + var(--g)); height: 2px; }
.step:not(:last-child)::before { background: rgba(255, 255, 255, .12); }
.step:not(:last-child)::after { background: var(--strand); box-shadow: 0 0 12px rgba(142, 92, 255, .9); transform: scaleX(var(--s)); transform-origin: right center; }
.step h3 { margin: 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; }
.step p { color: var(--mute); font-size: 14.5px; line-height: 1.55; max-width: 26ch; text-wrap: balance; }

/* ---------- the visit chapter of the cats page ---------- */
.visit { position: relative; z-index: 2; padding: 0 var(--gr) clamp(80px, 16vh, 170px) var(--gl); }

/* ---------- the way here: the closing chapter of home, with room for the map ---------- */
.way { position: relative; z-index: 2; padding: clamp(60px, 11vh, 130px) var(--gr) clamp(64px, 12vh, 130px) var(--gl); scroll-margin-top: 40px; }
.way__in { width: min(1344px, 100%); margin: 0 auto; }
.way__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 110px); align-items: end; padding-bottom: clamp(30px, 5.5vh, 54px); }
.way__h { margin: 0; max-width: 16ch; font-size: clamp(32px, 3.8vw, 54px); font-weight: 500; letter-spacing: -.026em; line-height: 1.08; text-wrap: balance; }
.way__addr { font-style: normal; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.38; letter-spacing: -.012em; color: var(--text); }
.way__dir { margin: 12px 0 0; max-width: 50ch; color: var(--soft); font-size: clamp(15px, 1.1vw, 16px); line-height: 1.65; }
.way__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.way__copy { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; color: var(--soft); transition: color .3s, background .3s; }
.way__copy:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.way__copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.way__copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.way__copy .ok { display: none; }
.way__copy.is-done { color: var(--gold-hi); }
.way__copy.is-done .ok { display: block; }
.way__copy.is-done .cp { display: none; }
.way__k { margin: 0 0 10px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--gold); }
/* the week, one day beside the other, with today taking the gold */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--line); }
.week > div { position: relative; display: grid; align-content: start; gap: 9px; padding: 20px clamp(10px, 1.3vw, 22px) 22px; }
.week > div + div { border-inline-start: 1px solid var(--line); }
.week dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--soft); font-size: 15px; line-height: 1.4; }
.week dd { margin: 0; color: var(--text); font-size: clamp(16px, 1.42vw, 21px); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.week .is-off dd { color: var(--mute); font-weight: 400; }
.week > div::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(227, 196, 140, 0), var(--gold-hi) 30%, var(--gold) 70%, rgba(227, 196, 140, 0)); box-shadow: 0 0 14px rgba(240, 198, 120, .8); transform: scaleX(0); transition: transform 1.2s var(--ease) .25s; }
.week [aria-current] { background: linear-gradient(180deg, rgba(227, 196, 140, .085), rgba(227, 196, 140, 0) 85%); }
.week [aria-current] dt, .week [aria-current] dd { color: var(--gold-hi); }
.week.is-lit [aria-current]::before { transform: scaleX(1); }
/* the map of the way here: the neighbourhood drawn from OpenStreetMap data, unfolding from the salon, a point of gold light */
.map { --s: .5; --fx: .58; --fy: .5; position: relative; margin: 0 0 clamp(34px, 6vh, 58px); aspect-ratio: 21 / 9; border-radius: 24px; overflow: hidden; background: #0b0714; isolation: isolate; }
.map::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: linear-gradient(to top, rgba(5, 3, 8, .74), rgba(5, 3, 8, 0) 62px), radial-gradient(120% 115% at calc(var(--fx) * 100%) calc(var(--fy) * 100%), rgba(11, 7, 20, 0) 50%, rgba(5, 3, 8, .66)); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .2), inset 0 1px 0 rgba(255, 255, 255, .06); pointer-events: none; }
.map__geo { position: absolute; inset: 0; z-index: 1; }
.map__cam { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: 0; height: 0; }
.map__img { position: absolute; left: calc(-1700px * var(--s)); top: calc(-750px * var(--s)); width: calc(2950px * var(--s)); height: calc(1500px * var(--s)); max-width: none; user-select: none; -webkit-user-drag: none; }
.map__lbl { position: absolute; left: calc(var(--x) * var(--s) * 1px); top: calc(var(--y) * var(--s) * 1px); transform: translate(-50%, -50%) rotate(var(--a, 0deg)); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .02em; white-space: nowrap; color: rgba(236, 226, 255, .78); text-shadow: 0 0 1px #0b0714, 0 0 2px #0b0714, 0 0 3px #0b0714, 0 0 8px #0b0714; pointer-events: none; }
.map__lbl--road { min-width: 22px; padding: 3px 6px; border-radius: 6px; font-size: 11.5px; text-align: center; color: var(--gold-hi); background: rgba(11, 7, 20, .88); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .6); text-shadow: none; }
.map__lbl--sea { font-size: 12.5px; font-weight: 400; letter-spacing: .34em; color: rgba(205, 185, 255, .76); }
.map__lamp { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(205, 185, 255, .12), rgba(205, 185, 255, 0) 70%); mix-blend-mode: screen; opacity: 0; transition: opacity .7s; }
@media (hover: hover) { .map:hover .map__lamp { opacity: 1; } }
.map__pin { position: absolute; z-index: 3; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: 0; height: 0; }
.map__pin i { position: absolute; left: 0; top: 0; border-radius: 50%; translate: -50% -50%; }
.map__dot { width: 14px; height: 14px; background: radial-gradient(circle at 38% 32%, #fffaf0 0, var(--gold-hi) 24%, var(--gold) 60%, var(--gold-lo) 100%); box-shadow: 0 0 0 2px rgba(11, 7, 20, .92), 0 0 0 3px rgba(255, 241, 207, .75), 0 0 16px 4px rgba(240, 198, 120, .85), 0 0 56px 14px rgba(240, 198, 120, .22), 0 0 90px 22px rgba(142, 92, 255, .26); }
.map__ring { width: 14px; height: 14px; box-shadow: 0 0 0 1px rgba(255, 241, 207, .75); animation: mapring 3.4s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes mapring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(7); opacity: 0; } }
.map__wave { width: 24px; height: 24px; opacity: 0; box-shadow: 0 0 0 1px rgba(255, 241, 207, .55), 0 0 40px rgba(240, 198, 120, .35), inset 0 0 30px rgba(240, 198, 120, .12); }
.map__card { position: absolute; z-index: 4; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); transform: translate(-50%, calc(-100% - 24px)); display: grid; gap: 3px; padding: 10px 16px 11px; border-radius: 14px; text-align: center; white-space: nowrap; }
.map__card::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: rgba(14, 10, 22, .74); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .34), inset 0 1px 0 rgba(255, 255, 255, .1), 0 16px 44px rgba(0, 0, 0, .55); }
.map__card::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 17px; background: linear-gradient(var(--gold-hi), rgba(227, 196, 140, 0)); }
.map__card b { font-size: 14.5px; font-weight: 500; letter-spacing: .01em; color: var(--gold-hi); }
.map__card span { font-size: 12.5px; color: var(--soft); }
.map__scale { position: absolute; z-index: 6; right: 18px; bottom: 13px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1; color: rgba(236, 226, 255, .6); }
.map__scale i { display: block; width: calc(200px * var(--s)); height: 5px; border: 1px solid rgba(227, 196, 140, .65); border-top: 0; }
.map__credit { position: absolute; z-index: 6; left: 18px; bottom: 11px; margin: 0; font-size: 11px; line-height: 1.3; color: rgba(236, 226, 255, .52); }
.map__credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; transition: color .3s; }
.map__credit a:hover { color: var(--text); }
/* the reveal: the streets unfold outward from the salon while a ring of light travels with them */
.js .map__geo { clip-path: circle(0% at calc(var(--fx) * 100%) calc(var(--fy) * 100%)); transition: clip-path 2.6s cubic-bezier(.22, .8, .24, 1); }
.js .map__cam { transform: scale(1.08); transition: transform 3.2s cubic-bezier(.16, 1, .3, 1); }
.js .map__dot { transform: scale(0); transition: transform .9s .35s cubic-bezier(.34, 1.56, .64, 1); }
.js .map__card { opacity: 0; translate: 0 10px; transition: opacity 1s 1.2s, translate 1.2s 1.2s cubic-bezier(.16, 1, .3, 1); }
.js .map.is-on .map__geo { clip-path: circle(150% at calc(var(--fx) * 100%) calc(var(--fy) * 100%)); }
.js .map.is-on .map__cam, .js .map.is-on .map__dot { transform: none; }
.js .map.is-on .map__card { opacity: 1; translate: 0 0; }
.map.is-on .map__wave { animation: mapwave 2.8s .15s cubic-bezier(.22, .8, .24, 1) both; }
@keyframes mapwave { 0% { transform: scale(.3); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(40); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .map__geo, .js .map__cam, .js .map__dot, .js .map__card { clip-path: none; transform: none; opacity: 1; translate: none; transition: none; }
  .js .map__card { transform: translate(-50%, calc(-100% - 24px)); }
  .map__ring, .map.is-on .map__wave { animation: none; }
}
.way__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px clamp(24px, 3.2vw, 56px); margin-top: clamp(26px, 4.8vh, 44px); }
.way__notes p { margin: 0; max-width: 40ch; color: var(--soft); font-size: clamp(15px, 1.1vw, 16px); line-height: 1.65; }
.way__notes a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 5px; transition: text-decoration-color .3s; }
.way__notes a:hover { text-decoration-color: var(--gold); }
/* on home the way here already holds the address, the hours and the contacts, so the footer does not repeat them */
[data-page="home"] .ftr__col--visit { display: none; }
@media (min-width: 1000px) {
  [data-page="home"] .ftr__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}

/* ---------- questions ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
/* the question a link pointed at is lit for a moment */
.faq details.is-hit { animation: faq-hit 2.6s cubic-bezier(.16, 1, .3, 1); }
@keyframes faq-hit { 0%, 30% { background: rgba(227, 196, 140, .07); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .45), 0 0 44px rgba(240, 198, 120, .14); } }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 16px 0;
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.faq .pm { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: box-shadow .3s, background .3s; }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease); }
.faq .pm::after { transform: rotate(90deg); }
.faq details[open] .pm { color: var(--gold-hi); background: rgba(227, 196, 140, .14); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .6); }
.faq details[open] .pm::after { transform: rotate(0deg); }
.faq summary:hover .pm { box-shadow: inset 0 0 0 1px var(--gold); }
.faq .ans { overflow: hidden; }
.faq .ans p { padding: 0 0 22px; color: var(--soft); font-size: 16px; line-height: 1.7; max-width: 66ch; text-wrap: pretty; }

/* ---------- footer: a band of light passes over the name on the way down ---------- */
.ftr {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: clamp(48px, 10vh, 100px) var(--gr) calc(40px + env(safe-area-inset-bottom, 0px)) var(--gl);
}
.ftr__in { width: min(1344px, 100%); margin: 0 auto; }
.ftr__mark {
  direction: ltr;
  text-align: center;
  font-weight: 600;
  font-size: clamp(60px, 15vw, 228px);
  line-height: .92;
  letter-spacing: -.05em;
  background: linear-gradient(100deg, #463a5e 0%, #463a5e 30%, #9a7438 38%, #f0d8a6 44%, #fff6de 48%, #e3c48c 53%, #a77d3c 60%, #463a5e 70%, #463a5e 100%);
  background-size: 300% 100%;
  background-position: 50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* the crest closes the page, small and centred under everything (exact cuts for 96 and 120 px, so no resampling):
   it lights up like a neon sign the first time it comes into view, then hums softly while seen */
.ftr__crest { position: relative; isolation: isolate; width: 96px; aspect-ratio: 1634 / 1381; margin: 44px auto 0; }
.ftr__crest img { position: absolute; display: block; max-width: none; pointer-events: none; }
.ftr__logo { inset: 0; width: 100%; height: 100%; }
.ftr__rim, .ftr__aura { z-index: -1; top: -30%; left: -30%; width: 160%; height: 160%; opacity: 0; }
.ftr__crest.is-lit .ftr__rim { opacity: .8; }
.ftr__crest.is-lit .ftr__aura { opacity: .5; }
/* the gleam's mask is asked for only once the crest lights up, so no page loads it before it is seen */
.ftr__crest.is-lit .ftr__lit { -webkit-mask: url(media/brand/crest-f120@3x.webp) center / 100% 100% no-repeat; mask: url(media/brand/crest-f120@3x.webp) center / 100% 100% no-repeat; }
@media (min-width: 1000px) { .ftr__crest { width: 120px; margin-top: 56px; } }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 32px 36px; margin-top: clamp(32px, 7vh, 64px); padding-top: 30px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--mute); }
.ftr__first { display: grid; gap: 18px; align-content: start; justify-items: start; }
.ftr__lead { color: var(--text); font-size: 17px; line-height: 1.5; max-width: 26ch; }
.ftr h2 { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: rgba(166, 159, 186, .8); }
.ftr nav, .ftr__col { display: grid; gap: 9px; align-content: start; justify-items: start; }
.ftr nav a, .ftr__col a { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.ftr__legal > a { display: inline-flex; align-items: center; min-height: 24px; }
.ftr a:hover { color: var(--text); }
.ftr__col a.ftr__mail { flex-direction: column; align-items: flex-start; gap: 1px; }
.ftr__mail small { font-size: 12.5px; color: rgba(166, 159, 186, .8); }
/* a day and its hours never part across lines */
.ftr__nw { white-space: nowrap; }
.ftr__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: rgba(166, 159, 186, .85); }
.lang { display: inline-flex; gap: 2px; margin-inline-start: auto; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.lang a { padding: 4px 10px; border-radius: 7px; }
.lang a[aria-current="true"] { color: #1c1307; background: linear-gradient(180deg, #fbecc6, #e3c48c); }
.ftr__still { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ftr__still i { position: relative; flex: none; width: 28px; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.ftr__still i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--mute); transition: inset-inline-start .35s var(--ease), background .35s var(--ease); }
.ftr__still[aria-pressed="true"] { color: var(--soft); }
.ftr__still[aria-pressed="true"] i { background: rgba(227, 196, 140, .14); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .55); }
.ftr__still[aria-pressed="true"] i::after { inset-inline-start: 15px; background: var(--gold); }
@media (hover: hover) { .ftr__still:hover { color: var(--text); } }
/* motion stopped from the footer switch: nothing moves on its own (chrome.js also turns on the reduced-motion rules) */
html.still *, html.still *::before, html.still *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.ftr__draft { margin-top: 22px; font-size: 13px; color: var(--mute); }
.ftr__draft a { color: var(--soft); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- service pages: the pieces every treatment page shares ---------- */
/* the opener: a sticky stage where the film opens from a slit and fills the screen. Each page decides where the film goes on scroll. */
.ph { position: relative; z-index: 2; height: 100svh; }
.ph__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ph .film { --shade: 1; position: absolute; inset: 0; z-index: 1; transform-origin: 0 0; will-change: transform, clip-path; }
.ph .film__in { position: absolute; inset: 0; overflow: hidden; background: #000; }
.ph .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* an opening film's first picture, as a plain image under it: on screen from the first frame, until the film plays */
.film__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .film__in::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--shade);
  /* a deeper shade in the corner the words sit in, so the title and the lines under it read on the lightest frames */
  background:
    radial-gradient(ellipse 90% 100% at 100% 100%, rgba(6, 4, 12, .62) 0%, rgba(6, 4, 12, .48) 42%, rgba(6, 4, 12, .3) 66%, rgba(6, 4, 12, 0) 92%),
    linear-gradient(to top, rgba(0, 0, 0, .76) 0%, rgba(0, 0, 0, .3) 36%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, 0) 22%);
}
.ph__copy { position: absolute; z-index: 4; inset-inline-start: var(--gr); bottom: clamp(26px, 6.2vh, 64px); max-width: min(780px, 62vw); }
.ph__copy h1 { font-weight: 500; font-size: clamp(44px, min(7.2vw, 14.6vh), 116px); line-height: 1; letter-spacing: -.02em; }
.ph__copy h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ph__copy h1 .ln > span { display: block; background: linear-gradient(180deg, #fff 42%, #dccff9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph__copy .lead { margin-top: clamp(12px, 2.4vh, 22px); color: rgba(244, 241, 250, .92); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; }
.ph__copy .chips { margin-top: clamp(10px, 1.8vh, 16px); }
.ph__copy .chips span { background: rgba(10, 6, 16, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ph__copy .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(16px, 3vh, 28px); }
.ph__fine { margin-top: clamp(10px, 1.8vh, 14px); font-size: 13.5px; color: rgba(244, 241, 250, .8); }
/* the opening (keyframes under "opening" below): the film opens from a slit and settles, then the title rises line by line */
@media (prefers-reduced-motion: no-preference) {
  .ph .film__in { animation: sd-slit 1.5s cubic-bezier(.87, 0, .13, 1) .2s backwards; }
  .ph .film video, .ph .film__pic img, .ph .wire, .ph .silk, .ph .paint { animation: sd-settle 2.4s cubic-bezier(.33, 1, .68, 1) .3s backwards; }
  .ph__copy h1 .ln > span { animation: sd-rise 1.25s var(--ease) .85s backwards; }
  .ph__copy h1 .ln + .ln > span { animation-delay: .96s; }
  .ph__copy h1 .ln + .ln + .ln > span { animation-delay: 1.07s; }
  .ph__copy .lead, .ph__copy .chips, .ph__copy .acts, .ph__fine { animation: sd-up 1.1s var(--ease) 1.1s backwards; }
  .ph__copy .chips { animation-delay: 1.18s; }
  .ph__copy .acts { animation-delay: 1.26s; }
  .ph__fine { animation-delay: 1.34s; }
  .ph__copy .lead { animation-name: sd-surface; animation-duration: 1.25s; }
}
@media (max-aspect-ratio: 1/1) {
  .ph__copy { inset-inline-end: var(--gl); max-width: none; }
  .ph__copy h1 { font-size: min(13.6vw, 8vh); }
  /* on a tall screen the words take the lower half: the shade rises with them */
  .ph .film__in::after {
    background:
      linear-gradient(to top, rgba(6, 4, 12, .86) 0%, rgba(6, 4, 12, .7) 30%, rgba(6, 4, 12, .5) 48%, rgba(6, 4, 12, .26) 62%, rgba(6, 4, 12, 0) 76%),
      linear-gradient(to bottom, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .3) 12%, rgba(0, 0, 0, 0) 24%);
  }
}
/* on a phone, the lines under the title are there from the first frame, in a soft light that comes up to full as the film
   or the drawing opens; a page that opens on a drawing also raises its title sooner */
@media (prefers-reduced-motion: no-preference) and (max-width: 999px) {
  .ph:has(.film__in > canvas) .ph__copy h1 .ln > span { animation-delay: .3s; }
  .ph:has(.film__in > canvas) .ph__copy h1 .ln + .ln > span { animation-delay: .41s; }
  .ph:has(.film__in > canvas) .ph__copy h1 .ln + .ln + .ln > span { animation-delay: .52s; }
  .ph :is(.ph__copy .lead, .ph__copy .chips, .ph__copy .acts, .ph__fine) { animation: sd-wake 1.4s var(--ease) .55s backwards; }
}

/* a real case: the line that closes it */
.story .case__close { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 30ch; text-wrap: balance; }
.story .case__intro { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--soft); max-width: 36ch; text-wrap: balance; }
.story .beats span { max-width: 58ch; }

/* who it is for: breed names strung on a line of light */
.breeds-clip { overflow-x: clip; }
.breeds { --sep: clamp(18px, 2vw, 34px); --sm: clamp(12px, 1.3vw, 22px); list-style: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; margin-inline-start: calc(-1 * (var(--sep) + 2 * var(--sm))); }
.breeds li { display: flex; align-items: center; font-size: clamp(30px, 3.8vw, 58px); font-weight: 500; letter-spacing: -.03em; line-height: 1.22; white-space: nowrap; }
.breeds li::before { content: ""; flex: none; width: var(--sep); height: 2px; margin: 0 var(--sm); border-radius: 2px; background: var(--strand); box-shadow: 0 0 10px rgba(142, 92, 255, .9); }

/* steps: the text scrolls, and the frame beside it follows the step being read */
.proc2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.pmed { --pmh: min(76svh, 640px); grid-column: 2; grid-row: 1; position: sticky; top: max(calc(var(--hdr-h) + 24px), calc(50svh - var(--pmh) / 2)); justify-self: center; width: min(100%, calc(var(--pmh) * .8)); }
.pmed__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #120c1c; box-shadow: 0 40px 120px rgba(0, 0, 0, .5), 0 0 110px rgba(142, 92, 255, .22); }
.pmed__frame::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none; }
.pmed__item { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.4s var(--ease); }
.pmed__item.on { opacity: 1; transform: none; }
.pmed__item--type { display: grid; place-items: center; padding: 28px; text-align: center; background: radial-gradient(120% 90% at 50% 112%, rgba(142, 92, 255, .55), rgba(255, 79, 216, .16) 45%, #0d0915 80%); }
.pmed__item--type p { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.22; max-width: 14ch; text-wrap: balance; }
.pmed__count { position: absolute; z-index: 2; bottom: 14px; inset-inline-start: 16px; padding: 3px 10px; border-radius: 8px; font-size: 13px; color: rgba(255, 255, 255, .78); background: rgba(10, 6, 16, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; }
.pmed__count b { color: #fff; font-weight: 600; }
.chaps { --s: 0; grid-column: 1; grid-row: 1; position: relative; list-style: none; padding-inline-start: 64px; }
.chaps::before, .chaps::after { content: ""; position: absolute; inset-inline-start: 19px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; }
.chaps::before { background: rgba(255, 255, 255, .1); }
.chaps::after { background: linear-gradient(180deg, #fff, var(--violet) 60%, var(--magenta)); box-shadow: 0 0 12px rgba(142, 92, 255, .9); transform: scaleY(var(--s)); transform-origin: center top; }
.chap { position: relative; min-height: 56svh; display: grid; align-content: start; gap: 12px; opacity: .64; transition: opacity .6s var(--ease); }
.chap:last-child { min-height: 46svh; }
.chap.is-on { opacity: 1; }
.chap__n { position: absolute; z-index: 1; inset-inline-start: -64px; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--mute); background: #0d0915; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: color .5s, background .6s, box-shadow .6s var(--ease); font-variant-numeric: tabular-nums; }
.chap.is-on .chap__n, .chap.is-past .chap__n { color: #0c0814; background: var(--text); box-shadow: 0 0 0 1px #fff, 0 0 22px rgba(142, 92, 255, .9), 0 0 50px rgba(255, 79, 216, .35); }
.chap h3 { padding-top: 2px; font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.chap p { color: var(--soft); font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.7; max-width: 50ch; }

/* a coat drawn live in a step frame: what it shows now, and how to touch it */
.coat__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.coat__state { position: absolute; z-index: 2; top: 14px; inset-inline-start: 16px; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; color: #fff; background: rgba(10, 6, 16, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.coat__hint { position: absolute; z-index: 2; bottom: 14px; inset-inline-end: 16px; display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 10px; font-size: 13px; color: rgba(255, 255, 255, .84); background: rgba(10, 6, 16, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; transition: opacity .6s; }
.coat__hint::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--strand); box-shadow: 0 0 8px rgba(142, 92, 255, .9); }
.coat__hint span { display: none; }
.is-used .coat__hint { opacity: 0; }
.sd-soft .coat__hint, .sd-soft .pal__h { display: none; }
@media (hover: hover) and (pointer: fine) { .coat__hint .h-mouse { display: inline; } }
@media (hover: none), (pointer: coarse) { .coat__hint .h-touch { display: inline; } }

/* a long statement reads a little smaller and wider */
.say--long h2 { max-width: 21ch; font-size: clamp(30px, min(4.4vw, 9.4vh), 68px); }

/* who it is for, in groups of breeds; a short word beside them */
.groups { display: grid; gap: clamp(22px, 4.2vh, 40px); }
.group { display: grid; gap: 4px; }
.group h3 { font-size: 14.5px; font-weight: 500; color: var(--lilac); }
.breeds--sm li { font-size: clamp(24px, 2.7vw, 40px); }
.short { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px clamp(24px, 5vw, 90px); margin-top: clamp(56px, 11vh, 120px); padding-top: clamp(24px, 4vh, 40px); border-top: 1px solid var(--line); }
.short .sub-h { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.022em; }
.short__more { display: grid; gap: 16px; justify-items: start; }

/* a real case, and a second one beside it */
.case__aside { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: clamp(18px, 3vh, 28px) clamp(26px, 4vw, 56px) 0; max-width: 90ch; color: var(--soft); font-size: 16px; line-height: 1.65; }
.case__aside p { flex: 1 1 40ch; }

/* ---------- two tracks and the prices ---------- */
.tracks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
.track { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 44px); border-radius: 24px; overflow: hidden; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .15), 0 40px 110px rgba(0, 0, 0, .45); }
.track::before { content: ""; position: absolute; inset: auto 0 0; height: 70%; background: radial-gradient(80% 100% at 50% 100%, rgba(142, 92, 255, .16), rgba(142, 92, 255, 0)); pointer-events: none; }
.track > * { position: relative; }
.track__en { font-size: 14px; color: var(--gold); }
.track h3 { font-size: clamp(28px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.025em; line-height: 1.08; }
.track__lead { color: var(--text); font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; }
.track__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--gold-line); color: var(--soft); font-size: 15px; }
.track__price b { font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; color: var(--gold); letter-spacing: -.02em; white-space: nowrap; }
.track__price + .track__price { margin-top: 0; padding-top: 12px; }
.rhythm { margin: 4px 0 2px; }
.rhythm ol { position: relative; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); height: 44px; }
.rhythm ol::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .14); }
.rhythm li { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; }
.rhythm__axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12.5px; color: var(--mute); }
.m { position: relative; z-index: 1; display: block; flex: none; border-radius: 50%; }
.m--full { width: 18px; height: 18px; background: var(--gold-hi); box-shadow: 0 0 0 4px rgba(227, 196, 140, .2), 0 0 18px rgba(240, 198, 120, .9), 0 0 36px rgba(142, 92, 255, .45); }
.m--maint { width: 12px; height: 12px; background: #0d0915; box-shadow: inset 0 0 0 1.5px var(--lilac), 0 0 10px rgba(142, 92, 255, .5); }
.m--home { width: 3px; height: 13px; border-radius: 2px; background: rgba(205, 188, 255, .6); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; font-size: 13.5px; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 9px; }
.tracks__rule { margin-top: 14px; max-width: 78ch; color: var(--soft); font-size: 15px; line-height: 1.65; }
.ptable { margin-top: clamp(16px, 2vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .15), 0 40px 110px rgba(0, 0, 0, .45); }
.ptable__col { padding: clamp(24px, 3vw, 44px); display: grid; gap: 16px; align-content: start; }
.ptable__col + .ptable__col { border-inline-start: 1px solid var(--line); }
.ptable h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.018em; line-height: 1.2; }
.ptable h3 small { font-size: 14.5px; font-weight: 400; color: var(--mute); letter-spacing: 0; }
.ptable h4 { margin: 10px 0 0; font-size: 14px; font-weight: 500; color: var(--lilac); }
.prows { margin: 0; display: grid; }
.prows div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(227, 196, 140, .17); }
.prows dt { color: var(--soft); font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.45; }
.prows dt small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--mute); }
.prows dd { margin: 0; font-size: clamp(16px, 1.3vw, 18.5px); font-weight: 500; white-space: nowrap; color: var(--gold); }
.prows--big dt { color: var(--text); }
.prows--big dd { font-size: clamp(19px, 1.7vw, 24px); }
.ptable .note { color: var(--soft); font-size: 15px; line-height: 1.65; }
.ptable .list-dash { gap: 6px; font-size: 15px; }
.list-dash--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }

/* ---------- before and after the visit ---------- */
.vi { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
.vi__col { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.vi__col > p { color: var(--soft); font-size: 16px; line-height: 1.7; }
.checks { list-style: none; display: grid; gap: 12px; }
.checks li { position: relative; padding-inline-start: 32px; color: var(--soft); font-size: 16px; line-height: 1.55; }
.checks svg { position: absolute; inset-inline-start: 0; top: 2px; width: 20px; height: 20px; fill: none; stroke: var(--lilac); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.checks circle { stroke: rgba(205, 188, 255, .35); }
.checks path { stroke-dasharray: 14; stroke-dashoffset: 0; }
.js .checks path { stroke-dashoffset: 14; transition: stroke-dashoffset .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
.js .checks.is-in path { stroke-dashoffset: 0; }

/* ---------- questions ---------- */
.qa { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 100px); align-items: start; }
.qa .sec-head { position: sticky; top: calc(var(--hdr-h) + 48px); margin-bottom: 0; }

/* the request to join: links to the other treatments */
.join .more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin-top: clamp(20px, 5vh, 46px); padding-top: 22px; border-top: 1px solid var(--gold-line); width: min(860px, 100%); font-size: 15px; color: var(--mute); }

/* ---------- small screens ---------- */
@media (max-width: 999px) {
  .tracks, .ptable, .vi, .qa { grid-template-columns: 1fr; }
  .qa .sec-head { position: static; }
  .ptable__col + .ptable__col { border-inline-start: 0; border-top: 1px solid var(--line); }
  .proc2__grid { grid-template-columns: 1fr; gap: 0; }
  .pmed { grid-column: 1; grid-row: auto; z-index: 3; top: 0; width: 100%; padding-top: 10px; background: var(--bg); justify-self: stretch; }
  .pmed::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 34px; background: linear-gradient(var(--bg), rgba(5, 3, 8, 0)); pointer-events: none; }
  .pmed__frame { aspect-ratio: auto; height: 42svh; }
  .chaps { grid-column: 1; grid-row: auto; padding-top: 36px; padding-inline-start: 54px; }
  .chaps::before, .chaps::after { inset-inline-start: 17px; top: 56px; }
  .chap { min-height: 46svh; }
  .chap:last-child { min-height: 36svh; }
  .chap__n { inset-inline-start: -54px; width: 36px; height: 36px; font-size: 12.5px; }
  .nav, .hdr__end > .icon-btn, .hdr__end > .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .hdr { justify-content: space-between; height: 56px; padding-inline-start: 12px; padding-inline-end: 6px; }
  /* on phones the music has a row of its own in the menu (Raven's choice, 2026-10-26), and the dock keeps its two buttons */
  .dock { display: grid; }
  .player { display: none; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .ftr { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftr__first { grid-column: 1 / -1; }
  .lang { margin-inline-start: 0; }
  .case { grid-template-columns: 1fr; }
  .short { grid-template-columns: 1fr; }
}
@media (min-width: 1000px) {
  .menu { display: none !important; }
}
@media (max-width: 860px) {
  .rev__in { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .way__top { grid-template-columns: 1fr; align-items: start; }
  .way__h { max-width: 18ch; }
}
@media (max-width: 860px) {
  .week { grid-template-columns: 1fr; }
  .week > div { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 13px 14px; }
  .week > div + div { border-inline-start: 0; border-top: 1px solid var(--line); }
  .week dd { font-size: 17px; }
  .week > div::before { inset-inline: 0 auto; inset-block: 8px; width: 2px; height: auto; top: 8px; transform: scaleY(0); }
  .week [aria-current] { background: linear-gradient(270deg, rgba(227, 196, 140, .1), rgba(227, 196, 140, 0) 75%); }
  .week.is-lit [aria-current]::before { transform: scaleY(1); }
  .way__notes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .way__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .way__acts .btn { padding: 0 8px; font-size: 14.5px; }
  .way__copy { grid-column: 1 / -1; justify-self: start; height: 40px; padding: 0 10px; margin-inline-start: -10px; }
}
@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; gap: 26px; width: min(440px, 100%); text-align: start; }
  .step { grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; justify-items: start; }
  .step__n { grid-row: 1 / 3; margin: 0; }
  .step h3, .step p { grid-column: 2; }
  .step p { max-width: none; text-wrap: pretty; }
  .step h3 { align-self: center; min-height: 36px; display: flex; align-items: center; }
  .step:not(:last-child)::before, .step:not(:last-child)::after { top: 36px; right: 17px; width: 2px; height: calc(100% - 36px + 26px); }
  .step:not(:last-child)::after { background: linear-gradient(180deg, #fff, var(--violet) 60%, var(--magenta)); transform: scaleY(var(--s)); transform-origin: center top; }
}
@media (max-width: 560px) {
  .prows div { flex-wrap: wrap; gap: 2px 16px; }
  .list-dash--2 { grid-template-columns: 1fr; }
  .fields, .send { grid-template-columns: 1fr; }
  .send .btn { width: 100%; }
  .ftr__grid { grid-template-columns: 1fr; }
}
@media (max-height: 560px) and (min-width: 1000px) {
  .hdr { --hdr-h: 46px; top: calc(8px + env(safe-area-inset-top, 0px)); }
  .hdr .crest { --crest-h: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pmed__item { transition: none; transform: none; }
  .js .checks path { stroke-dashoffset: 0; transition: none; }
  .js .vbadge path { stroke-dashoffset: 0; transition: none; }
  .player.is-playing .eq i { animation: none; }
  .mpv__item img { transition: none; }
}

/* ---------- gold: the name, statements touched by light, and the way between pages ---------- */
::selection { background: rgba(227, 196, 140, .9); color: #1c1307; }
@keyframes leaf { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* statements: once the words have risen, a band of gold light crosses them, from where reading starts.
   Every word draws the same band, placed by its own offset in the heading, so the light runs on as one. */
@property --gp { syntax: '<number>'; inherits: true; initial-value: 0; }
.gw {
  background-image: linear-gradient(90deg, var(--text) 0%, var(--text) 42%, #e3c48c 46.5%, #fff3d4 50%, #e3c48c 53.5%, var(--text) 58%, var(--text) 100%);
  background-size: calc(var(--hw) * 3) 100%;
  background-repeat: no-repeat;
  background-position: calc(var(--hw) * (-.2 - 1.6 * var(--gp)) - var(--wx)) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@keyframes gild { from { --gp: 0; } to { --gp: 1; } }
/* a thread of gold opens across the top when a page arrives */
.arrive { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(227, 196, 140, 0), var(--gold) 28%, var(--gold-hi) 50%, var(--gold) 72%, rgba(227, 196, 140, 0)); box-shadow: 0 0 12px rgba(240, 198, 120, .8); opacity: 0; }
@keyframes arrive { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
/* ---------- opening: the first second of every page runs on the style sheet, from the very first paint ----------
   Titles, words and the header do not wait for the scripts, which load in the background. Each animation fills
   backwards only, so once it ends the element is back in the hands of the page's own scripts. The motion lives in
   the separate translate and scale properties, which add to any transform a script sets. */
@keyframes sd-rise { from { translate: 0 var(--rise, 108%); } }
@keyframes sd-up { from { opacity: 0; translate: 0 var(--up, 22px); } }
@keyframes sd-fade { from { opacity: 0; visibility: hidden; } }
@keyframes sd-show { from { opacity: 0; } }
@keyframes sd-wake { from { opacity: .4; translate: 0 var(--up, 14px); } }
@keyframes sd-dawn { from { filter: brightness(.3); } }
/* a paragraph rises from under its own lower edge, as the title lines rise from under theirs: the clip moves with it
   by exactly as much, so the edge stays put and nothing fades */
@keyframes sd-surface { from { translate: 0 100%; clip-path: inset(-.4em -1em 100% -1em); } to { clip-path: inset(-.4em -1em -.4em -1em); } }
@keyframes sd-slit { from { clip-path: inset(var(--slit, 49.6%) 0% var(--slit, 49.6%) 0%); } to { clip-path: inset(0% 0% 0% 0%); } }
/* on a phone the film opens from a cinemascope strip (2.39:1) rather than a hairline, so the picture is there from the first frame */
@media (max-width: 999px) { .film__in { --slit: calc(50% - 20.9vw); } }
@keyframes sd-settle { from { scale: var(--settle, 1.14); } }
/* neon: a tube catching, flickering twice, then holding; the gleam crosses from where reading starts */
@keyframes crest-on { 0% { opacity: 0; } 9% { opacity: .9; } 13% { opacity: .1; } 21% { opacity: .8; } 25% { opacity: .25; } 40% { opacity: 1; } 100% { opacity: .5; } }
@keyframes neon-on { 0% { opacity: 0; } 7% { opacity: .85; } 10% { opacity: .05; } 17% { opacity: .7; } 20% { opacity: .15; } 34% { opacity: 1; } 100% { opacity: .8; } }
@keyframes neon-hum { from { opacity: .8; } to { opacity: .58; } }
@keyframes aura-on { from { opacity: 0; scale: .86; } }
@keyframes crest-sweep { from { transform: translateX(60%); } to { transform: translateX(-60%); } }
@media (prefers-reduced-motion: no-preference) {
  .hdr { --up: -18px; animation: sd-up 1.1s var(--ease) .3s backwards; }
  /* pages that open on a film: the header comes in once the film is open, its parts one after another */
  [data-intro="film"] .hdr { animation: sd-fade 1s var(--ease) .95s backwards; }
  [data-intro="film"] .hdr > .nav, [data-intro="film"] .hdr > .hdr__end { --up: -12px; animation: sd-up 1s var(--ease) 1.06s backwards; }
  [data-intro="film"] .hdr > .hdr__end { animation-delay: 1.12s; }
  [data-intro="film"] .hdr > .brand { --up: -12px; animation: sd-up 1s var(--ease) 1s backwards; }
  [data-intro="film"] .hdr > .brand .brand__name { animation: leaf 2.8s var(--ease) 1s backwards; }
  [data-intro="film"] { --crest-at: 1.25s; }
}
@media (prefers-reduced-motion: no-preference) {
  .brand__name { animation: leaf 2.8s var(--ease) .35s backwards; }
  /* the crest's neon comes on as the page opens (and again whenever the menu opens), then the gleam crosses it */
  .crest__light { animation: crest-on 2.4s linear var(--crest-at, .6s) backwards; }
  .crest__lit > i { animation: crest-sweep 1.7s var(--ease) calc(var(--crest-at, .6s) + .55s) backwards; }
  .menu .crest { --crest-at: .2s; }
  .sd-soft .menu .crest__light, .sd-soft .menu .crest__lit > i { animation: none; }
  .ftr__crest.is-lit .ftr__rim { animation: neon-on 2s linear backwards, neon-hum 3.8s ease-in-out 2s infinite alternate; }
  .ftr__crest.is-lit:not(.is-on) .ftr__rim, .ftr__crest.is-soft .ftr__rim { animation-play-state: running, paused; }
  .ftr__crest.is-lit .ftr__aura { animation: aura-on 3s var(--ease) .2s backwards; }
  .ftr__crest.is-lit .ftr__lit > i { animation: crest-sweep 2.2s var(--ease) 1.15s backwards; }
  .is-gilt { animation: gild 2.4s cubic-bezier(.45, 0, .2, 1) both; }
  .arrive { animation: arrive 1.9s var(--ease) .12s both; }
  @view-transition { navigation: auto; }
  /* the new page settles over the old one; the header and the player, the same on both, never flicker
     (they are not named on their own, since a named element stops the glass of the header from blurring) */
  ::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: vt-in .5s var(--ease) both; mix-blend-mode: normal; }
  /* the flight (r19): the film clicked on home grows into the opening film of its page while home fades out under it.
     The script in each page's head names the two films only for that one navigation (vt-film), since a named element
     keeps its own snapshot; vt-flight stays, so the opening's slit and settle do not run again over a film that is open */
  :root.vt-film .ph .film { view-transition-name: film; }
  :root.vt-flight::view-transition-group(film) { animation-duration: 1.15s; animation-timing-function: cubic-bezier(.22, .78, .1, 1); }
  :root.vt-flight::view-transition-image-pair(film) { overflow: clip; animation: vt-round 1.15s cubic-bezier(.22, .78, .1, 1) both; }
  :root.vt-flight::view-transition-old(film), :root.vt-flight::view-transition-new(film) { width: 100%; height: 100%; object-fit: cover; animation-duration: .8s; }
  :root.vt-flight::view-transition-old(root) { animation: vt-out .5s cubic-bezier(.4, 0, .2, 1) both; }
  :root.vt-flight::view-transition-new(root) { animation: vt-in .7s .4s cubic-bezier(.2, .7, .2, 1) both; }
  :root.vt-flight .ph .film__in, :root.vt-flight .ph .film video, :root.vt-flight .ph .film__pic img { animation: none !important; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-round { from { border-radius: 18px; } to { border-radius: 0; } }

/* the map at smaller sizes: a little closer, the salon nearer the middle */
@media (max-width: 860px) {
  .map { --s: .45; --fx: .55; aspect-ratio: 16 / 10; border-radius: 20px; }
}
@media (max-width: 640px) {
  .map { --s: .42; --fx: .5; --fy: .52; aspect-ratio: 4 / 5; border-radius: 18px; margin-inline: calc(var(--gl) * -.35) calc(var(--gr) * -.35); }
  .map__card { padding: 8px 13px 9px; }
  .map__card b { font-size: 13.5px; }
  .map__card span { font-size: 12px; }
  .map__scale { right: 14px; bottom: 11px; }
  .map__credit { left: 14px; bottom: 9px; font-size: 10.5px; }
}

/* ---------- a craft in two films: a gold thread runs from the first film to the second as the page scrolls ---------- */
.duo__head { max-width: 62ch; }
.duo__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(64px, 10vw, 180px); margin-top: clamp(36px, 7vh, 72px); }
.duo__col { position: relative; z-index: 1; display: grid; align-content: start; justify-items: start; gap: clamp(22px, 3.6vh, 36px); }
.duo__col--b { padding-top: clamp(160px, 34vh, 380px); }
.duo__film { margin: 0; width: min(100%, 440px); }
.duo__frame { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #120c1c; box-shadow: 0 0 0 1px rgba(227, 196, 140, .22), 0 40px 110px rgba(0, 0, 0, .5), 0 0 110px rgba(142, 92, 255, .16); }
.duo__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 3vh, 28px); max-width: 440px; }
.duo__beats h3 { font-size: clamp(19px, 1.5vw, 23px); font-weight: 500; letter-spacing: -.012em; color: var(--gold-hi); }
.duo__beats p { margin-top: 6px; color: var(--soft); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; text-wrap: pretty; }
.duo__thread { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.duo__thread path { fill: none; stroke: #e9c98a; stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(240, 198, 120, .7)); }
.duo__thread circle { fill: #fff6dc; opacity: 0; filter: drop-shadow(0 0 8px rgba(255, 220, 150, .95)); transition: opacity .3s; }

/* ---------- one moment from the bath: a tall film with water light drifting across it ---------- */
.moment__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 7vw, 120px); align-items: center; }
.moment__film { margin: 0; justify-self: center; width: min(100%, 440px, calc(82svh * 9 / 16)); }
.moment__frame { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #120c1c; box-shadow: 0 0 0 1px rgba(227, 196, 140, .24), 0 50px 130px rgba(0, 0, 0, .55), 0 0 140px rgba(110, 170, 255, .16); }
.moment__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.moment__frame::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(30% 22% at 30% 30%, rgba(170, 210, 255, .2), transparent 70%), radial-gradient(26% 20% at 70% 65%, rgba(255, 236, 200, .14), transparent 70%); mix-blend-mode: soft-light; pointer-events: none; }
.moment__txt { display: grid; gap: 18px; max-width: 46ch; }
.moment__note { padding-top: 16px; border-top: 1px solid var(--gold-line); color: var(--mute); font-size: 15px; line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) {
  .moment__frame::after { animation: water 14s ease-in-out infinite alternate; }
  @keyframes water { to { transform: translate(6%, -5%) rotate(4deg); } }
}

@media (max-width: 999px) {
  .duo__stage { grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 7vh, 64px); }
  .duo__col--b { padding-top: 0; }
  .duo__film { width: min(100%, 420px); }
  .duo__thread { display: none; }
  .moment__in { grid-template-columns: minmax(0, 1fr); }
  .moment__film { width: min(78vw, 380px); }
}

/* ---------- r15: the fixes of the outside critique (2026-10-26) ---------- */
/* a tap answers from the control itself, in its own shape and colour, never with the browser's grey or blue box */
html { -webkit-tap-highlight-color: transparent; }
.acc__h button { border-radius: 10px; transition: background .25s var(--ease), transform .25s var(--ease); }
.seg button { transition: background .25s, color .3s, transform .25s var(--ease); }
.icon-btn, .menu-btn { transition: background .25s, transform .25s var(--ease); }
.player__btn { transition: box-shadow .4s var(--ease), background .3s, transform .25s var(--ease); }
.acc__h button:active, .seg button:not([aria-checked="true"]):active { background: rgba(255, 255, 255, .08); transform: scale(.98); transition-duration: 0s; }
.icon-btn:active, .menu-btn:active { background: rgba(255, 255, 255, .16); transform: scale(.96); transition-duration: 0s; }
.player__btn:active { transform: scale(.94); transition-duration: 0s; }
.acc__in a { transition: color .25s; }
.acc__in a:active { color: var(--gold-hi); transition-duration: 0s; }

/* the phone menu: rows that wait below its lower edge fade into it, so no half-hidden row looks ready to be pressed,
   and the room at the end lets the last group rise clear of the edge */
.menu__body { padding-bottom: 40px; }
.menu__body.is-more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); }

/* the desktop menu of treatments opens over a shade, so the headline behind it steps back */
.scrim { position: fixed; inset: 0; z-index: 39; background: rgba(8, 5, 14, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
html.sd-mega .scrim { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.sd-soft .scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 5, 14, .72); }

/* phone numbers, hours and price ranges keep to one line; an address stays free to break in a narrow column */
bdi[dir="ltr"], a[href^="tel:"] { white-space: nowrap; }
a[href^="mailto:"] bdi { white-space: normal; overflow-wrap: anywhere; }

/* one setting for every price: "מ־" before the figure and the unit after it, small and soft */
.from, .unit { font-size: .62em; font-weight: 400; color: var(--soft); letter-spacing: 0; }

/* the edge of every field stands at 3:1 against the card, as the standard asks */
.field input, .field textarea, :root .field select { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }

/* small print and side notes keep a line short enough to read */
.fine { max-width: 62ch; line-height: 1.6; }
.tracks__rule, .case__aside, :root .lh__lede { max-width: 60ch; }

/* phones: running text at 17 px, small details from 13.5 px */
@media (max-width: 999px) {
  :root .sec-p, :root .chap p, :root .cat__p, :root .it__d, :root .card__d, :root .route__topic p, .faq .ans p { font-size: 17px; }
  .chips span { font-size: 13.5px; padding: 5px 11px; }
  :root .fine, :root .it__m { font-size: 14.5px; }
}
/* lines in the price lists end with at least two words, like the paragraphs */
dd, dt small { text-wrap: pretty; }
/* one right edge on desktop: the header and every section end on the same line as the wide sections, and so do the
   openings set in a grid (prices, academy, reviews, the legal pages). --er and --el are the gutters of that frame; their
   percentage is read where they are used, so they belong only on boxes as wide as the window. Up to about 1430 px they
   equal --gr and --gl, so only wider screens move */
:root {
  --er: max(var(--gr), calc((100% - 1344px) / 2));
  --el: max(var(--gl), calc((100% - 1344px) / 2));
}
.hdr { width: min(1344px, calc(100% - 2 * var(--pad))); }
.wrap { margin-inline: max(0px, calc((100% - 1344px) / 2)) auto; }
/* the openings drawn over a full-width film, photo, map or object (home, the treatments, results, contact, boutique,
   handmade, Journal) keep their words at the window's edge on wide screens, where their pictures were composed for them */
[data-page="home"] .proc__head, [data-page="home"] .proc__track { padding-right: var(--er); padding-left: var(--el); }
[data-page="home"] .proc__thread { margin-right: var(--er); margin-left: var(--el); }
[data-page="prices"] .px, [data-page="academy"] .ax, [data-page="privacy"] .lh, [data-page="terms"] .lh,
[data-page="accessibility"] .lh { padding-right: var(--er); padding-left: var(--el); }
[data-page="reviews"] .vx__in { margin-inline: max(0px, calc((100% - 1344px) / 2)) auto; }

/* ---------- r17: Raven's choices in the questionnaire (2026-10-26) ---------- */
/* the films' pause button, beside the music button, on the pages marked data-hold (home, premium). It comes while a film
   moves on screen or waits stopped there (site.js) */
.hold {
  all: unset;
  box-sizing: border-box;
  position: fixed;
  z-index: 44;
  left: calc(max(18px, env(safe-area-inset-left, 0px)) + 60px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text);
  background: rgba(26, 18, 40, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 30px rgba(0, 0, 0, .35);
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), translate .6s var(--ease), visibility 0s .45s, box-shadow .4s var(--ease), background .3s;
}
.hold.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .45s var(--ease), translate .6s var(--ease), box-shadow .4s var(--ease), background .3s; }
.sd-typing .hold { visibility: hidden; opacity: 0; }
.hold:hover { background: rgba(26, 18, 40, .8); box-shadow: inset 0 0 0 1px rgba(227, 196, 140, .45), 0 0 30px rgba(142, 92, 255, .45), 0 0 18px rgba(240, 198, 120, .25); }
.hold:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hold:active { transform: scale(.94); transition-duration: 0s; }
.hold svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hold .i-play { display: none; fill: currentColor; stroke: none; }
.hold[aria-pressed="true"] .i-pause { display: none; }
.hold[aria-pressed="true"] .i-play { display: block; }
.sd-soft .hold { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(26, 18, 40, .85); }

/* phones: the music's row in the menu holds the player's panel (site.js moves it there), and the films' pause button
   keeps to the corner, above the dock while the dock is up */
.acc--music .player__panel { width: auto; padding: 2px 0 10px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; visibility: visible; opacity: 1; transform: none; transition: none; }
.acc--music .player__title { display: none; }
/* the menu's group clips its height as it opens, so the play button's light keeps clear of that edge */
.acc--music .player__now { padding-inline-start: 10px; }
.acc--music .player__play { box-shadow: 0 0 14px rgba(142, 92, 255, .55); }
.sd-music .acc--music .eq i { animation: eq 1.2s ease-in-out infinite alternate; }
.sd-music .acc--music .eq i:nth-child(2) { animation-delay: -.4s; }
.sd-music .acc--music .eq i:nth-child(3) { animation-delay: -.8s; }
.sd-music .acc--music .eq i:nth-child(4) { animation-delay: -.2s; }
.sd-music .acc--music .player__play .i-play { display: none; }
.sd-music .acc--music .player__play .i-pause { display: block; margin: 0; }
@media (max-width: 999px) {
  .hold { left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .sd-dock .hold { translate: 0 -68px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-music .acc--music .eq i { animation: none; }
}