/* =========================================================
   LUMÉ — lash studio landing
   Mobile-first + fluid (clamp) responsive
   Палітра: шавлія як опора, тепла нюдова гама навколо неї

   ЯК ЧИТАТИ ЦЕЙ ФАЙЛ
   Файл складається з двох пластів, і порядок має значення:
   каскад вирішує конфлікти на користь того, що нижче.

   ПЛАСТ 1 — база. Токени, скидання, типографіка, блоки 1–9
             у порядку появи на сторінці.
   ПЛАСТ 2 — редизайн (від позначки «ПЛАСТ 2» і нижче). Тут лежать
             склянки, док, меню, картки прайсу, доступність — усе, що
             перевизначає базу. Нову правку сюди ж, у відповідну секцію.

   Тому: НЕ переставляйте блоки місцями. Додавати — в кінець свого пласта.
   ========================================================= */

/* Шрифты — с нашего сервера, а не с Google Fonts: при загрузке с Google
   IP посетителя уходит в Google (США), а по RODO на это нужно согласие.
   Файлы — assets/fonts/ (лицензия SIL OFL 1.1, см. README там же).
   Браузер качает только нужные наборы знаков (unicode-range). */
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/caveat-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/caveat-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/caveat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/caveat-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/inter-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/playfair-display-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/playfair-display-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/playfair-display-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


:root{
  /* palette */
  --bg:        #F6F3EF;   /* теплий крейдяний фон */
  --surface:   #FFFFFF;
  --ink:       #2B2320;   /* кавово-коричневий замість чорного */
  --ink-2:     #6E5D53;   /* підписи 13px: 4,68 було впритул, стало 5,6 */
  --accent:    #2F6F5E;   /* шавлія — опора бренду */
  --accent-deep: #1F4A3E; /* натиснуті й наведені стани акценту */
  --nude:      #E8D3C6;   /* замінює пильно-жовтий у блоці майстра */
  /* Золото зірок у відгуках — єдине місце теплого металу. Тон 44°, як у справжнього
     золота (у колишнього шампанського було 31° — бронза). Світлота і насиченість
     підібрані на межі читаності: 3,5 до білої картки. Яскравіше золото (#D4AF37)
     дає лише 2,1 — на білому воно вицвітає. */
  --gold: #A88524;

  --line: color-mix(in srgb, var(--ink) 10%, transparent);

  /* fluid type */
  --fs-h1: clamp(1.3rem, 6.6vw, 4.5rem);
  --fs-h2: clamp(1.7rem, 1.05rem + 2.6vw, 3rem);
  --fs-lg: clamp(1rem, .93rem + .45vw, 1.25rem);
  --fs-md: clamp(.94rem, .9rem + .2vw, 1.05rem);
  --fs-sm: .8125rem;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gap:   clamp(1rem, .6rem + 2vw, 2.5rem);
  --pad-x: clamp(1.1rem, .5rem + 3.4vw, 5rem);
  --radius: 8px;                 /* luxe-регістр любить майже прямі кути */
  --seam: clamp(2.2rem, 5vw, 3.6rem);   /* один шов між усіма блоками */

  --bar-h: 58px;

  /* tunables referenced from JS */
  --person-photo-width: 280px;   /* personPhotoWidthPx */
  --split: 50%;                  /* before/after splitter position */
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  color:var(--ink);
  font:400 var(--fs-md)/1.6 var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Заголовки — високонтрастна антиква світлого накреслення */
.hero__title, .section-head h2, .ceo__title{
  font-family:var(--font-display);
}

img,video,canvas{ display:block; max-width:100%; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
/* WebKit рисует по нажатию серую заливку во всю прямоугольную коробку ссылки
   (-webkit-tap-highlight-color, по умолчанию чёрный с альфой). У стикеров
   соцсетей коробка квадратная и заметно больше самой иконки, а стикер в этот
   момент ещё и приподнимается — серый квадрат оставался под ним отдельной
   плашкой. Подсветка не нужна: у интерактивных элементов есть свои :hover и
   :active, а клавиатурный фокус рисует :focus-visible ниже. */
html{ -webkit-tap-highlight-color:transparent; }

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

/* image fallbacks when a source file is missing */
.is-fallback{
  background:
    radial-gradient(120% 90% at 20% 10%, color-mix(in srgb,var(--accent) 26%, transparent), transparent 60%),
    linear-gradient(140deg,#DDE4DF,#C9D4CD 45%,#E7EBE7);
}
.is-fallback[src]{ color:transparent; font-size:0; }

/* ---------- shared ---------- */
/* Заголовок розділу стоїть по центру сторінки: коробка 900px сама
   центрується полями, текст усередині — text-align. Підзаголовок іде
   тією ж віссю, інакше центрована назва висіла б над лівим краєм. */
.section-head{
  padding: 0 var(--pad-x) clamp(1.2rem,3vw,2rem);   /* верх — у секції «ШОВ» */
  max-width:900px; margin-inline:auto; text-align:center;
}
.section-head h2{ font-size:var(--fs-h2); font-weight:600; letter-spacing:-.02em; line-height:1.12; }
.section-head p{ margin-top:.6rem; color:var(--ink-2); font-size:var(--fs-lg); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85em 1.5em; border-radius:999px;
  font-weight:600; font-size:var(--fs-md);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 10px 26px -12px rgba(47,111,94,.9); }
.btn--accent:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(47,111,94,.95); }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  position:fixed; inset:0 0 auto 0;
  height:var(--bar-h);
  display:flex; align-items:center; gap:.75rem;
  padding:0 var(--pad-x);
  color:#fff;
  transition:background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
/* Фон шапки суцільний, не напівпрозорий: Safari на iOS 26 заливає зону
   статус-бару над сайтом кольором закріпленої шапки лише тоді, коли вона
   непрозора. З прозорістю 82% над шапкою просвічувала сторінка. */
.topbar.is-solid{
  background:var(--bg);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.topbar__logo{ font-weight:600; letter-spacing:.22em; font-size:.8rem; margin-right:auto; }

@media (min-width:1000px){
  .burger{ display:none !important; }
}

/* language */
.lang{ position:relative; }

/* burger + mobile drawer */
.burger{ place-content:center; }
.burger span{ display:block; width:20px; height:1.8px; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.4px) rotate(-45deg); }

/* =========================================================
   BLOCK 1 — HERO (cinematic camera push-in)
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--bar-h) + 2rem) var(--pad-x) calc(clamp(2rem,6vw,3rem) + 8px);
  overflow:hidden; color:#fff; isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__img{
  width:100%; height:100%; object-fit:cover; object-position:62% 28%;
  transform:scale(1.28); filter:blur(6px) saturate(.85);
  animation:cameraIn 2.6s var(--ease) .15s forwards;
  will-change:transform, filter;
}
@keyframes cameraIn{
  /* финальный scale ровно 1: любое увеличение растягивает пиксели кадра */
  to{ transform:scale(1); filter:blur(0) saturate(1); }
}
/* Затемнення прив'язане до самого тексту, а не до висоти екрана.
   У відсотках від .hero воно їхало: текст притиснутий до низу, і його верх
   гуляє від 61% на десктопі до 79% на телефоні — градієнт то накривав губи,
   то не діставав до надрядка. Псевдоелемент росте від блоку з текстом,
   тож відступ згори завжди однаковий, хоч який екран.
   z-index:-1 тут безпечний: .hero__media лежить на -2, отже плашка
   малюється над фото, але під самим текстом. */
.hero__inner{ max-width:960px; position:relative; }
.hero__inner::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  /* блок з текстом вужчий за екран (max-width:960), тож тягнемо плашку
     через увесь кадр — інакше справа лишається різкий вертикальний край.
     Зайве обрізає .hero з overflow:hidden. */
  left:calc(-1 * var(--pad-x)); right:auto; width:100vw;
  top:-16rem; bottom:calc(-1 * (clamp(2rem,6vw,3rem) + 8px));
  /* Розгін — smoothstep, а не пряма і не ease-in. У лінійної альфи злам на старті,
     в ease-in уся зміна тиснеться в останні сантиметри — на рівній світлій стіні
     і те, і те читається як кромка. Тут похідна дорівнює нулю на обох кінцях,
     тому смуга не має де початися. Ціна — довший розгін: 16rem замість 10rem.
     Щільність біля тексту та сама .58, отже контраст не постраждав. */
  background:linear-gradient(180deg,
    rgba(30,37,34,0)     0,
    rgba(30,37,34,.016)  1.6rem,
    rgba(30,37,34,.060)  3.2rem,
    rgba(30,37,34,.125)  4.8rem,
    rgba(30,37,34,.204)  6.4rem,
    rgba(30,37,34,.290)  8rem,
    rgba(30,37,34,.376)  9.6rem,
    rgba(30,37,34,.455)  11.2rem,
    rgba(30,37,34,.520)  12.8rem,
    rgba(30,37,34,.564)  14.4rem,
    rgba(30,37,34,.580)  16rem,
    /* Хвіст теж рахуємо в rem від низу, а не у відсотках від плашки. У відсотках
       він з'їжджав: коли блок з текстом став нижчим, упор 60% опинився за 11px
       від кінця розгону — .58 стрибало до .74, і кромка поверталася. */
    rgba(30,37,34,.660)  calc(100% - 7rem),
    rgba(30,37,34,.740)  calc(100% - 3.5rem),
    rgba(30,37,34,.820)  100%);
}

/* Той самий прийом, що й у підзаголовка: найдовший надрядок — російський,
   з трекінгом .24em він займає 24.87 × кегль. На 360px і вужче він ламався
   на два рядки, і блок з текстом був вищий, ніж іншими мовами. */
.hero__eyebrow{
  font-size:min(var(--fs-sm), calc((100vw - var(--pad-x) * 2) / 25.2));
  letter-spacing:.24em; text-transform:uppercase; margin-bottom:.9rem;
}
.hero__title{
  font-size:var(--fs-h1); font-weight:600; line-height:1.1; letter-spacing:-.015em;
  text-wrap:balance;
}
/* Підзаголовок тримається в один рядок усіма мовами. Найдовший рядок — польський,
   він займає 20.85 × кегль. Ділимо доступну ширину на 21.2 (запас на підміну шрифту)
   і беремо менше з двох: ширше 390px перемагає звичайний --fs-lg, вужче — кегль
   трохи сідає, зате всі чотири мови лягають однаково. На 320px це 13.4px. */
.hero__sub{
  margin:1rem 0 0;
  font-size:min(var(--fs-lg), calc((100vw - var(--pad-x) * 2) / 21.2));
  color:rgba(255,255,255,.82); max-width:46ch;
}

/* staged reveal */
.hero__eyebrow,.hero__title,.hero__sub{
  opacity:0; transform:translateY(26px);
  animation:heroUp .9s var(--ease) forwards;
}
.hero__eyebrow{ animation-delay:.9s; }
.hero__title{ animation-delay:1.05s; }
.hero__sub{ animation-delay:1.25s; }
@keyframes heroUp{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .hero__img{ animation:none; transform:none; filter:none; }
  .hero__eyebrow,.hero__title,.hero__sub,.hero__scroll{ animation:none; opacity:1; transform:none; }
}

/* =========================================================
   BLOCK 2 — НАША ФІЛОСОФІЯ
   Текстовий розділ: надрядок, велика антиква, лід і три опори
   з лінійними іконками. Роздільники між опорами — не рамки,
   а один волосяний штрих ліворуч, як у наборі.
   ========================================================= */
/* Сверху целый --seam: в этот шов вкладывается только блок 2 — герой своего
   поля снизу не даёт. Снизу половина, вторую половину добавляет панель мастера. */
.philosophy{
  padding:var(--seam) var(--pad-x) calc(var(--seam) / 2);
  position:relative;
}
/* Линейный портрет на фоне блока, справа, во всю его высоту —
   от шва с блоком 1 до шва с блоком 3.

   Прозрачность выбрана не на глаз. Рисунок идёт под лидом и опорами, они
   набраны 16,8-20px цветом --ink-2, норма контраста для них 4,5. Худшая точка
   текста на линии рисунка: .08 → 5,00; .10 → 4,80; .12 → 4,64; .14 → 4,50;
   .16 → 4,33. Держим .12 — запас есть, а штрих у этого рисунка тоньше
   прежнего, и на .08 он почти пропадал.

   viewBox файла обрезан по чернилам (-201 0 773 1024): в присланном варианте
   вокруг рисунка было по 4% пустоты сверху и снизу, из-за неё он не доставал
   до швов. Теперь край картинки = край штриха.

   Низ слоя уходит на пол-шва ниже секции: визуальная граница блока 3 — не его
   верх, а верхний край панели мастера, а между ними ещё padding-top секции
   (--seam / 2). Ради этого у .philosophy снят overflow:hidden — иначе он
   срезал бы слой по нижней кромке секции.

   По горизонтали рисунок стоит вплотную к правому краю экрана и целиком в
   кадре: чернила доходят до правой кромки viewBox, так что right 0 — это и
   есть конец рисунка, дальше двигать некуда. Смещение задаётся не коробкой
   слоя, а четырёхзначным background-position: отрицательный right у самого
   слоя давал реальную горизонтальную прокрутку, body{overflow-x:hidden} его
   не держит — при overflow:visible у html значение body уходит во вьюпорт,
   а сам body становится visible. Через background-position вылета нет вовсе:
   фон всегда обрезан коробкой слоя (так живёт мобильное правило ниже).

   Привязка background-position к низу, а не к центру: у рисунка чернила
   доходят ровно до нижнего края viewBox (замер по столбцам: y=1023 на всём
   среднем пролёте), значит при right bottom штрих ложится точно на линию
   панели. Излишек 110% уходит наверх, во лоб.

   Слой во всю ширину секции, а не в min(64vw, 720px), как было: ширина
   рисунка считается от высоты блока (0,755 x 110% высоты слоя), а высота
   поехала, как только опоры стали карточками. Рисунок вырос до 748px, упёрся
   в коробку 720px и получил ровную вертикальную обрезку по волосам. Ширину
   слоя в CSS к собственной высоте не привяжешь, поэтому коробка больше не
   ограничивает: обрезать по горизонтали нечего, рисунок и так уже правым
   краем в краю экрана. */
.philosophy::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:0; right:0; top:0; bottom:calc(-1 * var(--seam) / 2);
  background:url("../assets/img/philosophy-portrait.svg") no-repeat;
  background-position:right 0 bottom 0;
  background-size:auto 110%;
  opacity:.12;
}
/* На телефоне правила те же: рисунок во всю высоту блока и упирается в оба шва.
   Прежде он был ужат до 62% и выключен по центру, чтобы влезть по ширине, — но
   тогда он не доходил ни до блока 1, ни до блока 3. Ширина рисунка считается
   от высоты, так что на узком экране он уходит за левый край; это дешевле, чем
   зазоры сверху и снизу, и совпадает с тем, как он ведёт себя на вебе. */
/* Текст поверх рисунка */
.philosophy__inner{ position:relative; z-index:1; }
/* Колонка центрується, щоб заголовок став по центру сторінки, а не по центру
   своєї коробки: без margin:auto вісь 1100px йшла б лівіше справжньої. */
.philosophy__inner{ max-width:1100px; margin-inline:auto; }

/* Набран как заголовок раздела — той же антиквой и тем же кеглем, что
   «Как добраться» и прочие .section-head h2. Раньше это был надрядок:
   мелкий Inter капителью с трекингом .24em. */
.philosophy__eyebrow{
  text-align:center;
  font-family:var(--font-display);
  font-size:var(--fs-h2); font-weight:600;
  letter-spacing:-.02em; line-height:1.12;
  color:var(--ink);
}
/* Заголовок ложится в одну строку от 900px. Кегль считается от ширины колонки:
   делитель — ширина самой длинной строки языка на 1px кегля (замер canvas-ом
   шрифтом Playfair 400) плюс ~1,5% запаса. Отсюда container-type на колонке:
   cqw — это её ширина, 1100px на широком экране.

   На телефоне одной строкой не выйдет физически: колонка 355px дала бы
   14,8px у заголовка блока. Там остаётся прежний clamp и перенос по 18ch. */
/* Делитель один на все языки — по самому длинному, русскому (uk 26,1 · pl 26,2 ·
   en 21,7). Раньше у каждого языка был свой, и при переключении кегль прыгал
   с 40 до 51px, а вместе с ним высота блока и всё, что ниже. */
:root{ --phtitle-fit: 27.2; --phtitle-fit2: 14.7; }
.philosophy__inner{ container-type:inline-size; }
/* Заголовок и лид выключены по центру — как подзаголовок над ними и как
   заголовки остальных блоков. Мерам строки (18ch и 62ch) нужен margin:auto,
   иначе коробка осталась бы у левого края и центровка была бы только внутри
   неё. text-wrap:balance выравнивает строки заголовка по длине: у центрованного
   набора рваная лесенка заметнее, чем у левого. */
/* До 900px заголовок ложится в две строки. Делитель — та же ширина строки на
   1px кегля, но поделённая на 1,85: две строки редко заполняются целиком,
   перенос идёт по словам, и на двойку делить нельзя. Мера 18ch снята: она
   резала колонку до 220px и добавляла третью строку. */
.philosophy__title{
  margin:1.2rem auto 0;
  font-family:var(--font-display); font-weight:400;
  font-size:min(clamp(1.75rem, 1rem + 3.3vw, 3.4rem),
                calc(100cqw / var(--phtitle-fit2)));
  line-height:1.25; letter-spacing:-.01em;
  color:var(--ink);
  max-width:none; text-align:center; text-wrap:balance;
}
.philosophy__lead{
  margin:clamp(1.2rem,2.5vw,1.8rem) auto 0;
  font-size:var(--fs-lg); line-height:1.6;
  color:var(--ink-2); max-width:62ch; text-align:center;
}
@media (min-width:900px){
  .philosophy__title{
    max-width:none;
    font-size:min(clamp(1.75rem, 1rem + 3.3vw, 3.4rem),
                  calc(100cqw / var(--phtitle-fit)));
  }
}


.pillars{
  --pillars-gap: clamp(1.2rem,3vw,1.8rem);
  display:grid; gap:var(--pillars-gap);
  margin:clamp(2.4rem,6vw,4rem) 0 0;
  padding:0; list-style:none;
}
/* Опора — отдельная карточка. Заливка не сплошной --surface, а 72% белого:
   под карточками проходит портрет, и при сплошной заливке он обрывался бы
   тремя прямоугольниками. 72% гасят его до еле заметного, но не в ноль.
   container-type нужен заголовку: он считает кегль от ширины карточки. */
.pillar{
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pillar-pad);
  text-align:left;
  container-type:inline-size;
}
:root{ --pillar-pad: clamp(1.3rem,3vw,1.9rem); }
/* Пять карточек: не grid, а flex с переносом и выключкой по центру — иначе
   неполная последняя строка прижималась бы влево и рядом зияла бы дыра.
   Базис — доля строки минус зазоры, с вычетом сотой пикселя: без него
   округление сбрасывает последнюю карточку строки на следующую.

   До 1200px колонок две, а не три: в три карточка сужается до 256px, и
   русское «04. Безопасность и стерильность» ужимается до 11,6px — нечитаемо.
   В две колонки там же выходит 18,9px. */
@media (min-width:900px){
  .pillars{
    display:flex; flex-wrap:wrap; justify-content:center;
  }
  .pillar{ flex:0 1 calc((100% - var(--pillars-gap)) / 2 - .01px); }
  /* В ряд опоры попадают в вьюпорт одновременно, поэтому очередь задаём
     задержкой. На телефоне они идут друг за другом сами — там задержки нет,
     иначе третья опора ждала бы впустую. */
  .js .pillar:nth-child(2).reveal{ transition-delay:.3s; }
  .js .pillar:nth-child(3).reveal{ transition-delay:.6s; }
  .js .pillar:nth-child(4).reveal{ transition-delay:.9s; }
  .js .pillar:nth-child(5).reveal{ transition-delay:1.2s; }
  /* Клоны нужны только каруселью на телефоне */
  .pillar--clone{ display:none; }
}
/* Телефон: одна карточка в кадре, лента едет влево и зацикливается.
   Трек выходит за поля секции и возвращает их своим padding — иначе карточка
   не могла бы занять всю ширину экрана, а соседняя не выглядывала бы с края. */
@media (max-width:899px){
  .pillars{
    display:flex; flex-wrap:nowrap;
    gap:clamp(.8rem,3vw,1.1rem);
    margin-inline:calc(-1 * var(--pad-x));
    padding-inline:.9rem;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .pillars::-webkit-scrollbar{ display:none; }
  /* Карточка шире, чем поля секции: поля трека 0,9rem вместо --pad-x, свои
     поля карточки 1rem вместо 1,3. Строка получает 321px вместо 304 — с 304
     русское «Качественная стерилизация инструментов» не влезало в строку
     целиком и справа зияло 92px пустоты. Справа остаётся 21px: зазор до
     соседней карточки плюс её краешек — он показывает, что лента листается. */
  .pillar{
    flex:0 0 calc(100vw - 2.2rem);
    --pillar-pad:1rem;
    scroll-snap-align:center;
  }

}
.pillars__dots{ display:none; }
@media (max-width:899px){
  .pillars__dots{
    display:flex; justify-content:center; gap:.4rem;
    margin:1.1rem 0 .2rem;
  }
  .pillars__dots i{
    width:6px; height:6px; border-radius:50%;
    background:color-mix(in srgb, var(--ink) 20%, transparent);
    transition:background-color .3s, transform .3s var(--ease);
  }
  .pillars__dots i.is-on{ background:var(--accent); transform:scale(1.35); }
}
.pillar__ico{
  display:block; color:var(--accent);
  margin-bottom:clamp(1.2rem,3vw,2rem);
}
/* Пять рисунков разных пропорций: глаз шире высоты, перо вытянуто вертикально,
   кушетка почти вдвое шире, часы узкие. В общей коробке 4:3 они выглядели
   разными по величине: preserveAspectRatio вписывает рисунок по длинной
   стороне, поэтому кушетка упиралась в ширину и не добирала по высоте (78%),
   а часы занимали 30% ширины коробки против 98% у кушетки.

   Теперь нормируем не коробку, а сами чернила: viewBox каждой иконки обрезан
   по getBBox с запасом в половину самого толстого штриха (иначе обводку
   срезало бы краем viewBox), коробке задана общая высота, а ширина считается
   из пропорции чернил — --ico-ar на .pillar__ico в разметке. Инлайн, а не
   nth-child: клоны карусели копируют её сами, а по номеру ребёнка они идут
   шестым-десятым и под правило не попали бы. */
:root{ --ico-h: clamp(56px, 5.6vw, 70px); }
.pillar__ico svg{
  display:block;
  height:var(--ico-h);
  width:calc(var(--ico-h) * var(--ico-ar, 1.33));
}
/* Заголовок обязан лечь в одну строку. Делитель — ширина самой длинной строки
   языка на 1 px кегля (замер canvas-ом тем же шрифтом и начертанием) плюс ~2%
   запаса. Отсюда cqw, а не vw: считать надо от карточки, а не от экрана; поля
   вычитать не надо — 100cqw это content-box контейнера.

   Делитель один на все языки — по худшему случаю, русскому «Безопасность и
   стерильность» (15,07; uk 12,03 · en 12,09 · pl 13,6). Свой делитель на язык
   давал кегль от 14 до 17,6px, и при переключении карточки меняли высоту. */
:root{ --title-fit: 15.4; }
.pillar__title{
  margin:0; font-weight:600; line-height:1.3; color:var(--ink);
  font-size:min(var(--fs-lg), calc(100cqw / var(--title-fit)));
  text-wrap:balance;
}
/* Всё содержимое карточки выключено влево: иконка, заголовок и абзац стоят на
   одной вертикали, по полю карточки. До этого шапка была по центру, а абзац
   влево — центровка на четырёх строках давала рваный контур с обеих сторон и
   вешала короткий хвост последней строки посреди пустоты (в английской опоре
   03 это было 60px из 285). max-width абзацу не нужен: колонка и так узкая, а
   любое ограничение оторвало бы его левый край от поля карточки. */
/* Переноси по складах: без них довге слово («стерилизация», «анатомических»)
   або склеєне нерозривним пробілом «на анатомических» цілком падало на
   наступний рядок, і праворуч лишалося 25–55 % порожнечі (10 карток з 20 на
   будь-якій ширині iPhone). З переносами рядки заповнені на 80–99 %, текст
   так само в три рядки. Мова переносу — з lang сторінки (міняє перемикач). */
.pillar__text{
  margin:.7rem 0 0; color:var(--ink-2);
  font-size:var(--fs-md); line-height:1.6;
  text-align:left; max-width:none;
  -webkit-hyphens:auto; hyphens:auto;
  hyphenate-limit-chars:7 3 3;
}

/* Телефон: кегль считается от ширины колонки, а не берётся из --fs-md.
   Колонка карточки на телефоне (323px при 390) на треть вместительнее колонки
   в ряду из пяти (218px), поэтому при 15,2px те же тексты ложились в две строки
   вместо трёх. Делитель 18,4 — это «знаков в строке»: при нём отношение
   колонка/кегль одинаково на любом телефоне, и число строк не скачет от ширины
   экрана (на 15,2px было 3 строки при 360 и 2 при 430).

   Замер: ширина каждой из 20 строк при кегле 1px делится на ширину колонки;
   чтобы все давали ровно три строки, кегль должен лежать в окне 17,1–20,3px
   при 390. Формула даёт 17,6. Потолок 19,5 — чтобы на планшете, где карточка
   во весь экран, кегль не разъехался. */
@media (max-width:899px){
  .pillar__text{ font-size:clamp(15px, calc((100vw - 4.2rem) / 18.4), 19.5px); }
}

/* От 1360px все пять карточек в одну строку. Колонка текста остаётся 1100px,
   а трек выходит за неё: своя ширина плюс отрицательный отступ ровно в половину
   разницы — так он центрируется по той же оси, что и колонка, и упирается в
   поля страницы. flex:1 1 0 делит строку поровну, calc-базис тут не нужен.

   Порог 1360, а не 1200: кегль заголовка считается от ширины карточки, и на
   1240 русский заголовок падает до 11,7px — мельче текста карточки, то есть
   иерархия переворачивается. На 1360 выходит 13,3px при тексте 13,3px, и
   заголовок держится весом и цветом. Ниже порога — две колонки.

   Карточка сжимается до ~254px, поэтому в этом тире мельче поля, иконка и
   текст: иначе на содержимое остаётся 136px. */
@media (min-width:1360px){
  .pillars{
    --pillars-gap:.9rem;
    --pillars-w:min(100vw - var(--pad-x) * 2, 1500px);
    width:var(--pillars-w);
    margin-left:calc(50% - var(--pillars-w) / 2);
    flex-wrap:nowrap;
  }
  .pillar{ flex:1 1 0; padding:1.1rem; }
  .pillar__ico{ margin-bottom:.9rem; }
  :root{ --ico-h:52px; }
  /* Тот же приём, что и на телефоне: кегль пропорционален ширине колонки, а не
     фиксирован. Колонка в ряду из пяти растёт с экраном (204px при 1360, 218
     при 1440, 253 при 1500+), и при фиксированных 13,3px на узких ноутбуках
     четыре строки вместо трёх. Коэффициент 16,4 — «знаков в строке», тот же,
     что даёт три строки при 1440. Формула линейна по vw: col = 0,1864·vw − 50. */
  .pillar__text{ font-size:clamp(12.4px, calc(1.137vw - 3.04px), 15.4px); }
}


/* =========================================================
   BLOCK 3 — YELLOW SLIDE-IN / CEO
   ========================================================= */
.ceo{
  position:relative; padding:clamp(4rem,10vw,8rem) 0;
  display:flex; justify-content:flex-end;
  overflow:hidden;
}
.ceo__panel{
  width:min(100%, 1180px);
  background:var(--nude);
  border-radius:var(--radius) 0 0 var(--radius);
  padding:clamp(1.6rem,5vw,3.5rem) var(--pad-x) clamp(1.2rem,3vw,2rem);
}
/* скрытое исходное состояние — только если JS работает */
.js .ceo__panel{
  transform:translateX(102%);
  opacity:0;
  transition:transform 1.05s var(--ease), opacity .6s var(--ease);
  will-change:transform;
}
.js .ceo__panel.is-in{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
  .js .ceo__panel{ transform:none; opacity:1; transition:none; }
}

.ceo__grid{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (min-width:860px){ .ceo__grid{ grid-template-columns:auto 1fr; } }

.ceo__figure{ margin:0; text-align:center; justify-self:center; }
.ceo__photo{
  width:var(--person-photo-width);
  max-width:100%;
  aspect-ratio:3/4;                    /* пропорции исходного кадра — без обрезки */
  object-fit:cover; object-position:50% 20%;
  border-radius:calc(var(--radius) * .9);
  box-shadow:0 24px 48px -26px rgba(30,37,34,.55);
}
/* Проявление портрета: штора снизу вверх + лёгкий наезд камеры */
.js .ceo__photo{
  clip-path:inset(100% 0 0 0);
  opacity:0; transform:scale(1.06);
  transition:clip-path 1.05s var(--ease), opacity .5s var(--ease), transform 1.2s var(--ease);
  will-change:clip-path, transform;
}
.js .ceo__photo.is-in{
  clip-path:inset(0 0 0 0);
  opacity:1; transform:none;
}
.ceo__sign{
  font-family:Caveat, cursive; font-weight:500; font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem);
  line-height:1; margin-top:.9rem; color:var(--ink);
  display:inline-block; position:relative;
  padding:0 .12em;                     /* воздух под кончик пера */
}

/* Подпись «пишется»: штора едет слева направо неравномерно — с микропаузами,
   как рука между буквами. Перо (::after) идёт по той же траектории. */
.js .ceo__sign{ clip-path:inset(0 100% -25% 0); }
.js .ceo__sign.is-writing{
  animation:signWrite var(--sign-write, 1.6s) cubic-bezier(.6,.05,.4,.95) forwards;
}
.js .ceo__sign.is-writing::after{
  content:""; position:absolute; top:12%; bottom:16%; width:2px;
  background:var(--ink); border-radius:2px;
  transform:rotate(12deg);
  animation:signPen var(--sign-write, 1.6s) cubic-bezier(.6,.05,.4,.95) forwards;
}

@keyframes signWrite{
  0%   { clip-path:inset(0 100% -25% 0); }
  16%  { clip-path:inset(0 74%  -25% 0); }
  24%  { clip-path:inset(0 70%  -25% 0); }   /* пауза между словами */
  52%  { clip-path:inset(0 38%  -25% 0); }
  62%  { clip-path:inset(0 33%  -25% 0); }
  100% { clip-path:inset(0 -2%  -25% 0); }
}
@keyframes signPen{
  0%   { left:0%;   opacity:0; }
  6%   { opacity:.85; }
  16%  { left:26%;  }
  24%  { left:30%;  }
  52%  { left:62%;  }
  62%  { left:67%;  }
  92%  { left:99%;  opacity:.85; }
  100% { left:102%; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .js .ceo__photo{ clip-path:none; opacity:1; transform:none; transition:none; }
  .js .ceo__sign{ clip-path:none; }
  .js .ceo__sign.is-writing{ animation:none; }
  .js .ceo__sign.is-writing::after{ display:none; }
}
.ceo__role{
  font-size:var(--fs-sm); letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 62%, transparent); margin-top:.35rem;
}
/* Мірка колонки — 52 знаки в кеглі абзацу. Тримаємо її на самій колонці, а не
   на кожному абзаці: ch рахується від власного кегля елемента, і на заголовку
   48px ті самі 52ch дали б удвічі ширшу коробку. Тоді заголовок центрувався б
   по колонці, а не по тексту під собою — вісь розходилась на 23px.
   Кегль на .ceo__text потрібен лише для розрахунку ch: усі діти всередині
   задають свій розмір самі, тож видимого впливу немає. */
.ceo__text{ font-size:var(--fs-lg); max-width:52ch; }
.ceo__title{
  font-size:var(--fs-h2); font-weight:600; letter-spacing:-.02em; line-height:1.12;
  margin-bottom:.9rem; text-align:center;
}
.ceo__text p{ color:color-mix(in srgb, var(--ink) 78%, transparent); font-size:var(--fs-lg); }
.ceo__text p + p{ margin-top:.8rem; }

/* --- social bar: SVG corner-peel sticker --- */
.social{
  list-style:none; margin:clamp(2rem,5vw,3rem) 0 0; padding:clamp(1rem,2vw,1.2rem) 0 0;
  display:flex; gap:clamp(.35rem,1.3vw,1rem); justify-content:center; flex-wrap:nowrap;
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.social li{ min-width:0; }        /* на узких экранах стикеры равномерно ужимаются */
.sticker{
  display:block; width:clamp(38px,11.5vw,60px); aspect-ratio:1;
  transform:rotate(var(--tilt, 0deg));
  filter:drop-shadow(0 5px 12px rgba(30,37,34,.20));
  transition:transform .42s var(--ease), filter .42s var(--ease);
}
.sticker svg{ width:100%; height:100%; overflow:visible; }

/* Лицевая сторона: правый нижний угол «срезается» по линии сгиба.
   Изнанка растёт из того же угла (64,64) с тем же таймингом, поэтому линия
   среза и край отгиба совпадают в каждом кадре — шва и цветного края не видно. */
.sticker .face{
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%);
  transition:clip-path .42s var(--ease);
}
.sticker .flap{
  transform-origin:100% 100%;        /* угол наклейки (64,64) в viewBox 64×64 */
  transform:scale(0);
  transition:transform .42s var(--ease);
}
/* --- состояние «уголок отклеен»: курсор, фокус, нажатие пальцем --- */
.sticker:hover,
.sticker:focus-visible,
.sticker:active,
.sticker.is-peeled{
  /* наклейку слегка выравнивает и приподнимает */
  transform:rotate(calc(var(--tilt, 0deg) * .35)) translateY(-4px) scale(1.04);
  filter:drop-shadow(0 14px 24px rgba(30,37,34,.28));
}
.sticker:hover .face,
.sticker:focus-visible .face,
.sticker:active .face,
.sticker.is-peeled .face{
  /* срез идёт по 59%, изнанка начинается по 62.5% — то есть ближе к углу,
     перекрывая линию среза. Обратное соотношение оставляет между ними
     полоску логотипа. */
  clip-path:polygon(0% 0%, 100% 0%, 100% 59%, 59% 100%, 0% 100%);
}
.sticker:hover .flap,
.sticker:focus-visible .flap,
.sticker:active .flap,
.sticker.is-peeled .flap{
  transform:scale(1); opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .sticker, .sticker .face, .sticker .flap{ transition:none; }
}

/* =========================================================
   BLOCK 4 — BEFORE / AFTER SPLITTER
   ========================================================= */
.splitter{
  position:relative; margin:0 var(--pad-x);
  border-radius:var(--radius); overflow:hidden;
  aspect-ratio:7/5; max-height:80svh;
  background:var(--ink);
  touch-action:pan-y; cursor:ns-resize; user-select:none;
}
@media (min-width:720px){ .splitter{ aspect-ratio:16/9; } }

.splitter__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:55% 50%;   /* кадрируем на рабочий глаз */
  pointer-events:none;
}
.splitter__clip{
  position:absolute; inset:0;
  clip-path:inset(0 0 calc(100% - var(--split)) 0);
  will-change:clip-path;
}

.splitter__handle{
  position:absolute; left:0; right:0; top:var(--split);
  height:2px; background:rgba(255,255,255,.9); transform:translateY(-1px);
  pointer-events:none;
}
.splitter__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--surface); color:var(--accent);
  display:grid; place-items:center;
  box-shadow:0 8px 22px -8px rgba(30,37,34,.6);
  transition:transform .25s var(--ease);
}
.splitter:active .splitter__knob{ transform:translate(-50%,-50%) scale(1.1); }
.splitter__knob svg{ transform:rotate(90deg); }
/* Пальцем тянем только за ручку: у неё свой touch-action, поэтому страница
   продолжает прокручиваться, если палец лёг мимо. Мышью можно кликать везде. */
.splitter__knob{ pointer-events:auto; touch-action:none; cursor:grab; }
.splitter:active .splitter__knob{ cursor:grabbing; }
.splitter__knob::before{
  content:""; position:absolute; left:50%; top:50%;
  width:140px; height:72px; transform:translate(-50%,-50%);
}

.splitter__tag{
  position:absolute; left:1rem; z-index:2;
  padding:.35rem .8rem; border-radius:999px;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--ink);
  backdrop-filter:blur(6px);
}
.splitter__tag--l{ top:1rem; }
.splitter__tag--r{ bottom:1rem; background:var(--nude); }

/* =========================================================
   BLOCK 8 — FAQ
   ========================================================= */
.faq__item{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1rem,2.4vw,1.4rem) 0;
  font-size:var(--fs-lg); font-weight:500; letter-spacing:-.01em;
  transition:color .25s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item[open] summary{ color:var(--accent); }
.faq__plus{
  position:relative; flex:0 0 auto; width:20px; height:20px;
}
.faq__plus::before,.faq__plus::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .3s;
}
.faq__plus::before{ width:14px; height:1.6px; }
.faq__plus::after{ width:1.6px; height:14px; }
.faq__item[open] .faq__plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

.faq__body{ overflow:hidden; }
.faq__body p{
  padding:0 0 clamp(1rem,2.4vw,1.4rem); color:var(--ink-2); max-width:62ch; font-size:var(--fs-md);
}
.faq__item[open] .faq__body{ animation:faqOpen .38s var(--ease); }
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* =========================================================
   BLOCK 9 — END
   ========================================================= */
.end__note{ color:var(--ink-2); font-size:var(--fs-sm); }
.end__link{
  color:var(--ink-2); font-size:var(--fs-sm); opacity:.8;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  padding:.6rem .4rem; margin:-.6rem 0;             /* зона нажатия 44px, строка не растёт */
}
@media (hover:hover) and (pointer:fine){ .end__link:hover{ color:var(--accent); opacity:1; } }

/* =========================================================
   Страница-документ (политика конфиденциальности)
   Колонка для чтения ~68 знаков, заголовки — шрифтом сайта.
   ========================================================= */
.doc{
  max-width:calc(68ch + var(--pad-x) * 2); margin:0 auto;
  padding:calc(var(--bar-h) + clamp(1.5rem,5vw,3rem)) var(--pad-x) clamp(3rem,8vw,5rem);
}
.doc__back{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--ink-2); font-size:var(--fs-sm); font-weight:500;
  padding:.7rem 0; margin-bottom:clamp(.4rem,1.5vw,1rem);
}
.doc__back::before{
  content:""; width:7px; height:7px; transform:rotate(-135deg);
  border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
}
@media (hover:hover) and (pointer:fine){ .doc__back:hover{ color:var(--accent); } }
.doc__title{
  font-family:var(--font-display); font-size:var(--fs-h2); font-weight:600;
  letter-spacing:-.02em; line-height:1.12; text-wrap:balance;
}
.doc__since{ margin-top:.7rem; color:var(--ink-2); font-size:var(--fs-sm); }
.doc section{ margin-top:clamp(1.8rem,4vw,2.4rem); }
.doc h2{
  font-family:var(--font-display); font-size:clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  font-weight:600; line-height:1.25; margin-bottom:.7rem;
}
.doc h2 span{ color:var(--accent); }
.doc p, .doc li{ line-height:1.65; }
.doc ul{ margin:0; padding-left:1.2rem; display:grid; gap:.55rem; }
.doc p + p, .doc ul + p, .doc p + ul{ margin-top:.7rem; }
.doc li::marker{ color:var(--accent); }
.doc section a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.doc strong{ font-weight:600; }

/* =========================================================
   Scroll-reveal utility
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================
   404
   ========================================================= */
.page-404{
  min-height:100svh;
  display:flex; flex-direction:column;
}
.nf{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.5rem,1.6vw,.9rem);
  text-align:center;
  padding:calc(var(--bar-h) + clamp(1.5rem,5vw,3rem)) var(--pad-x) clamp(2.5rem,7vw,4rem);
}
.nf__art{
  width:min(100%, clamp(260px, 62vw, 460px));
  aspect-ratio:950/847;                    /* пропорции исходной анимации */
  display:grid; place-items:center;
  margin-bottom:clamp(.5rem,2vw,1.2rem);
}
.nf__art svg{ display:block; width:100% !important; height:100% !important; }
.nf__code{
  font-size:clamp(4rem,18vw,7rem); font-weight:700; letter-spacing:-.04em;
  color:color-mix(in srgb, var(--accent) 22%, transparent);
}
.nf__art.is-ready .nf__code{ display:none; }

.nf__title{
  font-size:var(--fs-h2); font-weight:600; letter-spacing:-.02em; line-height:1.12;
  text-wrap:balance;
}
/* Подзаголовок обязан лечь в одну строку и на вебе, и на телефоне. На вебе
   хватает меры 48ch (польская строка — самая длинная, 445px при кегле 20px).
   На телефоне колонка всего 347px при 390, и полякам нужно 370 — поэтому кегль
   считается от ширины колонки, а делитель свой на каждый язык: ширина строки
   при кегле 1px (замер canvas-ом) плюс 4% запаса. */
:root{ --nf-fit: 18.1; }             /* uk 17,36 */
:root:lang(ru){ --nf-fit: 17.6; }
:root:lang(pl){ --nf-fit: 23.2; }
:root:lang(en){ --nf-fit: 21; }
.nf__sub{
  color:var(--ink-2);
  font-size:min(var(--fs-lg), calc((100vw - var(--pad-x) * 2) / var(--nf-fit)));
  max-width:min(100%, 48ch);
  margin-bottom:clamp(.8rem,2.5vw,1.4rem);
}

/* =========================================================
   КНОПКИ — варіанти
   ========================================================= */
.btn--lg{ padding:1em 2em; }

/* герой: лінія під заголовком і пара кнопок */
.hero__rule{
  display:block; height:1px; width:0; margin:1.1rem 0 0;
  background:linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  animation:ruleIn .8s var(--ease) 1.15s forwards;
}
@keyframes ruleIn{ to{ width:min(280px, 60%); } }
@media (prefers-reduced-motion: reduce){ .hero__rule{ animation:none; width:min(280px,60%); } }

/* =========================================================
   ЦИФРИ ДОВІРИ (блок майстра)
   ========================================================= */
/* Цифры спрятаны в капсулах. Две крупные цифры с подписями занимали около
   130px и оставляли вокруг себя много пустоты; капсулы — одна строка в 42px.
   Закрытая: подпись и плюс. Нажатие раскрывает её — выезжает золотой ромб
   (тот же металл, что у звёзд в отзывах) и цифра, которая набегает от нуля.
   Повторное нажатие сворачивает. Ширина капсул одна на всех языках и в обоих
   состояниях — её по самому длинному варианту ставит initFacts(), поэтому при
   раскрытии и при смене языка ряд не двигается. */
.facts{
  list-style:none; margin:clamp(1.3rem,3vw,1.8rem) 0 0; padding:0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem;
}
.fact{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:42px; padding:0 1.1rem;
  border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  color:var(--ink);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.fact__label{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  color:color-mix(in srgb, var(--ink) 72%, transparent);   /* 5,06 к бежевой панели */
}
/* число выезжает раскрытием колонки 0fr → 1fr */
.fact__val{ display:grid; grid-template-columns:0fr; transition:grid-template-columns .45s var(--ease); }
.fact__val > span{ display:flex; align-items:center; gap:.55rem; overflow:hidden; white-space:nowrap; }
.fact__dot{ flex:0 0 auto; width:4px; height:4px; background:var(--gold); transform:rotate(45deg); }
.fact__num{
  font-family:var(--font-display); font-weight:400; font-size:1.3rem; line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
  min-width:3ch; text-align:left;                         /* 0 → 100 не меняет ширину */
  /* у Playfair цифры сидят в строке низко — середина их начертания была на 3px
     ниже середины капсулы; поднимаем на ту же долю кегля */
  transform:translateY(-.155em);
}
/* плюс — те же две черты, что у FAQ; при раскрытии складывается */
.fact__plus{ position:relative; flex:0 0 auto; width:10px; height:10px; transition:transform .35s var(--ease), opacity .3s, width .35s var(--ease); }
.fact__plus::before, .fact__plus::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor; border-radius:1px;
  transform:translate(-50%,-50%);
}
.fact__plus::before{ width:10px; height:1.3px; }
.fact__plus::after{ width:1.3px; height:10px; }
.fact[aria-pressed="true"]{ border-color:var(--accent); background:color-mix(in srgb, var(--surface) 80%, transparent); }
.fact[aria-pressed="true"] .fact__val{ grid-template-columns:1fr; }
.fact[aria-pressed="true"] .fact__plus{ transform:rotate(45deg) scale(.6); opacity:0; width:0; }
@media (hover:hover) and (pointer:fine){
  .fact:hover{ border-color:var(--accent); }
}
@media (prefers-reduced-motion: reduce){
  .fact__val, .fact__plus{ transition:none; }
}

/* =========================================================
   БЛОК 5 — ВІДГУКИ
   ========================================================= */
.reviews{ overflow:hidden; }

.review{
  display:flex; flex-direction:column; gap:.85rem;
}
.review__stars{ color:var(--gold); letter-spacing:.14em; font-size:.85rem; }
.review__text{ font-size:var(--fs-lg); line-height:1.5; }
.review__meta{
  margin-top:auto; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--ink-2);
}
.review__name{ font-weight:600; color:var(--ink); }
.review__src{
  padding:.15rem .5rem; border-radius:999px;
  background:var(--nude); color:var(--ink); font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase;
}

/* --- телефон: колода карток, верхню змахують --- */
.reviews__stack{
  position:relative; margin:0 var(--pad-x);
  height:clamp(300px, 62vw, 380px);
  touch-action:pan-y;
}
.reviews__stack .review{
  position:absolute; inset:0;
  transform-origin:50% 120%;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
  will-change:transform;
  cursor:grab;
}
.reviews__stack .review.is-gone{ opacity:0; pointer-events:none; }
.reviews__stack .review.is-dragging{ transition:none; cursor:grabbing; }

.reviews__dots{
  display:flex; justify-content:center; gap:.4rem;
  margin:1.1rem 0 .4rem;
}
.reviews__dots i{
  width:6px; height:6px; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 20%, transparent);
  transition:background-color .3s, transform .3s var(--ease);
}
.reviews__dots i.is-on{ background:var(--accent); transform:scale(1.35); }
.reviews__hint{
  text-align:center; font-size:var(--fs-sm); color:var(--ink-2);
  letter-spacing:.06em;
}

/* --- десктоп: два зустрічні рядки --- */
.reviews__marquee{ display:none; }

@media (min-width:900px){
  .reviews__stack, .reviews__dots, .reviews__hint{ display:none; }
  .reviews__marquee{ display:block; }

  .marquee{ overflow:hidden; padding:.6rem 0; }
  .marquee + .marquee{ margin-top:1rem; }
  .marquee__track{
    display:flex; gap:1rem; width:max-content;
    animation:marqueeL 46s linear infinite;
  }
  .marquee[data-dir="right"] .marquee__track{ animation-name:marqueeR; }
  .marquee__track .review{
    width:min(380px, 34vw); flex:0 0 auto;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  /* завмирає під курсором, картка піднімається */
  .reviews__marquee:hover .marquee__track{ animation-play-state:paused; }
  @keyframes marqueeL{ from{ transform:translateX(0); }        to{ transform:translateX(-50%); } }
  @keyframes marqueeR{ from{ transform:translateX(-50%); }     to{ transform:translateX(0); } }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none !important; }
}

/* =========================================================
   БЛОК 6 — ЦІНИ
   ========================================================= */
.price__groups{
  margin:0 var(--pad-x);
  display:grid; gap:clamp(1.8rem,5vw,3rem);
}
@media (min-width:900px){ .price__groups{ grid-template-columns:repeat(3,1fr); align-items:start; } }

.price__cap{
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:.8rem;
}
.price__list{ list-style:none; margin:0; padding:0; }

.price__row{
  display:grid;
}
.price__name{ font-size:var(--fs-lg); }
.price__time{ font-size:var(--fs-sm); color:var(--ink-2); }
.price__cost{ justify-self:end; align-self:center;
  font-family:var(--font-display); font-size:clamp(1.3rem,1rem + 1vw,1.7rem);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:transform .25s var(--ease);
}
.price__old{
  display:block; font-size:.72em; color:var(--ink-2);
  text-decoration:line-through; text-align:right; line-height:1;
}
.price__badge{
  display:inline-block; margin-left:.45rem; vertical-align:middle;
  padding:.2rem .45rem; border-radius:4px;
  /* 10px білим по шампані давало 3,9 — для тексту мало */
  background:var(--accent-deep); color:#fff;
  font-family:var(--font-body); font-size:.65rem; font-weight:600; letter-spacing:.04em;
}
.price__tag{
  display:inline-block; margin-left:.5rem;
  padding:.15rem .45rem; border-radius:4px;
  border:1px solid var(--accent); color:var(--accent);
  font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
@media (hover:hover){
  .price__row:hover{ background:color-mix(in srgb, var(--nude) 30%, transparent); }
  .price__row:hover .price__cost{ transform:translateX(-4px); }
}

/* =========================================================
   БЛОК 7 — АДРЕСА
   ========================================================= */
.place__grid{
  margin:0 var(--pad-x);
  display:grid; gap:clamp(1.4rem,4vw,2.5rem);
}
@media (min-width:900px){ .place__grid{ grid-template-columns:1.1fr .9fr; align-items:center; } }

.place__map{
  position:relative; aspect-ratio:4/3; max-height:420px;
  border-radius:var(--radius); overflow:hidden;
  background:#EDE7DF; border:1px solid var(--line);
}
.place__map svg{ width:100%; height:100%; display:block; }
.place__pin{ transform-origin:50% 100%; }
.place__map.is-in .place__pin{ animation:pinDrop .7s var(--ease) both; }
@keyframes pinDrop{
  0%   { transform:translateY(-38px) scale(.8); opacity:0; }
  60%  { transform:translateY(0) scale(1.05); opacity:1; }
  80%  { transform:translateY(-5px) scale(.98); }
  100% { transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .place__map.is-in .place__pin{ animation:none; } }

.place__addr{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); line-height:1.25;
}
.place__meta{ margin:1.2rem 0 1.4rem; display:grid; gap:.15rem; }
.place__meta dt{
  font-size:var(--fs-sm); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  margin-top:.8rem;
}
.place__meta dd{ margin:0; font-size:var(--fs-md); }
/* График по дням: день и часы — две колонки, поэтому времена стоят в один
   столбец и читаются как таблица. Колонки по содержимому, не на всю ширину:
   строка «Пн 10:00–20:00» короткая, растянутая пара разъехалась бы. */
.place__hours{
  display:grid; grid-template-columns:auto auto;
  justify-content:start; column-gap:.7rem; row-gap:.1rem;
}
.place__hours span:nth-child(odd){ color:var(--ink-2); }
.place__links{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* =========================================================
   БЛОК 9 — ФІНАЛЬНИЙ ЕКРАН
   ========================================================= */
.final{
  position:relative;
  padding:calc(var(--seam) / 2) var(--pad-x) clamp(1.6rem,4vw,2.6rem);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--nude) 45%, var(--bg)));
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.final__mark{ font-weight:600; letter-spacing:.24em; font-size:.8rem; }
.final__sub{ color:var(--ink-2); font-size:var(--fs-lg); max-width:44ch; }
.final__actions{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin-top:.6rem;
}
.final .end__note{ font-size:var(--fs-sm); color:var(--ink-2); opacity:.8; }

/* =========================================================
   ЛИПКА КНОПКА ЗАПИСУ (телефон)
   ========================================================= */
.cta-sticky{
  position:fixed; z-index:70;
  left:var(--pad-x); right:var(--pad-x);
  bottom:calc(12px + env(safe-area-inset-bottom));
  height:56px;
  display:none; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  border-radius:999px; font-weight:600;
  box-shadow:0 14px 30px -14px rgba(47,111,94,.95);
  /* Спрятана — за нижнім краєм цілком, разом із тінню. Раніше було 140% власної
     висоти (78 px), а від низу вона стоїть на 12 px + зона смужки «додому»
     (34 px на iPhone) — і на телефоні з-під краю визирали ~24 px кнопки. */
  transform:translateY(calc(100% + 12px + env(safe-area-inset-bottom) + 40px));
  /* visibility — щоб Safari (iOS 26) не брав колір схованої кнопки для
     смуги під своєю панеллю: прозорість він не враховує */
  opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .4s var(--ease), opacity .3s, visibility 0s linear .4s;
}
.cta-sticky.is-on{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s; }
@media (max-width:819px){ .cta-sticky{ display:flex; } }
@media (prefers-reduced-motion: reduce){ .cta-sticky{ transition:none; } }

/* =========================================================
   ▼ ПЛАСТ 2 — РЕДИЗАЙН. Усе нижче перевизначає базу вище.
   ========================================================= */

/* =========================================================
   НАКЛЕЙКИ — монохром у спокої, колір при наведенні
   ========================================================= */
.sticker svg image{
  transition:filter .4s var(--ease), opacity .4s var(--ease);
}
/* сірі в спокої — тільки там, де є справжній курсор (клас ставить JS) */
.can-hover .sticker svg image{
  filter:grayscale(1) contrast(.75) brightness(.75);
  opacity:.75;
}
.can-hover .sticker:hover svg image,
.can-hover .sticker:focus-visible svg image,
.can-hover .sticker.is-peeled svg image{
  filter:none; opacity:1;
}

/* =========================================================
   РІДКЕ СКЛО — одна система на кнопки, док і перемикач мови
   ========================================================= */
.glass{
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid color-mix(in srgb, #fff 55%, transparent);
  box-shadow:
    0 18px 40px -20px rgba(43,35,32,.45),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(43,35,32,.06);
}

/* відблиск їде за курсором: --mx/--my ставить JS */
.glass-btn{
  position:relative; overflow:hidden; isolation:isolate;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:
    0 12px 28px -14px rgba(43,35,32,.5),
    inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.glass-btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.55), transparent 62%);
  opacity:0; transition:opacity .3s var(--ease);
}
.glass-btn:hover::after{ opacity:1; }
.glass-btn:active{ transform:scale(.97); }
.glass-btn:active::after{ opacity:.15; }

/* =========================================================
   ВЕРХНЯ ПАНЕЛЬ — тільки логотип і мови
   ========================================================= */
.lang__seg{
  position:relative; display:flex; align-items:center; gap:0;
}
.lang__seg button{
  position:relative; z-index:1; background:none; border:0;
  font-size:.72rem; font-weight:500;
  color:inherit; cursor:pointer;
  transition:opacity .25s var(--ease), letter-spacing .25s var(--ease);
}
/* тонкий розділювач між кодами */
.lang__seg button + button::before{
  content:""; position:absolute; left:0; top:50%;
  width:1px; transform:translateY(-50%);
  background:currentColor; opacity:.28;
}
.lang__seg button:hover{ opacity:.8; }
/* риска їде під активним кодом */
.lang__thumb{
  position:absolute; left:0; width:0; height:1.5px;
  background:currentColor;
  transition:transform .4s var(--ease), width .4s var(--ease);
}

/* =========================================================
   ПЛАВАЮЧИЙ ДОК — навігація знизу (десктоп)
   ========================================================= */
.dock{
  position:fixed; z-index:65;
  left:50%; bottom:clamp(14px, 2.5vh, 28px);
  transform:translate(-50%, 160%);
  transition:transform .5s var(--ease), opacity .35s var(--ease);
  opacity:0; pointer-events:none;
  display:none;
}
.dock.is-on{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.dock__inner{
  position:relative;
  display:flex; align-items:center; gap:.2rem;
  padding:.35rem .4rem; border-radius:999px;
  font-size:var(--fs-sm); font-weight:500;
}
.dock__inner a{
  position:relative; z-index:1;
  padding:.55rem .85rem; border-radius:999px;
  white-space:nowrap; color:var(--ink);
  transition:color .3s var(--ease), opacity .3s var(--ease);
  opacity:.7;
}
.dock__inner a:hover{ opacity:1; }
.dock__inner a.is-current{ opacity:1; }
.dock__pill{
  position:absolute; top:.35rem; bottom:.35rem; left:0; width:0;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  transition:transform .45s var(--ease), width .45s var(--ease), opacity .3s;
  opacity:0;
}
.dock__pill.is-on{ opacity:1; }
.dock__cta{
  margin-left:.3rem; background:var(--accent); color:#fff !important;
  opacity:1 !important; font-weight:600;
  box-shadow:0 10px 22px -12px rgba(47,111,94,.9);
}
.dock__cta:hover{ background:var(--accent-deep); }

@media (min-width:1000px){ .dock{ display:block; } }

/* =========================================================
   ПОВНОЕКРАННЕ МЕНЮ (телефон)
   ========================================================= */
.menu{
  position:fixed; inset:0;
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  padding:calc(var(--bar-h) + 2rem) var(--pad-x) calc(2rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--ink) 26%, transparent);
  backdrop-filter:blur(34px) saturate(150%);
  -webkit-backdrop-filter:blur(34px) saturate(150%);
  opacity:0; transition:opacity .35s var(--ease);
}
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; }
.menu__list{ display:flex; flex-direction:column; }
.menu__list a{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.5rem 0; color:#fff;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.65rem, 1.05rem + 3vw, 2.3rem); line-height:1.25;
  opacity:0; transform:translateY(18px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.menu.is-open .menu__list a{ opacity:1; transform:none; }
.menu__list a i{
  font-family:var(--font-body); font-style:normal; font-weight:400;
  font-size:.7rem; letter-spacing:.14em; opacity:.55;
}
.menu__cta{ align-self:flex-start; margin-top:1.6rem; }
.menu.is-open .menu__cta{ animation:heroUp .5s var(--ease) .45s both; }

/* =========================================================
   ГЕРОЙ — індикатор прокрутки в кутку
   ========================================================= */
.hero__scroll{
  position:absolute; left:auto; right:var(--pad-x); bottom:clamp(2rem,6vw,3rem);
  transform:none; opacity:0; animation:heroUp .8s var(--ease) 1.9s forwards;
}
.hero__line{
  display:block; width:1px; height:56px; overflow:hidden;
  background:rgba(255,255,255,.25); position:relative;
}
.hero__line::after{
  content:""; position:absolute; inset:0 0 auto 0; height:40%;
  background:#fff; animation:lineFlow 2.2s var(--ease) infinite;
}
@keyframes lineFlow{
  0%{ transform:translateY(-100%); } 100%{ transform:translateY(250%); }
}
@media (prefers-reduced-motion: reduce){ .hero__line::after{ animation:none; } }

/* =========================================================
   БЛОК 3 — панель на всю ширину на телефоні (без білих смуг)
   ========================================================= */
@media (max-width:719px){
  .ceo{ padding-left:0; padding-right:0; }
  .ceo__panel{
    width:100%; border-radius:0;
    padding-left:var(--pad-x); padding-right:var(--pad-x);
  }
}
/* портрет їде повільніше сторінки — глибина сцени */
.ceo__figure{ will-change:transform; }
/* нахил слідом за курсором (десктоп) */
@media (hover:hover) and (pointer:fine){
  .ceo__photo{ transition:transform .4s var(--ease), clip-path 1.05s var(--ease), opacity .5s var(--ease); }
  .ceo__figure:hover .ceo__photo{ transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(1.02); }
}
/* наклейки розкладаються з колоди */
.social li{ transition:transform .6s var(--ease), opacity .5s var(--ease); }
.social:not(.is-dealt) li{ transform:translateX(var(--deal-x,0)) rotate(var(--deal-r,0deg)) scale(.85); opacity:0; }

/* =========================================================
   БЛОК 4 — сплітер до лівого краю, рука-підказка
   ========================================================= */
/* вікно порівняння повторює габарит панелі блоку 3:
   та сама ширина, те саме притискання до правого краю, ті самі кути */
.compare{ overflow:hidden; }
.compare__grid{
  position:relative;
  display:flex; justify-content:flex-start;
}
.compare .splitter{
  margin:0; width:min(100%, 1180px);
  border-radius:0 var(--radius) var(--radius) 0;
}
@media (max-width:719px){
  .compare .splitter{ width:100%; border-radius:0; }
}
@media (min-width:720px){
  .compare .splitter{ aspect-ratio:16/9; max-height:min(76svh, 620px); }
}



/* =========================================================
   БЛОК 5 — відгуки без рамок і тіней
   ========================================================= */
.review{
  background:transparent; border:0; box-shadow:none; border-radius:0;
  padding:clamp(1rem,2.6vw,1.4rem) 0;
  border-top:1px solid var(--line);
}
.reviews__stack .review{
  background:var(--surface);
  padding:clamp(1.2rem,3.5vw,1.8rem);
  border:0; border-radius:var(--radius);
  box-shadow:0 14px 34px -26px rgba(43,35,32,.45);
}
@media (min-width:900px){
  .marquee__track .review:hover{ transform:translateY(-4px); box-shadow:none; }
  /* краї стрічки притушені — глибина без тіней */
  .reviews__marquee{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}

/* =========================================================
   БЛОК 6 — живий прайс
   ========================================================= */
.price{ padding-top:0; }
.price .section-head{ padding-bottom:clamp(.8rem,2vw,1.2rem); }

.price__tabs{
  display:flex; gap:.4rem; flex-wrap:wrap;
  margin:0 var(--pad-x) clamp(1.2rem,3vw,1.8rem);
}
.price__tab{
  padding:.5rem 1rem; border-radius:999px;
  font-size:var(--fs-sm); font-weight:600;
  border:1px solid var(--line); color:var(--ink-2);
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.price__tab.is-on{ color:#fff; background:var(--accent); border-color:transparent; }
.price__tab{ white-space:nowrap; flex:0 0 auto; }

/* телефон: вкладки не переносяться, а стрічкою гортаються вбік. Стрічка
   виходить під край екрана (поля — padding, а не margin), з того боку, де
   ще є вкладки, край гасне (.fade-l / .fade-r ставить initPriceTabs). */
@media (max-width:899px){
  .price__tabs{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    margin-left:0; margin-right:0; padding:2px var(--pad-x);
    scroll-padding-inline:var(--pad-x); scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .price__tabs::-webkit-scrollbar{ display:none; }
  .price__tabs.fade-r{ -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .price__tabs.fade-l{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 44px); mask-image:linear-gradient(90deg, transparent, #000 44px); }
  .price__tabs.fade-l.fade-r{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
}

.price__group{ transition:opacity .35s var(--ease); }
.price__group[hidden]{ display:none; }

.price__row{ position:relative; border-bottom:0; }
.price__row::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line); transform-origin:left;
}
/* лінія прокреслюється зліва направо */
.price__row::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
  z-index:1;
}
@media (hover:hover) and (pointer:fine){
  .price__row:hover::before{ transform:scaleX(1); }
}

/* =========================================================
   БЛОК 7 — жива геомітка, помітні кнопки карт
   ========================================================= */
.place{ padding-top:0; }
.place__map{ cursor:pointer; transition:transform .5s var(--ease); }
.place__map:hover{ transform:scale(1.015); }
.place__ping{ transform-origin:200px 143px; }
.place__ping circle{
  fill:none; stroke:var(--accent); stroke-width:2;
  animation:ping 3s var(--ease) infinite;
  opacity:0;
}
.place__ping circle:nth-child(2){ animation-delay:.6s; }
.place__map:hover .place__ping circle{ animation-duration:1.6s; }
.place__map:hover .place__pin{ animation:pinHop .5s var(--ease); }
@keyframes ping{
  0%  { r:8;  opacity:.55; }
  70% { r:34; opacity:0; }
  100%{ r:34; opacity:0; }
}
@keyframes pinHop{
  0%,100%{ transform:translateY(0); }
  40%    { transform:translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .place__ping circle{ animation:none; }
  .place__map:hover{ transform:none; }
}

.btn--map{
  padding:.7em 1.1em; font-size:var(--fs-sm);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border:1px solid var(--line); color:var(--ink);
}
.btn__ico{ flex:0 0 auto; }
.btn__arrow{
  width:8px; height:8px; margin-left:.15rem;
  border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.btn--map:hover .btn__arrow{ transform:rotate(45deg) translate(3px,-3px); }

/* =========================================================
   БЛОК 8 — FAQ: дві колонки на десктопі
   ========================================================= */
.faq{ padding-top:0; }
.faq__wrap{ padding:0 var(--pad-x) calc(var(--seam) / 2); }
.faq__list{ padding:0; max-width:none; }
.faq__item summary{ font-family:var(--font-body); }
.faq__num{
  font-size:.7rem; letter-spacing:.14em; color:var(--ink-2);
  margin-right:.9rem; font-variant-numeric:tabular-nums;
}
.faq__pane{ display:none; }

@media (min-width:900px){
  .faq__wrap{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(2rem,6vw,5rem); align-items:start;
  }
  .faq__item .faq__body{ display:none; }           /* відповідь їде в праву колонку */
  .faq__item summary::-webkit-details-marker{ display:none; }
  .faq__item{ border-bottom:1px solid var(--line); }
  .faq__item summary{
    opacity:.35; transition:opacity .3s var(--ease), color .3s var(--ease);
  }
  .faq__item[open] summary{ opacity:1; }
  .faq__pane{
    display:block; position:sticky; top:calc(var(--bar-h) + 3rem);
    font-size:var(--fs-lg); line-height:1.55; color:var(--ink-2);
    min-height:8rem;
  }
  .faq__pane p{
    opacity:0; transform:translateY(12px);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .faq__pane p.is-in{ opacity:1; transform:none; }
}

/* =========================================================
   БЛОК 9 — всі соцмережі в ряд
   ========================================================= */
.social--final{
  border-top:0; margin-top:1.2rem; padding-top:0;
  flex-wrap:nowrap; justify-content:center; gap:clamp(.35rem,1.3vw,.9rem);
  max-width:100%;
}
.final__actions .btn{ min-width:min(320px, 80vw); justify-content:center; }

/* FAQ: номер і питання зліва, плюс — справа */
.faq__item summary > span{ flex:1; text-align:left; }
.faq__num{ flex:0 0 auto; }

/* док ховається на фінальному екрані, щоб не перекривати кнопку запису */
.dock.is-hidden{ transform:translate(-50%, 160%); opacity:0; pointer-events:none; }

/* шапка над меню — інакше бургер ховається під шторкою і меню не закрити */
.topbar{ z-index:80; }
.menu{ z-index:75; }
/* коли меню відкрите, іконки шапки завжди світлі */
body.menu-open .topbar{ color:#fff; background:transparent; box-shadow:none; backdrop-filter:none; }

/* =========================================================
   РІДКЕ СКЛО НА КНОПКАХ — заливка прибрана, залишився блюр,
   рамка і відблиск; ефект видно на фото та кольорі під кнопкою
   ========================================================= */
.btn--accent.glass-btn{
  background:var(--accent);
  border:1px solid color-mix(in srgb, #fff 42%, transparent);
  box-shadow:
    0 14px 30px -16px rgba(47,111,94,.75),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--accent.glass-btn:hover{
  transform:translateY(-2px);
}
/* біжучий відблиск по рамці */
.glass-btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-120%); opacity:0;
}
.glass-btn:hover::before{ animation:sheen .9s var(--ease) forwards; }
@keyframes sheen{
  0%  { transform:translateX(-120%); opacity:.9; }
  100%{ transform:translateX(120%);  opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .glass-btn:hover::before{ animation:none; } }

/* =========================================================
   БЛОК 6 — прайс картками, приклад роботи праворуч
   ========================================================= */
.price__body{ position:relative; overflow:hidden; }
@media (min-width:900px){
  .price__body{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
    gap:0 clamp(2rem,5vw,4rem); align-items:start;
    padding-right:var(--pad-x);
  }
  /* Колонка раскрывается в саму сетку (display:contents), чтобы вкладки заняли
     первый ряд, а список и кадр встали во второй. Иначе кадр начинался с верха
     колонки, то есть выше первой кнопки списка — ровно на высоту вкладок.
     На телефоне .price__col снова коробка: она уезжает вбок целиком. */
  .price__col{ display:contents; }
  .price__tabs{ grid-column:1; grid-row:1; }
  .price__groups{ grid-column:1; grid-row:2; }
  .price__stage{ grid-column:2; grid-row:2; }
}
.price__groups{ grid-template-columns:1fr !important; }
.price__cap{ display:none; }                 /* назва групи вже є на вкладці */
.price__list{ display:grid; gap:.6rem; }

/* рядок = картка, як кнопки карт */
.price__row{
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"name cost go" "time cost go";
  gap:.1rem .9rem; align-items:center;
  padding:clamp(.85rem,2.4vw,1.15rem) clamp(1.1rem,3vw,1.6rem);
  border:1px solid var(--line); border-radius:clamp(16px,2.4vw,24px);
  cursor:pointer;
  transition:transform .28s var(--ease), border-color .28s var(--ease),
             background-color .28s var(--ease);
}
.price__row::after, .price__row::before{ display:none; }
.price__go{
  grid-area:go; justify-self:end; align-self:center;
  width:8px; height:8px; margin-left:.9rem;
  border-top:1.6px solid var(--ink-2); border-right:1.6px solid var(--ink-2);
  transform:rotate(45deg); transition:transform .3s var(--ease);
  display:none;
}
.price__name{ grid-area:name; }
.price__time{ grid-area:time; }
.price__cost{ grid-area:cost; }

@media (hover:hover) and (pointer:fine){
  .price__row:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb, var(--accent) 40%, transparent);
    background:color-mix(in srgb, var(--surface) 78%, transparent);
  }
  .price__row:hover .price__cost{ transform:none; }
}
.price__row.is-on{
  border-color:var(--accent);
}
/* позиція без фото і тексту: рядок не кнопка */
.price__row.is-plain{ cursor:default; }
.price__row.is-plain .price__go{ display:none !important; }
@media (hover:hover) and (pointer:fine){
  .price__row.is-plain:hover{ transform:none; border-color:var(--line); }
}

/* сцена з прикладом роботи.
   Кадр прижат к верху, а не по центру: по центру он поднимался выше первой
   кнопки списка, и правая колонка начиналась раньше левой. */
.price__stage{
  margin:0; position:relative;
  display:grid; place-items:start center;
  min-height:clamp(260px, 34vw, 420px);
}
.price__hint{
  margin:0; max-width:24ch; text-align:center;
  color:var(--ink-2); font-size:var(--fs-sm);
}
.price__shot{
  position:absolute; inset:0; display:grid; place-items:start center;
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events:none;
}
.price__shot.is-in{ opacity:1; transform:none; }
/* кадр горизонтальний 5:4 — фото ока з віями цілком, без обрізаних кутиків */
.price__shot img{
  width:min(100%, 480px); aspect-ratio:5/4; object-fit:cover;
  border-radius:var(--radius);
}
/* замість фото — картка з текстом (вибирається в адмінці).
   Той самий кадр 5:4, щоб права колонка не стрибала між позиціями;
   довгий текст (до 240 знаків) розтягує картку, а не ріже. */
.price__stage.is-note .price__shot:not(.price__card),
.price__stage:not(.is-note) .price__card{ display:none; }
/* після першого вибору приклад стоїть у потоці, а не поверх: сцена росте
   разом із карткою і не ріже низ (підказка вже схована) */
.price__stage.is-live .price__shot{ position:relative; inset:auto; }
.pcard{
  width:min(100%, 480px); aspect-ratio:5/4; box-sizing:border-box;
  display:flex; flex-direction:column; gap:.9rem;
  padding:clamp(1.4rem,3vw,1.9rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--nude) 55%, transparent), transparent 70%),
    var(--surface);
  text-align:left;
}
.pcard__cat{
  margin:0; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.pcard__name{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.45rem,1.1rem + 1vw,1.8rem); line-height:1.15; color:var(--ink);
}
.pcard__name::after{
  content:""; display:block; width:36px; height:1px; margin-top:.9rem;
  background:var(--accent);
}
.pcard__text{
  margin:0; font-size:var(--fs-md); line-height:1.65; color:var(--ink-2);
  overflow-wrap:anywhere;
}
.pcard__meta{
  margin:auto 0 0; padding-top:.9rem; border-top:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  font-size:var(--fs-sm); color:var(--ink-2);
}
.pcard__cost{
  font-family:var(--font-display); font-size:1.45rem; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
}
.pcard__cost .price__old{ font-family:var(--font-body); font-size:.72rem; margin-bottom:.2rem; }
.price__back{
  display:none; align-items:center; gap:.5rem; align-self:start; justify-self:start;
  margin:0 0 1rem; padding:.5rem .9rem;
  border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--ink);
  font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.price__back::before{
  content:""; width:8px; height:8px;
  border-top:1.6px solid currentColor; border-left:1.6px solid currentColor;
  transform:rotate(-45deg);
}

/* телефон: список їде вбік, приклад займає екран */
@media (max-width:899px){
  .price__col, .price__stage{
    transition:transform .45s var(--ease), opacity .35s var(--ease);
  }
  .price__stage{
    position:absolute; top:0; left:0; right:0;
    min-height:0; display:block;
    transform:translateX(100%); opacity:0; pointer-events:none;
    padding:0 var(--pad-x);
  }
  .price__body.is-shot .price__col{
    position:absolute; top:0; left:0; right:0;
    transform:translateX(-14%); opacity:0; pointer-events:none;
  }
  .price__body.is-shot .price__stage{
    position:relative; transform:none; opacity:1; pointer-events:auto;
  }
  .price__body.is-shot .price__back{ display:inline-flex; }
  .price__hint{ display:none; }
  .price__go{ display:block; }
  /* на телефоні кадр сам задає висоту */
  .price__shot{ position:relative; inset:auto; display:block; text-align:center; }
  .price__shot img{ width:100%; max-width:none; aspect-ratio:5/4; }
  .pcard{ width:100%; }
}

/* =========================================================
   БЛОК 7 — жива анімація кнопок карт
   ========================================================= */
.btn--map{
  position:relative; overflow:hidden;
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.btn--map .btn__ico{ transition:transform .35s var(--ease); }
@media (hover:hover) and (pointer:fine){
  .btn--map:hover{
    transform:translateY(-3px);
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow:0 18px 34px -20px rgba(43,35,32,.5);
  }
  .btn--map:hover .btn__ico{ transform:rotate(-8deg) scale(1.18); }
  .btn--map:hover .btn__arrow{ transform:rotate(45deg) translate(4px,-4px); }
}
/* на дотику наведення немає — анімує саме натискання */
.btn--map:active{ transform:scale(.96); background:color-mix(in srgb, var(--surface) 95%, transparent); }
.btn--map:active .btn__ico{ transform:rotate(-10deg) scale(1.22); }
.btn--map:active .btn__arrow{ transform:rotate(45deg) translate(4px,-4px); }
.btn--map .btn__arrow{ transition:transform .3s var(--ease); }

/* =========================================================
   БЛОК 9 — іконки без паперу: ні квадратів, ні рамок
   ========================================================= */
.social--flat .sticker{ filter:none; transform:rotate(0deg); }
.social--flat .sticker .face rect{ fill:transparent; }
.social--flat .sticker .flap{ display:none; }
.social--flat .sticker:hover,
.social--flat .sticker:focus-visible,
.social--flat .sticker.is-peeled{
  transform:rotate(0deg) translateY(-4px) scale(1.08);
  filter:none;
}
.social--flat .sticker .face{ clip-path:none !important; }
.social--flat li{ background:none; border:0; box-shadow:none; }

/* =========================================================
   БЛОК 1 — читабельність поверх світлого кадру
   ========================================================= */

/* 1. перемикач мови не змінює ширину при виборі —
      інакше на телефоні від нього стрибає кнопка меню */
.lang__seg button{ justify-content:center; text-align:center;
  letter-spacing:.16em;
}
.lang__seg button[aria-selected="true"]{ letter-spacing:.16em; }

/* 2. прозора шапка над майже білою стіною: коди губилися (контраст 1,9) */
.topbar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(30,37,34,.5), rgba(30,37,34,.16) 70%, transparent);
  opacity:1; transition:opacity .35s var(--ease);
  pointer-events:none;
}
.topbar.is-solid::before{ opacity:0; }
.lang__seg button{ opacity:.6; }
.lang__seg button[aria-selected="true"]{ opacity:1; }

/* 3. надстрочник був нюдовим на світлій стіні — контраст 3,1 */
.hero__eyebrow{ color:rgba(255,255,255,.92); }

/* 4. одна широка тінь давала сірий ореол навколо антикви — два щільні шари */
.hero__inner{
  text-shadow:0 1px 2px rgba(20,16,14,.45), 0 3px 10px rgba(20,16,14,.4);
}



/* стани акценту беруть готовий тон, а не filter:
   brightness() тягнув відтінок у сірий */
.btn--accent.glass-btn:active,
.price__tab.is-on:hover{ background:var(--accent-deep); }
.btn--accent.glass-btn:hover{
  background:var(--accent-deep);
}
.cta-sticky:active{ background:var(--accent-deep); }

/* =========================================================
   ОПТИМІЗАЦІЯ І ДОСТУПНІСТЬ
   ========================================================= */

/* Розмиття лишаємо там, де воно лежить на фото чи на контенті,
   що їде під ним: шапка, док, меню, кнопки, мітки на сплітері.
   З карток прайсу знято — під ними рівний фон, ефекту не видно,
   а коштує він найдорожче з усього, що вміє браузер. */
.price__row{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
}
.price__row.is-on,
.price__row:hover{ background:var(--surface); }

/* Зони натискання: палець просить 44×44 */
.lang__seg{ padding:0; }
.lang__seg button{
  min-height:44px; padding:.7rem .55rem .8rem;
  min-width:44px;
}
.lang__thumb{ bottom:.55rem; }
.lang__seg button + button::before{ height:.9em; }

.burger{
  width:44px; height:44px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
  gap:5px; padding:0;
}

/* індикатор прокрутки був посиланням завширшки 1 px */
.hero__scroll{
  display:grid; place-items:center;
  width:44px; height:72px;
  /* 44px — зона для пальця, сама лінія посередині неї. Без зсуву лінія стояла
     б на 22px лівіше за колонку тексту; -20px ставить її майже врівень. */
  margin-right:-20px;
}


/* =========================================================
   ЕДИНЫЙ ШОВ МЕЖДУ БЛОКАМИ
   Раньше каждый шов складывался из своих величин и гулял от 35 до 136px:
   низ блока брал --rhythm (до 140px), а верх следующего — свой clamp(3rem,8vw,6rem),
   и две величины складывались. Теперь один токен --seam, и там, где в шов
   вкладываются обе стороны, каждая берёт ровно половину. Менять расстояние
   между блоками нужно только здесь.
   ========================================================= */
.ceo,
.compare{ padding-top:calc(var(--seam) / 2); padding-bottom:calc(var(--seam) / 2); }
.reviews,
.price,
.place{ padding-bottom:calc(var(--seam) / 2); }
.section-head{ padding-top:calc(var(--seam) / 2); }

/* Опоры проявляются чуть медленнее остальных reveal. Было 1,5 с при шаге
   задержки 0,55 с — пятая карточка появлялась через 3,7 с, и при быстрой
   прокрутке на её месте долго было пусто (28.09 — «лаг»). Потом было 0,15 с
   и 0,9 с — слишком быстро. Теперь шаг 0,3 с и 1,2 с: вся очередь — 2,4 с. */
.js .pillar.reveal{ transition-duration:1.2s; }


/* =========================================================
   ФОН — четыре мягких свечения (23.09.2026)

   Раньше здесь было двенадцать пятен на всю высоту документа. Золото и шалфей
   в них стояли на 2–3% и глазом не различались, а места пятен задавались
   долей высоты страницы — она меняется с шириной экрана и языком, поэтому
   пятна попадали то на один блок, то на другой.

   Теперь свечений четыре, заметных, и каждое — фон своего блока: оно всегда
   за тем местом, для которого задумано, лежит под содержимым и не может
   вызвать горизонтальную прокрутку. Цвет один — нюд панели мастера; в ядре
   55%, к краю эллипса сходит в ноль задолго до границы блока, так что стыков
   с соседями не видно. Раскладка шахматная: философия — справа сверху (переход
   от главного экрана), отзывы — слева, прайс — справа, финал — снизу по центру
   за кнопкой записи. Зерно бумаги (--grain) лежит под свечениями и в их ядре
   слегка приглушается — как бумага на свету.
   Сила — --glow-a (0 гасит все свечения).
   ========================================================= */
:root{ --glow: 232,211,198; --glow-a: .55; }

html{ background:var(--bg); }
body{ background:transparent; }

.philosophy{
  background:radial-gradient(62% 44% at 82% 20%,
    rgba(var(--glow), var(--glow-a)) 0%,
    rgba(var(--glow), calc(var(--glow-a) * .45)) 45%,
    rgba(var(--glow), 0) 78%);
}
.reviews{
  background:radial-gradient(55% 50% at 10% 46%,
    rgba(var(--glow), var(--glow-a)) 0%,
    rgba(var(--glow), calc(var(--glow-a) * .45)) 45%,
    rgba(var(--glow), 0) 75%);
}
.price{
  background:radial-gradient(52% 46% at 90% 42%,
    rgba(var(--glow), var(--glow-a)) 0%,
    rgba(var(--glow), calc(var(--glow-a) * .45)) 45%,
    rgba(var(--glow), 0) 75%);
}
/* страница 404: одно свечение за анимацией */
.page-404 .nf{
  background:radial-gradient(46% 42% at 50% 40%,
    rgba(var(--glow), var(--glow-a)) 0%,
    rgba(var(--glow), calc(var(--glow-a) * .45)) 45%,
    rgba(var(--glow), 0) 75%);
}


/* =========================================================
   ВЕБ: ЧИСЛО СТРОК ПОД КОНТРОЛЕМ (23.09.2026)
   Все три правила устроены одинаково: мера строки задана в знаках, а кегль
   ужимается ровно тогда, когда колонка становится уже этой меры. Так число
   строк одно и то же на любой ширине веба, а на широком экране кегль прежний.
   Коэффициент .631 — ширина знака «0» Inter в долях кегля (1ch / 1em).
   ========================================================= */

/* Подзаголовок блока 2 — ровно две строки. Порог перехода на вторую строку
   замерен на 1440px: en 66ch, uk 72,5, ru 79, pl 82; мера взята на 3% шире
   самого длинного. Всем языкам текста хватает на две строки и при этой мере. */
:root{ --lead-ch: 84.5; }   /* одна мера на все языки — по польскому: ширина абзаца не прыгает */
@media (min-width:900px){
  .philosophy__lead{
    max-width:calc(var(--lead-ch) * 1ch);
    font-size:min(var(--fs-lg), calc(100cqw / (var(--lead-ch) * .631)));
  }
}

/* Абзацы мастера — не больше трёх строк. Самый длинный — русский второй
   абзац: трём строкам ему нужно 53,5ch. Колонка расширена с 52 до 55ch — рядом
   с фото на 1440px свободно 703px, 55ch это 694px. Контейнером служит сама
   колонка текста: когда сетка сужает её, кегль абзацев ужимается следом. */
@media (min-width:860px){
  .ceo__text{ max-width:55ch; container-type:inline-size; }
  .ceo__text p{ font-size:min(var(--fs-lg), calc(100cqw / 34.7)); }   /* 55ch × .631 */
}

/* Адрес — одна строка на вебе. Перенос <br> остаётся в разметке для телефона,
   на вебе он прячется, а вместо него показывается запятая. Делитель — ширина
   адреса одной строкой на 1px кегля (замер на 1440px) плюс 2%. */
.addr-sep{ display:none; }
:root{ --addr-fit: 20.3; }   /* один на все языки — по украинскому (ru 19,7 · pl 20,2 · en 17,9) */
@media (min-width:900px){
  .place__info{ container-type:inline-size; }
  .addr-sep{ display:inline; }
  .addr-br{ display:none; }
  .place__addr{
    white-space:nowrap;
    font-size:min(clamp(1.4rem,1.1rem + 1.4vw,2rem), calc(100cqw / var(--addr-fit)));
  }
}


/* =========================================================
   ОДИН РАЗМЕР НА ВСЕ ЯЗЫКИ (23.09.2026)
   При переключении языка меняется только текст — не кегли и не колонки.
   ========================================================= */

/* Колонка с фото мастера — постоянной ширины. При auto её раздувала самая
   длинная подпись («LASH ARTIST · 5 YEARS OF PRACTICE» — 315px при фото
   280px), и на английском весь текст справа уезжал на 35px. 20rem вмещает
   любую из четырёх подписей. */
@media (min-width:860px){
  .ceo__grid{ grid-template-columns:max(var(--person-photo-width), 20rem) 1fr; }
}

/* Подзаголовок и тексты карточек блока 2, подпись под фото и абзацы мастера
   держат одну высоту на всех языках — её резервирует initStableHeights() в
   main.js по самому длинному переводу на текущей ширине.
   Польский первый абзац занимает три строки, остальные две: без запаса колонка
   текста, центрированная по фото, съезжала вместе с цифрами на полстроки. */


/* =========================================================
   FAQ — окно на пять вопросов (23.09.2026)
   Вопросов стало одиннадцать; видно пять, остальные прокручиваются внутри
   списка. Высоту окна (--faq-h) считает initFaqScroll(): сумма первых пяти
   закрытых вопросов на самом длинном языке — при переключении языка окно не
   меняет высоту. На телефоне ответ раскрывается прямо в списке, и окно
   подрастает на высоту открытого ответа.
   Сверху и снизу — мягкое затухание, пока там есть что листать.
   ========================================================= */
.faq__list{
  --fade: 1.4rem;
  position:relative;                          /* offsetTop пунктов — от списка */
  max-height:var(--faq-h, none);
  overflow-y:auto;
  scroll-snap-type:y proximity;
  scrollbar-width:none;                        /* своя рейка вместо системной — ниже */
  margin-right:calc(var(--rail-gap) + 2px);   /* поле под рейку: плюсы не упираются в неё */
  transition:max-height .35s var(--ease);
}
.faq__list::-webkit-scrollbar{ display:none; }
.faq__item{ scroll-snap-align:start; }
.faq__list.is-more{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
}
.faq__list.is-scrolled{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--fade));
          mask-image:linear-gradient(to bottom, transparent, #000 var(--fade));
}
.faq__list.is-more.is-scrolled{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

/* кнопка под списком: листает на следующую пятёрку, в конце — наверх */
.faq__more{
  display:grid; place-items:center;
  width:44px; height:44px; margin:1rem auto 0;
  border-radius:50%; border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  color:var(--ink);
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.faq__more[hidden]{ display:none; }
.faq__more svg{ transition:transform .35s var(--ease); }
.faq__more.is-end svg{ transform:rotate(180deg); }
@media (hover:hover) and (pointer:fine){
  .faq__more:hover{ border-color:var(--accent); color:var(--accent); }
}
@media (prefers-reduced-motion: reduce){
  .faq__list, .faq__more svg{ transition:none; }
}

/* Рейка прокрутки FAQ. Системная полоса стояла вплотную к плюсам и сливалась
   с ними, а на разных системах выглядела по-разному. Теперь это линия в 2px в
   собственном поле справа, с зазором от плюсов, и зелёный бегунок по ней:
   его длина — доля видимой части списка, положение — место прокрутки.
   Рейку можно тянуть или нажать в нужное место; невидимая зона захвата шире
   самой линии. Размеры и положение ставит initFaqScroll(). */
.faq__col{ position:relative; --rail-gap: 1.1rem; }
.faq__rail{
  position:absolute; top:0; right:0;
  width:2px; height:var(--rail-h, 0);
  border-radius:2px;
  background:var(--line);
  cursor:pointer; touch-action:none;
}
.faq__rail::before{ content:""; position:absolute; inset:0 -8px; }   /* зона захвата 18px */
.faq__rail[hidden]{ display:none; }
.faq__rail i{
  position:absolute; left:0; top:0; width:100%;
  height:var(--thumb-h, 0);
  border-radius:2px;
  background:var(--accent);
  transform:translateY(var(--thumb-y, 0));
}

/* Фото мастера не двигается от языка. Блок с фото подстраивался под ширину
   подписи, а английская («LASH ARTIST · 5 YEARS OF PRACTICE», 315px) шире
   фото (280px): блок становился шире, центрировался заново, а фото, прижатое
   к его левому краю, уезжало влево на 17px — на всех ширинах. Теперь ширина
   блока постоянная, фото стоит по его центру. */
.ceo__figure{ width:min(100%, max(var(--person-photo-width), 20rem)); }
.ceo__photo{ margin-inline:auto; }

/* Капсулы на телефоне — плотнее, чтобы обе стояли в один ряд: при полях
   1,1rem и разрядке .2em они выходили по 185px и на 375px вставали друг под
   другом, добавляя блоку 50px. Ширину initFacts() меряет уже по этим стилям. */
@media (max-width:599px){
  .facts{ gap:.45rem; }
  .fact{ height:40px; padding:0 .8rem; gap:.4rem; }
  .fact__label{ letter-spacing:.14em; }
  .fact__val > span{ gap:.4rem; }
  .fact__num{ font-size:1.2rem; }
}
/* На самых узких телефонах (360px — частая ширина Android) — ещё плотнее,
   чтобы пара капсул влезла в колонку 316px. На 320–340px они всё равно
   встают друг под другом: места на две капсулы там физически нет. */
@media (max-width:399px){
  .fact{ padding:0 .65rem; }
  .fact__label{ letter-spacing:.1em; }
}

/* Соцсети мастера — в колонке текста, под капсулами. Отдельным рядом под
   сеткой они добавляли блоку 136px, а рядом с фото в колонке текста было по
   56px пустоты сверху и снизу. Линия над рядом убрана: внутри колонки она
   делила бы капсулы и наклейки на полосы. */
.ceo__text .social{
  margin-top:clamp(1.3rem,3vw,1.8rem);
  padding-top:0; border-top:0;
}

/* =========================================================
   ФАКТУРА БУМАГИ (23.09.2026)
   Идеально гладкий фон на экране выглядит пластиково. Поверх базового цвета
   лежит мелкое зерно — плитка 160×160 из SVG-шума (feTurbulence, stitchTiles
   сшивает края без швов). Цвет зерна — кофейный тон текста (--ink), а не серый:
   так оно читается как матовая бумага, а не как цифровой шум. Прозрачность
   зашита в матрицу цвета (последняя строка, 0.07): в среднем зерно темнит фон
   на 2–3%, контраст текста от этого только растёт.
   Слой идёт фоном html — под свечениями блоков и под всем
   содержимым: на фото, текст и кнопки зерно не попадает. Та же плитка лежит
   на нюдовой панели мастера и на градиенте финального блока — у них свой
   непрозрачный фон, иначе там бумага обрывалась бы.
   Выключить: --grain: none. Ослабить или усилить — число 0.07 в матрице.
   ========================================================= */
:root{
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .125 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
html{ background:var(--grain) repeat, var(--bg); }
.ceo__panel{ background:var(--grain) repeat, var(--nude); }
.final{
  background:
    var(--grain) repeat,
    radial-gradient(70% 80% at 50% 100%, rgba(var(--glow), var(--glow-a)) 0%, rgba(var(--glow), calc(var(--glow-a) * .45)) 45%, rgba(var(--glow), 0) 78%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--nude) 45%, var(--bg)));
}

/* Капсулы блока 3 подсказывают, что их нажимают: пока ни одну не открыли и
   ряд на экране, они мягко пульсируют — раз в 2 секунды чуть подрастают (на 4%),
   контур наливается зелёным, а от него расходится тонкое кольцо. Вторая
   капсула отстаёт на полтакта — дышат по очереди и не задевают друг друга. После
   первого нажатия пульс выключается навсегда (класс .is-hint снимает
   initFacts()). Курсор-«рука» — на всех капсулах. */
.fact{ cursor:pointer; }
.facts.is-hint .fact{ animation:factPulse 2s cubic-bezier(.45,0,.55,1) infinite; }
.facts.is-hint li:nth-child(2) .fact{ animation-delay:1s; }
@keyframes factPulse{
  0%{
    transform:scale(1);
    border-color:color-mix(in srgb, var(--ink) 16%, transparent);
    box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
  }
  30%{
    transform:scale(1.04);
    border-color:var(--accent);
  }
  60%, 100%{
    transform:scale(1);
    border-color:color-mix(in srgb, var(--ink) 16%, transparent);
    box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce){
  .facts.is-hint .fact{ animation:none; }
}

/* FAQ: ряды по своей высоте. Раньше все ряды тянулись до самого длинного
   вопроса на всех языках (на вебе — до двух строк), и у однострочных над и
   под текстом стояло по ~40px пустоты до линии. Теперь ряд = текст + ровный
   отступ, а окно в пять вопросов initFaqScroll() считает по реальным высотам
   видимой пятёрки. Высоту колонки он резервирует по самой высокой пятёрке на
   всех языках (--faq-res), и кнопка стоит внизу этого резерва: при
   листании и смене языка ничего ниже не двигается. */
.faq__item summary{ padding-block:clamp(.8rem,1.6vw,1.05rem); line-height:1.4; }
.faq__col{ display:flex; flex-direction:column; min-height:calc(var(--faq-res, 0px) + 1rem + 44px); }
.faq__list{ flex:none; transition:none; }
.faq__more{ margin:auto auto 0; }
.faq__col > .faq__list{ margin-bottom:1rem; }
/* На телефоне резерва нет: ответ раскрывается прямо в списке, и колонка всё
   равно меняет высоту. Резерв по самой высокой пятёрке всех языков оставлял
   под короткой пятёркой до 90px пустоты — кнопка стоит сразу под списком. */
@media (max-width:899px){ .faq__col{ min-height:0; } }

/* =========================================================
   КОНТЕНТ ИЗ АДМИНКИ
   ========================================================= */
/* город в строке над заголовком не рвётся: длинный уходит на новую строку целиком */
.nw{ white-space:nowrap; }

/* отзыв с оценкой ниже пяти — пустые звёзды бледнее */
.review__stars-off{ opacity:.28; }

/* выходной в графике */
.place__hours .is-off{ color:var(--ink-2); }

/* длинное название студии на самых узких телефонах: разрядка поменьше */
@media (max-width:359px){ .topbar__logo{ letter-spacing:.14em; } }


/* Список цен длиннее пяти позиций листается внутри (initPriceScroll) */
.price__list{ position:relative; }
.price__list.is-scroll{
  --fade:1.6rem;
  max-height:var(--pl-h, none);
  overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y proximity;
  padding-top:4px; margin-top:-4px;          /* место под подъём карточки при наведении */
  scroll-padding-top:4px;                     /* прилипание к карточке с учётом этого поля */
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
.price__list.is-scroll > .price__row{ scroll-snap-align:start; }
.price__list.is-scroll.is-more{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
}
.price__list.is-scroll.is-scrolled{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--fade));
          mask-image:linear-gradient(to bottom, transparent, #000 var(--fade));
}
.price__list.is-scroll.is-more.is-scrolled{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}