/* ═══════════════════════════════════════════════════════════════
   REMY BOUTIQUE FLORAL — лендинг-визитка
   Палитра и типографика — по брендбуку, отклонения прокомментированы.
   ═══════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* ── Бренд: ровно два цвета ──────────────────────────────────
     Решение заказчика (27.07): сайт живёт в двух красках брендбука,
     они меняются местами — то фон, то текст. Персиковый и чёрный
     из палитры сознательно не используются. Полутона делаются
     ТОЛЬКО прозрачностью этих двух, новых оттенков не заводим. */
  --rose-500:#711339;
  /* «Персиковый бежевый» из брендбука. Взят пипеткой с обложки —
     логотип «Remy» напечатан ровно этим цветом. Раньше здесь стоял
     «цветочный белый» #FFFBF3, он читался как обычный белый. */
  --cream:#F9CEAE;

  /* ── Семантика · молочное поле ───────────────────────────── */
  --bg:var(--cream);
  --surface:transparent;
  --surface-sunken:transparent;
  --text:var(--rose-500);        /* 10.97:1 */
  --text-head:var(--rose-500);
  --text-muted:rgba(113,19,57,.78);   /* 7.4:1 — проходит AAA */
  --border:rgba(113,19,57,.55);       /* 4.7:1 — обводка контрола */
  --divider:rgba(113,19,57,.30);
  --hairline:rgba(113,19,57,.18);     /* только декор */
  --accent:var(--rose-500);
  --accent-hover:rgba(113,19,57,.86);
  --on-accent:var(--cream);
  --focus:var(--rose-500);
  --scrim:rgba(113,19,57,.80);

  /* ── Типографика ─────────────────────────────────────────── */
  /* Заголовки — Shobhika (её кириллица и есть PT Serif, см. брендбук
     стр 11–13). Брендбук набирает «ИСТОРИЯ БЕСКОНЕЧНОЙ ЛЮБВИ» именно
     засечным в капсе — так же, как на баннере со стр 38.
     Science Gothic скачан и лежит в assets/fonts + css/fonts.css:
     чтобы вернуть «евростайл», достаточно поменять эту строку. */
  --ff-display:"PT Serif",Georgia,"Times New Roman",serif;
  --ff-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Шкала на ступень выше исходной по просьбе заказчика: страницу
     читают с телефона в шумном зале. */
  --fs-h1:clamp(2.50rem,1.30rem + 6.00vw,4.75rem);
  --fs-h2:clamp(2.125rem,1.25rem + 4.40vw,3.50rem);
  --fs-h3:clamp(1.875rem,1.15rem + 3.60vw,2.875rem);
  --fs-h4:clamp(1.375rem,0.95rem + 2.20vw,2.00rem);
  --fs-lead:clamp(1.25rem,1.05rem + 0.85vw,1.50rem);
  --fs-body:clamp(1.0625rem,1.00rem + 0.40vw,1.25rem);
  --fs-cta:clamp(1.125rem,1.05rem + 0.45vw,1.3125rem);
  --fs-micro:0.875rem;

  --lh-display:1.06; --lh-h4:1.16; --lh-body:1.58; --lh-ui:1.35;
  --ls-display:-0.02em;  /* = кернинг брендбука −2% */
  --ls-caps:0.08em;
  --fw-med:500; --fw-bold:700;

  /* 12ch, а не 14: на выросшем кегле «бесконечной» иначе не влезает
     в 375px и слово рвётся переносом */
  /* 46ch, а не 34: узкий lead был рассчитан на hero, где строка стояла
     под заголовком. В секциях он оставлял рваную колонку слева и пустоту
     справа — ровно то, на что жаловался заказчик. */
  --maxw-display:12ch; --maxw-lead:46ch; --maxw-text:62ch; --maxw-page:1360px;

  /* ── Пространство ────────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --pad-x:clamp(20px,5vw,64px);
  --section-y:clamp(64px,9vw,160px);
  --gap-panel:clamp(24px,3.5vw,56px);
  --gap-tile:clamp(8px,1.2vw,14px);
  --tap:44px; --row:56px; --ctl:56px;

  /* ── Радиусы: углы прямые, смягчают дуги ─────────────────── */
  --r-hair:2px;
  --r-pill:999px;
  --r-panel:0;
  --arch:999px 999px var(--r-hair) var(--r-hair);

  /* ── Тени: ровно 2 функциональные, тонированные ──────────── */
  --sh-sheet:0 -12px 32px -8px rgba(87,16,41,.18);
  --sh-bar:0 -8px 24px -12px rgba(87,16,41,.14);
  --sh-plate:inset 0 0 0 1px rgba(249,206,174,.14);

  --z-arc:1; --z-content:2; --z-sticky:40; --z-grain:55; --z-sheet:70; --z-skip:90;

  /* ── Движение ────────────────────────────────────────────── */
  --dur-1:120ms; --dur-2:180ms; --dur-3:260ms; --dur-4:360ms; --dur-5:520ms;
  --dur-exit:220ms;
  --ease-out:cubic-bezier(.16,1,.3,1);   /* экспо-out, максимум y = 1 */
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-arc:cubic-bezier(.22,.61,.36,1);
}

/* Те же две краски, поменянные местами */
.on-rose{
  --bg:var(--rose-500);
  --surface:transparent;
  --surface-sunken:transparent;
  --text:var(--cream);           /* 10.97:1 */
  --text-head:var(--cream);
  --text-muted:rgba(249,206,174,.82);  /* 7.7:1 */
  --border:rgba(249,206,174,.55);      /* 4.9:1 */
  --divider:rgba(249,206,174,.30);
  --hairline:rgba(249,206,174,.12);   /* дуги-декор поверх текста были заметнее самого текста */
  --accent:var(--cream);
  --accent-hover:rgba(249,206,174,.88);
  --on-accent:var(--rose-500);
  --focus:var(--cream);
}

@media (prefers-contrast: more){
  :root{ --text-muted:var(--rose-500); --border:var(--rose-500); --divider:rgba(113,19,57,.6) }
  .on-rose{ --text-muted:var(--cream); --border:var(--cream); --divider:rgba(249,206,174,.6) }
}

/* Шрифты подключены отдельным <link> на css/fonts.css в <head>.
   Он генерируется из ответа Google Fonts скриптами tools/fetch_fonts.py
   + tools/subset_fonts.py и лежит локально: на мероприятии не должно
   быть зависимости от чужого CDN. @import здесь не используем — он
   добавил бы лишнюю цепочку запросов и ударил по LCP. */

/* ── Сброс ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 var(--fs-body)/var(--lh-body) var(--ff-ui);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:var(--s-4);top:-100px;z-index:var(--z-skip);
  background:var(--rose-500);color:var(--cream);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);
  text-decoration:none;transition:top var(--dur-2) var(--ease-out);
}
.skip:focus{top:var(--s-4)}

/* ── Типографические классы ────────────────────────────────── */
.h1,.h2,.h3{
  font-family:var(--ff-display); font-weight:var(--fw-bold);
  line-height:var(--lh-display); letter-spacing:var(--ls-display);
  color:var(--text-head); text-wrap:balance; hyphens:none;
}
/* min(100%,…) — страховка от вылета длинного неразрывного слова
   при любом кегле; перенос по-прежнему раскладывает text-wrap:balance. */
.h1{font-size:var(--fs-h1);max-width:min(100%,var(--maxw-display))}
.h2{font-size:var(--fs-h3);max-width:100%}
.h2--wide{font-size:var(--fs-h2);max-width:min(100%,var(--maxw-display))}
.h3{font-size:var(--fs-h4);line-height:var(--lh-h4)}
.lead{font-size:var(--fs-lead);max-width:var(--maxw-lead);color:var(--text)}
.body{max-width:var(--maxw-text);color:var(--text);text-wrap:pretty}
.micro{font-size:var(--fs-micro);color:var(--text-muted);line-height:var(--lh-ui)}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-micro);font-weight:var(--fw-med);
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--text-head);
}
.eyebrow .mark{width:16px;height:16px;flex:none}

.section{padding-block:var(--section-y);position:relative;background:var(--bg);color:var(--text)}
/* width:100% обязателен: .wrap бывает грид-элементом (в .hero), а там
   margin-inline:auto отменяет stretch и схлопывает его до содержимого */
.wrap{width:100%;max-width:var(--maxw-page);margin-inline:auto;padding-inline:var(--pad-x)}

/* ── Кнопки ────────────────────────────────────────────────── */
.btn{
  min-height:var(--ctl);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding-inline:28px;border-radius:var(--r-pill);border:0;
  font-family:var(--ff-ui);font-weight:var(--fw-med);font-size:var(--fs-cta);
  line-height:var(--lh-ui);text-decoration:none;cursor:pointer;
  touch-action:manipulation;text-align:center;
  transition:background-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.btn .mark{width:16px;height:16px;flex:none}
.btn .ic{width:20px;height:20px;flex:none}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn[aria-disabled="true"]:active{transform:none}
@media (hover:hover){
  .btn--primary:hover{background:var(--accent-hover)}
  .btn--ghost:hover{background:rgba(113,19,57,.08)}
  .on-rose .btn--ghost:hover{background:rgba(249,206,174,.14)}
}
.btn-row{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-6)}
.btn-row .btn{width:100%}
@media (min-width:560px){
  .btn-row{flex-direction:row;flex-wrap:wrap}
  .btn-row .btn{width:auto}
}

/* ── Фирменные дуги ────────────────────────────────────────── */
.arc{position:absolute;left:0;right:0;width:100%;height:clamp(48px,7.5vw,110px);
     display:block;z-index:var(--z-arc);pointer-events:none}
.arc--bottom{bottom:-1px}
.arc--top{top:-1px}

/* A3: крестообразное пересечение тонких дуг */
.cross{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:var(--z-arc)}
.cross svg{position:absolute;width:150%;height:150%;left:-25%;top:-20%;
           stroke:var(--hairline);fill:none;stroke-width:1}
.watermark{position:absolute;right:-24px;bottom:-24px;width:120px;height:120px;
           color:rgba(249,206,174,.14);pointer-events:none}

/* ── Grain: один фиксированный слой на всю страницу ────────── */
.grain{
  position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

/* ═══ ВЕРХНЯЯ ПАНЕЛЬ ═════════════════════════════════════════ */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-sticky);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--pad-x);
  padding-top:max(var(--s-3),env(safe-area-inset-top));
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--dur-3) var(--ease-out),
             border-color var(--dur-3) var(--ease-out);
}
.topbar__logo{display:flex;align-items:center;line-height:0;
              min-height:var(--tap);padding-inline:2px}
.topbar__logo img{height:clamp(30px,7.5vw,40px);width:auto;transition:none}
.topbar__nav{display:flex;align-items:center;gap:var(--s-1)}
/* Каталог — главное действие в панели, поэтому это залитая пилюля,
   а не ещё одна иконка: иконка каталога никому не читается однозначно. */
.topbtn{
  display:inline-flex;align-items:center;height:var(--tap);
  padding-inline:var(--s-5);margin-right:var(--s-2);
  border-radius:var(--r-pill);background:var(--cream);color:var(--rose-500);
  font-family:var(--ff-ui);font-weight:var(--fw-med);font-size:var(--fs-micro);
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.topbtn:active{transform:scale(.96)}
.topbtn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.topbar.is-solid .topbtn{background:var(--rose-500);color:var(--cream)}
.topbar.is-solid .topbtn:focus-visible{outline-color:var(--rose-500)}
@media (hover:hover){
  .topbtn:hover{background:rgba(249,206,174,.86)}
  .topbar.is-solid .topbtn:hover{background:rgba(113,19,57,.86)}
}
.iconbtn{
  width:var(--tap);height:var(--tap);display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--cream);
  transition:background-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.iconbtn svg{width:22px;height:22px}
.iconbtn:active{transform:scale(.92)}
.iconbtn:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
@media (hover:hover){ .iconbtn:hover{background:rgba(249,206,174,.16)} }

/* после ухода с hero панель садится на молочный фон и меняет цвета */
.topbar.is-solid{
  background:rgba(249,206,174,.94);border-bottom-color:var(--hairline);
  backdrop-filter:blur(10px);
}
.topbar.is-solid .iconbtn{color:var(--rose-500)}
.topbar.is-solid .iconbtn:focus-visible{outline-color:var(--rose-500)}
@media (hover:hover){ .topbar.is-solid .iconbtn:hover{background:rgba(113,19,57,.08)} }
@supports not (backdrop-filter:blur(1px)){ .topbar.is-solid{background:var(--cream)} }
/* телефон в панели дублирует липкую нижнюю кнопку — на мобиле лишний */
@media (max-width:559px){ .iconbtn--call{display:none} }
/* На 320px панель не сходилась: логотип + пилюля + четыре иконки не
   влезают. Убираем 2ГИС (он есть в шапке отзывов и в футере) и жмём
   пилюлю — «Каталог» важнее карты. */
@media (max-width:399px){
  .iconbtn--map{display:none}
  .topbtn{padding-inline:var(--s-4)}
}

/* ═══ ОБЛОЖКА — один экран ═══════════════════════════════════
   Заказчик: «лендинг короткий, чтобы вниз не крутилось». Поэтому
   главная — ровно один экран: роза, логотип, строка бренда и
   действия. Всё остальное живёт на страницах, куда ведут кнопки. */
.body--cover{min-height:100dvh}
.cover{
  position:relative;isolation:isolate;
  min-height:100dvh;                    /* НЕ 100vh — на мобиле схлопнется */
  display:grid;grid-template-rows:1fr auto;
  padding:calc(var(--tap) + var(--s-6) + env(safe-area-inset-top))
          var(--pad-x)
          calc(var(--s-6) + env(safe-area-inset-bottom));
  color:var(--text);
}
/* без этого длинное неразрывное слово раздувает грид шире экрана */
.cover > *{min-width:0}

.cover__bg{position:absolute;inset:0;z-index:0;display:block}
.cover__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Вуаль лёгкая: заказчик просил, чтобы розу было ХОРОШО видно.
   Текст всё равно читается — лепестки в кадре тёмно-бордовые,
   а под кнопками стоит отдельное затемнение снизу. */
.cover__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(46,2,20,.34) 0%,rgba(46,2,20,0) 26%,
                            rgba(46,2,20,0) 46%,rgba(46,2,20,.52) 100%);
}
.cover__inner,.cover__actions{position:relative;z-index:var(--z-content)}

.cover__inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(14px,2.6vh,26px);
}
.cover__mark{width:clamp(190px,50vw,400px);height:auto}

/* Капс в засечном — так же, как брендбук набирает эту фразу на
   баннере (стр 38) и на витрине (стр 35).
   Размер в vw, а не в clamp по rem: строка обязана остаться в ОДНУ
   линию на любой ширине, а её длина растёт вместе с экраном. */
.cover__title{
  font-family:var(--ff-display);font-weight:var(--fw-bold);
  font-size:clamp(0.8125rem,4.6vw,1.625rem);
  text-transform:uppercase;letter-spacing:.10em;white-space:nowrap;
  color:var(--cream);line-height:1.2;
  /* Строка стояла впритык к логотипу и читалась как его часть */
  margin:clamp(10px,2.4vh,30px) 0 0;
  text-shadow:0 1px 16px rgba(40,0,17,.55);
}

.cover__actions{
  width:100%;max-width:440px;margin-inline:auto;
  display:flex;flex-direction:column;gap:var(--s-3);
  padding-top:clamp(20px,4vh,44px);
}
/* Адрес — такая же полноширинная кнопка, как остальные три,
   просто последняя в списке. */
.cover__hours{
  margin:var(--s-2) 0 0;text-align:center;
  font-size:var(--fs-micro);color:var(--text-muted);
  text-shadow:0 1px 12px rgba(40,0,17,.55);
}

/* Кнопка обложки. Две краски: залитая — молочная с бордовым текстом,
   контурная — молочный контур и молочный текст по розе. */
.abtn{
  min-height:54px;display:flex;align-items:center;justify-content:center;
  gap:var(--s-2);padding:10px var(--s-5);border-radius:var(--r-pill);
  font-family:var(--ff-ui);font-weight:var(--fw-med);font-size:var(--fs-cta);
  line-height:1.2;text-align:center;text-decoration:none;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--cream);box-shadow:inset 0 0 0 1px var(--cream);
  background:rgba(46,2,20,.30);
  transition:background-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.abtn--solid{background:var(--cream);color:var(--rose-500)}  /* 10.97:1 */
.abtn .ic{width:22px;height:22px;flex:none}
.abtn--sm{min-height:46px;font-size:var(--fs-micro);letter-spacing:.04em;
          padding-inline:var(--s-4)}
.abtn:active{transform:scale(.985)}
.abtn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
@media (hover:hover){
  .abtn:hover{background:rgba(249,206,174,.16)}
  .abtn--solid:hover{background:rgba(249,206,174,.86)}
}

/* На широком экране три главных действия встают в ряд — экран
   низкий, а колонка из пяти кнопок его переполняет. */
@media (min-width:900px) and (min-height:560px){
  /* auto, а не 1fr: равные колонки резали «ЗАКАЗАТЬ В WHATSAPP»
     на две строки, пока соседи стояли в одну. */
  .cover__actions{max-width:1040px;display:grid;
                  grid-template-columns:repeat(3,auto);
                  justify-content:center;gap:var(--s-4);align-items:stretch}
  .cover__actions > .abtn{padding-inline:var(--s-7)}
  /* Адрес идёт четвёртой строкой во всю ширину под тремя действиями */
  .abtn--wide{grid-column:1 / -1;justify-self:center;min-width:min(100%,560px)}
  .cover__hours{grid-column:1 / -1}
}

/* Панель обложки: логотипа в ней нет, поэтому прижимаем к правому краю */
.topbar--right{justify-content:flex-end}

/* ═══ ВНУТРЕННЯЯ СТРАНИЦА НА БОРДОВОМ ═════════════════════════ */
.page-rose{background:var(--rose-500)}
.inner{
  position:relative;overflow:hidden;background:var(--rose-500);
  min-height:100dvh;
  padding:calc(var(--tap) + var(--s-7) + env(safe-area-inset-top)) 0
          calc(var(--section-y) + env(safe-area-inset-bottom));
}
.inner__body{position:relative;z-index:2;max-width:820px}

/* Полоска мелких кнопок вместо футера: вся информация живёт
   в кнопках, как просил заказчик. */
.endbar{
  margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:1px solid var(--divider);
  display:flex;flex-wrap:wrap;gap:var(--s-3);
}
.endbar .abtn{flex:1 1 210px}

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ════════════════════════════════════ */
.lang{position:relative}
.lang__btn{
  list-style:none;cursor:pointer;
  height:var(--tap);padding-inline:var(--s-3);
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--border);
  font-size:var(--fs-micro);font-weight:var(--fw-med);color:var(--accent);
  transition:background-color var(--dur-2) var(--ease-out);
}
.lang__btn::-webkit-details-marker{display:none}
.lang__btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.lang__chev{width:16px;height:16px;flex:none;
            transition:transform var(--dur-2) var(--ease-out)}
.lang[open] .lang__chev{transform:rotate(180deg)}
@media (hover:hover){ .lang__btn:hover{background:rgba(249,206,174,.14)} }
.topbar.is-solid .lang__btn:hover,
.lang--dark .lang__btn:hover{background:rgba(113,19,57,.08)}

.lang__menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:var(--z-sheet);
  min-width:132px;padding:6px;margin:0;list-style:none;
  background:var(--rose-500);border-radius:14px;
  box-shadow:0 12px 28px -10px rgba(40,0,17,.55),inset 0 0 0 1px rgba(249,206,174,.28);
}
.lang--dark .lang__menu{background:var(--cream);
  box-shadow:0 12px 28px -10px rgba(40,0,17,.30),inset 0 0 0 1px rgba(113,19,57,.28)}
.lang__menu button{
  width:100%;min-height:var(--tap);padding-inline:var(--s-4);
  display:flex;align-items:center;background:none;border:0;cursor:pointer;
  border-radius:10px;font-size:var(--fs-micro);color:var(--cream);text-align:left;
}
.lang--dark .lang__menu button{color:var(--rose-500)}
.lang__menu button[aria-current="true"]{background:rgba(249,206,174,.18);font-weight:var(--fw-med)}
.lang--dark .lang__menu button[aria-current="true"]{background:rgba(113,19,57,.10)}
.lang__menu button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
@media (hover:hover){
  .lang__menu button:hover{background:rgba(249,206,174,.12)}
  .lang--dark .lang__menu button:hover{background:rgba(113,19,57,.07)}
}

/* ═══ ТРИПТИХ ════════════════════════════════════════════════ */
.choice{
  display:grid;gap:var(--gap-panel);grid-template-columns:minmax(0,1fr);
  grid-template-areas:"gallery" "cities" "vip";
  max-width:var(--maxw-page);margin-inline:auto;padding:var(--section-y) var(--pad-x);
}
/* min-width:0 обязателен: у грид-элемента по умолчанию min-width:auto,
   он не сжимается ниже ширины содержимого и вся колонка уезжает вправо */
.choice > *{min-width:0}
#gallery{grid-area:gallery} #cities{grid-area:cities} #vip{grid-area:vip}
/* Десктоп: галерея занимает всю ширину сверху, под ней две колонки —
   звёздная слева, города справа. Прежний триптих из трёх колонок давал
   рваные низы: города кончались рано и справа зияла пустота, а звёздная
   ужималась до ~285px, где рвался текст и кнопки переносились. */
@media (min-width:1024px){
  .choice{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    grid-template-areas:
      "gallery gallery"
      "vip     cities";
    align-items:start;
    row-gap:var(--section-y);
  }
  /* панель заказа едет за читателем, пока он читает длинную левую колонку */
  #cities{position:sticky;top:calc(var(--tap) + var(--s-6));align-self:start}
}

/* ── Каталог: карусель ─────────────────────────────────────────
   Заказчик просил «просто крутить вправо-влево и выбирать».
   Поэтому лента со снап-прокруткой, а в карточке только кадр
   и цена — ни названия, ни подписи «заказать». */
.cards{
  display:flex;gap:var(--gap-tile);margin-top:var(--s-6);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;
  /* лента упирается в края экрана, а не в поля страницы —
     так видно, что справа есть продолжение */
  margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);
  scroll-padding-inline:var(--pad-x);
}
.cards::-webkit-scrollbar{display:none}
.cards::after{content:"";flex:0 0 var(--s-4)}

.card{
  flex:0 0 clamp(220px,68vw,320px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:var(--s-3);
  text-decoration:none;color:var(--text);min-width:0;
}
@media (min-width:900px){ .card{flex:0 0 300px} }
.card__img{
  display:block;position:relative;overflow:hidden;aspect-ratio:1/1;
  border-radius:var(--r-hair);background:var(--surface-sunken) center/cover;
  box-shadow:var(--sh-plate);
}
.card__img img{width:100%;height:100%;object-fit:cover;display:block;
               transition:transform var(--dur-5) var(--ease-out)}
.card__price{
  font-size:var(--fs-lead);font-weight:var(--fw-med);color:var(--text);
  text-align:center;
}
.card:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.card:active .card__img img{transform:scale(1.02)}
@media (hover:hover){ .card:hover .card__img img{transform:scale(1.04)} }

/* Стрелки. Прячем там, где есть тач: на телефоне листают пальцем,
   и кнопки только съедают место. */
.rail-nav{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .rail-nav{display:flex;gap:var(--s-2);margin-top:var(--s-5);justify-content:flex-end}
  .rail-nav button{
    width:48px;height:48px;display:grid;place-items:center;cursor:pointer;
    background:transparent;border:0;border-radius:var(--r-pill);
    color:var(--accent);box-shadow:inset 0 0 0 1px var(--border);
    transition:background-color var(--dur-2) var(--ease-out);
  }
  .rail-nav button:hover{background:rgba(113,19,57,.08)}
  .rail-nav button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .rail-nav svg{width:22px;height:22px}
  .rail-nav .prev svg{transform:rotate(90deg)}
  .rail-nav .next svg{transform:rotate(-90deg)}
}

/* Цена — обещание, поэтому рядом всегда стоит оговорка. */
.cards-note{margin-top:var(--s-5);font-size:var(--fs-micro);color:var(--text-muted);
            display:flex;gap:var(--s-2);align-items:flex-start;max-width:62ch}
.cards-note .mark{width:16px;height:16px;flex:none;margin-top:3px}

/* ── Страница каталога ─────────────────────────────────────────
   Hero тут нет, поэтому фиксированная панель должна получить
   собственный отступ — иначе она накрывает заголовок. */
.cat-main{padding-top:calc(var(--tap) + var(--s-5) + env(safe-area-inset-top))}
.cat-head{padding-bottom:var(--s-7)}
/* Кегль главной обложки на служебной странице избыточен */
.h1--cat{font-size:var(--fs-h2);max-width:16ch;margin-top:var(--s-3)}

/* ── Панель (города / доверие) ─────────────────────────────── */
.panel{
  background:var(--surface-sunken);border-radius:var(--r-panel);
  box-shadow:inset 0 0 0 1px var(--hairline);padding:var(--s-6);
}
.lbl{display:block;font-size:var(--fs-micro);font-weight:var(--fw-med);
     letter-spacing:var(--ls-caps);text-transform:uppercase;
     color:var(--text-muted);margin-bottom:var(--s-2)}
.ctl{
  width:100%;min-height:var(--ctl);padding:0 var(--s-5);
  background:var(--surface);color:var(--text);
  border:0;box-shadow:inset 0 0 0 1px var(--border);
  border-radius:var(--r-hair);font-size:var(--fs-body);cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23711339' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;
  transition:box-shadow var(--dur-2) var(--ease-out);
}
/* кнопка-триггер шита должна выглядеть как select, а не как кнопка */
button.ctl{text-align:left;display:flex;align-items:center}
/* .sr-only объявлен выше .ctl, специфичность у них одинаковая — и
   width:100% из .ctl побеждал. Спрятанный нативный select оставался
   во всю ширину, торчал за правый край и растягивал страницу на 11px. */
select.ctl.sr-only{width:1px;min-height:0;height:1px;padding:0}
.ctl:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (hover:hover){ .ctl:hover{box-shadow:inset 0 0 0 1px var(--accent)} }
.note{margin-top:var(--s-3);font-size:var(--fs-micro);color:var(--text-muted);
      display:flex;gap:var(--s-2);align-items:flex-start;min-height:3em}
.note .mark{width:16px;height:16px;flex:none;margin-top:2px}
.alt-links{margin-top:var(--s-4);font-size:var(--fs-micro);color:var(--text-muted)}
/* Резервные каналы — это запасной CTA, а не ссылка в тексте. Тянем
   тап-зону до 44px вертикали, не раздвигая строку: padding + отрицательный
   margin. Формально WCAG даёт исключение inline-ссылкам, но промахнуться
   по «Позвонить» на мероприятии дороже, чем соблюсти букву. */
.tappable{
  display:inline-block;color:var(--accent);text-underline-offset:3px;
  padding-block:14px;margin-block:-14px;
}

/* ── VIP-доставка ──────────────────────────────────────────────
   Сплошное бордовое поле без фотографии: услуги ещё нет, и любой
   кадр в ней обещал бы конкретного человека. Цвет бренда сам делает
   блок заметным — это единственная залитая панель на странице. */
.vip{
  background:var(--rose-500);color:var(--text);padding:var(--s-7) var(--s-6);
  position:relative;overflow:hidden;border-radius:var(--r-panel);isolation:isolate;
}
.vip > :not(.cross):not(.watermark){position:relative;z-index:2}
/* min-height, а не height: при выросшем кегле длинная надпись
   переносилась на вторую строку и вылезала за пилюлю. */
.chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:30px;padding:5px var(--s-4);border-radius:var(--r-pill);
  background:var(--cream);color:var(--rose-500);   /* 7.80:1 */
  font-size:var(--fs-micro);font-weight:var(--fw-med);letter-spacing:var(--ls-caps);
  text-transform:uppercase;line-height:1.25;text-align:left;
}
.chip__dot{width:6px;height:6px;flex:none;border-radius:50%;background:currentColor;
           animation:pulse 2800ms ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

.steps{margin-top:var(--s-6);display:grid;gap:var(--s-4)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start}
.step__n{font-family:var(--ff-ui);font-weight:var(--fw-med);font-size:var(--fs-micro);
         color:var(--text-head);letter-spacing:var(--ls-caps);padding-top:3px}
.step b{display:block;color:var(--text-head);font-weight:var(--fw-med)}
.step span{font-size:var(--fs-micro);color:var(--text-muted)}

.waitlist{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--divider)}
.waitlist__row{display:flex;flex-direction:column;gap:var(--s-3)}
@media (min-width:520px){ .waitlist__row{flex-direction:row} .waitlist__row .btn{flex:none} }
.field{
  flex:1;min-height:var(--ctl);padding:0 var(--s-5);
  background:transparent;color:var(--text);border:0;border-radius:var(--r-hair);
  box-shadow:inset 0 0 0 1px var(--border);font-size:var(--fs-body);
}
.field::placeholder{color:var(--text-muted);opacity:.8}
.field:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ── Доверие ───────────────────────────────────────────────── */
/* Доверие подано строкой, а не сеткой одинаковых карточек со статистикой:
   «большая цифра + мелкая подпись» ×4 — самый узнаваемый SaaS-штамп.
   Рейтинг работает якорем, остальное течёт текстом со знаком-разделителем. */
/* ── Фирменные носители и сертификат ───────────────────────────
   Мокапы из брендбука сняты на персиковом фоне, поэтому секция
   идёт на молочном: персиковые плашки читаются как единый набор. */
.brandwrap{background:var(--bg)}

/* На мобиле — лента с горизонтальным скроллом: сеткой семь носителей
   добавляли странице ~800px высоты, а листать их приятнее.
   На десктопе разворачиваются в сетку. */
.packs{
  display:flex;gap:var(--gap-tile);margin-top:var(--s-6);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;
  margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);
}
.packs::-webkit-scrollbar{display:none}
.packs::after{content:"";flex:0 0 var(--s-4)}
.packs .pack{flex:0 0 clamp(180px,52vw,240px);scroll-snap-align:start}
@media (min-width:860px){
  .packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
         overflow:visible;margin-inline:0;padding-inline:0}
  .packs::after{display:none}
  .packs .pack{flex:none}
}
.pack{
  position:relative;overflow:hidden;border-radius:var(--r-hair);
  background:rgba(113,19,57,.10) center/cover;aspect-ratio:1/1;
  box-shadow:inset 0 0 0 1px rgba(113,19,57,.10);
}
.pack img{width:100%;height:100%;object-fit:cover;display:block}
/* конус вертикальный — на десктопе даём ему двойную высоту */
@media (min-width:860px){ .packs .pack:first-child{grid-row:span 2;aspect-ratio:auto} }

.cert{
  margin-top:var(--s-7);display:grid;gap:var(--gap-panel);
  grid-template-columns:minmax(0,1fr);align-items:center;
  background:var(--surface);border-radius:var(--r-hair);
  box-shadow:inset 0 0 0 1px var(--border);padding:var(--s-5);
}
@media (min-width:860px){
  .cert{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:var(--s-6)}
}
.cert__img{display:block;border-radius:var(--r-hair);overflow:hidden}
.cert__img img{width:100%;height:auto;display:block}
.cert__body .btn-row{margin-top:var(--s-5)}

/* ── Отзывы 2ГИС ───────────────────────────────────────────────
   Зелёный здесь — единственный цвет вне палитры бренда, и это
   осознанно: это не декор, а знак стороннего источника. Узнаваемость
   2ГИС и есть аргумент доверия, в бордовом он бы её потерял.
   Зелёный заперт внутри бейджа и нигде больше не появляется. */
.reviews{
  display:grid;gap:var(--s-3);margin-top:var(--s-6);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){ .reviews{grid-template-columns:repeat(3,minmax(0,1fr))} }

.rev{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-5);background:var(--surface);border-radius:var(--r-hair);
  box-shadow:inset 0 0 0 1px var(--hairline);
  text-decoration:none;color:inherit;
}
/* Цитата — чужая речь, поэтому не заголовочным: расширенный Black
   превращал бы отзыв клиента в лозунг. */
.rev p{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-lead);
       color:var(--text-head);line-height:1.35;text-wrap:pretty;flex:1}
.rev cite{display:flex;align-items:center;gap:var(--s-2);
          font-style:normal;font-size:var(--fs-micro);color:var(--text-muted)}

.gis__logo{
  display:inline-flex;align-items:center;justify-content:center;
  /* Фирменный зелёный 2ГИС #19AA1E с белым текстом даёт 3.08:1 — ниже AA.
     Затемнён до проходного: узнаваемость сохраняется, читаемость чинится. */
  background:#0F7D17;color:#fff;font-family:var(--ff-ui);font-weight:var(--fw-bold);
  font-size:0.875rem;letter-spacing:.01em;line-height:1;
  padding:6px 9px;border-radius:5px;
}
.gis__logo--sm{font-size:0.6875rem;padding:4px 6px;border-radius:4px}

.stars5{display:inline-flex;gap:2px;color:#F5A623}
.stars5 svg{width:16px;height:16px;display:block}

.rev--score{gap:var(--s-2);transition:box-shadow var(--dur-2) var(--ease-out)}
.rev--score .rev__num{
  font-family:var(--ff-display);font-weight:900;font-stretch:150%;
  font-style:oblique 9deg;
  font-size:clamp(2.5rem,1.9rem + 2.8vw,3.25rem);line-height:1;
  letter-spacing:var(--ls-display);color:var(--text-head);
}
.rev--score .rev__sub{font-size:var(--fs-micro);color:var(--text-muted)}
.rev--score .rev__link{margin-top:auto;font-size:var(--fs-micro);
                       font-weight:var(--fw-med);color:var(--accent)}
.rev--score:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (hover:hover){
  .rev--score:hover{box-shadow:inset 0 0 0 1px var(--border)}
  .rev--score:hover .rev__link{text-decoration:underline;text-underline-offset:3px}
}

.facts-line{
  margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  font-size:var(--fs-body);color:var(--text);
}
/* На узком экране пункты и так переносятся по одному в строку —
   разделитель повисает в конце строки сиротой, поэтому прячем. */
.facts-line .mark{display:none;width:16px;height:16px;color:var(--divider);flex:none}
@media (min-width:900px){ .facts-line .mark{display:block} }
.facts-line a{color:inherit;text-underline-offset:3px;
              display:inline-block;padding-block:12px;margin-block:-12px}

.quotes{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
@media (min-width:760px){ .quotes{grid-template-columns:1fr 1fr} }
/* без border-left: цитату открывает фирменный знак */
.quote{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start}
.quote .mark{width:16px;height:16px;color:var(--divider);margin-top:.55em;flex:none}
.quote p{font-family:var(--ff-display);font-size:var(--fs-lead);color:var(--text-head);
         line-height:1.35;text-wrap:pretty}
.quote cite{display:block;margin-top:var(--s-2);font-size:var(--fs-micro);
            color:var(--text-muted);font-style:normal}

/* ── Контакты / футер ──────────────────────────────────────── */
.channels{display:grid;gap:var(--s-3);grid-template-columns:1fr;margin-top:var(--s-6)}
@media (min-width:560px){ .channels{grid-template-columns:1fr 1fr} }
.channel{
  min-height:72px;display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);text-decoration:none;color:var(--text);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);
  border-radius:var(--r-hair);
  transition:background-color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.channel__ic{flex:none;width:28px;height:28px;color:var(--accent)}
.channel b{display:block;color:var(--text-head);font-weight:var(--fw-med)}
.channel span{display:block;font-size:var(--fs-micro);color:var(--text-muted)}
.channel:active{transform:scale(.99)}
.channel:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (hover:hover){ .channel:hover{background:rgba(249,206,174,.12)} }

.foot{margin-top:var(--s-8);display:grid;gap:var(--s-6)}
@media (min-width:760px){ .foot{grid-template-columns:repeat(3,1fr)} }
.foot h3{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
         color:var(--text-muted);font-family:var(--ff-ui);font-weight:var(--fw-med);margin-bottom:var(--s-2)}
.foot a{color:var(--text);text-underline-offset:3px}
.foot__legal{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--divider)}

/* ── Липкая панель ─────────────────────────────────────────── */
.cta-bar{
  position:fixed;inset:auto 0 0 0;z-index:var(--z-sticky);
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--pad-x) max(var(--s-3),env(safe-area-inset-bottom));
  background:rgba(249,206,174,.92);backdrop-filter:blur(10px);
  box-shadow:var(--sh-bar);border-top:1px solid var(--hairline);
  transform:translateY(110%);opacity:0;will-change:transform;
  transition:transform var(--dur-4) var(--ease-out),opacity var(--dur-4) var(--ease-out);
}
.cta-bar.is-in{transform:none;opacity:1}
.cta-bar__ctx{flex:1;min-width:0;font-size:var(--fs-micro);color:var(--text-muted);
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-bar .btn{min-height:var(--tap);padding-inline:var(--s-5);font-size:var(--fs-micro)}
@supports not (backdrop-filter:blur(1px)){ .cta-bar{background:var(--cream)} }
@media (min-width:1024px){ .cta-bar{display:none} }

/* ── Bottom sheet ──────────────────────────────────────────── */
dialog.sheet{
  position:fixed;inset:auto 0 0 0;width:100%;max-width:640px;margin-inline:auto;
  max-height:88dvh;border:0;padding:0;background:var(--cream);color:var(--rose-500);
  border-radius:24px 24px 0 0;box-shadow:var(--sh-sheet);
  overscroll-behavior:contain;z-index:var(--z-sheet);
}
dialog.sheet::backdrop{background:var(--scrim)}
.sheet__head{position:sticky;top:0;background:var(--cream);padding:var(--s-3) var(--s-5) var(--s-4);
             border-bottom:1px solid var(--hairline);z-index:2}
.sheet__grip{width:40px;height:4px;border-radius:var(--r-pill);background:rgba(113,19,57,.35);
             margin:0 auto var(--s-4)}
.sheet__title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.sheet__title h3{font-family:var(--ff-ui);font-weight:var(--fw-bold);font-size:1.25rem;color:var(--rose-500)}
.sheet__close{width:44px;height:44px;display:grid;place-items:center;background:none;
              border:0;border-radius:50%;cursor:pointer;color:var(--rose-500)}
.sheet__close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sheet__search{width:100%;min-height:48px;margin-top:var(--s-3);padding:0 var(--s-4);
               background:transparent;border:0;box-shadow:inset 0 0 0 1px rgba(113,19,57,.55);
               border-radius:var(--r-hair);font-size:var(--fs-body)}
.sheet__search:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sheet__list{overflow-y:auto;max-height:calc(88dvh - 150px);padding-bottom:var(--s-5)}
.grp{padding:var(--s-5) var(--s-5) var(--s-2);font-size:var(--fs-micro);
     letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.opt{
  width:100%;min-height:var(--row);display:flex;align-items:center;gap:var(--s-3);
  padding:0 var(--s-5);background:none;border:0;cursor:pointer;text-align:left;
  border-bottom:1px solid rgba(113,19,57,.16);touch-action:manipulation;color:var(--rose-500);
}
.opt:last-child{border-bottom:0}
.opt__name{flex:1}
.opt__chip{font-size:var(--fs-micro);padding:3px var(--s-2);border-radius:var(--r-pill)}
.opt__chip--now{background:var(--rose-500);color:var(--cream)}
.opt__chip--ask{box-shadow:inset 0 0 0 1px rgba(113,19,57,.40);color:var(--text-muted)}
/* без боковой полоски: выбранное состояние уже несут фон и галка,
   а цветной border-left на пункте списка — типовой AI-приём */
.opt[aria-selected="true"]{background:rgba(113,19,57,.09)}
.opt:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.opt__check{width:24px;height:24px;color:var(--rose-500);opacity:0;transform:scale(.8);
            transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.opt[aria-selected="true"] .opt__check{opacity:1;transform:none}
.sheet__empty{padding:var(--s-7) var(--s-5);text-align:center;color:var(--text-muted)}

/* ── Reveal: базовое состояние = финальное (иначе FOUC) ────── */
.reveal{opacity:1;transform:none;filter:none}
html.js:not(.rm) .reveal{opacity:0;transform:translateY(12px);filter:blur(3px)}
html.js:not(.rm) .reveal.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity var(--dur-4) var(--ease-out),
             transform var(--dur-4) var(--ease-out),
             filter var(--dur-4) var(--ease-out);
}

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