/* Bali Open Tour — дизайн-система сайта. Реализация DESIGN.md.
   Порядок файла: шрифт → токены → база → контейнер и сетка → кнопки → шапка и меню →
   Hero → секции главной → общие компоненты внутренних страниц → подвал → плавашки → адаптив.
   Номера в комментариях (§) — разделы DESIGN.md.
   proto.css остаётся только для админки. */

/* ======================================================================
   1. Шрифт — Cocomat Pro: заголовки Regular (400), текст Light (300)
   ====================================================================== */
@font-face{font-family:'Cocomat Pro';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/CocomatPro-Light.woff2') format('woff2')}
@font-face{font-family:'Cocomat Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/CocomatPro-Regular.woff2') format('woff2')}

/* ======================================================================
   2. Токены (§6 цвета, §4 spacing, §20 radius, §42)
   ====================================================================== */
:root{
  /* нейтральные */
  --black:#101413; --dark:#202725;
  --gray-700:#515A57; --gray-500:#5E6562;  /* 500 был #6E7572: 4.2:1 на gray-100 — ниже AA для мелкого текста */ --gray-300:#CDD1CE; --gray-200:#E5E7E5; --gray-100:#F2F3F1;
  --white:#FFFFFF;
  /* бренд */
  --primary:#253D3C; --secondary:#8D9DAF; --accent:#A7B77B;
  /* семантика */
  --color-bg:var(--white); --color-bg-soft:var(--gray-100);
  --color-text-primary:var(--black); --color-text-secondary:var(--gray-700); --color-text-muted:var(--gray-500);
  --color-border:var(--gray-200);

  /* spacing — только значения из шкалы §4 */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:40px; --space-8:48px; --space-9:64px; --space-10:80px; --space-11:96px; --space-12:120px;

  /* radius §20 */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px;

  /* сетка §2/§3: десктоп 1280 / 12 колонок / gap 24 / поля 80 */
  --container:1280px;
  --cols:12; --gap:24px; --margin:80px;

  --hero-pad:100px;             /* Hero прижат к краю экрана, а не к контейнеру */
  --header-h:80px;              /* прозрачная шапка поверх Hero §8 */
  --header-h-sticky:72px;       /* липкая шапка после Hero §8 */
  --section-y:80px;             /* ритм внутренних страниц; на главной 120px §5 */

  /* типографика: Cocomat Pro — текст Light, заголовки Regular */
  --font:'Cocomat Pro',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fw-text:300; --fw-head:400;
  --fs-display:112px; --lh-display:.92;
  /* h1/h2 набраны капсом, а кратка «Й» в Cocomat поднимается на 1.02em над
     строкой — при интервале меньше ~1.1 она ложится на буквы строки выше */
  --fs-h1:72px; --lh-h1:1.12;
  --fs-h2:48px; --lh-h2:1.12;
  --fs-h3:32px; --lh-h3:36px;
  --fs-h4:24px; --lh-h4:30px;

  /* движение §44 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-soft:0 12px 40px rgba(16,20,19,.08);
}
/* широкий монитор: держим пропорцию «контент ≈89% ширины» из §2 — на 1920+
   контейнер 1280 оставлял бы по 320px пустых полей, и страница выглядела мелкой */
@media (min-width:1600px){
  :root{
    --container:1440px; --margin:96px;
    --fs-display:140px; --fs-h1:80px; --lh-h1:1.12; --fs-h2:56px; --lh-h2:1.12;
    --fs-h3:36px; --lh-h3:40px; --fs-h4:26px; --lh-h4:32px;
  }
  .is-home{--section-y:160px}
}
@media (min-width:1920px){
  :root{--container:1560px; --margin:120px; --fs-display:160px; --fs-h1:88px; --lh-h1:1.12}
}

/* планшет §36: 8 колонок, gap 20, поля 40 */
@media (max-width:1279px){
  :root{
    --cols:8; --gap:20px; --margin:40px; --hero-pad:40px; --header-h:72px;
    --fs-display:72px; --fs-h1:56px; --lh-h1:1.12; --fs-h2:40px; --lh-h2:1.12;
    --fs-h3:28px; --lh-h3:32px;
  }
}
/* мобильный §37: 4 колонки, gap 12, поля 16 */
@media (max-width:767px){
  :root{
    --cols:4; --gap:12px; --margin:16px; --hero-pad:16px; --header-h:64px; --header-h-sticky:64px;
    --fs-display:52px; --fs-h1:40px; --lh-h1:1.12; --fs-h2:32px; --lh-h2:1.12;
    --fs-h3:24px; --lh-h3:30px; --fs-h4:20px; --lh-h4:26px;
  }
}

/* ======================================================================
   3. База
   ====================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-sticky) + 16px)}
body{
  margin:0;background:var(--color-bg);color:var(--color-text-primary);
  font:var(--fw-text) 16px/24px var(--font);-webkit-font-smoothing:antialiased;font-synthesis:none;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
}
main{flex:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:var(--fw-head);letter-spacing:-.02em;text-wrap:balance}
h1,h2{text-transform:uppercase}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.03em}
/* крупный H1 — для первого экрана; в обычном потоке страницы он мельче,
   иначе название экскурсии занимает пол-экрана */
main :not(.hero):not(.hero-stage) > * > h1,main > * > h1{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:-.025em}
.hero h1,.hero-stage h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.03em}
.hero-stage__content h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-.02em;text-transform:uppercase}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:-.025em}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:-.01em}
p{margin:0 0 1em}
/* §39: длинный текст не растягиваем на весь контейнер */
main .wrap>p,main .wrap>.muted{max-width:720px}
ul{margin:0 0 1em;padding-left:1.2em}
b,strong{font-weight:var(--fw-head)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-xs)}
.hero-stage :focus-visible,.hero :focus-visible,.site-footer :focus-visible,.mnav :focus-visible,
.has-hero .site-header:not(.is-stuck) :focus-visible{outline-color:var(--white)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;background:var(--white);color:var(--black);
  padding:12px 16px;border-radius:var(--radius-sm);text-decoration:none;font-weight:var(--fw-head);transition:top .2s ease-out}
.skip-link:focus{top:16px}

/* утилиты (совместимы с существующими шаблонами) */
.muted{color:var(--color-text-secondary)}
.small{font-size:14px;line-height:20px}
.center{text-align:center}
.stack>*+*{margin-top:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.spread{display:flex;gap:24px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.is-hidden{display:none !important}
.link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .2s ease-out}
.link:hover{opacity:.65}
.label{font-size:12px;line-height:16px;font-weight:var(--fw-head);letter-spacing:.04em;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
  font-size:12px;line-height:16px;font-weight:var(--fw-head);letter-spacing:.04em;text-transform:uppercase;color:var(--gray-700)}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:none}
.on-dark .eyebrow{color:rgba(255,255,255,.75)}

/* ======================================================================
   4. Контейнер, 12-колоночная сетка, вертикальный ритм (§2, §3, §5)
   ====================================================================== */
.wrap{width:min(var(--container),calc(100% - 2 * var(--margin)));margin-inline:auto}
.grid-12{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap)}

.section{padding-top:var(--section-y)}

/* Пара стражей по бокам блока, зеркально, лицами наружу — как у ворот храма.
   Каждый появляется сам, когда показался на экране (site.js → initGuards):
   поднимается снизу, выпрямляется и проступает из тёмного камня в цвет,
   потом медленно парит. Обёртка — место и парение (translate),
   картинка — появление (transform/opacity/filter), чтобы они не перетирали друг друга. */
.guarded{position:relative;isolation:isolate}
.top-guard{position:absolute;z-index:-1;pointer-events:none;top:50%;
  width:clamp(420px,30vw,900px);transform:translateY(-50%)}
.top-guard--l{left:calc(-2vw + 100px);--dir:-1}
.top-guard--r{right:calc(-2vw + 100px);--dir:1}
.top-guard img{display:block;width:100%;height:auto;transform-origin:50% 90%}
.top-guard--r img{scale:-1 1}
.js-anim .top-guard img{opacity:0;will-change:transform,opacity,filter;
  transform:translateY(90px) scale(.92) rotate(calc(var(--dir) * 5deg));
  filter:brightness(.25) saturate(.2)}
.js-anim .top-guard.is-in img{opacity:1;transform:none;filter:none;
  transition:opacity .9s ease,transform 1.8s cubic-bezier(.16,1,.3,1),filter 2.4s cubic-bezier(.4,0,.2,1) .3s}
.top-guard.is-settled{animation:guard-float 7s ease-in-out infinite alternate}
.top-guard--r.is-settled{animation-delay:-3.5s}
.guarded.is-offscreen .top-guard{animation-play-state:paused}
.top-guard.is-settled img{will-change:auto}
@keyframes guard-float{from{translate:0 0}to{translate:0 -14px}}
@media (prefers-reduced-motion:reduce){.js-anim .top-guard img{opacity:1;transform:none;filter:none}}
@media (max-width:1279px){.top-guard{display:none}}
.top-excursions .card{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 10px 40px rgba(16,20,19,.06),inset 0 1px 0 rgba(255,255,255,.8)}
.section--tight{padding-top:48px}
.section--gray{background:var(--gray-100);padding-block:var(--section-y);margin-top:var(--section-y)}
.is-home{--section-y:120px}
@media (max-width:1279px){.is-home{--section-y:96px}}
@media (max-width:767px){body{--section-y:72px}.is-home{--section-y:80px}}

/* SectionHeader (§26): заголовок 6–7 колонок, описание 4, управление 2 */
.section-head{max-width:800px}
.section-head>h2{margin:0}
.section-head__text{margin:24px 0 0;max-width:620px;font-size:18px;line-height:28px;color:var(--gray-700)}
.section-head--row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gap);row-gap:24px;align-items:end;max-width:none}
.section-head--row .section-head__title{grid-column:1 / span 6}
.section-head--row .section-head__aside{grid-column:7 / span 4;padding-bottom:6px}
.section-head--row .section-head__ctrl{grid-column:11 / span 2;justify-self:end;padding-bottom:4px}
.section-head--row .section-head__text{margin-top:0;max-width:none}

/* ======================================================================
   5. Кнопки (§19) и мелкий UI
   ====================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding-inline:24px;padding-block:0 8px;      /* нижний паддинг компенсирует смещение метрик шрифта (§19) */
  border:1px solid var(--primary);background:var(--primary);color:var(--white);border-radius:var(--radius-pill);
  font:var(--fw-head) 14px/1 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out,transform .2s ease-out;
}
.btn:hover{background:transparent;color:var(--primary)}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:52px;padding-inline:28px}          /* Hero-кнопка §19 */
.btn--sm{min-height:44px;padding-inline:20px}          /* минимальный tap target §46 */
.btn--wide{width:100%}
.btn--ghost{background:transparent;color:var(--black);border-color:var(--gray-300)}
.btn--ghost:hover{background:transparent;border-color:var(--black);color:var(--black)}
.btn--light{background:var(--white);border-color:var(--white);color:var(--primary)}
.btn--light:hover{background:transparent;border-color:var(--white);color:var(--white)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.65);color:var(--white)}
.btn--outline-light:hover{background:transparent;border-color:var(--white);color:var(--white)}
.btn[disabled]{opacity:.5;cursor:progress}
.btn svg{width:16px;height:16px;flex:none}

/* круглая иконка-кнопка: стрелки слайдеров, бургер, поиск */
.icon-btn{
  width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer;text-decoration:none;
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out,opacity .2s ease-out;
}
.icon-btn:hover{background:transparent;border-color:var(--black);color:var(--black)}
.icon-btn[disabled],.icon-btn[aria-disabled="true"]{opacity:.3;pointer-events:none}
.icon-btn--bare{border-color:transparent}
.icon-btn--bare:hover{background:transparent;border-color:var(--black);color:var(--black)}
.icon-btn--light{color:var(--white);border-color:rgba(255,255,255,.5)}
.icon-btn--light:hover{background:transparent;border-color:var(--white);color:var(--white)}
.icon-btn svg{width:18px;height:18px}

.chip{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--gray-200);
  border-radius:var(--radius-pill);background:var(--white);white-space:nowrap;
  font-size:12px;line-height:16px;font-weight:var(--fw-head);letter-spacing:.02em;color:var(--gray-700)}
.chip--solid{background:var(--primary);border-color:var(--primary);color:var(--white)}
.stars{letter-spacing:2px;color:var(--accent)}
.stars--lg{font-size:22px;line-height:1;letter-spacing:4px}

/* ======================================================================
   6. Шапка и навигация (§8)
   ====================================================================== */
/* Обычные страницы — липкая светлая шапка. Страницы с Hero (body.has-hero) —
   прозрачная поверх фото; после выхода из Hero JS вешает .is-stuck. */
.site-header{
  position:sticky;top:0;z-index:60;height:var(--header-h-sticky);color:var(--black);
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gray-200);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
/* шапка выровнена по тем же 100px, что и Hero: логотип стоит ровно над заголовком */
.site-header__in{height:100%;width:100%;max-width:none;padding-inline:var(--hero-pad);
  display:flex;align-items:center;gap:32px}
.site-header__nav{display:flex;align-items:center;gap:28px;min-width:0}
.site-header__actions{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:1280px){
  /* §8: логотип 2 колонки, навигация 6, спейсер 2, действия 2 */
  .site-header__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);gap:0}
  /* логотип в Cocomat Pro шире, чем 2 колонки из §8, — отдаём ему 3, меню сдвигается на 4-ю */
  .site-header__logo{grid-column:1 / span 3}
  .site-header__nav{grid-column:4 / span 5;gap:28px}
  .site-header__actions{grid-column:9 / span 4;justify-self:end;margin-left:0}
}
/* 1280–1599: полное меню, иконки, язык и кнопка не помещаются в 4 колонки — сдвигаем границу */
@media (min-width:1280px) and (max-width:1599px){
  .site-header__nav{grid-column:4 / span 4;gap:22px}
  .site-header__actions{grid-column:8 / span 5;gap:4px}
}
.logo{display:block;text-decoration:none;color:inherit;white-space:nowrap;line-height:1}
.logo b{display:block;font-size:17px;font-weight:var(--fw-head);letter-spacing:.14em}
.logo span{display:block;margin-top:6px;font-size:9px;font-weight:var(--fw-head);letter-spacing:.2em;text-transform:uppercase;opacity:.65}

.has-hero .site-header{
  position:absolute;left:0;right:0;top:0;height:var(--header-h);color:var(--white);
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;
}
.has-hero .site-header.is-stuck{
  position:fixed;height:var(--header-h-sticky);color:var(--black);
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom-color:var(--gray-200);animation:header-drop .4s var(--ease);
}
@keyframes header-drop{from{transform:translateY(-100%)}to{transform:none}}

.nav__item{position:relative;display:flex}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;
  border:0;background:none;color:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:var(--fw-head) 14px/1 var(--font);letter-spacing:.01em;opacity:.88;transition:opacity .25s var(--ease);
}
.nav__link:hover,.nav__item.is-open>.nav__link,.nav__link[aria-current="page"]{opacity:1}
/* подчёркивание — тонкая линия-акцент, как у активного пункта в референсе */
.nav__link::after{content:"";position:absolute;left:0;width:20px;bottom:6px;height:2px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after,
.nav__item.is-open>.nav__link::after,.nav__item:focus-within>.nav__link::after{transform:scaleX(1)}
.nav__link svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.nav__item:hover>.nav__link svg,.nav__item.is-open>.nav__link svg{transform:rotate(180deg)}

/* выпадающее меню: padding-top сверху работает «мостом» — меню не схлопывается,
   пока курсор едет от пункта к панели */
.nav__menu{
  position:absolute;top:100%;left:-24px;padding-top:14px;z-index:5;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;
}
.nav__item:hover>.nav__menu,.nav__item:focus-within>.nav__menu,.nav__item.is-open>.nav__menu{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.nav__panel{background:var(--white);color:var(--black);border-radius:var(--radius-md);padding:24px;
  box-shadow:var(--shadow-soft),0 0 0 1px var(--gray-200)}
.nav__panel--wide{display:grid;grid-template-columns:1fr 1fr;gap:32px;width:560px}
.nav__panel--narrow{width:280px}
.nav__col{min-width:0}
.nav__group-title{margin:0 0 4px;font-size:12px;line-height:16px;font-weight:var(--fw-head);letter-spacing:.04em;
  text-transform:uppercase;color:var(--gray-500)}
.nav__panel a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 0;
  font-size:14px;line-height:20px;text-decoration:none;transition:opacity .2s ease-out}
.nav__panel a:hover{opacity:.6}
.nav__panel a small{font-size:12px;color:var(--gray-500)}
.nav__all{font-weight:var(--fw-head);margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid var(--gray-200)}
.site-header__search{display:inline-flex}

/* CTA в шапке: поверх фото — стеклянная кнопка с тонкой рамкой (не белая заливка),
   на липкой светлой — тёмно-зелёная */
.site-header__cta{min-height:40px;padding:0 20px;font-size:13px}
.has-hero .site-header:not(.is-stuck) .site-header__cta{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:var(--white);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.has-hero .site-header:not(.is-stuck) .site-header__cta:hover{background:transparent;border-color:var(--white);color:var(--white)}
.has-hero .site-header:not(.is-stuck) .icon-btn--bare:hover{background:transparent;border-color:var(--white);color:var(--white)}
.site-header__burger{display:none}

/* хлебные крошки: на страницах с Hero — поверх фото, иначе обычной строкой */
.crumbs-bar{background:var(--white);border-bottom:1px solid var(--gray-200)}
.crumbs{padding:14px 0;font-size:13px;line-height:20px;color:var(--gray-700)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs span+span:before{content:"/";margin:0 8px;color:var(--gray-300)}
.has-hero .crumbs-bar{position:absolute;left:0;right:0;top:var(--header-h);z-index:40;background:transparent;border:0}
.has-hero .crumbs{color:rgba(255,255,255,.8)}
.has-hero .crumbs span+span:before{color:rgba(255,255,255,.45)}

/* мобильное меню — на весь экран, тёмно-зелёное */
.mnav{
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;overflow-y:auto;
  background:var(--primary);color:var(--white);
  transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s;
}
.mnav.is-open{transform:none;visibility:visible;transition-delay:0s}
.mnav__in{display:flex;flex-direction:column;flex:1}
.mnav__top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);flex:none}
.mnav__body{flex:1;padding:16px 0 32px}
.mnav__list{list-style:none;margin:0;padding:0}
.mnav__list>li{border-bottom:1px solid rgba(255,255,255,.14)}
.mnav__link{
  display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:0;
  border:0;background:none;color:inherit;text-align:left;text-decoration:none;cursor:pointer;
  font:var(--fw-head) 24px/30px var(--font);letter-spacing:-.01em;
}
.mnav__link svg{width:18px;height:18px;opacity:.7;transition:transform .3s var(--ease)}
.mnav__group.is-open .mnav__link svg{transform:rotate(180deg)}
.mnav__sub{display:none;padding-bottom:16px}
.mnav__group.is-open .mnav__sub{display:block}
.mnav__sub .nav__group-title{margin-top:16px;color:rgba(255,255,255,.62)}
.mnav__sub a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;
  color:rgba(255,255,255,.88);text-decoration:none;font-size:16px}
.mnav__sub a small{font-size:13px;color:rgba(255,255,255,.62)}
.mnav__foot{margin-top:auto;display:flex;flex-direction:column;gap:20px;padding-bottom:32px}
.mnav__social{display:flex;gap:12px}
.mnav__social>a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;color:var(--white)}
.mnav__social>a svg{width:22px;height:22px}
body.nav-open{overflow:hidden}

@media (max-width:1279px){
  .site-header .site-header__msg{display:none}
}
@media (max-width:1023px){
  .site-header__nav,.site-header__cta,.site-header__search{display:none}
  .site-header__burger{display:inline-flex}
  .site-header__in{justify-content:space-between;gap:16px}
  .logo span{display:none}
}

/* ======================================================================
   7. HERO главной (§9–§18) — cinematic, во весь первый экран
   ====================================================================== */
/* первый экран — во всю высоту окна; svh, чтобы на телефоне адресная строка
   не «съедала» нижнюю строку Hero */
.hero-stage{
  position:relative;width:100%;height:100vh;height:100svh;min-height:680px;
  overflow:hidden;background:var(--dark);color:var(--white);isolation:isolate;
}

/* --- фотография слайда (§10): перекрываются в одной точке, меняются кроссфейдом --- */
.hero-stage__media{position:absolute;inset:0;z-index:0}
.hero-slide picture,.final-cta__bg picture{display:contents}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s var(--ease);will-change:opacity}
.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 8s linear}
.hero-slide.is-active img{transform:scale(1)}

/* --- overlay (§11): горизонтальный для читаемости текста + нижний для карточек --- */
/* базовый слой добавлен к градиентам §11: фотографии разные, и на светлом кадре
   (рассвет, песок) белый текст без него не читается */
.hero-stage__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(0,0,0,.42),transparent 42%),
    linear-gradient(90deg,rgba(5,18,20,.78) 0%,rgba(5,18,20,.52) 40%,rgba(5,18,20,.12) 75%),
    rgba(5,18,20,.16);
}

/* --- декоративная outline-типографика (§15): меняется вместе со слайдом --- */
.hero-stage__deco{
  position:absolute;left:-.06em;bottom:104px;z-index:1;pointer-events:none;user-select:none;
  font-size:clamp(150px,15vw,220px);line-height:.8;font-weight:var(--fw-head);letter-spacing:-.05em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);
}

/* --- раскладка (§12): текст 7 колонок, карточки 5 ---
   Hero живёт не в общем контейнере, а во всю ширину с отступом --hero-pad слева
   и справа: заголовок прижат к краю экрана, а не к центральной колонке. */
.hero-stage__in{position:relative;z-index:2;height:100%;width:100%;padding-inline:var(--hero-pad)}

/* На невысоком экране текст привязан к низу — так между ним и нижней строкой
   всегда остаётся воздух. На высоком (от 900px) встаёт на 38–42% высоты, как в §13,
   иначе на большом мониторе он сползал бы в самый низ кадра. */
/* смещения задаём явно: у абсолютных блоков padding родителя не учитывается */
.hero-stage__content{
  position:absolute;left:var(--hero-pad);bottom:184px;
  width:max(440px,calc(58% - 2 * var(--hero-pad) - 32px));
}
@media (min-height:900px) and (min-width:1280px){
  .hero-stage__content{top:40%;bottom:auto;transform:translateY(-6%)}
}

/* --- текстовый блок первого экрана: слоган, H1, УТП, кнопка --- */
.hero-stage__content .slogan{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-size:12px;line-height:16px;font-weight:var(--fw-head);letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
.hero-stage__content .slogan::before{content:"";width:40px;height:1px;background:currentColor;flex:none}
.hero-stage__content h1{
  margin:0;font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-head);letter-spacing:-.02em;max-width:760px;
  text-transform:uppercase;
}
/* УТП — тонкие плашки: только белая обводка, без заливки и маркера */
.usp{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.usp__item{display:inline-flex;align-items:center;padding:8px 18px;border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-pill);
  font-size:15px;line-height:22px;color:rgba(255,255,255,.88);
  white-space:nowrap;transition:color .4s var(--ease),border-color .4s var(--ease)}
/* акцент пробегает по плашкам — подсвечиваются текст и контур.
   Анимируются только opacity (плашки и белого контура-псевдоэлемента), а не
   color/border-color: те пересчитывались и перерисовывались на главном потоке
   каждый кадр, бесконечно, пока открыт первый экран. opacity ведёт композитор.
   Вид тот же: в покое текст .88 и контур .6 (= .88 × .68), на акценте всё белое. */
.js-anim .usp__item{position:relative;color:#fff;border-color:rgba(255,255,255,.68);
  opacity:.88;animation:usp-emphasis 9s ease-in-out infinite}
.js-anim .usp__item::after{content:"";position:absolute;inset:-1px;border:1px solid #fff;
  border-radius:inherit;opacity:0;pointer-events:none;animation:usp-ring 9s ease-in-out infinite;
  animation-delay:inherit}
.js-anim .usp__item:nth-child(1){animation-delay:0s}
.js-anim .usp__item:nth-child(2){animation-delay:2.2s}
.js-anim .usp__item:nth-child(3){animation-delay:4.4s}
.js-anim .usp__item:nth-child(4){animation-delay:6.6s}
@keyframes usp-emphasis{0%,8%{opacity:.88}16%,26%{opacity:1}34%,100%{opacity:.88}}
/* вне экрана — на паузе (site.js → initOffscreenPause) */
.is-offscreen,.is-offscreen *,.is-offscreen *::after{animation-play-state:paused!important}
@keyframes usp-ring{0%,8%{opacity:0}16%,26%{opacity:1}34%,100%{opacity:0}}
.hero-stage__content .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px}
.hero-stage__content .hero__note{font-size:14px;line-height:20px;color:rgba(255,255,255,.72)}

/* показатели — те же цифры, что в прототипе, но без плашек: строкой поверх фото */
.hero-stage__bottom .facts{flex-direction:row;flex-wrap:wrap;gap:8px 40px;color:var(--white)}
.hero-stage__bottom .fact{
  flex-direction:row;align-items:baseline;gap:8px;padding:0;border:0;background:none;
}
.hero-stage__bottom .fact__top{font-size:16px;line-height:24px;font-weight:var(--fw-head);letter-spacing:.01em}
.hero-stage__bottom .fact__bottom{font-size:13px;line-height:20px;color:rgba(255,255,255,.7)}
.hero-stage__bottom .stars{color:var(--accent);font-size:12px}

/* --- карточки направлений поверх Hero (§16, §17) --- */
.hero-stage__cards{
  position:absolute;right:0;bottom:152px;
  width:calc(42% + var(--hero-pad));                    /* лента уходит за правый край §16 */
  display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:32px var(--hero-pad) 32px 0;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hero-stage__cards::-webkit-scrollbar{display:none}
/* карточки одного размера, чётные чуть опущены — лёгкая «шахматка», как в референсе */
.hero-card{
  position:relative;flex:none;width:240px;height:300px;                 /* 4:5 §16 */
  border:0;padding:0;background:none;text-align:left;display:block;font:inherit;
  border-radius:var(--radius-md);overflow:hidden;scroll-snap-align:start;text-decoration:none;color:var(--white);
  box-shadow:0 18px 48px rgba(6,18,20,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.hero-card:nth-child(even){transform:translateY(28px)}
.hero-card:hover{transform:translateY(-6px)}                            /* §45 */
.hero-card:nth-child(even):hover{transform:translateY(22px)}
.hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.hero-card:hover img{transform:scale(1.03)}
.hero-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.05) 60%)}
.hero-card__body{position:absolute;left:20px;right:20px;bottom:20px;z-index:1}
.hero-card__title{display:block;font-size:20px;line-height:26px;font-weight:var(--fw-head);letter-spacing:-.01em}
.hero-card__meta{display:block;margin-top:4px;font-size:13px;line-height:18px;color:rgba(255,255,255,.75)}

/* --- нижняя строка: категории слева, пагинация справа (§18) --- */
/* нижняя часть Hero: показатели строкой, под ними — стрелки, линия и номер кадра */
.hero-stage__bottom{
  position:absolute;left:var(--hero-pad);right:var(--hero-pad);bottom:36px;
  display:flex;flex-direction:column;align-items:stretch;gap:24px;
}
.hero-pager{display:flex;align-items:center;gap:16px;order:2}
.hero-pager .icon-btn{width:40px;height:40px}
.hero-pager .icon-btn svg{width:16px;height:16px}
.hero-pager__line{position:relative;display:block;flex:1;height:1px;background:rgba(255,255,255,.28);margin-inline:8px}
.hero-pager__line i{position:absolute;left:0;top:0;height:100%;background:var(--white);transition:width .6s var(--ease)}
.hero-pager__count{display:flex;align-items:baseline;gap:8px;flex:none;color:var(--white)}
.hero-pager__count b{font-size:40px;line-height:1;font-weight:var(--fw-head);letter-spacing:-.03em}
.hero-pager__count i{font-style:normal;font-size:14px;line-height:1;color:rgba(255,255,255,.55)}
.hero-stage__bottom .facts{order:1}

/* --- виджет отзывов (правый верхний угол, над карточками) ---
   Стеклянная тёмная панель: фото под ней остаётся видно, текст читается на любом
   кадре. Места над лентой карточек хватает только на десктопе с высотой от 820px,
   ниже он прячется — первый экран не должен вылезать за окно. */
.hero-reviews{
  position:absolute;right:var(--hero-pad);top:calc(var(--header-h) + 20px);z-index:3;
  width:380px;padding:22px 24px 20px;border-radius:var(--radius-lg);
  background:rgba(16,24,23,.62);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 48px rgba(6,18,20,.28);color:var(--white);
}
.hero-reviews__title{font-size:18px;line-height:24px;font-weight:var(--fw-head);letter-spacing:-.01em}
/* шапка — кнопка «свернуть/развернуть»: в свёрнутом виде виджет — одна строка
   с заголовком. Высота тела анимируется через grid 0fr↔1fr, без замера в JS. */
.hero-reviews{transition:padding .35s var(--ease)}
.hero-reviews__head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.hero-reviews__chev{display:grid;place-items:center;flex:none;width:32px;height:32px;margin:-4px -6px -4px 0;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);
  transition:transform .35s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.hero-reviews__chev svg{width:12px;height:12px;transform:rotate(180deg)}
.hero-reviews__head:hover .hero-reviews__chev{border-color:var(--white);color:var(--white)}
.hero-reviews__body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--ease),opacity .3s var(--ease)}
.hero-reviews__inner{min-height:0;overflow:hidden}
.hero-reviews.is-collapsed{padding-bottom:22px}
.hero-reviews.is-collapsed .hero-reviews__body{grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .4s var(--ease),opacity .2s var(--ease),visibility 0s .4s}
.hero-reviews.is-collapsed .hero-reviews__chev{transform:rotate(180deg)}
.hero-reviews.no-anim,.hero-reviews.no-anim *{transition:none!important}
.hero-reviews__inner{position:relative}
.hero-reviews__item{padding-top:16px}
.hero-reviews__item .hero-reviews__more{margin-top:20px}
/* стрелки — в одной строке со ссылкой «Читать отзыв», справа */
.hero-reviews__nav{position:absolute;right:0;bottom:0;display:flex;gap:8px}
.hero-reviews__nav .icon-btn{width:34px;height:34px}
.hero-reviews__nav .icon-btn svg{width:16px;height:16px}
.hero-reviews__name{font-size:18px;line-height:24px;font-weight:var(--fw-head)}
.hero-reviews__meta{margin-top:2px;font-size:13px;line-height:18px;color:rgba(255,255,255,.6)}
.hero-reviews__meta .stars{color:var(--accent);font-size:11px;letter-spacing:.06em}
.hero-reviews__text{
  margin:10px 0 0;font-size:14px;line-height:21px;color:rgba(255,255,255,.9);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-reviews__more{
  display:inline-block;margin-top:12px;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.hero-reviews__more:hover{color:var(--white);border-color:var(--white)}
.js-anim .hero-reviews__item.is-active{animation:hero-rev-in .5s var(--ease)}
@keyframes hero-rev-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1279px),(max-height:819px){.hero-reviews{display:none}}
@media (min-width:1600px){.hero-reviews{width:420px;top:calc(var(--header-h) + 32px)}}

/* --- Hero: широкий монитор — крупнее кадр, карточки и воздух --- */
@media (min-width:1600px){
  .hero-stage__content{bottom:212px}
  .hero-stage__cards{bottom:112px}
  .hero-card{width:288px;height:360px}
  .hero-card+.hero-card{width:256px;height:330px}
  .hero-card__title{font-size:22px;line-height:28px}
  .hero-stage__deco{font-size:clamp(180px,13.5vw,280px);bottom:120px}
  .hero-stage__bottom{bottom:40px}
  .hero-stage__content .hero__cta{margin-top:48px}
  .usp{margin-top:40px}
  .hero-pager__line{width:180px}
}

/* --- Hero: планшет (§36) --- */
@media (max-width:1279px){
  .hero-stage{height:auto;min-height:0}
  .hero-stage__in{display:flex;flex-direction:column;min-height:100svh;padding-top:calc(var(--header-h) + 56px);padding-bottom:28px}
  .hero-stage__content{position:static;width:100%;max-width:620px;margin-bottom:32px}
  .hero-card{width:236px;height:295px}
  .hero-card+.hero-card{width:236px;height:295px;align-self:auto}
  .hero-stage__cards{position:static;width:calc(100% + var(--margin));margin-top:auto;margin-right:calc(-1 * var(--margin))}
  .hero-stage__bottom{position:static;margin-top:32px}
  .hero-stage__deco{bottom:auto;top:calc(var(--header-h) + 8px);font-size:clamp(120px,14vw,170px);opacity:.9}
}
/* невысокий экран планшета/ноутбука в альбомной ориентации — ужимаем,
   чтобы первый экран не выходил за пределы окна */
@media (max-width:1279px) and (max-height:900px){
  .hero-stage__in{padding-top:calc(var(--header-h) + 8px);padding-bottom:16px}
  .hero-stage__content{margin-bottom:12px}
  .hero-card,.hero-card+.hero-card{width:190px;height:236px}
  .usp{margin-top:20px}
  .hero-stage__content .hero__cta{margin-top:24px}
  /* на низком экране деко-надпись оказывается прямо под слоганом — делаем её тише */
  .hero-stage__deco{font-size:clamp(90px,11vw,130px);-webkit-text-stroke-color:rgba(255,255,255,.14)}
}

/* --- Hero: мобильный (§37) --- */
@media (max-width:767px){
  /* задача — уложить весь первый экран в одну высоту окна: отступы, чипы,
     карточки и показатели на телефоне компактнее */
  .hero-stage__in{min-height:100svh;padding-top:calc(var(--header-h) + 28px);padding-bottom:16px}
  .hero-stage__content h1{line-height:.96}
  .hero-stage__content .slogan{margin-bottom:14px}
  .hero-stage__content .hero__cta{margin-top:24px;gap:12px 16px}
  .hero-stage__content .hero__note{font-size:13px}
  .usp{margin-top:16px;gap:8px}
  .usp__item{padding:6px 14px;font-size:13px;line-height:18px}
  .hero-stage__content{margin-bottom:24px}
  .hero-stage__deco{font-size:clamp(96px,25vw,116px);top:calc(var(--header-h) + 8px)}
  .hero-card{width:212px;height:265px}
  .hero-card+.hero-card{width:212px;height:265px;align-self:auto}       /* на свайпе карточки одного размера */
  .hero-card__title{font-size:18px;line-height:24px}
  .hero-stage__cards{gap:12px;bottom:auto}
  .hero-stage__bottom{gap:12px;margin-top:12px}
  .hero-pager .icon-btn{width:36px;height:36px}
  .hero-pager__count b{font-size:30px}
  /* показатели — одной лентой со свайпом, иначе они занимают три строки */
  .hero-stage__bottom .facts{flex-wrap:nowrap;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    margin-right:calc(-1 * var(--margin));padding-right:var(--margin)}
  .hero-stage__bottom .facts::-webkit-scrollbar{display:none}
  .hero-stage__bottom .fact{flex:none;padding:8px 14px}
  .hero-stage__bottom .fact__top{font-size:15px;line-height:20px}
}
/* невысокий телефон: заголовок и карточки ещё компактнее */
@media (max-width:767px) and (max-height:880px){
  :root{--fs-display:44px}
  .hero-stage__in{padding-top:calc(var(--header-h) + 24px)}
  .hero-card,.hero-card+.hero-card{width:196px;height:245px}
  .usp{margin-top:16px}
  .usp{gap:6px}
  .usp__item{padding:5px 11px;font-size:12.5px}
  .hero-stage__content{margin-bottom:20px}
  .hero-stage__content .hero__cta{margin-top:20px}
}
/* совсем компактный экран (iPhone SE и подобные) */
@media (max-width:767px) and (max-height:700px){
  :root{--fs-display:38px}
  .hero-stage__in{padding-top:calc(var(--header-h) + 12px);padding-bottom:12px}
  .hero-card,.hero-card+.hero-card{width:168px;height:210px}
  .hero-stage__content .slogan{margin-bottom:10px}
  .hero-stage__content .hero__cta{margin-top:16px;gap:8px 12px}
  .hero-stage__bottom{gap:8px;margin-top:12px}
  .hero-pager{width:100%;justify-content:space-between}
  .hero-pager__line{width:96px}
}

/* ======================================================================
   8. Hero внутренних страниц (компактный, та же логика фото + overlay)
   ====================================================================== */
.hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:520px;padding-top:calc(var(--header-h) + 88px);padding-bottom:64px;
  background:var(--dark);color:var(--white);
}
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--primary)}
.hero__bg--photo{background-size:cover;background-position:center;background-repeat:no-repeat;
  background-image:var(--bg-desktop,var(--bg-mobile))}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(0,0,0,.35),transparent 45%),
    linear-gradient(90deg,rgba(5,18,20,.62) 0%,rgba(5,18,20,.3) 55%,rgba(5,18,20,.08) 100%)}
/* Hero внутренних страниц — по той же левой линии, что и первый экран главной */
.hero__in{position:relative;z-index:1;width:100%;max-width:none;padding-inline:var(--hero-pad)}
.has-hero .crumbs-bar .wrap{width:100%;max-width:none;padding-inline:var(--hero-pad)}
.hero__content{max-width:760px}
.hero__content h1{margin:0}
.hero__content .muted,.hero__content p{color:rgba(255,255,255,.82)}
.hero__content>p{margin:24px 0 0;max-width:620px;font-size:18px;line-height:28px}
.hero__content .row{margin-top:40px}
.hero__content .chip{background:transparent;border-color:rgba(255,255,255,.4);color:var(--white)}
.hero__bg span{position:absolute;right:16px;bottom:14px;font-size:12px;color:rgba(255,255,255,.7)}
/* кнопки внутри Hero — светлые: тёмно-зелёная на фото почти не видна */
.hero .btn{background:var(--white);border-color:var(--white);color:var(--primary)}
.hero .btn:hover{background:transparent;border-color:var(--white);color:var(--white)}
.hero .btn--ghost{background:transparent;border-color:rgba(255,255,255,.65);color:var(--white)}
.hero .btn--ghost:hover{background:transparent;border-color:var(--white);color:var(--white)}
@media (max-width:767px){
  .hero{min-height:440px;padding-top:calc(var(--header-h) + 64px);padding-bottom:48px}
  .hero__bg--photo{background-image:var(--bg-mobile,var(--bg-desktop))}
  .hero__content>p{margin-top:16px;font-size:16px;line-height:24px}
  .hero__content .row{margin-top:32px}
}

/* ======================================================================
   9. Why Travel With Us (§21–§24)
   ====================================================================== */
/* карточки занимают обе строки справа, цифры встают под заголовок и садятся
   на уровень последней карточки — без дыры в левой колонне */
.why-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:auto 1fr;
  column-gap:var(--gap);row-gap:48px}
.why-grid__text{grid-column:1 / span 7;grid-row:1}
.why-grid__cards{grid-column:8 / -1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:16px}
.why-grid__text h2{max-width:560px;margin:0}
.why-grid__text p{margin:24px 0 0;max-width:520px;font-size:18px;line-height:28px;color:var(--gray-700)}

/* карточка-фича: иконка 56px + текст (§23, §24) */
.feature-card{
  display:flex;gap:20px;align-items:flex-start;min-height:112px;padding:24px;
  background:var(--gray-100);border-radius:var(--radius-md);
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.feature-card:hover{background:var(--secondary);color:var(--white);transform:translateY(-2px)}
.feature-card:hover .feature-card__text{color:rgba(255,255,255,.85)}
.feature-card__icon{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:var(--white);color:var(--primary)}
.feature-card:hover .feature-card__icon{background:rgba(255,255,255,.16);color:var(--white)}
.feature-card__icon svg{width:28px;height:28px;stroke-width:1.5}
.feature-card__title{font-size:18px;line-height:24px;font-weight:var(--fw-head);letter-spacing:-.01em}
.feature-card__text{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--gray-700)}

/* статистика (§22) */
.stats{grid-column:1 / span 7;grid-row:2;align-self:end;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.stat__value{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-head);letter-spacing:-.02em}
.stat__label{margin-top:8px;font-size:14px;line-height:20px;color:var(--gray-700);max-width:180px}
.stat__icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  border-radius:50%;background:var(--gray-100);color:var(--primary)}
.stat__icon svg{width:20px;height:20px}

@media (max-width:1279px){
  .why-grid__text,.stats{grid-column:1 / span 4}
  .why-grid__cards{grid-column:5 / -1}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (max-width:767px){
  .why-grid{row-gap:32px}
  .why-grid{grid-template-rows:none}
  .why-grid__text,.why-grid__cards,.stats{grid-column:1 / -1;grid-row:auto}
  .why-grid__text p{margin-top:16px;font-size:16px;line-height:24px}
  .stats{grid-template-columns:1fr 1fr;gap:24px;margin-top:0}
  .feature-card{padding:20px;gap:16px;min-height:0}
  .feature-card__icon{width:48px;height:48px}
  .feature-card__icon svg{width:24px;height:24px}
}

/* ======================================================================
   10. Top Destinations (§25–§29) — мягкая подложка, слайдер карточек 4:5
   ====================================================================== */
/* тёмная подложка; фото стоит у правого края и уходит в темноту слева (маска),
   поверх — общий градиент, чтобы заголовок и подписи читались */
.dest-panel{position:relative;isolation:isolate;overflow:hidden;background:#0f1a19;color:var(--white);
  border-radius:var(--radius-lg);padding:48px}
/* Фото справа, тающее к левому краю. Раньше — filter:brightness(.8) и mask-image: при
   раскрытии панели на всю ширину (clip-path по скроллу) это пересчитывалось каждый кадр
   на большом фото. Теперь те же два эффекта — слоями фона, математически так же:
   brightness(.8) = чёрный 20 % поверх; маска alpha m = цвет панели #0f1a19 с alpha 1-m. */
.dest-panel::before{content:"";position:absolute;top:0;right:0;bottom:0;width:58%;z-index:-2;
  background:
    linear-gradient(90deg,#0f1a19 0%,rgba(15,26,25,.45) 40%,rgba(15,26,25,0) 100%),
    linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),
    url('../img/dest_side.webp') center/cover no-repeat;
  opacity:1;will-change:transform}
.dest-panel::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(15,26,25,.6) 0%,rgba(15,26,25,.25) 55%,rgba(15,26,25,.4) 100%),
             linear-gradient(180deg,rgba(15,26,25,.5) 0%,rgba(15,26,25,.1) 25%,rgba(15,26,25,.7) 100%)}
.dest-panel h2,.dest-panel .group-title{color:var(--white)}
.dest-panel .group-title{color:rgba(255,255,255,.72)}
.dest-panel .icon-btn{color:var(--white);border-color:rgba(255,255,255,.5)}
.dest-panel .icon-btn:hover{background:transparent;border-color:var(--white);color:var(--white)}
.dest-panel .btn{background:var(--white);border-color:var(--white);color:var(--primary)}
.dest-panel .btn:hover{background:transparent;border-color:var(--white);color:var(--white)}
.dest-panel .dest-card{box-shadow:0 16px 40px rgba(0,0,0,.35)}
.dest-panel .dest-card__badge{background:rgba(255,255,255,.9)}
.dest-panel .section-head--row{margin-bottom:40px}
.dest-group+.dest-group{margin-top:48px}
.dest-group__head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.group-title{margin:0;font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-head);letter-spacing:-.01em;color:var(--gray-700)}
.dest-rail--pair{grid-auto-columns:calc((100% - 3 * var(--gap)) / 4)}
.dest-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--gap)) / 4);gap:var(--gap);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.dest-rail::-webkit-scrollbar{display:none}
.dest-rail>*{scroll-snap-align:start}
.dest-card{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-md);
  text-decoration:none;color:var(--white);display:block}
.dest-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.dest-card:hover img{transform:scale(1.03)}                              /* §45 */
.dest-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent 60%)}
.dest-card__badge{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;min-height:30px;
  padding:0 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--black);
  font-size:12px;line-height:1;font-weight:var(--fw-head);letter-spacing:.01em}
.dest-card__body{position:absolute;left:20px;right:20px;bottom:20px;z-index:1}
.dest-card__kicker{display:block;font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.dest-card__title{display:block;margin-top:8px;font-size:22px;line-height:26px;font-weight:var(--fw-head);letter-spacing:-.02em}
.dest-card__meta{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;color:rgba(255,255,255,.8)}
.dest-card__meta svg{width:14px;height:14px;flex:none;opacity:.8}
.dest-panel__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px}
@media (max-width:1279px){
  .dest-panel{padding:32px}
  .dest-rail{grid-auto-columns:calc((100% - 2 * var(--gap)) / 3)}       /* планшет — 3 карточки §38 */
}
@media (max-width:767px){
  .dest-panel::before{width:100%;opacity:.5}
  .dest-panel{padding:24px 16px;border-radius:var(--radius-md);
    margin-inline:calc(-1 * var(--margin));width:100vw;max-width:100vw}
  .dest-panel>.dest-panel__inner{padding-inline:var(--margin)}
  .dest-rail{grid-auto-columns:78%;padding-inline:var(--margin);
    margin-inline:calc(-1 * var(--margin))}                              /* видна часть следующей §38 */
  .dest-panel .section-head--row{margin-bottom:24px}
  .dest-panel__foot{margin-top:24px}
}
@media (min-width:480px) and (max-width:767px){
  .dest-rail{grid-auto-columns:46%}                                      /* 2 карточки §38 */
}

/* ======================================================================
   11. Tour Packages (§30–§32): интро-карточка 40% + два фото-пакета по 30%
   ====================================================================== */
/* пропорции §30: интро ~40%, два пакета по ~30% */
.packages{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,30fr) minmax(0,30fr);
  column-gap:var(--gap);row-gap:var(--gap)}
.pkg-intro{display:flex;flex-direction:column;min-height:420px;padding:40px;
  background:var(--secondary);color:var(--white);border-radius:var(--radius-md)}
.pkg-intro h2{margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3)}
.pkg-intro p{margin:16px 0 0;max-width:420px;font-size:16px;line-height:24px;color:rgba(255,255,255,.88)}
.pkg-intro .btn{margin-top:auto;align-self:flex-start}                   /* CTA у нижнего края §31 */
.pkg-card{position:relative;min-height:420px;overflow:hidden;border-radius:var(--radius-md);
  text-decoration:none;color:var(--white);display:block}
.pkg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pkg-card:hover img{transform:scale(1.03)}
.pkg-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.12) 65%)}
.pkg-card__icon{position:absolute;top:24px;left:24px;z-index:2;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--primary);display:flex;align-items:center;justify-content:center}
.pkg-card__icon svg{width:22px;height:22px}
.pkg-card__body{position:absolute;left:24px;right:24px;bottom:24px;z-index:1}
.pkg-card__title{display:block;font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-head);letter-spacing:-.01em}
.pkg-card__text{display:block;margin:8px 0 0;font-size:14px;line-height:20px;color:rgba(255,255,255,.82);max-width:360px}
@media (max-width:1279px){
  /* планшет §36: интро на всю ширину, два пакета 50/50 */
  .packages{grid-template-columns:1fr 1fr}
  .pkg-intro{grid-column:1 / -1;min-height:0}
  .pkg-card{min-height:360px}
}
@media (max-width:767px){
  .packages{grid-template-columns:1fr}
  .pkg-intro{padding:24px}
  .pkg-intro .btn{margin-top:32px}
  .pkg-card{min-height:320px}
}

/* ======================================================================
   12. Booking process (§33) — три шага в 12-колоночной сетке
   ====================================================================== */
.steps-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:40px;
  margin-top:48px;border-top:1px solid var(--gray-200);padding-top:40px}
.step{grid-column:span 4;display:flex;flex-direction:column;gap:16px;padding-right:24px}
.step__num{font-size:14px;line-height:20px;font-weight:var(--fw-head);letter-spacing:.06em;color:var(--gray-500)}
.step__title{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-head);letter-spacing:-.01em;margin:0}
.step__text{margin:0;font-size:16px;line-height:24px;color:var(--gray-700);max-width:340px}
.step__icon{width:48px;height:48px;border-radius:50%;background:var(--gray-100);color:var(--primary);
  display:flex;align-items:center;justify-content:center}
.step__icon svg{width:22px;height:22px}
@media (max-width:1279px){.step{grid-column:span 4;padding-right:0}}
@media (max-width:767px){
  .steps-grid{row-gap:32px;margin-top:32px;padding-top:32px}
  .step{grid-column:1 / -1;flex-direction:row;align-items:flex-start;gap:16px}
  .step__icon{flex:none}
  .step__body{min-width:0}
}

/* ======================================================================
   13. Editorial-блок (консультация с Эльдаром): фото 5 колонок + текст 7
   ====================================================================== */
.editorial{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:32px;align-items:center}
.editorial__media{grid-column:1 / span 5;position:relative}
.editorial__photo{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-md);background:var(--gray-100)}
.editorial__quote{position:absolute;max-width:230px;padding:16px 20px;background:var(--white);border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);font-size:14px;line-height:20px}
.editorial__quote span{display:block;margin-top:8px;font-size:12px;line-height:16px;color:var(--gray-500)}
.editorial__quote--1{top:72px;right:-72px}
.editorial__quote--2{bottom:72px;left:-56px}
.editorial__content{grid-column:7 / -1}
.editorial__content h2{margin:0;max-width:600px}
.editorial__content>p{margin:24px 0 0;max-width:520px;font-size:18px;line-height:28px;color:var(--gray-700)}
.editorial__list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
.editorial__list li{position:relative;padding-left:32px;font-size:16px;line-height:24px;color:var(--gray-700)}
.editorial__list li::before{content:"";position:absolute;left:0;top:9px;width:16px;height:1px;background:var(--accent)}
.editorial__cta{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:1279px){
  .editorial__media{grid-column:1 / span 3}
  .editorial__content{grid-column:4 / -1}
  .editorial__quote--1{right:-24px;max-width:200px}
  .editorial__quote--2{left:-16px;bottom:24px;max-width:200px}
}
@media (max-width:767px){
  .editorial__media,.editorial__content{grid-column:1 / -1}
  .editorial__photo{aspect-ratio:4/3}
  .editorial__quote{position:static;max-width:none;margin-top:12px;box-shadow:none;background:var(--gray-100)}
  .editorial__content>p{margin-top:16px;font-size:16px;line-height:24px}
  .editorial__list{margin-top:24px}
  .editorial__cta{margin-top:32px}
}

/* ======================================================================
   14. Отзывы (§40.07) — крупная цитата + карточки
   ====================================================================== */
.reviews-head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:32px;align-items:end}
.reviews-head__title{grid-column:1 / span 6}
.reviews-head__score{grid-column:8 / -1;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.reviews-head__value{font-size:var(--fs-h2);line-height:1;font-weight:var(--fw-head);letter-spacing:-.025em}
.reviews-platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.reviews-platforms span{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--radius-pill);
  background:var(--gray-100);font-size:13px;line-height:1;color:var(--gray-700)}
.reviews-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap);margin-top:48px}
.review-card{grid-column:span 3;display:flex;flex-direction:column;gap:16px;padding:24px;
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md)}
.review-card__text{margin:0;font-size:16px;line-height:24px;color:var(--dark)}
.review-card__foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.review-card__author{font-size:14px;line-height:20px;font-weight:var(--fw-head)}
.review-card__meta{font-size:12px;line-height:16px;color:var(--gray-500)}
@media (max-width:1279px){
  .reviews-head__title{grid-column:1 / span 5}
  .reviews-head__score{grid-column:6 / -1}
  .review-card{grid-column:span 4}
}
@media (max-width:767px){
  .reviews-head__title,.reviews-head__score{grid-column:1 / -1}
  .reviews-grid{margin-top:32px;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    padding-inline:var(--margin);margin-inline:calc(-1 * var(--margin));scrollbar-width:none}
  .reviews-grid::-webkit-scrollbar{display:none}
  .review-card{scroll-snap-align:start}
}

/* ======================================================================
   15. Финальный CTA — тёмная плашка с фото
   ====================================================================== */
.final-cta{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--primary);color:var(--white);
  padding:96px 64px;display:flex;flex-direction:column;align-items:center;text-align:center}
.final-cta__bg{position:absolute;inset:0;z-index:0}
.final-cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.45}
.final-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,20,19,.55),rgba(16,20,19,.75))}
.final-cta__in{position:relative;z-index:1;max-width:760px}
.final-cta h2{margin:0}
.final-cta p{margin:24px auto 0;max-width:560px;font-size:18px;line-height:28px;color:rgba(255,255,255,.85)}
.final-cta__actions{margin-top:40px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:767px){
  .final-cta{padding:48px 24px;border-radius:var(--radius-md)}
  .final-cta p{margin-top:16px;font-size:16px;line-height:24px}
  .final-cta__actions{margin-top:32px;width:100%;flex-direction:column}
  .final-cta__actions .btn{width:100%}
}

/* Раскрытие фото-панелей по скроллу (site.js → initBleedPanels).
   Панель растянута до краёв экрана, контент удержан на месте паддингом,
   видимая часть — clip-path: --x 0 = обычная карточка, 1 = во всю ширину. */
.dest-panel.is-bleed,.quiz-panel.is-bleed,.final-cta.is-bleed,[data-bleed].is-bleed{--x:0;margin-inline:calc(-1 * var(--bleed));
  padding-left:calc(var(--pad-l) + var(--bleed));padding-right:calc(var(--pad-r) + var(--bleed));
  border-radius:0;
  clip-path:inset(0 calc(var(--bleed) * (1 - var(--x))) round calc(var(--r) * (1 - var(--x))))}

/* ======================================================================
   16. Общие компоненты внутренних страниц
   (классы сохранены от прототипа — страницы каталога, экскурсии, услуг
   продолжают работать, но получают оформление дизайн-системы)
   ====================================================================== */

/* --- простые сетки --- */
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* --- карточка (экскурсия, статья, яхта) --- */
.card{display:flex;flex-direction:column;min-width:0;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:var(--gray-300);box-shadow:var(--shadow-soft);transform:translateY(-2px)}
.card__media{aspect-ratio:4/3;width:100%;object-fit:cover;display:block;background:var(--gray-100)}
.card__body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.card__title{font-size:18px;line-height:24px;font-weight:var(--fw-head);letter-spacing:-.01em}
.card__title a{text-decoration:none}
.card__title a:hover{text-decoration:underline;text-underline-offset:3px}
.card__meta{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;line-height:16px;color:var(--gray-700)}
.card__price{margin-top:auto;font-size:18px;line-height:24px;font-weight:var(--fw-head);letter-spacing:-.01em}
.card__price small{display:block;margin-top:4px;font-size:12px;line-height:16px;font-weight:var(--fw-text);color:var(--gray-500)}
.card__foot{padding:0 20px 20px}
.card .media-ph{border:0}

/* мини-слайдер фото внутри карточки */
.card-slider{position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;background:var(--gray-100);display:block;
  touch-action:pan-y}  /* горизонтальный свайп листает фото (JS), а не ленту вокруг */
.card-slider .card__media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.card-slider__nav{position:absolute;top:0;bottom:0;width:34%;display:flex;align-items:center;background:transparent;
  border:0;padding:0;margin:0;cursor:pointer;opacity:0;transition:opacity .2s ease-out;z-index:2}
.card-slider:hover .card-slider__nav,.card-slider__nav:focus-visible{opacity:1}
.card-slider__nav--prev{left:0;justify-content:flex-start}
.card-slider__nav--next{right:0;justify-content:flex-end}
.card-slider__nav span{width:32px;height:32px;margin:0 8px;border-radius:50%;background:rgba(16,20,19,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.card-slider__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;z-index:2;pointer-events:none}
.card-slider__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);display:block;transition:width .2s,background .2s}
.card-slider__dots i.is-on{background:#fff;width:16px;border-radius:3px}

/* --- плитка направления --- */
.tile{position:relative;display:block;overflow:hidden;border-radius:var(--radius-md);text-decoration:none;
  color:var(--white);background:var(--dark);min-height:280px}
.tile__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.tile:hover .tile__media{transform:scale(1.03)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 62%)}
.tile__body{position:absolute;left:20px;right:20px;bottom:20px;z-index:1}
.tile__name{font-size:22px;line-height:26px;font-weight:var(--fw-head);letter-spacing:-.02em}
.tile--big{min-height:360px}
.tile--big .tile__name{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.tile__hook{margin-top:8px;font-size:14px;line-height:20px;color:rgba(255,255,255,.82)}
.tile__count{margin-top:12px;font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.tile .media-ph{position:absolute;inset:0;border:0}

/* --- горизонтальная карусель (моб. вид сеток) --- */
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,78%);gap:var(--gap);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{scroll-snap-align:start}
.carousel--wide{grid-auto-columns:minmax(280px,86%)}

/* --- бокс, заметка, пустое состояние --- */
.box{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:24px}
.box--note{background:var(--gray-100);border-color:transparent}
.box h3{margin-top:0}
.empty{padding:48px 24px;text-align:center;background:var(--gray-100);border-radius:var(--radius-md)}
.media-ph{background:var(--gray-100);display:flex;align-items:center;justify-content:center;
  color:var(--gray-500);font-size:13px;line-height:18px;text-align:center;padding:16px}

/* --- CTA-полоса --- */
.cta-strip{display:flex;gap:24px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  margin-top:48px;padding:32px;background:var(--gray-100);border-radius:var(--radius-md)}
.cta-strip b{font-size:20px;line-height:28px;font-weight:var(--fw-head);letter-spacing:-.01em}
.cta-strip--center{justify-content:center;text-align:center}

/* --- факты / показатели (about, страницы услуг) --- */
.facts{display:flex;flex-direction:column;gap:12px}
.facts--row{flex-direction:row;flex-wrap:wrap}
.facts--row .fact{flex:1 1 200px}
.fact{display:flex;flex-direction:column;gap:4px;padding:20px 24px;background:var(--gray-100);border-radius:var(--radius-md)}
.fact b,.fact__top{font-size:20px;line-height:26px;font-weight:var(--fw-head);letter-spacing:-.01em}
.fact__bottom{font-size:13px;line-height:18px;color:var(--gray-700)}
.reviews-total{font-size:20px;line-height:26px;font-weight:var(--fw-head)}

/* --- логотипы площадок --- */
.logos{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.logos a,.logos span{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:var(--radius-pill);
  background:var(--gray-100);font-size:13px;line-height:1;color:var(--gray-700);text-decoration:none}
.logos--left{justify-content:flex-start}

/* --- «Нам доверяют» (страница отзывов) --- */
.reviews-row{display:flex;gap:48px;align-items:center;margin-top:32px}
.reviews-row__photo{flex:0 0 380px;width:380px;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:var(--radius-md);background:var(--gray-100)}
.reviews-row__content{flex:1;min-width:0}
.trust-quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:40px}
.trust-quote{padding:24px;background:var(--gray-100);border-radius:var(--radius-md)}
.trust-quote p{margin:0 0 12px;font-size:16px;line-height:24px}
.trust-quote__author{font-size:12px;line-height:16px;color:var(--gray-500)}

/* --- плитки услуг --- */
.tiles-service{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.tiles-service div{padding:24px;background:var(--gray-100);border-radius:var(--radius-md);font-size:14px;line-height:20px;
  transition:background-color .3s var(--ease)}
.tiles-service div:hover{background:var(--gray-200)}
.tiles-service b{display:block;margin-bottom:8px;font-size:16px;line-height:22px;font-weight:var(--fw-head)}
.tiles-service span{display:block}

/* ---- «Мы создаём впечатления»: острова выходят за нижний край светлой карточки ---- */
.impressions{position:relative;margin-bottom:152px}
/* под карточками — только кнопка: серая плашка сливалась бы со светлыми карточками */
.impressions + .cta-strip{background:none;padding:0;margin-top:0}
.impressions__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.impression{display:block}
/* светлая карточка — продолжение студийного фона снимков, поэтому остаток фона у островов
   на ней не читается */
.impression__card{
  position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);
  background:var(--white);
  transition:box-shadow .4s var(--ease);
  box-shadow:0 24px 48px -26px rgba(16,20,19,.3);
}
.impression:hover .impression__card{box-shadow:0 32px 56px -26px rgba(16,20,19,.38)}
/* Острова во всех снимках срезаны по правому краю холста, поэтому картинка стоит
   вплотную к правому краю карточки, а лишняя ширина уходит влево. Низ опущен так,
   чтобы подошва острова заметно выходила за карточку — но не настолько, чтобы
   сверху оставалось пустое поле под текстом. Двойная тень держит 3D-эффект: ближняя
   плотная — остров как будто лежит над поверхностью карточки, дальняя мягкая —
   он парит над сценой ниже края. На hover остров чуть приподнимается и подрастает,
   отделяясь от карточки ещё сильнее. */
.impression__media{
  position:absolute;right:0;bottom:-12%;width:106%;max-width:none;height:auto;z-index:2;
  filter:drop-shadow(0 10px 14px rgba(16,20,19,.28)) drop-shadow(0 40px 44px rgba(16,20,19,.26));
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.impression:hover .impression__media{
  transform:translateY(-10px) scale(1.025);
  filter:drop-shadow(0 16px 20px rgba(16,20,19,.32)) drop-shadow(0 52px 54px rgba(16,20,19,.3));
}
.impression__body{position:absolute;left:28px;right:28px;top:28px;z-index:4;pointer-events:none}
/* номер — крупная светлая цифра, заголовок под ним — капсом, в размере H4 наравне
   с остальными подписями сайта (раньше был мельче основного масштаба) */
.impression__num{color:var(--black);font-size:var(--fs-h3);line-height:var(--lh-h3);
  font-weight:var(--fw-text);letter-spacing:-.02em;opacity:.38}
.impression__title{margin-top:12px;color:var(--black);font-size:var(--fs-h4);line-height:var(--lh-h4);
  font-weight:var(--fw-head);letter-spacing:.06em;text-transform:uppercase;text-wrap:balance}

/* --- лид-магнит: фото 5 колонок + текст 7, цитаты на краях фото ---
   Рамка за фото — чистая декорация. Список нумеруется счётчиком CSS, тексты не меняются. */
.lead-magnet{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gap);row-gap:32px;align-items:center}
.lead-magnet__photo-wrap{grid-column:1 / span 5;position:relative}
.lead-magnet__photo{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-lg);background:var(--gray-200);
  box-shadow:0 24px 60px rgba(16,20,19,.14)}
.lead-magnet__quote{position:absolute;max-width:220px;padding:34px 18px 14px;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);
  font-size:13px;line-height:19px;color:var(--dark);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.lead-magnet__quote::before{content:"";position:absolute;left:18px;top:14px;width:18px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23A7B77B' d='M0 18V10.6C0 4.8 3.2 1.2 9.2 0l1 2.4C6.8 3.4 5.2 5.6 5 8.4h4.6V18H0zm13.8 0V10.6c0-5.8 3.2-9.4 9.2-10.6l1 2.4c-3.4 1-5 3.2-5.2 6H23.4V18h-9.6z'/%3E%3C/svg%3E") no-repeat center/contain}
.lead-magnet__quote:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(16,20,19,.14)}
.lead-magnet__quote-author{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-200);
  font-size:12px;line-height:16px;color:var(--gray-500)}
.lead-magnet__quote--1{top:32px;left:-48px}
.lead-magnet__quote--2{top:148px;right:-56px}
.lead-magnet__quote--3{bottom:148px;left:-48px}
.lead-magnet__quote--4{bottom:32px;right:-56px}
.js-anim .lead-magnet__photo-wrap.reveal .lead-magnet__quote{opacity:0;transform:translateY(12px)}
.js-anim .lead-magnet__photo-wrap.reveal.is-in .lead-magnet__quote{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-anim .lead-magnet__photo-wrap.is-in .lead-magnet__quote--2{transition-delay:.15s}
.js-anim .lead-magnet__photo-wrap.is-in .lead-magnet__quote--3{transition-delay:.3s}
.js-anim .lead-magnet__photo-wrap.is-in .lead-magnet__quote--4{transition-delay:.45s}
.lead-magnet__content{grid-column:7 / -1}
.lead-magnet__content h2{margin:0;max-width:600px}
.lead-magnet__subtitle{display:inline-block;margin:20px 0 0;padding:6px 16px 8px;border-radius:var(--radius-pill);
  background:var(--gray-100);font-size:16px;line-height:24px;font-weight:var(--fw-head);color:var(--primary)}
/* список — в стеклянной плашке, как карточки «Выбор наших клиентов» */
.lead-magnet__list{list-style:none;margin:32px 0 0;padding:8px 32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--space-6);counter-reset:lm;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(242,243,241,.5));border:1px solid rgba(205,209,206,.55);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 10px 40px rgba(16,20,19,.06),inset 0 1px 0 rgba(255,255,255,.9)}
.lead-magnet__list li{position:relative;padding:14px 0 14px 40px;border-top:1px solid var(--gray-300);
  font-size:15px;line-height:22px;color:var(--gray-700);counter-increment:lm}
.lead-magnet__list li::before{content:counter(lm,decimal-leading-zero);position:absolute;left:0;top:16px;
  font-size:12px;line-height:18px;font-weight:var(--fw-head);letter-spacing:.04em;color:var(--primary);opacity:.55}
.lead-magnet__list li:nth-child(-n+2){border-top:0}
.lead-magnet__list li:last-child:nth-child(odd){grid-column:1 / -1}
.lead-magnet .btn{margin-top:40px}
.tiles-cards .card__body{align-items:center;text-align:center}

/* --- фильтры каталога --- */
.filters{padding:24px;background:var(--gray-100);border-radius:var(--radius-md);margin-bottom:32px}
.filters__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.filters label{display:block;margin-bottom:6px;font-size:12px;line-height:16px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gray-700);font-weight:var(--fw-head)}
.filters__foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
select,input[type=text],input[type=search],input[type=tel],input[type=number],input[type=date],textarea{
  width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);
  background:var(--white);color:var(--black);font:var(--fw-text) 15px/20px var(--font);
  transition:border-color .2s ease-out,box-shadow .2s ease-out}
textarea{min-height:96px;resize:vertical}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,61,60,.12)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.pills a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--radius-pill);
  border:1px solid var(--gray-200);background:var(--white);font-size:13px;line-height:1;text-decoration:none;
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}
.pills a:hover{border-color:var(--gray-300)}
.pills a.is-on{background:var(--primary);border-color:var(--primary);color:var(--white)}
[data-results-app]{transition:opacity .2s ease-out}
[data-results-app].is-loading{opacity:.45;pointer-events:none}
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.pager a,.pager span{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;
  padding:0 14px;border:1px solid var(--gray-200);border-radius:var(--radius-pill);font-size:14px;text-decoration:none}
.pager .is-on{background:var(--primary);border-color:var(--primary);color:var(--white)}

/* --- страница экскурсии --- */
.ex-head{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}
.map-embed{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-md);display:block;margin-top:24px;background:var(--gray-100)}
.gallery{position:relative}
.gallery__strip{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:8px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;border-radius:var(--radius-md);scrollbar-width:none}
.gallery__strip::-webkit-scrollbar{display:none}
.gallery__strip>*{scroll-snap-align:center}
.gallery__strip img,.gallery__strip .media-ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--gray-100)}
.gallery__nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.gallery__nav button{pointer-events:auto;width:44px;height:44px;margin:0 12px;border:1px solid transparent;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--black);font-size:18px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s ease-out,border-color .2s ease-out}
.gallery__nav button:hover{background:transparent;border-color:var(--black)}
.gallery__dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.gallery__dots i{width:6px;height:6px;border-radius:50%;background:var(--gray-300);display:block}
.gallery__dots i.is-on{background:var(--primary);width:18px;border-radius:3px}
.book{padding:24px;background:var(--gray-100);border-radius:var(--radius-md);position:sticky;top:calc(var(--header-h-sticky) + 16px)}
.book__price{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-head);letter-spacing:-.02em}
.ptable{width:100%;border-collapse:collapse;margin:20px 0 8px;font-size:14px}
.ptable th{padding:0 0 8px;border-bottom:1px solid var(--gray-300);text-align:right;
  font-size:11px;font-weight:var(--fw-head);letter-spacing:.04em;text-transform:uppercase;color:var(--gray-700)}
.ptable th:first-child{text-align:left}
.ptable td{padding:10px 0;border-bottom:1px solid var(--gray-200)}
.ptable tr:last-child td{border-bottom:0}
.ptable__who{color:var(--gray-700)}
.ptable__sum{text-align:right;font-weight:var(--fw-head);white-space:nowrap;padding-left:12px}
.ticks,.crosses{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ticks li,.crosses li{position:relative;padding-left:28px;line-height:1.5}
.ticks li:before{content:"✓";position:absolute;left:0;top:0;font-weight:var(--fw-head);color:var(--primary)}
.ticks--plus li:before{content:"+"}
.crosses li:before{content:"×";position:absolute;left:0;top:0;font-weight:var(--fw-head);color:var(--gray-500)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.cols-2--video{align-items:center}
.cols-2-list{columns:2;column-gap:32px}
.cols-2-list li{break-inside:avoid}
.ex-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);align-items:start}
.day-video{width:100%;aspect-ratio:16/9;background:var(--black);display:block;border-radius:var(--radius-md)}
.timeline{list-style:none;padding:0;margin:0;counter-reset:t}
.timeline li{counter-increment:t;position:relative;padding:16px 0 16px 56px;border-bottom:1px solid var(--gray-200)}
.timeline li:last-child{border-bottom:0}
.timeline li:before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:14px;
  width:36px;height:36px;border-radius:50%;background:var(--gray-100);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:var(--fw-head)}
/* Программа маршрута: таймлайн слева, «входит / не входит» — липкой колонкой справа */
.ex-program{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:64px;align-items:start}
.ex-program--solo{grid-template-columns:minmax(0,880px)}
.ex-program__side{display:flex;flex-direction:column;gap:var(--gap);position:sticky;top:calc(var(--header-h-sticky) + 24px)}
.ex-cards>.contents{display:contents}
.plan-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;
  padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid var(--gray-200)}
.plan-head__title{margin:0}
.plan-head__meta{margin:0;font-size:14px;line-height:20px;color:var(--gray-500)}

.plan-wrap{scroll-margin-top:calc(var(--header-h-sticky) + 16px)}
.plan{--num:40px;--rail:calc(var(--num) / 2)}
.plan__step{position:relative;display:grid;grid-template-columns:var(--num) minmax(0,1fr);gap:20px;padding-bottom:28px}
/* линия маршрута от кружка к следующему шагу; у последнего шага в серии её нет */
.plan__step:before{content:"";position:absolute;left:calc(var(--rail) - .5px);top:calc(var(--num) + 6px);bottom:6px;
  width:1px;background:var(--gray-300)}
.plan__step:has(+ :not(.plan__step)):before,.plan__step:last-child:before{display:none}
.plan--clip.is-clipped .plan__step:has(+ .is-more):before{display:none}
.plan__num{width:var(--num);height:var(--num);border-radius:50%;border:1px solid var(--gray-300);background:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--primary);
  font-variant-numeric:tabular-nums;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.plan__step:hover .plan__num{background:var(--primary);border-color:var(--primary);color:var(--white)}
.plan__body{padding-top:8px;min-width:0}
.plan__time{display:inline-block;margin:0 0 6px;padding:2px 10px;border-radius:var(--radius-pill);background:var(--gray-100);
  font-size:13px;line-height:20px;color:var(--primary);white-space:nowrap}
.plan__title{margin:0;font-size:18px;line-height:26px;font-weight:var(--fw-head);color:var(--black);letter-spacing:-.005em}
.plan__text{margin:4px 0 0;font-size:16px;line-height:25px;color:var(--gray-700);max-width:68ch}
.plan__title+.plan__text{margin-top:6px}
.plan__extras,.plan__prices{list-style:none;margin:12px 0 0;padding:12px 16px;border-radius:var(--radius-sm);background:var(--gray-100);
  display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:22px;color:var(--gray-700)}
.plan__extras li,.plan__prices li{position:relative;padding-left:16px}
.plan__extras li:before,.plan__prices li:before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.plan__prices{margin:0 0 28px}
.plan__day{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:8px 0 24px;padding-top:24px;border-top:1px solid var(--gray-200)}
.plan>.plan__day:first-child{margin-top:0;padding-top:0;border-top:0}
.plan__day-label{padding:6px 14px;border-radius:var(--radius-pill);background:var(--primary);color:var(--white);
  font-size:13px;line-height:18px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.plan__day-title{font-size:20px;line-height:28px;font-weight:var(--fw-head);color:var(--black)}
.plan__label{margin:4px 0 16px;font-size:13px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500)}
.plan__label:not(:first-child){margin-top:12px}
.plan__info{margin:0 0 16px;font-size:15px;line-height:22px;color:var(--gray-700)}
.plan__info-key{color:var(--gray-500)}
.plan__info-key:after{content:":"}
.plan__lead{margin:0 0 24px;font-size:17px;line-height:27px;color:var(--gray-700);max-width:68ch}
/* длинная программа свёрнута до первых пунктов; без JS видна целиком */
.plan--clip.is-clipped .is-more{display:none}
.plan--clip.is-clipped{position:relative}
.plan--clip.is-clipped:after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),var(--white))}
.plan__toggle{margin-top:4px}
@media (max-width:1023px){
  .ex-program{grid-template-columns:minmax(0,1fr);gap:48px}
  .ex-program__side{position:static}
}
@media (max-width:767px){
  .plan{--num:32px}
  .plan__step{gap:14px;padding-bottom:22px}
  .plan__num{font-size:12px}
  .plan__body{padding-top:4px}
  .plan__title{font-size:17px;line-height:24px}
  .plan__text{font-size:15px;line-height:23px}
  .plan__day-title{font-size:18px;line-height:26px}
  .plan-head{margin-bottom:24px;padding-bottom:16px}
  .plan__toggle{width:100%}
}
/* FAQ на всех страницах: вопрос — крупная строка, справа кружок с плюсом,
   при раскрытии плюс поворачивается в крест. Высоту ответа плавно анимирует
   site.js → initFaq; без JS работает обычный <details> */
.faq{--faq-ease:cubic-bezier(.16,1,.3,1);margin-top:clamp(32px,3.5vw,56px);border-top:1px solid var(--gray-300)}
.faq details{padding:0;border-bottom:1px solid var(--gray-200)}
.faq summary{position:relative;display:block;padding:24px 64px 24px 0;cursor:pointer;list-style:none;
  font-size:clamp(18px,1.4vw,22px);line-height:1.35;font-weight:var(--fw-head);letter-spacing:-.015em;
  transition:color .3s var(--faq-ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--primary)}
.faq summary:focus-visible{outline-offset:4px;border-radius:var(--radius-sm)}
.faq summary::before{content:"";position:absolute;right:0;top:50%;width:40px;height:40px;margin-top:-20px;
  border:1px solid var(--gray-300);border-radius:50%;color:var(--primary);
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transition:transform .6s var(--faq-ease),background-color .35s var(--faq-ease),border-color .35s var(--faq-ease),color .35s var(--faq-ease)}
.faq summary:hover::before{border-color:var(--primary)}
.faq details[open] summary::before{transform:rotate(135deg);background-color:var(--primary);border-color:var(--primary);color:var(--white)}
.faq details>:not(summary){max-width:860px;margin:-6px 0 0;padding:0 64px 28px 0;font-size:16px;line-height:1.65;color:var(--gray-700)}
.faq details[open]>:not(summary){animation:faq-in .6s var(--faq-ease) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:767px){
  .faq summary{padding:20px 56px 20px 0;font-size:17px}
  .faq summary::before{width:36px;height:36px;margin-top:-18px}
  .faq details>:not(summary){padding-right:0;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.faq details[open]>:not(summary){animation:none}}
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:16px;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--gray-200)}

/* --- каталог одной страницей --- */
.cat-tile{position:relative;display:block;overflow:hidden;border-radius:var(--radius-md);text-decoration:none;color:var(--white);background:var(--dark)}
.cat-tile__media{aspect-ratio:4/3;width:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.cat-tile:hover .cat-tile__media{transform:scale(1.03)}
.cat-tile__label{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;display:flex;justify-content:space-between;
  align-items:baseline;gap:16px;background:linear-gradient(to top,rgba(0,0,0,.75),transparent)}
.cat-tile__name{font-size:20px;line-height:26px;font-weight:var(--fw-head);letter-spacing:-.01em}
.cat-tile__count{font-size:12px;color:rgba(255,255,255,.75);white-space:nowrap}
.acc{border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden}
.acc__item{border-bottom:1px solid var(--gray-200)}
.acc__item:last-child{border-bottom:0}
.acc__head{cursor:pointer;padding:20px 24px;display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  list-style:none;background:var(--white);transition:background-color .2s ease-out}
.acc__head::-webkit-details-marker{display:none}
.acc__head:hover{background:var(--gray-100)}
.acc__head:after{content:"+";flex:none;font-size:18px;line-height:1;color:var(--gray-500)}
.acc__item[open] .acc__head{background:var(--gray-100)}
.acc__item[open] .acc__head:after{content:"–"}
.acc__title{font-size:17px;line-height:24px;font-weight:var(--fw-head);min-width:0}
.acc__price{margin-left:auto;font-size:14px;color:var(--gray-700);white-space:nowrap}
.acc__body{padding:24px}
.acc__gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}
.acc__gallery>*:first-child{grid-column:span 2;grid-row:span 2}
.acc__gallery img,.acc__gallery .media-ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--gray-100);border-radius:var(--radius-sm)}
.acc__gallery-wrap{position:relative}
.acc__gallery-nav,.acc__gallery-dots{display:none}
.acc__body h3{margin:0 0 12px;font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-700)}
.acc__body ul{margin:0;padding-left:20px;font-size:14px;line-height:20px;display:flex;flex-direction:column;gap:6px}
.acc__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start;margin-bottom:24px}
.acc__yes,.acc__no{list-style:none;padding-left:0}
.acc__yes li,.acc__no li{position:relative;padding-left:22px}
.acc__yes li:before{content:"✓";position:absolute;left:0;font-weight:var(--fw-head);color:var(--primary)}
.acc__no li:before{content:"×";position:absolute;left:0;font-weight:var(--fw-head);color:var(--gray-500)}

/* --- пакеты, яхты, отзывы, статьи --- */
.pack{display:flex;flex-direction:column;gap:12px;padding:32px;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-md)}
.pack--hl{background:var(--gray-100);border-color:transparent}
.pack__price{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-head);letter-spacing:-.02em}
.pack ul{font-size:14px;line-height:22px}
.pack .btn{margin-top:auto}
.yacht{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray-200);
  border-radius:var(--radius-md);overflow:hidden}
.yacht__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.yacht__progs{margin:0;padding-left:18px;font-size:13px;line-height:20px;color:var(--gray-700)}
.review{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-md);scroll-margin-top:calc(var(--header-h-sticky) + 24px)}
.review:target{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.review__head{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--gray-500)}
.article-cover{width:100%;max-width:840px;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:32px;
  border-radius:var(--radius-md);background:var(--gray-100)}
.article-body{max-width:720px;font-size:18px;line-height:29px;color:var(--dark)}
.article-body h2{margin-top:1.6em;font-size:var(--fs-h3);line-height:var(--lh-h3)}
.article-body a{text-decoration:underline;text-underline-offset:3px}

/* --- бегущая строка --- */
.ticker{overflow:hidden;border-block:1px solid var(--gray-200);background:var(--white)}
.ticker__track{display:flex;gap:40px;padding:16px 0;width:max-content;animation:ticker 44s linear infinite;will-change:transform}
.ticker__track span{font-size:14px;line-height:20px;color:var(--gray-700);white-space:nowrap}
.ticker__track span:after{content:"·";margin-left:40px;color:var(--gray-300)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- квиз: фото-панель (в духе .dest-panel) с формой поверх --- */
.quiz-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-lg);
  min-height:100vh;min-height:100svh;                    /* блок на всю высоту экрана */
  background:#0f1a19;color:var(--white);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,560px);gap:var(--space-8);
  align-items:center;padding:var(--space-9)}
.quiz-panel::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url('../img/quiz_bg.webp') center/cover no-repeat}
.quiz-panel::after{content:"";position:absolute;inset:0;z-index:-1;
  /* затемнение только там, где нужно читать: мягкое пятно под заголовком слева
     и лёгкие виньетки сверху/снизу; солнце и туман в центре остаются живыми */
  background:
    radial-gradient(70% 80% at 18% 55%,rgba(10,22,20,.62) 0%,rgba(10,22,20,.3) 45%,rgba(10,22,20,0) 75%),
    linear-gradient(180deg,rgba(10,22,20,.28) 0%,rgba(10,22,20,0) 28%,rgba(10,22,20,0) 62%,rgba(10,22,20,.4) 100%)}
.quiz-panel__intro h2{text-shadow:0 2px 24px rgba(8,18,17,.35)}
.quiz-panel__intro .section-head__text{color:rgba(255,255,255,.85);text-shadow:0 1px 12px rgba(8,18,17,.45)}
/* Карточка квиза — матовое стекло, как плашки в блоке с колонной (.scene3d__content .feature-card).
   Всё перекрашивание — только внутри .quiz-panel__card: тот же квиз в модалке остаётся белым. */
.quiz-panel__card{color:var(--white);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-8) var(--space-7);
  background:rgba(14,30,28,.32);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 32px 80px -24px rgba(4,12,11,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.quiz-panel__card h3,.quiz-panel__card b,.quiz-panel__card output{color:var(--white)}
.quiz-panel__card .muted,.quiz-panel__card .online,.quiz-panel__card .consent-note{color:rgba(255,255,255,.7)}
.quiz-panel__card .field label{color:rgba(255,255,255,.72)}
.quiz-panel__card .quiz__bar{background:rgba(255,255,255,.18)}
.quiz-panel__card .quiz__bar i{background:var(--white)}
.quiz-panel__card .quiz__opts label,
.quiz-panel__card .counter{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.quiz-panel__card .quiz__opts label:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.quiz-panel__card .quiz__opts label:has(input:checked){background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.7)}
.quiz-panel__card .quiz__opts input[type=checkbox]{border-color:rgba(255,255,255,.5)}
.quiz-panel__card .quiz__opts input[type=checkbox]::before{box-shadow:inset 1em 1em var(--primary)}
.quiz-panel__card .quiz__opts input[type=checkbox]:checked{background:var(--white);border-color:var(--white)}
.quiz-panel__card .counter button,
.quiz-panel__card .tabs button,
.quiz-panel__card .alt__links a{background:transparent;color:var(--white);border-color:rgba(255,255,255,.34)}
.quiz-panel__card .counter button:hover,
.quiz-panel__card .alt__links a:hover{border-color:var(--white)}
.quiz-panel__card .tabs button.is-on{background:var(--white);border-color:var(--white);color:var(--primary)}
.quiz-panel__card select,.quiz-panel__card input[type=text],.quiz-panel__card input[type=tel],
.quiz-panel__card input[type=date]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);
  color:var(--white);color-scheme:dark}
.quiz-panel__card input::placeholder{color:rgba(255,255,255,.6)}
.quiz-panel__card select option{color:var(--black)}
.quiz-panel__card select:focus,.quiz-panel__card input:focus{border-color:rgba(255,255,255,.7);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.quiz-panel__card input[type=range]{accent-color:var(--white)}
.quiz-panel__card .alt{border-top-color:rgba(255,255,255,.18)}
.quiz-panel__card .btn{background:var(--white);border-color:var(--white);color:var(--primary)}
.quiz-panel__card .btn:hover{background:transparent;border-color:var(--white);color:var(--white)}
.quiz-panel__card .btn--ghost{background:transparent;border-color:rgba(255,255,255,.4);color:var(--white)}
.quiz-panel__card .btn--ghost:hover{border-color:var(--white)}
.quiz-panel__card .quiz__success-icon{background:rgba(255,255,255,.14);color:var(--white)}
/* простор: крупнее варианты, больше воздуха между ними и вокруг */
.quiz-panel__card .quiz__bar{margin-bottom:32px}
.quiz-panel__card .quiz__counter{margin-bottom:6px}
.quiz-panel__card .quiz__step>h3{margin-bottom:10px}
.quiz-panel__card .quiz__opts{gap:12px;margin:24px 0}
.quiz-panel__card .quiz__opts label{padding:18px 20px;gap:12px;font-size:15px;line-height:22px;border-radius:var(--radius-md)}
.quiz-panel__card .counter{padding:16px 20px;margin-bottom:12px;border-radius:var(--radius-md)}
.quiz-panel__card .quiz__nav{margin-top:32px}
.quiz-panel__card .quiz__nav .btn{min-height:52px;padding-inline:32px}

/* --- квиз --- */
.quiz-wrap{max-width:100%}
.quiz__bar{height:4px;border-radius:var(--radius-pill);background:var(--gray-200);margin-bottom:24px;overflow:hidden}
.quiz__bar i{display:block;height:100%;background:var(--primary);transition:width .3s var(--ease)}
.quiz__steps{display:grid}
.quiz__step{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease-out}
.quiz__step.is-on{visibility:visible;opacity:1;pointer-events:auto}
.quiz__success{text-align:center;padding:16px 8px}
.quiz__success-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:var(--gray-100);
  color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:24px}
.quiz__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.quiz__opts label{display:flex;gap:10px;align-items:center;padding:14px 16px;border:1px solid var(--gray-200);
  border-radius:var(--radius-sm);cursor:pointer;font-size:14px;line-height:20px;transition:border-color .2s ease-out,background-color .2s ease-out}
.quiz__opts label:hover{border-color:var(--gray-300)}
.quiz__opts label:has(input:checked){border-color:var(--primary);background:var(--gray-100)}
.quiz__opts input:checked+span{font-weight:var(--fw-head)}
/* галочка вместо системного чекбокса — тот же минимальный чек-марк, что и в остальном UI */
.quiz__opts input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;
  border:1px solid var(--gray-300);border-radius:4px;display:grid;place-content:center;cursor:pointer;
  transition:border-color .2s ease-out,background-color .2s ease-out}
.quiz__opts input[type=checkbox]::before{content:"";width:10px;height:10px;transform:scale(0);
  transition:transform .15s var(--ease);box-shadow:inset 1em 1em var(--white);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.quiz__opts input[type=checkbox]:checked{background:var(--primary);border-color:var(--primary)}
.quiz__opts input[type=checkbox]:checked::before{transform:scale(1)}
.counter{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:8px;
  padding:12px 16px;border:1px solid var(--gray-200);border-radius:var(--radius-sm)}
.counter button{width:36px;height:36px;border:1px solid var(--gray-300);border-radius:50%;background:var(--white);
  font-size:18px;cursor:pointer;transition:border-color .2s ease-out,background-color .2s ease-out}
.counter button:hover{border-color:var(--primary);background:transparent}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tabs button{flex:1;min-height:44px;padding:0 12px;border:1px solid var(--gray-200);border-radius:var(--radius-pill);
  background:var(--white);font:var(--fw-head) 14px/1 var(--font);cursor:pointer;transition:all .2s ease-out}
.tabs button.is-on{background:var(--primary);border-color:var(--primary);color:var(--white)}
.quiz__nav{display:flex;gap:12px;justify-content:space-between;margin-top:24px}
input[type=range]{width:100%;accent-color:var(--primary)}
.date-field{cursor:pointer}

/* --- модалки и формы --- */
/* .modal — flex-контейнер на весь экран: окно центрируется и по вертикали, и по
   горизонтали независимо от высоты контента (раньше margin:6vh auto прижимал
   окно к верху, если контент был короче 88vh). */
.modal{position:fixed;inset:0;z-index:95;display:none;overflow-y:auto}
/* открытие/закрытие держится на двух классах: is-open даёт финальное состояние
   и проигрывает *-in, is-closing держит модалку отрисованной (display:flex),
   пока JS (closeModal) не доиграет *-out и не снимет класс по animationend —
   иначе окно пропадало бы мгновенно, без анимации исчезновения. */
.modal.is-open,.modal.is-closing{display:flex;align-items:center;justify-content:center;padding:6vh 16px}
.modal__bg{position:absolute;inset:0;background:rgba(16,20,19,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal.is-open .modal__bg{animation:modal-bg-in .25s var(--ease) forwards}
.modal.is-closing .modal__bg{animation:modal-bg-out .2s var(--ease) forwards}
@keyframes modal-bg-in{from{opacity:0}to{opacity:1}}
@keyframes modal-bg-out{from{opacity:1}to{opacity:0}}
.modal__win{position:relative;width:100%;max-width:520px;margin:auto;padding:32px;background:var(--white);
  border-radius:var(--radius-lg);max-height:88vh;overflow:auto;box-shadow:0 24px 80px rgba(16,20,19,.24)}
/* лёгкий разворот при появлении и уход «пружиной» — overshoot вместо обычного ease */
.modal.is-open .modal__win{animation:modal-win-in .45s cubic-bezier(.34,1.56,.64,1) both}
.modal.is-closing .modal__win{animation:modal-win-out .2s cubic-bezier(.32,0,.67,0) both}
@keyframes modal-win-in{from{opacity:0;transform:scale(0) rotate(12.5deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes modal-win-out{from{opacity:1;transform:scale(1) rotate(0deg)}to{opacity:0;transform:scale(0) rotate(0deg)}}
.modal__win--wide{max-width:680px}
.modal__win h3{margin-top:0}
.modal__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid transparent;border-radius:50%;
  background:var(--gray-100);font-size:20px;line-height:1;cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out}
.modal__close:hover{background:transparent;border-color:var(--black)}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:6px;font-size:12px;line-height:16px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gray-700)}
.phone{display:flex;gap:8px}
.phone select{width:132px;flex:none}
.alt{margin-top:24px;padding-top:24px;border-top:1px solid var(--gray-200);text-align:center}
.alt__links{display:flex;gap:8px;justify-content:center;margin:12px 0}
.alt__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--radius-pill);
  border:1px solid var(--gray-200);font-size:14px;text-decoration:none;transition:border-color .2s ease-out}
.alt__links a:hover{border-color:var(--primary)}
.online{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-700)}
.online:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.consent-note{font-size:12px;line-height:18px;color:var(--gray-500)}
.form-msg{margin-top:12px;font-size:14px}
.form-msg--err{color:#B3261E}

/* --- плавающие элементы --- */
.float-wa{position:fixed;right:24px;bottom:24px;z-index:58;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:var(--black)}
.float-wa__photo{position:relative;display:block;width:64px;height:64px;border-radius:50%;background:var(--gray-100);
  box-shadow:0 10px 30px -8px rgba(16,20,19,.35);transition:transform .4s var(--ease)}
.float-wa:hover .float-wa__photo{transform:translateY(-3px)}
.float-wa__photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* кнопка связи на фото: выступает за край круга, белое кольцо отделяет её от снимка */
.float-wa__badge{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;
  background:var(--primary);color:var(--white);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--white)}
.float-wa__badge svg{width:14px;height:14px}
.float-wa__badge svg path[fill="#fff"]{fill:none}
/* первый экран показываем без плавашки — появляется, когда Hero уехал вверх */
.float-wa{transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
body.at-hero .float-wa{opacity:0;visibility:hidden;transform:translateY(12px);transition-delay:0s,0s,.3s}
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:59;max-width:760px;margin:0 auto;
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:16px 24px;background:var(--white);border-radius:var(--radius-md);
  box-shadow:0 16px 48px rgba(16,20,19,.16);font-size:13px;line-height:20px}

/* ======================================================================
   17. Подвал (§35)
   ====================================================================== */
.site-footer{margin-top:var(--section-y);padding-top:96px;padding-bottom:40px;background:var(--primary);color:var(--white)}
.site-footer__grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:48px}
.site-footer__brand{grid-column:1 / span 4}
.site-footer__col{grid-column:span 2}
.site-footer__col--wide{grid-column:span 3}
.site-footer__brand h4{font-size:17px;font-weight:var(--fw-head);letter-spacing:.06em;color:var(--white);text-transform:uppercase}
.site-footer__tagline{margin:16px 0 0;max-width:280px;font-size:13px;line-height:20px;color:rgba(255,255,255,.62)}
.site-footer h4{margin:0 0 16px;font-size:12px;line-height:16px;font-weight:var(--fw-head);letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer a{color:rgba(255,255,255,.85);text-decoration:none;font-size:14px;line-height:20px;transition:color .2s ease-out}
.site-footer a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.site-footer__social{display:flex;gap:8px;margin-top:16px}
.site-footer__social a{width:44px;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--white)}
.site-footer__social a:hover{background:rgba(255,255,255,.12)}
.site-footer__social svg{width:20px;height:20px}
.site-footer__social svg path[fill="#fff"]{fill:none}
.site-footer__bottom{margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:13px;line-height:20px;color:rgba(255,255,255,.6)}
.site-footer__bottom .row{gap:20px}
.site-header__msg svg{width:20px;height:20px}

/* ======================================================================
   18. Появление блоков (§44) — только opacity/transform
   ====================================================================== */
.js-anim .reveal{opacity:0;transform:translateY(20px)}
.js-anim .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

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

/* ======================================================================
   19. Адаптив общих компонентов
   ====================================================================== */
@media (max-width:1279px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .impressions{margin-bottom:72px}
  .impressions__row{gap:20px}
  .impression__body{left:22px;right:22px;top:22px}
  .trust-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dest-rail--pair{grid-auto-columns:calc((100% - 2 * var(--gap)) / 3)}
  /* планшет: колонка в 3 из 8 слишком узкая для четырёх цитат поверх фото —
     фото во всю ширину, цитаты сеткой 2×2 под ним, текст ниже */
  .lead-magnet{row-gap:var(--space-7)}
  .lead-magnet__photo-wrap{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lead-magnet__photo{grid-column:1 / -1;aspect-ratio:16/9;object-position:50% 25%}
  .lead-magnet__quote{position:static;max-width:none;box-shadow:none;background:var(--gray-100)}
  .lead-magnet__content{grid-column:1 / -1}
  .tiles-service{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-head{grid-template-columns:1fr;gap:32px}
  .book{position:static}
  .reviews-row{gap:32px}
  .reviews-row__photo{flex-basis:300px;width:300px}
  .section-head--row .section-head__title{grid-column:1 / span 5}
  .section-head--row .section-head__aside{grid-column:6 / -1}
  .section-head--row .section-head__ctrl{grid-column:1 / -1;justify-self:start;padding-bottom:0}
  .site-footer__brand{grid-column:1 / span 4}
  .site-footer__col{grid-column:span 2}
  .quiz-panel{grid-template-columns:1fr;padding:var(--space-7)}
  .quiz-panel__card{max-width:560px;width:100%;margin-inline:auto;padding:var(--space-7)}
}
@media (max-width:767px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .dest-group+.dest-group{margin-top:32px}
  .dest-group__head{margin-bottom:16px}
  .dest-rail--pair{grid-auto-columns:78%}
  .lead-magnet__photo-wrap,.lead-magnet__content{grid-column:1 / -1}
  .lead-magnet__photo-wrap{grid-template-columns:1fr}
  .lead-magnet__photo{aspect-ratio:4/3;border-radius:var(--radius-md)}
  .lead-magnet__list{grid-template-columns:1fr}
  .lead-magnet__list li:nth-child(2){border-top:1px solid var(--gray-300)}
  .lead-magnet__subtitle{margin-top:16px;font-size:15px;line-height:22px;border-radius:var(--radius-md)}
  .lead-magnet__list{margin-top:24px;padding:4px 20px;border-radius:var(--radius-md)}
  .lead-magnet .btn{margin-top:32px;width:100%}
  .impressions{margin-bottom:64px}
  .impressions__row{gap:12px}
  .impression__body{left:20px;right:20px;top:20px}
  .cols-2,.ex-cards,.acc__cols{grid-template-columns:1fr}
  .cols-2-list{columns:1}
  .quiz__opts{grid-template-columns:1fr}
  .quiz-panel{padding:var(--space-5);border-radius:var(--radius-md)}
  .quiz-panel__card{padding:var(--space-5)}
  .filters__grid{grid-template-columns:1fr}
  .filters{padding:16px}
  .trust-quotes,.tiles-service{grid-template-columns:1fr}
  .reviews-row{flex-direction:column;align-items:stretch;gap:24px}
  .reviews-row__photo{flex:none;width:100%}
  .logos--left{justify-content:flex-start}
  .cta-strip{padding:24px;margin-top:32px}
  .cta-strip .btn{width:100%}
  .cta-strip>.row{width:100%}
  .box{padding:20px}
  .modal.is-open,.modal.is-closing{padding:0}
  .modal__win{margin:0;min-height:100vh;border-radius:0;padding:24px 16px}
  .sticky-bar{display:flex}
  body.has-sticky-bar{padding-bottom:76px}
  .has-sticky-bar .float-wa{bottom:88px}
  /* на мобильном ярлык под фото съедал строку описания и наезжал на кнопки
     карточки цены — оставляем только круглую кнопку с бейджем WhatsApp */
  .float-wa{right:16px;bottom:16px}
  .float-wa__photo{width:52px;height:52px}
  .float-wa__badge{width:22px;height:22px}
  .float-wa__badge svg{width:12px;height:12px}
  .cookie-bar{bottom:12px;font-size:12px;padding:12px 16px}       /* виджет связи (z-index 58) уходит под плашку, а не поднимает её */
  .has-sticky-bar .cookie-bar{bottom:88px}
  .article-body{font-size:16px;line-height:26px}
  .tile--big,.tile{min-height:240px}
  .site-footer{padding-top:64px}
  .site-footer__grid{row-gap:32px}
  .site-footer__brand,.site-footer__col{grid-column:1 / -1}
  .site-footer__bottom{margin-top:40px;flex-direction:column;gap:16px}
  .acc__head{padding:16px}
  .acc__body{padding:16px}
  .acc__gallery{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .acc__gallery::-webkit-scrollbar{display:none}
  .acc__gallery>*:first-child{grid-column:auto;grid-row:auto}
  .acc__gallery img,.acc__gallery .media-ph{scroll-snap-align:start}
  .acc__gallery-nav{display:flex;position:absolute;inset:0;justify-content:space-between;align-items:center;pointer-events:none}
  .acc__gallery-nav button{pointer-events:auto;width:36px;height:36px;margin:0 8px;border:0;border-radius:50%;
    background:rgba(255,255,255,.92);font-size:15px;cursor:pointer}
  .acc__gallery-dots{display:flex;gap:5px;justify-content:center;margin-top:8px}
  .acc__gallery-dots i{width:5px;height:5px;border-radius:50%;background:var(--gray-300);display:block}
  .acc__gallery-dots i.is-on{background:var(--primary);width:14px;border-radius:3px}
  .acc__head{flex-wrap:wrap;align-items:center;gap:8px}
  .acc__title{flex:1 1 0;min-width:0}
  .acc__price{order:3;width:100%;margin-left:0}
}

/* сетки, которые на телефоне превращаются в свайп-ленту */
/* на телефоне карточки впечатлений листаются лентой, как остальные сетки */
@media (max-width:767px){
  .impressions__row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-inline:var(--margin);margin-inline:calc(-1 * var(--margin));
    scroll-padding-inline:var(--margin);padding-bottom:8px}
  .impressions__row::-webkit-scrollbar{display:none}
  .impressions__row>*{scroll-snap-align:start}
}
@media (max-width:767px){
  .grid.carousel-mobile,.grid.desktop-grid{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:none;
    padding-inline:var(--margin);margin-inline:calc(-1 * var(--margin));
  }
  .grid.carousel-mobile::-webkit-scrollbar,.grid.desktop-grid::-webkit-scrollbar{display:none}
  .grid.carousel-mobile,.grid.desktop-grid,.reviews-grid,.dest-rail{scroll-padding-inline:var(--margin)}
  .grid.carousel-mobile>*,.grid.desktop-grid>*{scroll-snap-align:start}
  .grid.cat-tiles{grid-template-columns:1fr}
}

/* ---- 3D-сцена с колонной как фон блоков «бренд» / «впечатления» / «ассистент» ----
   Сцена лежит подложкой на всю тройку блоков и липнет к экрану, пока они проходят
   мимо: колонна стоит на месте, контент едет поверх, а камера по этому же ходу
   облетает её вдоль её же оси (раскадровка — frontend/src/tour.js).
   Высота 100svh, чтобы панель мобильного браузера не дёргала кадр при скролле. */
/* фон сцены — средний цвет неба-фотографии за колонной (static/img/scene/sky.webp) */
.scene3d{position:relative;isolation:isolate;background:#5f808a;overflow-x:clip;
  /* шторка кадра: бока и скругление ведёт scene3d.js по входу и выходу сцены.
     overflow-x:clip (не hidden!) — иначе .scene3d станет отдельным скролл-контейнером
     и порвёт слежение scene3d.js за скроллом документа (position:sticky внутри) */
  clip-path:none}
.scene3d.is-iris{clip-path:inset(0 var(--iris,0px) round var(--iris-r,0px))}
/* Переменные, которые скрипты пишут каждый кадр прокрутки и которые читает только сам
   элемент, — без наследования: иначе каждая запись пересчитывает стили всего поддерева
   (у карточек сцены и квиза в нём backdrop-filter). Те, что читают ::before/::after
   (--dir-read, --dir-frame, --py) или потомки (--in), остаются наследуемыми. */
@property --x{syntax:'<number>';inherits:false;initial-value:0}
@property --hl{syntax:'<number>';inherits:false;initial-value:0}
@property --dir-haze{syntax:'<number>';inherits:false;initial-value:0}
@property --iris{syntax:'<length>';inherits:false;initial-value:0px}
@property --iris-r{syntax:'<length>';inherits:false;initial-value:0px}
.scene3d__stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.scene3d__sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  /* lvh: экран при спрятанной адресной строке. По svh сцена была ниже экрана, как
     только строка уезжала, — внизу оставалась пустая полоса фона */
  height:100lvh;
  overflow:hidden;
}
.scene3d__mount{position:absolute;inset:0}
.scene3d__mount canvas{display:block}
/* Режим готовых кадров (телефон в портрете, html.column-seq): кадры, прозрачный холст
   виджета и слой точек лежат в одном и том же прямоугольнике с пропорцией кадров,
   вписанном в экран как cover, — поэтому точки стоят на своих местах на любом телефоне. */
.scene3d__seq{display:none}
.scene3d__hotspots-box{display:none}
html.column-seq .scene3d__seq,
html.column-seq .scene3d__mount,
html.column-seq .scene3d__hotspots-box{
  display:block;position:absolute;inset:auto;left:50%;top:50%;
  width:max(100%, calc(100vh * 720 / 1566));width:max(100%, calc(100lvh * 720 / 1566));
  height:auto;aspect-ratio:720 / 1566;transform:translate(-50%,-50%)}
html.column-seq .scene3d__hotspots-box{pointer-events:none}
.scene3d__content{position:relative;z-index:2}
/* Паузы: прокрутка без контента, в которой камера — единственное, что происходит.
   Без них каждый проезд наполовину закрыт карточками и не читается. */
.scene3d__gap{height:55vh;height:55svh}
.scene3d__gap--open{height:100vh;height:100svh;display:flex;align-items:flex-start;justify-content:center;
  padding-top:calc(var(--header-h,72px) + 12vh);padding-top:calc(var(--header-h,72px) + 12svh);box-sizing:border-box}
.scene3d__lead{margin:0;text-align:center;max-width:16ch;margin-inline:auto;text-wrap:balance;
  text-shadow:0 2px 24px rgba(8,18,17,.5)}
.scene3d__gap--close{height:45vh;height:45svh}
/* На телефоне блоки высокие, и в паузу в 55svh текст заходит сверху и снизу —
   середина экрана так и не освобождается, а точки на колонне появляются только
   на свободной середине. */
@media (max-width:719px){.scene3d__gap:not(.scene3d__gap--open):not(.scene3d__gap--close){height:80vh;height:80svh}}
@media (prefers-reduced-motion:reduce){
  .scene3d__gap:not(.scene3d__gap--open){display:none}
  .scene3d__gap--open{height:auto;padding-block:var(--section-y)}
}
/* Трек блока: секция липнет к экрану, пока трек проходит мимо. Хвост трека
   (высоту трека) и точку прилипания (top) ставит scene3d.js по высоте блока и
   экрана: невысокий блок встаёт по центру под шапкой, высокий — низом к низу
   экрана. Отступ сверху у секции не нужен — блоки разводят паузы сцены. */
.scene3d__pin{position:relative}
.scene3d__pin>.section{position:sticky;top:0;padding-top:0}
@media (prefers-reduced-motion:reduce){
  .scene3d__pin>.section{position:relative;padding-top:var(--section-y)}
}
/* Стыки с белыми блоками сверху и снизу: сцена не начинается рубленым краем,
   а проявляется из страницы и в неё же уходит. */
.scene3d::before,
.scene3d::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:140px;
  z-index:1;
  pointer-events:none;
}
/* белые растяжки на стыках убраны: вход и выход теперь делает шторка (--iris),
   а градиент в белое поверх неё читался бы как туман в окне */
.scene3d::before,.scene3d::after{display:none}

/* Вуаль живёт на самой сцене, а не на контенте: она приклеена к экрану вместе с
   колонной, поэтому низ кадра затемнён всегда — под тем, что сейчас едет внизу, —
   а середина остаётся той картинкой, ради которой всё это считается. Плюс мягкая
   виньетка по углам: кадр собирается к центру. */
.scene3d__sticky::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%, transparent 45%, rgba(10,22,21,.34) 100%),
    linear-gradient(180deg,
      rgba(10,22,21,.34) 0%,
      rgba(10,22,21,.10) 18%,
      rgba(10,22,21,.06) 40%,
      rgba(10,22,21,.18) 60%,
      rgba(10,22,21,.50) 84%,
      rgba(10,22,21,.66) 100%);
}

/* Воздух. Колонна не «загружается» в кадр, а выходит из дымки цвета самой сцены
   и в неё же уходит: плотность `--dir-haze` считает scene3d.js по часам сцены —
   единица на въезде и выезде, ноль на битах. Край дымки плотнее центра, поэтому
   силуэт проявляется изнутри наружу. `--dir-frame` сжимает виньетку к центру на
   битах: кадр собирается, как на длинном объективе. */
.scene3d__air{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 46%, rgba(124,156,164,.55) 0%, #5f808a 78%),
    #5f808a;
  opacity:var(--dir-haze,0);
}
.scene3d__sticky::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(70% 62% at 50% 46%, transparent 55%, rgba(8,18,17,.42) 100%);
  opacity:var(--dir-frame,0);
}

/* Заголовки поверх сцены режутся на строки (scene3d.js → splitLines), и каждая
   выезжает из-под своей маски. Нижний припуск — чтобы маска не срезала хвосты «у», «д». */
.scene3d .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.scene3d .ln__i{display:block;will-change:transform,opacity;transform-origin:0 100%}
.scene3d__content .why-grid__cards{perspective:1400px}

/* Передний план: гроздья листвы, которые СТОЯТ В МИРЕ между камерой и колонной
   (FOLIAGE в frontend/src/tour.js). Каждый кадр ColumnBlender.jsx (Foreground)
   проецирует точку грозди через камеру: где она на экране, какого размера, куда
   у неё «верх». Поэтому в разных ракурсах листва разная, при облёте проплывает с
   настоящим параллаксом, а на крупных планах оказывается позади камеры. Картинки
   уже размыты и тёмные — они ближе фокуса и вне ключевого света. */
/* над вуалью (::after, z 3): вуаль — атмосфера за стеклом, а листья у самого
   объектива; под ней нижняя полоса гасила их почти в чёрный */
.scene3d__fore{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.scene3d__sprite{position:absolute;left:0;top:0;max-width:none;visibility:hidden;
  will-change:transform,opacity;user-select:none;pointer-events:none}

/* Графика из макета: тонкая дуга за колонной («плюсы» стали точками, см. ниже) */
.scene3d__decor{position:absolute;inset:0;z-index:2;pointer-events:none}
.scene3d__decor::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(74vh,52vw);
  aspect-ratio:1;
  transform:translate(-50%,-42%);
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
}
/* ---- точки на колонне (Hotspots.jsx) ----
   Бывшие декоративные «плюсы», теперь с делом: точка сидит на камне и едет вместе
   с ним, нажатие открывает карточку. Точки видны, только пока камера стоит в паузе
   между блоками, — прозрачность им пишет сам виджет каждый кадр, поэтому здесь нет
   transition на opacity: он бы отставал от камеры. */
.scene3d__hotspots{position:absolute;inset:0;z-index:4;pointer-events:none}
/* Прелоадер главной: страница открывается, когда 3D-колонна готова (инлайновый скрипт
   в index.html ставит html.is-preloading и ведёт кольцо по скачанным байтам модели).
   Без JS класса нет — заслонки не видно. */
.page-preloader{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--primary);color:#fff;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s var(--ease),visibility 0s linear .7s}
html.is-preloading{overflow:hidden}
html.is-preloading .page-preloader{opacity:1;visibility:visible;pointer-events:auto;transition:none}
.page-preloader__mark{position:relative;width:96px;height:96px}
.page-preloader__mark svg{display:block;width:100%;height:100%;overflow:visible}
.page-preloader__ring-wrap{transform:rotate(-90deg);transform-origin:50% 50%}
.page-preloader__track,.page-preloader__ring{fill:none;stroke-width:1.25}
.page-preloader__track{stroke:rgba(255,255,255,.16)}
.page-preloader__ring{stroke:#fff;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.page-preloader__b{fill:#fff}
.page-preloader.is-indeterminate .page-preloader__ring-wrap{animation:preloaderSpin 1.6s linear infinite}
@keyframes preloaderSpin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.page-preloader__pct{font-size:13px;letter-spacing:.12em;font-variant-numeric:tabular-nums;opacity:.85}
.page-preloader__name{font-size:11px;font-weight:var(--fw-head);letter-spacing:.3em;text-transform:uppercase;opacity:.6}
/* лёгкий профиль сцену не ждёт — считать нечего: кольцо просто идёт по кругу */
html.is-preloading-lite .page-preloader__pct{visibility:hidden}
html.is-preloading-lite .page-preloader__ring{stroke-dashoffset:72}
html.is-preloading-lite .page-preloader__ring-wrap{animation:preloaderSpin 1.6s linear infinite}
@media (prefers-reduced-motion:reduce){.page-preloader.is-indeterminate .page-preloader__ring-wrap,
  html.is-preloading-lite .page-preloader__ring-wrap{animation:none}}
.hotspot-anchor{pointer-events:none}
.hotspot{
  position:relative;display:block;width:44px;height:44px;padding:0;margin:0;
  border:0;background:none;color:#fff;cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
.hotspot:focus{outline:none}
.hotspot__ring{
  position:absolute;inset:7px;border-radius:50%;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(12,26,24,.22);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),background-color .25s,border-color .25s;
}
/* «дыхание»: второй контур расходится и тает — точка зовёт, но не мигает.
   Только у показанной точки (data-live ставит Hotspots.jsx): пять бесконечных
   анимаций в скрытом слое сцены заставляли браузер пересобирать слои всей
   страницы на каждом кадре — на любом блоке, даже далеко от колонны. */
.hotspot__ring::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);opacity:0;
}
.hotspot[data-live="true"] .hotspot__ring::after{
  animation:hotspot-breathe 3.2s cubic-bezier(.2,.6,.3,1) .9s infinite;
}
@keyframes hotspot-breathe{0%{transform:scale(.62);opacity:.9}70%,100%{transform:scale(1.3);opacity:0}}
/* Появление. На пёстром камне тонкий стеклянный кружок сливается с фактурой, поэтому
   точка входит заметно: кружок раскрывается из нуля с белой вспышкой, плюс
   доворачивается на место, от точки расходится одна волна, номер выезжает следом.
   Срабатывает каждый раз, когда виджет ставит data-live (точка вышла в кадр);
   прозрачность при этом по-прежнему ведёт виджет. */
.hotspot__ring{box-shadow:0 0 0 1px rgba(6,16,15,.18),0 4px 18px rgba(6,16,15,.35)}
.hotspot::before{
  content:"";position:absolute;inset:7px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);opacity:0;pointer-events:none;
}
/* fill только backwards: после входа кадр отдаёт управление hover и is-open */
.hotspot[data-live="true"] .hotspot__ring{animation:hotspot-ring-in .9s cubic-bezier(.2,.8,.2,1) backwards}
.hotspot[data-live="true"] .hotspot__mark{animation:hotspot-mark-in .8s cubic-bezier(.3,1.4,.4,1) .12s backwards}
.hotspot[data-live="true"]::before{animation:hotspot-burst 1.1s cubic-bezier(.15,.6,.3,1) .1s backwards}
.hotspot[data-live="true"] .hotspot__tag{animation:hotspot-tag-in .6s cubic-bezier(.2,.7,.2,1) .3s backwards}
@keyframes hotspot-ring-in{
  0%{transform:scale(.2);background-color:rgba(255,255,255,.95);border-color:#fff}
  45%{transform:scale(1.14);background-color:rgba(255,255,255,.55)}
  100%{transform:scale(1);background-color:rgba(12,26,24,.22);border-color:rgba(255,255,255,.62)}
}
@keyframes hotspot-mark-in{
  0%{transform:translate(-50%,-50%) rotate(-90deg) scale(0)}
  100%{transform:translate(-50%,-50%) rotate(0) scale(1)}
}
@keyframes hotspot-burst{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes hotspot-tag-in{0%{opacity:0;transform:translate(-8px,-50%)}100%{opacity:1;transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){
  .hotspot[data-live="true"] :is(.hotspot__ring,.hotspot__mark,.hotspot__tag),
  .hotspot[data-live="true"]::before{animation:none}
}
.hotspot__mark{
  position:absolute;left:50%;top:50%;width:12px;height:12px;
  transform:translate(-50%,-50%);transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.hotspot__mark::before,.hotspot__mark::after{
  content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%);
  transition:background-color .25s;
}
.hotspot__mark::before{width:100%;height:1.5px}
.hotspot__mark::after{width:1.5px;height:100%}
.hotspot__tag{
  position:absolute;left:44px;top:50%;transform:translateY(-50%);
  display:flex;align-items:baseline;gap:10px;white-space:nowrap;
  font-size:13px;line-height:1;color:#fff;text-shadow:0 1px 10px rgba(6,16,15,.55);
  pointer-events:none;
}
.hotspot__num{font-size:11px;letter-spacing:.14em;opacity:.78;font-variant-numeric:tabular-nums}
.hotspot__title{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.hotspot:hover .hotspot__ring,.hotspot:focus-visible .hotspot__ring{
  transform:scale(1.14);background:rgba(12,26,24,.4);border-color:#fff;
}
.hotspot:focus-visible .hotspot__ring{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.hotspot:hover .hotspot__title,.hotspot:focus-visible .hotspot__title{opacity:1;transform:none}
.hotspot.is-open .hotspot__ring{background:#fff;border-color:#fff;transform:scale(1.05)}
.hotspot.is-open .hotspot__ring::after{animation:none;opacity:0}
.hotspot.is-open .hotspot__mark{transform:translate(-50%,-50%) rotate(45deg)}
.hotspot.is-open .hotspot__mark::before,.hotspot.is-open .hotspot__mark::after{background:var(--primary)}
.hotspot.is-open .hotspot__tag{opacity:0}

/* Карточка точки. Положение пишет виджет (translate3d к точке), CSS — только вид.
   Тонкая «выноска» соединяет карточку с точкой, с той стороны, где точка. */
.hotspot-card{
  position:absolute;left:0;top:0;z-index:5;
  width:340px;max-width:calc(100% - 32px);box-sizing:border-box;
  padding:22px 24px 24px;border-radius:18px;
  background:rgba(14,30,28,.56);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 30px 70px -30px rgba(4,12,11,.6);
  color:#fff;pointer-events:auto;
  opacity:0;transition:opacity .4s ease;
}
.hotspot-card.is-in{opacity:1}
/* выноска: от края кружка точки (радиус 15) до карточки; LEAD = 52 в Hotspots.jsx */
.hotspot-card__lead{position:absolute;top:var(--lead-y,30px);height:1px;width:37px;background:rgba(255,255,255,.7)}
.hotspot-card[data-side="right"] .hotspot-card__lead{left:-37px}
.hotspot-card[data-side="left"] .hotspot-card__lead{right:-37px}
.hotspot-card[data-side="sheet"] .hotspot-card__lead{display:none}
.hotspot-card__kicker{
  display:flex;align-items:center;gap:10px;margin:0 40px 12px 0;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);
}
.hotspot-card__num{padding:4px 8px;border:1px solid rgba(255,255,255,.34);border-radius:999px;letter-spacing:.1em;color:#fff}
.hotspot-card__title{margin:0 0 10px;font-size:22px;line-height:1.2;font-weight:500;color:#fff}
.hotspot-card__text{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.hotspot-card__link{
  display:inline-block;margin-top:16px;padding-bottom:3px;font-size:14px;color:#fff;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .2s;
}
.hotspot-card__link:hover{border-color:#fff}
.hotspot-card__close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.26);background:transparent;cursor:pointer;
  transition:background-color .2s,border-color .2s;
}
.hotspot-card__close:hover,.hotspot-card__close:focus-visible{background:rgba(255,255,255,.12);border-color:#fff;outline:none}
.hotspot-card__close span,.hotspot-card__close span::after{
  position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#fff;
  transform:translate(-50%,-50%) rotate(45deg);
}
.hotspot-card__close span::after{content:"";transform:translate(-50%,-50%) rotate(90deg)}
/* телефон: не выноска, а лист снизу экрана */
@media (max-width:719px){
  /* над плавающими кнопками видео и чата внизу экрана */
  .hotspot-card{left:16px;right:16px;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);
    width:auto;max-width:none;transform:none!important}
  .hotspot__tag{display:none}
}

/* Пока на экране читают блок, кадр отходит на второй план: вуаль плотнее
   (`--dir-read` ведёт scene3d.js), фокус с камня уводит сам виджет. */
.scene3d__sticky::after{opacity:calc(.68 + .32 * var(--dir-read, 1))}
/* Контент лежит поверх сцены на всю ширину — пустые места в нём не должны
   перехватывать нажатия на точки. Кликабельным остаётся только то, что видно. */
.scene3d__content,.scene3d__gap{pointer-events:none}
.scene3d__content :is(h2,h3,p,a,button,.feature-card,.stat,.impression,.tiles-service>div,.cta-strip){pointer-events:auto}

/* ---- содержимое поверх сцены ----
   Блоки внутри написаны под белый фон, поэтому здесь они перекрашиваются целиком:
   текст светлый, а карточки из плотных белых становятся стеклянными, чтобы колонна
   читалась сквозь них и блок не выглядел наклейкой поверх рендера. */
.scene3d__content{color:var(--white)}
.scene3d__content h2,
.scene3d__content h3,
.scene3d__content b,
.scene3d__content .stat__value,
.scene3d__content .feature-card__title{color:var(--white)}
.scene3d__content p,
.scene3d__content .section-head__text,
.scene3d__content .muted,
.scene3d__content .small,
.scene3d__content .why-grid__text p,
.scene3d__content .feature-card__text,
.scene3d__content .stat__label,
.scene3d__content .tiles-service span{color:rgba(255,255,255,.76)}

.scene3d__content .feature-card,
.scene3d__content .tiles-service div{
  /* --hl — подсветка, которая бежит по карточкам, пока блок стоит (scene3d.js) */
  background:rgba(255,255,255,calc(.10 + .10 * var(--hl, 0)));
  border:1px solid rgba(255,255,255,calc(.16 + .22 * var(--hl, 0)));
  box-shadow:0 18px 40px -24px rgba(8,18,17,calc(.55 * var(--hl, 0)));
  -webkit-backdrop-filter:blur(14px) saturate(120%);
          backdrop-filter:blur(14px) saturate(120%);
  color:var(--white);
}
.scene3d__content .feature-card:hover,
.scene3d__content .tiles-service div:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.3);
}
.scene3d__content .feature-card:hover .feature-card__text{color:rgba(255,255,255,.86)}
.scene3d__content .feature-card{align-items:center;gap:18px;padding:20px 24px}
/* иконка — не белая плашка, а стеклянное кольцо: штрих рисуется на входе (scene3d.js → draw) */
.scene3d__content .feature-card__icon{
  width:48px;height:48px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.24), rgba(255,255,255,.03) 62%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px -10px rgba(6,16,15,.6);
  color:var(--white);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.scene3d__content .feature-card__icon svg{width:22px;height:22px;stroke-width:1.4}
.scene3d__content .feature-card:hover .feature-card__icon{
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.36), rgba(255,255,255,.08) 62%);
  border-color:rgba(255,255,255,.55);color:var(--white);transform:scale(1.06)}

/* цифры: крупное число над волосяной линией, иконка — строчная, у подписи.
   Линия прочерчивается по входу (--in пишет scene3d.js) */
.scene3d__content .stat{position:relative;padding-top:22px;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center}
.scene3d__content .stat::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,255,255,.06));
  transform:scaleX(var(--in, 1));transform-origin:0 50%}
.scene3d__content .stat__value{grid-column:1 / -1;grid-row:1;
  font-size:clamp(40px, 3.6vw, 60px);line-height:1;font-weight:300;letter-spacing:-.03em}
.scene3d__content .stat__icon{grid-column:1;grid-row:2;width:auto;height:auto;margin:14px 0 0;
  background:none;border:0;border-radius:0;color:rgba(255,255,255,.62)}
.scene3d__content .stat__icon svg{width:15px;height:15px;stroke-width:1.6}
.scene3d__content .stat__label{grid-column:2;grid-row:2;margin-top:14px;max-width:none;
  font-size:13px;line-height:18px;letter-spacing:.01em}
/* «Витрины» — сплошная светлая карточка, а не стекло: даже лёгкая прозрачность
   с блюром давала грязное пятно там, где сзади камень сцены — задний план должен
   быть полностью перекрыт, читается только тень острова поверх карточки. */
.scene3d__content .impression__card{background:var(--white)}
.scene3d__content .btn{background:var(--white);border-color:var(--white);color:var(--primary)}
.scene3d__content .btn:hover{background:transparent;border-color:var(--white);color:var(--white)}
.scene3d__content .cta-strip{background:none}

@media (max-width:760px){
  .scene3d__decor{display:none}
  /* на узком экране колонна занимает почти весь кадр, и заголовки ложатся прямо
     на камень — вуаль сверху приходится усиливать */
  .scene3d__sticky::after{
    background:
      radial-gradient(120% 85% at 50% 42%, transparent 45%, rgba(10,22,21,.32) 100%),
      linear-gradient(180deg,
        rgba(10,22,21,.58) 0%,
        rgba(10,22,21,.34) 22%,
        rgba(10,22,21,.22) 44%,
        rgba(10,22,21,.34) 64%,
        rgba(10,22,21,.56) 86%,
        rgba(10,22,21,.70) 100%);
  }
}
/* Сцена тяжёлая и декоративная: тем, кто просил меньше движения, она не липнет
   к экрану и не ездит — просто стоит фоном на один экран. */
@media (prefers-reduced-motion:reduce){
  .scene3d__sticky{position:relative}
}

/* ======================================================================
   20. Главная — редакционный проход (2026-09-24)
   Блоки вне Hero, сцены с колонной и «Выбора наших клиентов»: крупная
   типографика, асимметричные сетки, движение по скроллу (static/js/home.js).
   Тексты, состав и порядок блоков прежние — меняется только оформление.
   ====================================================================== */
.is-home{--ease-out:cubic-bezier(.16,1,.3,1);--fs-sect:clamp(32px,6vw,88px)}

/* --- заголовки секций: крупно, плотно; строки выезжают из-под маски --- */
.home-dest h2,.home-lead h2,.home-reviews h2,.home-articles h2{
  font-size:var(--fs-sect);line-height:1.12;letter-spacing:-.035em}
/* сверху запас под кратку «Й» — иначе маска её срезает */
.h-split .h-line{display:block;overflow:hidden;padding:.2em 0 .1em;margin:-.2em 0 -.1em}
.h-split .h-line>span{display:block;transform:translateY(110%);
  transition:transform 1.1s var(--ease-out) calc(var(--i) * 90ms)}
.h-split.is-lines-in .h-line>span{transform:none}

/* --- бегущая строка: крупный кегль, заливка чередуется с контуром.
       Скорость и наклон следуют за прокруткой (home.js), без JS — CSS-анимация --- */
.is-home .ticker{border-block:0;padding:clamp(24px,3vw,48px) 0 0;background:var(--white)}
.is-home .ticker__track{gap:0;padding:0;animation-duration:80s}
.is-home .ticker.is-js .ticker__track{animation:none}
.is-home .ticker__track span{display:inline-flex;align-items:center;
  font-size:clamp(28px,3.4vw,64px);line-height:1.1;font-weight:var(--fw-head);letter-spacing:-.035em;
  text-transform:uppercase;color:var(--primary)}
.is-home .ticker__track span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px var(--primary)}
.is-home .ticker__track span:after{content:"";flex:none;width:.14em;height:.14em;margin:0 .9em;
  border-radius:50%;background:var(--primary);opacity:.35;-webkit-text-stroke:0}

/* --- «Новые впечатления»: карточки 3:4 лесенкой, соседние гаснут при наведении --- */
.home-dest .dest-panel{padding:clamp(48px,6vw,96px) clamp(32px,4.4vw,80px)}
/* раскрытая панель (site.js → initBleedPanels) держит контент на месте за счёт паддинга —
   правило выше той же специфичности, поэтому компенсацию повторяем явно */
.home-dest .dest-panel.is-bleed{padding-left:calc(var(--pad-l) + var(--bleed));padding-right:calc(var(--pad-r) + var(--bleed))}
.home-dest .section-head--row{margin-bottom:clamp(48px,5vw,80px)}
.home-dest .section-head--row .section-head__title{grid-column:1 / -1}
.home-dest .group-title{display:flex;align-items:center;gap:16px;font-size:13px;line-height:16px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.home-dest .group-title::before{content:"";width:40px;height:1px;background:var(--accent)}
.home-dest .dest-group+.dest-group{margin-top:clamp(48px,5vw,80px)}
.home-dest .dest-rail{grid-auto-columns:clamp(220px,17vw,320px);align-items:start;
  /* лента выходит за контейнер до краёв окна, первая карточка остаётся на линии контента */
  margin-left:calc(-1 * var(--edge-l,0px));margin-right:calc(-1 * var(--edge-r,0px));
  padding-inline:var(--edge-l,0px) var(--edge-r,0px);scroll-padding-inline:var(--edge-l,0px) var(--edge-r,0px)}
.home-dest .dest-rail:not(.dest-rail--pair)>.dest-card:nth-child(even){margin-top:48px}
.home-dest .dest-card{aspect-ratio:3/4;border-radius:var(--radius-lg)}
.home-dest .dest-panel .dest-card{box-shadow:none}
.home-dest .dest-rail--pair{grid-auto-columns:clamp(320px,34vw,640px)}
.home-dest .dest-rail--pair .dest-card{aspect-ratio:16/10}
.home-dest .dest-card img{transition:transform 1.4s var(--ease-out),filter .6s var(--ease-out)}
.home-dest .dest-card:hover img{transform:scale(1.07)}
.home-dest .dest-card::after{background:linear-gradient(to top,rgba(8,16,15,.86) 0%,rgba(8,16,15,.28) 42%,rgba(8,16,15,0) 70%)}
.home-dest .dest-card__body{left:24px;right:24px;bottom:24px}
.home-dest .dest-card__title{margin:0;font-size:clamp(22px,1.7vw,32px);line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.home-dest .dest-card__meta{max-width:360px;font-size:14px;line-height:20px}
.home-dest .dest-panel .dest-card__badge{top:20px;right:20px;min-height:32px;padding:0 14px;color:var(--white);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dest-card__go{position:absolute;top:20px;left:20px;z-index:2;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--white);color:var(--primary);
  opacity:0;transform:scale(.5) rotate(-90deg);transition:opacity .4s var(--ease-out),transform .6s var(--ease-out)}
.dest-card__go svg{width:20px;height:20px}
.dest-card:hover .dest-card__go,.dest-card:focus-visible .dest-card__go{opacity:1;transform:rotate(-45deg)}
/* Появление: карточки поднимаются веером из-под маски снизу, фото внутри
   отъезжает из крупного плана; каскад по порядку в ленте (--i, home.js → .is-in). */
.js-anim .home-dest .dest-rail .dest-card{opacity:0;transform:translate3d(0,140px,0) rotate(5deg);
  transform-origin:0 100%;clip-path:inset(100% 0 0 0 round var(--radius-lg))}
.js-anim .home-dest .dest-rail .dest-card img{transform:scale(1.35)}
/* на время въезда — свои слои: иначе каждая карточка перерисовывается вместе с панелью */
.js-anim .home-dest .dest-rail:not(.is-done) .dest-card,
.js-anim .home-dest .dest-rail:not(.is-done) .dest-card img{will-change:transform,opacity}
.js-anim .home-dest .dest-rail.is-in .dest-card{opacity:1;transform:none;clip-path:inset(0 round var(--radius-lg));
  transition:opacity .6s ease calc(var(--i) * 90ms),transform 1.3s var(--ease-out) calc(var(--i) * 90ms),
    clip-path 1.3s var(--ease-out) calc(var(--i) * 90ms)}
.js-anim .home-dest .dest-rail.is-in .dest-card img{transform:none;
  transition:transform 1.8s var(--ease-out) calc(var(--i) * 90ms),filter .6s var(--ease-out)}
/* после входа — обычный hover без задержек каскада */
.js-anim .home-dest .dest-rail.is-done .dest-card,.js-anim .home-dest .dest-rail.is-done .dest-card img{transition-delay:0s}
.js-anim .home-dest .dest-rail.is-done .dest-card img{transition:transform 1.4s var(--ease-out),filter .6s var(--ease-out)}
.js-anim .home-dest .dest-rail.is-done .dest-card:hover img{transform:scale(1.07)}
@media (hover:hover) and (min-width:768px){
  .home-dest .dest-card__meta{max-height:0;margin-top:0;opacity:0;overflow:hidden;
    transition:max-height .6s var(--ease-out),margin-top .6s var(--ease-out),opacity .4s ease}
  .home-dest .dest-card:hover .dest-card__meta,.home-dest .dest-card:focus-visible .dest-card__meta{max-height:80px;margin-top:12px;opacity:1}
  .home-dest .dest-rail:hover .dest-card:not(:hover) img{filter:saturate(.35) brightness(.6)}
}
@media (max-width:1279px){
  .home-dest .dest-rail{grid-auto-columns:clamp(220px,30vw,300px)}
  .home-dest .dest-rail--pair{grid-auto-columns:clamp(300px,46vw,520px)}
  .home-dest .dest-rail:not(.dest-rail--pair)>.dest-card:nth-child(even){margin-top:40px}
}
@media (max-width:767px){
  .home-dest .dest-panel{padding:48px 16px}
  .home-dest .dest-rail,.home-dest .dest-rail--pair{grid-auto-columns:72%}
  .home-dest .dest-rail{margin-inline:calc(-1 * var(--margin));padding-inline:var(--margin);scroll-padding-inline:var(--margin)}
  .home-dest .dest-rail--pair .dest-card{aspect-ratio:3/4}
  .home-dest .dest-rail:not(.dest-rail--pair)>.dest-card:nth-child(even){margin-top:0}
  .home-dest .dest-card__body{left:20px;right:20px;bottom:20px}
}

/* --- лид-магнит: фото раскрывается маской, список — редакционный индекс --- */
.home-lead .lead-magnet__content h2{max-width:none;font-size:clamp(28px,3vw,54px);overflow-wrap:break-word;min-width:0}   /* было до 72px: «НАПРАВЛЕНИЕМ?» упиралось в край колонки */
.home-lead .lead-magnet__subtitle{display:flex;align-items:center;gap:16px;margin-top:32px;padding:0;
  background:none;border-radius:0;font-size:20px;line-height:28px;color:var(--primary)}
.home-lead .lead-magnet__subtitle::before{content:"";flex:none;width:40px;height:1px;background:var(--accent)}
.home-lead .lead-magnet__list{grid-template-columns:1fr;margin-top:40px;padding:0;border:0;border-radius:0;
  border-top:1px solid var(--gray-300);background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.home-lead .lead-magnet__list li,.home-lead .lead-magnet__list li:nth-child(2){border-top:0;
  border-bottom:1px solid var(--gray-200);padding:16px 0 16px 64px;
  font-size:17px;line-height:24px;color:var(--dark);transition:padding-left .5s var(--ease-out)}
.home-lead .lead-magnet__list li:last-child:nth-child(odd){grid-column:auto}
.home-lead .lead-magnet__list li::before{top:19px;font-size:13px;color:var(--primary);opacity:.5}
.home-lead .lead-magnet__list li::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--primary);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
@media (hover:hover){
  .home-lead .lead-magnet__list li:hover{padding-left:80px}
  .home-lead .lead-magnet__list li:hover::after{transform:none}
}
.js-anim .home-lead .lead-magnet__photo{clip-path:inset(14% 10% 14% 10% round var(--radius-lg));transform:scale(1.12);
  transition:clip-path 1.5s var(--ease-out),transform 2s var(--ease-out)}
.js-anim .home-lead .lead-magnet__photo-wrap.is-in .lead-magnet__photo{clip-path:inset(0 round var(--radius-lg));transform:none}
@media (max-width:1279px){.home-lead .lead-magnet__quote{translate:none!important}}
@media (max-width:767px){
  .home-lead .lead-magnet__list li,.home-lead .lead-magnet__list li:nth-child(2){padding-left:48px;font-size:16px}
}

/* --- отзывы: блок в один экран — заголовок и счёт слева, фото справа на ту же
       высоту, под ними ряд карточек. Кегли привязаны и к высоте окна, чтобы
       на невысоком ноутбуке блок тоже помещался целиком. --- */
.home-reviews__grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);
  grid-template-rows:auto 1fr;row-gap:clamp(24px,3.5vh,40px)}
.home-reviews__head{grid-column:1 / span 7;grid-row:1}
.home-reviews .home-reviews__head h2{margin:0;font-size:clamp(32px,min(4.4vw,7.2vh),80px)}
.home-reviews__score{grid-column:1 / span 7;grid-row:2;align-self:end}
.home-reviews__media{grid-column:8 / -1;grid-row:1 / span 2;overflow:hidden;border-radius:var(--radius-lg);
  min-height:320px;background:var(--gray-100)}
.home-reviews__photo{width:100%;height:118%;margin-top:-9%;object-fit:cover}
.home-reviews .reviews-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin-top:16px;font-weight:var(--fw-head)}
.reviews-total__num{font-size:clamp(80px,min(8vw,15vh),160px);line-height:.8;letter-spacing:-.05em;color:var(--primary)}
.reviews-total__word{font-size:clamp(18px,1.5vw,24px);line-height:1.2;letter-spacing:-.02em;color:var(--gray-700)}
.home-reviews__meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-top:clamp(20px,3vh,32px)}
.home-reviews .logos{gap:8px 0;margin:0}
.home-reviews .logos span{min-height:0;padding:0;background:none;border-radius:0;font-size:15px;line-height:22px;color:var(--gray-700)}
.home-reviews .logos span:not(:last-child)::after{content:"/";margin:0 12px;color:var(--gray-300)}
.home-reviews .trust-quotes{margin-top:clamp(24px,4vh,48px);align-items:stretch}
.home-reviews .trust-quote{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.6vh,28px);
  background:var(--gray-100);border:1px solid transparent;border-radius:var(--radius-lg);
  transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out),translate .4s var(--ease-out)}
.js-anim .home-reviews .trust-quote.reveal.is-in{
  transition:opacity .6s var(--ease),transform .6s var(--ease),background-color .45s var(--ease-out),
    border-color .45s var(--ease-out),box-shadow .45s var(--ease-out),translate .45s var(--ease-out)}
.home-reviews .trust-quote:hover{background:var(--white);border-color:var(--gray-200);box-shadow:var(--shadow-soft);translate:0 -4px}
.trust-quote__stars{font-size:13px;line-height:1;letter-spacing:3px}
.home-reviews .trust-quote p{flex:1;margin:0;font-size:16px;line-height:24px;color:var(--dark);font-weight:var(--fw-text)}
.trust-quote__foot{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--gray-200)}
.trust-quote__ava{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--white);font-size:15px;line-height:1;font-weight:var(--fw-head)}
.home-reviews .trust-quote__author{font-size:13px;line-height:18px}
@media (max-width:1279px){
  .home-reviews__head,.home-reviews__score{grid-column:1 / span 5}
  .home-reviews__media{grid-column:6 / -1}
}
@media (max-width:767px){
  .home-reviews__grid{grid-template-rows:none}
  .home-reviews__head,.home-reviews__score,.home-reviews__media{grid-column:1 / -1;grid-row:auto}
  .home-reviews__media{min-height:0;aspect-ratio:16/11}
  /* карточки — свайп-лентой, как остальные сетки на телефоне */
  .home-reviews .trust-quotes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    padding-inline:var(--margin);margin-inline:calc(-1 * var(--margin));scroll-padding-inline:var(--margin)}
  .home-reviews .trust-quotes::-webkit-scrollbar{display:none}
  .home-reviews .trust-quote{scroll-snap-align:start}
}

/* --- квиз: фон едет медленнее страницы --- */
.is-home .quiz-panel::before{inset:-10% 0;translate:0 calc(var(--py,0) * 1px)}

/* --- финальный CTA: высокий кадр, фото отъезжает из крупного плана --- */
.home-final .final-cta{min-height:clamp(560px,88svh,980px);justify-content:center;padding:120px 64px}
.home-final .final-cta__in{max-width:980px}
.home-final .final-cta h2{font-size:clamp(30px,3.6vw,68px);line-height:1.1;letter-spacing:-.03em}
.home-final .final-cta__bg img{opacity:.62;transform-origin:50% 60%;will-change:transform}
.home-final .final-cta__bg::after{background:
  radial-gradient(60% 70% at 50% 50%,rgba(10,20,19,.55) 0%,rgba(10,20,19,.2) 70%,rgba(10,20,19,.45) 100%),
  linear-gradient(180deg,rgba(10,20,19,.35),rgba(10,20,19,.6))}
.home-final .final-cta__actions{margin-top:48px}
.home-final .final-cta .btn--lg{min-height:64px;padding-inline:44px;font-size:16px}
@media (max-width:767px){
  .home-final .final-cta{min-height:auto;padding:80px 24px}
  .home-final .final-cta .btn--lg{min-height:56px;padding-inline:24px}
}

/* --- статьи: первая обложкой, остальные строками справа --- */
.home-articles .section-head--row .section-head__title{grid-column:1 / span 9}
.art-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);align-items:start}
.art{min-width:0}
.art--lead{grid-column:1 / span 7;grid-row:1 / span 3}
.art:not(.art--lead){grid-column:9 / -1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;
  padding-block:32px;border-bottom:1px solid var(--gray-200)}
.art--lead+.art{padding-top:0}
.art__media{display:block;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:1/1;background:var(--gray-100)}
.art--lead .art__media{aspect-ratio:16/11}
.art__media img,.art__media .media-ph{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.art:hover .art__media img{transform:scale(1.06)}
.art__body{min-width:0}
.art--lead .art__body{padding-top:32px;max-width:640px}
.art__cat{display:inline-flex;align-items:center;gap:12px;font-size:12px;line-height:16px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primary);font-weight:var(--fw-head)}
.art__cat::before{content:"";width:24px;height:1px;background:var(--accent)}
.art__title{margin:12px 0 0;font-size:20px;line-height:26px;letter-spacing:-.02em;text-transform:none}
.art--lead .art__title{margin-top:16px;font-size:clamp(28px,2.6vw,44px);line-height:1.08;letter-spacing:-.03em}
.art__title a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .6s var(--ease-out)}
.art:hover .art__title a,.art__title a:focus-visible{background-size:100% 1px}
.art__text{margin:12px 0 0;font-size:15px;line-height:22px;color:var(--gray-700);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art--lead .art__text{font-size:17px;line-height:26px}
.art__more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;line-height:20px;
  font-weight:var(--fw-head);color:var(--primary);text-decoration:none}
.art__more svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
.art:hover .art__more svg{transform:translateX(6px)}
@media (max-width:1279px){
  .art--lead{grid-column:1 / -1;grid-row:auto;margin-bottom:16px}
  .art:not(.art--lead){grid-column:1 / -1}
  .art--lead+.art{padding-top:32px;border-top:1px solid var(--gray-200)}
}
@media (max-width:767px){
  .art:not(.art--lead){grid-template-columns:112px minmax(0,1fr);gap:16px;padding-block:24px}
  .art:not(.art--lead) .art__text{display:none}
  .art--lead .art__body{padding-top:24px}
  .art__title{font-size:18px;line-height:24px}
}

/* --- подвал: название во всю ширину, растворяется книзу --- */
.site-footer{overflow:hidden;padding-bottom:0}
.site-footer__mark{margin:clamp(24px,5vw,80px) 0 -.3em;padding-top:.06em;text-align:center;white-space:nowrap;
  /* line-height .82 резала верх: фон-градиент с background-clip:text рисуется только в строке, а заглавные выше неё */
  font-size:clamp(40px,10.4vw,260px);line-height:1.04;letter-spacing:-.05em;text-transform:uppercase;font-weight:var(--fw-head);
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.02) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .h-split .h-line>span{transform:none}
  .js-anim .home-lead .lead-magnet__photo{clip-path:none;transform:none}
}

/* ======================================================================
   21. Шапка — доводка (2026-09-24)
   Три зоны: логотип | меню строго по центру окна | действия. Иконки одного
   размера, приглушённые, от CTA отделены волосяной чертой.
   ====================================================================== */
@media (min-width:1024px){
  .site-header__in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:32px}
  .site-header__logo{grid-column:1;justify-self:start}
  .site-header__nav{grid-column:2;justify-self:center;gap:36px}
  .site-header__actions{grid-column:3;justify-self:end;gap:4px}
}
@media (min-width:1280px) and (max-width:1599px){
  .site-header__nav{gap:28px}
}
/* узкий десктоп: блок действий шире логотипа, и меню по центру окна упиралось бы в него —
   здесь оно по центру свободного места между логотипом и действиями */
@media (min-width:1024px) and (max-width:1439px){
  .site-header__in{grid-template-columns:auto minmax(0,1fr) auto;column-gap:24px}
  .site-header__nav{gap:22px}
  .site-header__cta{padding:0 16px}
  .site-header__sep{margin:0 8px 0 4px}
}
/* подчёркивание пункта — от центра, под текстом (без стрелки-шеврона) */
.nav__link::after{left:0;right:0;width:auto;bottom:8px;height:1px;transform-origin:50% 50%}
.nav__link:has(svg)::after{right:16px}

.site-header__icon{width:40px;height:40px;border:0;color:var(--gray-700);
  transition:background-color .25s var(--ease),color .25s var(--ease)}
.site-header__icon svg{width:20px;height:20px}
/* мессенджеры — залитые знаки: круг у них во весь размер, поэтому чуть меньше лупы,
   чтобы по массе не перевешивали; цвет — не чистый чёрный/белый, а приглушённый */
.site-header__msg svg{width:19px;height:19px}
.site-header__icon:hover,.icon-btn--bare.site-header__icon:hover{background:var(--gray-100);border:0;color:var(--primary)}
.site-header__sep{width:1px;height:20px;margin:0 12px 0 8px;background:var(--gray-300)}
/* поверх фото Hero — светлые */
.has-hero .site-header:not(.is-stuck) .site-header__icon{color:rgba(255,255,255,.82)}
.has-hero .site-header:not(.is-stuck) .site-header__icon:hover{background:rgba(255,255,255,.12);border:0;color:var(--white)}
.has-hero .site-header:not(.is-stuck) .site-header__sep{background:rgba(255,255,255,.3)}
/* липкая шапка — чуть плотнее стекло и мягкая тень вместо жёсткой линии */
.site-header,.has-hero .site-header.is-stuck{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border-bottom-color:rgba(16,20,19,.06);box-shadow:0 8px 32px -16px rgba(16,20,19,.12)}
.has-hero .site-header:not(.is-stuck){box-shadow:none}
/* над тёмными блоками (панель направлений, колонна, квиз, финал, футер) светлое
   стекло превращалось в мутную серую полосу — там шапка тёмная, текст светлый.
   .is-on-dark вешает site.js, когда тёмный блок проходит под серединой шапки */
.site-header.is-on-dark,.has-hero .site-header.is-stuck.is-on-dark{color:var(--white);
  background:rgba(12,24,23,.74);border-bottom-color:rgba(255,255,255,.08);box-shadow:none}
.site-header.is-on-dark :focus-visible{outline-color:var(--white)}
.site-header.is-on-dark .site-header__icon{color:rgba(255,255,255,.82)}
.site-header.is-on-dark .site-header__icon:hover{background:rgba(255,255,255,.12);border:0;color:var(--white)}
.site-header.is-on-dark .site-header__sep{background:rgba(255,255,255,.3)}
.site-header.is-on-dark .site-header__cta{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:var(--white)}
.site-header.is-on-dark .site-header__cta:hover{background:transparent;border-color:var(--white);color:var(--white)}
.site-header.is-on-dark .icon-btn--bare:hover{background:transparent;border-color:var(--white);color:var(--white)}
@media (max-width:1279px){.site-header__msg+.site-header__sep,.site-header__sep{display:none}}

/* ======================================================================
   22. Каталог, направление, экскурсия — редакционный проход (2026-09-25)
   Язык раздела 20: крупный кегль, волосяные линии с шалфейным акцентом,
   тёмные панели. Правила привязаны к .page-catalog / .page-excursion —
   карточки на главной («Выбор наших клиентов») не меняются.
   Тексты, состав и порядок блоков прежние.
   ====================================================================== */
.page-catalog,.page-excursion{--ease-out:cubic-bezier(.16,1,.3,1);--fs-sect:clamp(32px,4.6vw,72px)}
.page-catalog main h2,.page-excursion main .section>.wrap>h2,.page-excursion .ex-final h2{
  font-size:var(--fs-sect);line-height:1.12;letter-spacing:-.035em}

/* --- шапка каталога: крупный заголовок, лид с волосяной линией --- */
.cat-head{margin-bottom:clamp(40px,5vw,72px)}
.cat-head h1{margin:0;font-size:clamp(44px,7vw,112px);line-height:1.12;letter-spacing:-.04em}
.cat-head__lead{display:flex;gap:16px;align-items:flex-start;max-width:720px;margin:clamp(24px,2.6vw,40px) 0 0;
  font-size:clamp(17px,1.25vw,20px);line-height:1.5;color:var(--gray-700)}
.cat-head__lead::before{content:"";flex:none;width:40px;height:1px;margin-top:.75em;background:var(--accent)}

/* --- направления: текстовые вкладки вместо пилюль --- */
.page-catalog .pills{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:0 24px;margin-bottom:0;padding-bottom:4px;
  border-bottom:1px solid var(--gray-200)}
.page-catalog .pills::-webkit-scrollbar{display:none}
.page-catalog .pills a{position:relative;min-height:48px;padding:0;border:0;border-radius:0;background:none;
  flex:none;font-size:14px;color:var(--gray-700);transition:color .3s var(--ease-out)}
.page-catalog .pills a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--primary);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.page-catalog .pills a:hover{color:var(--primary)}
.page-catalog .pills a.is-on{background:none;color:var(--primary);font-weight:var(--fw-head)}
.page-catalog .pills a.is-on::after,.page-catalog .pills a:hover::after{transform:none}
.pills__n{margin-left:4px;font-size:12px;color:var(--gray-500);font-weight:var(--fw-text)}

/* --- фильтры: без серой плашки, поля с подчёркиванием --- */
.page-catalog .filters{padding:28px 0 32px;margin-bottom:clamp(32px,4vw,56px);background:none;border-radius:0;
  border-bottom:1px solid var(--gray-200)}
.page-catalog .filters__grid{gap:24px 32px;align-items:end}
.page-catalog .filters label{margin-bottom:4px;font-size:11px;letter-spacing:.14em;color:var(--gray-500)}
.page-catalog .filters select,.page-catalog .filters input{min-height:44px;padding:10px 28px 10px 0;border:0;
  border-bottom:1px solid var(--gray-300);border-radius:0;background-color:transparent;font-size:16px;color:var(--black)}
.page-catalog .filters select{-webkit-appearance:none;appearance:none;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23253D3C' stroke-width='1.4'%3E%3Cpath d='M2 4.5 6 8.5l4-4'/%3E%3C/svg%3E") no-repeat right 4px center}
.page-catalog .filters select:focus,.page-catalog .filters input:focus{border-bottom-color:var(--primary);box-shadow:0 1px 0 var(--primary)}
.page-catalog .filters__foot{gap:16px;margin-top:28px}
.page-catalog .filters__foot input[type=search]{max-width:320px!important;padding-right:0}
.page-catalog .filters__foot .small.muted{margin-left:auto;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* --- карточка экскурсии: без рамки, фото со скруглением, кликабельна целиком --- */
.page-catalog .card,.page-excursion .card{position:relative;overflow:visible;background:none;border:0;border-radius:0;
  box-shadow:none;transform:none}
.page-catalog .card:hover,.page-excursion .card:hover{box-shadow:none;transform:none}
.page-catalog .card-slider,.page-excursion .card-slider,
.page-catalog .card>.card__media,.page-excursion .card>.card__media{aspect-ratio:4/3.3;border-radius:var(--radius-lg);overflow:hidden}
.page-catalog .card .card__media,.page-excursion .card .card__media{transition:transform 1.4s var(--ease-out)}
.page-catalog .card:hover .card__media,.page-excursion .card:hover .card__media{transform:scale(1.05)}
.page-catalog .card-slider__nav,.page-excursion .card-slider__nav{z-index:3}
.page-catalog .card__body,.page-excursion .card__body{padding:20px 0 0;gap:10px}
.page-catalog .card__title,.page-excursion .card__title{font-size:clamp(19px,1.45vw,23px);line-height:1.25;letter-spacing:-.02em}
.page-catalog .card__title a::after,.page-excursion .card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.page-catalog .card__title a:hover,.page-excursion .card__title a:hover{text-decoration:none}
.page-catalog .card .small.muted,.page-excursion .card .small.muted{font-size:14px;line-height:1.5;color:var(--gray-700)}
/* мета-строки: теги через точку вместо рамок; бейдж «Хит» — акцентная метка */
.page-catalog .card__meta,.page-excursion .card__meta{gap:0;align-items:center;min-height:22px}
.page-catalog .card__meta .chip,.page-excursion .card__meta .chip{min-height:0;padding:0;border:0;background:none;border-radius:0;
  font-size:11px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500)}
.page-catalog .card__meta>*+*::before,.page-excursion .card__meta>*+*::before{content:"·";margin:0 8px;color:var(--gray-300)}
.page-catalog .card__meta .chip--solid,.page-excursion .card__meta .chip--solid{margin-left:10px;padding:0 9px;line-height:20px;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--primary);font-weight:var(--fw-head)}
.page-catalog .card__meta .chip--solid::before,.page-excursion .card__meta .chip--solid::before{content:none}
.page-catalog .card__meta .small.muted,.page-excursion .card__meta .small.muted{font-size:12px;color:var(--gray-500)}
/* цена и «Подробнее» — одна строка под волосяной линией */
.page-catalog .card__price,.page-excursion .card__price{margin-top:auto;padding:16px 120px 0 0;border-top:1px solid var(--gray-200);
  font-size:clamp(18px,1.3vw,21px);line-height:28px}
.page-catalog .card__foot,.page-excursion .card__foot{position:absolute;right:0;bottom:0;z-index:2;padding:0}
.page-catalog .card__foot .btn,.page-excursion .card__foot .btn{min-height:28px;width:auto;padding:0;border:0;background:none;
  font-size:14px;color:var(--primary);gap:8px}
.page-catalog .card__foot .btn::after,.page-excursion .card__foot .btn::after{content:"→";transition:transform .4s var(--ease-out)}
.page-catalog .card:hover .card__foot .btn::after,.page-excursion .card:hover .card__foot .btn::after{transform:translateX(4px)}
.page-catalog .grid--3,.page-excursion .grid--3{row-gap:clamp(40px,4vw,64px)}
.page-catalog .media-ph,.page-excursion .card .media-ph{border-radius:var(--radius-lg)}

/* --- пагинация --- */
.page-catalog .pager{gap:4px;margin-top:clamp(48px,5vw,80px)}
.page-catalog .pager a,.page-catalog .pager span{border:0;border-radius:0;min-width:40px;font-size:15px;color:var(--gray-700);
  border-bottom:1px solid transparent}
.page-catalog .pager a:hover{color:var(--primary);border-bottom-color:var(--gray-300)}
.page-catalog .pager .is-on{background:none;color:var(--primary);font-weight:var(--fw-head);border-bottom-color:var(--primary)}

/* --- CTA-полоса: тёмная панель вместо серой плашки --- */
.page-catalog .cta-strip,.page-excursion .cta-strip{margin-top:clamp(56px,6vw,96px);padding:clamp(32px,4vw,56px);
  background:var(--primary);border-radius:var(--radius-lg);color:var(--white)}
.page-catalog .cta-strip b{max-width:640px;font-size:clamp(22px,2.2vw,34px);line-height:1.2;letter-spacing:-.025em}
.page-catalog .cta-strip .btn{background:var(--white);border-color:var(--white);color:var(--primary)}
.page-catalog .cta-strip .btn:hover{background:transparent;color:var(--white)}
.page-catalog .empty{padding:clamp(48px,6vw,96px) 24px;border-radius:var(--radius-lg)}

/* --- направление: интро как редакционный лид --- */
.dir-intro{max-width:880px;padding:0 0 0 56px;background:none;border:0;position:relative}
.dir-intro::before{content:"";position:absolute;left:0;top:.8em;width:40px;height:1px;background:var(--accent)}
.dir-intro p{margin:0;font-size:clamp(18px,1.5vw,24px);line-height:1.55;color:var(--dark)}


/* --- отзывы: мягкие карточки как на главной --- */
.page-catalog .review,.page-excursion .review{padding:clamp(22px,2vw,32px);background:var(--gray-100);border:1px solid transparent;
  border-radius:var(--radius-lg);font-size:15px;line-height:1.6;color:var(--dark);
  transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.page-catalog .review:hover,.page-excursion .review:hover{background:var(--white);border-color:var(--gray-200);box-shadow:var(--shadow-soft)}
.page-catalog .grid:has(>.review),.page-excursion .grid:has(>.review){align-items:start}
.page-catalog .review__head b,.page-excursion .review__head b{font-size:16px;color:var(--black);font-weight:var(--fw-head)}
.page-catalog main .section>.wrap>h2+.grid,.page-excursion main .section>.wrap>h2+.grid,
.page-catalog main .section>.wrap>h2+.carousel{margin-top:clamp(32px,3.5vw,56px)}

/* --- экскурсия: первый экран --- */
.page-excursion .ex-head{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:clamp(32px,4vw,72px)}
.page-excursion .gallery__strip{border-radius:var(--radius-lg)}
.page-excursion .gallery__strip img,.page-excursion .gallery__strip .media-ph{aspect-ratio:16/11}
.page-excursion .gallery__nav button{width:48px;height:48px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
  color:var(--white);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .3s,border-color .3s}
.page-excursion .gallery__nav button:hover{background:var(--white);border-color:var(--white);color:var(--primary)}
.page-excursion .gallery__dots{justify-content:flex-start;margin-top:16px}
.page-excursion .gallery__dots i.is-on{background:var(--primary)}
.ex-title{margin:clamp(32px,3vw,48px) 0 0;font-size:clamp(34px,3.6vw,56px)!important;line-height:1.12!important;letter-spacing:-.035em!important}
.page-excursion .ex-meta{margin-top:20px}
.ex-lead{display:flex;gap:16px;align-items:flex-start;max-width:760px;margin:28px 0 0;
  font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--dark)}
.ex-lead::before{content:"";flex:none;width:40px;height:1px;margin-top:.78em;background:var(--accent)}

/* карточка брони — тёмная панель */
.page-excursion .book{padding:clamp(28px,2.4vw,40px);background:var(--primary);border-radius:var(--radius-lg);color:var(--white)}
.page-excursion .book__price{font-size:clamp(30px,2.6vw,44px);line-height:1.1;letter-spacing:-.03em}
.page-excursion .book .small.muted,.page-excursion .book .online{color:rgba(255,255,255,.62)}
.page-excursion .book .link,.page-excursion .book summary{color:rgba(255,255,255,.85)}
.page-excursion .book .ptable th{border-bottom-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6)}
.page-excursion .book .ptable td{border-bottom-color:rgba(255,255,255,.12)}
.page-excursion .book .ptable__who{color:rgba(255,255,255,.7)}
.page-excursion .book .btn{background:var(--white);border-color:var(--white);color:var(--primary)}
.page-excursion .book .btn:hover{background:transparent;color:var(--white)}
.page-excursion .book .btn--ghost{background:transparent;border-color:rgba(255,255,255,.4);color:var(--white)}
.page-excursion .book .btn--ghost:hover{border-color:var(--white)}
.book__cta{margin-top:24px}
.book__alt{margin-top:12px}
.book__alt .btn{flex:1}
.book__online{margin:20px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}

/* программа и «что входит» */
.page-excursion .ex-program__side .box,.page-excursion .ex-cards .box{padding:clamp(24px,2vw,32px);background:var(--gray-100);
  border:0;border-radius:var(--radius-lg)}
.page-excursion .ex-program__side .box+.box{margin-top:var(--gap)}
.page-excursion .box h3{font-size:clamp(20px,1.5vw,24px);line-height:1.25;letter-spacing:-.02em}
.page-excursion .ticks li,.page-excursion .crosses li{font-size:15px;color:var(--dark)}
.page-excursion .ticks li::before{color:var(--accent)}
.page-excursion .box--note{padding:clamp(24px,2vw,32px);border-radius:var(--radius-lg);font-size:15px;line-height:1.6}
.page-excursion .box--note ul{margin:0;padding-left:20px}
.page-excursion main .section>.wrap>h2+.muted{max-width:640px;margin-top:16px;font-size:17px;line-height:1.55;color:var(--gray-700)}
.page-excursion main .section>.wrap>h2+.muted+*{margin-top:clamp(24px,2.6vw,40px)}

/* финальный призыв — тёмная панель, раскрывается до краёв по скроллу */
.ex-final{position:relative;overflow:hidden;padding:clamp(64px,8vw,128px) clamp(24px,4vw,80px);border-radius:var(--radius-lg);
  background:radial-gradient(120% 90% at 50% 0%,#33504e 0%,var(--primary) 55%,#172a29 100%);color:var(--white)}
.ex-final h2{max-width:20ch;margin:0 auto}
.ex-final .muted{max-width:520px;margin:24px auto 0;font-size:18px;line-height:1.55;color:rgba(255,255,255,.72)}
.ex-final .row{margin-top:40px}
.ex-final .btn{background:var(--white);border-color:var(--white);color:var(--primary)}
.ex-final .btn:hover{background:transparent;color:var(--white)}
.ex-final .btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:var(--white)}
.ex-final .btn--ghost:hover{border-color:var(--white)}

@media (max-width:1279px){
  .page-catalog .filters__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-excursion .ex-head{grid-template-columns:minmax(0,1fr) minmax(300px,.8fr)}
}
@media (max-width:1023px){
  .page-excursion .ex-head{grid-template-columns:1fr}
  .page-excursion .book{position:static}
}
@media (max-width:767px){
  .page-catalog .pills{gap:0 22px;margin-inline:calc(-1 * var(--margin));padding-inline:var(--margin)}
  .page-catalog .filters__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .page-catalog .filters__foot input[type=search]{max-width:none!important}
  .page-catalog .filters__foot .small.muted{margin-left:0;width:100%}
  .page-catalog .pager{gap:0}
  .page-catalog .pager a,.page-catalog .pager span{min-width:32px;padding:0 6px}
  .dir-intro{padding-left:0;padding-top:24px}
  .dir-intro::before{top:0}
  .page-excursion .gallery__strip img,.page-excursion .gallery__strip .media-ph{aspect-ratio:4/3.4}
  .page-excursion .gallery__nav{display:none}
  .ex-final{padding:56px 24px}
}

/* ======================================================================
   23. Hero — облегчение (2026-09-25)
   Контент прежний, приглушено оформление: главным на экране остаются
   заголовок и кнопка. Откат — удалить раздел (бэкап: _backup_hero_light_2026-09-25/).
   ====================================================================== */
/* преимущества — строка через точки вместо четырёх контурных плашек */
/* Точка стоит перед каждым пунктом в поле слева; список сдвинут на это поле
   и обрезан по нему — у пункта, с которого начинается строка, точка скрыта */
.usp{--sep:28px;gap:6px 0;margin-top:28px;margin-left:calc(-1 * var(--sep));clip-path:inset(-4px -4px -4px var(--sep))}
.usp__item,.js-anim .usp__item{position:relative;padding:0 0 0 var(--sep);border:0;border-radius:0;opacity:1;animation:none;
  font-size:15px;line-height:22px;color:rgba(255,255,255,.8)}
.js-anim .usp__item::after{content:none;animation:none}
.usp__item::before{content:"";position:absolute;left:calc(var(--sep) / 2 - 2px);top:50%;width:4px;height:4px;margin-top:-2px;
  border-radius:50%;background:var(--accent)}
/* показатели — тише и мельче */
.hero-stage__bottom .facts{gap:8px 32px;opacity:.85}
.hero-stage__bottom .fact__top{font-size:15px}
.hero-stage__bottom .fact__bottom{font-size:12px;color:rgba(255,255,255,.62)}
/* счётчик слайдов — служебный, не акцент */
.hero-pager__count b{font-size:20px;letter-spacing:-.01em;color:rgba(255,255,255,.85)}
.hero-pager__count i{font-size:12px}
/* декоративное BALI и панель отзывов — легче */
.hero-stage__deco{-webkit-text-stroke:1px rgba(255,255,255,.08)}
.hero-reviews{width:340px;padding:18px 20px 16px;background:rgba(16,24,23,.42);box-shadow:none}
.hero-reviews__title{font-size:16px}
.hero-reviews__name{font-size:16px}
.hero-reviews__text{font-size:14px;line-height:21px}
@media (min-width:1600px){.hero-reviews{width:360px}}
@media (max-width:767px){
  .usp{--sep:20px;margin-top:18px}
  .usp__item,.js-anim .usp__item{font-size:13px;line-height:20px}
  .hero-pager__count b{font-size:18px}
}

/* ======================================================================
   24. «О нас» — редакционный проход (2026-09-25)
   Тот же язык, что разделы 20 и 22. Тексты и порядок блоков прежние.
   ====================================================================== */
.page-about{--ease-out:cubic-bezier(.16,1,.3,1);--fs-sect:clamp(32px,4.6vw,72px)}
.page-about main h2{font-size:var(--fs-sect);line-height:1.12;letter-spacing:-.035em}
.page-about main .section>.wrap>h2+*{margin-top:clamp(32px,3.5vw,56px)}

/* --- первый экран: заголовок во всю ширину, текст слева, портрет справа --- */
.about-intro__title{margin:0;font-size:clamp(56px,9vw,152px)!important;line-height:1.02!important;letter-spacing:-.045em!important}
.about-intro__grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);
  align-items:start;margin-top:clamp(32px,4vw,64px)}
.about-intro__text{grid-column:1 / span 6;font-size:17px;line-height:1.6;color:var(--gray-700)}
.about-intro__text>p{margin:0 0 20px;max-width:600px}
.about-intro__lead{display:flex;gap:16px;align-items:flex-start;max-width:none!important;
  font-size:clamp(20px,1.7vw,26px);line-height:1.45;color:var(--dark)}
.about-intro__lead::before{content:"";flex:none;width:40px;height:1px;margin-top:.72em;background:var(--accent)}
.about-intro__text>p:not(.about-intro__lead){padding-left:56px}
.about-founder{margin-top:clamp(48px,5vw,80px);padding-top:clamp(32px,3vw,48px);border-top:1px solid var(--gray-300)}
.page-about .about-founder h2{margin:0;font-size:clamp(28px,2.8vw,44px)}
.about-founder p{max-width:560px;margin:20px 0 28px;font-size:17px;line-height:1.6;color:var(--gray-700)}
.about-intro__photo{grid-column:8 / -1;margin:0;position:sticky;top:calc(var(--header-h-sticky) + 24px);
  aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--gray-100)}
.about-intro__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  transition:transform 1.6s var(--ease-out)}
.about-intro__photo:hover img{transform:scale(1.04)}

/* --- команда: фото пока нет — типографские карточки с номером --- */
.about-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.about-team__item{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  min-height:clamp(200px,17vw,280px);padding:clamp(22px,2vw,32px);background:var(--gray-100);border-radius:var(--radius-lg);
  overflow:hidden;transition:background-color .5s var(--ease-out),color .5s var(--ease-out)}
.about-team__num{font-size:clamp(40px,4vw,64px);line-height:1;letter-spacing:-.04em;font-weight:var(--fw-head);
  color:transparent;-webkit-text-stroke:1px var(--primary);opacity:.55;transition:opacity .5s var(--ease-out)}
.about-team__role{padding-top:16px;border-top:1px solid var(--gray-300);font-size:clamp(18px,1.4vw,22px);line-height:1.3;
  letter-spacing:-.015em;font-weight:var(--fw-head);color:var(--black);transition:border-color .5s var(--ease-out),color .5s var(--ease-out)}
@media (hover:hover){
  .about-team__item:hover{background:var(--primary)}
  .about-team__item:hover .about-team__num{-webkit-text-stroke-color:var(--accent);opacity:1}
  .about-team__item:hover .about-team__role{color:var(--white);border-color:rgba(255,255,255,.2)}
}

/* --- «Bali Open Tour — это»: тёмная панель с крупными цифрами --- */
.about-facts{padding:clamp(56px,7vw,112px) clamp(24px,4vw,80px);border-radius:var(--radius-lg);color:var(--white);
  background:radial-gradient(120% 90% at 0% 0%,#33504e 0%,var(--primary) 55%,#172a29 100%)}
.page-about .about-facts h2{margin:0}
.about-facts .facts--row{gap:0;margin-top:clamp(40px,5vw,80px)}
.about-facts .fact{flex:1 1 0;gap:12px;padding:0 clamp(16px,2.5vw,40px);background:none;border-radius:0;
  border-left:1px solid rgba(255,255,255,.18);font-size:clamp(15px,1.2vw,18px);line-height:1.4;color:rgba(255,255,255,.72)}
.about-facts .fact:first-child{padding-left:0;border-left:0}
.about-facts .fact b{display:block;font-size:clamp(56px,7vw,120px);line-height:1;letter-spacing:-.05em;
  font-weight:var(--fw-head);color:var(--white)}

/* --- отзывы и финальный призыв --- */
.page-about .grid:has(>.review){align-items:start}
.page-about .review{padding:clamp(22px,2vw,32px);background:var(--gray-100);border:1px solid transparent;
  border-radius:var(--radius-lg);font-size:15px;line-height:1.6;color:var(--dark);
  transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.page-about .review:hover{background:var(--white);border-color:var(--gray-200);box-shadow:var(--shadow-soft)}
.page-about .review__head b{font-size:16px;color:var(--black);font-weight:var(--fw-head)}
.page-about .ex-final h2{font-size:var(--fs-sect)}

@media (max-width:1279px){
  .about-intro__text{grid-column:1 / span 5}
  .about-intro__photo{grid-column:6 / -1}
  .about-team{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .about-intro__grid{display:flex;flex-direction:column-reverse;gap:32px}
  .about-intro__photo{position:static;width:100%;aspect-ratio:4/4.4}
  .about-intro__text>p:not(.about-intro__lead){padding-left:0}
  .about-team{grid-template-columns:1fr 1fr;gap:12px}
  .about-team__item{min-height:180px;gap:24px;padding:20px}
  .about-facts .facts--row{flex-direction:column;gap:28px}
  .about-facts .fact{padding:0 0 28px;border-left:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .about-facts .fact:last-child{padding-bottom:0;border-bottom:0}
}

/* ======================================================================
   25. Лид-магнит на телефоне (2026-09-25): блок растягивался на несколько
   экранов — цитаты шли столбиком. Теперь это лента со свайпом под фото,
   список плотнее. На десктопе и планшете обёртка цитат не влияет на раскладку.
   ====================================================================== */
.lead-magnet__quotes{display:contents}
@media (max-width:767px){
  .home-lead .lead-magnet{row-gap:40px}
  .home-lead .lead-magnet__photo-wrap{display:block}
  .home-lead .lead-magnet__photo{aspect-ratio:5/4;object-position:50% 18%}
  .lead-magnet__quotes{display:flex;gap:10px;margin:12px calc(-1 * var(--margin)) 0;padding:0 var(--margin);
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margin);scrollbar-width:none;
    overscroll-behavior-x:contain}
  .lead-magnet__quotes::-webkit-scrollbar{display:none}
  .home-lead .lead-magnet__quote{flex:0 0 78%;translate:none!important;scroll-snap-align:start;
    display:flex;flex-direction:column;justify-content:space-between;padding:32px 16px 12px;font-size:14px;line-height:20px}
  .home-lead .lead-magnet__quote::before{left:16px;top:12px;width:16px;height:12px}
  .home-lead .lead-magnet__quote-author{margin-top:8px;padding-top:8px;font-size:12px}
  .home-lead .lead-magnet__subtitle{margin-top:20px;font-size:17px;line-height:24px}
  .home-lead .lead-magnet__list{margin-top:24px}
  .home-lead .lead-magnet__list li,.home-lead .lead-magnet__list li:nth-child(2){padding:12px 0 12px 40px;font-size:15px;line-height:21px}
  .home-lead .lead-magnet__list li::before{top:14px;font-size:12px}
  .home-lead .lead-magnet .btn{margin-top:24px}
  /* home.js → initLeadQuotes: цитаты стопкой в одной ячейке (высота по самой
     длинной — блок не прыгает), видна одна, смена — перекрёстным проявлением.
     Без JS остаётся лента со свайпом выше */
  .lead-magnet__quotes.is-rotating{display:grid;overflow:visible;margin-inline:0;padding:0;cursor:pointer}
  .lead-magnet__quotes.is-rotating .lead-magnet__quote{grid-area:1 / 1;flex:none;
    opacity:0!important;visibility:hidden;transform:translateY(10px)!important;
    transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1),visibility 0s .6s!important}
  .lead-magnet__quotes.is-rotating .lead-magnet__quote.is-active{opacity:1!important;visibility:visible;transform:none!important;
    transition:opacity .7s ease .2s,transform .9s cubic-bezier(.16,1,.3,1) .2s,visibility 0s!important}
}

/* ======================================================================
   26. Блоки в сцене с колонной на телефоне (2026-09-25)
   «Почему мы» и «Тревел-ассистент» были выше экрана (1031 и 1296px при 844) —
   липли низом к низу, и карточки наезжали на заголовок. Уплотняем так, чтобы
   блок помещался в экран: тогда scene3d.js ставит его по центру под шапкой.
   Сцену и облёт камеры не трогаем.
   ====================================================================== */
@media (max-width:767px){
  /* заголовок поверх стеклянных карточек, если хореография сведёт их вместе */
  .scene3d__content .why-grid__text,.scene3d__content .section-head{position:relative;z-index:2}
  /* «Почему мы» */
  /* пока блок стоит, сцена сводит заголовок (+15px) и карточки (−9px) —
     запас между ними больше этого сдвига */
  .scene3d__content .why-grid{row-gap:0}
  .scene3d__content .why-grid__cards{margin-top:52px}
  .scene3d__content .stats{margin-top:28px}
  .scene3d__content .why-grid__text h2{font-size:28px}
  .scene3d__content .why-grid__text p{margin-top:10px;font-size:14px;line-height:20px}
  .scene3d__content .why-grid__cards{gap:8px}
  .scene3d__content .feature-card{gap:12px;padding:12px 14px;border-radius:var(--radius-md)}
  .scene3d__content .feature-card__icon{width:36px;height:36px}
  .scene3d__content .feature-card__icon svg{width:18px;height:18px}
  .scene3d__content .feature-card__title{font-size:15px;line-height:20px}
  .scene3d__content .feature-card__text{margin-top:2px;font-size:13px;line-height:18px}
  .scene3d__content .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .scene3d__content .stat__icon{display:none}
  .scene3d__content .stat__value{font-size:28px;line-height:1}
  .scene3d__content .stat__label{margin-top:4px;font-size:11px;line-height:15px}
  /* «Тревел-ассистент»: плитки в две колонки */
  .scene3d__content .section-head{margin-bottom:20px!important}
  .scene3d__content .section-head h2{font-size:28px}
  .scene3d__content .section-head__text{margin-top:8px;font-size:14px;line-height:20px}
  .scene3d__content .tiles-service{grid-template-columns:1fr 1fr;gap:8px}
  .scene3d__content .tiles-service div{padding:12px;border-radius:var(--radius-md)}
  .scene3d__content .tiles-service b{margin-bottom:4px;font-size:14px;line-height:18px}
  .scene3d__content .tiles-service span{font-size:12px;line-height:16px}
  .scene3d__content .tiles-service+.cta-strip{flex-wrap:nowrap;gap:8px;margin-top:16px}
  .scene3d__content .tiles-service+.cta-strip .btn{flex:1;min-width:0;min-height:44px;padding:0 12px;font-size:13px}
}

/* ======================================================================
   27. «Мы создаём впечатления» на телефоне (2026-09-26)
   Лента со свайпом резала остров (контейнер с прокруткой обрезает всё, что
   свисает за карточку) и показывала обрезок соседней карточки у края экрана.
   Теперь одна квадратная карточка на всю ширину, карточки сменяются сами
   (home.js → initImpressions), точки под ней — где мы и переход по тапу.
   Без JS / при reduced motion остаётся лента — с запасом снизу под остров.
   ====================================================================== */
.impressions__dots{display:none}
@media (max-width:767px){
  .impressions__row{padding-bottom:56px}
  .scene3d__content .impressions{margin-bottom:20px}
  /* сцена сдвигает подзаголовок вниз, пока блок стоит, — запас больше сдвига */
  .scene3d__content .section-head:has(+ .impressions){margin-bottom:40px!important}
  .impression__card{aspect-ratio:1/1}
  /* низ острова (89% высоты снимка) выходит за карточку ~на 25px — 3D-эффект;
     сцена приподнимает снимок (subRise), пока блок стоит, — это учтено */
  .impression__media{width:92%;bottom:-23%}
  .impression__body{left:22px;right:22px;top:20px}
  .impression__num{font-size:28px;line-height:32px}
  .impression__title{margin-top:6px;font-size:19px;line-height:24px}

  .impressions__row.is-rotating{display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;
    overflow:visible;scroll-snap-type:none;margin:0;padding:0 0 52px;
    touch-action:pan-y}                 /* вертикаль — странице, горизонталь — свайпу карточек (home.js) */
  .impressions__row.is-rotating>.impression{grid-area:1 / 1}
  .impressions__row.is-rotating>.impression:not(.is-active){pointer-events:none!important}
  /* листание: уходящая карточка выезжает в сторону, входящая приезжает с противоположной */
  .impressions__row.is-rotating .impression__card{
    transition:opacity .45s ease,transform .6s cubic-bezier(.22,.9,.3,1),visibility 0s;will-change:transform,opacity}
  .impressions__row.is-rotating>.impression:not(.is-active) .impression__card{opacity:0;visibility:hidden;
    transform:translate3d(60%,0,0) scale(.94);transition:opacity .35s ease,transform .6s cubic-bezier(.22,.9,.3,1),visibility 0s .6s}
  .impressions__row.is-rotating>.impression.is-before:not(.is-active) .impression__card{transform:translate3d(-60%,0,0) scale(.94)}
  .impressions__dots.is-on{display:flex;justify-content:center;gap:6px;margin-top:4px}
  .impressions__dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;pointer-events:auto}
  .impressions__dots button::before{content:"";width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.45);
    transition:width .4s cubic-bezier(.16,1,.3,1),background-color .3s}
  .impressions__dots button[aria-current="true"]::before{width:20px;background:var(--white)}
}

/* Телефоны и сенсорные экраны: стекло плашек 3D-сцены без backdrop-filter. Размытие
   живого WebGL-холста под каждой плашкой пересчитывается каждый кадр — на телефоне это
   дороже самой сцены. Вместо него — тонированная заливка, диагональный блик и светлая
   кромка: читается как стекло, фон под ним не размыт. Признак тот же, что у лёгкого
   профиля сцены (frontend/src/lite.js). */
@media (max-width:799px),(pointer:coarse){
  .scene3d__content .feature-card,
  .scene3d__content .tiles-service div{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:
      linear-gradient(135deg,rgba(255,255,255,calc(.20 + .10 * var(--hl, 0))) 0%,
        rgba(255,255,255,calc(.06 + .08 * var(--hl, 0))) 55%,rgba(255,255,255,.10) 100%),
      rgba(16,34,32,.52);
    border:1px solid rgba(255,255,255,calc(.22 + .20 * var(--hl, 0)));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(8,18,17,.25),
      0 18px 40px -24px rgba(8,18,17,calc(.35 + .25 * var(--hl, 0)));
  }
  .hotspot__ring{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,26,24,.46)}
  .hotspot-card{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 60%),rgba(14,30,28,.88);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 70px -30px rgba(4,12,11,.6)}
}

/* Телефон: главная — белая полоса вокруг бегущей строки уже: между первым экраном, строкой
   и панелью направлений было 80 + 80 px пустоты плюс отступ строки. */
@media (max-width:767px){
  .is-home .ticker{padding-top:16px}
  .is-home .home-dest{padding-top:16px}
  /* показатели первого экрана — три колонки (цифра над подписью) вместо ленты со свайпом:
     в ленте третий пункт уходил за край и не был виден */
  .hero-stage__bottom .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
    overflow:visible;margin-right:0;padding-right:0}
  .hero-stage__bottom .fact{flex-direction:column;align-items:flex-start;gap:2px;padding:0;min-width:0}
  .hero-stage__bottom .fact__bottom{font-size:11px;line-height:14px}
  .site-footer__mark{margin-bottom:-.06em}   /* на телефоне надпись видна целиком, без срезанного низа */
}

/* --- подвал: подпись разработчика + компактный подвал на телефоне (аккордеон разделов) --- */
.site-footer__dev a{color:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){
  .site-footer{padding-top:48px}
  .site-footer__grid{row-gap:0}
  .site-footer__brand{padding-bottom:28px}
  .site-footer__tagline{font-size:12px;line-height:18px}
  .site-footer__brand ul{gap:8px}
  .site-footer .hide-m{display:none}
  .site-footer.js-acc .site-footer__col{border-top:1px solid rgba(255,255,255,.16)}
  .site-footer.js-acc .site-footer__col h4{display:flex;align-items:center;justify-content:space-between;
    margin:0;padding:18px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .site-footer.js-acc .site-footer__col h4::after{content:"";width:8px;height:8px;margin-right:4px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-3px) rotate(45deg);transition:transform .2s ease-out}
  .site-footer.js-acc .site-footer__col.is-open h4::after{transform:translateY(2px) rotate(-135deg)}
  .site-footer.js-acc .site-footer__col ul{display:none;padding-bottom:20px}
  .site-footer.js-acc .site-footer__col.is-open ul{display:flex}
  .site-footer__bottom{margin-top:0;gap:12px;font-size:12px;line-height:18px}
  .site-footer__bottom .row{flex-wrap:wrap;gap:6px 16px}
  .site-footer__bottom a{font-size:12px;line-height:18px}
}

/* --- второй блок главной: популярные экскурсии карточками направлений --- */
.home-dest .dest-card--exc .dest-card__title{font-size:clamp(18px,1.25vw,24px);line-height:1.12;letter-spacing:-.02em}
/* стражи-фон за блоком «Не определились с направлением?»: текст на стеклянной подложке,
   как карточки в бывшем «Выборе наших клиентов» — иначе тёмный текст тонет в тёмном камне */
@media (min-width:1280px){
  .home-lead .lead-magnet__content{align-self:center;padding:clamp(32px,3vw,56px);border-radius:var(--radius-lg);
    background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
    box-shadow:0 10px 40px rgba(16,20,19,.06),inset 0 1px 0 rgba(255,255,255,.8)}
}
/* iPhone: при оттягивании страницы и под нижней панелью Safari виден фон html — делаем его
   цветом подвала, чтобы под надписью Bali Open Tour не было белой полосы; body остаётся белым */
html{background:var(--primary)}
body{background:var(--white)}
.site-footer{padding-bottom:env(safe-area-inset-bottom,0px)}
@media (max-width:767px){.site-footer__mark{margin-bottom:0}}

/* Телефон: у 3D-секции нет шторки (она раскрывалась, оставляя воздух по бокам и сверху),
   поэтому предыдущий блок упирался в неё вплотную. */
@media (max-width:799px),(pointer:coarse){
  .is-home .scene3d{margin-top:56px}
}