/* beauty_5 — журнальная вёрстка, цвет страницы следует за временем суток. */

:root{
  --bg:#f3f1ec;
  --ink:#1c1914;
  --muted:color-mix(in srgb, var(--ink) 58%, transparent);
  --line:color-mix(in srgb, var(--ink) 16%, transparent);
  --soft:color-mix(in srgb, var(--ink) 6%, transparent);
  --foot-bg:var(--ink);
  --foot-ink:var(--bg);
  --img-br:1;
  --grain:.05;

  --gutter:clamp(16px, 3.2vw, 48px);
  --head-h:72px;
  --section-pad:clamp(96px, 13vw, 200px);

  --fs-hero:clamp(46px, 9.4vw, 176px);
  --fs-h2:clamp(40px, 7vw, 124px);
  --fs-xl:clamp(28px, 3.6vw, 56px);
  --fs-lg:clamp(20px, 1.9vw, 28px);
  --fs-md:17px;
  --fs-sm:14px;
  --fs-xs:12px;

  --ease:cubic-bezier(.645,.045,.355,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --theme-t:.9s;
}

/* Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  background:var(--bg);
  transition:background-color var(--theme-t) var(--ease);
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--fs-md);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--theme-t) var(--ease), color var(--theme-t) var(--ease);
  overflow-x:hidden;
}

::selection{ background:var(--ink); color:var(--bg); }

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}

/* Зерно бумаги поверх всей страницы. */
.grain{
  position:fixed;
  inset:-50%;
  z-index:90;
  pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  transition:opacity var(--theme-t) var(--ease);
}

/* ---------- «Перекатывающийся» текст кнопок ---------- */
.roll-text{
  position:relative;
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  line-height:1.2;
}
.roll-text > span,
.roll-text::after{
  display:block;
  transition:transform .55s var(--ease);
}
.roll-text::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:100%;
}
@media (hover:hover){
  .roll:hover .roll-text > span,
  .roll:hover .roll-text::after,
  .line-cta:hover .roll-text > span,
  .line-cta:hover .roll-text::after,
  .foot-book:hover .roll-text > span,
  .foot-book:hover .roll-text::after,
  .book-close:hover .roll-text > span,
  .book-close:hover .roll-text::after{ transform:translateY(-100%); }
}

/* ---------- Шапка ---------- */
.head{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  height:var(--head-h);
  padding:0 var(--gutter);
  padding-top:env(safe-area-inset-top);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  transition:background-color .5s var(--ease), transform .6s var(--ease), box-shadow .5s;
}
.head.is-scrolled{
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.head.is-away{ transform:translateY(-100%); }
body.menu-open .head{ background:transparent; box-shadow:none; transform:none; -webkit-backdrop-filter:none; backdrop-filter:none; }

.head-brand{
  justify-self:start;
  display:flex;
  flex-direction:column;
  line-height:1.15;
  min-width:0;
}
.brand-name{
  font-size:calc(17px * var(--k, 1));
  font-weight:500;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-tagline{
  font-size:var(--fs-xs);
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.clock{ justify-self:center; }
html[data-time="off"] .clock{ display:none; }
.clock-btn{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:var(--fs-sm);
  transition:border-color .3s, background-color .3s;
}
.clock-btn:hover,
.clock-btn[aria-expanded="true"]{ border-color:var(--ink); }
.clock-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ink);
  animation:tick 2s var(--ease) infinite;
}
html[data-travel="1"] .clock-dot{ animation:none; background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink); }
.clock-time{ font-variant-numeric:tabular-nums; font-weight:500; }
.clock-label{ color:var(--muted); }
@keyframes tick{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.head-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}
.roll{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  font-size:var(--fs-sm);
  font-weight:500;
  border:1px solid var(--line);
  transition:border-color .3s, background-color var(--theme-t), color var(--theme-t);
}
.roll:hover{ border-color:var(--ink); }
.roll-solid{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}

/* ---------- Панель «прокрутить сутки» ---------- */
.time-panel{
  position:fixed;
  z-index:59;
  top:calc(var(--head-h) + env(safe-area-inset-top) + 8px);
  left:50%;
  width:min(440px, calc(100vw - 2 * var(--gutter)));
  transform:translateX(-50%);
  padding:18px 20px 14px;
  border-radius:20px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px var(--line), 0 24px 60px -28px color-mix(in srgb, var(--ink) 40%, transparent);
  animation:panelIn .5s var(--ease-out);
}
@keyframes panelIn{ from{ opacity:0; transform:translate(-50%, -8px); } }
.time-panel-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  font-size:var(--fs-sm);
}
.time-panel-title{ color:var(--muted); }
.time-reset{
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  min-height:32px;
  white-space:nowrap;
}
.time-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:40px;
  margin:0;
  background:transparent;
  touch-action:pan-y;
}
.time-range::-webkit-slider-runnable-track{
  height:2px;
  background:linear-gradient(90deg, #26231d, #8a8170 26%, #f3f1ec 38%, #f3f1ec 70%, #c7b596 80%, #433d33 89%, #26231d);
  border-radius:2px;
  box-shadow:0 0 0 1px var(--line);
}
.time-range::-moz-range-track{
  height:2px;
  background:linear-gradient(90deg, #26231d, #8a8170 26%, #f3f1ec 38%, #f3f1ec 70%, #c7b596 80%, #433d33 89%, #26231d);
  border-radius:2px;
}
.time-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:24px;
  height:24px;
  margin-top:-11px;
  border-radius:50%;
  background:var(--bg);
  border:1.5px solid var(--ink);
  cursor:grab;
}
.time-range::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--bg);
  border:1.5px solid var(--ink);
  cursor:grab;
}
.time-scale{
  display:flex;
  justify-content:space-between;
  font-size:var(--fs-xs);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- Полноэкранное меню ---------- */
.menu{
  position:fixed;
  inset:0;
  z-index:55;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:calc(var(--head-h) + env(safe-area-inset-top) + 6vh) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background:var(--bg);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .8s var(--ease), visibility 0s .8s, background-color var(--theme-t);
}
body.menu-open .menu{
  clip-path:inset(0 0 0 0);
  visibility:visible;
  transition:clip-path .8s var(--ease), visibility 0s, background-color var(--theme-t);
}
.menu-links{
  display:flex;
  flex-direction:column;
}
.menu-links a{
  display:block;
  overflow:hidden;
  padding:.06em 0;
  font-size:clamp(40px, 7.4vw, 120px);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:400;
}
.menu-link-text{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .8s var(--ease-out), opacity .3s;
}
body.menu-open .menu-link-text{ transform:none; }
body.menu-open .menu-links a:nth-child(1) .menu-link-text{ transition-delay:.18s; }
body.menu-open .menu-links a:nth-child(2) .menu-link-text{ transition-delay:.23s; }
body.menu-open .menu-links a:nth-child(3) .menu-link-text{ transition-delay:.28s; }
body.menu-open .menu-links a:nth-child(4) .menu-link-text{ transition-delay:.33s; }
body.menu-open .menu-links a:nth-child(5) .menu-link-text{ transition-delay:.38s; }
@media (hover:hover){
  .menu-links:hover .menu-link-text{ opacity:.3; }
  .menu-links a:hover .menu-link-text{ opacity:1; }
}
.menu-foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  font-size:var(--fs-lg);
}
.menu-book{
  min-height:56px;
  padding:0 28px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  font-size:var(--fs-md);
  font-weight:500;
}
.menu-phone{ font-variant-numeric:tabular-nums; }

/* ---------- Общие блоки секций ---------- */
main{ display:block; }

.section-head{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:0 24px;
  align-items:end;
  padding:0 var(--gutter);
  margin-bottom:clamp(40px, 6vw, 96px);
}
.section-title{
  grid-column:1 / span 8;
  margin:0;
  font-size:var(--fs-h2);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.052em;
}
.section-note{
  grid-column:9 / span 4;
  margin:0;
  max-width:34ch;
  color:var(--muted);
  font-size:var(--fs-sm);
  line-height:1.5;
}
.section-empty{
  padding:0 var(--gutter);
  color:var(--muted);
  max-width:60ch;
}

/* Разбивка заголовков на слова для построчного проявления. */
.w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding:.14em .04em .2em;
  margin:-.14em -.04em -.2em;
}
.wi{ display:inline-block; will-change:transform; }
html.has-motion [data-split]:not(.is-split){ visibility:hidden; }
html.has-motion .hero-title:not(.is-split){ visibility:hidden; }

.round-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  transition:border-color .3s, background-color .3s, color .3s;
}
.round-btn svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.round-btn:hover:not(:disabled){ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.round-btn:disabled{ opacity:.3; cursor:default; }

/* ---------- Первый экран ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding:calc(var(--head-h) + env(safe-area-inset-top) + clamp(32px, 9vh, 120px)) var(--gutter) clamp(28px, 5vh, 56px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(40px, 7vh, 96px);
}
.hero-title{
  margin:0;
  max-width:14ch;
  font-size:calc(var(--fs-hero) * var(--k, 1));
  font-weight:400;
  line-height:.9;
  letter-spacing:-.058em;
  text-wrap:balance;
}
.hero-bottom{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:24px;
  align-items:end;
}
.hero-aside{
  grid-column:1 / span 4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:28px;
}
.hero-sub{
  margin:0;
  max-width:36ch;
  font-size:calc(var(--fs-lg) * var(--k, 1));
  line-height:1.3;
  letter-spacing:-.02em;
}
.line-cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
  font-size:var(--fs-md);
  font-weight:500;
}
.hero-media{
  grid-column:8 / span 5;
  margin:0;
  aspect-ratio:4 / 5;
  max-height:74vh;
  justify-self:end;
  width:100%;
  overflow:hidden;
  border-radius:4px;
  background:var(--soft);
}
.hero-media img{
  width:100%;
  height:120%;
  object-fit:cover;
  filter:brightness(var(--img-br));
  transition:filter var(--theme-t);
  will-change:transform;
}
html.has-motion .hero-media{ clip-path:inset(100% 0 0 0); }
.hero-media.is-shown{ clip-path:inset(0 0 0 0) !important; transition:clip-path 1.4s var(--ease); }
.hero:has(.hero-media[hidden]) .hero-aside{ grid-column:1 / span 6; }

.hero-hint{
  position:absolute;
  left:50%;
  bottom:clamp(28px, 5vh, 56px);
  margin:0;
  transform:translateX(-50%);
  font-size:var(--fs-xs);
  color:var(--muted);
}
.hero-hint::after{
  content:"";
  display:block;
  width:1px;
  height:36px;
  margin:10px auto 0;
  background:var(--ink);
  transform-origin:top;
  animation:hint 2.2s var(--ease) infinite;
}
@keyframes hint{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- Как проходит приём (кадры) ---------- */
.process{ padding-top:var(--section-pad); }
.process-track{
  list-style:none;
  margin:0;
  padding:0 var(--gutter);
  display:flex;
  gap:clamp(24px, 3vw, 48px);
}
.step{
  flex:0 0 clamp(300px, 30vw, 460px);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.step-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
}
.step-num{ font-variant-numeric:tabular-nums; font-weight:500; }
.step-count{ color:var(--muted); font-variant-numeric:tabular-nums; }
.step-media{
  margin:0;
  aspect-ratio:4 / 5;
  max-height:52vh;
  overflow:hidden;
  border-radius:4px;
  background:var(--soft);
}
.step-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(var(--img-br));
  transition:filter var(--theme-t), transform 1.2s var(--ease-out);
}
@media (hover:hover){
  .step:hover .step-media img{ transform:scale(1.04); }
}
.step-title{
  margin:0;
  font-size:calc(var(--fs-xl) * var(--k, 1));
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
}
.step-text{
  margin:0;
  max-width:44ch;
  color:var(--muted);
  font-size:calc(15px * var(--k, 1));
  line-height:1.55;
  white-space:pre-line;
}
.process-progress{
  margin:clamp(32px, 4vh, 56px) var(--gutter) 0;
  height:1px;
  background:var(--line);
  overflow:hidden;
}
.process-progress span{
  display:block;
  height:100%;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
}

/* На широком экране кадры едут по горизонтали, пока секция закреплена. */
@media (min-width:1024px){
  html.has-motion .process.is-pinned .process-pin{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:var(--head-h);
    overflow:hidden;
  }
  html.has-motion .process.is-pinned .section-head{ margin-bottom:clamp(24px, 4vh, 56px); }
  html.has-motion .process.is-pinned .process-track{ width:max-content; will-change:transform; }
  html.has-motion .process.is-pinned .step-media{ max-height:44vh; }
  .process:not(.is-pinned) .process-track{ flex-wrap:wrap; }
  .process:not(.is-pinned) .process-progress{ display:none; }
}

/* ---------- Услуги ---------- */
.services{ padding-top:var(--section-pad); }
.svc-list{
  list-style:none;
  margin:0 var(--gutter);
  padding:0;
  border-top:1px solid var(--line);
}
.svc{
  position:relative;
  border-bottom:1px solid var(--line);
}
.svc::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--ease);
}
.svc.is-open::after{ transform:scaleX(1); }
@media (hover:hover){
  .svc:hover::after{ transform:scaleX(1); }
}
.svc-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto 32px;
  align-items:center;
  gap:24px;
  padding:clamp(20px, 2.6vw, 34px) 0;
  text-align:left;
}
.svc-name{
  font-size:var(--fs-xl);
  line-height:1.05;
  letter-spacing:-.04em;
  transition:transform .6s var(--ease-out);
}
@media (hover:hover){
  .svc-row:hover .svc-name{ transform:translateX(14px); }
}
.svc-duration{
  color:var(--muted);
  font-size:var(--fs-sm);
  white-space:nowrap;
}
.svc-price{
  font-size:var(--fs-lg);
  letter-spacing:-.02em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.svc-icon{
  position:relative;
  width:20px;
  height:20px;
  justify-self:end;
}
.svc-icon::before,
.svc-icon::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:1.5px;
  background:currentColor;
  transition:transform .5s var(--ease);
}
.svc-icon::after{ transform:rotate(90deg); }
.svc.is-open .svc-icon::after{ transform:rotate(0); }
.svc-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .7s var(--ease);
}
.svc.is-open .svc-body{ grid-template-rows:1fr; }
.svc-body-inner{
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:24px;
}
.svc-desc{
  margin:0 0 clamp(24px, 3vw, 36px);
  max-width:60ch;
  color:var(--muted);
  white-space:pre-line;
}
.svc-book{
  margin:0 0 clamp(24px, 3vw, 36px);
  min-height:48px;
  padding:0 24px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  font-size:var(--fs-sm);
  font-weight:500;
  white-space:nowrap;
}

/* ---------- До и после ---------- */
.works{ padding-top:var(--section-pad); }
.works-rail{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.works-rail::-webkit-scrollbar{ display:none; }
@media (hover:hover) and (pointer:fine){
  .works-rail{ cursor:grab; }
}
.works-rail.is-dragging{ user-select:none; cursor:grabbing; }
.works-rail.is-dragging .work{ pointer-events:none; }
.works-track{
  list-style:none;
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  gap:clamp(16px, 2.4vw, 36px);
  width:max-content;
}
.work{
  flex:0 0 clamp(300px, 34vw, 520px);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.ba{
  position:relative;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:4px;
  background:var(--soft);
  --pos:50%;
  touch-action:pan-x pan-y;
}
.ba-layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:brightness(var(--img-br));
  transition:filter var(--theme-t);
}
.ba-before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-tag{
  position:absolute;
  bottom:14px;
  padding:6px 12px;
  border-radius:999px;
  background:color-mix(in srgb, #000 36%, transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:var(--fs-xs);
  pointer-events:none;
}
.ba-tag-before{ left:14px; }
.ba-tag-after{ right:14px; }
.ba-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  width:56px;
  margin-left:-28px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:ew-resize;
  touch-action:none;
}
.ba-handle::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1.5px;
  margin-left:-.75px;
  background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,.25);
}
.ba-knob{
  position:relative;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  color:#1c1914;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 24px -6px rgba(0,0,0,.4);
  transition:transform .4s var(--ease-out);
}
.ba-knob svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ba-handle:hover .ba-knob,
.ba-handle.is-active .ba-knob{ transform:scale(1.12); }
.work-meta{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:6px 16px;
  align-items:baseline;
}
.work-title{
  margin:0;
  font-size:calc(var(--fs-lg) * var(--k, 1));
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.15;
}
.work-price{
  margin:0;
  font-size:var(--fs-sm);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.work-desc{
  grid-column:1 / -1;
  margin:0;
  color:var(--muted);
  font-size:var(--fs-sm);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.work-desc.is-expanded{ -webkit-line-clamp:unset; }

/* ---------- Отзывы ---------- */
.reviews{ padding-top:var(--section-pad); padding-bottom:var(--section-pad); }
.reviews-nav{
  grid-column:9 / span 4;
  display:flex;
  align-items:center;
  gap:16px;
}
.reviews-count{
  min-width:56px;
  text-align:center;
  font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.reviews-stage{
  position:relative;
  display:grid;
  padding:0 var(--gutter);
  touch-action:pan-y;
}
.review{
  grid-area:1 / 1;
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:24px;
  visibility:hidden;
}
.review.is-active{ visibility:visible; }
.review-text{
  grid-column:1 / span 10;
  margin:0;
  font-size:clamp(24px, 3.3vw, 52px);
  line-height:1.12;
  letter-spacing:-.035em;
  white-space:pre-line;
}
.review-text.is-clamped{
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.review-more{
  grid-column:1 / span 10;
  justify-self:start;
  margin-top:-8px;
  min-height:40px;
  border-bottom:1px solid currentColor;
  font-size:var(--fs-sm);
  font-weight:500;
}
.review-meta{
  grid-column:1 / span 10;
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:20px;
  font-size:var(--fs-sm);
}
.review-photo{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}
.review-name{ font-weight:500; }
.review-rating{ letter-spacing:.1em; }
.review-date{ color:var(--muted); }

/* ---------- Подвал ---------- */
.foot{
  position:relative;
  overflow:hidden;
  padding:clamp(72px, 10vw, 140px) var(--gutter) 0;
  background:var(--foot-bg);
  color:var(--foot-ink);
  transition:background-color var(--theme-t), color var(--theme-t);
  --line:color-mix(in srgb, var(--foot-ink) 18%, transparent);
  --muted:color-mix(in srgb, var(--foot-ink) 60%, transparent);
}
.foot :focus-visible{ outline-color:var(--foot-ink); }
.foot-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  padding-bottom:clamp(56px, 8vw, 120px);
  border-bottom:1px solid var(--line);
}
.foot-lead{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-lg);
  letter-spacing:-.02em;
}
.foot-book{
  font-size:var(--fs-h2);
  line-height:.95;
  letter-spacing:-.055em;
  text-align:left;
}
.foot-book .roll-text{ line-height:1; padding-bottom:.06em; }
.foot-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:32px 24px;
  padding:clamp(40px, 5vw, 72px) 0;
}
.foot-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:15px;
}
.foot-salon{ grid-column:1 / span 5; }
#footerAddressCol{ grid-column:7 / span 3; }
#footerContactCol{ grid-column:10 / span 3; }
.salon-name{ font-size:24px; letter-spacing:-.03em; }
.salon-text{ color:var(--muted); max-width:40ch; }
.foot-title{ color:var(--muted); font-size:13px; margin-bottom:4px; }
.foot-col a{
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .5s var(--ease);
}
.foot-col a:hover{ background-size:100% 1px; }
.foot-col .row{ display:block; }
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:8px 32px;
  padding:20px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
.footer-privacy-link{ margin-left:auto; text-decoration:underline; text-underline-offset:3px; }
.foot-giant{
  margin:0 calc(-1 * var(--gutter));
  padding:0 var(--gutter);
  line-height:.78;
  white-space:nowrap;
  letter-spacing:-.06em;
  user-select:none;
}
.foot-giant span{
  display:inline-block;
  font-size:var(--giant-fs, 18vw);
}

/* ---------- Кнопка записи на телефоне ---------- */
.sticky-book{
  position:fixed;
  z-index:50;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  min-height:56px;
  padding:0 32px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  font-size:16px;
  font-weight:500;
  box-shadow:0 16px 40px -16px color-mix(in srgb, var(--ink) 70%, transparent);
  transform:translate(-50%, 160%);
  transition:transform .6s var(--ease), background-color var(--theme-t), color var(--theme-t);
  display:none;
}
body.show-sticky .sticky-book{ transform:translate(-50%, 0); }
body.booking-open .sticky-book,
body.menu-open .sticky-book{ transform:translate(-50%, 160%); }

/* ---------- Запись ---------- */
.book{
  position:fixed;
  inset:0;
  z-index:80;
  background:var(--bg);
  color:var(--ink);
  visibility:hidden;
  clip-path:circle(0 at var(--ox, 50%) var(--oy, 50%));
  transition:background-color var(--theme-t), color var(--theme-t);
}
.book.is-open{ visibility:visible; clip-path:circle(150% at var(--ox, 50%) var(--oy, 50%)); }
html:not(.has-motion) .book.is-open{ clip-path:none; }
.book-scroll{
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 var(--gutter) calc(48px + env(safe-area-inset-bottom));
}
.book-head{
  position:sticky;
  top:0;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  min-height:calc(var(--head-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  margin:0 calc(-1 * var(--gutter));
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.book-back{
  display:none;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-size:var(--fs-sm);
  font-weight:500;
}
.book-back svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.book-title{
  grid-column:1 / 3;
  margin:0;
  font-size:17px;
  font-weight:500;
  letter-spacing:-.02em;
}
.book-step-title{ display:none; margin:0; font-size:15px; font-weight:500; }
.book-close{
  grid-column:3;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:var(--fs-sm);
  font-weight:500;
}
.book-close:hover{ border-color:var(--ink); }
.book-bar{ display:none; }

.book-grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(32px, 6vw, 120px);
  padding-top:clamp(24px, 5vh, 64px);
  max-width:1440px;
  margin:0 auto;
}
.book-cal{
  position:sticky;
  top:calc(var(--head-h) + env(safe-area-inset-top) + 24px);
  align-self:start;
}
.book-label{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0 0 24px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-xl);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1;
}
.book-num{
  font-size:var(--fs-sm);
  font-weight:500;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  transform:translateY(-.9em);
}
.book-rest{ min-width:0; }
.book-rest .book-step + .book-step{ margin-top:clamp(48px, 7vh, 88px); }

.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.month{
  font-size:var(--fs-lg);
  letter-spacing:-.02em;
  text-transform:lowercase;
}
.cal-nav{ display:flex; gap:8px; }
.cal-weekdays,
.cal-days{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
}
.cal-weekdays{
  margin-bottom:8px;
  color:var(--muted);
  font-size:var(--fs-xs);
  text-align:center;
}
.cal-days button{
  position:relative;
  aspect-ratio:1;
  min-height:40px;
  border-radius:50%;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--ink) 30%, transparent);
  cursor:default;
  transition:background-color .3s, color .3s;
}
.cal-days button.empty{ visibility:hidden; }
.cal-days button.past{ color:color-mix(in srgb, var(--ink) 18%, transparent); }
.cal-days button.available{
  color:var(--ink);
  cursor:pointer;
  font-weight:500;
}
.cal-days button.available::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:16%;
  width:4px;
  height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:currentColor;
}
.cal-days button.available:hover{ background:var(--soft); }
.cal-days button.selected{ background:var(--ink) !important; color:var(--bg); }
.cal-legend{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:var(--fs-xs);
}
.cal-legend .dot{ width:4px; height:4px; border-radius:50%; background:var(--ink); }

.slots-empty{
  margin:0;
  padding-top:calc(var(--fs-xl) + 38px);
  color:var(--muted);
  max-width:40ch;
  font-size:var(--fs-lg);
  letter-spacing:-.02em;
  line-height:1.3;
}

.service-select{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.service-select button{
  display:grid;
  grid-template-columns:22px minmax(0, 1fr) auto;
  gap:4px 16px;
  align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  transition:background-color .3s;
}
.service-select button::before{
  content:"";
  grid-row:1;
  width:14px;
  height:14px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  transform:translateY(1px);
  transition:box-shadow .3s var(--ease-out);
}
.service-select button.active::before{ box-shadow:inset 0 0 0 3px var(--bg), inset 0 0 0 10px var(--ink); }
.service-name{ grid-column:2; font-size:var(--fs-lg); letter-spacing:-.02em; line-height:1.2; }
.service-price{ grid-column:3; grid-row:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.service-desc{
  grid-column:2 / 4;
  color:var(--muted);
  font-size:var(--fs-sm);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.service-duration{ grid-column:2 / 4; color:var(--muted); font-size:var(--fs-xs); }

.time-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  gap:8px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s, transform .6s var(--ease-out);
}
.time-grid.show{ opacity:1; transform:none; }
.time-grid button{
  min-height:48px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  transition:border-color .3s, background-color .3s, color .3s;
}
.time-grid button:hover{ border-color:var(--ink); }
.time-grid button.busy{ color:var(--muted); border-style:dashed; }
.time-grid button.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.time-grid-empty{
  grid-column:1 / -1;
  margin:0;
  color:var(--muted);
}

.booking-summary{
  margin:0 0 6px;
  font-size:var(--fs-lg);
  letter-spacing:-.02em;
  line-height:1.3;
}
.booking-summary-desc{ margin:0 0 20px; color:var(--muted); font-size:var(--fs-sm); }
.booking-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 24px;
  margin:24px 0 20px;
}
.booking-fields label{ display:flex; flex-direction:column; gap:6px; }
.field-label{ color:var(--muted); font-size:var(--fs-xs); }
.booking-fields input{
  width:100%;
  min-height:52px;
  padding:0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-lg);
  letter-spacing:-.02em;
  outline:none;
  transition:border-color .3s;
}
.booking-fields input::placeholder{ color:color-mix(in srgb, var(--ink) 28%, transparent); }
.booking-fields input:focus{ border-color:var(--ink); }
.booking-consent{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.booking-consent-item{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:12px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}
.booking-consent-item a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.booking-consent-item input{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  margin:0;
  border:1.5px solid var(--ink);
  border-radius:5px;
  cursor:pointer;
  display:grid;
  place-content:center;
}
.booking-consent-item input::after{
  content:"";
  width:10px;
  height:6px;
  border-left:1.5px solid var(--bg);
  border-bottom:1.5px solid var(--bg);
  transform:rotate(-45deg) translate(1px, -1px) scale(0);
  transition:transform .25s var(--ease-out);
}
.booking-consent-item input:checked{ background:var(--ink); }
.booking-consent-item input:checked::after{ transform:rotate(-45deg) translate(1px, -1px) scale(1); }
.booking-error{
  margin:0 0 16px;
  padding:12px 16px;
  border-radius:12px;
  background:color-mix(in srgb, #b3261e 12%, transparent);
  color:var(--ink);
  font-size:var(--fs-sm);
}
.confirm-btn{
  width:100%;
  min-height:60px;
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font-size:16px;
  font-weight:500;
  cursor:not-allowed;
  transition:background-color .4s, color .4s;
}
.confirm-btn.ready{ background:var(--ink); color:var(--bg); cursor:pointer; }
.confirm-note{ margin:12px 0 0; color:var(--muted); font-size:13px; text-align:center; }

.success-msg{
  display:none;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding-top:calc(var(--fs-xl) + 38px);
}
.success-msg.show{ display:flex; animation:successIn .8s var(--ease-out); }
@keyframes successIn{ from{ opacity:0; transform:translateY(16px); } }
.success-mark{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--ink);
  color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.success-mark svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:24;
  stroke-dashoffset:24;
  animation:draw .7s .3s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success-msg h3{
  margin:10px 0 0;
  font-size:var(--fs-xl);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1;
}
.success-msg p{ margin:0; max-width:44ch; color:var(--muted); }
.success-actions{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:12px; min-width:min(100%, 340px); }
/* Кнопки подтверждения в одном стиле с кнопкой email из email-confirm.js. */
.pill-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 24px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px currentColor;
  font-size:15px;
  font-weight:500;
  text-align:center;
  transition:background-color .3s;
}
.pill-btn:hover{ background:var(--soft); }
.btn-icon{
  display:block;
  flex:none;
  width:18px;
  height:18px;
  background:no-repeat center / contain;
}
.btn-icon-telegram{ background-image:url('/images/icons/telegram.svg'); }
.btn-icon-vk{ background-image:url('/images/icons/vk.svg'); }

/* ---------- Планшет ---------- */
@media (max-width:1023px){
  .section-title{ grid-column:1 / -1; }
  .section-note,
  .reviews-nav{ grid-column:1 / -1; margin-top:20px; }
  .hero-aside{ grid-column:1 / span 6; }
  .hero-media{ grid-column:7 / span 6; }
  .hero-hint{ display:none; }
  .process-track{ flex-direction:column; gap:64px; }
  .step{ flex:none; }
  .step-media{ max-height:none; }
  .review-text,
  .review-meta,
  .review-more{ grid-column:1 / -1; }
  .foot-salon{ grid-column:1 / -1; }
  #footerAddressCol{ grid-column:1 / span 6; }
  #footerContactCol{ grid-column:7 / span 6; }
}

/* ---------- Телефон ---------- */
@media (max-width:760px){
  :root{
    --head-h:60px;
    --section-pad:96px;
    --fs-md:16px;
  }
  .clock-label,
  .head-book{ display:none; }
  .head{ grid-template-columns:minmax(0, 1fr) auto auto; gap:10px; }
  .clock{ justify-self:end; }
  .clock-btn{ padding:0 12px; gap:8px; }
  .roll{ padding:0 16px; }
  .brand-name{ font-size:calc(16px * var(--k, 1)); }

  .hero{
    padding-top:calc(var(--head-h) + env(safe-area-inset-top) + 28px);
    padding-bottom:40px;
    justify-content:flex-start;
    gap:28px;
  }
  .hero-title{ max-width:none; font-size:calc(clamp(42px, 13vw, 64px) * var(--k, 1)); line-height:.94; }
  .hero-bottom{ display:flex; flex-direction:column-reverse; align-items:stretch; gap:28px; }
  .hero-media{ max-height:none; aspect-ratio:4 / 5; }
  .hero-sub{ font-size:calc(19px * var(--k, 1)); }
  .hero-hint{ display:none; }

  .section-head{ display:block; }
  .section-note{ margin-top:16px; }
  .section-title{ font-size:clamp(40px, 12.4vw, 60px); }

  .process-track{ gap:56px; }
  .step-title{ font-size:calc(30px * var(--k, 1)); }
  .process-progress{ display:none; }

  .svc-row{
    grid-template-columns:minmax(0, 1fr) 24px;
    grid-template-areas:"name icon" "meta icon";
    gap:8px 16px;
    padding:22px 0;
  }
  .svc-name{ grid-area:name; font-size:24px; }
  .svc-icon{ grid-area:icon; }
  .svc-meta-m{ grid-area:meta; display:flex; gap:14px; align-items:baseline; }
  .svc-price{ font-size:16px; }
  .svc-body-inner{ grid-template-columns:1fr; gap:0; }
  .svc-desc{ margin-bottom:18px; font-size:15px; }
  .svc-book{ justify-self:stretch; margin-bottom:24px; min-height:52px; }

  .works-rail{ scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter); }
  /* Работы друг под другом, каждая карточка целиком помещается в экран. */
  .works-note-drag{ display:none; }
  .works-rail{ overflow:visible; }
  .works-track{
    width:auto;
    flex-direction:column;
    gap:48px;
  }
  .work{
    flex:none;
    width:100%;
    gap:12px;
  }
  .ba{
    aspect-ratio:auto;
    height:min(calc((100vw - 2 * var(--gutter)) * 1.25), calc(100svh - var(--head-h) - 170px));
  }
  .work-desc{ -webkit-line-clamp:2; }

  .reviews-nav{ justify-content:flex-start; }
  .review-text{ font-size:clamp(22px, 6.6vw, 30px); line-height:1.2; }

  .foot{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  .foot-book{ font-size:clamp(48px, 15vw, 72px); }
  .foot-grid{ display:flex; flex-direction:column; gap:32px; }
  .foot-col a,
  .foot-col .row > span{ display:inline-block; padding:4px 0; }
  .footer-privacy-link{ margin-left:0; }
  .foot-bottom{ flex-direction:column; }

  .sticky-book{ display:block; }

  .menu-links a{ font-size:clamp(38px, 11vw, 56px); padding:.1em 0; }
  .menu-foot{ flex-direction:column; align-items:stretch; font-size:18px; }
  .menu-book{ width:100%; }

  /* Запись по шагам: на экране только текущий шаг. */
  .book-scroll{ padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
  .book-head{ grid-template-columns:auto 1fr auto; }
  .book-back{ display:inline-flex; }
  .book-title{ display:none; }
  .book-step-title{ display:block; grid-column:2; text-align:center; }
  .book-close{ padding:0 14px; }
  .book-bar{
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--line);
  }
  .book-bar span{
    display:block;
    height:100%;
    background:var(--ink);
    transform:scaleX(.25);
    transform-origin:left;
    transition:transform .6s var(--ease);
  }
  body[data-booking-step="2"] .book-bar span{ transform:scaleX(.5); }
  body[data-booking-step="3"] .book-bar span{ transform:scaleX(.75); }
  body[data-booking-step="4"] .book-bar span,
  body[data-booking-success] .book-bar span{ transform:scaleX(1); }

  .book-grid{ display:block; padding-top:24px; }
  .book-cal{ position:static; }
  .book-label{ display:none; }
  .book-rest .book-step + .book-step{ margin-top:0; }
  .slots-empty{ display:none !important; }
  .book-step{ animation:stepIn .5s var(--ease-out); }
  @keyframes stepIn{ from{ opacity:0; transform:translateX(16px); } }
  body:not([data-booking-step="1"]) .book-cal{ display:none; }
  body[data-booking-step="1"] .book-rest{ display:none; }
  body:not([data-booking-step="2"]) .book-step[data-step="2"],
  body:not([data-booking-step="3"]) .book-step[data-step="3"],
  body:not([data-booking-step="4"]) .book-step[data-step="4"]{ display:none; }
  body[data-booking-success] .book-rest{ display:block; }
  body[data-booking-success] .book-cal{ display:none; }
  .success-msg{ padding-top:16px; }

  .cal-days{ gap:4px; }
  .cal-days button{ min-height:44px; font-size:16px; }
  .service-select button{ padding:16px 0; }
  .service-name{ font-size:18px; }
  .time-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .booking-fields{ grid-template-columns:1fr; }
  .booking-fields input{ font-size:18px; }
  .confirm-btn{ position:sticky; bottom:calc(12px + env(safe-area-inset-bottom)); }
}

@media (min-width:761px){
  .svc-meta-m{ display:contents; }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}