/* ==========================================================================
   Экосеть — стили сайта
   Светлая карточная сетка: много воздуха, крупная типографика, скруглённые
   плитки. Палитра проекта: #0E1A27 текст, #3545D6 / #5363EE синие,
   #C2F750 акцент. Гарнитура Manrope лежит локально.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* ---------- Токены ---------- */
:root{
  --canvas:#ECEFF3;      /* фон страницы */
  --card:#FFFFFF;        /* плитки */
  --card-2:#F5F7F9;      /* вложенные блоки */
  --ink:#0E1A27;         /* текст и тёмные плитки */
  --muted:#5C6D7F;      /* затемнён до контраста 5.1:1 на белом (было 4.28 — ниже нормы AA) */
  --line:#E4E9EE;

  --blue:#3545D6;
  --indigo:#5363EE;
  --lime:#C2F750;
  --lime-deep:#B0E63D;

  --r-card:28px;         /* радиус крупных плиток */
  --r-inner:20px;        /* радиус вложенных элементов */
  --shadow:0 18px 44px rgba(14,26,39,.08);
  --shadow-hover:0 26px 60px rgba(14,26,39,.14);

  --container:1340px;   /* общая ширина контента */
  --container-head:1480px; /* шапка шире контента */
  --gap:16px;
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:'Manrope','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  font-size:16.5px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:none}
/* Заголовки: один гротеск, плотный трекинг. Курсивов и вторых гарнитур нет. */
h1,h2,h3,h4{font-weight:800; line-height:1.08; letter-spacing:-.04em; margin:0 0 .5em}
h2{font-size:clamp(26px,3.4vw,42px)}
h3{font-size:18px; font-weight:700; letter-spacing:-.025em}
p{margin:0 0 1em}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 20px}
.container--narrow{max-width:860px}

/* мелкая подпись-метка, как ярлыки разделов у референса */
.eyebrow,.label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 16px;
}
.eyebrow--light{color:rgba(255,255,255,.62)}

.section{padding:26px 0}
.section--alt{background:transparent}
.section__lead{max-width:640px; color:var(--muted); margin-bottom:28px}
.section__lead--light{color:rgba(255,255,255,.72)}
.blank{color:var(--muted); font-style:italic}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border:1px solid transparent; border-radius:999px;
  font-family:inherit; font-size:15.5px; font-weight:600; line-height:1; cursor:pointer; text-align:center;
  transition:transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--green{background:var(--ink); color:#fff}
.btn--green:hover{background:#1B2C3D}
.btn--blue{background:var(--blue); color:#fff}
.btn--blue:hover{background:var(--indigo)}
.btn--glass{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.34)}
.btn--glass:hover{background:rgba(255,255,255,.24)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{padding:11px 18px; font-size:14.5px}
.btn--lg{padding:16px 30px; font-size:16px}
.btn--wide{width:100%; padding:16px 26px}

/* ---------- Плавающая шапка-пилюля ---------- */
.header{position:sticky; top:14px; z-index:50; padding:0 20px; margin-bottom:14px}
.header__inner{
  max-width:var(--container-head); margin:0 auto; min-height:64px;
  display:flex; align-items:center; gap:22px;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.7); border-radius:999px;
  padding:9px 12px 9px 22px; box-shadow:var(--shadow);
}
.header.is-stuck .header__inner{box-shadow:var(--shadow-hover)}

.logo{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.logo__icon{width:38px; height:38px; flex:0 0 38px; object-fit:contain}
.logo__text{display:flex; flex-direction:column}
.logo__word{font-weight:700; font-size:17px; letter-spacing:.01em}
.logo__word b{color:var(--blue); font-weight:700}
.logo__note{font-size:10.5px; color:var(--muted); letter-spacing:.02em}

.nav{display:flex; gap:6px; margin-left:auto}
.nav a{
  padding:10px 18px; border-radius:999px; font-size:14.5px; font-weight:600; color:var(--muted);
  transition:background-color .18s ease, color .18s ease;
}
.nav a:hover{background:var(--card-2); color:var(--ink)}

.header__actions{display:flex; align-items:center; gap:10px; margin-left:auto}
.header__phone{font-weight:700; font-size:15px; white-space:nowrap; padding-right:4px}
.header__phone:hover{color:var(--blue)}

/* кнопка звонка: только на мобильном, вместо кнопки «Смета» —
   с телефона чаще звонят, чем заполняют форму */
.header__call{display:none; flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:#fff; align-items:center; justify-content:center;
  transition:background-color .2s ease, transform .2s ease}
.header__call:hover{background:#1B2C3D; transform:translateY(-1px)}
.header__call:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.header__call svg{width:21px; height:21px; fill:currentColor; display:block}

/* логотипы мессенджеров: узнаваемость даёт форма плюс фирменный цвет */
.msg-ico{width:20px; height:20px; flex:0 0 20px; display:block}
.msg-ico--wa{fill:#25D366}
.msg-ico--tg{fill:#26A5E4}
.msg-ico--max{fill:currentColor}
.btn--msg{gap:10px}

/* мессенджеры в шапке — на всех экранах, кружками: нажатие сразу открывает мессенджер */
.header__msgs{display:inline-flex; align-items:center; gap:4px; flex:0 0 auto}
.header__msg{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; color:var(--muted);
  transition:background-color .18s ease, transform .18s ease;
}
.header__msg:hover{background:var(--card-2); transform:translateY(-1px)}
.header__msg:focus-visible{outline:3px solid var(--lime); outline-offset:2px}

/* 1081–1180 px: полное меню, телефон, три мессенджера и «Смета» не помещались на 54 px —
   ужимаем отступы пунктов меню и промежутки */
@media (min-width:1081px) and (max-width:1180px){
  .header__inner{gap:14px}
  .nav a{padding:10px 12px}
}

.burger{display:none; width:40px; height:40px; padding:11px 9px; background:var(--card-2); border:0; border-radius:999px; cursor:pointer}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.burger span + span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Первый экран: одна большая плитка ---------- */
/* первый экран во всю ширину: видео работает фоном, без рамки и скруглений */
.hero{
  position:relative; margin:0; border-radius:0; overflow:hidden;
  background:var(--card); isolation:isolate;
}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__video{width:100%; height:100%; object-fit:cover}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.32) 62%, rgba(255,255,255,.12) 100%),
    linear-gradient(0deg, rgba(14,26,39,.10), rgba(14,26,39,0) 45%);
}
.hero__inner{position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:56px 44px 56px}
.hero--center .hero__veil{
  background:
    radial-gradient(120% 78% at 50% 34%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.44) 68%, rgba(255,255,255,.24) 100%),
    linear-gradient(0deg, rgba(14,26,39,.12), rgba(14,26,39,0) 55%);
}
.hero--center .hero__inner{text-align:center}
.hero--center .hero__lead{color:#4A5B6C}
.hero--center h1{margin-left:auto; margin-right:auto}
.hero--center .hero__lead{margin-left:auto; margin-right:auto}
.hero--center .hero__cta{justify-content:center}

.hero h1{
  font-size:clamp(20px,2.3vw,27px); font-weight:600; letter-spacing:-.02em;
  max-width:560px; margin:0 0 14px;
}
/* заголовок первого экрана */
.hero__h1{
  /* размер привязан к ширине экрана, чтобы строка не переносилась */
  /* заголовок стал длиннее: nowrap его обрезал, теперь переносится ровными строками */
  font-size:clamp(26px,3.4vw,50px) !important; font-weight:800; letter-spacing:-.04em;
  line-height:1.08; max-width:none !important; margin:0 0 18px !important;
  text-wrap:balance;
}
.hero__offer{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; padding:9px 18px 9px 14px;
  background:var(--lime); border-radius:999px; font-size:15px; font-weight:700; letter-spacing:-.01em;
}
.hero__offer::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ink)}
.hero__lead{
  font-size:17.5px; color:var(--muted); max-width:700px; margin-bottom:26px;
  text-wrap:balance; /* делит текст на равные строки, без висячего хвоста */
}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}

/* чипы-сегменты под первым экраном */
.hero__segments{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin:40px 0 0; max-width:720px}
.hero__segments a{
  display:block; padding:20px 22px; border-radius:var(--r-inner);
  background:rgba(255,255,255,.78); border:1px solid var(--line); backdrop-filter:blur(6px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.hero__segments a:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.hero__segments b{display:block; font-size:16.5px; font-weight:700; margin-bottom:5px}
.hero__segments span{display:block; font-size:13.5px; line-height:1.5; color:var(--muted)}

/* ---------- Карусель услуг ----------
   Вогнутая дуга: крайние карточки ближе к зрителю и потому крупнее,
   центральные уходят вглубь. Каждой карточке заданы своя позиция (--k),
   глубина (--f) и разворот (--a) — считаются при сборке разметки. */
/* обёртка во всю ширину экрана: в ней живут стрелки, вне трёхмерной сцены */
.carousel-wrap{
  position:relative;
  margin:40px calc(50% - 50vw + var(--sbw, 0px) / 2) 30px;
}

.carousel{
  --s:224px;                    /* шаг между карточками по горизонтали */
  --c:1000px;                   /* насколько края выходят вперёд */
  --cw:196px;                   /* ширина карточки */
  position:relative; height:clamp(280px,30vw,340px); margin:0 auto;
  perspective:1400px; perspective-origin:50% 50%;
  touch-action:pan-y; user-select:none; cursor:grab;
}
.carousel__stage{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:translate3d(var(--pan,0px),0,0);
  transition:transform .45s cubic-bezier(.22,.9,.3,1);
}
.carousel.is-dragging{cursor:grabbing}
.carousel.is-dragging .carousel__card{transition:opacity .2s ease}
/* карточка, которую переставляют через край дуги: никакого перехода */
.carousel__card.is-teleport{transition:none !important}


.carousel__card{
  position:absolute; left:50%; top:50%;
  width:var(--cw); height:calc(var(--cw) * 1.34);
  margin:calc(var(--cw) * -0.67) 0 0 calc(var(--cw) / -2);
  /* Ни обрезки, ни фона у самой карточки: обрезка по скруглению внутри
     трёхмерной сцены заставляла браузер вырезать слой по закруглённому
     контуру, и по краю оставалась светлая полоска подложки.
     Скругление теперь на картинке и подписи, обрезать нечего. */
  border-radius:16px;
  filter:drop-shadow(0 20px 26px rgba(14,26,39,.26));
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:
    translate3d(calc(var(--s) * var(--k)), 0, calc(var(--c) * var(--f)))
    rotateY(var(--a));
  /* положение считает скрипт каждый кадр, поэтому переход трансформации убран:
     иначе CSS и скрипт анимируют одно и то же и спорят друг с другом */
  transition:opacity .35s ease, box-shadow .3s ease;
  -webkit-user-drag:none;
}
/* Кадры сняты в одном стиле, поэтому обесцвечивание и вуаль больше не нужны —
   они маскировали разнобой. Фокус на центральной держим тенью и глубиной дуги. */
.carousel__card img{
  width:100%; height:100%; object-fit:cover; pointer-events:none;
  border-radius:16px; display:block;
  backface-visibility:hidden;
}
.carousel__card.is-active{filter:drop-shadow(0 28px 40px rgba(14,26,39,.38))}
.carousel__card figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:38px 13px 13px;
  background:linear-gradient(180deg,
    rgba(14,26,39,0) 0%, rgba(14,26,39,.45) 42%, rgba(14,26,39,.88) 74%, rgba(14,26,39,.96) 100%);
  color:#fff; font-size:14px; font-weight:800; line-height:1.25; letter-spacing:-.015em;
  text-shadow:0 1px 3px rgba(0,0,0,.55);   /* на пёстрых снимках заливки мало */
  pointer-events:none;
}
.carousel__card:hover{filter:drop-shadow(0 26px 34px rgba(14,26,39,.34))}
.carousel__card:focus-visible{outline:3px solid var(--lime); outline-offset:3px}



/* стрелки-кнопки по бокам дуги */
.carousel__arrow{
  position:absolute; top:50%; z-index:5; width:46px; height:46px; margin-top:-23px;
  border:0; border-radius:50%; cursor:pointer; padding:0;
  background:rgba(255,255,255,.92); box-shadow:0 8px 22px rgba(14,26,39,.22);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .2s ease;
  animation:arrow-nudge 1.6s ease-in-out 3;   /* разовая подсказка: три кивка */
}
.carousel__arrow:hover{background:var(--lime)}
.carousel__arrow:focus-visible{outline:3px solid var(--lime); outline-offset:3px}
.carousel__arrow span{
  width:9px; height:9px; border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
}
.carousel__arrow--prev{left:26px}
.carousel__arrow--prev span{transform:rotate(135deg); margin-left:3px}
.carousel__arrow--next{right:26px}
.carousel__arrow--next span{transform:rotate(-45deg); margin-right:3px}
.carousel.is-touched .carousel__arrow{animation:none}
@keyframes arrow-nudge{
  0%,70%,100%{transform:translateX(0)}
  80%{transform:translateX(5px)}
  90%{transform:translateX(-2px)}
}
.carousel__arrow--prev{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){ .carousel__arrow{animation:none} }

/* три коротких довода */
/* доводы вынесены из первого экрана на страницу — поверх видео они не читались */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:0; text-align:left;
  background:var(--card); border-radius:var(--r-card);
  padding:30px 14px; box-shadow:var(--shadow);
}
.trio div{padding:0 24px; border-left:1px solid var(--line)}
.trio div:first-child{border-left:0}
.trio b{display:block; font-size:16px; font-weight:800; margin-bottom:6px; letter-spacing:-.01em}
.trio p{margin:0; font-size:13.5px; line-height:1.5; color:var(--muted)}
.trio b{color:var(--ink)}

/* ---------- Бенто-сетка с фотоплитками ---------- */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap)}
.bento__item{
  position:relative; border-radius:var(--r-card); overflow:hidden; min-height:230px;
  display:flex; align-items:flex-end; padding:26px; color:#fff;
  box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease;
}
.bento__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover)}
.bento__item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s ease}
.bento__item:hover img{transform:scale(1.05)}
.bento__item::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,26,39,.05) 30%, rgba(14,26,39,.82));
}
.bento__text{position:relative; z-index:2; max-width:420px}
.bento__text b{display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px}
.bento__text p{margin:0; font-size:14px; line-height:1.5; color:rgba(255,255,255,.78)}

.bento__item--wide{grid-column:span 7}
.bento__item--narrow{grid-column:span 5}
.bento__item--third{grid-column:span 4}
.bento__item--twothirds{grid-column:span 8}

/* плитки без фото: сплошная заливка */
.bento__item--solid{background:var(--ink)}
.bento__item--solid::after{display:none}
.bento__item--lime{background:var(--lime); color:var(--ink)}
.bento__item--lime::after{display:none}
.bento__item--lime .bento__text p{color:rgba(14,26,39,.7)}
.bento__item--blue{background:var(--blue)}
.bento__item--blue::after{display:none}

/* ---------- Сетка карточек услуг ---------- */
.menu{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--gap)}
.menu__col{background:var(--card); border-radius:var(--r-card); padding:28px 28px 20px; box-shadow:var(--shadow)}
.menu__title{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.menu__row{
  display:flex; align-items:center; gap:14px; padding:15px 0;
  border-top:1px solid var(--line); transition:padding-left .18s ease;
}
.menu__row:hover{padding-left:6px}
.menu__row span{flex:1; font-size:16px; font-weight:600}
.menu__row b{color:var(--muted); font-size:14px; font-weight:600; white-space:nowrap}
.menu__row::after{
  content:"→"; width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  background:var(--card-2); color:var(--ink); font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:background-color .18s ease;
}
.menu__row:hover::after{background:var(--lime)}
.menu__note{margin:18px 0 0; font-size:13px; color:var(--muted)}

/* карточки-плитки с фото */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--gap)}
.pcard{
  display:block; background:var(--card); border-radius:var(--r-card); padding:14px 14px 20px;
  box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease;
}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover)}
.pcard__media{position:relative; border-radius:var(--r-inner); overflow:hidden; background:var(--card-2)}
.pcard__media img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s ease}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__go{
  position:absolute; right:12px; bottom:12px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:background-color .2s ease;
}
.pcard:hover .pcard__go{background:var(--lime)}
.pcard__body{display:flex; align-items:baseline; gap:12px; padding:16px 8px 0}
.pcard__body b{flex:1; font-size:16.5px; font-weight:700; letter-spacing:-.01em}
.pcard__body span{font-size:14px; color:var(--muted)}

/* ---------- Тёмная плитка ---------- */
.section--blue{padding:0; background:transparent}
.section--blue .container > *{position:relative; z-index:1}
.dark-tile{
  background:var(--ink); color:#fff; border-radius:var(--r-card); padding:44px;
  box-shadow:var(--shadow);
}
.dark-tile h2{color:#fff; max-width:640px}
.four{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px; margin-top:34px}
.four div{border-top:2px solid var(--lime); padding-top:16px}
.four b{display:block; font-size:17px; font-weight:700; margin-bottom:6px}
.four p{margin:0; color:rgba(255,255,255,.66); font-size:14.5px}

/* строка характеристик, как спека у референса */
.specs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; margin-top:8px}
.specs div span{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.specs div b{font-size:17px; font-weight:700; letter-spacing:-.01em}

/* ---------- Сравнение «до и после» ---------- */
.ba-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--gap)}
.ba{position:relative; margin:0; border-radius:var(--r-inner); overflow:hidden; background:var(--card-2); isolation:isolate;
  touch-action:pan-y}   /* горизонтальное движение — ползунку, вертикальное — прокрутке страницы */
.ba__img{width:100%; aspect-ratio:var(--ar,4/3); object-fit:cover; display:block; -webkit-user-drag:none}
.ba__clip{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__clip .ba__img{position:absolute; inset:0; height:100%}
.ba__line{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); pointer-events:none; z-index:3}
/* ручка ползунка: стеклянная, чтобы не спорить с фотографией */
.ba__line i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(14,26,39,.28);
}
.ba__line i::before,.ba__line i::after{content:""; position:absolute; top:50%; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent}
.ba__line i::before{left:9px; transform:translateY(-50%); border-right:6px solid #fff}
.ba__line i::after{right:9px; transform:translateY(-50%); border-left:6px solid #fff}
.ba__range{position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:ew-resize; touch-action:pan-y}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none; width:52px; height:100%; background:transparent; cursor:ew-resize}
.ba__range::-moz-range-thumb{width:52px; height:100%; background:transparent; border:0; cursor:ew-resize}
.ba__range:focus-visible{outline:3px solid var(--lime); outline-offset:-3px}

/* ---------- Галерея ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap)}
.gallery figure{margin:0; border-radius:var(--r-inner); overflow:hidden; background:var(--card)}
.gallery img{aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .4s ease}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{padding:12px 14px; font-size:13.5px; color:var(--muted)}
.gallery--tight{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.gallery--tight img{aspect-ratio:1/1}

/* ---------- Плитка «о компании» ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.split--rev .portrait{order:-1}
.portrait{margin:0}
.portrait img{width:100%; border-radius:var(--r-inner); aspect-ratio:4/5; object-fit:cover}

.reviews__links{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.reviews__link{
  padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:14px; font-weight:600; color:var(--ink); transition:border-color .18s ease, background-color .18s ease;
}
.reviews__link:hover{border-color:var(--ink); background:var(--card-2)}

/* белая плитка-обёртка для секций */
.tile-wrap{background:var(--card); border-radius:var(--r-card); padding:44px; box-shadow:var(--shadow)}

/* ---------- Страница услуги ---------- */
.page-hero{padding:10px 0 20px}
.page-hero__grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center;
  background:var(--card); border-radius:var(--r-card); padding:44px; box-shadow:var(--shadow);
}
.page-hero h1{font-size:clamp(30px,4vw,48px); font-weight:700; letter-spacing:-.035em; margin-bottom:16px}
.page-hero__lead{font-size:17px; color:var(--muted); max-width:520px}
.page-hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.page-hero__media{margin:0}
.page-hero__media img,.page-hero__media video{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-inner)}

.crumbs{font-size:12.5px; color:var(--muted); margin-bottom:16px; letter-spacing:.02em}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 6px; opacity:.5}

.grid2{
  display:grid; grid-template-columns:1.32fr .68fr; gap:var(--gap); align-items:start;
}
.grid2 > div:first-child{background:var(--card); border-radius:var(--r-card); padding:40px; box-shadow:var(--shadow)}

.checklist{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.checklist li{position:relative; padding-left:32px; color:var(--muted); font-size:15.5px}
.checklist li b{color:var(--ink); font-weight:700}
.checklist li::before{content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%; background:var(--lime)}
.checklist li::after{content:""; position:absolute; left:6px; top:10px; width:7px; height:4px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(-45deg)}

.panel{background:var(--ink); color:#fff; border-radius:var(--r-card); padding:34px 30px}
.panel h3{color:#fff; margin-bottom:16px}
.panel__h{margin-top:26px}
.panel__note{font-size:15px; color:rgba(255,255,255,.7); margin:0}
.panel .btn--green{background:var(--lime); color:var(--ink); margin-top:20px}
.panel .btn--green:hover{background:var(--lime-deep)}
.plain{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.plain li{position:relative; padding-left:16px; font-size:14.5px; color:rgba(255,255,255,.72)}
.plain li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--lime)}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--gap)}
.steps--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps li{background:var(--card); border-radius:var(--r-card); padding:28px 26px; box-shadow:var(--shadow)}
.steps__num{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; margin-bottom:16px; background:var(--lime); color:var(--ink); font-weight:700; font-size:15px;
}
.steps h3{font-size:17px; margin-bottom:8px}
.steps p{color:var(--muted); font-size:14.5px; margin:0}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--gap)}
.tile{
  display:block; padding:26px; border-radius:var(--r-card); background:var(--card);
  box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.tile:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover)}
/* «Организациям» (10 услуг) и «Частным лицам» (9): сетка под число плиток, без одинокой в последнем ряду */
@media (min-width:900px){ .tiles--3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1180px){ .tiles--5{grid-template-columns:repeat(5,1fr)} }
.tile b{display:block; font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em}
.tile span{display:block; color:var(--muted); font-size:14px; line-height:1.5}

/* ---------- Заявка ---------- */
.section--cta{padding:26px 0}
.section--cta .container{max-width:var(--container)}
.section--cta .container--narrow{
  background:var(--ink); color:#fff; border-radius:var(--r-card); padding:48px 44px;
  max-width:1000px; margin-inline:auto;  /* форма 720 в плитке 1300 смотрелась пустой слева */
}
.section--cta h2{color:#fff; max-width:620px}
.cta__lead{color:rgba(255,255,255,.68); max-width:600px; margin-bottom:26px}
.cta__or{
  margin:0 0 12px; font-size:13px; font-weight:700;
  letter-spacing:.04em; color:rgba(255,255,255,.62);
}
.cta__messengers{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px}
.section--cta .btn--green{background:var(--lime); color:var(--ink)}
.section--cta .btn--green:hover{background:var(--lime-deep)}

.form{display:grid; gap:14px; max-width:100%}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form label{display:grid; gap:7px; font-size:13.5px; color:rgba(255,255,255,.62)}
.form .opt{color:rgba(255,255,255,.42)}
.form input[type="text"],.form input[type="tel"],.form textarea{
  width:100%; padding:14px 18px; border-radius:16px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#fff; font:inherit; font-size:15.5px;
  transition:border-color .18s ease, background-color .18s ease;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.38)}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--lime); background:rgba(255,255,255,.12)}
.form .is-error{border-color:#F2A2A2; background:rgba(242,162,162,.14)}
.form textarea{resize:vertical}
.check{display:flex !important; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.5}
.check input{margin-top:3px; width:16px; height:16px; accent-color:var(--lime); flex:0 0 auto}
.check a{color:#fff; text-decoration:underline}
.form__status{margin:0; font-size:14.5px; min-height:1.4em; color:var(--lime)}
.form__status.is-error{color:#FFC7C7}
.form__hint{margin:0; font-size:13px; color:rgba(255,255,255,.45)}

/* ---------- Подвал ---------- */
.footer{padding:30px 20px 26px; font-size:14.5px; color:var(--muted)}
.footer__grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px;
  background:var(--card); border-radius:var(--r-card); padding:40px 44px; box-shadow:var(--shadow);
}
.footer h4{color:var(--ink); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
.footer a{color:var(--ink); font-weight:500}
.footer a:hover{color:var(--blue)}
.footer p{margin:0 0 9px}
.footer__text{color:var(--muted); font-size:14px; margin-top:14px}
.footer__bottom{max-width:var(--container); margin:18px auto 0; padding:0 8px}
.footer__bottom p{font-size:12.5px; color:var(--muted); margin:0}

/* ---------- Адаптив ---------- */
/* на узких экранах карточки мельче и стоят теснее */
@media (max-width:900px){
  .carousel__arrow{width:44px; height:44px; margin-top:-22px}  /* минимум под палец */
  .carousel__arrow--prev{left:8px}
  .carousel__arrow--next{right:8px}
  .carousel{--s:150px; --c:620px; --cw:132px; perspective:1000px; height:clamp(220px,52vw,260px); margin:30px auto 26px}
}

@media (max-width:1080px){
  .nav{display:none}
  .nav.is-open{
    display:flex; flex-direction:column; gap:2px; position:absolute; left:20px; right:20px; top:76px;
    background:var(--card); border-radius:var(--r-inner); box-shadow:var(--shadow-hover); padding:12px;
  }
  .nav.is-open a{padding:12px 14px; font-size:16px}
  .header__inner{position:relative}
  .burger{display:block}
}
@media (max-width:900px){
  .grid2,.split,.page-hero__grid{grid-template-columns:1fr; gap:28px}
  .trio{grid-template-columns:1fr; gap:20px}
  .trio div{padding:0; border-left:0; border-top:1px solid var(--line); padding-top:16px}
  .trio div:first-child{border-top:0; padding-top:0}
  .bento__item{grid-column:span 12 !important; min-height:200px}
  .hero__segments{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .split--rev .portrait{order:0}
  .hero__inner{padding:44px 26px 34px}
  .page-hero__grid,.tile-wrap,.dark-tile{padding:30px 24px}
  .grid2 > div:first-child{padding:30px 24px}
}
@media (max-width:720px){
  body{font-size:16px}
  /* пальцевые цели: ссылки в подвале были 19 px высотой */
  .footer a{display:inline-block; padding:10px 0; line-height:24px}
  .btn--sm{min-height:44px}
  .check{padding:4px 0}
  .hero__h1{white-space:normal; font-size:clamp(28px,7.4vw,40px) !important}
  .header__phone{display:none}
  .header__call{display:inline-flex}
  .header__actions .btn{display:none}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__cta .btn,.cta__messengers .btn{width:100%}
  .section--cta .container--narrow{padding:34px 24px}
}

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

/* ---------- Группы «до и после»: слева химчистка, справа окна и фасады ---------- */
.ba-groups{display:grid; grid-template-columns:2fr 1fr; gap:26px; align-items:start}
.ba-group__title{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.ba-group .ba-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ba__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:26px 14px 12px;
  color:#fff; font-size:13.5px; font-weight:600; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,26,39,0), rgba(14,26,39,.8));
  border-radius:0 0 var(--r-inner) var(--r-inner);
}

/* подпись руководителя */
.signature{display:flex; flex-direction:column; gap:2px; margin-top:18px}
.signature b{font-size:16px; font-weight:800}
.signature span{font-size:13.5px; color:var(--muted)}

.footer__note{color:var(--muted); font-size:14px; margin:0 0 4px}

/* ---------- Прайс ---------- */
.price{
  max-width:1180px; margin:0 auto;
  background:var(--card); border-radius:var(--r-card);
  padding:34px 44px 38px; box-shadow:var(--shadow);
}

/* вкладки по центру — под центрованным заголовком раздела */
.price__tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  padding-bottom:26px; margin-bottom:28px; border-bottom:1px solid var(--line);
}
.price__tab{
  padding:11px 20px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--muted); cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; letter-spacing:-.01em;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.price__tab:hover{border-color:var(--ink); color:var(--ink)}
.price__tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.price__tab:focus-visible{outline:3px solid var(--lime); outline-offset:2px}

/* без скрипта показываем все группы разом — страница остаётся читаемой */
.price.is-tabbed .price__panel{display:none}
.price.is-tabbed .price__panel.is-active{display:grid; animation:price-fade .25s ease}
@keyframes price-fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* три раскладки панели: две подгруппы рядом; одна длинная в две колонки;
   короткая — узкой плиткой по центру, чтобы не растягивалась на всю ширину */
.price__panel{display:grid; gap:18px; align-items:start}
.price__panel--split{grid-template-columns:repeat(2,1fr)}
.price__panel--wide{grid-template-columns:1fr}
.price__panel--wide .price__group{columns:2; column-gap:56px}
.price__panel--wide .price__sub{column-span:all}
.price__panel--narrow{grid-template-columns:1fr; max-width:620px; margin:0 auto}
.price__panel + .price__panel{margin-top:26px}
.price.is-tabbed .price__panel + .price__panel{margin-top:0}

.price__group{background:var(--card-2); border-radius:var(--r-inner); padding:20px 24px 14px}
.price__sub{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin:0 0 8px;
  break-after:avoid; break-inside:avoid;
}
.price__sub::before{content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--lime)}

.price__row{display:flex; align-items:baseline; gap:10px; padding:8px 0; break-inside:avoid}
.price__row span{order:0; flex:0 1 auto; font-size:16px; font-weight:600}
/* отточие вместо пустоты между названием и ценой */
.price__row::after{
  content:""; order:1; flex:1 1 14px; min-width:14px;
  border-bottom:1px dotted rgba(14,26,39,.24); position:relative; top:-2px;
}
.price__row i{
  order:2; flex:0 0 auto; font-style:normal; white-space:nowrap;
  font-size:16px; font-weight:800; letter-spacing:-.01em;
}
.price__row i small{font-size:12.5px; font-weight:700; color:var(--muted); margin-right:3px}
.price__row em{
  order:2; flex:0 0 auto; font-style:normal; white-space:nowrap;
  font-size:13.5px; font-weight:700; color:var(--muted);
}

/* надбавки касаются всех услуг — поэтому вне вкладок, под ними */
.price__extra{
  margin-top:22px; padding:20px 24px 14px;
  border-radius:var(--r-inner); background:var(--card-2);
  columns:2; column-gap:56px;
}
.price__extra .price__sub{column-span:all; color:var(--ink)}
.price__extra .price__row span{font-size:15.5px; font-weight:600}

.price__note{
  margin:30px auto 0; padding-top:22px; border-top:1px solid var(--line);
  max-width:760px; text-align:center; font-size:13.5px; line-height:1.65; color:var(--muted);
}


/* ---------- Галерея работ ---------- */
/* лента вкладок: на телефоне она прокручивается вбок, и без подсказки
   не видно, что справа есть ещё разделы. Затухание у края включает скрипт */
.tabs-wrap{position:relative}
.tabs-wrap::before,.tabs-wrap::after{
  content:""; position:absolute; top:0; bottom:12px; width:46px; z-index:2;
  pointer-events:none; opacity:0; transition:opacity .18s ease;
}
.tabs-wrap::before{left:-20px; background:linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0))}
.tabs-wrap::after{right:-20px; background:linear-gradient(to left, var(--card) 30%, rgba(255,255,255,0))}
.tabs-wrap.can-left::before{opacity:1}
.tabs-wrap.can-right::after{opacity:1}

.works__tabs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px}
.works__tab{
  padding:11px 20px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--muted); cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; letter-spacing:-.01em;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.works__tab:hover{border-color:var(--ink); color:var(--ink)}
.works__tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.works__tab:focus-visible{outline:3px solid var(--lime); outline-offset:2px}

/* без скрипта видны все направления подряд */
.works.is-tabbed .works__panel{display:none}
.works.is-tabbed .works__panel.is-active{display:block; animation:price-fade .25s ease}
.works__panel + .works__panel{margin-top:22px}
.works.is-tabbed .works__panel + .works__panel{margin-top:0}
/* кладка: у клиента много вертикальных кадров, кроп в 4:3 их резал */
.works__grid{columns:3; column-gap:var(--gap)}
.works__grid > *{break-inside:avoid; width:100%; margin:0 0 var(--gap)}

.shot{
  position:relative; margin:0; border-radius:var(--r-inner); overflow:hidden;
  background:var(--card-2); cursor:zoom-in;
}
.shot img{width:100%; height:auto; display:block; transition:transform .45s ease}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 16px 13px;
  color:#fff; font-size:14px; font-weight:700; letter-spacing:-.01em;
  background:linear-gradient(0deg, rgba(14,26,39,.78), rgba(14,26,39,0));
}
.shot:focus-visible{outline:3px solid var(--lime); outline-offset:3px}

/* просмотр фото на весь экран */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:28px;
  background:rgba(14,26,39,.9);
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%; max-height:86vh; border-radius:var(--r-inner); display:block}
.lightbox__close{
  position:absolute; top:18px; right:22px; width:44px; height:44px; padding:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
}
.lightbox__close:hover{background:rgba(255,255,255,.28)}
.lightbox__close:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.lightbox__cap{
  position:absolute; left:0; right:0; bottom:20px; text-align:center;
  color:rgba(255,255,255,.86); font-size:14px; font-weight:600;
}
@media (max-width:1100px){
  .works__grid{columns:2}
}
@media (max-width:720px){
  .works__tabs{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin:0 -20px 20px; padding:0 20px 14px;
  }
  .works__tabs::-webkit-scrollbar{display:none}
  .works__tab{flex:0 0 auto}
  .works__grid{columns:1}
}

/* ---------- Калькулятор ---------- */
.calc{
  max-width:1180px; margin:18px auto 0;
  background:var(--card); border-radius:var(--r-card);
  padding:32px 44px 36px; box-shadow:var(--shadow);
}
.calc__head{max-width:660px; margin-bottom:22px}
.calc__title{font-size:clamp(20px,2.2vw,27px); margin:0 0 8px}
.calc__lead{margin:0; color:var(--muted); font-size:15px}
.calc__body{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.calc__form,.calc__sum{background:var(--card-2); border-radius:var(--r-inner); padding:22px 24px}

.calc__form label{
  display:block; margin-bottom:16px;
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.calc select,.calc input{
  display:block; width:100%; margin-top:8px; padding:13px 16px;
  border:1px solid var(--line); border-radius:14px; background:var(--card);
  color:var(--ink); font:inherit; font-size:15.5px; font-weight:600; letter-spacing:-.01em;
}
.calc select{
  appearance:none; cursor:pointer; padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 21px, calc(100% - 16px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.calc select:focus-visible,.calc input:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.calc__rate{margin:-4px 0 16px; font-size:13.5px; color:var(--muted); min-height:20px}
.calc__rate b{color:var(--ink); font-weight:800}

.calc__empty{margin:0; color:var(--muted); font-size:15px}
.calc__list{list-style:none; margin:0; padding:0}
.calc__item{display:flex; align-items:baseline; gap:12px; padding:11px 0}
.calc__item + .calc__item{border-top:1px solid var(--line)}
.calc__item span{flex:1; font-size:15.5px; font-weight:600}
.calc__item small{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-top:2px}
.calc__item b{flex:0 0 auto; font-size:15.5px; font-weight:800; white-space:nowrap}
.calc__del{
  flex:0 0 auto; width:26px; height:26px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--muted); cursor:pointer; font-size:17px; line-height:1;
  transition:background-color .15s ease, color .15s ease;
}
.calc__del:hover{background:var(--line); color:var(--ink)}
.calc__del:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.calc__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-top:14px; padding-top:16px; border-top:2px solid var(--ink);
}
.calc__total span{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.calc__total b{font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-.03em}
.calc__note{margin:12px 0 0; font-size:13px; line-height:1.6; color:var(--muted)}
.calc__offer{
  display:flex; align-items:center; gap:9px; margin:14px 0 0; padding:11px 16px;
  background:var(--lime); border-radius:999px;
  font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
}
.calc__offer::before{content:""; flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--ink)}
.calc__sum .btn{margin-top:16px}

/* цифра-доказательство в блоке «О компании» */
.stat{display:flex; align-items:baseline; gap:10px; margin:22px 0 6px}
.stat b{font-size:clamp(26px,3vw,34px); font-weight:800; letter-spacing:-.03em; line-height:1}
.stat span{font-size:14px; color:var(--muted); font-weight:600}

@media (max-width:1000px){
  .price__panel--split{grid-template-columns:1fr}
  .price__panel--wide .price__group,
  .price__extra{columns:1}
  .price__note{text-align:left}
  .calc__body{grid-template-columns:1fr}
}
@media (max-width:720px){
  .price{padding:24px 20px 28px}
  .price__tabs{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    margin:0 -20px 24px; padding:0 20px 20px; scrollbar-width:none;
  }
  .price__tabs::-webkit-scrollbar{display:none}
  .price__tab{flex:0 0 auto}
  .price__group,.price__extra{padding:18px 16px 10px}
  /* на узком экране отточие съедает место под название — убираем его */
  .price__row{gap:12px; padding:7px 0}
  .price__row::after{display:none}
  .price__row span{flex:1 1 auto; font-size:15.5px}
  .price__row i{font-size:15px}
  .calc{padding:24px 20px 28px}
  .calc__form,.calc__sum{padding:18px 16px}
}

/* выпадающий список в форме */
.form select{
  width:100%; padding:14px 18px; border-radius:16px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#fff; font:inherit; font-size:15.5px;
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.form select:focus{outline:none; border-color:var(--lime); background-color:rgba(255,255,255,.12)}
.form select option{background:var(--ink); color:#fff}

@media (max-width:900px){
  .ba-groups{grid-template-columns:1fr}
  .price{padding:26px 22px}
}

/* узкие экраны: три кружка мессенджеров, звонок и меню должны поместиться до 320 px.
   Ужимаем по ступеням: отступы → подпись под логотипом → размер кнопок → слово в логотипе */
@media (max-width:520px){
  .header{padding:0 12px}
  .header__inner{gap:10px; padding:9px 10px 9px 14px}
  .logo{min-width:0}
  .header__actions{gap:6px}
  .header__actions .btn--sm{padding:10px 13px; font-size:13.5px}
  .header__msgs{gap:2px}
  .header__msg{width:32px; height:32px}
  .header__msg .msg-ico{width:19px; height:19px; flex-basis:19px}
}
@media (max-width:420px){
  .logo__note{display:none}
}
@media (max-width:374px){
  .header__inner{gap:8px}
  .header__actions{gap:4px}
  .header__msg{width:30px; height:30px}
  .header__msg .msg-ico{width:18px; height:18px; flex-basis:18px}
  .header__call{width:40px; height:40px}
  .burger{width:36px; height:36px; padding:10px 8px}
}
@media (max-width:350px){
  .logo__text{display:none}
}

/* ---------- Плашка про cookie ----------
   Информирует, но ничего не блокирует: в 152-ФЗ нет обязанности
   спрашивать разрешение на cookie, есть обязанность информировать. */
.check__note{margin:8px 0 0; font-size:13px; line-height:1.5; color:rgba(255,255,255,.6)}
.check__note a{color:rgba(255,255,255,.85); text-decoration:underline}

.cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  max-width:760px; margin:0 auto; padding:16px 20px;
  background:var(--ink); color:#fff; border-radius:var(--r-inner);
  box-shadow:var(--shadow-hover);
}
.cookie[hidden]{display:none}   /* иначе display:flex перебивает атрибут hidden */
.cookie p{margin:0; flex:1 1 280px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.82)}
.cookie a{color:#fff; text-decoration:underline}
.cookie .btn{flex:0 0 auto; background:var(--lime); color:var(--ink); border:0}
.cookie .btn:hover{background:var(--lime-deep)}
@media (max-width:520px){
  .cookie{left:10px; right:10px; bottom:10px; padding:14px 16px; gap:12px}
  .cookie p{font-size:13.5px}
}