/* ==========================================================================
   EREMEX — Cleaning service
   Палитра:
   - --bg #171717 — фон логотипа (img/logo.jpg, замер пикселя)
   - --gold-1/2/3 #e6c894 → #d4b179 → #a17c50 — градиент надписи EREMEX (img/logo.jpg)
   - --kraft #c4b399, --ink #231f20 — «крафт-бумага» и тёмный низ прайсов (img/price1–5.jpg)
   - --paper #f3efe8 — белый элемент логотипа, слегка тёплый
   Шрифты:
   - Cormorant Garamond — классическая контрастная антиква, как надпись EREMEX в логотипе (с кириллицей);
     цифры — из Playfair Display (подгружаются только 0–9 и %), т.к. у Cormorant в Google Fonts нет прямых цифр
   - Montserrat — шрифт заголовков в прайсах (img/price*.jpg)
   ========================================================================== */

:root {
  --bg: #171717;
  --bg-2: #1e1d1b;
  --line: rgba(243, 239, 232, .14);
  --paper: #f3efe8;
  --muted: rgba(243, 239, 232, .62);
  --gold-1: #e6c894;
  --gold-2: #d4b179;
  --gold-3: #a17c50;
  --kraft: #c4b399;
  --kraft-2: #b9a88d;
  --ink: #231f20;
  --gold-grad: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);

  --serif: "Playfair Display", "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
em { font-style: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 4px; }
body.is-locked { overflow: hidden; }

/* зерно поверх всего — кинематографичная фактура */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.gold {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.eyebrow {
  font: 500 12px/1 var(--sans);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-2);
}
.eyebrow--ink { color: var(--ink); opacity: .7; }
.h2 {
  font: 500 clamp(50px, 7.8vw, 128px)/.92 var(--serif);
  letter-spacing: -.02em;
}

/* ---------- кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 28px; border-radius: 999px;
  font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: none; }
.btn--gold { background: var(--gold-grad); color: var(--ink); }
.btn--gold::before { background: var(--paper); }
.btn--line { border: 1px solid var(--line); }
.btn--line::before { background: var(--paper); }
.btn--line:hover { color: var(--ink); border-color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::before { background: var(--gold-grad); }
.btn--ink:hover { color: var(--ink); }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ==========================================================================
   INTRO — мойка окна
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: none; place-items: center;
  background: var(--bg);
  transition: clip-path 1s var(--ease);
  clip-path: inset(0 0 0 0);
}
.intro.is-on { display: grid; }
.intro.is-out { clip-path: inset(0 0 100% 0); }
.intro__pane {
  position: relative;
  width: min(78vw, 560px); aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border: 1px solid rgba(212, 177, 121, .45);
  overflow: hidden;
}
/* рама с переплётом, как окошко в логотипе */
.intro__pane::before, .intro__pane::after {
  content: ""; position: absolute; background: rgba(212, 177, 121, .18); z-index: 3; pointer-events: none;
  transition: opacity .6s;
}
.intro__pane::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.intro__pane::after { top: 50%; left: 0; right: 0; height: 1px; }
.intro.is-clean .intro__pane::before, .intro.is-clean .intro__pane::after { opacity: 0; }
.intro__logo { width: 78%; height: auto; }
.intro__grime { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.intro__shine {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 245, 225, .28) 50%, transparent 60%);
  transform: translateX(-100%);
}
.intro.is-clean .intro__shine { animation: shine 1.1s var(--ease) forwards; }
@keyframes shine { to { transform: translateX(100%); } }
/* ракель: резиновое лезвие + латунная ручка */
.intro__blade {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  width: 10px; height: 0;
  background: linear-gradient(90deg, #0d0d0d, #2a2826 60%, #0d0d0d);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(212, 177, 121, .6), 6px 0 18px rgba(0, 0, 0, .5);
  opacity: 0; will-change: transform;
}
.intro__blade::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 70px; height: 8px; border-radius: 4px;
  background: var(--gold-grad); transform: translate(-100%, -50%);
}
.intro__blade.is-rtl::after { transform: translate(0, -50%); }
.intro__skip {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); right: var(--gut);
  font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
  padding: 12px 0;
}
.intro__skip:hover { color: var(--paper); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 40px;
  padding: 0 var(--gut);
  transition: background .5s, backdrop-filter .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(23, 23, 23, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header__logo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.header__logo img:first-child { width: 44px; }
.header__logo img:last-child { width: 118px; }
.nav { display: flex; gap: 28px; }
.nav a {
  position: relative; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  transition: color .3s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--gold-2);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav a:hover { color: var(--paper); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__phone { font: 500 14px/1 var(--sans); letter-spacing: .06em; color: var(--gold-1); white-space: nowrap; }
.lang { display: flex; gap: 2px; position: relative; z-index: 2; }
.lang a {
  padding: 8px 6px; font: 500 11px/1 var(--sans); letter-spacing: .14em; color: var(--muted);
  transition: color .3s;
}
.lang a:hover { color: var(--paper); }
.lang a[aria-current="page"] { color: var(--gold-1); }
.burger { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4vw;
  padding: calc(var(--header-h) + 40px) var(--gut) 72px;
  overflow-x: clip;
}
.hero::before { /* мягкое золотое свечение за видео */
  content: ""; position: absolute; right: 8%; top: 18%; width: 46vw; height: 46vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(212, 177, 121, .14), transparent);
}
.hero__text { position: relative; z-index: 1; }
.hero__title {
  margin: 28px 0 36px;
  font: 500 clamp(60px, min(8.6vw, 14svh), 172px)/.88 var(--serif);
  letter-spacing: -.035em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; }
.hero__title .line:nth-child(2) { padding-left: .6em; }
.js .hero__title .line > span { transform: translateY(105%); transition: transform 1.2s var(--ease); }
.js .is-ready .hero__title .line > span, .js body.is-ready .hero__title .line > span { transform: none; }
.hero__title .line:nth-child(2) > span { transition-delay: .08s !important; }
.hero__title .line:nth-child(3) > span { transition-delay: .16s !important; }
.hero__lead { max-width: 30em; color: var(--muted); font-size: 17px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__note { margin-top: 28px; font-size: 13px; letter-spacing: .04em; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6fcf7f; box-shadow: 0 0 0 0 rgba(111, 207, 127, .6); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(111, 207, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 207, 127, 0); } }

/* вертикальное видео — в раме, не растягиваем */
.hero__media { position: relative; justify-self: center; display: flex; align-items: flex-end; gap: 22px; }
.hero__frame {
  position: relative;
  height: min(76svh, 780px); aspect-ratio: 9 / 16;
  border-radius: 4px; overflow: hidden;
  background: #0e0e0e;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.hero__frame::after { /* смещённая золотая рамка */
  content: ""; position: absolute; inset: 0; border: 1px solid rgba(212, 177, 121, .35); border-radius: 4px; pointer-events: none;
}
.hero__frame video { width: 100%; height: 100%; object-fit: cover; }
.hero__cap {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 11px/1.6 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
  width: 5.5em;
}
.vbtn {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 23, 23, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(243, 239, 232, .25);
  transition: background .3s, transform .3s var(--ease);
}
.vbtn:hover { background: rgba(23, 23, 23, .85); transform: scale(1.06); }
.vbtn svg { width: 16px; height: 16px; fill: var(--paper); }
.vbtn .i-play, .vbtn[aria-pressed="true"] .i-pause { display: none; }
.vbtn[aria-pressed="true"] .i-play { display: block; }

/* ---------- бегущая строка ---------- */
.ticker { border-block: 1px solid var(--line); overflow: hidden; padding: 22px 0; }
.ticker__track { display: flex; width: max-content; gap: 34px; align-items: center; animation: tick 48s linear infinite; }
.ticker span { font: 500 clamp(22px, 2.6vw, 34px)/1 var(--serif); white-space: nowrap; }
.ticker i { font-style: normal; color: var(--gold-2); font-size: 14px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section-head {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px 4vw;
  margin-bottom: clamp(48px, 7vw, 110px);
}
.section-head .eyebrow { grid-column: 1 / -1; }
.section-head__aside { color: var(--muted); max-width: 26em; justify-self: end; }

/* ---------- услуги ---------- */
.services { position: relative; padding: clamp(96px, 12vw, 180px) var(--gut); }
.svc { border-top: 1px solid var(--line); }
.svc__item { border-bottom: 1px solid var(--line); }
.svc__item a {
  position: relative;
  display: grid; grid-template-columns: 70px minmax(0, 1.3fr) minmax(0, 1fr) 200px; align-items: center; gap: 24px;
  padding: 34px 0;
}
.svc__item a::before { /* золотая линия, растущая при наведении */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease);
}
.svc__num { font: 500 12px/1 var(--sans); letter-spacing: .2em; color: var(--gold-2); }
.svc__name {
  font: 500 clamp(32px, 4vw, 62px)/1.02 var(--serif); letter-spacing: -.02em;
  transition: transform .6s var(--ease), color .4s;
}
.svc__desc { color: var(--muted); font-size: 14px; max-width: 28em; }
.svc__price { justify-self: end; font: 500 13px/1 var(--sans); letter-spacing: .08em; white-space: nowrap; color: var(--gold-1); }
@media (hover: hover) and (pointer: fine) {
  .svc__item a:hover::before { transform: scaleX(1); }
  .svc__item a:hover .svc__name { transform: translateX(18px); color: var(--gold-1); }
  .svc:hover .svc__item a:not(:hover) { opacity: .45; }
  .svc__item a { transition: opacity .4s; }
  .svc.has-cursor .svc__price { opacity: 0; }
  .svc__price { transition: opacity .4s; }
}
/* плашка с ценой, плавно следует за курсором */
.svc-cursor {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: 168px; height: 168px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 6px;
  background: var(--gold-grad); color: var(--ink);
  opacity: 0; scale: .4; transition: opacity .35s, scale .5s var(--ease);
  will-change: transform;
}
.svc-cursor.is-on { opacity: 1; scale: 1; }
.svc-cursor__label { font: 500 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
.svc-cursor__val { font: 600 21px/1.15 var(--serif); padding: 0 16px; }

/* ---------- конкретные работы ---------- */
.works {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 6vw; align-items: start;
  padding: 0 var(--gut) clamp(96px, 12vw, 180px);
}
.work { border-top: 1px solid var(--line); }
.work:last-child { border-bottom: 1px solid var(--line); }
.work summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; list-style: none; cursor: pointer;
  font: 500 clamp(26px, 2.6vw, 38px)/1.1 var(--serif); transition: color .3s;
}
.work summary::-webkit-details-marker { display: none; }
.work summary::after {
  content: "+"; flex: none; font: 400 26px/1 var(--sans); color: var(--gold-2);
  transition: transform .4s var(--ease);
}
.work summary:hover { color: var(--gold-1); }
.work[open] summary::after { transform: rotate(45deg); }
.work p { padding: 0 0 26px; color: var(--muted); max-width: 34em; }
.work__img { width: 100%; max-width: 560px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; margin: 0 0 18px; }

/* ---------- отзывы ---------- */
.reviews {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 6vw;
  padding: 0 var(--gut) clamp(96px, 12vw, 180px);
}
.reviews__score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; }
.reviews__num { font: 500 clamp(64px, 7vw, 110px)/.9 var(--serif); letter-spacing: -.02em; }
.reviews__stars { color: var(--gold-1); font-size: 18px; letter-spacing: .2em; }
.reviews__meta { color: var(--muted); font-size: 15px; }
.reviews__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
.review {
  display: flex; flex-direction: column; gap: 16px; margin: 0; padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2);
}
.review__stars { color: var(--gold-1); font-size: 13px; letter-spacing: .2em; }
.review p { font: 500 clamp(19px, 1.6vw, 23px)/1.4 var(--serif); }
.review footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; }
.review cite { font-style: normal; font-weight: 500; color: var(--paper); }
.review footer span { color: var(--muted); }

/* ---------- до и после ---------- */
.ba {
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 32px 5vw; align-items: center;
  padding: clamp(80px, 9vw, 140px) var(--gut);
}
.ba__tabs { display: flex; flex-direction: column; margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.ba__tabs button {
  display: flex; align-items: baseline; gap: 16px; padding: 16px 0; text-align: left;
  border-bottom: 1px solid var(--line);
  font: 500 clamp(22px, 2vw, 30px)/1.15 var(--serif); color: var(--muted);
  transition: color .3s, padding .5s var(--ease);
}
.ba__tabs button:hover { color: var(--paper); }
.ba__tabs button[aria-selected="true"] { color: var(--paper); padding-left: 10px; }
.ba__n { font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--gold-2); }
.ba__item[hidden] { display: none; }
.cmp {
  --x: 50%;
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px;
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: var(--bg-2);
}
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp__before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--paper); pointer-events: none; }
.cmp__handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(23, 23, 23, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--gold-2); color: var(--gold-1); font: 500 16px/1 var(--sans); letter-spacing: .1em;
}
.cmp__tag {
  position: absolute; top: 14px; padding: 7px 10px; border-radius: 2px; pointer-events: none;
  font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  background: rgba(23, 23, 23, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cmp__tag--before { left: 14px; }
.cmp__tag--after { right: 14px; color: var(--gold-1); }
.cmp__range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmp:focus-within { outline: 1px solid var(--gold-2); outline-offset: 4px; }

/* ---------- цены (крафт) ---------- */
.prices {
  position: relative;
  background: var(--kraft); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6vw;
  padding: clamp(96px, 11vw, 170px) var(--gut);
}
.prices::before { /* фактура бумаги */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .36 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.prices > * { position: relative; }
/* рваный край сверху/снизу, как в прайсах */
.prices { clip-path: polygon(0 1.4%, 6% .6%, 13% 1.5%, 21% .4%, 30% 1.2%, 38% .3%, 47% 1.3%, 55% .5%, 64% 1.4%, 72% .2%, 81% 1.1%, 89% .4%, 100% 1.2%, 100% 98.8%, 92% 99.6%, 84% 98.6%, 75% 99.7%, 66% 98.9%, 58% 99.8%, 49% 98.7%, 40% 99.6%, 31% 98.8%, 22% 99.7%, 13% 98.6%, 5% 99.5%, 0 98.9%); }
.prices__side { position: sticky; top: 120px; align-self: start; }
.prices .h2 { margin: 22px 0 44px; }
.tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-left: 1px solid rgba(35, 31, 32, .25); }
.tabs button {
  position: relative; text-align: left; padding: 10px 0 10px 22px;
  font: 500 14px/1.3 var(--sans); letter-spacing: .04em; color: rgba(35, 31, 32, .6);
  transition: color .3s, padding .5s var(--ease);
}
.tabs button::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ink);
  transform: scaleY(0); transition: transform .5s var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); padding-left: 30px; }
.tabs button[aria-selected="true"]::before { transform: none; }

.prices__panels { padding-top: 8px; }
.panel { animation: panelIn .7s var(--ease); }
.panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); } }
.panel__title { font: 600 clamp(28px, 2.8vw, 42px)/1.1 var(--serif); margin-bottom: 32px; max-width: 18em; }
.panel__lead { margin-bottom: 20px; font-size: 16px; }
.panel__note { margin-top: 26px; font-size: 15px; padding-left: 18px; border-left: 2px solid var(--ink); }
.panel__note + .panel__note { margin-top: 12px; }
.panel__note--top { margin: 0 0 12px; }
.panel__note--top + .plist { margin-top: 24px; }
.terms { margin-top: 28px; font-size: 15px; }
.terms li { position: relative; padding: 5px 0 5px 20px; }
.terms li::before { content: "—"; position: absolute; left: 0; }
.prices__prepay { margin-top: 32px; font-weight: 600; }
.prices__outside { margin-top: 6px; font-size: 15px; }
.plist li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid rgba(35, 31, 32, .16);
  font-size: clamp(16px, 1.4vw, 20px);
}
.plist li span { flex: 0 1 auto; }
.plist li i { flex: 1 1 20px; border-bottom: 1px dotted rgba(35, 31, 32, .45); transform: translateY(-5px); }
.plist li b { font-weight: 600; white-space: nowrap; }
.plist--dense li { padding: 11px 0; font-size: 16px; }
.plist li.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px 32px; }
.plan small { font-weight: 400; font-size: .78em; opacity: .75; }
.prices__panels .btn { margin-top: 20px; }

/* ---------- как работаем ---------- */
.process { padding: clamp(96px, 12vw, 180px) var(--gut); }
.process__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; }
.process__sticky { position: relative; }
.stage { position: sticky; top: max(100px, calc(50svh - 290px)); width: min(100%, 440px); aspect-ratio: 4 / 5; margin-left: auto; }
.stage__img {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px;
  opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 1.6s var(--ease);
}
.stage__img.is-active { opacity: 1; transform: none; }
.stage__img img { width: 100%; height: 100%; object-fit: cover; }
.stage__cap {
  position: absolute; left: 0; right: 0; top: calc(100% + 18px);
  display: flex; align-items: center; gap: 14px;
  font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.stage__count { margin-left: auto; }
.stage__count b { color: var(--paper); font-weight: 500; }
.steps { counter-reset: s; }
.step {
  min-height: 44svh; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0; border-top: 1px solid var(--line);
  opacity: .28; transition: opacity .6s var(--ease);
}
.step.is-active { opacity: 1; }
.step__num { font: 500 12px/1 var(--sans); letter-spacing: .2em; color: var(--gold-2); }
.step h3 { margin: 18px 0 14px; font: 500 clamp(36px, 3.8vw, 60px)/1.02 var(--serif); letter-spacing: -.02em; }

/* ---------- калькулятор ---------- */
.calc { padding: clamp(96px, 12vw, 180px) var(--gut); }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 6vw; align-items: start; }
.calc__form { display: flex; flex-direction: column; min-width: 0; }
.calc__form > [data-block="extras"] { order: 5; }
.calc__form > [data-block="dry"] { order: 6; }
.calc__form[data-svc="dry"] > [data-block="dry"] { order: 1; }
.calc__form[data-svc="dry"] > [data-block="win"] { order: 6; }
.calc__field { border: 0; padding: 0; margin: 0 0 48px; min-width: 0; }
.calc__extras { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.calc__field[hidden], .check[hidden] { display: none; }
.calc__field legend, .calc__result .eyebrow { padding: 0; margin-bottom: 20px; }
.calc__field legend { font: 500 12px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-2); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg--col { flex-direction: column; align-items: flex-start; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: inline-block; padding: 14px 22px; border: 1px solid var(--line); border-radius: 999px;
  font: 500 13px/1.2 var(--sans); letter-spacing: .04em; color: var(--muted);
  transition: color .3s, border-color .3s, background .3s;
}
.seg label:hover span { color: var(--paper); border-color: rgba(243, 239, 232, .4); }
.seg input:checked + span { background: var(--gold-grad); color: var(--ink); border-color: transparent; }
.seg input:focus-visible + span { outline: 1px solid var(--gold-2); outline-offset: 3px; }

.range { display: flex; align-items: center; gap: 28px; }
.range input[type="range"] {
  --p: 20%;
  flex: 1; min-width: 0; height: 2px; margin: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: linear-gradient(90deg, var(--gold-2) var(--p), var(--line) var(--p));
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold-1); border: 6px solid var(--bg); box-shadow: 0 0 0 1px var(--gold-2);
  transition: transform .3s var(--ease);
}
.range input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--gold-1); border: 6px solid var(--bg); box-shadow: 0 0 0 1px var(--gold-2); }
.range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.num { display: flex; align-items: baseline; gap: 8px; flex: none; }
.num input {
  width: 2.1em; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0;
  background: none; color: var(--paper); text-align: right;
  font: 500 clamp(36px, 3.4vw, 52px)/1.1 var(--serif);
  -moz-appearance: textfield; appearance: textfield; transition: border-color .3s;
}
.num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num input:focus { border-bottom-color: var(--gold-2); }
.num span { font-size: 15px; color: var(--gold-1); }
.calc__note { margin-top: 16px; color: var(--muted); font-size: 14px; max-width: 36em; }

.qty { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--line); }
.qty li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.qty__name { font-size: 15px; line-height: 1.3; transition: color .3s; }
.qty__name small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.qty li.has-qty .qty__name { color: var(--gold-1); }
.qty__ctrl { display: flex; align-items: center; gap: 4px; flex: none; }
.qty__ctrl button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  font-size: 18px; line-height: 1; transition: border-color .3s, background .3s, color .3s;
}
.qty__ctrl button:hover { border-color: var(--gold-2); color: var(--gold-1); }
.qty__ctrl output { min-width: 2ch; text-align: center; font-weight: 500; }

.check { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; font-size: 15px; }
.check input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none;
  width: 24px; height: 24px; border: 1px solid var(--gold-2); border-radius: 4px; display: grid; place-items: center; cursor: pointer;
  transition: background .3s;
}
.check input::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .3s var(--ease); }
.check input:checked { background: var(--gold-grad); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.calc__result {
  position: sticky; top: 110px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(212, 177, 121, .35); border-radius: 4px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(212, 177, 121, .12), transparent 60%), var(--bg-2);
}
.calc__sum { font: 500 clamp(38px, 3.4vw, 56px)/1.05 var(--serif); letter-spacing: -.02em; }
.calc__sum small { font: 500 .42em/1 var(--sans); letter-spacing: .06em; color: var(--gold-1); margin-left: .3em; }
.calc__sum.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { opacity: .35; transform: translateY(6px); } }
.calc__lines { margin-top: 16px; font-size: 14px; }
.calc__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.calc__lines b { font-weight: 500; white-space: nowrap; }
.calc__meta { margin-top: 16px; font-size: 15px; overflow-wrap: anywhere; }
.calc__fine { margin: 14px 0 30px; font-size: 13px; color: var(--muted); }
.calc__result .btn { width: 100%; }

/* ---------- контакты ---------- */
.contact {
  padding: clamp(96px, 12vw, 180px) var(--gut) clamp(80px, 10vw, 140px);
  border-top: 1px solid var(--line);
  background: radial-gradient(60vw 40vw at 85% 30%, rgba(212, 177, 121, .08), transparent 70%);
}
.contact__title { margin: 26px 0 40px; font: 500 clamp(44px, 6.6vw, 108px)/.98 var(--serif); letter-spacing: -.02em; max-width: 14em; }
.contact__lead { max-width: 32em; font-size: 18px; color: var(--muted); }
.contact__cta { margin: 28px 0 clamp(48px, 6vw, 80px); }
.contact__phone {
  display: inline-block;
  font: 500 clamp(56px, 11vw, 190px)/1 var(--serif); letter-spacing: -.04em;
  transition: color .4s;
}
.contact__phone:hover { color: var(--gold-1); }
.contact__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 90px); border-top: 1px solid var(--line);
}
.clink {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line);
}
.clink span { font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); }
.clink small { font-size: 13px; color: var(--muted); }
.clink b { font-weight: 400; font-size: 18px; overflow-wrap: anywhere; transition: transform .5s var(--ease); }
a.clink:hover b { transform: translateX(8px); color: var(--gold-1); }

/* ---------- footer ---------- */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 40px var(--gut) 48px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.footer__logo { width: 150px; }

.mbar { display: none; }

/* ==========================================================================
   TABLET / MOBILE — отдельная композиция
   ========================================================================== */
@media (max-width: 1240px) {
  .hero__title { font-size: clamp(56px, min(6.4vw, 14svh), 92px); }
  .header { gap: 24px; }
  .header__phone { display: none; }
  .nav { gap: 22px; }
}

@media (max-width: 1100px) {
  .svc__item a { grid-template-columns: 50px minmax(0, 1fr) 170px; }
  .svc__desc { grid-column: 2; grid-row: 2; }
  .svc__price { grid-row: 1; grid-column: 3; }
  .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .header { gap: 16px; }
  .header__logo img:first-child { width: 36px; }
  .header__logo img:last-child { width: 98px; }
  .burger {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; position: relative; z-index: 2;
  }
  .burger span:not(.sr) { position: absolute; width: 22px; height: 1px; background: var(--paper); transition: transform .5s var(--ease); }
  .burger span:first-child { transform: translateY(-4px); }
  .burger span:nth-child(2) { transform: translateY(4px); }
  .burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 8px; padding: 0 var(--gut);
    background: var(--bg);
    clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav a { font: 500 50px/1.2 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--paper); }
  .nav a::after { display: none; }

  /* hero: заголовок сверху, видео ниже со смещением вправо и подписью слева */
  .hero {
    grid-template-columns: minmax(0, 1fr); gap: 40px;
    min-height: 0; padding-top: calc(var(--header-h) + 28px); padding-bottom: 56px;
  }
  .hero::before { right: -20%; top: 40%; width: 110vw; height: 110vw; }
  .hero__title { font-size: clamp(42px, 13vw, 72px); margin: 16px 0 16px; }
  .hero__title .line:nth-child(2) { padding-left: .4em; }
  .hero__lead { font-size: 16px; }
  .hero__cta { gap: 10px; margin-top: 20px; }
  .hero__cta .btn { flex: 1 1 40%; padding: 0 12px; height: 52px; }
  .hero__cta .btn--gold { flex-basis: 100%; }
  .hide-m { display: none; }
  .hero__note { margin-top: 16px; }
  .hero__media { justify-self: end; width: 100%; justify-content: flex-end; gap: 14px; }
  .hero__frame { height: auto; width: 76%; }
  .hero__cap { order: -1; align-self: flex-end; }

  .section-head { grid-template-columns: 1fr; }
  .section-head__aside { justify-self: start; }

  /* услуги — карточки-строки, цена видна всегда */
  .svc__item a { grid-template-columns: 1fr auto; gap: 10px 16px; padding: 26px 0; }
  .svc__num { grid-column: 1; grid-row: 1; }
  .svc__price { grid-column: 2; grid-row: 1; font-size: 12px; }
  .svc__name { grid-column: 1 / -1; grid-row: 2; font-size: 36px; }
  .svc__desc { grid-column: 1 / -1; grid-row: 3; }
  .svc-cursor { display: none; }


  /* цены: вкладки — горизонтальные «чипсы» */
  .prices { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .prices__side { position: static; }
  .prices .h2 { margin: 18px 0 28px; }
  .tabs {
    flex-direction: row; gap: 8px; border: 0;
    overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px;
    scroll-snap-type: x proximity;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex: none; white-space: nowrap; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(35, 31, 32, .3);
    font-size: 13px; scroll-snap-align: start;
  }
  .tabs button::before { display: none; }
  .tabs button[aria-selected="true"] { padding-left: 18px; background: var(--ink); color: var(--kraft); border-color: var(--ink); }
  .prices__panels { padding-top: 40px; }
  .plist li { font-size: 15px; gap: 8px; }
  .plist li i { flex-basis: 8px; }
  .plist--dense li { font-size: 15px; }
  .prices__panels .btn { width: 100%; }

  /* как работаем: лента фото со свайпом + список шагов */
  .process__grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .process__sticky { margin: 0 calc(var(--gut) * -1); }
  .stage {
    position: static; aspect-ratio: auto; width: auto; margin: 0;
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0 var(--gut) 44px;
  }
  .stage::-webkit-scrollbar { display: none; }
  .stage__img {
    position: relative; inset: auto; flex: 0 0 72%; aspect-ratio: 4 / 5; scroll-snap-align: center;
    opacity: 1; transform: none;
  }
  .stage__cap { top: auto; bottom: 8px; left: var(--gut); right: var(--gut); }
  .step { min-height: 0; opacity: 1; padding: 30px 0; }
  .step h3 { font-size: 34px; margin: 14px 0 10px; }

  .calc__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .calc__field { margin-bottom: 36px; }
  .seg span { padding: 12px 16px; }
  .range { gap: 16px; }
  .num input { font-size: 34px; }
  .qty { grid-template-columns: 1fr; }
  .qty__ctrl button { width: 44px; height: 44px; }
  .lang a { padding: 14px 8px; }
  .ba { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ba__tabs {
    flex-direction: row; gap: 8px; border: 0; margin: 4px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 4px;
    overflow-x: auto; scrollbar-width: none;
  }
  .ba__tabs::-webkit-scrollbar { display: none; }
  .ba__tabs button {
    flex: none; white-space: nowrap; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px;
    font: 500 13px/1.2 var(--sans); letter-spacing: .03em;
  }
  .ba__tabs button[aria-selected="true"] { padding-left: 16px; background: var(--gold-grad); color: var(--ink); border-color: transparent; }
  .ba__n { display: none; }
  .reviews { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .reviews__link { justify-self: start; }
  .reviews__list {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 8px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 4px;
  }
  .reviews__list::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 86%; scroll-snap-align: center; }
  .calc__result { position: static; }
  .works { grid-template-columns: minmax(0, 1fr); }
  .plist li.plan { grid-template-columns: repeat(2, auto); justify-content: space-between; }
  .plan span { grid-column: 1 / -1; }

  .contact__phone { font-size: clamp(52px, 16vw, 96px); }
  .contact__grid { grid-template-columns: 1fr; }
  .clink { padding: 22px 0; }

  .footer { flex-direction: column; align-items: flex-start; padding-bottom: 110px; }

  .mbar {
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 45;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    border-radius: 999px; overflow: hidden;
    background: rgba(243, 239, 232, .15);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translateY(140%); transition: transform .6s var(--ease);
  }
  .mbar.is-on { transform: none; }
  .mbar a {
    display: grid; place-items: center; height: 54px;
    background: rgba(23, 23, 23, .85);
    font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  }
  .mbar .mbar__wa { background: var(--gold-grad); color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero__title .line > span { transform: none; }
  .ticker__track { animation: none; }
}