/* ============ Манэль. Шрифты ============ */
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-cyr-400.woff2)format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-lat-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-cyr-500.woff2)format('woff2');font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-lat-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-cyr-600.woff2)format('woff2');font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-lat-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-cyr-700.woff2)format('woff2');font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-lat-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-cyr-800.woff2)format('woff2');font-weight:800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-lat-800.woff2)format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Playfair;src:url(/assets/fonts/playfair-cyr-500.woff2)format('woff2');font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Playfair;src:url(/assets/fonts/playfair-lat-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Playfair;src:url(/assets/fonts/playfair-cyr-600.woff2)format('woff2');font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Playfair;src:url(/assets/fonts/playfair-lat-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Playfair;src:url(/assets/fonts/playfair-cyr-700.woff2)format('woff2');font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Playfair;src:url(/assets/fonts/playfair-lat-700.woff2)format('woff2');font-weight:700;font-display:swap}

/* Шрифты-заместители под метрики основных.
   Пока грузится Manrope, строку рисует системный шрифт, и она занимает
   другую высоту: у Manrope подъём и спуск 107/30, у Arial 91/21. Из-за этого
   строка рейтингов схлопывалась и тянула за собой весь первый экран.
   Значения замерены на реальных текстах сайта, не подобраны на глаз. */
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:104.4%;ascent-override:102.5%;descent-override:28.7%;line-gap-override:0%}
@font-face{font-family:"Playfair Fallback";src:local("Georgia"),local("Times New Roman"),local("Liberation Serif");
  size-adjust:104.4%;ascent-override:103.4%;descent-override:24%;line-gap-override:0%}

/* ============ Палитра ============ */
:root{
  --ink-900:#1B2116;
  --ink-800:#232B1C;
  --ink-700:#2C3623;
  --ink-600:#3E4535;
  --sage-500:#5A6D35;
  --sage-400:#A8C070;
  --sage-300:#C2D695;
  --sage-200:#DCE9BE;
  --cream:#F6F4EC;
  --paper:#EFEBDF;
  --line:#DAD4C2;
  --text:#23271D;
  --muted:#626957;
  --wood:#8B6F4E;
  /* Пара цветов колеса. Задана здесь один раз: её берут и заливка сектора,
     и точка приза в списке рядом, и проверка читает её со страницы. */
  --wheel-dark:var(--ink-600);
  --wheel-light:var(--sage-200);
  --wheel-dark-ink:#EEF3E0;
  --wheel-light-ink:var(--ink-900);
  --r:14px;
  --wrap:1240px;
  --gut:clamp(18px,4vw,40px);
  --hdr-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--text);
  font-family:Manrope,"Manrope Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* Цифры в заголовочном шрифте.
   Playfair по умолчанию рисует минускульные цифры: 3, 4, 5, 7 и 9 уходят
   под базовую линию, 0, 1 и 2 ниже ростом. В строке «136 отзывов» это
   читается как чужая вставка, хотя шрифт тот же самый.
   Замер отрисовкой, кегль 100 px, чернила глифов: разброс нижних краёв
   15 px и разброс высот 21 px по умолчанию против 1 px и 5 px с
   lining-nums (оставшиеся 5 px это нормальный оверщут круглых 0, 5, 6, 8).
   Поэтому lining-nums стоит везде, где Playfair встречается с цифрами:
   в заголовках, в строке рейтингов, в часах работы, в названии приза
   и в плашках отзывов. Manrope этим не страдает, его трогать не нужно. */
/* Переносы. balance выравнивает строки заголовка по длине и убирает
   последнюю строку из одного слова, pretty делает то же самое мягче
   для абзацев. Запасное поведение отдельного кода не требует: браузер,
   который значения не знает, объявление игнорирует и переносит как раньше
   (Firefox не умеет pretty, Safari до 17.5 не умел balance). Где balance
   не справляется, в самом тексте стоит неразрывный пробел. */
h1,h2,h3{font-family:Playfair,"Playfair Fallback",Georgia,serif;font-weight:600;line-height:1.14;margin:0;letter-spacing:-.01em;
  font-variant-numeric:lining-nums;text-wrap:balance}
h1{font-size:clamp(34px,5vw,60px)}
h2{font-size:clamp(27px,3.4vw,42px)}
h3{font-size:clamp(19px,1.5vw,22px)}
p{margin:0 0 14px;text-wrap:pretty}
a{color:inherit}
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
/* Пиксель Метрики для посетителей без JS. Классом, а не атрибутом style:
   политика безопасности страницы инлайновые стили запрещает. */
.mpixel{position:absolute;left:-9999px;width:1px;height:1px}
.skip{position:absolute;left:-9999px;display:inline-flex;align-items:center;min-height:44px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:8px;
  display:inline-flex;align-items:center;min-height:44px}
.is-hidden{display:none !important}
/* Видно только программам чтения с экрана: подписи таблиц не должны менять вид страницы. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============ Кнопки ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;border-radius:999px;border:1.5px solid transparent;
  background:var(--sage-300);color:var(--ink-900);
  font:inherit;font-weight:700;font-size:15px;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;transition:.18s ease;text-align:center}
.btn:hover{background:var(--sage-400);transform:translateY(-1px)}
.btn:active{transform:none}
.btn--lg{min-height:56px;padding:15px 30px;font-size:16px}
.btn--sm{min-height:44px;padding:9px 20px;font-size:14px}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn--ghost:hover{background:rgba(0,0,0,.06)}

/* ============ Логотип ============ */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--sage-300);min-height:24px}
.logo__mark{width:30px;height:33px;flex:none}
.logo__bar{width:2px;height:30px;background:currentColor;opacity:.75;border-radius:2px}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__name{font-family:Manrope,"Manrope Fallback";font-weight:800;font-size:21px;letter-spacing:.02em;color:#fff}
.logo__sub{font-family:Manrope,"Manrope Fallback";font-weight:500;font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--sage-300);margin-top:5px}

/* ============ Шапка ============ */
.hdr{position:sticky;top:0;z-index:50;background:rgba(27,33,22,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(194,214,149,.16)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:var(--hdr-h)}
.nav{display:flex;gap:clamp(12px,1.7vw,26px);margin-left:auto;align-items:center}
.nav__cta{display:none}
.nav a{color:#E7E9DE;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px;
  padding:6px 4px;border-bottom:1.5px solid transparent;transition:.16s}
.nav a:hover{color:var(--sage-300);border-color:var(--sage-300)}
.hdr__act{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav+.hdr__act{margin-left:0}
.hdr__tel{color:#E7E9DE;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px}
.hdr__tel:hover{color:var(--sage-300)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0}
.burger span{display:block;height:2px;background:var(--sage-300);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ Первый экран ============ */
.hero{background:linear-gradient(160deg,var(--ink-900) 0%,var(--ink-700) 55%,#354028 100%);color:#EFF1E6;
  padding:clamp(46px,6vw,84px) 0 clamp(56px,7vw,96px);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -40% 55%;height:70%;
  background:radial-gradient(closest-side,rgba(168,192,112,.16),transparent 70%);pointer-events:none}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;position:relative;z-index:1}
/* Надстрочная строка. Стоит на <p> в первом экране и на <h2> в блоке
   «О салоне»: там она сама и есть заголовок секции, иначе после снятия
   «Салон мой...» секция осталась бы без h2 и порвала иерархию.
   Поэтому здесь заданы и те свойства, которые у абзаца брались по
   умолчанию, а у h1,h2,h3 переопределены: семейство, интерлиньяж,
   разрядка и поля. Без них h2 приезжал бы Playfair'ом в 1.14 строки. */
.eyeball{font-family:inherit;font-size:14px;font-weight:700;line-height:1.6;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage-300);margin:0 0 16px}
/* Без max-width осознанно. Замер переносов на 1024-2560: с любой заданной
   шириной (7.5em, 9em, 10em) balance даёт четыре строки, и первой стоит
   одинокое «Приходят». Без неё три ровные строки и ни одной из одного
   слова на всех пяти ширинах. Ширину держит колонка сетки. */
/* Исключение из общего balance, поставлено по замеру, а не на вкус.
   На этом заголовке balance оставляет одинокое «Приходят» на шести
   ширинах из двенадцати (320, 360, 375, 390, 430, 1024), pretty на трёх
   (320, 360, 1024), а на 375-430 даёт ровные три строки. */
.hero h1{color:#fff;text-wrap:pretty}
.hero__sub{margin-top:18px;font-size:clamp(16px,1.3vw,18.5px);color:#D5DBC7;max-width:23em}
.proof{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;padding:0;margin:26px 0 0}
.proof li{display:flex;align-items:baseline;gap:8px}
.proof b{font-family:Playfair,"Playfair Fallback";font-variant-numeric:lining-nums;font-size:27px;color:var(--sage-300);font-weight:600}
.proof span{font-size:15.5px;color:#C3CBB2}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__note{margin-top:22px;font-size:16.5px;color:var(--sage-200);
  border-left:2px solid var(--sage-400);padding-left:14px;max-width:22em}
/* Фото не центрируем по колонке, а закрепляем сверху: заголовок на узких
   десктопах меняет число строк, и при центрировании фото ездило вместе с ним. */
.hero__media{position:relative;align-self:start}
/* Кроп героя. Фото вертикальное, 720x955, слот почти квадратный, значит
   режется по высоте. Держим в кадре зелень по потолку сверху, кресла
   и стол-слэб в середине; уходит пол, он ничего не рассказывает.
   26% это доля обрезки, снятая сверху: почти весь низ, почти ничего сверху. */
.hero__media img{width:100%;max-width:520px;margin-inline:auto;aspect-ratio:4/4.35;object-fit:cover;
  object-position:center 26%;border-radius:200px 200px var(--r) var(--r);
  box-shadow:0 30px 70px rgba(0,0,0,.4)}
/* Награды. Раньше блок лежал абсолютом поверх фото и на широких экранах
   уезжал за кадр влево: left:max(0px,calc(50% - 300px)) прижимал его к
   середине страницы, а не к снимку. Теперь это обычная строка в текстовой
   колонке, сразу под цифрами рейтинга. Наложения на фото нет вообще,
   тени тоже: она была нужна, только чтобы плашка не терялась на снимке.
   На узких экранах плашки переносятся на вторую строку сами. */
.hero__badge{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
/* Без nowrap: длинный текст из админки иначе вылезал за экран на 320 px. */
/* Награда это отметка, а не кнопка. Прежде заливка была var(--sage-300),
   ровно та же, что у главной кнопки, и стояла эта пара прямо над ней: три
   светло-зелёные плашки подряд, верхние две читались нажимаемыми.
   Разведено тремя признаками сразу, не одним:
     - заливка приглушена с плотной до 10 процентов;
     - скругление 6 px вместо 999 px, а все кнопки сайта именно круглые,
       так что форма теперь говорит «не кнопка» раньше цвета;
     - начертание светлое по тёмному, а у кнопки наоборот.
   Ни ховера, ни курсора-указателя тут нет и не заводится: это li, не ссылка. */
.hero__badge li{background:rgba(194,214,149,.10);color:var(--sage-200);
  font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:6px 12px;border:1px solid rgba(194,214,149,.35);border-radius:6px;max-width:100%}

/* ============ Полоса фактов ============ */
.facts{background:var(--ink-600);color:#E7E9DE;padding:22px 0}
.facts__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fact{display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:2px solid var(--sage-400)}
.fact b{font-size:17px;font-weight:700}
.fact span{font-size:15px;color:#B7BFA7}

/* ============ Секции ============ */
.sec{padding:clamp(52px,6.5vw,96px) 0}
.sec--cream{background:var(--cream)}
.sec--paper{background:var(--paper)}
.sec--dark{background:var(--ink-800);color:#E9ECE0}
.sec__head{max-width:30em;margin-bottom:clamp(28px,3.4vw,46px)}
.sec__head p{color:var(--muted);font-size:16.5px;margin:14px 0 0}
.sec__head--light p{color:#B7BFA7}
.sec__foot{margin-top:34px;display:flex;justify-content:center}

/* ============ Карточки услуг ============ */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 24px;
  display:flex;flex-direction:column;gap:12px;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(35,39,29,.1);border-color:var(--sage-400)}
.card__top{display:flex;flex-direction:column;gap:8px}
.card__meta{margin:0;font-size:15.5px;color:var(--muted)}
.card__meta b{color:var(--ink-700);font-size:17px;font-weight:800}
/* Только прямой ребёнок. Раньше здесь стояло .card p, и это правило
   (0,1,1) перебивало .card__meta (0,1,0): в файле у метаданных было 15,5,
   а браузер рисовал 14,5. Порядок правил тут не помогает, специфичность
   выше в любом положении. Описание услуги лежит прямо в .card, а .card__meta
   вложен в .card__top, поэтому дочерний комбинатор разводит их точно
   и без гонки за специфичность. */
.card>p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.55}
/* Тёмная карточка идёт последней осознанно: специфичность у неё та же,
   что у правил выше, и стоя перед ними она им проигрывала. */
.card--accent{background:linear-gradient(165deg,#2C3623,#3E4535);color:#E9ECE0;border-color:transparent}
.card--accent h3{color:#fff}
.card--accent p{color:#C6CDB6}
.card--accent .card__meta{color:#C6CDB6}
.card--accent .card__meta b{color:var(--sage-300)}

/* ============ Абонементы ============ */
.subs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
/* Вторая колонка (сертификаты) центрируется по высоте первой.
   У .subs__col нет собственного фона и рамки, поэтому stretch по умолчанию
   ничего не красил, а просто расширял непрозрачную область клика: разница
   между stretch и обычной высотой на экране была не видна. Настоящая
   причина, почему колонка «выглядела пустой», в другом: после того как
   из сертификатов ушли две позиции, список стал в 2,7-3,7 раза короче
   списка абонементов (322px против 519-581px, замерено на 1440 и 1024px),
   и справа от длинного списка слева повисало пустое поле почти во всю
   высоту секции. При стандартном align-items:start (первое правило выше)
   короткая колонка прижата к верху, и пустота остаётся снизу одним
   куском, читается как недоделка. Центрирование делит её на два поля
   сверху и снизу, и колонка выглядит соразмерной, а не забытой.
   На 390px строки идут одна под другой, .subs переходит в одну колонку
   media-запросом ниже, и здесь эта строка уже ни на что не влияет. */
.subs__col+.subs__col{align-self:center}
.subs__col h3{color:#fff;margin-bottom:16px}
.plist{list-style:none;padding:0;margin:0 0 22px}
.plist li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px dashed rgba(194,214,149,.24);font-size:15.5px}
.plist li span{color:#D3D9C6;min-width:0}
/* Цена переносится целиком на новую строку, а не выпихивает строку за экран. */
.plist li b{color:var(--sage-300);font-weight:700;min-width:0}
.subs__btn{width:100%}
.subs__hint{margin:0 0 14px;font-size:15px;color:#98A088}
.subs__note{margin:12px 0 0;font-size:15px;color:#98A088;text-align:center}
/* Заметки под списком абонементов и сертификатов: их по две-три строки,
   и по центру они читались бы рваной лесенкой. Кнопка со своей подписью
   под ней остаётся центрированной, у неё одна строка. */
.subs__note--left{text-align:left}
/* Раньше кнопка шла сразу за списком и отступ ей давал сам список
   (.plist, margin-bottom 22px). Теперь между ними стоит примечание
   про бессрочность сертификатов, и без этой строки текст упирался
   бы в кнопку вплотную. Число то же самое, 22px, чтобы просвет
   над кнопкой не изменился. */
.subs__note--left+.subs__btn{margin-top:22px}

/* ============ Э-сфера ============ */
.esfera{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center}
.esfera__media img{border-radius:var(--r);aspect-ratio:4/4.6;object-fit:cover;width:100%;
  box-shadow:0 20px 46px rgba(35,39,29,.16)}
.esfera__txt h2{margin-bottom:16px}
.esfera__txt p{color:var(--muted);font-size:16px}
.esfera__note{font-weight:700;color:var(--ink-700) !important}
/* Обёртка нужна на узких экранах: длинные строки из админки
   иначе распирают таблицу и уводят всю страницу вбок. */
.minitable__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0;min-width:0}
.minitable{width:100%;border-collapse:collapse;min-width:280px}
.minitable th{text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 10px 10px 0;border-bottom:1px solid var(--line)}
.minitable td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.minitable td:first-child{color:var(--text)}
.minitable td:not(:first-child){font-weight:700;white-space:nowrap}

/* ============ Прайс ============ */
.switch{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:22px}
.switch__b{border:0;background:none;font:inherit;font-weight:700;font-size:15px;color:var(--muted);
  padding:11px 26px;border-radius:999px;cursor:pointer;transition:.18s;min-height:44px}
.switch__b.is-on{background:var(--ink-700);color:#fff}
/* Подсказка, что таблицу можно листать вбок. Белые «крышки» едут вместе
   с содержимым, тени приклеены к краям: тень видна ровно тогда, когда
   в эту сторону ещё есть что прокручивать. Только CSS, без скрипта. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:6px clamp(10px,2vw,22px) 10px;
  background-image:
    linear-gradient(to right,#fff 40%,rgba(255,255,255,0)),
    linear-gradient(to left,#fff 40%,rgba(255,255,255,0)),
    linear-gradient(to right,rgba(35,39,29,.16),rgba(35,39,29,0)),
    linear-gradient(to left,rgba(35,39,29,.16),rgba(35,39,29,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,16px 100%,16px 100%;
  background-attachment:local,local,scroll,scroll}
.tnote--scroll{display:none}
.ptable{width:100%;border-collapse:collapse;min-width:560px}
.ptable th{text-align:right;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:14px 8px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.ptable th:first-child{text-align:left}
.ptable td{text-align:right;padding:13px 8px;border-bottom:1px solid #EDE9DC;font-size:15.5px;
  font-weight:700;white-space:nowrap}
.ptable td:first-child{text-align:left;font-weight:500;color:var(--text)}
.ptable tr:last-child td{border-bottom:0}
.ptable--sm{min-width:0}
.ptable--sm th,.ptable--sm td{padding:11px 4px;font-size:14px}
.ptable--sm td:first-child,.ptable--sm th:first-child{white-space:normal}
.tnote{margin:12px 4px 0;font-size:14.5px;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr) minmax(0,.84fr);gap:16px;margin-top:26px}
.pblock{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px clamp(12px,1.6vw,20px);min-width:0}
.pblock h3{font-size:19px;margin-bottom:12px}
.pblock .tablewrap{border:0;padding:0;border-radius:0}
.pfoot{margin:26px 0 0;font-size:16.5px;color:var(--muted);border-left:2px solid var(--sage-400);padding-left:14px}

/* ============ Акции ============ */
.promos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.promo{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.promo h3{font-size:20px;margin-bottom:10px}
.promo p{margin:0;font-size:16px;color:var(--muted)}
.promo--big{grid-column:span 2;background:linear-gradient(150deg,#2C3623,#465036);color:#E9ECE0;border-color:transparent}
.promo--big h3{color:#fff;font-size:25px}
.promo--big p{color:#C6CDB6;font-size:16px}
/* Условия акции «Приведите друга». Мельче основного текста карточки
   на два пункта и приглушённее его. Селектор из двух классов, а не
   .promo__terms с !important: поле обнуляет правило .promo p (0,1,1),
   и перебить его нужно специфичностью (0,2,0), как это уже сделано
   у .card>p выше.
   Цвет здесь на случай обычной белой карточки: сейчас условия стоят
   на крупной тёмной, и цвет им задаёт правило ниже. #6B7261 на белом
   даёт 4,99:1 при пороге 4,5:1 для 14 px, то есть карточку можно вернуть
   в обычную ячейку, не переподбирая цвет. */
.promo .promo__terms{margin:10px 0 0;font-size:14px;color:#6B7261;line-height:1.5}
/* На крупной тёмной карточке отсчёт другой: там основной текст светлый,
   и приглушать его вниз некуда, #A9B197 на светлом конце градиента #465036
   даёт всего 3,83:1 при пороге 4,5:1. Поэтому цвет тот же, что у соседнего
   абзаца, а мельче условия остаются за счёт кегля. */
.promo--big .promo__terms{color:#C6CDB6}

/* ============ Колесо ============
   Раскладка: слева заголовок, под ним список призов и кнопка, справа само
   колесо на два ряда. На телефоне порядок заголовок -> колесо -> список ->
   кнопка, поэтому левая колонка это два отдельных блока, а не один:
   иначе колесо не встало бы между ними без дублирования разметки. */
.wheelsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"head wheel" "list wheel";
  gap:clamp(18px,2.4vw,30px) clamp(28px,4vw,60px);align-items:start}
.wheelsec__head{grid-area:head}
.wheelsec__aside{grid-area:list}
.wheelsec__head h2{color:#fff;margin-bottom:14px}
.wheelsec__head p{color:#B7BFA7;margin:0;max-width:20em}
.wheelsec__wheel{grid-area:wheel;align-self:center;position:relative;justify-self:center;width:min(460px,88vw);aspect-ratio:1}
/* Обод тоньше и тень мягче: прежние 8 px и 60 px размытия тянули на себя
   всё внимание блока. */
.wheel{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  border:4px solid var(--sage-300);box-shadow:0 14px 34px rgba(0,0,0,.30)}
/* --n это число секторов. Из него считается и шаг, и разворот на полшага,
   поэтому константы 60deg и 30deg в правилах ниже не появляются. script.js
   при загрузке переписывает --n фактическим числом .sector в разметке:
   так CSS и расчёт приза не могут разъехаться. */
.wheel__disc{--n:6;position:absolute;inset:0;transition:transform 4.6s cubic-bezier(.16,.84,.24,1)}
/* Клин ровно 60 градусов: tan(30) * 80 = 46.19, отсюда 3.81% и 96.19%.
   Шире клин, и секторы наезжают друг на друга, уже, и между ними щели. */
/* Полшага в повороте сектора: при turn = 0 наверху приходился шов между
   секторами и стрелка стояла ровно на стыке. Сдвиг на половину шага
   ставит под стрелку середину сектора. Считается из --n, не вписан числом. */
.sector{position:absolute;inset:0;transform:rotate(calc((var(--i) + .5) * (360deg / var(--n))));
  clip-path:polygon(50% 50%, 130% 3.81%, 130% 96.19%);
  display:flex;align-items:center;justify-content:flex-end;padding-right:9%}
/* Номер сектора задаётся здесь, а не атрибутом style в разметке. */
.sector:nth-child(1){--i:0}
.sector:nth-child(2){--i:1}
.sector:nth-child(3){--i:2}
.sector:nth-child(4){--i:3}
.sector:nth-child(5){--i:4}
.sector:nth-child(6){--i:5}
/* Заливка секторов чередуется светлый и тёмный, а не два почти одинаковых
   тёмных: подпись отделяется от фона сама, без тени под текстом.
   Замер по отрисованным пикселям: 8,8:1 на тёмном и 12,9:1 на светлом
   при пороге AA 4,5:1. Пара цветов задана ОДИН раз, отсюда её берут
   и сектор, и точка в списке рядом. */
.sector:nth-child(odd){background:var(--wheel-dark)}
.sector:nth-child(even){background:var(--wheel-light)}
.sector span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  width:30%;text-align:right;font-size:clamp(11px,1.15vw,15px);
  font-weight:700;line-height:1.2;letter-spacing:.01em;
  hyphens:auto;overflow-wrap:anywhere}
.sector:nth-child(odd) span{color:var(--wheel-dark-ink)}
.sector:nth-child(even) span{color:var(--wheel-light-ink)}
/* Сектор, уехавший в левую половину круга, читается вверх ногами.
   Класс проставляет script.js от итогового угла, в разметке его нет. */
.sector--flip span{transform:rotate(180deg);text-align:left}
/* Ступица меньше, и у неё тёмный ободок: теперь она граничит и со светлым
   сектором тоже, а без ободка на светлом просто растворялась. */
.wheel__hub{position:absolute;left:50%;top:50%;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:var(--sage-300);border-radius:50%;
  box-shadow:0 0 0 3px var(--ink-800),0 4px 12px rgba(0,0,0,.32);z-index:3}
.wheel__pin{position:absolute;left:50%;top:-3px;transform:translateX(-50%);z-index:4;
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:18px solid var(--sage-200);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
/* Список призов рядом с колесом. Точка красится той же парой переменных,
   что и сектор, по тому же чередованию nth-child. Волосяной ободок нужен
   тёмной точке: без него она сливается с тёмным фоном секции. */
.prizes{list-style:none;padding:0;margin:0 0 22px;max-width:26em}
.prizes li{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px dashed rgba(194,214,149,.18);font-size:15.5px;color:#D3D9C6;
  text-wrap:pretty}
.prizes li:last-child{border-bottom:0}
/* Ободок держит на себе видимость точки. Заливка остаётся цветом своего
   сектора, её читает проверка wheel, поэтому трогать её нельзя: тёмная
   заливка #3E4535 даёт к фону блока #232B1C всего 1,45:1.
   Прежний ободок был 1 px и полупрозрачный (60%): на круге в 10 px он
   весь уходил в сглаживание, сплошных пикселей не оставалось, замер
   давал 4,49:1 на четырёх точках из восьмидесяти, и глазом точка
   не читалась. Теперь ободок 2 px и непрозрачный: --sage-300 #C2D695
   к фону блока это 9,2:1 при пороге 3:1. Светлой точке он не мешает,
   её заливка #DCE9BE и так даёт 11,47:1. */
.prizes__dot{flex:none;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--sage-300);align-self:center}
.prizes li:nth-child(odd) .prizes__dot{background:var(--wheel-dark)}
.prizes li:nth-child(even) .prizes__dot{background:var(--wheel-light)}
.prize{font-family:Playfair,"Playfair Fallback";font-variant-numeric:lining-nums;font-size:28px;color:var(--ink-700);margin:0 0 12px}

/* ============ Мастера ============ */
.masters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 20px 26px;text-align:center}
.mcard img{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 16px;
  border:3px solid var(--sage-200)}
.mcard h3{font-size:21px;margin-bottom:10px}
.mcard p{margin:0;font-size:15.5px;color:var(--muted)}
.mcard__lvl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px !important}
.tag{display:inline-block;background:var(--ink-700);color:var(--sage-200);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.tag--soft{background:var(--sage-200);color:var(--ink-700)}

/* ============ О салоне ============ */
/* Колонки выровнены по верху: при центрировании текст и сетка фотографий
   разъезжались по-разному на каждой ширине, и блок читался кривым. */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:start}
/* Правила .about__txt h2 здесь больше нет, и это не забывчивость.
   Заголовок «Салон мой, и массаж я делаю сама» снят по просьбе владелицы,
   единственный h2 в колонке теперь надстрочный «О салоне» с классом
   .eyeball. Правило .about__txt h2 (0,1,1) перебивало бы .eyeball (0,1,0)
   и ставило ему чужие 18 px отступа. */
/* Абзацы крупнее и темнее приглушённого: это рассказ владелицы о себе,
   он должен читаться, а не служить подписью к фотографиям.
   Насыщенность не трогаем, остаётся 400: жирным текст быть не должен. */
.about__txt p{color:var(--text);font-size:18px}
/* Надстрочное «О салоне» стало h2, и это меняет, какие правила до него
   доходят. Пока это был <p>, размер и цвет ему задавала не .eyeball (0,1,0),
   а .about__txt p (0,1,1): на экране стояли 16,5 px цветом var(--muted),
   а не 14 px цветом var(--sage-300), как читается в файле. Замер снят
   getComputedStyle до правки: rgb(98,105,87), 16.5px, 700.
   Здесь тот же вид записан прямо, чтобы он не зависел от гонки
   специфичностей. Без этой строки h2 приехал бы светло-зелёным по кремовому,
   1,43:1 при пороге 4,5:1, и набор contrast это ловит. */
.about__txt .eyeball{font-size:16.5px;color:var(--muted)}
.amen{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0 26px}
.amen li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:15px;font-weight:600}
.about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px}
.about__grid img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.about__grid img:nth-child(1){grid-row:span 2;aspect-ratio:3/5}
.about__grid img:nth-child(2){aspect-ratio:4/2.7}
.about__grid img:nth-child(3){aspect-ratio:4/3.4}

/* ============ Отзывы ============ */
.rplates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:22px}
.rplate{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;text-decoration:none;transition:.18s}
.rplate:hover{border-color:var(--sage-400);transform:translateY(-2px)}
.rplate b{font-size:19px;font-family:Playfair,"Playfair Fallback";font-variant-numeric:lining-nums;font-weight:600}
.rplate span{font-size:15px;color:var(--muted)}
.rplate em{font-style:normal;font-size:15px;font-weight:700;color:var(--sage-500);margin-top:6px}
.revs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;
  display:flex;flex-direction:column;gap:14px}
.rev blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--text)}
/* Кавычка и первая строка отзыва. Глиф «„» висит ниже базовой линии и своим
   нижним краем вылезал за строчный бокс: при line-height .6 и отступе 6 px
   просвет по отрисованным пикселям был 3 px на 1440 и 4 px на 390, кавычка
   читалась приклеенной к тексту. CSS-числа тут врут, мерить надо снимок.
   Отступ работает вдвое сильнее line-height: прибавка к line-height уходит
   в просвет только наполовину (половина лидинга), а в высоту карточки
   целиком. Поэтому line-height ужат до .5, а разведены элементы отступом:
   просвет стал 11 px и на 1440, и на 390, карточка выросла на 6,2 px. */
.rev blockquote::before{content:"„";font-family:Playfair,"Playfair Fallback";font-size:38px;color:var(--sage-400);
  display:block;line-height:.5;margin-bottom:16px}
.rev figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.rev figcaption b{font-size:14.5px}
.rev figcaption span{font-size:14px;color:var(--muted)}

/* ============ График ============ */
.sched{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:18px}
.sched__card{background:rgba(255,255,255,.05);border:1px solid rgba(194,214,149,.22);
  border-radius:var(--r);padding:28px clamp(20px,2.4vw,32px)}
.sched__card h3{color:#fff;margin-bottom:12px}
.sched__card p{color:#C6CDB6;font-size:16px}
.sched__big{font-family:Playfair,"Playfair Fallback";font-variant-numeric:lining-nums;font-size:clamp(22px,2.4vw,30px) !important;color:var(--sage-300) !important;margin:0 !important}
.sched__card--accent{background:rgba(194,214,149,.09);border-color:var(--sage-400)}

/* ============ Адрес ============ */
.addr{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3.4vw,48px);align-items:center}
.addr__line{font-size:18px;font-weight:600;margin-top:16px}
.addr__list{list-style:none;padding:0;margin:0 0 24px}
.addr__list li{padding:9px 0 9px 24px;position:relative;color:var(--muted);font-size:15.5px;border-bottom:1px solid var(--line)}
.addr__list li::before{content:"";position:absolute;left:4px;top:17px;width:8px;height:8px;
  border-radius:50%;background:var(--sage-400)}
/* Живая карта Яндекса. До 18.08.2026 здесь стояла нарисованная карточка:
   виджет тянул около мегабайта и три десятка сторонних запросов, и это
   считалось неприемлемым. Владелец кадр санкционировал, поэтому карточка
   заменена настоящей картой, а цена перенесена на ленивую загрузку: пока
   посетитель не долистал до блока, кадр не грузится совсем.
   Габариты и скругление сохранены ровно прежние, clamp(300px,36vw,430px)
   и var(--r), поэтому блок не поехал и сдвиг макета не вырос.
   Высота задана до загрузки кадра, место под карту занято сразу. */
.mapbox{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Подложка на случай, когда Яндекс недоступен. Скрыта атрибутом hidden
   и снимается только скриптом, увидев доказательство, что кадр не открылся.
   Поверх работающей карты она поэтому не появится ни при какой ошибке
   в стилях: без снятого hidden её вообще нет в потоке.
   Правило [hidden] здесь обязательно: display:flex ниже сильнее браузерного
   правила для hidden и без этой строки перебил бы его. */
.mapbox__fallback{display:flex;flex-direction:column;justify-content:center;gap:10px;
  height:clamp(300px,36vw,430px);padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.mapbox__fallback[hidden]{display:none}
.mapbox__fallback b{font-size:clamp(17px,1.7vw,20px);font-weight:800;color:var(--text)}
.mapbox__fallback span{font-size:15.5px;color:var(--muted);line-height:1.5}
.mapbox__frame{display:block;width:100%;height:clamp(300px,36vw,430px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
/* Кадр теперь тоже можно спрятать (откат подложки), не только показать.
   Тот же повод для [hidden], что у подложки строкой выше: без явного
   правила display:block его перебьёт. */
.mapbox__frame[hidden]{display:none}
.mapbox__go{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;padding:10px 20px;
  border-radius:999px;background:var(--ink-700);color:#F1F4E8;font-size:15.5px;font-weight:700;
  text-decoration:none;transition:.18s}
.mapbox__go:hover{background:var(--ink-900)}
.mapbox__go:focus-visible{outline:3px solid var(--sage-500);outline-offset:2px}

/* ============ Запись ============ */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.book__col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,34px)}
.book__col h3{margin-bottom:10px}
.book__col p{color:var(--muted);font-size:15.5px}
.book__col--main{background:linear-gradient(155deg,#2C3623,#455035);color:#E9ECE0;border-color:transparent;
  display:flex;flex-direction:column;justify-content:center}
.book__col--main h3{color:#fff;font-size:clamp(22px,2.2vw,28px)}
.book__col--main p{color:#C6CDB6;font-size:16.5px;margin-bottom:22px}
.book__note{margin:14px 0 0 !important;font-size:13.5px !important}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.form input[type=text],.form input[type=tel],.form select{
  font:inherit;font-size:16px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text);
  min-height:50px;padding:12px 15px;border:1.5px solid var(--line);border-radius:10px;background:#fff;width:100%}
.form input:focus,.form select:focus{outline:2px solid var(--sage-400);outline-offset:1px;border-color:var(--sage-400)}
.check{flex-direction:row !important;align-items:flex-start;gap:10px !important;
  text-transform:none !important;letter-spacing:0 !important;font-size:13.5px !important;font-weight:500 !important;color:var(--muted) !important}
/* Галочка согласия. Это обязательное поле формы, и промахнуться по квадрату
   20x20 легко, особенно на телефоне. Область нажатия расширена до 44x44,
   а видимый квадрат остался прежним, 20x20: внешний вид не меняется.
   Почему именно так, а не ::before на 44px, не padding и не transform:scale -
   проверка меряет getBoundingClientRect() самого input, и ни один из этих
   трёх вариантов его коробку не двигает. Двигает только размер элемента,
   поэтому элемент растянут, а отрицательные margin возвращают соседей
   на прежние места. */
.check input{appearance:none;-webkit-appearance:none;
  width:44px;height:44px;min-width:44px;flex:0 0 44px;
  margin:-11px -12px -12px -12px;padding:0;border:0;background:transparent;cursor:pointer;
  background-repeat:no-repeat;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='%23fff' stroke='%23DAD4C2' stroke-width='1.5'/%3E%3C/svg%3E")}
.check input:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='%235A6D35' stroke='%235A6D35' stroke-width='1.5'/%3E%3Cpath d='M5.5 10.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Рамка фокуса рисуется по видимому квадрату, а не по всей области нажатия. */
.check input:focus-visible{outline:2px solid var(--sage-500);outline-offset:-12px}
/* В режиме высокой контрастности Windows свои цвета важнее наших картинок. */
@media (forced-colors:active){
  .check input{appearance:auto;-webkit-appearance:auto;width:20px;height:20px;min-width:20px;
    flex:0 0 20px;margin-top:1px;background-image:none}
}
.form__msg{margin:0;font-size:14px;font-weight:600;color:var(--sage-500);min-height:0}
.form__msg.is-err{color:#B4453A}
.chan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
/* Плашки каналов связи это ссылки, но выглядели как статичные белые карточки:
   владелец не понял, что по ним можно нажать, и решил, что номер надо
   переписывать руками. Теперь нажимаемость читается с первого взгляда:
   акцентная полоса слева, шеврон справа, заметный ховер со сдвигом и тенью,
   отдельно видимый фокус с клавиатуры. Подписи не тронуты, телефон
   по-прежнему собирает скрипт из data-атрибутов. */
.chan__i{position:relative;display:flex;flex-direction:column;gap:3px;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--sage-400);
  border-radius:var(--r);padding:18px 46px 18px 22px;text-decoration:none;transition:.18s}
/* Шеврон нарисован рамкой: ни картинки, ни шрифта иконок ради него не заводим.
   Он декоративный, содержимого у ::after нет, скринридер его не читает. */
.chan__i::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2.5px solid var(--sage-500);border-top:2.5px solid var(--sage-500);
  transform:translateY(-50%) rotate(45deg);transition:.18s}
.chan__i:hover{border-color:var(--sage-400);border-left-color:var(--sage-500);
  background:var(--cream);transform:translateY(-2px);box-shadow:0 10px 24px rgba(35,39,29,.10)}
.chan__i:hover::after{right:16px;border-right-color:var(--ink-700);border-top-color:var(--ink-700)}
.chan__i:focus-visible{outline:3px solid var(--sage-500);outline-offset:2px}
.chan__i b{font-size:16px}
.chan__i span{font-size:14px;color:var(--muted)}
/* Явный низ тач-зоны на сенсорных экранах: плашка и так выше, но требование
   лучше держать правилом, а не совпадением содержимого. */
@media (pointer:coarse){.chan__i{min-height:44px}}

/* ============ Футер ============ */
.ftr{background:var(--ink-900);color:#C6CDB6;padding:clamp(40px,5vw,64px) 0 26px}
.ftr__in{display:grid;grid-template-columns:1.15fr .8fr 1fr;gap:clamp(24px,3vw,48px)}
.ftr__hours{margin:18px 0 14px;font-size:15px;color:var(--sage-200)}
/* Ссылки подвала. Раньше 44 px они получали только внутри медиазапросов,
   из-за чего планшетная полоса 700-1023 px оставалась с зонами по 21-23 px.
   Теперь правило безусловное: 23, 22 и 17 px это провал WCAG 2.5.8 уровня AA,
   порог которого 24 px, а не только AAA.
   display указан явно у каждого: min-height не применяется к строчному боксу,
   и без display правило молча не сработало бы. */
.ftr__soc{display:flex;gap:16px;flex-wrap:wrap}
.ftr__soc a{display:inline-flex;align-items:center;min-height:24px;
  font-size:14px;font-weight:600;color:var(--sage-300)}
.ftr__nav{display:flex;flex-direction:column;gap:8px}
.ftr__nav a{display:inline-flex;align-items:center;min-height:24px;
  font-size:14.5px;text-decoration:none}
.ftr__nav a:hover{color:var(--sage-300)}
.ftr__req p{margin:0 0 8px;font-size:15px}
.ftr__req a{display:inline-flex;align-items:center;min-height:24px;color:var(--sage-200)}
.ftr__small{font-size:12.5px !important;color:#8B9280;line-height:1.6}
.ftr__bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid rgba(194,214,149,.14);font-size:12.5px;color:#8B9280}
.ftr__bot a{color:var(--sage-300)}

/* ============ Модалки ============ */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal__back{position:absolute;inset:0;background:rgba(20,25,16,.72);backdrop-filter:blur(3px)}
.modal__card{position:relative;background:var(--cream);border-radius:18px;
  width:min(880px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow-y:auto;
  padding:clamp(26px,3vw,40px);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.modal__card--wide{width:min(1120px,calc(100vw - 40px))}
.modal__card--slim{width:min(520px,calc(100vw - 40px))}
.modal__card h2{margin-bottom:18px;font-size:clamp(24px,2.6vw,32px)}
.modal__x{position:absolute;right:14px;top:12px;width:44px;height:44px;border:0;background:none;
  font-size:30px;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.modal__x:hover{background:rgba(0,0,0,.06);color:var(--text)}
.modal__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:start}
.modal__lead{color:var(--muted);font-size:15.5px}
.modal__or{margin:20px 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.modal__chan{display:flex;flex-wrap:wrap;gap:14px}
.modal__chan a{font-weight:700;font-size:15px;color:var(--sage-500)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}

/* ============ Планшет ============ */
@media (max-width:1023px){
  :root{--hdr-h:66px}
  .nav{position:fixed;inset:var(--hdr-h) 0 auto;flex-direction:column;gap:0;background:var(--ink-900);
    padding:10px var(--gut) 22px;border-bottom:1px solid rgba(194,214,149,.16);
    transform:translateY(-140%);transition:transform .25s ease;margin:0}
  .nav.is-open{transform:none}
  .nav a{padding:14px 0;border-bottom:1px solid rgba(194,214,149,.12);font-size:16px}
  .nav__cta{display:flex;width:100%;margin-top:16px}
  .burger{display:flex}
  .hdr__act{margin-left:auto}
  .hero__in{grid-template-columns:1fr;gap:30px}
  .hero__media{order:-1;max-width:440px;margin-inline:auto;width:100%}
  /* Горизонтальная рамка 4/3.2 годилась для горизонтального фото кабинета.
     От вертикального кадра она оставила бы 60% высоты, и стол-слэб выпадал
     бы из кадра целиком. Квадрат оставляет 75%. */
  .hero__media img{aspect-ratio:4/4;border-radius:var(--r);object-position:center 30%}
  .hero__badge{left:14px;bottom:14px;flex-direction:row;flex-wrap:wrap}
  .facts__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cards,.promos,.masters,.revs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .promo--big{grid-column:span 2}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .esfera,.about,.addr,.wheelsec,.sched{grid-template-columns:minmax(0,1fr)}
  /* Колесо встаёт между заголовком и списком: сначала человек видит, о чём
     речь, потом само колесо, потом что можно выиграть, потом кнопку. */
  .wheelsec{grid-template-areas:"head" "wheel" "list";gap:clamp(20px,4vw,30px)}
  .esfera__media{max-width:420px}
  .about__grid{max-width:560px}
  .ftr__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .modal__grid{grid-template-columns:minmax(0,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .ftr__nav a{padding:10px 0;min-height:44px;display:flex;align-items:center}
}

/* ============ Мобильный ============ */
@media (max-width:699px){
  body{font-size:16px}
  .hdr__tel{display:none}
  .subs,.book,.rplates,.chan{grid-template-columns:minmax(0,1fr)}
  .cards,.promos,.masters,.revs{grid-template-columns:minmax(0,1fr)}
  .promo--big{grid-column:auto}
  .facts__in{grid-template-columns:minmax(0,1fr)}
  .fact{flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
  .about__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .about__grid img:nth-child(1){grid-row:auto;grid-column:span 2;aspect-ratio:4/3}
  .ftr__in{grid-template-columns:minmax(0,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .hero__cta .btn{width:100%}
  .switch{width:100%}
  .switch__b{flex:1;padding:11px 10px}
  .modal{padding:10px}
  .modal__card{padding:24px 18px;width:calc(100vw - 20px);max-height:calc(100vh - 20px)}
  .ftr__nav a{padding:11px 0;min-height:44px;display:flex;align-items:center}
  .ftr__soc a{padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
  .ftr__req a{display:inline-flex;align-items:center;min-height:44px}
  .tnote--scroll{display:block}
}
@media (max-width:420px){
  .logo__name{font-size:18px}
  .logo__mark{width:26px;height:29px}
  .hdr__in{gap:10px}
  .hdr__act{gap:8px}
  .hdr__act>.btn--sm{padding:9px 14px;font-size:13px}
  .sector span{width:34%;font-size:10.5px}
  .prizes li{border-bottom:0;padding:7px 0;font-size:15px}
  .prizes__dot{width:8px;height:8px}
}

/* ============ Самые узкие телефоны ============ */
@media (max-width:374px){
  .hdr__act>.btn--sm{display:none}
}

/* Пять карточек в сетке из четырёх колонок оставляли две пустые ячейки.
   Правило только для десктопа: в планшетной сетке из двух колонок
   такой span растянул бы карточки во всю ширину. */
@media (min-width:1024px){
  .promo:nth-child(4),.promo:nth-child(5){grid-column:span 2}
}

/* ============ Широкие экраны ============ */
@media (min-width:1600px){
  :root{--wrap:1340px}
  .hero__media img{max-width:560px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ============ Отдельные страницы: политика и 404 ============ */
.doc{max-width:820px;padding:clamp(40px,6vw,80px) 0}
.doc h1{font-size:clamp(28px,4vw,42px);margin-bottom:24px}
.doc h2{font-size:22px;margin:32px 0 12px}
.doc p,.doc li{color:var(--muted);font-size:16px}
.doc ul{padding-left:20px}
.doc a{color:var(--sage-500);font-weight:600}

.err__in{max-width:640px;padding:clamp(20px,4vw,40px) 0}
.err__in h1{margin:8px 0 16px}
.err__lead{color:var(--muted);font-size:17px;margin-bottom:28px}
.err__cta{display:flex;flex-wrap:wrap;gap:12px}


/* ============ Тач-зоны под палец ============
   Всё выше рассчитано на мышь: порог WCAG 2.5.8 уровня AA это 24 px.
   Пальцу нужно 44, и вот они. Признак взят по типу указателя, а не по ширине
   окна: планшет на 800 px пальцевый, а ноутбук на 1024 мышиный, и ширина
   их не различает. */
@media (pointer: coarse) {
  .ftr__nav{gap:0}
  .ftr__nav a,.ftr__soc a,.ftr__req a,.nav a,.hdr__tel,.logo,.skip:focus{min-height:44px}
  .nav a{min-width:44px}
}