/* «Маленький принц» — детская парикмахерская, Красноярск.
   Жанр: paper-cut. Резаные кромки бумаги, слоистые фигуры, ни одного скругления.
   Палитра: холодный синий — доминанта интерфейса; коралл — один жест на всю страницу.
   Всё содержимое видно без скрипта: анимации только средствами CSS. */

:root{
  color-scheme: light dark;

  --paper:      oklch(97.2% 0.012 242);
  --paper-2:    oklch(93.6% 0.022 242);
  --sheet:      oklch(100% 0 0);
  --ink:        oklch(23% 0.045 258);
  --ink-2:      oklch(45% 0.035 254);
  --line:       oklch(85% 0.028 242);

  --blue:       oklch(48% 0.135 254);   /* доминанта: холодный синий */
  --blue-2:     oklch(58% 0.135 250);
  --blue-deep:  oklch(29% 0.095 258);   /* тёмная бумага-подложка */
  --blue-soft:  oklch(88% 0.055 244);
  --on-blue:    oklch(97% 0.014 244);

  --acc:        oklch(66% 0.20 33);     /* коралл — один акцентный жест */
  --acc-ink:    oklch(50% 0.17 33);
  --acc-on:     oklch(21% 0.04 262);

  --grid:       oklch(48% 0.135 254 / .16);

  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3rem;
  --wrap: 1240px;

  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* резаная бумажная кромка вместо линии в 1 px */
  --edge: polygon(0 0,4% 6px,9% 1px,14% 8px,20% 2px,26% 9px,32% 3px,38% 8px,44% 1px,50% 7px,
                  56% 2px,62% 9px,68% 3px,74% 8px,80% 2px,86% 7px,92% 1px,97% 6px,100% 2px,100% 100%,0 100%);
}

html[data-theme="dark"]{
  --paper:      oklch(19.5% 0.032 258);
  --paper-2:    oklch(24% 0.036 258);
  --sheet:      oklch(23.5% 0.034 258);
  --ink:        oklch(94% 0.014 244);
  --ink-2:      oklch(76% 0.024 244);
  --line:       oklch(35% 0.038 258);

  --blue:       oklch(66% 0.125 250);
  --blue-2:     oklch(72% 0.115 248);
  --blue-deep:  oklch(25% 0.075 258);
  --blue-soft:  oklch(34% 0.06 250);
  --on-blue:    oklch(96% 0.012 244);

  --acc:        oklch(70% 0.185 35);
  --acc-ink:    oklch(78% 0.15 38);
  --acc-on:     oklch(18% 0.035 262);

  --grid:       oklch(66% 0.125 250 / .14);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.075rem)/1.62 var(--sans);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; -webkit-user-drag:none }
a{ color:inherit }
::selection{ background:var(--blue); color:var(--on-blue) }
:focus-visible{ outline:3px solid var(--acc); outline-offset:2px }
h1,h2,h3{ font-family:var(--serif); font-weight:700; letter-spacing:-.015em; margin:0 }
.nb{ white-space:nowrap; font-variant-numeric:tabular-nums }
.brk{ overflow-wrap:anywhere }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }
@media (max-width:520px){ .wrap{ width:min(100% - 1.75rem, var(--wrap)) } }

.skip{ position:absolute; left:-9999px; top:0; z-index:60; background:var(--acc); color:var(--acc-on); padding:.6rem 1rem }
.skip:focus{ left:0 }

.ic{ width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:square; stroke-linejoin:miter }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  min-height:46px; padding:.7rem 1.15rem; border:1px solid currentColor; background:transparent;
  font:600 .95rem/1.1 var(--sans); text-decoration:none; cursor:pointer; color:inherit;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--acc{ background:var(--acc); border-color:var(--acc); color:var(--acc-on) }
.btn--acc:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:var(--on-blue) }
.btn--ghost:hover{ background:var(--on-blue); color:var(--blue-deep) }
.btn--ghost .ic{ transition:transform .2s ease }
.btn--ghost:hover .ic{ transform:translateX(4px) }
.btn--white{ background:#fff; border-color:#fff; color:oklch(35% 0.11 258) }
.btn--white:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff }
.btn--wide{ width:100%; margin-top:var(--s3) }
.btn--big{ padding:1rem 1.5rem; font-size:1.1rem; font-variant-numeric:tabular-nums }
.btn--call{ border-color:var(--line); font-variant-numeric:tabular-nums; min-width:46px }
.btn--call:hover{ border-color:var(--blue); color:var(--blue) }

.icobtn{
  width:46px; height:46px; flex:none; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:inherit;
  transition:border-color .18s ease, color .18s ease;
}
.icobtn:hover{ border-color:var(--blue); color:var(--blue) }
.icobtn .ic{ width:20px; height:20px }
.icobtn--menu{ display:none }

/* ---------- шапка ---------- */
.head{
  position:sticky; top:0; z-index:40;
  background:color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.head__in{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:var(--s3); min-height:68px;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; min-width:0; flex:0 1 auto }
.brand img{ width:38px; height:38px; flex:none }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; min-width:0 }
.brand__txt b{ font-family:var(--serif); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.brand__txt i{
  font:400 .66rem/1.3 var(--mono); font-style:normal; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav{ display:flex; gap:1.05rem; margin-left:auto; flex-wrap:wrap }
.nav a{
  text-decoration:none; font-size:.92rem; color:var(--ink-2); padding:.35rem 0;
  border-bottom:2px solid transparent; transition:color .18s ease, border-color .18s ease;
}
.nav a:hover{ color:var(--ink); border-color:var(--acc) }
.head__act{ display:flex; align-items:center; gap:.5rem; flex:none }

/* ---------- герой: синяя колонка слева, фото во весь правый борт ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch; background:var(--blue-deep); color:var(--on-blue); overflow:hidden;
}
.hero__text{
  display:flex; align-items:center; justify-content:flex-end;
  padding:clamp(2.25rem,4.5vw,5rem) clamp(1.25rem,3vw,3.5rem) clamp(2.5rem,5vw,5.5rem) max(1.25rem,calc((100vw - var(--wrap))/2));
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px, 56px 56px;
}
.hero__textin{ max-width:38rem; width:100% }
.over{
  margin:0 0 var(--s2); font:600 .72rem/1.5 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.over .num{ color:var(--acc-ink) }
.over--on{ color:color-mix(in oklab, var(--on-blue) 76%, transparent) }
.hero h1{
  font-size:clamp(2.5rem,1rem + 7vw,5.5rem); line-height:.98; letter-spacing:-.03em; color:#fff;
  animation:slide-in .7s cubic-bezier(.2,.7,.2,1) both;
}
.hero__lead{
  max-width:44ch; margin:var(--s3) 0 0; font-size:1.06rem;
  color:color-mix(in oklab, var(--on-blue) 86%, transparent);
  animation:slide-in .7s .08s cubic-bezier(.2,.7,.2,1) both;
}
.badge{
  display:inline-flex; align-items:center; gap:var(--s2); margin:var(--s4) 0 0;
  background:var(--acc); color:var(--acc-on); padding:.7rem 1.1rem;
  animation:slide-in .7s .16s cubic-bezier(.2,.7,.2,1) both;
}
.badge__n{ font:700 clamp(1.9rem,1.4rem + 1.6vw,2.6rem)/.9 var(--serif) }
.badge__t{ font-size:.92rem; max-width:26ch; font-weight:600 }
.badge__t em{ display:block; font-style:normal; font-weight:400; font-size:.82rem; opacity:.85; margin-top:.1rem }

.hero__btns{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4) }
.hero__facts{
  display:flex; gap:var(--s3) var(--s5); flex-wrap:wrap; margin:var(--s4) 0 0; padding-top:var(--s3);
  border-top:1px solid color-mix(in oklab, var(--on-blue) 26%, transparent);
}
.hero__facts dt{ font:600 .66rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; opacity:.72 }
.hero__facts dd{ margin:.25rem 0 0; font-family:var(--serif); font-size:1.1rem; color:#fff }
.hero__facts a{ text-decoration:none; border-bottom:1px solid var(--acc) }

.hero__side{ position:relative; min-height:clamp(320px,52vw,660px) }
.hero__photo{ margin:0; position:absolute; inset:0 }
.hero__photo .ph{ width:100%; height:100%; padding:0; border:0; background:none }
.hero__photo img{
  width:100%; height:100%; object-fit:cover;
  clip-path:polygon(6% 0,100% 0,100% 100%,0 100%,0 6%);
  animation:ken 26s ease-in-out infinite alternate;
}
@keyframes ken{ from{ transform:scale(1) translate3d(0,0,0) } to{ transform:scale(1.09) translate3d(-1.5%,-1.5%,0) } }
@keyframes slide-in{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  .hero__photo img{ animation:none }
  .hero h1,.hero__lead,.badge{ animation:none }
}
/* бумажные фигуры поверх фото и за его границами */
.cut{ position:absolute; display:block; z-index:2; pointer-events:none }
.cut path{ fill:currentColor }
.cut--1{ color:var(--blue-soft); width:22%; top:6%; left:-7%; filter:drop-shadow(8px 10px 0 rgba(0,0,0,.18)) }
.cut--2{ color:var(--acc); width:26%; bottom:-5%; left:12%; opacity:.95 }

.ph{ position:relative; display:block; cursor:zoom-in; overflow:hidden }
.ph__z{
  position:absolute; right:0; bottom:0; width:44px; height:44px; display:grid; place-items:center;
  background:var(--acc); color:var(--acc-on); z-index:3;
}
.ph img{ transition:opacity .2s ease }
.ph:hover img{ opacity:.9 }

/* ---------- секции ---------- */
.sec{ padding:clamp(2.75rem,5vw,5.5rem) 0 }
.sec + .sec{ border-top:1px solid var(--line) }
.sh{ max-width:62ch; margin-bottom:clamp(1.75rem,3vw,2.75rem) }
.sh h2{ font-size:clamp(1.6rem,1.1rem + 2.1vw,2.7rem); line-height:1.08 }
.sh--inv h2{ color:#fff }
.sh--inv .over{ color:color-mix(in oklab, var(--on-blue) 74%, transparent) }
.sh--inv .over .num{ color:var(--acc) }

/* ---------- услуги: перечень в одну колонку ---------- */
.srvgrid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1.25rem,2.4vw,2.5rem); align-items:start }
.grp{ background:var(--sheet); border:1px solid var(--line); border-top:4px solid var(--blue); padding:clamp(1.1rem,2vw,1.75rem) }
.grp--pi{ border-top-color:var(--acc) }
.grp h3{ font-size:1.28rem; margin-bottom:var(--s2) }
.srv{ list-style:none; margin:0; padding:0 }
.srv li{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:.7rem 0; border-bottom:1px dashed var(--line);
}
.srv li:last-child{ border-bottom:0 }
.srv li span{ font-weight:600 }
.srv li i{ font-style:normal; font-size:.86rem; color:var(--ink-2); text-align:right }
.srv li i.pr{ color:var(--acc-ink); font-weight:700; font-family:var(--mono); font-size:.86rem }
.srv li:hover span{ color:var(--blue) }
.grp__note{ margin:var(--s3) 0 0; font-size:.9rem; color:var(--ink-2) }

/* плашка-действие */
.act{
  margin-top:clamp(1.25rem,2.4vw,2.5rem); background:var(--blue); color:var(--on-blue);
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,3rem); padding:clamp(1.25rem,2.6vw,2.25rem); align-items:center;
}
.act h3{ font-size:clamp(1.2rem,1rem + .9vw,1.7rem); color:#fff }
.act p{ margin:.5rem 0 0; font-size:.97rem; color:color-mix(in oklab, var(--on-blue) 88%, transparent) }
.pay{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:var(--s3) 0 0; padding:0 }
.pay li{ font:600 .78rem/1 var(--mono); letter-spacing:.04em; padding:.45rem .6rem; border:1px solid color-mix(in oklab, var(--on-blue) 40%, transparent) }
.act__a{ display:grid; gap:.6rem; justify-items:start }
.act__l{ text-decoration:none; border-bottom:1px solid color-mix(in oklab, var(--on-blue) 55%, transparent); font-weight:600 }
.act__h{ margin:0 !important; font:600 .78rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:.8 }

/* ---------- доверие: инверсная синяя секция ---------- */
.sec--trust{
  background:var(--blue-deep); color:var(--on-blue); border-top:0 !important;
  clip-path:var(--edge); margin-top:-1px;
}
.scales{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(1.5rem,3vw,3rem) }
.scale__k{ margin:0 0 .7rem; font:600 .72rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; opacity:.78 }
.scale__bar{
  position:relative; height:34px; background:oklch(42% 0.055 258);
  background-image:repeating-linear-gradient(90deg, color-mix(in oklab, var(--on-blue) 22%, transparent) 0 1px, transparent 1px calc(100%/23));
}
.scale__fill{ position:absolute; left:0; top:0; bottom:0; background:var(--acc); min-width:3px }
.scale__fill--rank{ width:calc(100%/23) }
.scale__fill--rate{ width:100%; background:var(--blue-2) }
.scale__zero,.scale__max{ position:absolute; top:calc(100% + .35rem); font:600 .72rem/1 var(--mono); opacity:.7 }
.scale__zero{ left:0 } .scale__max{ right:0 }
.scale__v{ margin:1.9rem 0 0; font-size:.98rem; color:color-mix(in oklab, var(--on-blue) 90%, transparent) }
.scale__v b{ font-family:var(--serif); font-size:1.25rem; color:#fff }

.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(2rem,4vw,3.25rem) }
.q{
  margin:0; padding:0 0 0 var(--s3); border-left:3px solid var(--acc);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s2);
}
.q p{ margin:0; font-size:.97rem; color:color-mix(in oklab, var(--on-blue) 92%, transparent) }
.q footer{ font:600 .74rem/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; opacity:.8; display:flex; align-items:center; gap:.5rem }
.q__r{ background:var(--acc); color:var(--acc-on); padding:.2rem .45rem; font-family:var(--sans); font-size:.82rem; letter-spacing:0 }

.mini-num{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(1rem,2vw,2rem); margin:clamp(2rem,4vw,3.25rem) 0 0;
}
.mini-num > div{ border-top:2px solid color-mix(in oklab, var(--on-blue) 30%, transparent); padding-top:var(--s2) }
.mini-num dt{ font:700 clamp(1.9rem,1.4rem + 1.6vw,2.7rem)/1 var(--serif); font-variant-numeric:tabular-nums; color:#fff }
.mini-num dd{ margin:.45rem 0 0; font-size:.88rem; color:color-mix(in oklab, var(--on-blue) 82%, transparent) }

/* ---------- салон ---------- */
.salon{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(1rem,2vw,1.75rem); align-items:start }
.salon__ph{ margin:0 }
.salon__ph .ph{ width:100%; border:1px solid var(--line); background:var(--sheet); padding:0 }
.salon__ph img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.salon__ph figcaption{ margin-top:.6rem; font-size:.88rem; color:var(--ink-2) }
.feats{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line) }
.feats li{ display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; background:var(--sheet); font-size:.94rem }
.feats .ic{ width:22px; height:22px; color:var(--blue) }
.salon__note{ margin:var(--s3) 0 0; font-size:.92rem; color:var(--ink-2) }
.salon__note a{ color:var(--blue); text-underline-offset:3px }

/* ---------- контакты: карта слева, сведения справа ---------- */
.cont{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:clamp(1.25rem,2.5vw,2.5rem); align-items:start }
.cont__info{ background:var(--sheet); border:1px solid var(--line); padding:clamp(1.1rem,2vw,1.6rem) }
.open{ display:flex; align-items:center; gap:.55rem; margin:0 0 var(--s3); padding-bottom:var(--s3); border-bottom:1px solid var(--line); font-size:.95rem }
.open .dot{ width:10px; height:10px; background:var(--acc); flex:none }
.cont__row{ display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:var(--s2); padding:.8rem 0; border-bottom:1px dashed var(--line) }
.cont__k{ font:600 .68rem/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.cont__v{ font-size:.97rem }
.cont__v a{ color:var(--blue); text-decoration:none; border-bottom:1px solid color-mix(in oklab, var(--blue) 45%, transparent) }
.cont__v a:hover{ border-bottom-color:var(--blue) }
.soc{ display:flex; gap:.9rem; flex-wrap:wrap }
.more{ display:block; margin-top:.35rem; background:none; border:0; padding:0; cursor:pointer; color:var(--blue); font:inherit; font-size:.88rem; border-bottom:1px dashed currentColor }
.hours{ list-style:none; margin:.6rem 0 0; padding:0; font-size:.92rem }
.hours li{ display:flex; justify-content:space-between; gap:var(--s2); padding:.28rem 0; border-bottom:1px dotted var(--line) }
.hours li.today{ color:var(--acc-ink); font-weight:700 }
@media (max-width:400px){ .cont__row{ grid-template-columns:1fr; gap:.15rem } }

/* карта */
.map{ position:relative; height:clamp(340px,44vw,520px); overflow:hidden; border:1px solid var(--line); background:var(--paper-2); touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab }
.map.drag{ cursor:grabbing }
.map__layer{ position:absolute; left:0; top:0; will-change:transform }
.map__layer img{ position:absolute; width:256px; height:256px; max-width:none; pointer-events:none }
html[data-theme="dark"] .map__layer{ filter:invert(.92) hue-rotate(180deg) saturate(.7) }
.map__pin{ position:absolute; left:50%; top:50%; width:26px; height:34px; transform:translate(-50%,-100%); pointer-events:none; z-index:3 }
.map__pin svg{ width:100%; height:100%; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)) }
.map__pin path{ fill:var(--acc) }
.map__pin circle{ fill:#fff }
.map__ctrl{ position:absolute; right:10px; top:10px; z-index:4; display:grid; gap:6px }
.map__ctrl button{
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:var(--sheet); color:var(--ink); font:600 1.15rem/1 var(--sans);
}
.map__ctrl button:hover{ border-color:var(--blue); color:var(--blue) }
.map__ctrl .ic{ width:18px; height:18px }
.map__cr{ position:absolute; right:0; bottom:0; margin:0; z-index:4; font-size:.66rem; background:color-mix(in oklab, var(--sheet) 85%, transparent); color:var(--ink-2); padding:.15rem .4rem }
.map__foot{ display:flex; justify-content:space-between; align-items:center; gap:var(--s2); flex-wrap:wrap; margin:var(--s2) 0 0; font-size:.88rem; color:var(--ink-2) }
.map__foot a{ color:var(--blue); text-decoration:none; border-bottom:1px solid currentColor }

/* ---------- призыв: единственный полноэкранный коралловый жест ---------- */
.cta{ background:var(--acc); color:var(--acc-on); clip-path:var(--edge) }
.cta__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; padding:clamp(2.5rem,4.5vw,4.25rem) 0 clamp(2.25rem,4vw,4rem) }
.cta__t{ margin:0; font:700 clamp(1.5rem,1rem + 2.4vw,2.7rem)/1.12 var(--serif) }
.cta__t .hl{ color:#fff }

/* ---------- подвал ---------- */
.foot{ background:var(--paper-2); border-top:1px solid var(--line); padding:clamp(2rem,3.5vw,3.25rem) 0 }
.foot__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:var(--s4) }
.foot p{ margin:0; font-size:.92rem; color:var(--ink-2) }
.foot a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid transparent }
.foot a:hover{ color:var(--blue); border-bottom-color:var(--blue) }
.foot__b{ font:700 1.15rem/1.2 var(--serif); color:var(--ink) !important; margin-bottom:.5rem !important }
.foot__k{ font:600 .68rem/1.4 var(--mono) !important; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.55rem !important }

/* ---------- липкая кнопка звонка (телефон) ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:45; display:none;
  align-items:center; justify-content:center; gap:.5rem; min-height:54px; padding:.55rem 1rem;
  background:var(--acc); color:var(--acc-on); text-decoration:none; font-weight:700;
}

/* ---------- лайтбокс ---------- */
.lb{ position:fixed; inset:0; z-index:70; background:oklch(14% 0.03 258 / .95); display:flex; align-items:center; justify-content:center; gap:var(--s2); padding:var(--s3) }
.lb[hidden]{ display:none }
.lb__fig{ margin:0; max-width:min(100%,1000px); text-align:center }
.lb__fig img{ max-height:78vh; width:auto; margin-inline:auto; border:1px solid oklch(60% 0.02 250 / .5) }
.lb__fig figcaption{ color:oklch(92% 0.01 244); font-size:.88rem; margin-top:var(--s2) }
.lb__x,.lb__nav{ width:46px; height:46px; flex:none; display:grid; place-items:center; cursor:pointer; background:transparent; border:1px solid oklch(80% 0.02 244 / .5); color:#fff }
.lb__x:hover,.lb__nav:hover{ background:var(--acc); border-color:var(--acc); color:var(--acc-on) }
.lb__x{ position:absolute; right:var(--s3); top:var(--s3) }

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr) }
  .cont{ grid-template-columns:1fr }
  .map{ height:clamp(320px,52vw,460px) }
}
@media (max-width:1000px){
  .nav{ gap:.85rem }
  .nav a{ font-size:.87rem }
}
@media (max-width:1000px) and (min-width:700px){
  /* ряды заполняются целиком: по две колонки */
  .feats{ grid-template-columns:1fr 1fr }
  .mini-num{ grid-template-columns:1fr 1fr }
  .quotes{ grid-template-columns:1fr 1fr }
}
@media (max-width:900px){
  .nav{
    position:fixed; inset:68px 0 auto; flex-direction:column; gap:0; padding:var(--s2) 1.25rem var(--s3);
    background:var(--paper); border-bottom:1px solid var(--line); display:none; z-index:41;
  }
  .nav.open{ display:flex }
  .nav a{ padding:.8rem 0; border-bottom:1px solid var(--line); font-size:1.02rem }
  .icobtn--menu{ display:grid }
  .head__act{ margin-left:auto }          /* меню и тема остаются в шапке на любой ширине */
  .btn--call .btn__num{ display:none }
  .btn--call{ width:46px; padding:0 }
  .hero{ grid-template-columns:1fr }
  .hero__side{ order:-1; min-height:min(78vw,420px) }
  .hero__text{ padding-inline:1.25rem; justify-content:flex-start }
  .hero__photo img{ clip-path:none }
  .cut--1{ width:16%; top:8%; left:4% }
  .cut--2{ width:20%; bottom:-6%; left:auto; right:6% }
  .srvgrid{ grid-template-columns:1fr }
  .act{ grid-template-columns:1fr }
  .salon{ grid-template-columns:1fr }
  .callbar{ display:flex }
  body{ padding-bottom:56px }
  .lb__x{ right:1rem; top:1rem }
}
@media (max-width:560px){
  .brand__txt{ display:none }             /* остаётся знак; доступное имя — на ссылке */
  .head__in{ gap:.6rem }
  .hero__facts{ gap:var(--s3) var(--s4) }
  .cta__in{ flex-direction:column; align-items:flex-start }
  .lb__nav{ position:fixed; bottom:1.25rem }
  .lb__nav--p{ left:1.25rem } .lb__nav--n{ right:1.25rem }
}