/* ============================================================================
   VibePlex — студия кератина. Основные стили.
   Палитра: тёплый беж · эспрессо · бронза
   ========================================================================== */

/* ---------- 1. Токены ---------- */
:root{
  --bg:        #EAE2DC;   /* тёплый беж — основной фон */
  --bg-2:      #E2D3C9;   /* секции-акценты */
  --bg-3:      #D8C5B7;   /* плашки, пилюли */
  --surface:   #FBF8F5;   /* карточки */
  --ink:       #6D301B;   /* каштановый — заголовки и текст */
  --ink-2:     #8A5741;   /* вторичный текст */
  --ink-3:     #8C6A55;   /* мелкая мета */
  --line:      #D5C1B2;
  --line-2:    #C2A791;
  --accent:    #C9884F;   /* терракота — заливки и текст на тёмном */
  --accent-d:  #9C4A22;   /* тёмная терракота — текст на светлом */
  --accent-l:  #E6BC97;   /* светлая терракота — тонкие акценты */
  --on-accent: #3A1A0E;   /* текст на коралловой заливке */
  --dark:      #2E211A;   /* тёплый эспрессо — тёмные секции */
  --dark-2:    #3A2A21;   /* на тон светлее — карточки на тёмном */
  --dark-ink:  #EFE6DE;   /* текст на тёмном */
  --dark-ink2: #BCA592;   /* вторичный текст на тёмном */
  --gold:      #E9A23B;

  --ff-d: "Unbounded", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ff-b: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --r-s: 6px;
  --r-m: 14px;
  --r-l: 24px;
  --r-xl: 32px;

  --sh-s: 0 2px 10px rgba(36,26,20,.06);
  --sh-m: 0 10px 34px rgba(36,26,20,.10);
  --sh-l: 0 24px 70px rgba(36,26,20,.16);

  --pad: clamp(18px, 4.2vw, 64px);
  --maxw: 1320px;
  --hdr: 78px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-o: cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. Сброс и база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-b); font-size:16px; font-weight:400; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%; height:auto; display:block}
svg.ico{
  width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px;
}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
::selection{background:var(--accent-l); color:var(--ink)}

/* ---------- 3. Типографика ---------- */
.d1,.d2,.d3,.d4{font-family:var(--ff-d); font-weight:300; line-height:1.1; letter-spacing:-.03em}
.d3,.d4{font-weight:400; letter-spacing:-.022em}
.d1{font-size:clamp(38px, 7.2vw, 92px)}
.d2{font-size:clamp(30px, 4.6vw, 62px); line-height:1.1}
.d3{font-size:clamp(24px, 3.1vw, 40px); line-height:1.16}
.d4{font-size:clamp(20px, 2.2vw, 28px); line-height:1.25}
em.it{font-style:normal; font-weight:500; color:var(--accent-d)}

.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-d); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.5}
.eyebrow--c::after{content:""; width:28px; height:1px; background:currentColor; opacity:.5}

.lead{font-size:clamp(16px,1.55vw,19.5px); line-height:1.66; color:var(--ink-2)}
.muted{color:var(--ink-2)}
.small{font-size:14px}
.tiny{font-size:12.5px; line-height:1.55; color:var(--ink-3)}

/* ---------- 4. Раскладка ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.wrap--n{max-width:900px}
.sec{padding-block:clamp(56px, 8vw, 128px)}
.sec--t{padding-top:clamp(36px, 5vw, 72px)}
.sec--b{padding-bottom:clamp(36px, 5vw, 72px)}
.sec--alt{background:var(--bg-2)}
.sec--dark{background:var(--dark); color:var(--dark-ink)}
.sec--dark .lead,.sec--dark .muted{color:var(--dark-ink2)}
.sec--dark .eyebrow{color:var(--accent)}
.sec--dark .tiny{color:var(--dark-ink2)}

.sec-head{max-width:760px; margin-bottom:clamp(28px,4vw,56px)}
.sec-head .d2{margin-top:14px}
.sec-head .lead{margin-top:16px}
.sec-head--c{margin-inline:auto; text-align:center}

.grid{display:grid; gap:clamp(14px,1.8vw,26px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- 5. Кнопки ---------- */
.btn{
  --bg-b:var(--ink); --fg-b:#fff; --bg-h:var(--accent); --fg-h:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; background:var(--bg-b); color:var(--fg-b);
  font-size:14.5px; font-weight:600; letter-spacing:.02em; line-height:1;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), color .32s linear;
  white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; inset:-1px; z-index:-1; background:var(--bg-h);
  transform:translate3d(0,101%,0); will-change:transform; backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.33,1,.68,1);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-m); color:var(--fg-h)}
.btn:hover::after{transform:translate3d(0,0,0)}
.btn:active{transform:translateY(0)}
.btn--accent{--bg-b:var(--accent); --fg-b:var(--on-accent); --bg-h:var(--ink); --fg-h:#fff}
.btn--light{--bg-b:#fff; --fg-b:var(--ink); --bg-h:var(--accent); --fg-h:var(--on-accent)}
.btn--ghost{
  --bg-b:transparent; --fg-b:var(--ink); --bg-h:var(--ink); --fg-h:#fff;
  border:1px solid var(--line-2);
}
.btn--ghost:hover{border-color:var(--ink)}
.sec--dark .btn--ghost,.cta-box .btn--ghost{
  --fg-b:var(--dark-ink); --bg-h:#fff; --fg-h:var(--ink); border-color:rgba(239,230,222,.34);
}
.sec--dark .btn--ghost:hover,.cta-box .btn--ghost:hover{border-color:#fff}
.btn--sm{padding:11px 20px; font-size:13px}
.btn--wide{width:100%}
.btn[disabled]{opacity:.42; cursor:not-allowed; transform:none!important; box-shadow:none!important}
.btn[disabled]::after{transform:translate3d(0,101%,0)!important}

.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3vw,34px)}

/* Пара кнопок в hero на телефоне должна стоять в одну строку.
   Полноразмерная пара (205+12+169=386) помещается только с 430px, поэтому
   ниже этого ужимаем кегль и отступы. flex-wrap оставляем: если шрифт
   окажется шире расчётного или экран совсем узкий — кнопки просто встанут
   в две строки, а не полезут за край. min-height держит палец-френдли высоту. */
@media(max-width:420px){
  .hero .btn-row{gap:10px}
  .hero .btn-row .btn{padding:14px 16px; font-size:13px; min-height:44px}
}
@media(max-width:340px){
  .hero .btn-row{gap:8px}
  .hero .btn-row .btn{padding:13px 12px; font-size:12.5px}
}

.link-u{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px;
  color:var(--accent-d); position:relative; padding-bottom:2px;
}
.link-u::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.link-u:hover::after{transform:scaleX(1); transform-origin:left}
.link-u svg{transition:transform .4s var(--ease)}
.link-u:hover svg{transform:translateX(4px)}

/* ---------- 6. Шапка ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hdr);
  display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,18,13,.55), rgba(26,18,13,0));
  opacity:1; transition:opacity .4s;
}
.hdr.is-solid{background:rgba(234,226,220,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line)}
.hdr.is-solid::before{opacity:0}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr{transition:transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease)}

.hdr__in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:clamp(14px,2.4vw,40px);
}
.logo{flex:none; display:block; position:relative; width:clamp(128px,12vw,168px)}
.logo img{width:100%; height:auto; transition:opacity .3s}
.logo .lg-d{display:none}
.hdr.is-solid .logo .lg-l{display:none}
.hdr.is-solid .logo .lg-d{display:block}
.page-light .logo .lg-l{display:none}
.page-light .logo .lg-d{display:block}

.nav{display:flex; align-items:center; gap:clamp(10px,1.25vw,20px); margin-left:auto}
.nav a{
  font-size:14px; font-weight:500; color:#fff; padding:8px 2px; position:relative;
  transition:color .3s; opacity:.92; white-space:nowrap;
}
@media(max-width:1340px){.nav a{font-size:13.5px}}
.hdr.is-solid .nav a, .page-light .nav a{color:var(--ink)}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right; transition:transform .38s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav a[aria-current="page"]{color:var(--accent)}
.hdr.is-solid .nav a[aria-current="page"], .page-light .nav a[aria-current="page"]{color:var(--accent-d)}

.hdr__cta{display:flex; align-items:center; gap:12px; flex:none}
.hdr__tel{
  font-size:14.5px; font-weight:700; color:#fff; letter-spacing:.01em; white-space:nowrap;
}
.hdr.is-solid .hdr__tel,.page-light .hdr__tel{color:var(--ink)}

.burger{
  display:none; width:44px; height:44px; margin-right:-8px; align-items:center; justify-content:center;
  flex:none; border-radius:50%;
}
.burger span{display:block; width:22px; height:1.6px; background:#fff; position:relative; transition:.3s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:22px; height:1.6px; background:#fff; transition:.3s}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.hdr.is-solid .burger span,.hdr.is-solid .burger span::before,.hdr.is-solid .burger span::after,
.page-light .burger span,.page-light .burger span::before,.page-light .burger span::after{background:var(--ink)}

@media(max-width:1180px){
  .nav{display:none}
  .burger{display:flex}
  .hdr__cta{margin-left:auto}
}
@media(max-width:720px){
  :root{--hdr:64px}
  .hdr__tel{display:none}
}

/* ---------- 7. Мобильное меню (шторка) ---------- */
.sheet{
  position:fixed; inset:0; z-index:120; background:var(--dark); color:var(--dark-ink);
  display:flex; flex-direction:column; padding:calc(var(--hdr) + 8px) var(--pad) 28px;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .62s var(--ease), visibility .62s;
  overflow-y:auto; overscroll-behavior:contain;
}
.sheet.is-on{transform:translateY(0); visibility:visible}
.sheet__close{
  position:absolute; top:14px; right:calc(var(--pad) - 8px); width:46px; height:46px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  border:1px solid rgba(239,230,222,.2);
}
.sheet__close::before,.sheet__close::after{content:""; position:absolute; width:18px; height:1.5px; background:var(--dark-ink)}
.sheet__close::before{transform:rotate(45deg)}
.sheet__close::after{transform:rotate(-45deg)}
.sheet__nav{display:flex; flex-direction:column; gap:2px; margin-block:auto}
.sheet__nav a{
  font-family:var(--ff-d); font-size:clamp(26px,7.4vw,40px); line-height:1.28; padding:6px 0;
  display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.sheet.is-on .sheet__nav a{opacity:1; transform:none}
.sheet__nav a:hover,.sheet__nav a[aria-current="page"]{color:var(--accent)}
.sheet__nav a i{font-style:normal; font-family:var(--ff-b); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--accent); opacity:.7}
.sheet__foot{
  border-top:1px solid rgba(239,230,222,.14); padding-top:20px; margin-top:24px;
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
}
.sheet__tel{font-family:var(--ff-d); font-size:26px}
.sheet__soc{display:flex; gap:10px}

/* ---------- 8. Нижнее таб-меню (как в приложении) ---------- */
.tabbar{
  position:fixed; left:50%; transform:translateX(-50%) translateY(0); bottom:12px; z-index:90;
  width:min(calc(100vw - 24px), 470px);
  display:none; align-items:center; justify-content:space-around; gap:2px;
  padding:8px 6px; border-radius:26px;
  background:rgba(46,33,26,.9); backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 12px 40px rgba(30,21,16,.46), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .45s var(--ease), opacity .35s;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}
.tabbar.is-down{transform:translateX(-50%) translateY(160%); opacity:0}
.tabbar a,.tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:7px 3px; border-radius:18px; color:rgba(239,230,222,.6);
  font-size:10.5px; font-weight:600; letter-spacing:.01em; line-height:1;
  transition:color .3s var(--ease), background .3s;
}
.tabbar svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease)}
.tabbar a:hover,.tabbar button:hover,.tabbar a.is-cur{color:var(--dark-ink)}
.tabbar a:active svg{transform:scale(.86)}
.tabbar a.is-cur svg{color:var(--accent)}
.tabbar .tb-book{color:var(--dark)}
.tabbar .tb-book span{color:var(--dark-ink)}
.tabbar .tb-book .tb-ic{
  width:40px; height:40px; margin-top:-14px; border-radius:50%;
  background:linear-gradient(145deg,var(--accent-l),var(--accent));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(201,136,79,.40);
  transition:transform .4s var(--ease);
}
.tabbar .tb-book:hover .tb-ic{transform:translateY(-3px) rotate(90deg)}
.tabbar .tb-book svg{width:19px; height:19px; stroke-width:2.1; color:#fff}
@media(max-width:1180px){
  .tabbar{display:flex}
  body{padding-bottom:76px}
}

/* ---------- 9. Hero: светлый, со слайдером работ ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; background:var(--bg); isolation:isolate;
}
@media(max-width:900px){.hero{min-height:auto}}

/* Тёплая подложка hero собрана из трёх слоёв, снизу вверх:
   i    — размытый отсвет активного кадра слайдера (z 0)
   ::before — светлая «читалка» под заголовком        (z 1)
   ::after  — тёплый рассвет: коралл + золото, дышит  (z 2)          */
.hero__bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero__bg i{
  position:absolute; inset:-14%; z-index:0; display:block;
  background-size:cover; background-position:center;
  filter:blur(56px) saturate(1.5); opacity:0; transform:scale(1.1);
  /* visibility выключает композицию неактивных слоёв — иначе браузер
     держит семь размытых текстур во весь экран и на слабой видеокарте
     выкидывает их при длинной прокрутке */
  visibility:hidden;
  transition:opacity 1.2s var(--ease), transform 10s linear, visibility 0s linear 1.2s;
}
.hero__bg i.is-on{opacity:.32; transform:scale(1); visibility:visible; transition-delay:0s,0s,0s}

.hero__bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(86% 72% at 9% 26%, rgba(254,251,248,.95), rgba(249,240,232,.58) 44%, rgba(245,233,224,.12) 74%),
    linear-gradient(180deg, rgba(241,229,220,.88) 0%, rgba(238,224,213,.28) 42%, rgba(232,215,202,.9) 100%);
}
.hero__bg::after{
  content:""; position:absolute; inset:-18%; z-index:2;
  background:
    radial-gradient(42% 40% at 80% 10%, rgba(226,166,120,.44), rgba(226,166,120,0) 68%),
    radial-gradient(40% 38% at 7% 94%, rgba(233,162,59,.24), rgba(233,162,59,0) 70%),
    radial-gradient(46% 44% at 58% 64%, rgba(201,136,79,.19), rgba(201,136,79,0) 72%),
    radial-gradient(34% 30% at 96% 62%, rgba(234,196,162,.34), rgba(234,196,162,0) 70%);
}
.js .hero__bg::after{animation:heroWarm 24s ease-in-out infinite alternate}
@keyframes heroWarm{
  from{transform:translate3d(-1.6%,-1.2%,0) scale(1)}
  to  {transform:translate3d(2.2%,1.6%,0)  scale(1.09)}
}
@media(prefers-reduced-motion:reduce){.js .hero__bg::after{animation:none}}
.hero__in{
  position:relative; z-index:2; width:100%;
  padding-block:calc(var(--hdr) + clamp(20px,3.5vh,46px)) clamp(48px,7vh,80px);
}
@media(max-width:900px){.hero__in{padding-block:calc(var(--hdr) + 22px) 44px}}
.hero__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,4vw,68px); align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr; gap:30px}}

.hero h1{color:var(--ink); margin-top:16px; font-size:clamp(32px,4.3vw,62px)}
@media(max-width:900px){.hero h1{font-size:clamp(30px,7.8vw,48px)}}
/* «не нужно укладывать» одним словом не переносится: на очень узких
   экранах нижняя граница clamp не спасает, снижаем отдельно */
@media(max-width:340px){.hero h1{font-size:26px}}
.hero h1 em{font-style:normal; font-weight:500; color:var(--accent-d)}
.hero__sub{color:var(--ink-2); font-size:clamp(15px,1.45vw,18.5px); margin-top:20px; max-width:46ch}
.hero__badges{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.hb{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:100px;
  background:rgba(251,248,245,.8); border:1px solid var(--line);
  color:var(--ink); font-size:12.5px; font-weight:600; backdrop-filter:blur(7px);
}
.hb svg{stroke:var(--accent-d)}

/* ── слайдер ── */
.cov{position:relative; width:100%}
.cov__stage{
  position:relative; width:100%; aspect-ratio:4/5; max-height:min(66svh,620px);
  perspective:1500px; perspective-origin:50% 50%;
  touch-action:pan-y; cursor:grab; user-select:none;
}
.cov__stage:active{cursor:grabbing}
@media(max-width:900px){.cov__stage{aspect-ratio:1/1; max-height:none}}
.cov__s{
  position:absolute; top:50%; left:50%; width:58%; aspect-ratio:3/4;
  border-radius:var(--r-l); overflow:hidden; background:var(--bg-3);
  /* transform-style тут не нужен: перспектива живёт на .cov__stage, а вместе
     с overflow:hidden preserve-3d всё равно схлопывается в flat — и в Safari
     из-за этого слайды иногда пропадали после длинной прокрутки */
  backface-visibility:hidden; will-change:transform,opacity;
  box-shadow:0 22px 54px rgba(62,40,28,.24);
  transition:opacity .55s var(--ease), filter .55s var(--ease);
}
.cov__s img,.cov__s video{
  width:100%; height:100%; object-fit:cover; pointer-events:none;
  /* Кадры сняты в тёмном интерьере, поэтому чуть приподнимаем яркость.
     Дымку-перекрытие и снижение контраста убрали: именно они съедали
     резкость — картинка выглядела мутной. Контраст даже слегка поднят,
     чтобы волосы остались чёткими. */
  filter:brightness(1.07) contrast(1.03) saturate(.96);
}
.cov__s::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(234,226,220,.06) 40%,rgba(234,226,220,.5));
  opacity:0; transition:opacity .5s var(--ease);
}
.cov__s:not(.is-cur)::after{opacity:1}
.cov__s:not(.is-cur){filter:saturate(.9) brightness(.94)}
.cov__tag{
  position:absolute; left:14px; bottom:14px; z-index:2; padding:7px 14px; border-radius:100px;
  background:rgba(251,248,245,.92); border:1px solid var(--line); backdrop-filter:blur(8px);
  color:var(--ink); font-size:11.5px; font-weight:700; letter-spacing:.02em;
  opacity:0; transform:translateY(8px); transition:.5s var(--ease);
}
.cov__s.is-cur .cov__tag{opacity:1; transform:none}
.cov__play{
  position:absolute; right:14px; top:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(251,248,245,.94); display:flex; align-items:center; justify-content:center;
}
.cov__play svg{width:13px; height:13px; fill:var(--ink); stroke:none}

.cov__ui{display:flex; align-items:center; gap:16px; margin-top:22px}
@media(max-width:900px){.cov__ui{justify-content:center}}
.cov__nav{
  width:46px; height:46px; border-radius:50%; flex:none; color:var(--ink);
  border:1px solid var(--line-2); background:rgba(251,248,245,.75);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px);
  transition:background .35s var(--ease), transform .35s var(--ease), border-color .35s, color .3s;
}
.cov__nav:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.cov__nav:active{transform:scale(.92)}
.cov__nav svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9}
/* min-width:0 обязателен: у flex-элемента минимальная ширина по умолчанию
   равна min-content, и полоска из семи точек не давала колонке hero сжаться
   уже ниже 364px — на 360px экране текст уходил под обрез .hero{overflow:hidden} */
.cov__dots{display:flex; gap:6px; flex:1; min-width:0; justify-content:center}
.cov__dots button{
  width:22px; height:3px; border-radius:2px; background:var(--line-2);
  position:relative; overflow:hidden; transition:background .3s, width .4s var(--ease);
}
.cov__dots button.is-on{width:40px; background:var(--line-2)}
.cov__dots button.is-on::after{
  content:""; position:absolute; inset:0; background:var(--accent-d); transform-origin:left;
  animation:covFill var(--dur,6s) linear forwards;
}
.cov__stage.is-paused ~ .cov__ui .cov__dots button.is-on::after{animation-play-state:paused}
@keyframes covFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cov__num{
  flex:none; font-family:var(--ff-d); font-weight:400; font-size:14px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.cov__num b{color:var(--ink); font-weight:500}
/* на узких экранах ужимаем всю панель управления, чтобы она помещалась в колонку */
@media(max-width:600px){
  .cov__ui{gap:11px; margin-top:18px}
  .cov__nav{width:42px; height:42px}
  .cov__dots{gap:5px}
  .cov__dots button{width:14px}
  .cov__dots button.is-on{width:26px}
  .cov__num{font-size:13px}
}

.hero__side{display:flex; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap}
.hero-rate{
  display:inline-flex; align-items:center; gap:13px; padding:12px 19px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s);
  color:var(--ink); transition:box-shadow .35s, transform .35s var(--ease);
}
.hero-rate:hover{box-shadow:var(--sh-m); transform:translateY(-2px)}
.hero-rate__n{font-family:var(--ff-d); font-weight:400; font-size:26px; line-height:1; color:var(--accent-d)}
.hero-rate__t{font-size:12px; line-height:1.35; text-align:left; color:var(--ink-2)}
.stars{display:flex; gap:2px; margin-bottom:3px}
.stars svg{width:12px; height:12px; fill:var(--gold); stroke:none}
.hero-award{
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:100px;
  background:var(--bg-3); border:1px solid var(--line-2); color:var(--ink);
  font-size:12.5px; font-weight:600;
}
.hero-award svg{stroke:var(--accent-d)}

/* На телефоне обе плашки должны стоять в одну строку. Для этого ужимаем
   отступы и кегль и прячем хвост «на Яндекс Картах» — источник оценок
   и так понятен по ссылке и по блоку отзывов ниже. */
@media(max-width:600px){
  .hero__side{gap:9px; flex-wrap:nowrap; margin-top:22px}
  .hero-rate{gap:10px; padding:10px 15px; flex:none}
  .hero-rate__n{font-size:23px}
  .hero-rate__t{font-size:11.5px; line-height:1.3; white-space:nowrap}
  .hero-rate__x{display:none}
  .stars{gap:2px; margin-bottom:2px}
  .stars svg{width:11px; height:11px}
  .hero-award{gap:8px; padding:10px 15px; font-size:11.5px; flex:none; white-space:nowrap}
  .hero-award svg{width:15px; height:15px}
}
@media(max-width:360px){
  .hero__side{gap:7px}
  .hero-rate,.hero-award{padding:9px 12px}
  .hero-rate{gap:8px}
  .hero-rate__n{font-size:20px}
  .hero-rate__t,.hero-award{font-size:10.5px}
  .stars svg{width:10px; height:10px}
  .hero-award{gap:7px}
  .hero-award svg{width:14px; height:14px}
}

.hero__scroll{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:3;
  color:var(--ink-3); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__scroll::after{content:""; width:1px; height:32px; background:linear-gradient(var(--line-2),transparent);
  animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}
  55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media(max-width:1100px){.hero__scroll{display:none}}

/* ---------- 10. Шапка внутренних страниц ---------- */
.phead{
  position:relative; padding-top:calc(var(--hdr) + clamp(44px,7vw,96px));
  padding-bottom:clamp(34px,5vw,72px); background:var(--bg-2);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.phead::after{
  content:""; position:absolute; right:-8%; top:-30%; width:46%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(174,124,78,.12), transparent 66%); pointer-events:none;
}
.phead__in{position:relative; z-index:1; max-width:860px}
.phead h1{margin-top:14px}
.phead .lead{margin-top:18px}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; color:var(--ink-3); margin-bottom:18px}
.crumbs a:hover{color:var(--accent-d)}
.crumbs span{opacity:.55}

/* ---------- 11. Карточки услуг (крупные, как у persona) ---------- */
.svc{display:grid; gap:clamp(14px,1.7vw,22px); grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svc{grid-template-columns:1fr}}

.svc-card{
  /* z-index:0 задан явно: без него карточка с трансформацией в некоторых
     браузерах поднималась выше фиксированной шапки и наезжала на неё */
  position:relative; z-index:0; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(340px,40vw,460px); border-radius:var(--r-l); overflow:hidden;
  background:var(--dark); isolation:isolate; color:#fff;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.svc-card:hover{transform:translateY(-5px); box-shadow:var(--sh-l)}
.svc-card__img{position:absolute; inset:0; z-index:-2}
.svc-card__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); filter:saturate(1.02)}
.svc-card:hover .svc-card__img img{transform:scale(1.07)}
.svc-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(30,21,16,.08) 0%, rgba(30,21,16,.18) 40%, rgba(32,23,17,.88) 100%);
  transition:background .5s;
}
.svc-card:hover::after{background:linear-gradient(180deg, rgba(30,21,16,.2) 0%, rgba(30,21,16,.42) 40%, rgba(32,23,17,.94) 100%)}
.svc-card__body{padding:clamp(18px,2.2vw,28px); display:flex; flex-direction:column; gap:10px}
.svc-card__price{
  align-self:flex-start; padding:6px 13px; border-radius:100px; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px);
  letter-spacing:.02em;
}
.svc-card h3{font-family:var(--ff-d); font-size:clamp(19px,1.65vw,24px); line-height:1.2; font-weight:500}
/* Раскрытие описания. Раньше здесь анимировался max-height 0 → 120px:
   реальная высота текста ~42px, поэтому вся «анимация» успевала пройти
   за первые 70 мс и дальше стояла — текст дёргался, а не поднимался.
   grid-template-rows 0fr → 1fr тянется ровно на фактическую высоту. */
.svc-card__short{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .5s var(--ease), opacity .38s var(--ease);
}
.svc-card__short > p{
  overflow:hidden; min-height:0;
  font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.78);
}
.svc-card:hover .svc-card__short,.svc-card:focus-within .svc-card__short{grid-template-rows:1fr; opacity:1}
.svc-card__more{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:2px;
}
.svc-card__more svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; transition:transform .4s var(--ease)}
.svc-card:hover .svc-card__more svg{transform:translateX(4px)}
.svc-card__a{position:absolute; inset:0; z-index:3}
@media(hover:none){
  .svc-card__short{grid-template-rows:1fr; opacity:1}
}

/* ---------- 12. Категории-табы ---------- */
.cat-tabs{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:clamp(24px,3vw,40px);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs button{
  flex:none; padding:11px 20px; border-radius:100px; border:1px solid var(--line-2);
  font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
  transition:all .35s var(--ease);
}
.cat-tabs button:hover{border-color:var(--accent); color:var(--accent-d)}
.cat-tabs button.is-on{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- 13. Модалка услуги ---------- */
.modal{
  position:fixed; inset:0; z-index:140; display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.modal.is-on{opacity:1; visibility:visible}
.modal__bd{position:absolute; inset:0; background:rgba(38,27,20,.66); backdrop-filter:blur(4px)}
.modal__box{
  position:relative; width:min(100%,880px); max-height:92svh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg); border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translateY(40px); opacity:0; transition:transform .5s var(--ease), opacity .4s;
}
.modal.is-on .modal__box{transform:none; opacity:1}
@media(min-width:760px){
  .modal{align-items:center}
  .modal__box{border-radius:var(--r-xl); max-height:88svh}
}
.modal__close{
  position:sticky; top:12px; float:right; margin:12px 12px 0 0; z-index:5;
  width:40px; height:40px; border-radius:50%; background:rgba(234,226,220,.94); backdrop-filter:blur(8px);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.modal__close:hover{background:var(--ink); transform:rotate(90deg)}
.modal__close:hover::before,.modal__close:hover::after{background:#fff}
.modal__close::before,.modal__close::after{content:""; position:absolute; width:15px; height:1.5px; background:var(--ink)}
.modal__close::before{transform:rotate(45deg)}
.modal__close::after{transform:rotate(-45deg)}
.modal__img{width:100%; aspect-ratio:16/8; object-fit:cover}
@media(max-width:600px){.modal__img{aspect-ratio:16/10}}
.modal__body{padding:clamp(20px,3vw,38px)}
.modal__body h3{font-family:var(--ff-d); font-size:clamp(22px,2.6vw,32px); font-weight:500; line-height:1.18; margin-bottom:6px}
.modal__price{
  display:inline-block; padding:7px 16px; border-radius:100px; background:var(--bg-3);
  font-weight:700; font-size:14px; color:var(--accent-d); margin-bottom:20px;
}
.modal__body p{margin-bottom:14px; color:var(--ink-2)}
.modal__inc{margin-top:24px; padding:22px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line)}
.modal__inc h4{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-d); margin-bottom:14px}
.modal__inc li{position:relative; padding-left:26px; font-size:14.5px; line-height:1.55; color:var(--ink-2); margin-bottom:9px}
.modal__inc li::before{
  content:""; position:absolute; left:4px; top:9px; width:9px; height:5px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent); transform:rotate(-45deg);
}

/* ---------- 14. Прайс ---------- */
.price-cat{border-top:1px solid var(--line)}
.price-cat:last-child{border-bottom:1px solid var(--line)}
.price-cat__h{
  width:100%; display:flex; align-items:center; gap:16px; padding:clamp(18px,2.2vw,26px) 0; text-align:left;
}
.price-cat__h h3{font-family:var(--ff-d); font-size:clamp(19px,2.1vw,27px); font-weight:500; flex:1}
.price-cat__n{font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--accent); flex:none}
.price-cat__ic{
  flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; position:relative; transition:all .4s var(--ease);
}
.price-cat__h:hover .price-cat__ic{border-color:var(--accent); background:var(--accent)}
.price-cat__ic::before,.price-cat__ic::after{content:""; position:absolute; background:var(--ink); transition:.4s var(--ease)}
.price-cat__ic::before{width:13px; height:1.5px}
.price-cat__ic::after{width:1.5px; height:13px}
.price-cat__h:hover .price-cat__ic::before,.price-cat__h:hover .price-cat__ic::after{background:#fff}
.price-cat.is-open .price-cat__ic::after{transform:scaleY(0)}
.price-cat__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)}
.price-cat.is-open .price-cat__body{grid-template-rows:1fr}
.price-cat__inner{overflow:hidden}
.price-row{
  display:flex; align-items:baseline; gap:14px; padding:13px 0; border-top:1px dashed var(--line);
  transition:background .3s;
}
.price-row:first-child{border-top:0}
.price-row__n{flex:1; font-size:15.5px; line-height:1.45}
.price-row__n b{font-weight:600}
.price-row__n i{display:block; font-style:normal; font-size:13px; color:var(--ink-3); margin-top:3px}
.price-row__dots{flex:1; min-width:20px; border-bottom:1px dotted var(--line-2); transform:translateY(-4px)}
.price-row__p{flex:none; font-weight:700; font-size:15.5px; color:var(--accent-d); white-space:nowrap}
.price-cat__pad{padding-bottom:clamp(14px,2vw,26px)}
@media(max-width:560px){
  .price-row{flex-wrap:wrap}
  .price-row__dots{display:none}
  .price-row__n{flex:1 1 100%}
  .price-row__p{margin-top:4px}
}

/* ---------- 15. FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item__q{
  width:100%; display:flex; align-items:flex-start; gap:16px; padding:clamp(18px,2.2vw,24px) 0; text-align:left;
}
.faq-item__q h3{flex:1; font-size:clamp(16px,1.5vw,19px); font-weight:600; line-height:1.45; transition:color .3s}
.faq-item__q:hover h3{color:var(--accent-d)}
.faq-item__ic{
  flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2); position:relative;
  transition:all .4s var(--ease); margin-top:1px;
}
.faq-item__ic::before,.faq-item__ic::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--ink); transition:.4s var(--ease);
}
.faq-item__ic::before{width:11px; height:1.5px; transform:translate(-50%,-50%)}
.faq-item__ic::after{width:1.5px; height:11px; transform:translate(-50%,-50%)}
.faq-item__q:hover .faq-item__ic{border-color:var(--accent); background:var(--accent)}
.faq-item__q:hover .faq-item__ic::before,.faq-item__q:hover .faq-item__ic::after{background:#fff}
.faq-item.is-open .faq-item__ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-item.is-open .faq-item__ic{background:var(--accent); border-color:var(--accent)}
.faq-item.is-open .faq-item__ic::before{background:#fff}
.faq-item__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)}
.faq-item.is-open .faq-item__a{grid-template-rows:1fr}
.faq-item__a > div{overflow:hidden}
.faq-item__a p{color:var(--ink-2); margin-bottom:13px; max-width:74ch; font-size:15.5px}
.faq-item__a p:last-child{margin-bottom:0}
.faq-item__pad{padding:0 48px clamp(20px,2.4vw,28px) 0}

/* ---------- 16. Галерея работ ---------- */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.1vw,16px)}
@media(max-width:980px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal__i{
  position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r-m); background:var(--bg-3);
  cursor:zoom-in; display:block;
}
.gal__i img,.gal__i video{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.gal__i:hover img,.gal__i:hover video{transform:scale(1.07)}
.gal__i::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(32,23,17,.45));
  opacity:0; transition:opacity .4s;
}
.gal__i:hover::after{opacity:1}
.gal__i--wide{grid-column:span 2}
.gal__play{
  position:absolute; right:10px; bottom:10px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.86); display:flex; align-items:center; justify-content:center;
}
.gal__play svg{width:13px; height:13px; fill:var(--ink)}

/* ---------- 17. Лайтбокс ---------- */
.lb{
  position:fixed; inset:0; z-index:150; background:rgba(34,24,18,.96);
  display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,48px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lb.is-on{opacity:1; visibility:visible}
.lb__media{max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center}
.lb__media img,.lb__media video{
  max-width:min(100%,1000px); max-height:86svh; width:auto; height:auto; border-radius:var(--r-m);
  box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.94); transition:transform .5s var(--ease);
}
.lb.is-on .lb__media img,.lb.is-on .lb__media video{transform:none}
.lb__btn{
  position:absolute; width:48px; height:48px; border-radius:50%; z-index:3;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .3s, transform .3s;
}
.lb__btn:hover{background:rgba(255,255,255,.2)}
.lb__btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2}
.lb__x{top:clamp(12px,2.4vw,28px); right:clamp(12px,2.4vw,28px)}
.lb__x:hover{transform:rotate(90deg)}
.lb__p{left:clamp(10px,2vw,28px); top:50%; margin-top:-24px}
.lb__n{right:clamp(10px,2vw,28px); top:50%; margin-top:-24px}
.lb__cnt{
  position:absolute; bottom:clamp(12px,2.4vw,28px); left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.6); font-size:13px; letter-spacing:.1em;
}

/* ---------- 18. Отзывы ---------- */
.rate-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,40px);
  padding:clamp(22px,3vw,38px); border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s);
}
.rate-card__big{display:flex; align-items:center; gap:18px; flex:none}
.rate-card__n{font-family:var(--ff-d); font-size:clamp(48px,6vw,72px); line-height:.9; color:var(--accent-d)}
.rate-card__meta{font-size:13.5px; color:var(--ink-2); line-height:1.45}
.rate-card__meta .stars{margin-bottom:6px}
.rate-card__meta .stars svg{width:15px; height:15px}
.rate-card__txt{flex:1; min-width:240px; font-size:15px; color:var(--ink-2)}
.rate-card__txt p{max-width:56ch}
.rate-card__ya{
  display:inline-flex; align-items:center; gap:10px; margin-top:16px; font-weight:600; font-size:14px;
  color:var(--ink); padding:11px 18px 11px 13px; border-radius:100px; border:1px solid var(--line-2);
  background:var(--bg); transition:all .38s var(--ease);
}
.rate-card__ya:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.rate-card__ya .ya-m{
  flex:none; width:26px; height:26px; border-radius:7px; background:#FC3F1D;
  display:flex; align-items:center; justify-content:center;
}
.rate-card__ya .ya-m svg{width:15px; height:15px; fill:#fff}
.rate-card__ya svg.ar{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8;
  transition:transform .38s var(--ease)}
.rate-card__ya:hover svg.ar{transform:translateX(4px)}

.rvgal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px)}
@media(max-width:1000px){.rvgal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.rvgal{grid-template-columns:repeat(2,1fr)}}
.rvgal__i{
  position:relative; border-radius:var(--r-m); overflow:hidden; background:#2B211A;
  cursor:zoom-in; border:1px solid var(--line); aspect-ratio:3/4;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.rvgal__i:hover{transform:translateY(-4px); box-shadow:var(--sh-m)}
.rvgal__i img{width:100%; height:100%; object-fit:contain; object-position:center}
.rvgal__i::after{
  content:"Открыть"; position:absolute; inset:auto 0 0 0; padding:26px 12px 11px; font-size:11.5px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; text-align:center;
  background:linear-gradient(transparent,rgba(32,23,17,.8)); opacity:0; transition:opacity .35s;
}
.rvgal__i:hover::after{opacity:1}

.rv-note{
  margin-top:clamp(20px,3vw,32px); padding:18px 22px; border-radius:var(--r-m);
  background:var(--bg-3); border-left:3px solid var(--accent); font-size:14.5px; color:var(--ink-2);
}

/* ---------- 19. Карточки / фичи ---------- */
.card{
  padding:clamp(22px,2.6vw,34px); border-radius:var(--r-l); background:var(--surface);
  border:1px solid var(--line); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
  height:100%; display:flex; flex-direction:column; gap:12px;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--line-2)}
.card h3{font-family:var(--ff-d); font-size:clamp(18px,1.7vw,23px); font-weight:500; line-height:1.25}
.card p{color:var(--ink-2); font-size:15px}
.card__n{
  font-family:var(--ff-d); font-size:34px; line-height:1; color:var(--accent-l); margin-bottom:2px;
}
.sec--dark .card{background:rgba(255,255,255,.035); border-color:rgba(239,230,222,.11)}
.sec--dark .card:hover{background:rgba(255,255,255,.06); border-color:rgba(239,230,222,.2)}
.sec--dark .card p{color:var(--dark-ink2)}

.fx{display:flex; gap:18px; align-items:flex-start}
.fx__ic{
  flex:none; width:46px; height:46px; border-radius:14px; background:var(--bg-3);
  display:flex; align-items:center; justify-content:center;
}
.fx__ic svg{width:22px; height:22px; stroke:var(--accent-d); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.fx h3{font-size:17px; font-weight:700; margin-bottom:5px; font-family:var(--ff-b)}
.fx p{font-size:14.5px; color:var(--ink-2)}
.sec--dark .fx__ic{background:rgba(255,255,255,.07)}
.sec--dark .fx__ic svg{stroke:var(--accent)}
.sec--dark .fx p{color:var(--dark-ink2)}

/* ---------- 20. Split-блок текст+фото ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,72px); align-items:center}
.split--rev .split__media{order:-1}
/* «Как нас найти»: текста слева немного, поэтому карте отдаём больше ширины.
   minmax(0,…) обязателен — иначе колонку распирает min-content телефона
   (он в nowrap), и доля fr до карты просто не доходит. */
.split--map{grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); gap:clamp(24px,3.4vw,56px)}
.split--map .d2{font-size:clamp(26px,3.2vw,44px)}
/* Телефон меряем в единицах КОЛОНКИ (cqi), а не экрана (vw). Настоящий
   Unbounded заметно шире запасного шрифта, поэтому расчёт по ширине окна
   врал и номер заезжал под карту. 100cqi — это ширина колонки; делим её
   примерно на 12 знаков с запасом, и номер помещается при любом шрифте. */
.split--map .split__col{container-type:inline-size}
.split--map .big-tel{font-size:clamp(22px, 8.1cqi, 44px)}
@media(max-width:900px){
  .split{grid-template-columns:1fr} .split--rev .split__media{order:0}
  .split--map{grid-template-columns:1fr}
}
.split__media{position:relative; border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/5; background:var(--bg-3)}
.split__media img,.split__media video{width:100%; height:100%; object-fit:cover}
.split__media--wide{aspect-ratio:1/1}
.split__tag{
  position:absolute; left:18px; bottom:18px; padding:10px 18px; border-radius:100px;
  background:rgba(234,226,220,.95); backdrop-filter:blur(8px); font-size:12.5px; font-weight:700;
  color:var(--ink); box-shadow:var(--sh-s);
}

/* ---------- 21. Цитата ---------- */
.quote{
  position:relative; padding:clamp(26px,4vw,52px); border-radius:var(--r-l);
  background:var(--bg-3); border:1px solid var(--line-2);
}
.quote::before{
  content:"“"; position:absolute; top:6px; left:22px; font-family:Georgia,serif; font-size:110px;
  color:var(--accent); opacity:.22; line-height:1;
}
.quote p{position:relative; font-family:var(--ff-d); font-weight:300; font-size:clamp(18px,2.1vw,26px); line-height:1.46; letter-spacing:-.02em}
.quote cite{display:block; margin-top:18px; font-style:normal; font-size:13.5px; font-weight:700; letter-spacing:.06em; color:var(--accent-d)}

/* ---------- 22. Тарифы ---------- */
.tar{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); align-items:stretch}
@media(max-width:900px){.tar{grid-template-columns:1fr; max-width:520px; margin-inline:auto}}
.tar__c{
  display:flex; flex-direction:column; padding:clamp(24px,2.8vw,38px); border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--line); position:relative;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tar__c:hover{transform:translateY(-5px); box-shadow:var(--sh-m)}
.tar__c--f{background:var(--dark); color:var(--dark-ink); border-color:var(--dark)}
.tar__c--f .tar__p{color:var(--accent)}
.tar__c--f li{color:var(--dark-ink2)}
.tar__c--f li::before{border-color:var(--accent)}
.tar__badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%); padding:5px 16px; border-radius:100px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
}
.tar__n{font-family:var(--ff-d); font-size:clamp(22px,2.3vw,28px); font-weight:500}
.tar__note{font-size:13px; color:var(--ink-3); margin-top:3px}
.tar__c--f .tar__note{color:var(--dark-ink2)}
.tar__p{font-family:var(--ff-d); font-size:clamp(32px,3.6vw,44px); color:var(--accent-d); margin:16px 0 20px; line-height:1}
.tar__c ul{flex:1; display:flex; flex-direction:column; gap:11px; margin-bottom:26px}
.tar__c li{position:relative; padding-left:26px; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.tar__c li::before{
  content:""; position:absolute; left:3px; top:8px; width:9px; height:5px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent); transform:rotate(-45deg);
}

/* ---------- 23. Программа курса ---------- */
.prog-item{border-bottom:1px solid var(--line)}
.prog-item:first-child{border-top:1px solid var(--line)}
.prog-item__h{width:100%; display:flex; align-items:center; gap:clamp(12px,2vw,26px); padding:clamp(16px,2vw,22px) 0; text-align:left}
.prog-item__n{
  flex:none; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); width:62px;
}
.prog-item__t{flex:1; font-family:var(--ff-d); font-size:clamp(17px,1.8vw,23px); font-weight:500; line-height:1.25}
.prog-item__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)}
.prog-item.is-open .prog-item__a{grid-template-rows:1fr}
.prog-item__a > div{overflow:hidden}
.prog-item ol{counter-reset:p; padding:0 0 clamp(18px,2.4vw,26px) clamp(0px,6vw,88px)}
.prog-item ol li{
  counter-increment:p; position:relative; padding-left:32px; font-size:15px; line-height:1.55;
  color:var(--ink-2); margin-bottom:10px;
}
.prog-item ol li::before{
  content:counter(p,decimal-leading-zero); position:absolute; left:0; top:1px; font-size:11.5px;
  font-weight:700; color:var(--accent); letter-spacing:.04em;
}

/* ---------- 24. Контакты ---------- */
.big-tel{
  white-space:nowrap;
  font-family:var(--ff-d); font-size:clamp(34px,6.4vw,74px); line-height:1; font-weight:400;
  display:inline-block; max-width:100%; transition:color .35s;
}
/* на узких экранах номер не должен распирать страницу */
@media(max-width:560px){.big-tel{font-size:clamp(19px,6.4vw,26px)}}
.big-tel:hover{color:var(--accent-d)}
.metro{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.metro span{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px;
  background:var(--bg-3); font-size:13.5px; font-weight:600;
}
.metro span::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--m,#8C6A55); flex:none}
.metro span[data-line="lublino"]{--m:#B1D332}   /* Люблинско-Дмитровская */
.metro span[data-line="tagansko"]{--m:#8E479C}  /* Таганско-Краснопресненская */
.metro span i{font-style:normal; font-weight:400; color:var(--ink-3)}

.msg{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.msg a{
  display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:var(--r-m);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.msg a:hover{transform:translateY(-3px); box-shadow:var(--sh-m); border-color:var(--line-2)}
.msg__ic{flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center}
.msg__ic svg{width:21px; height:21px; fill:#fff}
.msg__t{font-weight:700; font-size:14.5px; line-height:1.25}
.msg__t i{display:block; font-style:normal; font-size:12.5px; font-weight:400; color:var(--ink-3); margin-top:2px}
.ic-wa{background:#25D366}
.ic-tg{background:#2AABEE}
.ic-ig{background:linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888)}
.ic-vk{background:#0077FF}
.ic-ya{background:#FC3F1D}
.ic-dk{background:var(--accent)}

.map-box{
  position:relative;
  border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line);
  background:var(--bg-3); min-height:420px; max-width:100%; box-shadow:var(--sh-s);
}
/* Замок от «проваливания» колеса. Пока по карте не кликнули, iframe не
   получает событий мыши — колесо прокручивает страницу. Клик включает карту,
   уход курсора (или Esc) выключает обратно. Без JS замка нет — карта живая. */
.js .map-box iframe{pointer-events:none}
.js .map-box.is-live iframe{pointer-events:auto}
.map-box__lock{
  position:absolute; inset:0; z-index:2; display:none;
  align-items:center; justify-content:center; pointer-events:none;
  background:rgba(46,33,26,0); opacity:0;
  transition:opacity .32s var(--ease), background .32s var(--ease);
}
.js .map-box__lock{display:flex}
.js .map-box:hover .map-box__lock{opacity:1; background:rgba(46,33,26,.26)}
.js .map-box.is-live .map-box__lock{opacity:0; background:rgba(46,33,26,0)}
.map-box__lock span{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:100px; background:var(--surface); color:var(--ink);
  font-size:13.5px; font-weight:600; box-shadow:var(--sh-m);
}
.map-box__lock svg{stroke:var(--accent-d)}
@media(hover:none){
  .js .map-box__lock{opacity:1; background:rgba(46,33,26,.22)}
  .js .map-box.is-live .map-box__lock{opacity:0}
}
.map-box iframe{width:100%; height:100%; min-height:560px; border:0; display:block}
/* карта в двухколоночном блоке «Как нас найти».
   min-height здесь обнуляем: вместе с aspect-ratio он задавал бы ширину
   больше колонки и распирал страницу на мобильных. */
.map-box--split{min-height:0; width:100%; aspect-ratio:6/5}
.map-box--split iframe{min-height:0; height:100%}
@media(max-width:900px){.map-box--split{aspect-ratio:4/3}}
/* на телефоне карта в одну колонку — делаем её квадратной, иначе при ширине
   354px остаётся полоска в 266px, на которой ничего толком не разглядеть */
@media(max-width:600px){.map-box--split{aspect-ratio:1/1}}

/* ---------- 25. Формы ---------- */
.form{display:flex; flex-direction:column; gap:14px}
.field{position:relative}
.field input,.field select,.field textarea{
  width:100%; padding:17px 18px 17px; border-radius:var(--r-m); border:1px solid var(--line-2);
  background:var(--surface); font-size:15.5px; transition:border-color .3s, box-shadow .3s;
  appearance:none;
}
.field textarea{min-height:110px; resize:vertical}
.field select{cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B5748' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(174,124,78,.14);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field.is-error input,.field.is-error select{border-color:#C2410C}

.sec--dark .field input,.sec--dark .field select,.sec--dark .field textarea{
  background:rgba(255,255,255,.05); border-color:rgba(239,230,222,.18); color:var(--dark-ink);
}
.sec--dark .field input::placeholder{color:var(--dark-ink2)}

.consent{display:flex; align-items:flex-start; gap:11px; cursor:pointer; margin-top:2px}
.consent input{position:absolute; opacity:0; width:0; height:0}
.consent__box{
  flex:none; width:20px; height:20px; border-radius:5px; border:1.5px solid var(--line-2);
  background:var(--surface); position:relative; margin-top:1px; transition:all .28s var(--ease);
}
.consent__box::after{
  content:""; position:absolute; left:5.5px; top:4px; width:6px; height:10px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg) scale(0);
  transition:transform .28s var(--ease);
}
.consent input:checked + .consent__box{background:var(--accent); border-color:var(--accent)}
.consent input:checked + .consent__box::after{transform:rotate(45deg) scale(1)}
.consent input:focus-visible + .consent__box{outline:2px solid var(--accent); outline-offset:2px}
.consent__txt{font-size:12.8px; line-height:1.5; color:var(--ink-2)}
.consent__txt a{color:var(--accent-d); text-decoration:underline; text-underline-offset:2px}
.sec--dark .consent__box{background:rgba(255,255,255,.06); border-color:rgba(239,230,222,.28)}
.sec--dark .consent__txt{color:var(--dark-ink2)}
.sec--dark .consent__txt a{color:var(--accent)}
.consent.is-error .consent__box{border-color:#C2410C; animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

.form__ok{
  padding:15px 18px; border-radius:var(--r-m); background:#EAF6EC; border:1px solid #BEDFC6;
  color:#1C5B2C; font-size:14.5px; display:none;
}
.form__ok.is-on{display:block}

.cta-box{
  padding:clamp(26px,4vw,56px); border-radius:var(--r-xl); background:var(--dark); color:var(--dark-ink);
  position:relative; overflow:hidden;
}
.cta-box::after{
  content:""; position:absolute; right:-10%; bottom:-40%; width:52%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(174,124,78,.3), transparent 65%); pointer-events:none;
}
.cta-box__grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:center}
@media(max-width:860px){.cta-box__grid{grid-template-columns:1fr}}
.cta-box .d2{color:#fff}
.cta-box .lead{color:var(--dark-ink2)}

/* ---------- 26. Подвал ---------- */
.ftr{background:var(--dark); color:var(--dark-ink); padding-block:clamp(44px,6vw,80px) 28px}
.ftr__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,48px)}
@media(max-width:980px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr__logo{display:block; width:170px; height:auto; margin-bottom:18px}
.ftr h4{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:16px}
.ftr li{margin-bottom:10px}
.ftr a:not(.btn){font-size:14.5px; color:var(--dark-ink2); transition:color .3s}
.ftr a:not(.btn):hover{color:var(--dark-ink)}
.ftr p{font-size:14.5px; color:var(--dark-ink2); margin-bottom:10px}
.ftr__soc{display:flex; gap:10px; margin-top:16px}
.ftr__soc a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(239,230,222,.18);
  display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);
}
.ftr__soc a:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-3px)}
.ftr__soc svg{width:17px; height:17px; fill:var(--dark-ink)}
.ftr__bot{
  margin-top:clamp(32px,4vw,56px); padding-top:22px; border-top:1px solid rgba(239,230,222,.12);
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between;
  font-size:12.5px; color:var(--dark-ink2);
}
.ftr__bot a:not(.btn){font-size:12.5px}
.ftr__legal{font-size:11.5px; line-height:1.6; color:rgba(188,165,146,.72); margin-top:14px}

/* ---------- 27. Cookie ---------- */
.cookie{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:130;
  max-width:640px; margin-inline:auto; padding:20px 22px; border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-l);
  transform:translateY(140%); opacity:0; transition:transform .6s var(--ease), opacity .5s;
}
.cookie.is-on{transform:none; opacity:1}
@media(max-width:1180px){.cookie{bottom:86px}}
.cookie p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin-bottom:14px}
.cookie p a{color:var(--accent-d); text-decoration:underline; text-underline-offset:2px}
.cookie__btns{display:flex; flex-wrap:wrap; gap:9px}

/* ---------- 28. Политика ---------- */
.doc{max-width:860px}
.doc h2{font-family:var(--ff-d); font-size:clamp(21px,2.3vw,28px); font-weight:500; margin:38px 0 14px; scroll-margin-top:100px}
.doc h3{font-size:17px; font-weight:700; margin:24px 0 10px}
.doc p{margin-bottom:13px; color:var(--ink-2); font-size:15.5px}
.doc ul{margin:0 0 16px; padding-left:0}
.doc li{position:relative; padding-left:22px; margin-bottom:8px; color:var(--ink-2); font-size:15.5px; line-height:1.6}
.doc li::before{content:""; position:absolute; left:4px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--accent)}
.doc ol{counter-reset:d; padding-left:0}
.doc ol li{counter-increment:d; padding-left:30px}
.doc ol li::before{content:counter(d)"."; width:auto; height:auto; border-radius:0; background:none;
  color:var(--accent); font-weight:700; font-size:14px; top:0; left:0}
.doc__toc{padding:22px 26px; border-radius:var(--r-m); background:var(--bg-2); border:1px solid var(--line); margin-bottom:30px}
.doc__toc h4{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-d); margin-bottom:12px}
.doc__toc li{padding-left:0; margin-bottom:6px; font-size:14.5px}
.doc__toc li::before{display:none}
.doc__toc a{color:var(--ink-2); transition:color .3s}
.doc__toc a:hover{color:var(--accent-d)}
.doc__rev{font-size:13px; color:var(--ink-3); margin-bottom:8px}

/* ---------- 29. Плашка-маркиза ---------- */
.marq{overflow:hidden; padding-block:clamp(16px,2.1vw,28px); border-block:1px solid var(--line); background:var(--bg-2)}
.marq__t{display:flex; align-items:center; width:max-content; animation:marq 34s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
.marq__t span{
  font-family:var(--ff-d); font-size:clamp(20px,2.6vw,34px); font-weight:500; padding-inline:26px;
  display:inline-flex; align-items:center; gap:26px; white-space:nowrap; color:var(--ink);
}
.marq__t span::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none}
/* кадры работ в строке. Размер задаём и по ширине, и по высоте —
   базовое правило img{height:auto} иначе растянет их по пропорции. */
.marq__i{
  flex:none; width:clamp(76px,9.4vw,122px); height:clamp(56px,7.2vw,94px);
  object-fit:cover; border-radius:16px; margin-inline:4px;
  border:1px solid var(--line-2); box-shadow:var(--sh-s);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.marq:hover .marq__i{transform:scale(1.06); box-shadow:var(--sh-m)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 30. Анимации появления ---------- */
/* без JS контент виден всегда — анимация включается только при .js на  */
.js .rv{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.is-in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}

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

/* ---------- 31. Мелочи ---------- */
.tag-list{display:flex; flex-wrap:wrap; gap:9px}
.tag{
  padding:8px 15px; border-radius:100px; background:var(--bg-3); font-size:13px; font-weight:600;
  color:var(--ink-2); transition:all .35s var(--ease);
}
a.tag:hover{background:var(--ink); color:#fff}
.sec--dark .tag{background:rgba(255,255,255,.07); color:var(--dark-ink2)}

.numline{display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.numline{grid-template-columns:1fr}}
.numline__i{display:flex; gap:16px; align-items:flex-start}
.numline__n{
  flex:none; font-family:var(--ff-d); font-size:clamp(30px,3.4vw,44px); line-height:.9; color:var(--accent-l);
}
.numline__i h3{font-size:16.5px; font-weight:700; margin-bottom:6px}
.numline__i p{font-size:14.5px; color:var(--ink-2)}
.sec--dark .numline__i p{color:var(--dark-ink2)}

.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:11px 19px; border-radius:100px;
  border:1px solid var(--line-2); font-size:14px; font-weight:600;
}
.pill svg{width:16px; height:16px; stroke:var(--accent); fill:none; stroke-width:1.8}
.sec--dark .pill{border-color:rgba(239,230,222,.2)}

.disclaim{font-size:11.5px; line-height:1.55; color:var(--ink-3); margin-top:10px}
.sec--dark .disclaim{color:rgba(188,165,146,.7)}

.hidden{display:none!important}


/* ---------- 32. Список с галочками ---------- */
.chk{display:flex; flex-direction:column; gap:11px}
.chk li{position:relative; padding-left:28px; font-size:15.5px; line-height:1.56; color:var(--ink-2)}
.chk li::before{
  content:""; position:absolute; left:3px; top:9px; width:10px; height:5.5px;
  border-left:1.7px solid var(--accent); border-bottom:1.7px solid var(--accent); transform:rotate(-45deg);
}
.sec--dark .chk li{color:var(--dark-ink2)}
.sec--dark .chk li::before{border-color:var(--accent)}

/* ============================================================================
   33. Слой анимаций и интерактива
   ========================================================================== */

/* ---------- 33.1 Индикатор прокрутки ---------- */
.prog{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:95; pointer-events:none;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
}

/* ---------- 33.2 Заставка при первом заходе ---------- */
.intro{
  position:fixed; inset:0; z-index:200; background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  clip-path:inset(0 0 0 0); transition:clip-path 1s var(--ease);
}
.intro img{width:min(240px,52vw); opacity:0; transform:translateY(14px)}
.intro.is-lit img{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .9s var(--ease)}
.intro.is-out{clip-path:inset(0 0 100% 0)}
.intro.is-out img{opacity:0; transform:translateY(-18px); transition:.5s var(--ease)}

/* ---------- 33.3 Текст: появление по словам из-под маски ---------- */
.sp{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.sp > i{
  display:inline-block; font-style:inherit; transform:translateY(112%) rotate(2.4deg);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.is-in .sp > i, .sp.is-in > i{transform:none}

/* ---------- 33.4 Появление картинок: шторка вместо простого fade ---------- */
.js .mrv{clip-path:inset(0 0 100% 0); transition:clip-path 1.15s cubic-bezier(.16,1,.3,1)}
.js .mrv.is-in{clip-path:inset(0 0 0 0)}
.js .mrv > img,.js .mrv > video{transform:scale(1.16); transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
.js .mrv.is-in > img,.js .mrv.is-in > video{transform:none}

/* ---------- 33.5 Параллакс ---------- */
.par{will-change:transform}

/* ---------- 33.7 Наклон карточек ---------- */
/* .tilt больше не используется: 3D-наклон карточек снят — из-за
   preserve-3d карточка в Safari перекрывала фиксированную шапку */

/* ---------- 33.8 Счётчики и полоса цифр ---------- */
/* Колонки считаются от числа плашек, а не зашиты четвёркой: после того как
   две цифры убрали, три оставшиеся жались к левому краю. */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));
  gap:clamp(14px,2vw,28px);
}
@media(max-width:820px){.stats{grid-template-columns:repeat(auto-fit, minmax(min(200px,100%), 1fr))}}
.stat{
  padding:clamp(20px,2.4vw,30px) clamp(16px,2vw,26px); border-radius:var(--r-l);
  background:rgba(255,255,255,.04); border:1px solid rgba(239,230,222,.1);
  transition:background .45s var(--ease), border-color .45s, transform .45s var(--ease);
}
.stat:hover{background:rgba(255,255,255,.07); border-color:rgba(239,230,222,.2); transform:translateY(-4px)}
.stat__n{
  font-family:var(--ff-d); font-size:clamp(34px,4.4vw,56px); line-height:1; color:var(--accent);
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:2px;
}
.stat__n small{font-size:.44em; font-family:var(--ff-b); font-weight:600; letter-spacing:.01em; margin-left:.14em}
.stat__t{font-size:14px; line-height:1.45; color:var(--dark-ink2); margin-top:11px}

/* ---------- 33.9 Сравнение «до / после» ---------- */
.bacmp{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px)}
@media(max-width:760px){.bacmp{grid-template-columns:1fr; max-width:460px; margin-inline:auto}}
.ba{
  position:relative; aspect-ratio:3/4; border-radius:var(--r-l); overflow:hidden;
  background:var(--dark-2); touch-action:pan-y; user-select:none; cursor:ew-resize;
  box-shadow:var(--sh-m); --p:50%;
}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba__a{clip-path:inset(0 0 0 var(--p))}
.ba__h{
  position:absolute; top:0; bottom:0; left:var(--p); width:2px; background:#fff; z-index:3;
  box-shadow:0 0 0 1px rgba(30,21,16,.18);
}
.ba__k{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:1px;
  box-shadow:0 6px 20px rgba(30,21,16,.3); transition:transform .3s var(--ease);
}
.ba:hover .ba__k,.ba.is-drag .ba__k{transform:translate(-50%,-50%) scale(1.1)}
.ba__k svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2}
.ba__lb{
  position:absolute; top:14px; z-index:2; padding:6px 13px; border-radius:100px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(30,21,16,.58); color:#fff; backdrop-filter:blur(6px);
}
.ba__lb--b{left:14px}
.ba__lb--a{right:14px; background:var(--accent); color:var(--on-accent)}
.ba__lb i{font-style:normal}
.ba:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* Подпись под снимком: дублирует то, что написано на плашках, и остаётся
   единственным носителем названий процедур на узких экранах. */
.ba__cap{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:12px; font-size:13px; font-weight:600; color:var(--ink-2);
}
.ba__cap span{color:var(--accent-d)}
@media(max-width:760px){
  /* две плашки в одну строку уже не помещаются и налезали друг на друга —
     оставляем только «До» и «После», расшифровка уходит в подпись */
  .ba__lb i{display:none}
  .ba__lb{font-size:10px; padding:5px 11px; top:12px}
  .ba__lb--b{left:12px}
  .ba__lb--a{right:12px}
}

/* ---------- 33.10 Зерно на тёмных секциях ---------- */
.sec--dark,.ftr,.cta-box{position:relative}
.hero{position:relative}
.sec--dark::before,.cta-box::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.sec--dark > *,.cta-box__grid{position:relative; z-index:2}

/* ---------- 33.11 Кнопки ---------- */
/* Надпись внутри кнопки не двигается — только сама кнопка приподнимается,
   и снизу вверх наезжает заливка. Никакого слежения за курсором. */
.btn > span{display:inline-block}

/* ---------- 33.12 Бегущая строка со скоростью прокрутки ---------- */
.marq__t{will-change:transform}
.js .marq__t{animation:none}

/* ---------- 33.13 Уважение к настройкам ---------- */
@media(prefers-reduced-motion:reduce){
  .js .mrv{clip-path:none}
  .js .mrv > img,.js .mrv > video{transform:none}
  .sp > i{transform:none}
  .intro{display:none}
  .js .marq__t{animation:marq 42s linear infinite}
}

/* ---------- 33.14 Запасной вид без JavaScript ---------- */
.no-js .cov__s{transform:translate(-50%,-50%); opacity:1}
.no-js .cov__s:not(:first-child){display:none}
.no-js .cov__ui,.no-js .hero__scroll,.no-js .prog{display:none}

/* ---------- 34. Отзывы с Яндекс Карт (официальный виджет) ---------- */
/* Виджет Яндекса рисует карточку шириной около 760px и прижимает её влево.
   Если рамка шире, справа остаётся серая полоса — это фон внутри iframe,
   закрасить его снаружи нельзя. Поэтому просто равняем рамку по карточке. */
.yarev{
  position:relative; max-width:780px; margin-inline:auto;
  border-radius:var(--r-l); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s);
}
/* шапка виджета ≈280px + карточка отзыва ≈210px */
.yarev__frame{position:relative; width:100%; height:700px; background:var(--surface)}
.yarev--tall .yarev__frame{height:920px}
@media(max-width:600px){
  .yarev__frame{height:780px}
  .yarev--tall .yarev__frame{height:1020px}
}
.yarev__frame iframe{width:100%; height:100%; border:0; display:block}
.yarev__ph{
  position:absolute; inset:0; z-index:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:26px; text-align:center;
  color:var(--ink-3); font-size:14px;
}
.yarev__frame iframe{position:relative; z-index:1}
.yarev__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-top:1px solid var(--line); background:var(--bg);
  font-size:12.5px; color:var(--ink-3);
}
.yarev__foot a{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:var(--ink);
}
.yarev__foot a:hover{color:var(--accent-d)}
.yarev__foot .ya-m{
  width:22px; height:22px; border-radius:6px; background:#FC3F1D; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.yarev__foot .ya-m svg{width:13px; height:13px; fill:#fff; stroke:none}

.award{
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:100px;
  background:var(--bg-3); border:1px solid var(--line-2); font-size:13px; font-weight:600; color:var(--ink);
}
.award svg{stroke:var(--accent-d)}
.sec--dark .award{background:rgba(239,230,222,.08); border-color:rgba(239,230,222,.2); color:var(--dark-ink)}
.sec--dark .award svg{stroke:var(--accent)}


/* ---------- 35. Логотип в шапке ---------- */
/* Блик по маске убран по просьбе клиента: в разных браузерах он вёл себя
   по-разному и читался как вторая копия надписи. Осталось спокойное
   увеличение при наведении — на весь логотип, а не на картинку внутри. */
.logo{transition:transform .5s var(--ease)}
.logo:hover{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.logo:hover{transform:none}}

/* ---------- 36. Плавающие кнопки связи (десктоп) ---------- */
/* На ≤1180px их место занимает нижняя панель .tabbar — там дублировать нечего. */
.dock{
  position:fixed; right:22px; bottom:22px; z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.dock.is-on{opacity:1; transform:none; pointer-events:auto}
@media(max-width:1180px){.dock{display:none}}

.dock__b{
  display:inline-flex; align-items:center;
  height:54px; padding-inline:16px; border-radius:100px; white-space:nowrap;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  box-shadow:var(--sh-m);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .3s var(--ease), color .3s var(--ease), padding-inline .45s var(--ease);
}
.dock__b:hover{transform:translateY(-3px); box-shadow:var(--sh-l)}
.dock__b svg{width:21px; height:21px; flex:none; stroke-width:1.7; stroke:currentColor; fill:none}

/* Подпись у кнопки звонка раскрывается по ширине. Ширину измеряет JS и кладёт
   в --dw, поэтому переход идёт ровно на фактическую ширину — без рывка
   и без «пустого» хвоста, как было бы с max-width наугад.
   Отступ между иконкой и подписью живёт внутри подписи: в свёрнутом
   состоянии он схлопывается вместе с ней, и кнопка остаётся круглой. */
.dock__t{
  display:block; width:0; overflow:hidden; opacity:0;
  transition:width .45s var(--ease), opacity .3s var(--ease);
}
.dock__t > span{display:inline-block; white-space:nowrap; padding-left:10px}
.dock__t--open{width:auto; opacity:1}
.dock__b--tel:hover .dock__t,.dock__b--tel:focus-visible .dock__t{width:var(--dw,auto); opacity:1}
.dock__b--book,.dock__b--tel:hover,.dock__b--tel:focus-visible{padding-inline:19px 22px}

.dock__b--book{background:var(--accent); color:var(--on-accent)}
.dock__b--book:hover{background:var(--ink); color:#fff}
.dock__b--tel{background:var(--surface); color:var(--ink); border:1px solid var(--line-2)}
.dock__b--tel:hover{background:var(--ink); color:#fff; border-color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .dock,.dock__b,.dock__t{transition:none}
  .dock__b:hover{transform:none}
}

/* ---------- 37. Окно с промокодом на первый визит ---------- */
.promo{
  position:fixed; inset:0; z-index:135; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(38,26,19,.52); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .4s var(--ease);
}
.promo.is-ready{display:flex}
.promo.is-on{opacity:1}
.promo__box{
  position:relative; width:min(100%, 430px); max-height:calc(100svh - 36px); overflow:auto;
  padding:clamp(24px,3.4vw,34px); border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-l);
  transform:translateY(18px) scale(.98); transition:transform .45s var(--ease);
}
.promo.is-on .promo__box{transform:none}
.promo__x{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink-2);
  background:var(--bg-2); transition:background .3s, color .3s, transform .3s var(--ease);
}
.promo__x:hover{background:var(--ink); color:#fff}
.promo__x svg{width:17px; height:17px; transform:rotate(45deg)}  /* плюс превращаем в крестик */
.promo__tag{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:100px;
  background:var(--bg-2); color:var(--accent-d);
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.promo__tag svg{stroke:var(--accent-d)}
.promo__h{font-family:var(--ff-d); font-weight:400; line-height:1.15; margin-top:14px;
  font-size:clamp(23px,2.4vw,29px); color:var(--ink)}
.promo__p{margin-top:12px; margin-bottom:20px; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.promo__note{margin-top:14px; font-size:11.5px; line-height:1.5; color:var(--ink-3)}
@media(max-width:600px){.promo{padding:14px} .promo__box{max-height:calc(100svh - 28px)}}
@media(prefers-reduced-motion:reduce){
  .promo,.promo__box{transition:none}
}

/* ---------- 38. Карточки скидок на странице лояльности ---------- */
/* Сетка на 6 колонок: три карточки по 2 в первом ряду и две по 3 во втором —
   так пять карточек ложатся ровно, без дырки в конце. */
.offers{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.7vw,22px)}
.offer--wide{grid-column:span 2}
.offer--half{grid-column:span 3}
@media(max-width:1000px){
  .offers{grid-template-columns:repeat(2,1fr)}
  .offer--wide,.offer--half{grid-column:span 1}
}
@media(max-width:640px){
  .offers{grid-template-columns:1fr}
  .offer--wide,.offer--half{grid-column:span 1}
}

.offer{
  display:flex; flex-direction:column;
  padding:clamp(20px,2.2vw,28px); border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
}
.offer:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--line-2)}
.offer__top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.offer__val{
  font-family:var(--ff-d); font-weight:400; line-height:1; color:var(--accent-d);
  font-size:clamp(32px,3.6vw,46px); letter-spacing:-.01em;
}
.offer__ic{
  flex:none; width:42px; height:42px; border-radius:50%; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
}
.offer__ic svg{width:19px; height:19px; stroke:var(--accent-d)}
.offer__h{
  font-family:var(--ff-d); font-weight:500; line-height:1.25; color:var(--ink);
  font-size:clamp(17px,1.35vw,20px); margin-top:16px;
}
.offer__p{font-size:14.5px; line-height:1.55; color:var(--ink-2); margin-top:10px}
.offer__p b{color:var(--ink); font-weight:700}
.offer__c{
  list-style:none; margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:8px;
  border-top:1px solid var(--line); margin-block-start:16px;
}
.offer__c li{position:relative; padding-left:18px; font-size:12.5px; line-height:1.5; color:var(--ink-3)}
.offer__c li::before{
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px;
  border-radius:50%; background:var(--line-2);
}
.offer__c b{color:var(--accent-d); font-weight:700}

/* ---------- 39. Правки страницы обучения ---------- */
/* Процедуры курса — ровно по две в ряд, на телефоне по одной.
   Раньше это был обычный flex-wrap, и плашки вставали рвано: две, одна, одна. */
.pills--2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pills--2 .pill{justify-content:flex-start}
@media(max-width:560px){.pills--2{grid-template-columns:1fr}}

/* Фото с сертификатами сняты вертикально. В рамке 4:3 обрезка по центру
   срезала девушкам головы — переводим в портрет и смещаем кадр вверх. */
.certs .cert{aspect-ratio:3/4}
.certs .cert img{object-position:50% 8%}
@media(max-width:600px){.certs .cert{aspect-ratio:4/5}}

/* ═══════ Карточка записи в блоке «Запишитесь на консультацию» ═══════
   Нужна только на Тильде. Там заявку принимает попап с её собственным
   блоком формы (своя вёрстка к приёмникам Тильды не подключается),
   и на месте формы оставалась одинокая кнопка — правая колонка
   выглядела так, будто что-то не загрузилось. Здесь она собрана
   в осмысленную карточку: что будет после заявки, кнопка и телефон.
   На статической сборке эти правила не используются. */
.cta-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(239,230,222,.18);
  border-radius:var(--r-l); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:16px;
}
.cta-card__tag{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-ink2)}
.cta-card__h{
  font-family:var(--ff-d); font-weight:300; font-size:clamp(20px,1.7vw,25px);
  line-height:1.2; letter-spacing:-.02em; color:#fff; margin:-6px 0 0;
}
.cta-card__list{display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none}
.cta-card__list li{position:relative; padding-left:24px; font-size:14.5px; line-height:1.5; color:var(--dark-ink2)}
.cta-card__list li::before{
  content:""; position:absolute; left:2px; top:.5em; width:9px; height:9px;
  border-radius:50%; border:1px solid var(--accent);
}
.cta-card__or{display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--dark-ink2)}
.cta-card__or::before,.cta-card__or::after{content:""; height:1px; flex:1; background:rgba(239,230,222,.16)}
.cta-card__tel{
  font-family:var(--ff-d); font-weight:300; font-size:clamp(23px,2.3vw,30px);
  line-height:1; letter-spacing:-.02em; color:#fff; transition:color .3s;
}
.cta-card__tel:hover{color:var(--accent-l)}
.cta-card__note{font-size:12.5px; line-height:1.45; color:var(--dark-ink2); margin:0}
@media(max-width:760px){.cta-card{padding:22px; gap:14px}}

/* ═══════════ Окно «как вам удобнее связаться» ═══════════
   Не у всех есть WhatsApp, и не все любят переписку. Кнопка больше
   не тащит человека в конкретное приложение, а даёт выбрать канал.
   Заявка осталась — тихой строкой внизу, для тех, кому проще,
   чтобы перезвонили. Разметка — pick_html() в build.py. */
.pick{
  position:fixed; inset:0; z-index:140; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(38,26,19,.52); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .35s var(--ease);
}
.pick.is-ready{display:flex}
.pick.is-on{opacity:1}
.pick__box{
  position:relative; width:min(100%, 470px); max-height:calc(100svh - 36px); overflow:auto;
  padding:clamp(24px,3.4vw,34px); border-radius:var(--r-l);
  background:var(--bg); border:1px solid var(--line); box-shadow:var(--sh-l);
  transform:translateY(18px) scale(.98); transition:transform .4s var(--ease);
}
.pick.is-on .pick__box{transform:none}
.pick__x{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink-2);
  background:var(--bg-2); transition:background .3s, color .3s;
}
.pick__x:hover{background:var(--ink); color:#fff}
.pick__x svg{width:17px; height:17px; transform:rotate(45deg)}
.pick__h{
  font-family:var(--ff-d); font-weight:300; line-height:1.15; letter-spacing:-.02em;
  font-size:clamp(21px,2.2vw,26px); color:var(--ink); padding-right:34px;
}
.pick__p{font-size:14.5px; line-height:1.5; color:var(--ink-2); margin-top:10px}
.msg--pick{grid-template-columns:1fr; gap:9px; margin-top:20px}
.msg--pick a{padding:13px 16px}
.msg--pick .msg__ic{width:36px; height:36px; border-radius:11px}
.msg--pick .msg__ic svg{width:19px; height:19px}
.ic-max{background:#7A5AF8}
.ic-tel{background:var(--ink-2)}
.pick__note{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.5; color:var(--ink-3);
}
.pick__note a{color:var(--accent-d); text-decoration:underline; text-underline-offset:3px}
.pick__note a:hover{color:var(--ink)}
@media(max-width:520px){.pick__box{padding:22px 18px}}

/* ═══ Кадрирование фото услуг ═══
   Съёмка в студии почти вся со спины, голова у верхнего края кадра.
   Обрезка по центру (умолчание object-fit:cover) срезала её на всех
   фотографиях — клиент видел середину длины волос и пустой потолок.
   Сдвигаем кадр вверх, а на телефоне ещё и делаем его выше:
   там окно услуги во всю ширину, и места под фото достаточно. */
/* Фото услуги показываем ЦЕЛИКОМ. Съёмка вертикальная, 3:4, и любая
   обрезка резала либо голову, либо длину волос — клиент просила, чтобы
   было видно и то и другое. Поэтому object-fit:contain, а пустоту
   по бокам закрывает размытая копия того же кадра (--ph ставит JS).
   На телефоне рамка ровно 3:4 — подложки там не видно вообще. */
.modal__ph{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3)}
.modal__ph::before{
  content:""; position:absolute; inset:0;
  background:var(--ph) center/cover no-repeat;
  filter:blur(28px) saturate(1.08) brightness(.86); transform:scale(1.18);
}
/* img обязан быть позиционирован — иначе ляжет ПОД ::before и мы увидим
   только размытое пятно. Раньше тут были isolation и z-index:-1, и подложка
   пряталась за собственный фон рамки. */
.modal__img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center}
@media(max-width:600px){.modal__ph{aspect-ratio:3/4}}
.svc-card__img img{object-position:50% 20%}
.ic-gis{background:#19AA1E}

/* ═══ Крупные заголовки на невысоких экранах ═══
   Размер считался только от ширины: clamp(…, 7.2vw, 92px) упирается
   в потолок уже на 1278 px, и 14-дюймовый ноутбук получал ровно такой же
   заголовок, как 27-дюймовый монитор, — только высоты у него вдвое меньше.
   На «О нас» заголовок занимал 304 px из 610, и подзаголовок уезжал
   за первый экран. Теперь размер берётся по меньшему из двух измерений:
   на широких и высоких экранах всё как было, на низких — сжимается. */
.d1{font-size:clamp(38px, min(7.2vw, 11.6svh), 92px)}
.d2{font-size:clamp(30px, min(4.6vw, 8svh), 62px)}

/* И убираем лишний воздух в шапке страницы, когда экран низкий */
@media (min-width:1000px) and (max-height:800px){
  .phead{padding-top:calc(var(--hdr) + 40px); padding-bottom:36px}
  .phead h1{margin-top:10px}
  .phead .lead{margin-top:14px}
}

/* ═══ Длинные слова в заголовке на телефоне ═══
   «Политика конфиденциальности» — одно слово в 18 букв. При 38 px оно
   шире экрана 390 px и вылезало за правый край. Уменьшаем кегль на узких
   экранах и разрешаем перенос: сначала по слогам, а если браузер не умеет
   переносить по-русски — жёстким разрывом, лишь бы не за край. */
@media(max-width:600px){
  .d1{
    font-size:clamp(28px, 8vw, 38px);
    hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
  }
}