/* חן זך קוסמטיקה · "יופי מדויק זה אמנות". Sage wall panels with a double moulding (like her
   clinic wall), a gold ruler, and gold brow-mapping lines that draw over her own brow photo.
   Only transform + opacity move; reduced motion shows the finished map. */

:root {
  --bg: #E6EADF;
  --surface: #F3F5EF;
  --ink: #2B2B2B;
  --muted: #545A4E;
  --primary: #2B2B2B;
  --primary-ink: #F3F5EF;
  --soft: #D1D9C7;
  --accent: #B8956A;
  --line: #A9B3A0;
  --focus: #4E5D42;
  --velvet: #4E5D42;
  --gold-soft: #E3CCA3;
  --radius: 0px;
  --radius-pill: 0px;
  --k-outline-fill: var(--soft);
  --font-head: "Bellefair", "Open Sans Variable", serif;
  --font-body: "Open Sans Variable", system-ui, sans-serif;
  --h1: clamp(2.5rem, 1.7rem + 3.6vw, 5rem);
  --h2: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, figure, blockquote, h1, h2, h3, ul { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; padding: .6rem 1rem; background: var(--ink); color: var(--surface); font-weight: 600; }
.skip-link:focus { top: 12px; }
.wrap { max-width: 1192px; margin-inline: auto; padding-inline: 16px; }

/* ---------- The wall panel: a double moulding ---------- */
.panel { padding: 10px; border: 1px solid var(--line); }
.panel__in { padding: 24px 20px; border: 1px solid var(--line); background: var(--surface); }
.panel__in--photo { padding: 0; overflow: hidden; }

/* ---------- Banner + header ---------- */
.demo-banner { padding: .5rem 16px; background: var(--velvet); color: var(--surface); font-size: .875rem; line-height: 1.5; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; transition: background-color 300ms ease, border-color 300ms ease; }
.site-header.is-scrolled { background: var(--bg); border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 24px; max-width: 1192px; height: 60px; margin-inline: auto; padding-inline: 16px; }
.mono { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; text-decoration: none; transform-origin: right center; transition: transform 300ms ease; }
.site-header.is-scrolled .mono { transform: scale(.9); }
.mono__cz { font-family: var(--font-head); font-size: 30px; line-height: 1; }
.mono__sub { padding-inline-start: 8px; border-inline-start: 1px solid var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .25em; line-height: 1.25; }
.site-nav { display: none; }

/* ---------- Hero: mapping the brow ---------- */
.hero { padding-bottom: 56px; }
.hero__media { position: relative; }
.brow { position: relative; overflow: hidden; }
.brow img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; object-position: 40% 30%; }
.brow__map { position: absolute; inset: 0; }
.brow__line {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--len);
  height: 1.5px;
  margin-top: -.75px;
  background: var(--accent);
  box-shadow: 0 0 0 .5px rgb(43 43 43 / .18);
  transform-origin: 0 50%;
  transform: rotate(var(--rot));
}
/* Coordinates in % of the frame (6:7 crop). Angles and lengths were computed from the brow
   points; they hold for any width because the photo scales uniformly. */
.brow__line--1 { --x: 8%; --y: 108%; --len: 67.67%; --rot: -89.15deg; }
.brow__line--2 { --x: 8%; --y: 108%; --len: 101.85%; --rot: -68.09deg; }
.brow__line--3 { --x: 8%; --y: 108%; --len: 124.02%; --rot: -57.85deg; }
.brow__line--4 { --x: 11%; --y: 54%; --len: 73.23%; --rot: -30.65deg; }
.brow__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: rgb(243 245 239 / .5);
}
.brow__dot::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--accent); }
.brow__dot--head { --x: 9%; --y: 50%; }
.brow__dot--peak { --x: 46%; --y: 27%; }
.brow__dot--tail { --x: 74%; --y: 18%; }
.brow__tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding: 3px 7px;
  background: rgb(243 245 239 / .9);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
  white-space: nowrap;
}
.brow__tag--head { --x: 11%; --y: 56%; }
.brow__tag--peak { --x: 38%; --y: 18%; }
.brow__tag--tail { --x: 77%; --y: 10%; }
.ruler { display: none; }
.hero__panel { position: relative; margin: -24px 16px 0; background: var(--bg); }
.eyebrow { color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.hero__title { margin-top: 8px; font-family: var(--font-head); font-size: var(--h1); font-weight: 400; line-height: 1.12; }
.hero__lead { margin-top: 12px; }
.rating { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9375rem; font-weight: 600; }
.rating__stars { display: inline-flex; gap: 2px; color: var(--accent); }
.rating__stars svg { width: 15px; height: 15px; }
.hero__actions { display: grid; gap: 12px; margin-top: 22px; }

/* ---------- Sections ---------- */
.section { padding-block: 64px; }
.h2 { font-family: var(--font-head); font-size: var(--h2); font-weight: 400; line-height: 1.15; }
.h3 { margin-top: 18px; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: .9375rem; font-weight: 600; }
.quote { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.quote p { font-family: var(--font-head); font-size: 1.375rem; line-height: 1.45; }
blockquote footer { margin-top: 8px; color: var(--muted); font-size: .875rem; font-weight: 600; }

/* שני עולמות */
.worlds { display: grid; gap: 20px; margin-top: 28px; }
.world__img { --k-reveal-cover: #D1D9C7; overflow: hidden; }
.world__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 55% 55%; }
.world__img img.world__img--serum { object-position: 50% 45%; }
.ticks { margin-top: 10px; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: center; gap: 12px; padding-block: 3px; }
.ticks li::before { content: ""; flex: none; width: 10px; height: 1px; background: var(--accent); }
.world__note { margin-top: 8px; color: var(--muted); font-weight: 600; }
.worlds__end { margin-top: 26px; font-size: 1.125rem; }

/* אומרת הכל בפנים: the one dark band */
.velvet {
  --focus: var(--gold-soft);
  padding-block: 64px;
  background: var(--velvet);
  color: var(--surface);
}
.velvet__grid { display: grid; gap: 32px; }
.velvet__title { font-family: var(--font-head); font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); font-weight: 400; line-height: 1.2; }
.velvet__cite { margin-top: 10px; color: var(--gold-soft); font-size: 1.125rem; }
.velvet__quotes { display: grid; gap: 24px; }
.velvet__quotes blockquote { padding-top: 16px; border-top: 1px solid var(--gold-soft); }
.velvet__quotes p { font-family: var(--font-head); font-size: 1.375rem; line-height: 1.45; }
.velvet__quotes footer { color: var(--gold-soft); font-size: 1.125rem; font-weight: 400; }

/* הקליניקה */
.room { display: grid; gap: 20px; }
.room__tall img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 35% 40%; }
.room__logo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 42%; }
.room__tall .panel__in, .room__logo .panel__in { --k-reveal-cover: #D1D9C7; }
.room__text p:not(.quote p) { margin-top: 12px; }
.quote--own { border-top-color: var(--accent); }

/* מה אומרות */
.says { display: grid; gap: 20px; margin: 28px 0 0; }
.say .panel__in { position: relative; }
.say .panel__in::before { content: ""; position: absolute; top: 12px; inset-inline: 20px; height: 1px; background: var(--accent); transform-origin: right; }
.say p { margin-top: 10px; font-family: var(--font-head); font-size: 1.375rem; line-height: 1.45; }
.more { margin-top: 22px; }
.k-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* שעות וכתובת: a clean table, each range its own tag, so the lunch break shows at a glance */
.hours-grid { display: grid; gap: 20px; }
.hours { width: 100%; margin-top: 18px; border-collapse: collapse; }
.hours tr { border-bottom: 1px solid var(--accent); }
.hours th { width: 64px; padding: 10px 0; font-size: .9375rem; font-weight: 600; text-align: start; vertical-align: middle; }
.hours td { padding: 8px 0; }
.slot { display: inline-block; margin: 2px 0 2px 8px; padding: 4px 8px; border: 1px solid var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.3; }
.closed { color: var(--muted); font-size: .9375rem; }
.hours tr.is-today th::after { content: " · היום"; color: var(--muted); font-weight: 400; }
.hours tr.is-today .slot { background: var(--ink); color: var(--surface); }
.addr { font-family: var(--font-head); font-size: 1.75rem; line-height: 1.25; }
.live { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .9375rem; font-weight: 600; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.live.is-open::before { background: var(--velvet); }
.where__nav { display: grid; gap: 12px; margin-top: 20px; }
.insta { margin-top: 14px; }

/* קריאה אחרונה: one mapping line across the panel */
.book__in { position: relative; overflow: hidden; }
.book__in::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-24deg, transparent calc(50% - .5px), rgb(184 149 106 / .4) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  pointer-events: none;
}
.book__in > * { position: relative; }
.book__lead { margin-top: 10px; font-size: 1.125rem; }
.book__actions { display: grid; gap: 12px; margin-top: 22px; }

/* ---------- Footer + dock ---------- */
.site-footer { padding: 28px 0 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.site-footer p + p { margin-top: 6px; }
.site-footer a { display: inline-block; min-height: 24px; color: var(--ink); }
.dock {
  position: fixed;
  inset-inline: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  outline: 1px solid var(--line);
  outline-offset: 3px;
  background: var(--surface);
}
.dock > * { flex: 1 1 0; }
.dock.is-hidden { visibility: hidden; opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .dock { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s; }
  .dock.is-hidden { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s 420ms; }
}
@media (prefers-reduced-motion: reduce) { .dock.is-hidden { transform: none; } }
@media (max-width: 899px) { body { padding-bottom: 92px; } }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .says { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .where__nav, .book__actions { display: flex; flex-wrap: wrap; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  body { font-size: 1.125rem; }
  .site-nav { display: flex; gap: 28px; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 600; text-decoration: none; }
  .site-nav a:hover { color: var(--velvet); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }

  .hero { padding-block: 32px 96px; }
  .hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; max-width: 1192px; margin-inline: auto; padding-inline: 16px; }
  .hero__media { grid-column: 8 / 13; grid-row: 1; padding: 10px; border: 1px solid var(--line); }
  .brow img { aspect-ratio: 4 / 5; object-position: 40% 34%; }
  /* Same points on the 4:5 crop: only the vertical offsets change. */
  .brow__line--1, .brow__line--2, .brow__line--3 { --y: 102.53%; }
  .brow__line--4 { --y: 52.13%; }
  .brow__dot--head { --y: 48.4%; }
  .brow__dot--peak { --y: 26.93%; }
  .brow__dot--tail { --y: 18.53%; }
  .brow__tag--head { --y: 54.4%; }
  .brow__tag--peak { --y: 18%; }
  .brow__tag--tail { --y: 10.5%; }
  .ruler {
    display: block;
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: -26px;
    width: 14px;
    border-right: 1px solid var(--accent);
    background:
      repeating-linear-gradient(180deg, var(--accent) 0 1px, transparent 1px 40px) right top / 14px 100% no-repeat,
      repeating-linear-gradient(180deg, var(--accent) 0 1px, transparent 1px 8px) right top / 6px 100% no-repeat;
  }
  .hero__panel { grid-column: 1 / 8; grid-row: 1; margin: 0 0 0 18px; }
  .hero__panel .panel__in { padding: 40px 36px; }
  .hero__title { font-size: 80px; }
  .hero__actions { display: flex; }
  .hero__actions .k-btn--block { width: auto; }

  .section { padding-block: 96px; }
  .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .world--b { margin-top: 48px; }

  .velvet { padding-block: 96px; }
  .velvet__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .velvet__head { grid-column: 1 / 8; }
  .velvet__quotes { grid-column: 8 / 13; }
  .velvet__title { font-size: 56px; }

  .room { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .room__tall { grid-column: 8 / 13; grid-row: 1 / 3; }
  .room__text { grid-column: 1 / 8; grid-row: 1; }
  .room__logo { grid-column: 4 / 8; grid-row: 2; }

  .says { gap: 24px; }
  .say:nth-child(even) { margin-top: 32px; }
  .say p { font-size: 1.625rem; }

  .hours-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .hours-grid__table { grid-column: 1 / 8; }
  .hours-grid__where { grid-column: 8 / 13; }
  .slot { font-size: .875rem; }

  .book { margin-inline-end: 16.66%; }
  .book .panel__in { padding: 48px 40px; }
}

/* =====================================================================
   Motion. Hero: pure CSS from the first paint (the photo, H1 and buttons
   never move). Below the fold: start states only under html.k-motion.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .brow__line { animation: draw 500ms var(--k-ease-out) both; }
  .brow__line--1 { animation-delay: 200ms; }
  .brow__line--2 { animation-delay: 450ms; }
  .brow__line--3 { animation-delay: 700ms; }
  .brow__line--4 { animation-delay: 950ms; }
  .brow__dot { animation: lock 220ms var(--k-ease-out) both; }
  .brow__dot--head { animation-delay: 1200ms; }
  .brow__dot--peak { animation-delay: 1280ms; }
  .brow__dot--tail { animation-delay: 1360ms; }
  .brow__tag { animation: tag-in 260ms var(--k-ease-out) both; }
  .brow__tag--head { animation-delay: 1400ms; }
  .brow__tag--peak { animation-delay: 1480ms; }
  .brow__tag--tail { animation-delay: 1560ms; }

  /* "Moulding": the inner frame is built after the panel arrives */
  .k-motion .world:not(.is-in) .panel__in,
  .k-motion .room__text:not(.is-in) .panel__in { opacity: 0; transform: scale(.985); }
  .k-motion .world .panel__in,
  .k-motion .room__text .panel__in { transition: opacity 500ms var(--k-ease-out) 150ms, transform 500ms var(--k-ease-out) 150ms; }

  /* "Gold line" over each review */
  .k-motion .say:not(.is-in) .panel__in::before { transform: scaleX(0); }
  .k-motion .say .panel__in::before { transition: transform 600ms var(--k-ease-out) 200ms; }
}
@keyframes draw { from { transform: rotate(var(--rot)) scaleX(0); } }
@keyframes lock { from { opacity: 0; transform: scale(.4); } }
@keyframes tag-in { from { opacity: 0; transform: translateY(6px); } }

@media (forced-colors: active) {
  .brow__line, .brow__dot::after { background: CanvasText; }
}

/* ---------- Accessibility statement + 404 ---------- */
.page { max-width: 760px; margin: 32px auto; padding: 10px; border: 1px solid var(--line); }
.page > * { margin-inline: 0; }
.page h1 { padding: 28px 20px 0; font-family: var(--font-head); font-size: var(--h2); font-weight: 400; line-height: 1.15; }
.page h2 { margin-top: 26px; padding-inline: 20px; font-size: 1.1875rem; font-weight: 600; }
.page p, .page ul { padding-inline: 20px; }
.page ul { padding-inline-start: 2.4em; }
.page p { margin-top: 10px; }
.page p:last-child { padding-bottom: 28px; }
.page a { display: inline-block; min-height: 24px; font-weight: 600; }
@media (max-width: 800px) { .page { margin: 16px; } }