/* ============================================================
   ZAHAIR — «Палитра колориста»
   Фон — светлая холодная фольга, текст — графит.
   Акцент --shade не задан заранее: его ставит app.js из цвета волос
   выбранной работы (пряди, фильтр тона, просмотр фото).
   ============================================================ */

:root{
  --foil:#EBECEE;
  --foil-2:#DFE0E4;
  --paper:#F7F7F8;
  --ink:#17161B;
  --ink-2:#4E4C55;
  --line:rgba(23,22,27,.16);
  --line-2:rgba(23,22,27,.28);

  --shade:#A8325C;          /* стартовый тон — розовый с работы «Креативный цвет» */
  --shade-ink:#8E2A4E;      /* тот же тон, затемнённый до контраста 4.5:1 на фольге */
  --on-shade:#FFFFFF;
  --shade-soft:color-mix(in oklab, var(--shade) 22%, var(--foil));

  --open:#2E7D52;

  --f-d:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif-condensed,sans-serif;
  --f-t:'Ysabeau Office','Segoe UI',system-ui,sans-serif;

  --gut:clamp(16px,4vw,56px);
  --max:1400px;
  --bar:68px;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--foil); color:var(--ink);
  font:400 18px/1.55 var(--f-t); font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; }
h1,h2,h3,p,figure,blockquote,dl,dd,ol,ul{ margin:0; }
ol,ul{ padding:0; list-style:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--shade); color:var(--on-shade); }

.skip{ position:fixed; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--foil); padding:10px 16px; border-radius:999px; text-decoration:none; }
.skip:focus{ top:12px; }

/* ---------- типографика ---------- */
h1,h2,.logo,.d{ font-family:var(--f-d); font-weight:800; letter-spacing:-.004em; }
h2{ font-size:clamp(54px,8.6vw,136px); line-height:.84; }
h3{ font-family:var(--f-d); font-weight:700; font-size:clamp(28px,2.6vw,36px); line-height:1; }
.link{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; font-weight:600; }
.link:hover{ color:var(--shade-ink); }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border-radius:999px;
  font:600 17px/1 var(--f-t); text-decoration:none; white-space:nowrap;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn-ink{ background:var(--ink); color:var(--foil); }
.btn-ink:hover{ background:var(--shade-ink); color:#fff; }
.btn-shade{ background:var(--shade); color:var(--on-shade); }
.btn-shade:hover{ background:var(--ink); color:var(--foil); }
.btn-line{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn-line:hover{ background:var(--ink); color:var(--foil); }

/* ---------- шапка ---------- */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:40; height:var(--bar);
  display:flex; align-items:center; gap:28px; padding:0 var(--gut);
  transition:background-color .3s, box-shadow .3s;
}
.bar.stuck{ background:color-mix(in srgb, var(--foil) 88%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); }
.logo{ font-size:32px; line-height:1; text-decoration:none; letter-spacing:.02em; }
.menu{ display:flex; gap:22px; margin-left:auto; }
.menu a{ text-decoration:none; font-weight:500; font-size:17px; padding:6px 0; background:linear-gradient(var(--shade),var(--shade)) 0 100%/0 2px no-repeat; transition:background-size .3s var(--ease); }
.menu a:hover,.menu a[aria-current="true"]{ background-size:100% 2px; }
.bar-status{ font-size:15px; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.bar-status::before,.ct-status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink-2); }
[data-open-status].is-open::before{ background:var(--open); box-shadow:0 0 0 4px color-mix(in srgb, var(--open) 22%, transparent); }
.bar-cta{ min-height:44px; padding:0 20px; font-size:16px; }
.burger{ display:none; width:44px; height:44px; border-radius:50%; position:relative; }
.burger span{ position:absolute; left:12px; right:12px; height:2px; background:var(--ink); transition:transform .3s var(--ease); }
.burger span:first-child{ top:17px; } .burger span:last-child{ top:25px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ---------- первый экран ---------- */
.hero{
  position:relative; min-height:max(100svh,700px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--bar) + 24px) var(--gut) clamp(28px,5vh,56px);
  overflow:hidden; isolation:isolate;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; touch-action:pan-y; cursor:default; }
.hero-canvas.is-hot{ cursor:pointer; }
.hero-hint{ max-width:34ch; font-size:16px; color:var(--ink-2); margin:0 0 22px auto; text-align:right; }
.hint-touch{ display:none; }
@media (hover:none){ .hint-fine{ display:none; } .hint-touch{ display:inline; } }

.hero-copy{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr); gap:clamp(24px,4vw,64px); align-items:end; }
h1{ font-size:clamp(58px,8.6vw,138px); line-height:.82; margin-bottom:-.06em; }
h1 .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
h1 .ln > span{ display:inline-block; }
.hero-side{ display:grid; gap:20px; padding-bottom:6px; }
.hero-quote p{ font-family:var(--f-d); font-weight:600; font-style:italic; font-size:clamp(24px,2.1vw,30px); line-height:1.05; }
.hero-quote footer{ margin-top:8px; font-size:15px; color:var(--ink-2); }
.hero-lead{ font-size:17px; color:var(--ink-2); max-width:44ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.offer{ font-size:15px; font-weight:600; display:flex; align-items:center; gap:10px; }
.offer::before{ content:"−20%"; font-family:var(--f-d); font-weight:800; font-size:20px; background:var(--ink); color:var(--foil); padding:3px 9px 4px; border-radius:999px; }

.strand-tip{
  position:absolute; z-index:5; left:0; top:0; pointer-events:none;
  display:flex; gap:12px; align-items:center; padding:8px 14px 8px 8px;
  background:var(--paper); border-radius:14px; box-shadow:0 16px 40px -18px rgba(23,22,27,.5), 0 0 0 1px var(--line);
  opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s var(--ease);
  max-width:280px;
}
.strand-tip.on{ opacity:1; transform:none; }
.strand-tip img{ width:54px; height:72px; object-fit:cover; border-radius:8px; }
.st-text{ display:grid; gap:2px; line-height:1.2; }
.st-text b{ font-family:var(--f-d); font-size:24px; font-weight:700; }
.st-text span{ font-size:14px; color:var(--ink-2); }

/* ---------- секции ---------- */
.sec{ padding:clamp(88px,12vw,168px) var(--gut) 0; max-width:calc(var(--max) + 2*var(--gut)); margin:0 auto; }
.sec-head{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:24px clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(36px,5vw,64px); }
.sec-head p{ color:var(--ink-2); max-width:46ch; font-size:17px; }

/* ---------- фильтры и чипы ---------- */
.filters{ display:grid; gap:14px; margin-bottom:22px; }
.filter-row{ display:grid; grid-template-columns:90px 1fr; align-items:center; gap:12px; }
.filter-k{ font-family:var(--f-d); font-weight:700; font-size:24px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px;
  border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--line-2); font-size:16px; font-weight:500;
  transition:background-color .2s, color .2s, box-shadow .2s, opacity .2s;
}
.chip:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--foil); box-shadow:none; }
.chip:disabled{ opacity:.38; cursor:not-allowed; box-shadow:inset 0 0 0 1.5px var(--line); }
.chip .dot{ width:16px; height:16px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.chip .n{ font-size:13px; opacity:.7; font-variant-numeric:tabular-nums; }

.works-count{ font-size:15px; color:var(--ink-2); margin:0 0 18px; min-height:1.5em; }
.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,40px) clamp(12px,1.6vw,22px); }
.card{ display:grid; gap:10px; text-align:left; cursor:zoom-in; }
.card-img{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:3/4; background:var(--foil-2); }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card-img img{ transform:scale(1.045); }
.swatch{ height:10px; border-radius:2px; }
.card-t{ display:grid; gap:4px; }
.card-t b{ font-family:var(--f-d); font-weight:700; font-size:28px; line-height:.95; }
.card-t span{ font-size:15px; color:var(--ink-2); }
.empty{ padding:48px 0; display:grid; gap:16px; justify-items:start; }

/* ---------- подбор ---------- */
.match-body{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); gap:clamp(28px,5vw,80px); align-items:start; }
.match-steps{ display:grid; gap:44px; }
.q h3{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.q-n{ font-family:var(--f-d); font-weight:800; font-size:20px; width:34px; height:34px; border-radius:50%; display:inline-grid; place-items:center; background:var(--ink); color:var(--foil); flex:none; transform:translateY(-3px); }
.q[aria-disabled="true"]{ opacity:.4; }
.q[aria-disabled="true"] .opts{ pointer-events:none; }
.opts{ display:flex; flex-wrap:wrap; gap:10px; }
.opts button{
  min-height:54px; padding:0 22px; border-radius:999px; font-size:17px; font-weight:500;
  box-shadow:inset 0 0 0 1.5px var(--line-2); transition:background-color .2s, color .2s, box-shadow .2s;
}
.opts button:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.opts button[aria-pressed="true"]{ background:var(--ink); color:var(--foil); box-shadow:none; }

.match-result{ position:sticky; top:calc(var(--bar) + 20px); min-height:420px; background:var(--paper); border-radius:20px; padding:clamp(20px,2.4vw,32px); box-shadow:0 0 0 1px var(--line); }
.mr-empty{ display:grid; gap:20px; color:var(--ink-2); height:100%; }
.mr-swatch{ height:260px; border-radius:12px; background:repeating-linear-gradient(90deg, var(--foil-2) 0 6px, transparent 6px 12px); }
.mr{ display:grid; gap:16px; }
.mr-top{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; }
.mr-top img{ width:96px; height:128px; object-fit:cover; border-radius:8px; }
.mr-k{ font-size:15px; color:var(--ink-2); }
.mr h3{ font-size:clamp(34px,3.2vw,44px); line-height:.92; margin-top:4px; }
.mr-why{ font-size:17px; }
.mr-note{ font-size:15px; color:var(--ink-2); border-left:3px solid var(--shade); padding-left:12px; }
.mr-add{ display:grid; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.mr-add p{ font-weight:600; font-size:16px; }
.mr-add label{ display:flex; align-items:center; gap:12px; font-size:16px; cursor:pointer; min-height:36px; }
.mr-add input{ appearance:none; width:22px; height:22px; border-radius:6px; box-shadow:inset 0 0 0 1.5px var(--ink); display:grid; place-items:center; margin:0; flex:none; cursor:pointer; }
.mr-add input:checked{ background:var(--ink); }
.mr-add input:checked::after{ content:""; width:10px; height:6px; border:2px solid var(--foil); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); }
.mr-add label span{ margin-left:auto; color:var(--ink-2); font-size:15px; font-variant-numeric:tabular-nums; }
.mr-sum{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.mr-sum b{ font-family:var(--f-d); font-weight:800; font-size:clamp(36px,3.4vw,48px); line-height:1; font-variant-numeric:tabular-nums; }
.mr-sum span{ color:var(--ink-2); font-size:16px; text-align:right; }
.mr-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.mr-reset{ font-size:15px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; justify-self:start; }

/* ---------- цены ---------- */
.price-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(24px,4vw,64px); align-items:start; }
.price-list{ border-bottom:1px solid var(--line-2); }
.pr{
  display:grid; grid-template-columns:minmax(0,1fr) 90px 200px auto; gap:8px 24px; align-items:center;
  padding:22px 0; border-top:1px solid var(--line-2); position:relative;
}
.pr::before{ content:""; position:absolute; left:-14px; top:22px; bottom:22px; width:4px; border-radius:4px; background:var(--pr-c,var(--shade)); transform:scaleY(0); transition:transform .35s var(--ease); }
.pr:hover::before,.pr:focus-within::before,.pr.on::before{ transform:none; }
.pr-name{ font-family:var(--f-d); font-weight:700; font-size:clamp(28px,2.7vw,38px); line-height:1; }
.pr-hit{ font-family:var(--f-t); font-size:13px; font-weight:700; vertical-align:middle; margin-left:8px; padding:3px 9px; border-radius:999px; background:var(--shade-soft); color:var(--ink); position:relative; top:-4px; }
.pr-desc{ color:var(--ink-2); font-size:16px; margin-top:6px; max-width:52ch; }
.pr-dur{ color:var(--ink-2); font-size:16px; white-space:nowrap; }
.pr-price{ font-family:var(--f-d); font-weight:700; font-size:30px; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.pr .btn{ min-height:46px; padding:0 20px; font-size:16px; }
.pr-thumb{ display:none; }
.pr-meta{ display:contents; }
.price-peek{ position:sticky; top:calc(var(--bar) + 24px); aspect-ratio:3/4; border-radius:4px; overflow:hidden; background:var(--foil-2); }
.price-peek img{ width:100%; height:100%; object-fit:cover; transition:opacity .25s; }

/* ---------- видео ---------- */
.st-body{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start; }
.player{ position:relative; width:min(400px,86vw); aspect-ratio:9/16; border-radius:22px; overflow:hidden; background:var(--ink); color:#fff; outline-offset:4px; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.player video{ width:100%; height:100%; object-fit:cover; }
.pl-bars{ position:absolute; inset:12px 12px auto; display:flex; gap:4px; z-index:3; }
.pl-bars i{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.35); overflow:hidden; }
.pl-bars i b{ display:block; height:100%; width:100%; background:#fff; transform-origin:0 50%; transform:scaleX(0); }
.pl-zone{ position:absolute; top:0; bottom:72px; z-index:2; }
.pl-zone.prev{ left:0; width:35%; } .pl-zone.next{ right:0; width:65%; }
.pl-zone:focus-visible{ outline:2px solid #fff; outline-offset:-6px; }
.pl-ui{ position:absolute; inset:auto 0 0 0; z-index:3; display:flex; align-items:center; gap:10px; padding:14px; background:linear-gradient(transparent, rgba(0,0,0,.55)); }
.pl-btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); }
.pl-btn svg{ width:20px; height:20px; fill:#fff; }
.pl-btn:focus-visible{ outline-color:#fff; }
.player .i-play,.player.paused .i-pause{ display:none; } .player.paused .i-play{ display:block; }
#plSound .i-on{ display:none; } #plSound.on .i-on{ display:block; } #plSound.on .i-off{ display:none; }
.pl-tone{ font-size:15px; font-weight:600; margin-right:auto; display:flex; align-items:center; gap:8px; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.pl-tone i{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.7); }
.st-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 16px; max-width:660px; }
.st-item button{ display:grid; gap:8px; width:100%; text-align:left; }
.st-item .th{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--foil-2); }
.st-item img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; transition:transform .6s var(--ease); }
.st-item button:hover img{ transform:scale(1.05); }
.st-item .th::after{ content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 0 0 var(--ink); transition:box-shadow .25s; }
.st-item.on .th::after{ box-shadow:inset 0 0 0 3px var(--ink); }
.st-item .lbl{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); }
.st-item .lbl i{ width:10px; height:10px; border-radius:50%; flex:none; }
.st-item.on .lbl{ color:var(--ink); font-weight:600; }

/* ---------- мастер ---------- */
.master-grid{ display:grid; grid-template-columns:minmax(220px,340px) minmax(0,1fr); gap:clamp(28px,6vw,96px); align-items:start; }
/* селфи на белом фоне: квадратный кадр по голове и плечам, белый фон растворяется в карточке */
.portrait{ border-radius:20px; overflow:hidden; background:var(--paper); box-shadow:0 0 0 1px var(--line); }
.portrait img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 12%; mix-blend-mode:multiply; }
.bio{ display:grid; gap:20px; }
.bio h2{ margin-bottom:-8px; }
.bio-role{ font-size:17px; color:var(--ink-2); }
.bio-lead{ font-family:var(--f-d); font-weight:600; font-style:italic; font-size:clamp(28px,2.6vw,38px); line-height:1.02; }
.bio > p:not(.bio-lead){ max-width:60ch; color:var(--ink-2); }
.facts{ display:flex; flex-wrap:wrap; gap:16px 48px; padding:20px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.facts dt{ font-family:var(--f-d); font-weight:800; font-size:clamp(52px,5vw,72px); line-height:.9; }
.facts dd{ font-size:15px; color:var(--ink-2); }
.principles{ display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; font-size:16px; color:var(--ink-2); }
.principles b{ color:var(--ink); }
.visit{ margin-top:clamp(64px,8vw,112px); }
.visit-title{ font-size:clamp(36px,3.6vw,52px); margin-bottom:28px; }
.visit-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.visit-steps li{ counter-increment:step; display:grid; gap:8px; align-content:start; padding-top:18px; border-top:2px solid var(--ink); }
.visit-steps li::before{ content:counter(step); font-family:var(--f-d); font-weight:800; font-size:64px; line-height:.85; color:var(--shade-ink); }
.visit-steps b{ font-family:var(--f-d); font-weight:700; font-size:28px; line-height:1; }
.visit-steps span{ font-size:16px; color:var(--ink-2); }

/* ---------- отзывы ---------- */
.rating{ font-family:var(--f-d); font-weight:800; font-size:44px; color:var(--ink); line-height:0; vertical-align:-4px; }
#revChips{ margin-bottom:36px; }
.rev-grid{ columns:3 300px; column-gap:clamp(20px,3vw,44px); }
.rev{ break-inside:avoid; padding:20px 0 28px; border-top:1px solid var(--line-2); display:grid; gap:12px; }
.rev p{ font-size:18px; line-height:1.55; }
.rev mark{ background:linear-gradient(transparent 58%, var(--shade-soft) 58%); color:inherit; padding:0 1px; }
.rev-by{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; font-size:15px; color:var(--ink-2); }
.rev-by b{ color:var(--ink); font-size:16px; }
.rev-stars{ color:var(--ink); letter-spacing:2px; font-size:14px; }
.rev-more{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:28px; }

/* ---------- контакты ---------- */
.ct-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,80px); align-items:stretch; }
.ct-status{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:17px; margin-bottom:24px; }
.ct-list{ display:grid; border-top:1px solid var(--line-2); }
.ct-list div{ display:grid; grid-template-columns:100px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-2); }
.ct-list dt{ font-family:var(--f-d); font-weight:700; font-size:22px; line-height:1.2; }
.ct-list dd{ font-size:17px; }
.ct-list a{ font-weight:600; text-decoration:none; }
.ct-list a:hover{ text-decoration:underline; }
.ct-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.ct-map{ position:relative; min-height:420px; border-radius:4px; overflow:hidden; background:var(--foil-2); }
.ct-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-load{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:6px; text-align:center;
  background:
    linear-gradient(115deg, transparent 47%, rgba(23,22,27,.10) 47% 49%, transparent 49%),
    linear-gradient(20deg, transparent 58%, rgba(23,22,27,.08) 58% 59.5%, transparent 59.5%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(23,22,27,.05) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(23,22,27,.05) 46px 47px),
    var(--foil-2);
}
.map-load b{ font-family:var(--f-d); font-size:30px; font-weight:700; }
.map-load span:last-child{ font-size:15px; color:var(--ink-2); }
.map-pin{ width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--shade); box-shadow:0 0 0 6px color-mix(in srgb, var(--shade) 25%, transparent); margin-bottom:12px; }
.map-load:hover b{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- подвал ---------- */
.foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; padding:clamp(72px,10vw,140px) var(--gut) 36px; max-width:calc(var(--max) + 2*var(--gut)); margin:0 auto; font-size:15px; color:var(--ink-2); }
.foot .logo{ font-size:44px; color:var(--ink); margin-right:auto; }
.foot a{ font-weight:600; color:var(--ink); }

/* ---------- нижняя панель (телефон) ---------- */
.dock{ display:none; }

/* ---------- просмотр фото ---------- */
.lb{ position:fixed; inset:0; z-index:60; background:#121115; color:#F2F2F4; display:grid; grid-template-columns:minmax(0,1fr) 340px; }
.lb-stage{ display:grid; place-items:center; padding:24px 80px; min-height:0; }
.lb-stage img{ max-width:100%; max-height:calc(100svh - 48px); object-fit:contain; border-radius:4px; }
.lb-side{ background:#1C1B21; padding:96px 32px 32px; display:flex; flex-direction:column; gap:14px; }
.lb-count{ font-size:15px; color:#B9B8C0; }
.lb-side h3{ font-size:44px; line-height:.95; }
.lb-sub{ color:#C9C8CF; }
.lb-swatch{ height:44px; border-radius:6px; margin-top:8px; }
.lb-tone{ font-size:15px; color:#B9B8C0; }
.lb-side .btn{ margin-top:10px; }
.lb-side .btn-shade:hover{ background:#F2F2F4; color:var(--ink); }
.lb-note{ font-size:14px; color:#B9B8C0; }
.lb-btn{ position:absolute; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#F2F2F4; color:var(--ink); z-index:2; transition:transform .2s var(--ease); }
.lb-btn:hover{ transform:scale(1.08); }
.lb-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lb-prev{ left:20px; top:50%; margin-top:-24px; }
.lb-next{ right:360px; top:50%; margin-top:-24px; }
.lb-close{ right:20px; top:20px; }
.lb :focus-visible{ outline-color:#fff; }

/* ---------- онлайн-запись ---------- */
.bk{ position:fixed; inset:0; z-index:70; background:rgba(23,22,27,.5); display:flex; justify-content:flex-end; }
.bk-panel{ width:min(580px,100%); height:100%; background:var(--paper); display:flex; flex-direction:column; box-shadow:-30px 0 60px -30px rgba(0,0,0,.4); }
.bk-head{ display:flex; align-items:center; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); min-height:84px; }
.bk-head h3{ font-size:34px; margin-right:auto; }
.bk-back{ font-weight:600; font-size:16px; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.bk-close{ position:static; background:var(--foil-2); }
.bk-list{ overflow:auto; padding:8px 24px 24px; flex:1; }
.bk-row{ display:grid; grid-template-columns:56px 1fr auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.bk-row img{ width:56px; height:72px; object-fit:cover; border-radius:6px; }
.bk-row b{ font-family:var(--f-d); font-weight:700; font-size:24px; line-height:1; display:block; }
.bk-row span{ font-size:15px; color:var(--ink-2); }
.bk-row .btn{ min-height:42px; padding:0 18px; font-size:15px; }
.bk-frame{ position:relative; flex:1; background:#fff; }
.bk-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.bk-state{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; text-align:center; padding:32px; background:var(--paper); color:var(--ink-2); }
.bk-slow b{ font-family:var(--f-d); font-size:28px; color:var(--ink); }
.bk-slow p{ max-width:36ch; }
.spin{ width:28px; height:28px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--ink); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.bk-foot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 24px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); font-size:15px; color:var(--ink-2); }

body.locked{ overflow:hidden; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1180px){
  .bar-status{ display:none; }
  .menu{ gap:16px; }
  .menu a{ font-size:16px; }
  .price-wrap{ grid-template-columns:1fr; }
  .price-peek{ display:none; }
}
@media (max-width:1020px){
  :root{ --bar:62px; }
  .burger{ display:block; }
  .menu{
    position:fixed; inset:var(--bar) 0 auto 0; flex-direction:column; gap:0; margin:0;
    background:var(--foil); padding:8px var(--gut) 24px; box-shadow:0 20px 30px -20px rgba(23,22,27,.3);
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .menu.open{ opacity:1; transform:none; visibility:visible; }
  .menu a{ font-family:var(--f-d); font-weight:700; font-size:34px; padding:10px 0; border-bottom:1px solid var(--line); background:none; }
  .bar-cta{ margin-left:auto; }
  .hero-copy{ grid-template-columns:1fr; }
  .hero-side{ max-width:620px; }
  .sec-head{ grid-template-columns:1fr; }
  .match-body{ grid-template-columns:1fr; }
  .match-result{ position:static; min-height:0; }
  .mr-swatch{ height:120px; }
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .st-body{ grid-template-columns:1fr; justify-items:center; }
  .st-list{ width:100%; max-width:560px; }
  .master-grid{ grid-template-columns:1fr; }
  .portrait{ max-width:300px; }
  .visit-steps{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .ct-grid{ grid-template-columns:1fr; }
  .lb{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .lb-stage{ padding:64px 16px 12px; }
  .lb-stage img{ max-height:calc(100svh - 330px); }
  .lb-side{ padding:20px 20px calc(20px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; }
  .lb-side h3{ font-size:32px; }
  .lb-count,.lb-sub,.lb-tone,.lb-note{ grid-column:1; }
  .lb-swatch{ grid-column:1 / -1; height:14px; margin:4px 0; order:-1; }
  .lb-side .btn{ grid-column:2; grid-row:2 / span 3; margin:0; }
  .lb-prev,.lb-next{ top:auto; bottom:auto; margin:0; }
  .lb-prev{ left:12px; top:12px; } .lb-next{ right:auto; left:68px; top:12px; }
  .lb-close{ right:12px; top:12px; }
}
@media (max-width:760px){
  body{ font-size:17px; }
  .bar-cta{ display:none; }
  .burger{ margin-left:auto; }
  .hero{ min-height:0; justify-content:flex-start; padding-top:calc(var(--bar) + max(250px, 38svh)); padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .hero-quote p{ font-size:22px; }
  .hero-hint{ text-align:left; margin:0 0 18px; font-size:15px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .filter-row{ grid-template-columns:1fr; gap:8px; }
  .chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 calc(-1 * var(--gut)); padding:2px var(--gut) 6px; scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:none; }
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card-t b{ font-size:23px; }
  .card-t span{ font-size:14px; }
  .pr{ grid-template-columns:64px 1fr; grid-template-areas:"th main" "th meta" ". cta"; gap:6px 16px; padding:18px 0; }
  .pr::before{ display:none; }
  .pr-thumb{ display:block; grid-area:th; width:64px; height:86px; object-fit:cover; border-radius:6px; align-self:start; }
  .pr-main{ grid-area:main; }
  .pr-meta{ grid-area:meta; display:flex; gap:14px; align-items:baseline; }
  .pr-price{ text-align:left; font-size:26px; }
  .pr .btn{ grid-area:cta; justify-self:start; margin-top:6px; }
  .pr-dur,.pr-price{ grid-area:auto; }
  .principles{ grid-template-columns:1fr; }
  .mr-sum{ flex-direction:column; align-items:flex-start; gap:6px; }
  .mr-sum span{ text-align:left; }
  .visit-steps{ grid-template-columns:1fr; }
  .ct-list div{ grid-template-columns:1fr; gap:2px; }
  .ct-map{ min-height:340px; }
  .ct-actions .btn{ flex:1 1 auto; }
  .foot{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  .dock{
    display:flex; gap:10px; position:fixed; z-index:45; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    padding:8px; border-radius:999px; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 12px 30px -12px rgba(23,22,27,.45), 0 0 0 1px var(--line);
  }
  .dock .btn-shade{ flex:1; }
  .dock-call{ width:52px; padding:0; flex:none; }
  .dock-call svg{ width:22px; height:22px; fill:currentColor; }
  .bk-row{ grid-template-columns:48px 1fr; }
  .bk-row img{ width:48px; height:64px; grid-row:span 2; }
  .bk-row .btn{ grid-column:2; justify-self:start; }
}

.intro h1 .ln > span{ transform:translateY(105%); }
.intro .hero-side > *,.intro .hero-hint{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .intro h1 .ln > span{ transform:none; }
  .intro .hero-side > *,.intro .hero-hint{ opacity:1; }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}