/* Start:/bitrix/templates/gatineau/assets/styles.css?1760958226159384*/
/* ============ Base ============ */
:root{
  --container: 1440px;
  --container-pad: 24px;
  --header-h: 72px;

  /* сетка первого экрана по макету */
  --left-col: 760px;   /* ширина текстовой зоны (меню + контент) */
  --hero-gap: 48px;    /* отступ между текстом и фото */

  --bg: #ffffff;
  --fg: #121321;
  --muted: #6B6E7A;
  --accent: #3a3a3a;   /* кнопки */
  --dark: #0f0f0f;

  --radius-pill: 100px; /* скругление кнопок по ТЗ */
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin: 0;
  font-family: Jost;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }

/* Container */
.container{
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ============ Header (sticky) ============ */
/* ===== Внутренние страницы: базово (десктоп) ===== */
.header.header--inner {

  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.header.header--inner .socials__link .icon-img { 
  filter: brightness(0) saturate(100%) invert(9%) sepia(4%) saturate(590%) hue-rotate(182deg) brightness(95%) contrast(87%);
}
.header.header--inner .phone { color: #1C1C1C; }
.header.header--inner .btn--book { background:#1C1C1C; color:#fff; border:1px solid #1C1C1C; }
.header.header--inner .btn--book .btn__icon-img { filter: brightness(0) invert(1); }

/* Состояние при скролле (только десктоп) */
.header.header--inner.header--scrolled {
  background: rgba(15,16,32,.55);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.header.header--inner.header--scrolled .socials__link .icon-img,
.header.header--inner.header--scrolled .btn--book .btn__icon-img { filter: brightness(0) invert(1); }
.header.header--inner.header--scrolled .phone { color:#fff; }
.header.header--inner.header--scrolled .btn--book { background:transparent; color:#fff; border-color:#fff; }

/* ===== Мобайл + планшеты: сразу тёмный стеклянный ===== */
/* Под «планшетами» берём ширину до 1200px, при необходимости подстрой BY BREAKPOINT */
@media (max-width: 1200px) {
  .header.header--inner {
    height: var(--header-h, 72px);
    background: rgba(15,16,32,.55);
    border-bottom-color: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
  }
  .header.header--inner .logo__img { filter: brightness(0) invert(1); }
  .header.header--inner .socials__link .icon-img { filter: brightness(0) invert(1); }
  .header.header--inner .phone { color:#fff; }
  .header.header--inner .btn--book { background:transparent; color:#fff; border:1px solid #fff; }
  .header.header--inner .btn--book .btn__icon-img { filter: brightness(0) invert(1); }
  .header.header--inner .burger .burger__line,
  .header.header--inner .nav__close span { background-color:#fff; }
}
@media (max-width: 1200px) {
  .header .btn--book .btn__text {
    display: none;
  }

  /* делаем кнопку круглой */
  .header .btn--book {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header .btn--book .btn__icon-img {
    width: 20px;
    height: 20px;
  }
}


.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background .2s ease, box-shadow .2s ease, backdrop-filter .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.header--solid{
  background: rgba(15,16,32,.55);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
@supports not (backdrop-filter: blur(8px)) {
  .header--solid{ background: rgba(15,16,32,.7); }
}


.header__inner{
  height: var(--header-h);
  display: grid;
  grid-template-columns: var(--left-col) 1fr auto; /* меню внутри левой зоны */
  align-items: center;
}

.header__left{
  display: flex;
  align-items: center;
  min-width: 0;
}

.logo{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;     /* запрет сжатия контейнера логотипа */
}

/* отступ от логотипа до меню — 55px */
.nav{ margin-left: 55px; }

.nav__list{
  display: flex;
  gap: 18px;
  flex-wrap: nowrap;
}

.nav__list a{
  font-size: 15px;
  opacity: 0.9;
  white-space: nowrap;
}
.nav__list a:hover{ opacity: 1; }

.header__right{
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 80px; /* по ТЗ: 80px между соц.иконками, телефоном и кнопкой */
}

.socials{ display:flex; gap:14px; flex:0 0 auto; }
.socials > *{ display:inline-flex; }

/* телефон — белый поверх фото */
.phone{
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  color: #fff;
}

/* Buttons (общие) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  border: 0;
}

.btn--primary{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 16px rgba(84,196,241,.25);
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(84,196,241,.28); }
.btn--primary:active{ transform: translateY(0); }

.btn--dark{
  background: var(--dark);
  color: #fff;
  box-shadow: 0 8px 16px rgba(15,16,32,.25);
}
.btn--dark:hover{ transform: translateY(-1px); }
.btn--dark:active{ transform: translateY(0); }

/* кнопка в шапке: прозрачная, белый текст, обводка #636363 */
.header .btn--primary{
  background: transparent;
  color: #fff;
  border: 1px solid #ffffff;
  box-shadow: none;
}
.header .btn--primary:hover{ background: rgba(0,0,0,.12); }
.header .btn--primary:active{ background: rgba(0,0,0,.2); }
.header .btn--primary:focus-visible{
  outline: 2px solid rgba(99,99,99,.6);
  outline-offset: 2px;
}

/* ===== Header для внутренних страниц ===== */
.header--inner {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background .2s ease, color .2s ease;
}

.header--inner .socials__link .icon-img {
  height: 20px;
  filter: brightness(0) saturate(100%) invert(9%) sepia(4%) saturate(590%) hue-rotate(182deg) brightness(95%) contrast(87%);
}
.header--inner .phone { color: #1C1C1C; }
.header--inner .btn--primary {
  background: #1C1C1C;
  border-color: #1C1C1C;
  color: #fff;
}
.header--inner .btn--primary .btn__icon-img {
  filter: brightness(0) invert(1);
}

/* ===== Состояние при скролле ===== */
.header--inner.header--scrolled {
  background: rgba(15,16,32,.55);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.header--inner.header--scrolled .socials__link .icon-img {
  filter: brightness(0) invert(1); /* белый */
}
.header--inner.header--scrolled .phone { color: #fff; }
.header--inner.header--scrolled .btn--primary {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.header--inner.header--scrolled .btn--primary .btn__icon-img {
  filter: brightness(0) invert(1);
}



/* ============ Hero ============ */
.hero{
  position: relative;
  padding: calc(var(--header-h)) 0 4px;     /* текст под хедером */
  margin-top: calc(-1 * var(--header-h));    /* фото упрётся в верх страницы */
}

.hero__inner{
  display: grid;
  grid-template-columns: var(--left-col) 1fr; /* слева текст, справа фото */
  gap: var(--hero-gap);
  align-items: stretch;   /* одинаковая высота колонок */
}

/* Left column: слева + вертикальный центр */
.hero__left{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* по левому краю */
  justify-content: center;   /* по центру по вертикали */
  gap: 22px;
  padding-bottom: 32px;      /* место под адрес внизу */
}

.hero__title{
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(48px, 10vw, 128px);
}

.hero__lead{
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 18px;
}

.hero__promo{
  margin: 0;
  font-size: 18px;
}

/* адрес у нижней кромки, вровень с фото */
.hero__address{
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Right (photo) */
.hero__right{
  position: relative;
  min-height: 520px;
  display: grid;

  /* прижать фото к правому краю контейнера */
  margin-right: calc(-1 * var(--container-pad));
}

.hero__media{
  position: relative;
  overflow: hidden;
  border-radius: 2px;              /* скругление 2px */
  box-shadow: 0 24px 64px rgba(20,22,40,.25);
  background: #dcdde3;
  height: 100%;
}

.hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Play button on photo */
.hero__play{
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  background: rgba(0,0,0,.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.hero__play:hover{ background: rgba(0,0,0,.65); }

.hero__logo {
  width: clamp(180px, 28vw, 420px);
  height: auto;
  display: block;
  transition: filter 0.3s ease;
}

/* Белый логотип на мобильной и планшетной */
@media (max-width: 1024px) {
  .hero__logo {
    filter: brightness(0) invert(1); /* делает SVG белым */
  }
}

/* ============ Burger (mobile) ============ */
.burger{
  display: none;
  margin-left: 16px;
  width: 40px; height: 40px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 100px;
  background: transparent;
  color: #fff;
  position: relative;
}
.burger__line,
.burger::before,
.burger::after{
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.burger__line{ top: 50%; transform: translateY(-50%); }
.burger::before{ top: 13px; }
.burger::after{ bottom: 13px; }

/* крестик при открытом меню */
.header.is-open .burger__line{ opacity: 0; }
.header.is-open .burger::before{ transform: translateY(7px) rotate(45deg); }
.header.is-open .burger::after{ transform: translateY(-7px) rotate(-45deg); }



/* ============ Adaptive tweaks ============ */
@media (max-width: 1280px){
  .nav__list{ gap: 20px; }
}

@media (max-width: 1024px){
  :root{
    --left-col: min(720px, 100%);
    --hero-gap: 28px;
  }

  .header__inner{
    grid-template-columns: auto 1fr auto; /* логотип + бургер слева */
    gap: 12px;
  }

  .burger{ display: inline-flex; align-items:center; justify-content:center; }

  /* прячем десктопное меню; открываем как оверлей */
  .nav{
    display: none;
    margin-left: 0; /* сброс 55px */
  }
  .header.is-open .nav{
    display: block !important;
    position: fixed;
    inset: 0;                              /* вместо top/bottom */
    height: 100dvh;                        /* надёжная высота экрана */
    padding: calc(var(--header-h) + 16px) 24px 24px; /* место под шапку */
    background: rgba(15,16,32,.96);
    overflow: auto;
    overscroll-behavior: contain;          /* не прокручивать body под низом */
    -webkit-overflow-scrolling: touch;     /* плавный скролл на iOS */
    z-index: 1001;                         /* поверх содержимого шапки */
  }
  .nav__list{
    flex-direction: column;
    gap: 16px;
  }
  .nav__list a{
    color: #fff;
    font-size: 22px;
    padding: 10px 4px;
  }

  /* правая часть шапки — ужимаем отступы */
  .header__right{ gap: 24px; }

  /* Герой в одну колонку; фото сверху */
  .hero__inner{ grid-template-columns: 1fr; position: relative; }
  .hero__right{
    order: -1;
    min-height: 72vh;
    margin-right: calc(-1 * var(--container-pad));
    position: relative; z-index: 1;
  }
  .hero__media{ position: relative; }
  .hero__media::after{
    content:"";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 100%);
    z-index: 2; pointer-events: none;
  }
  .hero__play{ z-index: 3; }

  /* текст поверх затемнения */
  .hero__left{
    position: absolute;
    left: var(--container-pad);
    right: var(--container-pad);
    top: calc(var(--header-h) + 16px);
    bottom: 20px;
    z-index: 4;                 /* важный слой */
    color: #fff;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-end;
    gap: 16px; padding-bottom: 0;
  }
  .hero__left *{ color: inherit; }
  .hero__address{
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; opacity: .9;
  }

  /* кнопку «Записаться» в герое — компактнее */
  .btn--dark{ height: 42px; padding: 0 18px; }

  /* скрываем соцсети и телефон в шапке */
  .socials, .phone{ display: none; }

  /* круглая кнопка записи в шапке (если без правки HTML) */
  .header .btn--primary{
    width: 44px; height: 44px; padding: 0; border-radius: 999px;
    color: transparent; position: relative;
  }
  .header .btn--primary::before{
    content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
    background: url("/bitrix/templates/gatineau/assets/img/book.svg") no-repeat center / contain;
    filter: brightness(0) invert(1);
  }

  /* логотип белый на мобилке */
  .logo__img{ filter: brightness(0) invert(1); }   /* если логотип <img> */
  .logo{ color:#fff; }                              /* если inline-SVG */
  .logo svg, .logo path{ fill: currentColor; }
}

@media (max-width: 640px){
  :root{ --container-pad: 16px; }
  .container{ padding-inline: var(--container-pad); }

  .btn{ height: 42px; padding: 0 18px; }
  .hero__lead, .hero__promo{ font-size: 16px; }

  .phone{ font-size: 13px; }
  .hero__right{ min-height: 68vh; }
  .hero__left{ top: calc(var(--header-h) + 8px); bottom: 20px; }
}

/* Вспомогательные */
.logo__img{ height: 22px; width: auto; display:block; }
.icon-img{ width:18px; height:18px; display:block; }

/* Блокировка прокрутки при открытом меню */
body.no-scroll{ overflow: hidden; }

/* ===== Вариант, если добавил в HTML иконку и текст для кнопки записи ===== */
.btn__icon-img{ display:none; width:18px; height:18px; }
@media (max-width:1024px){
  .btn--book{ width:44px; height:44px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
  .btn--book .btn__text{
    position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .btn--book .btn__icon-img{ display:block; filter: brightness(0) invert(1); }
}

/* === MOBILE FIXES === */
@media (max-width: 1024px){
  /* 1) Фото без левого отступа — во весь экран по ширине контейнера */
  .hero__right{
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--container-pad));
  }

  /* 2) Текст слева: по левому краю и по вертикали по центру.
        Оставим место под адрес у самого низа. */
  .hero__left{
    justify-content: center;     /* центр по вертикали */
    align-items: flex-start;      /* по левому краю */
    padding-bottom: 64px;         /* запас под адрес, чтобы не наезжал */
  }
  .hero__address{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0;
  }

  /* 3) Кнопка в блоке hero — всегда с тёмным фоном */
  .hero .btn--dark{
    background: var(--dark) !important;
    color: #fff !important;
  }
}

/* ==== MOBILE HEADER: logo → book → burger, all left, 30px spacing ==== */
@media (max-width: 1024px){
  /* общий левый отступ контейнера 30px по ТЗ */
  :root{ --container-pad: 30px; }

  /* кладём элементы шапки в сетку и задаём порядок */
  .header__inner{
    display: grid;
    grid-template-columns: auto auto 1fr;        /* logo | book | burger */
    grid-template-areas: "logo book burger";
    column-gap: 30px;                             /* отступы 30px */
    align-items: center;
  }

  /* «сплющиваем» обёртки, чтобы их дети легли на сетку */
  .header__left,
  .header__right{ display: contents; }

  /* позиции элементов */
  .logo{ grid-area: logo; justify-self: start; }
  .header .btn--primary{ grid-area: book; justify-self: start; }
  .burger{ grid-area: burger; justify-self: start; }

  /* скрываем лишнее в моб.шапке */
  .socials, .phone{ display: none !important; }
}

/* на очень узких — сохраняем логику */
@media (max-width: 640px){
  :root{ --container-pad: 30px; } /* тоже 30px */
  .logo__img{ height: 52px; width: auto; display:block; }
}

/* ===== Play под адресом (mobile) + запас места под него ===== */
@media (max-width: 1024px){
  /* адрес остаётся у самого низа, а ниже — кнопка Play */
  .hero__address{ margin-bottom: 72px; } /* место под кнопку */

  .hero__play{
    left: var(--container-pad);
    bottom: 20px;       /* ниже адреса */
    z-index: 4;         /* над затемнением и фото */
    width: 64px; height: 64px;
  }
}

/* ===== Индикатор прокрутки справа на фото ===== */
.hero__scroll {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  z-index: 4;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  
  /* добавляем две анимации одновременно */
  animation:
    hero-bounce 2.2s ease-in-out infinite,
    hero-pulse 2.4s ease-in-out infinite;
}

.hero__scroll:hover {
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.5);
  transform: translateY(1px);
}

.hero__scroll svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* подпрыгивание */
@keyframes hero-bounce {
  0%,100% { transform: translateY(0); opacity: .95; }
  50% { transform: translateY(4px); opacity: .8; }
}

/* мягкий пульсирующий эффект свечения */
@keyframes hero-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.3);
  }
  50% {
    box-shadow: 0 0 8px 4px rgba(255,255,255,0.15);
  }
}

/* чуть компактнее на телефонах */
@media (max-width: 640px) {
  .hero__scroll {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
  }
}

/* фото без левого отступа на мобиле — во весь край */
@media (max-width: 1024px) {
  .hero__right {
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--container-pad));
  }
}


/* ==== TABLET HEADER (logo left, book + burger right) ==== */
@media (min-width: 641px) and (max-width: 1024px){
  /* вернём стандартные поля контейнера для планшета */
  :root{ --container-pad: 24px; }

  /* сетка: logo | spacer | book | burger (справа) */
  .header__inner{
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    column-gap: 24px;
    align-items: center;
  }

  /* чтобы дети встали на сетку напрямую */
  .header__left,
  .header__right{ display: contents; }

  .logo{ justify-self: start; }
  .header .btn--primary{ justify-self: end; } /* кнопка записи справа */
  .burger{ justify-self: end; }                /* бургер справа */

  /* скрываем телефон и соцсети на планшете */
  .socials, .phone{ display: none !important; }

  /* круглая иконка «записи» без текста (если используешь CSS-fallback) */
  .header .btn--primary{
    width: 44px; height: 44px; padding: 0;
    border-radius: 999px;
    color: transparent;                       /* текст прячем */
    position: relative;
  }
  .header .btn--primary::before{
    content:""; position:absolute; inset:0; margin:auto;
    width: 18px; height: 18px;
    background: url("/bitrix/templates/gatineau/assets/img/book.svg") no-repeat center / contain;
    filter: brightness(0) invert(1);          /* белая иконка */
  }

  /* прячем десктопное меню; открываем оверлеем по бургеру (как и на мобиле) */
  .nav{ display: none; margin-left: 0; }
  .header.is-open .nav{
    display: block !important;
    position: fixed;
    inset: 0;                              /* вместо top/bottom */
    height: 100dvh;                        /* надёжная высота экрана */
    padding: calc(var(--header-h) + 16px) 24px 24px; /* место под шапку */
    background: rgba(15,16,32,.96);
    overflow: auto;
    overscroll-behavior: contain;          /* не прокручивать body под низом */
    -webkit-overflow-scrolling: touch;     /* плавный скролл на iOS */
    z-index: 1001;                         /* поверх содержимого шапки */
  }
  .nav__list{ flex-direction: column; gap: 12px; }
  .nav__list a{ color: #fff; font-size: 18px; padding: 10px 4px; }
}

/* ==== DESKTOP NARROW (1140–1439): правый блок шапки на фото, ничего не пропадает ==== */
@media (min-width: 1140px) and (max-width: 1439px){
  /* меню компактнее, чтобы не давило правый блок */
  .nav__list{ gap: 10px; }

  /* весь правый блок (соцсети + телефон + кнопка) двигаем в область фото */
  .header__right{
    margin-right: calc(-1 * var(--container-pad)); /* заходим на край контейнера/фото */
    gap: 32px;                 /* было 80px — ужмём для влезания */
    flex-wrap: nowrap;         /* запрет переносов */
    align-items: center;
  }

  /* кнопка записи чуть компактнее, чтобы не ломалась строка */
  .header .btn--primary{
    height: 42px;
    padding: 0 18px;
  }
}

/* на этих ширинах следим, чтобы соцсети точно были видимы поверх фото */
@media (min-width: 1140px){
  .socials{ display:flex; }
  .socials__link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  line-height:0;                    /* убирает лишние «подложки» у инлайн-иконок */
  flex:0 0 auto;
}
}

/* на очень широких (1440+) возвращаем исходные большие отступы справа */
@media (min-width: 1440px){
  .header__right{
    margin-right: 0;
    gap: 80px;
  }
}

/* ==== 1) Хедер всегда поверх всего ==== */
.header{ z-index: 1000; }                     /* выше любых слоёв героя */
.hero, .hero__right, .hero__media{ z-index: 1; }

/* ==== 2) Десктоп: правый блок на фото и без переносов ==== */
@media (min-width:1025px) and (max-width:1439px){
  .nav__list{ gap:20px; }
  .nav__list a{ font-size:14px; }

  /* Наезжаем на фото, но держим отступ от правого края = паддингу контейнера */
  .header__right{
    margin-right:calc(-1 * var(--container-pad));  /* поверх фото, как на 1440 */
    padding-right:var(--container-pad);            /* кнопка не уезжает к самому краю */
    gap:32px;
  }

  .header .btn--primary{ height:42px; padding:0 18px; }
  .phone{ font-size:13px; }
}

/* ==== 3) Узкий десктоп (1025–1439): поджать, чтобы всё влезало ==== */
@media (min-width: 1025px) and (max-width: 1439px){
  .nav__list{ gap: 20px; }
  .nav__list a{ font-size: 14px; }

  .header__right{ gap: 32px; }               /* было 80px — ужимаем */
  .header .btn--primary{ height: 42px; padding: 0 18px; }  /* компактнее кнопка */
  .phone{ font-size: 13px; }                 /* телефон не распирает */

  /* сделать соц.иконки читаемыми на светлом участке фото */
  .socials__link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  line-height:0;                    /* убирает лишние «подложки» у инлайн-иконок */
  flex:0 0 auto;
}
}

/* ==== 4) Очень узкий узкий диапазон (1140–1280): ещё чуть плотнее ==== */
@media (min-width: 1140px) and (max-width: 1280px){
  .header__right{ gap: 24px; }
}

/* ==== 5) Широкие экраны (1440+): возвращаем большие отступы ==== */
@media (min-width: 1440px){
  .header__right{
    margin-right: 0;
    gap: 80px;
  }
}

/* === 1) Соцсети: без фона/бордера и без фикс-размера === */
.socials__link{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 0;
}
.icon-img{
  width: auto !important;
  height: auto !important;    /* убираем 18×18 из текущего блока выше */
  display: block;
  object-fit: contain;
  max-height: 28px;           /* чтобы не «распухали», можно менять при желании */
}

/* === 2) Узкий десктоп: кнопка не упирается в край, правый блок на фото === */
/* 1140–1439: наезжаем на фото, но держим внутренний отступ справа */
@media (min-width:1140px) and (max-width:1439px){
  .header__right{
    margin-right: calc(-1 * var(--container-pad));   /* кладём поверх фото */
    padding-right: max(var(--container-pad), 24px);  /* отступ от правой кромки */
    gap: 32px;
  }
  /* компактнее меню — чтобы всё влезало */
  .nav__list{ gap: 12px; }
  .nav__list a{ font-size: 14px; }
  .header .btn--primary{ height: 42px; padding: 0 18px; }
  .phone{ font-size: 13px; }
}

/* === 3) Делаем фото шире на 1140–1439, чтобы соцсети заходили на него как на 1440 === */
/* уменьшаем ширину левой колонки — правая (фото) становится шире */
@media (min-width:1140px) and (max-width:1280px){
  :root{
    --left-col: 600px;     /* было 760px — даём месту фото */
    --hero-gap: 36px;
  }
}
@media (min-width:1281px) and (max-width:1439px){
  :root{
    --left-col: 640px;     /* плавный переход к 1440 */
    --hero-gap: 40px;
  }
}

/* На очень широких экранах возвращаем «по макету» */
@media (min-width:1440px){
  .header__right{
    margin-right: 0;
    padding-right: 0;
    gap: 80px;
  }
}

/* ==== MOBILE & TABLET: logo — book — burger (бургер у самого правого края), gap 35 ==== */
@media (max-width:1024px){
  .header__inner{
    display:grid;
   /* grid-template-columns:auto 1fr auto auto; /* logo | spacer | book | burger */
    column-gap:35px;
    align-items:center;
  }
  /* прокидываем детей оболочек прямо в сетку */
  .header__left, .header__right{ display:contents; }

  .logo{ justify-self:start; }
  .header .btn--primary{ justify-self:end !important; }  /* кнопка справа от центра */
  .burger{ display:inline-flex; justify-self:end !important; } /* бургер — самый правый */

  /* скрыть лишнее в мобильной шапке */
  .socials, .phone{ display:none !important; }

  /* меню — как оверлей по бургеру */
  .nav{ display:none; margin-left:0; }
  .header.is-open .nav{
    display: block !important;
    position: fixed;
    inset: 0;                              /* вместо top/bottom */
    height: 100dvh;                        /* надёжная высота экрана */
    padding: calc(var(--header-h) + 16px) 24px 24px; /* место под шапку */
    background: rgba(61, 61, 61, 0.96);
    overflow: auto;
    overscroll-behavior: contain;          /* не прокручивать body под низом */
    -webkit-overflow-scrolling: touch;     /* плавный скролл на iOS */
    z-index: 1001;                         /* поверх содержимого шапки */
  }
  .nav__list{ flex-direction:column; gap:16px; }
  .nav__list a{ color:#fff; font-size:18px; padding:10px 4px; }
}

/* ==== iPad mini (ландшафт ≈1133): делаем как мобильную шапку ==== */
@media (min-width:1025px) and (max-width:1180px){
  .header__inner{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    column-gap:35px;
    align-items:center;
  }
  .header__left, .header__right{ display:contents; }
  .logo{ justify-self:start; }
  .header .btn--primary{
    justify-self:end !important;
    /* круглая иконка записи (как на мобиле) */
    width:44px; height:44px; padding:0; border-radius:999px;
    color:transparent; position:relative;
  }
  .header .btn--primary::before{
    content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
    background:url("/bitrix/templates/gatineau/assets/img/book.svg") no-repeat center / contain;
    filter:brightness(0) invert(1);
  }
  .burger{ display:inline-flex; justify-self:end !important; }
  .socials, .phone{ display:none !important; }

  /* меню — оверлей */
  .nav{ display:none; margin-left:0; }
  .header.is-open .nav{
    display: block !important;
    position: fixed;
    inset: 0;                              /* вместо top/bottom */
    height: 100dvh;                        /* надёжная высота экрана */
    padding: calc(var(--header-h) + 16px) 24px 24px; /* место под шапку */
    background: rgba(15,16,32,.96);
    overflow: auto;
    overscroll-behavior: contain;          /* не прокручивать body под низом */
    -webkit-overflow-scrolling: touch;     /* плавный скролл на iOS */
    z-index: 1001;                         /* поверх содержимого шапки */
  }
  .nav__list{ flex-direction:column; gap:16px; }
  .nav__list a{ color:#fff; font-size:18px; padding:10px 4px; }
}

/* ==== Соцсети: никаких заливок/бордеров и без фикс-размера ==== */
.socials__link{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  line-height:0;
}
.icon-img{
  width:auto !important;
  height:auto !important;
  display:block;
  object-fit:contain;
  max-height:28px; /* чтобы не раздувались на узких экранах */
}
/* === Desktop: белые меню и логотип при скролле (header--solid) === */
@media (min-width:1025px){
  .nav__list a{ transition: color .2s ease, opacity .2s ease; }
  .logo__img{ transition: filter .2s ease; }

  .header--solid .nav__list a{
    color:#fff;
    opacity:1;
  }
  .header--solid .nav__list a:hover{
    color:#fff;                 /* остаётся белым при ховере */
    opacity:1;
  }

  /* если логотип <img> */
  .header--solid .logo__img{
    filter:brightness(0) invert(1);  /* делает логотип белым */
  }
  /* если логотип inline-SVG/текст */
  .header--solid .logo{
    color:#fff;
  }
}

/* === Full-screen hero photo on all sizes === */
/* 1) надёжная единица высоты вьюпорта (iOS/Android) */
:root{ --vh: 70vh; }
@supports (height: 100dvh){
  :root{ --vh: 100dvh; }   /* динамический вьюпорт, без прыжков при скролле */
}

/* 2) десктоп: правая колонка (фото) — ровно экран */
@media (min-width:1025px){
  .hero__inner{ min-height: 800px; }  /* задаём высоту строки грида */
  .hero__right{ height: 800px; }      /* контейнер под фото = экран */
}

/* 3) планшет/мобайл: фуллблид и тоже ровно экран */
@media (max-width:1024px){
  .hero__right{
    height: var(--vh);        /* вместо min-height 68/72vh — точно экран */
  }
}

/* 4) само изображение тянется ровно по контейнеру */
.hero__media{
  height: 100%;
  overflow: hidden;           /* ничего не «вылезает» */
}
.hero__media img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Кнопка закрытия меню (крестик) */
.nav__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.nav__close span {
  position: absolute;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease;
}

.nav__close span:first-child {
  transform: rotate(45deg);
}
.nav__close span:last-child {
  transform: rotate(-45deg);
}

.nav__close:hover {
  background: rgba(255,255,255,0.08);
}


/* ============ About (clean remake) ============ */
.about{ padding: 96px 0; }
@media (max-width:1024px){ .about{ padding: 64px 0; } }

.about__grid{
  display:grid;
  grid-template-columns: 800px minmax(0,1fr);  /* ключевое: ширина левого фото = 800px */
  gap: 64px;
  align-items:start;
}
@media (min-width:1140px) and (max-width:1279px){
  .about__grid{ grid-template-columns: 720px minmax(0,1fr); gap:48px; }
}
@media (min-width:1025px) and (max-width:1139px){
  .about__grid{ grid-template-columns: 640px minmax(0,1fr); gap:40px; }
}
@media (max-width:1024px){
  .about__grid{ grid-template-columns:1fr; gap:24px; }
}
/* Крестик меню показываем только на мобильных/планшетах */
.nav__close {
  display: none; /* по умолчанию скрыто */
}
@media (max-width: 1024px) {
  .nav__close {
    display: flex; /* показываем */
  }
}

/* левое большое фото */
.about__media{
  margin:0;
  width: 100%;
  height: auto;
  border-radius: 20px;
  overflow:hidden;
  background:#dcdde3;
}
.about__media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* правая колонка */
.about__content{ max-width: 560px; } /* как на скрине: узкая текстовая колонка */
.about__title{
  margin:0 0 20px;
  font-weight:600;
  letter-spacing:-.01em;
  font-size: clamp(28px, 3.2vw, 44px);
}
.about__text{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.6;
  font-size:16px;
}
.about__more{
  display:inline-block;
  margin:6px 0 28px;
  font-weight:600; font-size:15px;
  text-decoration:underline; text-underline-offset:3px;
}

/* видео-строка */
.about__video{ display:flex; align-items:center; gap:14px; margin: 4px 0 24px; }
.about__video-text{ font-weight:600; }
.about__play{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(18,19,33,.28);
  background:transparent; color:#111;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  animation: about-pulse 2.6s ease-in-out infinite;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.about__play:hover{ transform: scale(1.06); }
@keyframes about-pulse{
  0%,100%{ transform: scale(1);    box-shadow: 0 0 0 0 rgba(84,196,241,0); }
  50%   { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(84,196,241,.12); }
}

/* превью — под текстом (в правой колонке), без наложений и горизонтального скролла */
.about__thumbs{
  display:flex; gap:18px; flex-wrap:nowrap;
  overflow:hidden; padding:0; margin:0; list-style:none;
}
.about__thumb{ list-style:none; }
.about__thumb-btn{
  display:block; padding:0; border:0; background:transparent; cursor:pointer;
  border-radius:12px; overflow:hidden; position:relative;
  width:200px; height:120px;
  box-shadow: 0 10px 24px rgba(20,22,40,.12);
  outline:2px solid transparent; transition: transform .2s, outline-color .2s;
}
.about__thumb-btn img{ width:100%; height:100%; object-fit:cover; display:block; }
.about__thumb-btn:hover{ transform: translateY(-2px) scale(1.04); }
.about__thumb--active .about__thumb-btn{ outline-color: var(--accent); }

/* адаптив превью */
@media (min-width:1140px) and (max-width:1439px){
  .about__thumb-btn{ width:180px; height:110px; }
}
@media (max-width:1024px){
  .about__content{ max-width:none; }
  .about__thumbs{
    display:grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:14px; margin-top:6px;
  }
  .about__thumb-btn{
    width:100%; height: clamp(90px, 24vw, 150px);
  }
}


/* === ABOUT: фото 600px + 4 квадратные миниатюры снизу === */
@media (min-width:1025px){
  /* Левая колонка фикс 600, правая — гибкая, высоты колонок равны */
  .about__grid{
    grid-template-columns: 600px minmax(0,1fr) !important;
    gap: 56px !important;
    align-items: stretch !important;     /* высота строки = высоте большого фото */
  }
  .about__media{ width: 600px !important; }

  /* Контент справа: всё по левому краю, миниатюры прижимаем вниз */
  .about__content{
    display: grid !important;
    grid-template-rows: auto auto auto 1fr auto; /* title, text, video, spacer, thumbs */
    row-gap: 18px;
    justify-items: start;
    max-width: 560px;
  }

  /* Ряд миниатюр — внизу, 4 штуки, квадратные */
  .about__thumbs{
    grid-row: 5;                 /* нижняя строка */
    align-self: end;             /* прижать к низу блока */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0; padding: 0;
    overflow: hidden;            /* без горизонтальной прокрутки */
  }
  .about__thumb-btn{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;         /* квадрат */
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(20,22,40,.12);
    outline: 2px solid transparent;
    transition: transform .2s, outline-color .2s;
  }
  .about__thumb-btn img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
}

/* Подстраховка от горизонтального скролла секции */
.about{ overflow-x: clip; }

/* About: миниатюры без теней и без подсветки при клике */
.about__thumb-btn{
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent; /* убирает синий хайлайт на мобильных */
}

.about__thumb--active .about__thumb-btn{ outline: none !important; }

.about__thumb-btn:focus,
.about__thumb-btn:focus-visible,
.about__thumb-btn:active{
  outline: none !important;
  box-shadow: none !important;
}

/* Оверлей для кроссфейда */
.about__media{ position: relative; }
.about__overlay{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; pointer-events:none;
  will-change: opacity;
}


/* ---------- Benefits ---------- */
.benefits {
  position: relative;
  color: #fff;
  padding-block: clamp(48px, 6vw, 80px);
  overflow: hidden;
}

/* фон: фото + затемнение. Положи изображение в /img/benefits.jpg */
.benefits__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(15,16,32,.55), rgba(15,16,32,.55)),
    url("/bitrix/templates/gatineau/assets/img/benefits.jpg") center/cover no-repeat;
  filter: saturate(.95);
  z-index: 0;
}

/* контент поверх */
.benefits .container { position: relative; z-index: 1; }

/* список — в линию на десктопе */
.benefits__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2vw, 32px);
}

/* карточки — без фона, текст прямо на затемнённом фото */
.benefits__item {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: clamp(8px, 1vw, 12px);
  min-height: 160px;
  position: relative;
}



/* разделители между колонками (чуть темнее) на широких */
@media (min-width: 1200px) {
  .benefits__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -16px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(255,255,255,.12);
  }
}

.benefits__title {
  font-family: Jost, var(--font, sans-serif);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: .2px;
}

.benefits__text {
  color: rgba(255,255,255,.8);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  max-width: 36ch;
}

/* --- адаптив --- */
@media (max-width: 1140px) {
  .benefits__list { grid-template-columns: repeat(2, 1fr); }
  .benefits__item:not(:last-child)::after { display: none; }
}

@media (max-width: 680px) {
  .benefits { padding-block: 40px; }
  .benefits__list { grid-template-columns: 1fr; gap: 28px; }
  .benefits__item::before { height: 36px; }
  .benefits__text { max-width: none; }
}
.benefits {
  position: relative;
  padding-block: clamp(48px, 6vw, 80px);
  color: #fff;
}

.benefits__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(28, 28, 28, 0.8), rgba(28, 28, 28, 0.8)),
    url("/bitrix/templates/gatineau/assets/img/benefits.jpg") center/cover no-repeat;
  z-index: 0;
}

.benefits .container {
  position: relative;
  z-index: 1;
}

/* ---------- Services ---------- */
.services {
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--bg, #F5F6FA);
}

.section-title {
  font-family: Jost, var(--font, sans-serif);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  margin-bottom: clamp(28px, 3vw, 48px);
  color: var(--fg, #121321);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
  align-items: stretch;
}

/* ---------- Карточка услуги ---------- */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid #ECEEF4;
  border-radius: 12px;
  background: #fff;
  height: 100%;
}

.service-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 8px;
}

/* Контейнер для текста */
.service-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

/* Заголовок: максимум 2 строки */
.service-card__title {
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1em * 1.3 * 2);
}

/* Описание: максимум 4 строки */
.service-card__text {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--muted, #6B6E7A);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1em * 1.5 * 4);
}

/* --- адаптив --- */
@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services__grid {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .service-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  .service-card__img {
    aspect-ratio: 16/10;
  }

  /* убираем скроллбар */
  .services__grid::-webkit-scrollbar {
    display: none;
  }
  .services__grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* ---------- Services-alt (для других страниц) ---------- */
.services-alt {
  background: var(--bg, #F5F6FA);
}

.services-alt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
  align-items: stretch;
}

@media (max-width: 1024px) {
  .services-alt__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services-alt__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .services-alt .service-card__img {
    aspect-ratio: 16/10;
  }
}



/* === CTA Gift === */
.cta-gift {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 183px;
}
@media (max-width: 767px) {
  .cta-gift { margin-top: 60px; }
}

.cta-gift__bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: translateZ(0);
}
.cta-gift__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 28, 0.8);
}

.cta-gift__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 24px;
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  grid-template-rows: auto auto;
  gap: 16px 24px;
  align-items: center;
}

.cta-gift__title {
  grid-column: 1 / 4;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.2;
  font-weight: 300;
  color: #FFFFFF;
  margin-bottom: 8px;
}

/* форма */
.cta-gift__form {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px 24px;
  align-items: center;
}

.cta-gift .field input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 16px;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cta-gift .field input::placeholder { color: rgba(255,255,255,0.75); }
.cta-gift .field input:focus {
  border-color: #54C4F1;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 4px rgba(84,196,241,0.2);
}

/* кнопка */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn--pill { border-radius: 100px; }

.btn--light {
  background: #FFFFFF;
  color: #121321;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}
.btn--light:hover { transform: translateY(-1px); }
.btn--light:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,0.18); }

.btn--disabled { opacity: .6; pointer-events: none; }

.cta-gift__policy {
  grid-column: 1 / 4;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin-top: -4px;
}
.cta-gift__policy a {
  color: #54C4F1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* доступность */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* адаптивы */
@media (max-width: 1024px) {
  .cta-gift__inner { padding: 56px 24px; }
  .cta-gift__form { grid-template-columns: 1fr 1fr; }
  .cta-gift__form .btn { grid-column: 1 / 3; width: 100%; }
}
@media (max-width: 720px) {
  .cta-gift__inner { padding: 40px 16px; }
  .cta-gift__title { font-size: 20px; }
  .cta-gift__form { grid-template-columns: 1fr; gap: 12px; }
  .cta-gift__form .btn { width: 100%; grid-column: 1; }
  .cta-gift .field input { height: 52px; }
  .cta-gift__policy { font-size: 12px; grid-column: 1; }
}



/* === News === */
.news { padding: 100px 0; }

.news__head { margin-bottom: 24px; }
.news__title{
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 5vw, 56px);
  color: #121321;
}
.news__lead{
  margin: 0;
  color: #6B6E7A;
  font-size: 18px;
}
.news__tg{
  color: #121321;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.news__tg-ico{
  display: inline-block;
  width: 22px; height: 22px;
  margin-left: 8px;
  vertical-align: -5px;
  background: url("/bitrix/templates/gatineau/assets/img/tg.svg") no-repeat center / contain;
}

/* Вьюпорт/трек */
.news__viewport{
  overflow: visible;            /* на десктопе сетка без прокрутки */
}
.news__track{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Карточка */
.news__item { list-style: none; }
.news-card{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Медиа: единая пропорция без обрезания критично важных частей */
.news-card__media{
  margin: 0 0 16px;
  border-radius: 5px;           /* скругление 5px по ТЗ */
  overflow: hidden;
  background: #dcdde3;
 
}
.news-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* заполняем блок, аккуратно кадрируем */
  object-position: center;
}

.news-card__title{
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 22px;
  color: #121321;
}
.news-card__text{
  margin: 0;
  color: #6B6E7A;
  font-size: 16px;
}

/* Ссылка "все новости" */
.news__more { margin-top: 20px; }
.news__more-link{
  color: #121321;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== Адаптив: горизонтальный свайп слева-направо ===== */
@media (max-width: 1024px){
  .news { padding: 48px 0; }

  .news__viewport{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .news__viewport::-webkit-scrollbar{ display: none; }

  .news__track{
    display: flex;
    gap: 24px;
    padding-bottom: 4px;        /* чтобы тень не резалась */
  }

  /* 2 карточки в области видимости — по свайпу */
  .news__item{
    flex: 0 0 calc(66.66% - 12px);
    scroll-snap-align: start;
  }

  /* высоту картинок больше НЕ задаём — управляет aspect-ratio */
}

@media (max-width: 640px){
  /* 1 карточка на экране, удобный свайп */
  .news__item{ flex: 0 0 86%; }
  .news-card__title{ font-size: 20px; }
  .news-card__text{ font-size: 15px; }
}

/* ===== News ALT (без горизонтального скролла) ===== */
.news-alt .news__viewport{
  overflow: visible !important; /* гасим auto из старой версии на мобилке */
}

.news-alt .news__track{
  display: grid !important;        /* вместо flex в старой версии */
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 0;                       /* без нижнего паддинга под тень */
}

/* адаптив колонок без горизонтального свайпа */
@media (max-width: 1024px){
  .news-alt .news__track{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 640px){
  .news-alt .news__track{ grid-template-columns: 1fr; }
  /* высоту изображений не трогаем — работает aspect-ratio */
}

/* снимаем фикс. ширину и snap из старых правил */
.news-alt .news__item{
  flex: initial !important;
  scroll-snap-align: initial !important;
}

/* на всякий случай скрыть блок "все новости", если он вдруг останется в разметке */
.news-alt .news__more{ display: none !important; }

/* FOOTER */
.footer {
  margin-top: 185px;
  font-size: 15px;
  color: #121321;
}

.footer__banner {
  width: 100%;
  text-align: center;
  margin-top: 185px; /* Отступ сверху от баннера */
  margin-bottom: 185px; /* Отступ снизу от баннера */
}

.footer__banner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* Мобильная версия: 50% ширины */
@media (max-width: 767px) {
  .footer__banner img {
    width: 50%;
  }
}
/* --- мобильная адаптация --- */
@media (max-width: 768px) {
  .footer__banner {
    margin-top: 100px;      /* уменьшаем отступы для мобильных */
    margin-bottom: 100px;
    padding-inline: 16px;   /* добавляем отступы слева и справа */
  }
}

.footer__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.footer__inner h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

.footer__inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__inner ul li {
  margin-bottom: 8px;
}

.footer__inner a {
  color: #121321;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__inner a:hover {
  color: #54C4F1;
}

.footer__info {
  font-size: 14px;
  color: #6B6E7A;
  margin-top: 15px;
}

.footer__contacts p {
  margin: 5px 0;
}

.footer__phone {
  font-size: 22px;
  font-weight: 500;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
  border-top: 1px solid #ddd;
  padding-top: 20px;
  gap: 10px;
  margin-top: 40px;
}

.footer__bottom a {
  color: #121321;
  text-decoration: none;
}

.footer__bottom a:hover {
  color: #54C4F1;
}

.footer__dev {
  font-weight: 600;
}

@media (max-width: 992px) {
  .footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .footer__banner {
    margin-top: 120px;
    margin-bottom: 120px;
  }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.footer__ratings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; /* уменьшили с 16px */
  margin-top: 12px; /* меньше отступ сверху */
}

.footer__ratings iframe {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  display: inline-block;
  vertical-align: middle;
}

.footer__rating { 
  margin-top: 0 !important; /* обнуляем старый отступ */
}

@media (max-width: 600px) {
  .footer__ratings {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__ratings iframe {
    width: 100% !important;
    max-width: 260px;
  }
}


.footer__rating { margin-top: 50px; }

/* Чистые виджеты без подложки */
.footer__ratings iframe {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  display: inline-block;
  vertical-align: middle;
}

/* ===== Intro (адаптивная позиция текста) ===== */
.intro{
  position: relative;
  margin-top: var(--header-h, 72px);
  color:#fff;
  isolation:isolate;
  min-height: clamp(420px, calc(100vh - var(--header-h)), 920px);
}

/* фон */
.intro__bg{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.intro__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.intro__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }

/* 
  Сетка 3 строки: top spacer | контент | bottom spacer.
  Доля верхнего спейсера управляет «насколько ниже центра» стоит колонка.
*/
/* ключевая правка: не height:100%, а min-height:inherit */
.intro__inner{
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  min-height: inherit;                 /* <<< ВАЖНО */
  padding: 70px 20px 20px 20px;
  display: grid;
  grid-template-rows: var(--intro-top, 1.35fr) auto 1fr; /* опускаем чуть ниже центра */
}

/* колонка текста */
.intro__content{
  grid-row: 2;
  justify-self: start;                  /* по левому краю контейнера */
  max-width: clamp(1020px, 48vw, 880px); /* адаптивная ширина текста */
  display: grid;
  gap: 18px;
  text-align: left;
}

/* Базово: аккуратные отступы, без разделителей */
.breadcrumbs{
  display: flex;
  flex-wrap: wrap;          /* на десктопе перенос разрешён */
  align-items: center;
  gap: 14px 10px;           /* горизонт/вертик отступ между пунктами */
  margin: 0 0 20px;
  font-size: 14px;
  max-width: 100%;
}

.breadcrumbs a{
  color: #C2C2C2;
  text-decoration: none;
  white-space: nowrap;      /* ссылки не переносятся */
}
.breadcrumbs a:hover{ text-decoration: underline; }

.breadcrumbs__current{
  color: #fff;              /* текущая страница — белая */
  white-space: nowrap;
}

/* Если где-то остался старый .breadcrumbs__dot — выключим его */
.breadcrumbs__dot{ display: none !important; }

/* ===== Адаптив ===== */

/* Планшеты */
@media (max-width: 1024px){
  .breadcrumbs{ font-size: 13px; gap: 12px 8px; }
}

/* Мобилки: горизонтальный скролл */
@media (max-width: 640px){
  .breadcrumbs{
    font-size: 12px;
    gap: 10px 8px;

    flex-wrap: nowrap;             /* не переносим на новую строку */
    overflow-x: auto;              /* скролл по горизонтали */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* скрыть скроллбар (Firefox) */
  }
  .breadcrumbs::-webkit-scrollbar{ display: none; } /* скрыть (WebKit) */

  /* каждый пункт фиксированной ширины — не растягивается */
  .breadcrumbs > *{
    flex: 0 0 auto;
  }

  /* текущая страница — показываем полностью, не обрезаем */
  .breadcrumbs .breadcrumbs__current{
    min-width: auto;
    overflow: visible;
    text-overflow: clip;
    flex: 0 0 auto;
  }
}



/* заголовок и описание */
.intro__title{
  font-weight:400;
  font-size: clamp(32px, 5vw, 65px);
  line-height:1.1;
  margin:0;
}
.intro__desc{
  font-size: clamp(16px, 2.2vw, 20px);
  line-height:1.55;
  margin:0;
}

/* --- Адаптивная «вертикальная точка» как в макете --- */
/* мобайл: почти по центру */
@media (max-width: 640px){
  .intro{ min-height: 420px; }
  .intro__inner{ --intro-top: 1fr; --intro-bottom: 1fr; }
  .breadcrumbs{ font-size:12px; margin-bottom: 14px; }
}

/* планшет: чуть ниже центра */
@media (min-width: 641px) and (max-width: 1024px){
  .intro__inner{ --intro-top: 1.2fr; --intro-bottom: 1fr; }
}

/* ноутбуки/десктоп: заметно ниже центра (как на втором скрине) */
@media (min-width: 1025px){
  .intro__inner{ --intro-top: 1.35fr; --intro-bottom: 1fr; }
}

/* очень широкие — можно ещё немного опустить */
@media (min-width: 1440px){
  .intro__inner{ --intro-top: 1.45fr; }
}

/* Общий контейнер у тебя уже есть .container – используем его ширину/поля */

.facts{
  color:#1C1C1C;
  padding-block: clamp(40px, 6vw, 96px);
  display: grid;
  gap: clamp(36px, 6vw, 88px);   /* вертикальные интервалы между статьями */
}

/* Заголовок: Regular 45px → адаптивно */
.fact__title{
  margin: 0 0 clamp(14px, 2.4vw, 20px);
  font-weight: 400;                           /* Regular */
  font-size: clamp(26px, 3.2vw, 45px);
  line-height: 1.18;
  letter-spacing: .2px;
}

/* Текст: Light 25px → адаптивно */
.fact__text{
  margin: 0;
  max-width: 86ch;                            /* читаемая строка на десктопе */
  font-weight: 300;                           /* Light */
  font-size: clamp(16px, 2.0vw, 25px);
  line-height: 1.55;
  letter-spacing: .1px;
}

/* Немного плотнее на очень широких, чуть шире на планшетах */
@media (min-width: 1440px){
  .fact__text{ max-width: 80ch; }
}
@media (max-width: 1024px){
  .facts{ gap: clamp(28px, 7vw, 64px); }
  .fact__text{ max-width: 95ch; }
}

/* Мобилка: комфортные отступы и размеры */
@media (max-width: 640px){
  .facts{ padding-block: 36px; gap: 28px; }
  .fact__title{ line-height: 1.22; }
  .fact__text{ line-height: 1.6; }
}

/* ===== Logo full width ===== */
.about-logo{
  width: 100%;
  padding-block: 175px;   /* отступы сверху и снизу */
  background: #fff;
  display: flex;
  justify-content: center;
}

.about-logo__img{
  width: 100%;
  max-width: 1440px; /* ограничение по макету */
  height: auto;
  object-fit: contain;
}

/* адаптив для мобилы */
@media (max-width: 768px){
  .about-logo{
    padding-block: 80px; /* меньше отступы */
  }
}


/* ===== Gallery ===== */
.gallery { padding-block: clamp(28px, 4vw, 48px); }

.gallery__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;                           /* отступы между фото (сверху/снизу тоже 18) */
}

/* карточка */
.gallery__item{
  position: relative;
  display: block;
  height: clamp(220px, 33vw, 478px);   /* макет: 478px на десктопе, адаптивно ниже */
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
}
.gallery__item img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery__item:hover img{ transform: scale(1.03); }

/* затемнение + иконка */
.gallery__overlay{
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  transition: background .25s ease;
}

.gallery__zoom{
  width: 43px !important;
  height: 43px !important;
  display: block;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .25s ease, transform .25s ease;
}
/* эффекты при наведении */
.gallery__item:hover .gallery__overlay{ background: rgba(0,0,0,.5); }
.gallery__item:hover .gallery__zoom{ 
  opacity: 1; 
  transform: scale(1); 
}

/* кнопка снизу слева */
.btn-outline{
  margin-top: 24px;
  border-radius: 100px;
  padding: 25px 60px;                  /* 25 (по вертикали) × 60 (по горизонтали) */
  border: 1px solid #1C1C1C;
  color: #1C1C1C;
  background: transparent;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn-outline:hover{
  background: #1C1C1C;
  color: #fff;
}

/* адаптив — 1 в ряд на узких */
@media (max-width: 860px){
  .gallery__grid{ grid-template-columns: 1fr; }
  .gallery__item{ height: clamp(200px, 52vw, 380px); }
  .btn-outline{ padding: 18px 38px; }  /* компактнее на мобиле */
}

/* ===== Lightbox ===== */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: grid; place-items: center;
  z-index: 1000;
}
.lightbox[hidden]{ display: none; }

.lightbox__img{
  max-width: min(92vw, 1400px);
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.lightbox__close{
  position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0; background: rgba(255,255,255,.15);
  color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover{ background: rgba(255,255,255,.25); }

/* ====== Галерея: версия на 3 колонки ====== */
.gallery--3 .gallery__grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery--3 .gallery__item{
  height: 478px;   /* горизонтальная карточка */
}

/* средние экраны → 2 колонки */
@media (max-width: 1100px){
  .gallery--3 .gallery__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery--3 .gallery__item{
    height: 420px; /* чуть меньше */
  }
}

/* узкие экраны → 1 колонка */
@media (max-width: 680px){
  .gallery--3 .gallery__grid{
    grid-template-columns: 1fr;
  }
  .gallery--3 .gallery__item{
    height: 320px; /* адаптивный вариант для мобилки */
  }
}

/* ---------- Text block ---------- */
.textblock {
  max-width: 1440px;           /* комфортная ширина текста */
  margin: 0 auto;
  padding-block: clamp(32px, 6vw, 64px);
  color: #1C1C1C;
  font-weight: 300;           /* Light */
  font-size: clamp(16px, 2vw, 20px); /* 20px десктоп, меньше на мобилке */
  line-height: 1.6;
}

.textblock p {
  margin: 0 0 1.2em;
}
.textblock p:last-child {
  margin-bottom: 0;
}

/* ---------- FAQ ---------- */
.faq{
  background: #F6F6F6;
  padding-block: clamp(72px, 12vw, 200px);
}

.faq__title{
  font-family: Jost, var(--font, sans-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 45px);
  line-height: 1.1;
  color: #1C1C1C;
  margin: 0 0 50px;
}

.faq__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 650px));
  column-gap: clamp(24px, 3vw, 32px);
  justify-content: space-between;
}

.faq__item{
  background: #FFFFFF;
  border: 1px solid #DBDBDB;
  border-radius: 20px;
  padding: 25px;
  color: #1C1C1C;
  margin-block: 25px;   /* внешний отступ сверху и снизу */
}

.faq__q{
  margin: 0 0 12px;
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3;
  color: #1C1C1C;
}

.faq__a{
  margin: 0;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: #1C1C1C;
}

/* --- адаптив --- */
@media (max-width: 900px){
  .faq__grid{
    grid-template-columns: 1fr;
  }
  .faq__item{
    padding: 20px;
    margin-block: 20px; /* компактнее на мобилке */
  }
}

/* Телеграм-блок в интро */
.intro__tg{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 28px;
  color: #fff; /* интро на тёмной подложке */
}

.intro__tg-text{
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.4;
  opacity: .95;
}

.intro__tg-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.4;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 100px;              /* лёгкая пилюля при фокусе */
  padding: 4px 8px;                  /* кликабельная зона */
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.intro__tg-link:hover{ opacity: .9; background: rgba(84,196,241,.16); }
.intro__tg-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(84,196,241,.35);
  background: rgba(84,196,241,.16);
}

.intro__tg-icon{
  width: 32px; height: 32px; flex: 0 0 32px; display: block;
}

/* Мобилка: перенос в столбик с небольшим отступом */
@media (max-width: 560px){
  .intro__tg{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
  }
}



/* ===== Promos (Акции) ===== */
.promos{
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--bg, #F5F6FA);
}

/* сетка карточек: 2 колонки на десктопе, 1 на мобилке */
.promos__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* отступ между карточками */
}
@media (max-width: 900px){
  .promos__grid{ grid-template-columns: 1fr; }
}

.promo-card{ list-style: none; }
.promo-card__link{
  display: block;
  text-decoration: none;
  color: #1C1C1C;
}

/* фото */
.promo-card__media{
  position: relative;
  margin: 0 0 16px;
  border-radius: 5px; /* скругление фото */
  overflow: hidden;
  background: #dcdde3;
}
.promo-card__media img{
  display: block;
  width: 100%;
  height: 450px;          /* горизонтальное фото */
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px){
  .promo-card__media img{ height: 440px; }
}

/* плашка со сроком акции */
.promo-card__badge{
  position: absolute;
  top: 10px; right: 10px;                 /* отступ от края */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 15px 20px;                     /* как на скриншоте */
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 400;                       /* regular */
  color: #1C1C1C;
  background: #C0DEF4;
  border: 1px solid #818181;
  border-radius: 100px;                   /* пилюля */
  transition: background-color .15s ease;
}
.promo-card__link:hover .promo-card__badge{ background: #BEE3FF; }

/* текст под фото */
.promo-card__title{
  margin: 0 0 8px;
  font-weight: 600;                       /* semibold */
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
  color: #1C1C1C;
}
.promo-card__text{
  margin: 0;
  font-weight: 300;                       /* light */
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: #1C1C1C;
}

/* --- Intro: акция (деталь) --- */
.intro__period{
  margin: 0 0 20px;
  font-weight: 300;                     /* Light */
  font-size: clamp(18px, 2.2vw, 26px);  /* 26px на десктопе */
  line-height: 1.4;
  color: #fff;
  opacity: .95;
}

/* описание остаётся, но фиксируем light 20px */
.intro__desc{
  font-weight: 300;                     /* Light */
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: #fff;
  opacity: .92;
}

/* Цена + кнопка: справа от цены с зазором 100px */
.intro__bar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 100px;                           /* отступ кнопки от цены по ТЗ */
  margin-top: 28px;
}

.intro__price{
  display: grid;
  gap: 6px;
  color: #fff;
}
.intro__price-label,
.intro__price-values{
  font-weight: 400;                     /* Regular */
  font-size: 20px;
  line-height: 1.35;
}

/* Кнопка из макета: H=76, padding L=60 / R=25, gap=10, pill 100px */
.intro__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 0 25px 0 60px;
  border-radius: 100px;
  background: #fff;
  color: #0F1020;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.intro__btn:hover{ transform: translateY(-1px); }
.intro__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(84,196,241,.35);
}

/* Адаптив: на планшете кнопка ближе, на мобилке — в столбик */
@media (max-width: 900px){
  .intro__bar{ gap: 24px; }
}
@media (max-width: 560px){
  .intro__bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .intro__btn{
    min-height: 56px;
    padding: 0 24px 0 32px;
  }
}

/* без иконки */
.intro__btn{ padding: 0 40px; }   /* было 60/25 */

/* ---------- Promo detailed: text area ---------- */
.promo-text{
  padding-block: clamp(32px, 6vw, 64px);
  color: #1C1C1C;
}
.promo-text__inner{
  max-width: 980px;   /* комфортная ширина текста */
}

.promo-text p{
  margin: 0 0 1.2em;
  font-weight: 400;                       /* Regular */
  font-size: clamp(16px, 1.8vw, 20px);    /* 20px на десктопе */
  line-height: 1.6;
}

.promo-text__subtitle{
  margin: 24px 0 12px;
  font-weight: 700;                       /* как в макете — жирный заголовок списка */
  font-size: clamp(18px, 1.8vw, 22px);
  color: #1C1C1C;
}

/* список с «точками» как на скрине */
.promo-text__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.promo-text__list li{
  position: relative;
  padding-left: 18px;
  font-weight: 400;                       /* Regular */
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: #1C1C1C;
}
.promo-text__list li::before{
  content: "·";                           /* символ точки, как в макете */
  position: absolute;
  left: 0; top: 0;
  font-size: 24px; line-height: 1;
  transform: translateY(2px);
}

/* мобилка — чуть компактнее абзацы */
@media (max-width: 560px){
  .promo-text p{ margin-bottom: 1em; }
}


:root{
  --container: 1440px;
  --container-pad: 24px;
  --header-h: 72px;
  --fg:#121321;
  --muted:#6B6E7A;
}

/* ====== CARE ====== */
.care{
  background:#fff;
  padding-top: var(--header-h);
}
.care__inner{
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* текст | медиа */
  align-items: center;
  height: 934px;                   /* фиксированная высота */
  gap: 40px;
  padding-inline: var(--container-pad);
}

/* Левая колонка */
.care__content{ max-width: 640px; }
.care__title{margin:0 0 24px;font:400 65px/1.1 Onest,system-ui;color:var(--fg)}
.care__lead{margin:0 0 12px;font:400 22px/1.35 Onest,system-ui;color:var(--fg)}
.care__text{margin:0 0 24px;font:400 20px/1.6 Onest,system-ui;color:var(--fg)}

.care__chips{display:flex;flex-wrap:wrap;gap:12px 16px;margin:0 0 28px;padding:0;list-style:none}
.chip{padding:25px 40px;border:1px solid rgba(18,19,33,.16);border-radius:100px;font:400 18px/1 Onest,system-ui;color:var(--fg);background:#fff}

.care__price{margin:0 0 28px;font:400 26px/1.3 Onest,system-ui;color:var(--fg)}
.care__price-value{font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:100px;cursor:pointer;transition:transform .15s ease,background-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn--dark{padding:25px 65px;background:#1C1C1C;color:#fff;font:400 18px/1 Onest,system-ui}
.btn--dark:hover{background:#010101}

/* Правая колонка */
.care__media{
  height: 100%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
.care__media img{width:100%;height:100%;object-fit:cover;display:block}

/* Адаптив */
@media (max-width: 1024px){
  .care__inner{
    height:auto;
    grid-template-columns: 1fr;
    padding-top: calc(var(--header-h) + 16px);
  }
  .care__media{
    border-radius:12px;
    height:auto;
    margin-top: 24px;
  }
  .care__media img{height:auto}
  .chip{padding:16px 22px;font-size:16px}
  .btn--dark{padding:18px 36px;font-size:16px}
  .care__title{font-size:clamp(36px, 8vw, 48px)}
}

/* Десктоп: всегда 2 колонки */
@media (min-width: 1025px){
  .care__inner{
    display: grid;
    grid-template-columns: minmax(560px, 1fr) minmax(720px, 1fr); /* текст | медиа */
    align-items: center;
    gap: 40px;
    height: 934px;
  }
  .care__media{
    height: 100%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
  }
}

/* Планшет и ниже: одна колонка (картинка вниз) */
@media (max-width: 1024px){
  .care__inner{
    grid-template-columns: 1fr;
    height: auto;
  }
  .care__media{
    border-radius: 12px;
    height: auto;
    margin-top: 24px;
  }
}


/* ---------- Service Detail (подробная страница услуги) ---------- */
.service-detail {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);

  /* вертикальное центрирование */
  --section-pad: clamp(32px, 6vw, 96px);
  padding-block: var(--section-pad);
  min-height: calc(50vh - var(--header-h, 72px));
  align-items: center;
}

.service-detail__content {
  max-width: 640px;
}

.service-detail__title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 200;
  margin: 16px 0;
  color: var(--fg, #121321);
}

.service-detail__subtitle {
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--fg, #121321);
}

.service-detail__text {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: var(--fg, #121321);
}

.service-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.tag {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 100px;
  font-size: 15px;
  color: var(--fg, #121321);
  background: #fff;
}

/* ===============================
   ТУЛТИПЫ НА ПИЛЮЛЯХ
   =============================== */
.tag--with-tip {
  position: relative;
  cursor: default;
  outline: none;
}

/* --- ДЕСКТОП: ховер-подсказка --- */
.tag--with-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px) scale(.98);

  min-width: 220px;
  max-width: min(560px, 90vw);

  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg, #121321);

  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);

  border: 1px solid rgba(84,196,241,.25);
  border-radius: 14px;

  box-shadow:
    0 10px 30px rgba(15,16,32,.12),
    0 2px 8px rgba(15,16,32,.06);

  opacity: 0;
  pointer-events: none;
  white-space: normal;
  z-index: 20;

  transition:
    opacity .18s ease,
    transform .18s ease;
}

/* Стрелку убираем */
.tag--with-tip::before { display: none !important; }

/* Показ по hover и focus */
.tag--with-tip:hover::after,
.tag--with-tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

/* Пустые не показываем */
.tag--with-tip[data-tip=""]::after,
.tag--with-tip:not([data-tip])::after {
  display: none;
}

/* ===============================
   МОБИЛЬНАЯ ВЕРСИЯ (<768px)
   =============================== */
@media (max-width: 768px) {
  .tag--with-tip {
    position: static;
    display: block;
  }

  .tag--with-tip::after{
    position: static;
    display: block;
    margin-top: 6px;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none !important;   /* ← ключевое */
    opacity: 1;                   /* всегда видно */
    pointer-events: auto;

    /* оформление простым текстом */
    width: 100%;
    max-width: none;
    min-width: 0;
    background: none;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    color: rgba(0,0,0,.75);
    line-height: 1.5;
    font-size: 14px;
  }

  /* Снимаем эффекты hover/focus на мобилке */
  .tag--with-tip:hover::after,
  .tag--with-tip:focus-visible::after{
    transform: none !important;
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .tag--with-tip {
    position: static;
    display: block;
  }

  .tag--with-tip::after {
    position: static;
    display: block;
    margin-top: 6px;
    transform: none;
    opacity: 1;                 /* ВСЕГДА видно */
    pointer-events: auto;

    width: 100%;
    max-width: none;
    min-width: 0;

    background: none;           /* без карточки */
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0,0,0,.75);
  }
}

/* ===============================
   REDUCED MOTION
   =============================== */
@media (prefers-reduced-motion: reduce) {
  .tag--with-tip::after {
    transition: none;
    transform: none;
  }
}

.service-detail__price {
  font-size: 18px;
  margin-bottom: 24px;
  color: var(--fg, #121321);
}

/* изображение справа */
.service-detail__image {
  align-self: center;
}
.service-detail__image img {
  width: 100%;
  /*height: calc(100vh - var(--header-h, 72px) - 2*var(--section-pad));*/

  /*min-height: 80vh;*/
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .service-detail__image img {
    width: 100%;
    height: auto;             /* картинка по содержимому */
    min-height: auto;         /* убираем принудительный full screen */
    max-height: 50vh;         /* при желании ограничиваем высоту */
    border-radius: 8px;       /* чуть меньше радиус, чтобы легче читалось */
    object-fit: cover;
    object-position: center;
  }
}



/* адаптив */
@media (max-width: 992px) {
  .service-detail {
    grid-template-columns: 1fr;
    min-height: auto;
    align-items: start;
  }
  .service-detail__image {
    order: -1;
  }
  .service-detail__image img {
    height: auto;
    max-height: 520px;
  }
}

/* резерв места под фикс-хедер на мобилке/планшете */
@media (max-width: 1200px){
  .service-detail{
    padding-top: calc(var(--section-pad) + var(--header-h, 72px));
  }
}

/* чтобы якорные ссылки не уезжали под хедер */
.service-detail{ scroll-margin-top: calc(var(--header-h,72px) + 16px); }

/* ---------- Process (steps sticky) ---------- */
.process {
  padding-block: clamp(48px, 7vw, 96px);
}

.process__title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--fg, #121321);
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.process__grid {
  display: grid;
  grid-template-columns: 520fr 680fr; /* 43% / 57% */
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

/* левая колонка с фото */
.process__media {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.process__media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

/* правая колонка — шаги */
.process__steps {
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px); /* отступ под фикс-хедер */
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 0;
  align-self: start;
  max-height: calc(100vh - var(--header-h, 72px) - 48px); /* чтобы не обрезался */
  overflow-y: auto; /* прокрутка если список длинный */
  padding-right: 12px; /* место под скролл */
}

/* стиль скроллбара (аккуратный) */
.process__steps::-webkit-scrollbar {
  width: 4px;
}
.process__steps::-webkit-scrollbar-thumb {
  background: rgba(18,19,33,.2);
  border-radius: 2px;
}

/* шаги */
.process__steps > li {
  counter-increment: step;
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(18,19,33,.12);
}
.process__steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted, #6B6E7A);
  margin-bottom: 8px;
}

.process__steps h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg, #121321);
  margin: 0 0 6px;
}
.process__steps p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg, #121321);
  opacity: .9;
  margin: 0;
}

/* адаптив */
@media (max-width: 1100px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__media { order: -1; }
  .process__steps {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}


/* ---------- Benefits (after procedure) ---------- */
.benefits {
  padding-block: clamp(40px, 6vw, 96px);
}

.benefits__title {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--fg, #121321);
  margin: 0 0 clamp(16px, 3vw, 32px);
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.benefits__item {
  background: #C0DEF4;                   /* базовый фон плашки */
  border-radius: 12px;
  padding: 20px 24px;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.benefits__item:hover {
  background: #E2EFF9;                   /* hover фон */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.benefits__item h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--fg, #121321);
}

.benefits__item p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: var(--fg, #121321);
  opacity: .9;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  .benefits__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 740px){
  .benefits__grid{
    grid-template-columns: 1fr;          /* по одной карточке */
    gap: 16px;
  }
  .benefits__item{
    padding: 16px 18px;
    border-radius: 10px;
  }
  .benefits__item h3{ font-size: 15px; }
  .benefits__item p{ font-size: 14px; }
}

/* тач-устройства — без «подскока» и лишнего hover */
@media (hover: none){
  .benefits__item:hover{
    background: #C0DEF4;
    transform: none;
    box-shadow: none;
  }
}


/* ---------- Results (before/after) ---------- */
.results{
  padding-block: clamp(48px, 7vw, 96px);
}
.results__title{
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--fg, #121321);
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.results__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.result-card{
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f3f6;
  box-shadow: 0 1px 0 rgba(18,19,33,.04) inset;
  isolation: isolate; /* для корректного градиента */
  aspect-ratio: 4 / 3;   /* ✅ горизонтальное фото */
}
.result-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* фото растягивается в нужное соотношение */
  display: block;
}

/* нижний градиент для читаемости плашек */
.result-card::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(15,16,32,.06) 60%, rgba(15,16,32,.14) 100%);
  pointer-events:none;
}

/* подписи */
.result-card__labels{
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  z-index: 1;
}

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 36px; padding: 8px 16px;
  border-radius: 100px;
  font-size: 14px; font-weight: 500; line-height: 1;
  background:#fff;
  color: var(--fg, #121321);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  user-select: none;
}

/* цвета по ТЗ: до — спокойный, после — #C0DEF4 (+ hover #E2EFF9) */
.badge--muted{
  background: #F1F2F4;
}
.badge--after{
  background: #C0DEF4;
}
.result-card:hover .badge--after{
  background: #E2EFF9;
}

/* Hover эффекты карточки (не навязываю на тач) */
@media (hover:hover){
  .result-card{ transition: transform .2s ease, box-shadow .2s ease; }
  .result-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .results__grid{ grid-template-columns: 1fr; }
  .result-card::after{ height: 84px; }
  .badge{ min-height:34px; padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 560px){
  .results{ padding-block: clamp(36px, 8vw, 56px); }
  .results__title{ margin-bottom: 16px; }
  .result-card::after{ height: 72px; }
  .result-card__labels{ left:10px; right:10px; bottom:10px; gap:10px; }
  .badge{ min-height:32px; padding: 8px 12px; font-size: 13px; }
}


.results{ scroll-margin-top: calc(var(--header-h,72px) + 16px); }


/* сетка блоков */
.indications { padding-block: clamp(48px, 7vw, 96px); }
.indications__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(32px,4vw,64px);
}
.indications__title{
  font-size:clamp(20px,2vw,24px);
  font-weight:600;
  margin:0 0 24px;
  color:var(--fg,#121321);
}

/* список */
.indications__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:26px; /* межэлементный отступ = 26 */
}
.indications__list li{
  display:flex; align-items:center; gap:20px;   /* иконка ↔ текст = 20 */
  min-height:78px;                               /* H = 78 */
  padding:20px;                                  /* padding 20 / 20 */
  background:#F5F5F5;
  border-radius:12px;
  font-size:15px; line-height:1.4; color:var(--fg,#121321);
}

/* иконка, без круга — ты даёшь готовую */
.indications__icon{
  width:26px; height:26px; flex:0 0 26px; display:block;
}

/* hover по желанию (мягкая подсветка) */
@media (hover:hover){
  .indications__list li{ transition: background .2s ease, transform .15s ease; }
  .indications__list li:hover{ background:#E2EFF9; transform: translateY(-1px); }
}

/* адаптив */
@media (max-width:900px){
  .indications__grid{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- Text Spot (левый текст + воздух) ---------- */
.text-spot{
  padding-block: clamp(48px, 8vw, 120px);
}

.text-spot__title{
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  color: var(--fg, #121321);
  margin: 0 0 clamp(16px, 2.2vw, 24px);
}

/* узкая колонка слева, много воздуха справа */
.text-spot__body{
  max-width: min(720px, 56%);          /* ширина колонки текста */
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--fg, #121321);
}

.text-spot__body p{
  margin: 0 0 10px;
  opacity: .95;
}

/* вариант со списком — просто добавь ul внутри .text-spot__body */
.text-spot__body ul{ margin: 0; padding: 0 0 0 1.1em; }
.text-spot__body li{ margin: 0 0 8px; }

/* адаптив: на планшете расширим колонку, на мобилке — 100% */
@media (max-width: 1024px){
  .text-spot__body{ max-width: 70%; }
}
@media (max-width: 700px){
  .text-spot__body{ max-width: 100%; }
}


/* ---------- Services Dark ---------- */
.services-dark {
  background: #3C3C3C; /* тёмный фон, можешь заменить на var(--dark) */
  color: #fff;
  padding-block: clamp(48px, 7vw, 96px);
}

.services-dark__title {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.services-dark__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

.services-dark__item h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}

.services-dark__item p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  opacity: .9;
  color: #fff;
}

/* адаптив */
@media (max-width: 1100px) {
  .services-dark__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .services-dark__grid { grid-template-columns: 1fr; }
}


/* ---------- Contacts ---------- */
.contacts{ 
  padding: clamp(32px, 6vw, 80px) 0 clamp(48px, 7vw, 96px);
  background: var(--bg, #F5F6FA);
}
.contacts__grid{
  display: grid;
  grid-template-columns: 1fr minmax(480px, 1.1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.contacts__info{ display: grid; gap: clamp(16px, 2vw, 20px); }

.contacts__card{
  background: #fff;
  border: 1px solid rgba(18,19,33,.08);
  border-radius: 12px;
  padding: clamp(16px, 2.6vw, 24px);
  box-shadow: 0 4px 20px rgba(0,0,0,.03);
}
.contacts__card-title{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.2vw, 20px);
}
.contacts__text{ margin: 0; font-size: 16px; color: var(--fg, #121321); }
.contacts__link{ color: var(--fg, #121321); text-decoration: none; border-bottom: 1px dotted rgba(18,19,33,.35); }
.contacts__link:hover{ border-bottom-color: transparent; }

.contacts__actions{ margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* кнопки в общем стиле проекта */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 40px;
  border-radius: var(--radius-pill, 100px);
  font-weight: 300; text-decoration: none; border: 1px solid transparent;
}
.btn--accent{ background: var(--accent, #54c4f1); color:#fff; }
.btn--accent:hover{ filter: brightness(0.95); }
.btn--dark{ background: var(--dark, #0F1020); color:#fff; }
.btn--dark:hover{ filter: brightness(1.05); }
.btn--ghost{ background:#fff; color: var(--fg, #121321); border-color: rgba(18,19,33,.12); }
.btn--ghost:hover{ border-color: rgba(18,19,33,.3); }

/* карта */
.contacts__map-wrap{ min-height: 420px; }
.contacts__map{
  width: 100%;
  height: min(560px, 62vh);
  background: #EDEFF3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(18,19,33,.08);
}

/* кастомный пин для Leaflet */
.leaflet-div-icon.map-pin{
  background: transparent; border: none;
}
.map-pin-el{
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--accent, #54c4f1);
  box-shadow: 0 0 0 4px rgba(84,196,241,.25), 0 8px 18px rgba(84,196,241,.35);
  transform: translate(-50%, -50%);
  position: relative;
}
.map-pin-el:after{
  content:""; position:absolute; left:50%; top:100%;
  width: 2px; height: 8px; background: rgba(0,0,0,.15); transform: translateX(-50%);
}

/* адаптив */
@media (max-width: 1024px){
  .contacts__grid{ grid-template-columns: 1fr; }
  .contacts__map{ height: 420px; }
}
@media (max-width: 480px){
  .btn{ width: 100%; }
}

/* TYPO для контента акций */
.promo-text__inner{
  line-height: 1.7;
  color: var(--text-color, #0f172a);
  font-size: 16px;
}

/* Заголовки внутри контента */
.promo-text__inner h2,
.promo-text__inner h3,
.promo-text__inner h4{
  margin: 1.2em 0 .6em;
  line-height: 1.3;
  font-weight: 500;
}
.promo-text__inner h2{ font-size: clamp(20px, 2vw, 28px); }
.promo-text__inner h3{ font-size: clamp(18px, 1.8vw, 22px); }
.promo-text__inner h4{ font-size: 16px; }

/* Абзацы */
.promo-text__inner p{ margin: 0 0 1em; }

/* Списки: возвращаем маркеры и отступы */
.promo-text__inner ul,
.promo-text__inner ol{
  margin: 0 0 1.1em;
  padding-left: 1.4em;                 /* чтобы был виден маркер */
  list-style-position: outside;
}

/* ВАЖНО: перебиваем возможные reset’ы */
.promo-text__inner ul{ list-style: disc !important; }
.promo-text__inner ol{ list-style: decimal !important; }

/* Вложенные уровни */
.promo-text__inner ul ul{ list-style: circle !important; margin-top: .35em; }
.promo-text__inner ul ul ul{ list-style: square !important; }
.promo-text__inner ol ol{ list-style: lower-alpha !important; }
.promo-text__inner ol ol ol{ list-style: lower-roman !important; }

/* Интерлиньяж внутри пунктов */
.promo-text__inner li{ margin: .35em 0; }

/* Стилизация самого маркера (необязательно) */
.promo-text__inner li::marker{
  color: var(--accent-color, #8b5cf6);
  font-weight: 600;
}

/* Ссылки */
.promo-text__inner a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.25);
  transition: text-decoration-color .2s ease;
}
.promo-text__inner a:hover{ text-decoration-color: currentColor; }

/* Цитаты */
.promo-text__inner blockquote{
  margin: 1.2em 0;
  padding: .75em 1em;
  border-left: 4px solid var(--accent-color, #8b5cf6);
  background: rgba(139,92,246,.08);
  border-radius: 12px;
}

/* Картинки и таблицы внутри текста (на всякий случай) */
.promo-text__inner img{ max-width: 100%; height: auto; border-radius: 12px; }
.promo-text__inner table{
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.95em;
}
.promo-text__inner th,
.promo-text__inner td{
  padding: .6em .8em;
  border: 1px solid #e5e7eb;
  text-align: left;
}
.promo-text__inner th{
  background: #f8fafc;
  font-weight: 600;
}

/* Горизонтальная линия */
.promo-text__inner hr{
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 1.5em 0;
}

/* Если где-то li сделали display:flex/grid и маркер пропал — вернём его */
.promo-text__inner li{
  display: list-item;                  /* перебьёт возможные flex/grid */
}

.service-prices {
  max-width: 1440px;
  margin: 40px auto;
  padding: 0 24px;
}

.service-prices h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #121321;
  text-align: left;
}

.service-prices__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #eee;
}

.service-prices__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  color: #121321;
}

.service-prices__item span:first-child {
  font-weight: 400;
}

.service-prices__item span:last-child {
  font-weight: 400;
  color: #292929; /* акцент на цене */
}

/* --- адаптив --- */

/* планшеты */
@media (max-width: 768px) {
  .service-prices {
    padding: 0 16px;
    margin: 30px auto;
  }

  .service-prices h3 {
    font-size: 22px;
    margin-bottom: 18px;
  }

  .service-prices__item {
    font-size: 16px;
    padding: 12px 0;
  }
}

/* мобильные */
@media (max-width: 480px) {
  .service-prices {
    margin: 20px auto;
  }

  .service-prices h3 {
    font-size: 20px;
    margin-bottom: 15px;
    text-align: left;
  }

  .service-prices__item {
    flex-direction: column;
    align-items: flex-start;
    font-size: 15px;
    padding: 10px 0;
  }

  .service-prices__item span:last-child {
    margin-top: 4px;
    font-size: 16px;
  }
}


.machines {
  padding: 60px 20px 20px 20px;
}

.machines__title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: left;
}

.machines__intro {
  max-width: 720px;
  margin: 0 0 40px;
  text-align: left;
  font-size: 18px;
  color: #6B6E7A;
}

/* Контейнер 1440px */
.machines .container,
.machines__grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 0px; /* отступы по бокам */
  box-sizing: border-box;
}

.machines__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.machine-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 24px;
  text-align: left;
  transition: box-shadow .2s ease;
}

.machine-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.machine-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.machine-card__title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.machine-card__desc {
  font-size: 16px;
  color: #444;
  margin-bottom: 16px;
}

.machine-card__advantages {
  list-style: none;
  padding: 0;
  margin: 0;
}

.machine-card__advantages li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 15px;
}

.machine-card__advantages li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #54c4f1;
  font-size: 14px;
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
  .machines {
    padding: 40px 0;
  }
  .machines__title {
    font-size: 30px;
  }
  .machines__intro {
    font-size: 16px;
    max-width: 100%;
  }
  .machine-card__img {
    height: 180px;
  }
}

@media (max-width: 768px) {
  .machines__title {
    font-size: 26px;
  }
  .machines__intro {
    font-size: 15px;
    margin-bottom: 24px;
  }
  .machines__grid {
    gap: 20px;
  }
  .machine-card {
    padding: 16px;
  }
  .machine-card__title {
    font-size: 20px;
  }
  .machine-card__desc {
    font-size: 14px;
  }
  .machine-card__img {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .machines {
    padding: 80px 10px;
  }
  .machines__title {
    font-size: 22px;
  }
  .machines__intro {
    font-size: 14px;
  }
  .machine-card__img {
    height: 140px;
  }
  .machine-card__title {
    font-size: 18px;
  }
  .machine-card__advantages li {
    font-size: 14px;
  }
}

/* Больше внутреннего воздуха в карточках аппаратов */
.machine-card {
  padding: 32px 32px 28px; /* было 24px */
}

/* Чуть больше отступ у пунктов преимуществ */
.machine-card__advantages li {
  padding-left: 24px;      /* было 20px */
}

/* Мелкая оптическая правка текста под изображением */
.machine-card__title,
.machine-card__desc,
.machine-card__advantages {
  margin-left: 2px;        /* лёгкий сдвиг от левого края, чтобы «дышало» */
}

/* Планшет: умеренные отступы, чтобы не «выпирало» */
@media (max-width: 1024px) {
  .machine-card {
    padding: 24px 24px 20px;
  }
  .machine-card__advantages li {
    padding-left: 22px;
  }
  .machine-card__title,
  .machine-card__desc,
  .machine-card__advantages {
    margin-left: 1px;
  }
}

/* Мобилка: компактно, но не вплотную */
@media (max-width: 768px) {
  .machine-card {
    padding: 18px 18px 16px;
  }
  .machine-card__advantages li {
    padding-left: 20px;
  }
  .machine-card__title,
  .machine-card__desc,
  .machine-card__advantages {
    margin-left: 0;
  }
}


/* Заголовок (без изменения шрифта) */
.service-detail__title{
  font-size: clamp(26px, 3vw, 46px);
  line-height:1.15;
  font-weight:700;
  margin: 4px 0 28px;
  color:#121321;
  letter-spacing:-0.01em;
}


/* ===== CONTACT PAGE — CLEAN, AIRY, CONSISTENT ===== */
.contact-page{
  --cp-max: 1440px;
  --cp-pad: 24px;
  --cp-pad-mobile: 16px;

  --cp-fg: #121321;
  --cp-muted: #6B6E7A;
  --cp-accent: #54C4F1; /* для ссылок/акцентов, не иконок */

  --cp-card: #ffffff;
  --cp-radius: 16px;
  --cp-border: 1px solid rgba(0,0,0,.08);
  --cp-shadow: 0 8px 28px rgba(15,16,32,.06);

  --cp-icon: #9DA0AA; /* серые иконки */
}

.contact-page__container{
  max-width: var(--cp-max);
  margin: 0 auto;
  padding: 48px var(--cp-pad); /* больше воздуха */
}
@media (max-width: 768px){
  .contact-page__container{ padding: 32px var(--cp-pad-mobile); }
}

/* breadcrumbs / header */
.contact-page__breadcrumbs{
  display:flex; gap:8px; align-items:center;
  font-size:14px; color:var(--cp-muted); margin-bottom: 12px;
}
.contact-page__breadcrumbs a{ color:inherit; text-decoration:none; }
.contact-page__breadcrumbs a:hover{ text-decoration:underline; text-underline-offset:2px; }
.contact-page__breadcrumbs-current{ color:var(--cp-fg); }

.contact-page__header{ margin-bottom: 32px; }
.contact-page__title{
  margin:0 0 12px; line-height:1.15;
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--cp-fg);
}
.contact-page__subtitle{
  margin:0; color: var(--cp-muted);
  font-size: clamp(15px, 1.5vw, 19px);
}

/* grid/cards */
.contact-page__grid{
  display:grid; gap:32px;
  grid-template-columns: 1.1fr 1fr;
  margin-top: 24px;
}
@media (max-width: 1100px){ .contact-page__grid{ grid-template-columns: 1fr; } }

.contact-page__card{
  background: var(--cp-card);
  border-radius: var(--cp-radius);
  border: var(--cp-border);
  box-shadow: var(--cp-shadow);
  padding: 32px; /* увеличен padding */
}
.contact-page__card--map{ padding:0; overflow:hidden; }

/* список контактов — flex, текст растягивается на ширину */
.contact-page__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px; /* больше расстояния между пунктами */
}
.contact-page__list-item{
  display:flex; align-items:flex-start; gap:16px;
}
.contact-page__icon{
  flex: 0 0 26px; width:26px; height:26px; margin-top:4px;
  fill: var(--cp-icon); /* серые иконки */
}
.contact-page__item-title{
  font-weight:600; color:var(--cp-fg); display:block;
}
.contact-page__item-text,
.contact-page__item-link{
  color:var(--cp-muted); display:block; margin-top:2px;
  line-height: 1.5;

  /* корректные переносы без «лесенки» */
  flex: 1 1 auto;
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
  -webkit-hyphens: none;
}

/* телефон в одну строку */
.contact-page a[href^="tel:"]{ white-space: nowrap; }

/* ссылки в списке */
.contact-page__item-link{ text-decoration:none; }
.contact-page__item-link:hover{ color: var(--cp-fg); text-decoration: underline; text-underline-offset: 2px; }

/* CTA-кнопки */
.contact-page__cta{
  margin-top: 28px; display:flex; flex-wrap:wrap; gap:16px;
}
.contact-page__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 22px; border-radius: 100px;
  background: #121321; color:#fff; text-decoration:none; font-weight:600;
}
.contact-page__btn:hover{ opacity:.92; }
.contact-page__btn--outline{
  background: transparent; color: var(--cp-fg);
  border: 1px solid rgba(0,0,0,.1);
}

/* карта */
.contact-page__map{ position:relative; width:100%; aspect-ratio:16/9; background:#F5F6FA; }
.contact-page__map-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.contact-page__map-hint{
  padding: 14px 18px; border-top: 1px solid rgba(0,0,0,.06);
  color: var(--cp-muted); background: #fff; font-style: normal;
}
.contact-page__map-link{ color: var(--cp-accent); text-decoration:none; }
.contact-page__map-link:hover{ text-decoration: underline; }

/* соцсети */
.contact-page__social{
  margin: 32px 0 0; padding:0; list-style:none;
  display:flex; gap:16px; flex-wrap:wrap;
}
.contact-page__social-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:100px;
  background:#F5F6FA; color: var(--cp-fg); text-decoration:none; font-weight:600;
  border: 1px solid rgba(0,0,0,.06);
}
.contact-page__social-link:hover{ background:#FFFFFF; }

/* фокусы */
.contact-page a:focus-visible,
.contact-page button:focus-visible{
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
  border-radius: 10px;
}


.service-detail-more {
  margin-top: 48px;
  margin-bottom: 64px;
}

.service-detail-more__inner {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(15,16,32,.06);
}

/* Базовая «richtext» типографика */
.richtext h2, .richtext h3, .richtext h4 {
  margin: 1.2em 0 .6em;
  line-height: 1.25;
}
.richtext h2 { font-size: 28px; }
.richtext h3 { font-size: 22px; }
.richtext h4 { font-size: 18px; }

.richtext p { margin: .75em 0; line-height: 1.7; }
.richtext ul, .richtext ol { margin: .75em 0 .75em 1.25em; }
.richtext li { margin: .35em 0; }
.richtext img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.richtext a { color: #034459; text-decoration: underline; text-underline-offset: 3px; }

/* Мобилка */
@media (max-width: 768px){
  .service-detail-more { margin-top: 32px; margin-bottom: 48px; }
  .service-detail-more__inner { padding: 16px; border-radius: 12px; }
  .richtext h2 { font-size: 22px; }
  .richtext h3 { font-size: 18px; }
  .richtext h4 { font-size: 16px; }
}
/* Описание под названием позиции в прайсе */
.service-prices__desc{
  margin-top: 6px;
  font-size: 14px;           /* меньше основного */
  line-height: 1.55;
  color: #6B6E7A;            /* не чёрный, брендовый muted */
}

/* Внутренние элементы описания */
.service-prices__desc p{
  margin: 0 0 6px;
}
.service-prices__desc ul{
  margin: 6px 0 0 18px;      /* аккуратные маркеры в описании */
  padding: 0;
}
.service-prices__desc li{
  list-style: disc;
  margin: 4px 0;
}

/* Ссылки в описании, если будут */
.service-prices__desc a{
  text-decoration: none;
  border-bottom: 1px solid rgba(84,196,241,.4); /* #54C4F1 с прозрачностью */
}
.service-prices__desc a:hover{
  border-bottom-color: #54C4F1;
}

/* Адаптив: ещё чуть компактнее на мобиле */
@media (max-width: 768px){
  .service-prices__desc{ font-size: 13.5px; }
}

.services-cats{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.services-cats__pill{
  padding:10px 20px;border-radius:100px;background:#F5F6FA;color:#121321;
  text-decoration:none;font-size:15px;line-height:1;border:1px solid transparent;
  transition:transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease
}
.services-cats__pill:hover{transform:translateY(-1px)}


/* ===== Шапка категории: отступ под фикс-хедер + компактнее снизу ===== */
.category-head{
  /* подвинем ниже хедера (поставь свою фактическую высоту, если другая) */
  padding-top: 110px;   /* desktop */
  padding-bottom: 20px;
  background: none;
}

@media (max-width: 1024px){
  .category-head{ padding-top: 96px; }
}
@media (max-width: 768px){
  .category-head{ padding-top: 84px; }
}

.category-head__title{
  font-size: 36px; font-weight: 600; line-height: 1.2;
  margin: 8px 0 10px; color:#121321;
}
.category-head__desc{
  font-size: 16.5px; line-height: 1.6; color:#444; max-width: 800px;
  margin: 0;
}

/* ===== Хлебные крошки: компакт + переносы на мобиле ===== */
.breadcrumbs{
  display:flex; gap:8px; flex-wrap: wrap; align-items:center;
  font-size: 13.5px; color:#6B6E7A; margin: 0 0 8px;
}
.breadcrumbs a{ color:#6B6E7A; text-decoration: none; }
.breadcrumbs a:hover{ text-decoration: underline; }
.breadcrumbs__current{ color:#6B6E7A; }


/* ===============================
   Блок категорий на /services/
================================*/
.cats-block{
  padding-top: 36px;   /* отступ от хедера/интро */
  padding-bottom: 12px;/* убираем лишний низ */
}

.cats-block__title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 600;
  color: #121321;
}

/* ===============================
   Список табов категорий
================================*/
/* ДЕСКТОП — без скролла */
.cats-tabs__scroll{
  display: flex;
  flex-wrap: wrap;          /* перенос на новую строку */
  gap: 12px;
  align-items: center;
  overflow-x: visible;      /* скролл отключён */
  padding-bottom: 0;
  scroll-snap-type: none;   /* без фиксации */
}

/* Скрываем полосу прокрутки (на всякий случай) */
.cats-tabs__scroll::-webkit-scrollbar {
  display: none;
}

/* ===============================
   Таб категории
================================*/
.cat-tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid #E3E6EE;
  border-radius: 100px;
  background: transparent;
  text-decoration: none;
  color: #121321;
  white-space: nowrap;
  transition: transform .15s ease, border-color .15s ease;
  scroll-snap-align: start;
  background-clip: padding-box;
}

/* Наведение — только лёгкое смещение и изменение рамки */
.cat-tab:hover {
  transform: translateY(-1px);
  border-color: #D7DBE6;
  box-shadow: none !important;
}

/* Аватар */
.cat-tab__avatar{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F5F6FA;
}

.cat-tab__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-tab__name{
  font-size: 14.5px;
  line-height: 1;
}

/* Активный таб */
.cat-tab.is-active{
  border-color: #54c4f1;
  box-shadow: none !important;
}

/* ===============================
   Адаптивы
================================*/

/* Планшеты и мобилки — включаем горизонтальный скролл */
@media (max-width: 1024px){
  .cats-block{ padding-top: 28px; }

  .cats-tabs__scroll{
    flex-wrap: nowrap;                /* табы в одну линию */
    overflow-x: auto;                 /* включаем горизонтальный скролл */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;    /* мягкая фиксация */
  }

  .cat-tab{ padding: 8px 12px; }
}

@media (max-width: 768px){
  .cats-block{ padding-top: 24px; }
  .cats-block__title{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .cat-tab{ gap: 8px; }
  .cat-tab__avatar{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .cat-tab__name{ font-size: 14px; }
}

@media (max-width: 480px){
  .cats-block{ padding-top: 20px; }
  .cat-tab{ padding: 7px 11px; }
  .cat-tab__avatar{
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .cat-tab__name{ font-size: 13.5px; }
}

/* Если ниже идёт список услуг — убираем провал */
.cats-block + .services-page,
.cats-block + .services-grid,
.cats-block + .services-alt {
  margin-top: 10px;
}



.leader {
  margin: 80px auto;
}
.leader__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.leader__photo img {
  max-width: 300px;
  border-radius: 8px;
}
.leader__content {
  flex: 1;
}
.leader__title {
  font-size: 28px;
  margin-bottom: 16px;
}
.leader__text {
  font-size: 18px;
  color: #6B6E7A;
  margin-bottom: 20px;
}
.leader__name {
  font-weight: 600;
  font-size: 16px;
}
.leader__name span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: #6B6E7A;
}
@media (max-width: 768px) {
  .leader__inner {
    flex-direction: column;
    text-align: center;
  }
  .leader__photo img {
    max-width: 220px;
  }
}




/* ---------- Masters (основной блок со скроллом) ---------- */
.masters{
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--bg, #F5F6FA);
  --masters-gap: clamp(20px, 2vw, 32px);
}

.masters__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(20px,3vw,32px); }
.masters__nav{ display:flex; gap:10px; }
.masters__btn{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(18,19,33,.12);
  background:#fff; color:var(--fg,#121321); cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s, opacity .2s;
}
.masters__btn:hover{ border-color:rgba(18,19,33,.2); transform:translateY(-1px); }
.masters__btn:disabled{ opacity:.45; pointer-events:none; }

.masters__viewport{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth; touch-action:pan-x;
}
.masters__viewport::-webkit-scrollbar{ display:none; }
.masters__viewport{ scrollbar-width:none; -ms-overflow-style:none; }

.masters__track{
  display:flex; gap:var(--masters-gap);
  list-style:none; margin:0; padding:0;
}

/* карточка: 4 на экране */
.master-card{
  list-style:none; display:flex; flex-direction:column;
  flex:0 0 calc((100% - 3 * var(--masters-gap)) / 4);
  /* общий фокус кадра (смещение вверх) */
  --focus-y: 22%;
}

/* ссылка покрывает всю карточку */
.master-card__link{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit; outline:none; border-radius:8px;
}
.master-card__link:hover .master-card__title{ text-decoration:underline; }
.master-card__link:focus-visible{ box-shadow:0 0 0 3px rgba(84,196,241,.35); }

/* контейнер фото (в основной версии остаётся фикс-высота) */
.master-card__photo{
  position:relative; height:565px; margin-bottom:16px; border-radius:5px; overflow:hidden;
}

/* слои изображений + «улыбка» */
.master-card__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  object-position: 50% var(--focus-y); /* ⬅ фокус вверх */
  display:block; backface-visibility:hidden; pointer-events:none; z-index:0; opacity:0;
}
.master-card__img--base{  opacity:1; z-index:0; }
.master-card__img--smile{ opacity:0; z-index:1; }

@media (prefers-reduced-motion:no-preference){
  .master-card__img{ transition:opacity .75s cubic-bezier(.4,0,.2,1); will-change:opacity; }
}
.master-card__link:hover .master-card__img--smile,
.master-card__link:focus-visible .master-card__img--smile{ opacity:1; }
.master-card__link:hover .master-card__img--base,
.master-card__link:focus-visible .master-card__img--base{ opacity:0; }

.master-card__title{ font-weight:400; font-size:clamp(16px,1.5vw,20px); margin:0 0 6px; color:var(--fg,#121321); }
.master-card__meta{ margin:0 0 4px; color:var(--muted,#6B6E7A); font-size:14px; }
.master-card__desc{ margin:0; color:var(--muted,#6B6E7A); font-size:14px; }

.masters__all{ display:inline-block; margin-top:clamp(16px,2vw,24px); color:var(--fg,#121321); text-underline-offset:3px; }

@media (max-width:1140px){
  .master-card{ flex-basis:calc((100% - 2 * var(--masters-gap)) / 3); }
}
@media (max-width:768px){
  .masters__nav{ display:none; }
  .masters__viewport{ scroll-snap-type:x mandatory; padding-bottom:8px; }
  .masters__track{ gap:16px; }
  .master-card{ flex-basis:78%; scroll-snap-align:start; }
  .master-card__photo{ height:480px; }
}

/* ---------- Masters ALT (грid без скролла) ---------- */
.masters-alt{
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--bg, #F5F6FA);
  --masters-gap: clamp(20px, 2vw, 32px);
}

/* грид */
.masters-alt__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--masters-gap); list-style:none; margin:0; padding:0;
}
@media (max-width:1140px){ .masters-alt__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){  .masters-alt__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){  .masters-alt__grid{ grid-template-columns:1fr; } }

.masters-alt .master-card{ display:flex; flex-direction:column; }

/* ⬇️ КЛЮЧЕВОЕ: фирменная рамка и СБРОС высот */
.masters-alt .master-card__photo{
  aspect-ratio: 383 / 696;   /* ≈ 9:16 */
  width:100%;
  height:auto !important;     /* перебиваем 565/480 из базового блока */
  position:relative; overflow:hidden; border-radius:5px;
}

/* изображения в alt: тот же фокус вверх */
.masters-alt .master-card__photo .master-card__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% var(--focus-y); display:block;
}
.masters-alt .master-card__img--smile{ z-index:1; }
.masters-alt .master-card__img--base{  z-index:0; }

/* alt — без стрелок и без горизонтального трека */
.masters-alt .masters__nav{ display:none !important; }
#masters-alt .masters__viewport{ overflow:visible !important; }
#masters-alt .masters__track{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:var(--masters-gap) !important;
}
@media (max-width:1140px){ #masters-alt .masters__track{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:900px){  #masters-alt .masters__track{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:560px){  #masters-alt .masters__track{ grid-template-columns:1fr !important; } }

#masters-alt .master-card{ flex:initial !important; }

/* модификаторы на отдельные карточки (если вдруг надо тонко подвинуть фокус) */
.master-card--face-high{ --focus-y: 15%; }
.master-card--face-low { --focus-y: 30%; }


/* позволяем вертикальную прокрутку страницы, не ломая горизонтальный свайп карусели */
@media (max-width: 768px){
  .masters__viewport{
    touch-action: pan-x pan-y;     /* было: pan-x */
    /* альтернативно можно просто: touch-action: auto; */
    scroll-snap-type: x proximity; /* было: mandatory — меньше “залипаний” */
    -webkit-overflow-scrolling: touch;
  }
}







/* сетка страницы */
.contact-page{ background:#ffffff; padding: clamp(24px,4vw,48px) 0; }
.contact-page__grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px,4vw,56px);
}
@media (max-width: 960px){
  .contact-page__grid{ grid-template-columns: 1fr; }
}

/* левый столбец */
.eyebrow{ margin:0 0 8px; font-size:14px; color:#6B6E7A; }
.contact-title{ margin:0 0 12px; font-weight:600; line-height:1.1; color:#121321; font-size:42px; }
.contact-lead{ margin:0 0 24px; color:#6B6E7A; font-size:16px; }

.contact-blocks{ display:grid; gap:20px; }
.contact-block__title{ margin:0 0 8px; font-size:16px; font-weight:600; color:#121321; }
.contact-row{ display:flex; align-items:flex-start; gap:10px; }
.contact-row img{ width:18px; height:18px; margin-top:3px; }
.contact-col{ display:flex; flex-direction:column; gap:2px; }
.contact-row a{ color:#121321; text-decoration:underline; text-underline-offset:3px; }
.contact-row--chips .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-block; padding:8px 12px; border-radius:100px; background:#EFEFF3; color:#121321; text-decoration:none; }
.chip:hover{ background:#E7E7EC; }

/* правая карточка (без тени, легкая граница/заливка) */
.contact-card{
  background:#FFFFFF;
  border:1px solid rgba(18,19,33,.10);
  border-radius:16px;
  padding: clamp(16px,2.5vw,24px);
}
.contact-card__title{ margin:0 0 6px; font-size:18px; font-weight:600; color:#121321; }
.contact-card__desc{ margin:0 0 16px; color:#6B6E7A; font-size:14px; }

/* форма */
.contact-form{ display:grid; gap:12px; }
.field input,
.field textarea{
  width:100%; border:1px solid rgba(18,19,33,.12); border-radius:12px;
  padding:12px 14px; background:#fff; color:#121321; outline:none;
}
.field input::placeholder, .field textarea::placeholder{ color:#9DA0A6; }
.field input:focus, .field textarea:focus{ border-color:#121321; }

.btn-min{
  display:inline-block; padding:12px 18px; border-radius:100px;
  background:#121321; color:#fff; border:0; cursor:pointer;
}
.btn-min:hover{ opacity:.9; }

/* карта */
.contact-map{ background:#fff; padding: 0 0 clamp(48px,6vw,72px); }
.contact-map__wrap{
  position:relative; width:100%; aspect-ratio: 16/9;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(18,19,33,.10); /* без теней */
}
.contact-map__wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* отступ сверху для страниц с фиксированным хедером */
.contact-page {
  padding-top: 120px; /* подставь фактическую высоту хедера (у тебя около 110–120px) */
}



/* ДОКУМЕНТЫ */
.docs-list { padding: 102px 0; }
.docs-list__title { margin: 0 0 16px; }

.docs-list__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.docs-list__item { background: #F5F6FA; border-radius: 12px; }

.docs-list__link {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  text-decoration: none;
  color: #121321;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.docs-list__link:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: #E6E8EE;
  box-shadow: 0 6px 16px rgba(15,16,32,.06);
}

.docs-list__icon img { width: 28px; height: 28px; display: block; }

.docs-list__name { font-weight: 600; display: block; }
.docs-list__desc { color: #6B6E7A; font-size: 14px; display: block; margin-top: 2px; }

.docs-list__info {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px; color: #6B6E7A; margin-top: 6px;
}
.docs-list__ext {
  padding: 2px 8px; border: 1px solid #E6E8EE; border-radius: 100px; font-size: 12px; color: #0F1020;
}
.docs-list__size, .docs-list__date { white-space: nowrap; }

.docs-list__action { color: #54C4F1; font-weight: 500; }

/* карточка-обёртка */
.docs-list__item{
  background: transparent;      /* фон прозрачный */
  border-radius: 100px;         /* большой радиус */
}

/* ссылка-карточка */
.docs-list__link{
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  text-decoration: none;
  color: #121321;               /* базовый текст — не синий */
  border: 1px solid #000;       /* бордер 1px чёрный */
  border-radius: 100px;         /* дублируем для надёжности */
  background: transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

/* ховер-эффект: лёгкий подъём и тень, без заливки */
.docs-list__link:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border-color: #000;
}

/* иконка */
.docs-list__icon img{ width: 28px; height: 28px; display:block; }

/* заголовок и описание — серые тона */
.docs-list__name{ font-weight: 600; color:#121321; }
.docs-list__desc{ color:#6B6E7A; font-size:14px; margin-top:2px; }

/* блок с мета-инфо */
.docs-list__info{
  display:flex; gap:10px; align-items:center;
  font-size:13px; color:#8A8E99; margin-top:6px;
}

/* бейдж расширения */
.docs-list__ext{
  padding:2px 8px;
  border:1px solid #E6E8EE;
  border-radius:100px;
  font-size:12px;
  color:#3A3D46;
}

/* размер файла — серый */
.docs-list__size{ color:#8A8E99; white-space:nowrap; }

/* дата — "еле заметная" */
.docs-list__date{
  color:#B6BAC3;                /* очень светло-серый */
  opacity:.8;                   /* ещё тише */
  font-size:12px;
  white-space:nowrap;
}

/* действие "Открыть" — серым, без синего */
.docs-list__action{
  color:#6B6E7A;                /* серый вместо синего */
  font-weight:500;
}
.docs-list__link:hover .docs-list__action{
  color:#121321;                /* на ховере слегка темнее */
}


.reviews {
  padding: 80px 0;
  background: #F5F6FA; /* можно убрать, если нужен прозрачный фон */
}

.reviews__inner {
  display: grid;
  grid-template-columns: 1fr 560px; /* текст + виджет */
  gap: 40px;
  align-items: center;              /* выравнивание по центру вертикально */
  justify-content: center;          /* выравнивание блока по горизонтали */
}

.reviews__content {

  margin: 0 auto;
}

.reviews__title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #121321;
}

.reviews__desc {
  font-size: 18px;
  line-height: 1.5;
  color: #6B6E7A;
}

.reviews__widget {
  width: 100%;
  height: 800px; /* высота как у вас в коде */
}

@media (max-width: 1024px) {
  .reviews__inner {
    grid-template-columns: 1fr; /* одна колонка */
  }
  .reviews__widget {
    height: 600px;
    margin-top: 30px;
  }
}


.reviews-alt {
  padding: 100px 0;
  background: #f8fafc;
}

.reviews-alt__head {
  text-align: left;
  max-width: 1440px;
  margin: 0 auto 64px;
}

.reviews-alt__title {
  font-size: 42px;
  font-weight: 600;
  color: #0f1020;
  margin-bottom: 16px;
}

.reviews-alt__desc {
  font-size: 18px;
  color: #6b6e7a;
  line-height: 1.6;
}

.reviews-alt__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 40px;
  justify-items: center;
}

.reviews-alt__card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.25;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reviews-alt__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.reviews-alt__link {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: #b3b3b3;
  text-decoration: none;
  padding: 4px 0;
  background: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
  .reviews-alt {
    padding: 60px 0;
  }
  .reviews-alt__title {
    font-size: 32px;
  }
  .reviews-alt__grid {
    gap: 24px;
  }
  .reviews-alt__card {
    aspect-ratio: 1 / 1.1;
  }
}


.team-group {
  margin-top: 60px;   /* отступ сверху */
}

.team-group__title {
  margin-bottom: 30px; /* отступ под заголовком */
}




/* === Prices Page Styles === */



.prices__title {
  font-size: 45px;
  font-weight: 600;
  margin: 24px 0 8px;
}

.prices__lead {
  font-size: 18px;
  color: #6B6E7A;
  margin-bottom: 24px;
}




/* ====== BASE ====== */

.prices__title {
  font-size: 45px;
  font-weight: 600;
  margin: 24px 0 24px;
  color: #121321;
}

/* ====== LAYOUT: слева sidebar (узкий), справа content (широкий) ====== */
.prices__layout{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);   /* было 240px → стало 280px */
  grid-template-areas: "sidebar content";
  gap: 32px;
  align-items: start;
}
.prices__nav{ grid-area: sidebar; }
.prices__content{ grid-area: content; }

/* ====== NAV (узкий сайдбар слева) ====== */
.prices__nav{
  margin-top: 40px;
  position: sticky;
  top: 96px;                    /* подстрой под высоту шапки */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #000;
  border-radius: 24px;
  background: #F5F6FA;
  max-width: 280px;             /* было 240px → стало 280px */
  width: 100%;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.prices__nav-link{
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid #000;
  border-radius: 100px;         /* pill 100px */
  background: #fff;
  color: #121321;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
  font-size: 15px;
}
.prices__nav-link:hover{ transform: translateY(-1px); border-color: #54C4F1; }
.prices__nav-link.is-active{ border-color: #54C4F1; box-shadow: 0 0 0 2px rgba(84,196,241,.2) inset; }

/* ====== CONTENT (широкий блок справа) ====== */
.prices__section{ scroll-margin-top: 120px; margin: 32px 0 56px; }
.prices__section-title{ font-size: 28px; font-weight: 600; margin-bottom: 14px; }

.prices__table{ display: grid; gap: 10px; }
.prices__row{
  display: grid;
  grid-template-columns: 1fr 220px; /* название | цена */
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #000;
  border-radius: 10px;
  background: #fff;
}
.prices__row--head{ background: #F5F6FA; font-weight: 600; }
.prices__cell{ font-size: 16px; }
.prices__cell--price{ text-align: right; }
.price-unit{ margin-left: 6px; opacity: .7; }
.prices__note-inline{ font-size: 13px; color: #6B6E7A; margin-top: 4px; }

/* ====== НЕМНОГО АДАПТИВА ====== */
@media (max-width: 1366px){
  .prices__layout{
    grid-template-columns: 260px minmax(0, 1fr); /* было 220px → стало 260px */
    gap: 28px;
  }
  .prices__nav{
    max-width: 260px; /* под ширину слева */
    padding: 10px;
  }
  .prices__row{ grid-template-columns: 1fr 200px; }
}
@media (max-width: 1024px){
  /* на планшете — одна колонка, меню сверху, не фиксированное */
  .prices__layout{
    grid-template-columns: 1fr;
    grid-template-areas: "sidebar" "content";
    gap: 16px;
  }
  .prices__nav{
    position: static;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }
}
@media (max-width: 640px){
  .prices__row{ grid-template-columns: 1fr; gap: 6px; }
  .prices__cell--price{ text-align: left; }
}


/* ===== Базово ===== */
.crumbs{
  display: flex;
  flex-wrap: wrap;            /* разрешаем перенос */
  align-items: center;
  gap: 6px 12px;              /* вертикальный / горизонтальный отступ */
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.4;
  color: #6B6E7A;
  max-width: 100%;
  position: relative;
}

/* Разделитель «/» */
.crumbs > * + *{
  position: relative;
  padding-left: 14px;
}
.crumbs > * + *::before{
  content: "/";
  position: absolute;
  left: 0;
  top: 0;
  color: #C2C2C2;
}

/* Ссылки */
.crumbs__link{
  color: #6B6E7A;
  text-decoration: none;
  white-space: nowrap;         /* ссылка сама по себе не ломается */
}
.crumbs__link:hover{ color:#121321; text-decoration: underline; }

/* Текущая страница */
.crumbs__current{
  color:#121321;
  white-space: normal;         /* разрешаем ломать название */
  word-break: break-word;      /* переносим длинные слова */
  overflow-wrap: anywhere;
}

/* ===== Адаптив ===== */
@media (max-width:1024px){
  .crumbs{ font-size: 13px; }
}
@media (max-width:640px){
  .crumbs{ font-size: 12px; gap: 4px 8px; }
}



/* учёт фиксированного хедера */
.machine-detail { scroll-margin-top: 110px; }

@media (min-width: 769px){
  .service-detail__title { margin-top: 110px; }
}
@media (max-width: 768px){
  .service-detail__title { margin-top: 15px; }
}

/* хлебные крошки */
.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:10px;
  font-size:14px; color:#6B6E7A; margin-bottom:16px;
}






/* верхний блок */
.machine-detail__top{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap:36px;
  align-items:center;
  margin-bottom:40px;
  margin-top: 100px;
}
@media (max-width: 1200px){
  .machine-detail__top{ grid-template-columns:1fr; gap:24px; }
  .machine-detail__media{ order:-1; }
}

/* заголовок и лид */
.machine-detail__title{
  font-size:36px; font-weight:700; line-height:1.15;
  margin:6px 0 14px; color:#121321;
}
.machine-detail__lead{ font-size:17px; line-height:1.65; color:#121321; }

/* фото аппарата */
.machine-detail__media{
  position:relative;
  border-radius:5px;
  overflow:hidden;
}
.machine-detail__media img{
  display:block; width:100%; height:auto; max-height:600px;
  object-fit: contain; object-position:center;
  transition: transform .25s ease;
}
.machine-detail__media:hover img{ transform:scale(1.03); }

/* Технические характеристики */
.machine-specs{
  background:#fff;
  font-size:16px;
  line-height:1.65;
}
.machine-specs table{ width:100%; border-collapse:collapse; }
.machine-specs th, .machine-specs td{
  border:1px solid #E6E9F2;
text-align:left;
}
.machine-specs th{ background:#F7F9FC; font-weight:600; }

/* списки */
.ul-check, .ul-dot{
  display:grid; gap:10px; margin:12px 0 18px; padding:0; list-style:none;
}
.ul-check li, .ul-dot li{
  position:relative; padding-left:28px;
  font-size:16px; line-height:1.6; color:#1A1B26;
}
.ul-check li::before{
  content:""; position:absolute; left:0; top:6px;
  width:18px; height:18px; background:#54C4F1;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") no-repeat center/contain;
}
.ul-dot li::before{
  content:""; position:absolute; left:7px; top:11px;
  width:9px; height:9px; border-radius:50%;
  background:#C0DEF4; box-shadow:0 0 0 4px #EAF4FB inset;
  transition: transform .2s ease, background-color .2s ease;
}
.ul-dot li:hover::before{ background:#54C4F1; transform:scale(1.08); }

/* преимущества — адаптация под длинные тексты */
.machine-adv{ margin:100px 0; }

/* даём карточкам больше ширины: min 320px */
.machine-adv__list{
  display:grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap:20px;
}

/* карточка: не «пилюля», а круглый прямоугольник */
.machine-adv__item{
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid #ECEEF4;
  border-radius:24px;             /* было 100px */
  padding:18px 20px;              /* больше воздуха */
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
  white-space:normal;
  word-break:break-word;          /* длинные слова не ломают сетку */
  overflow-wrap:anywhere;         /* переносим в любом месте при необходимости */
  hyphens:auto;                   /* перенос по слогам, где браузер умеет */
}
.machine-adv__item:hover{
  border-color:#54C4F1;
  box-shadow:0 2px 8px rgba(15,16,32,.08);
}

.machine-adv__icon{
  width:22px; height:22px; flex:0 0 22px;
  display:block; object-fit:contain; margin-top:2px;
}

/* текст карточки */
.machine-adv__text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.machine-adv__title{
  font-weight:700; color:#121321;
  font-size: clamp(16px, 1.15vw, 20px); /* слегка адаптивно */
  line-height:1.35;
}
.machine-adv__desc{
  color:#6B6E7A;
  font-size:15px; line-height:1.6;
}

/* адаптив */
@media (max-width:1100px){
  .machine-adv__list{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width:768px){
  .machine-adv__list{ grid-template-columns: 1fr; gap:14px; }
  .machine-adv__item{ padding:14px 16px; border-radius:16px; }
  .machine-adv__title{ font-size:18px; }
  .machine-adv__desc{ font-size:14.5px; }
}


/* показания / эффекты */
.machine-two{
  display:grid; grid-template-columns:1fr 1fr; gap:50px;
  margin:140px 0;
}
.machine-two__col h3{ margin-bottom:16px; font-size:20px; font-weight:600; color:#121321; }

/* детальный текст */
.machine-detail__text{
  margin-top:40px; font-size:17px; line-height:1.7; color:#121321;
}
.machine-detail__text h2, .machine-detail__text h3{ margin-top:28px; }

/* до/после */
.machine-detail__before-after{ margin-top:50px; }
.machine-gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.machine-gallery__item img{
  width:100%; height:auto; max-height:320px;
  object-fit:cover; border-radius:5px;
  background:#F5F6FA;
  box-shadow:0 8px 26px rgba(15,16,32,.08);
  transition: transform .2s, box-shadow .2s;
}
.machine-gallery__item img:hover{
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,16,32,.12);
}

/* адаптив */
/* ==== Мобильная версия (до 768px) ==== */
@media (max-width: 768px){

  /* верхний блок */
  .machine-detail__top{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 90px;
    margin-bottom: 32px;
  }

  /* фото аппарата */
  .machine-detail__media{
    order: -1;
    background:#F5F6FA;
    border-radius: 5px;
  }
  .machine-detail__media img{
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 11;
    object-fit: contain;
  }

  /* заголовок и лид */
  .machine-detail__title{ font-size: 30px; line-height: 1.25; }
  .machine-detail__lead{ font-size: 16px; line-height: 1.6; }

  /* преимущества */
  .machine-adv__list{
    grid-template-columns: 1fr;    /* одна карточка в строке */
    gap: 14px;
  }
  .machine-adv__item{
    padding: 12px 14px;
    border-radius:12px;            /* на мобильном лучше прямоугольная карточка */
  }

  /* показания / эффекты */
  .machine-two{
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 32px 0;
  }

  /* детальный текст */
  .machine-detail__text{
    font-size: 16px;
    line-height: 1.65;
    margin-top: 32px;
  }

  /* галерея до/после */
  .machine-gallery{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .machine-gallery__item img{
    aspect-ratio: 16 / 12;
    max-height: none;
    object-fit: cover;
  }
}




/* До/После — секция и слайдер */
/* ===== До/После: секция, слайдер, compare ===== */
.ba-section{ margin-top:50px; }

/* контейнер со стрелками */
.ba-slider{
  position:relative;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:16px;
  align-items:center;
}
.ba-viewport{ position:relative; overflow:hidden; }
.ba-slide{ display:none; }
.ba-slide.is-active{ display:block; }

/* compare-блок внутри слайда */
.ba-compare{
  position: relative;
  --pos: 50%;                 /* стартовая позиция разделителя (в %) */
  border-radius:5px;
  background:#F5F6FA;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(15,16,32,.08);
  aspect-ratio: 4 / 3;        /* базовая пропорция; можно убрать если не нужно */
}

/* две картинки */
.ba-compare__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

/* верхний слой: «После» (ширина задаётся --pos) */
/* ВНИМАНИЕ: в разметке сверху лежит блок .ba-compare__after с <img class="ba-compare__img--after"> */
.ba-compare__after{
  position:absolute; inset:0;
  width: var(--pos);
  overflow:hidden;
}

/* разделительная линия и ручка */
.ba-compare__divider{
  position:absolute; top:0; bottom:0;
  left: calc(var(--pos));
  width:2px;
  background:#54C4F1;
  box-shadow: 0 0 0 1px rgba(15,16,32,.15);
  pointer-events:none;
}
.ba-compare__handle{
  position:absolute;
  left: var(--pos); top:50%;
  transform: translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff;
  border:2px solid #54C4F1;
  box-shadow:0 6px 18px rgba(15,16,32,.12);
  cursor: ew-resize;
}
.ba-compare__handle::before,
.ba-compare__handle::after{
  content:"";
  position:absolute; top:50%;
  width:0; height:0; transform:translateY(-50%);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.ba-compare__handle::before{ left:10px; border-right:8px solid #0F1020; }
.ba-compare__handle::after{ right:10px; border-left:8px solid #0F1020; }

/* бейджи «До/После» и подпись */
.ba-tag{
  position:absolute; top:10px;
  padding:6px 10px; font-size:13px; line-height:1;
  background:#fff; color:#0F1020;
  border:1px solid rgba(0,0,0,.08);
  border-radius:100px;
  box-shadow:0 2px 8px rgba(15,16,32,.06);
}
.ba-tag--before{ left:10px; }
.ba-tag--after{ right:10px; }

.ba-caption{ margin-top:10px; font-size:14px; color:#6B6E7A; }

/* стрелки перелистывания пар */
.ba-btn{
  width:40px; height:40px; border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 4px 14px rgba(15,16,32,.08);
  display:grid; place-items:center;
  cursor:pointer;
  transition:transform .12s, box-shadow .2s, border-color .2s;
  user-select:none;
}
.ba-btn:hover{
  transform:translateY(-1px);
  border-color:#54C4F1;
  box-shadow:0 8px 24px rgba(15,16,32,.12);
}

/* ===== Адаптив ===== */
@media (max-width: 992px){
  .ba-section{ margin-top:40px; }
}
@media (max-width: 768px){
  .ba-slider{ gap:12px; }
  .ba-compare{ aspect-ratio: 16 / 11; }
  .ba-compare__handle{ width:48px; height:48px; }
}





/* Сетка */
.machines__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:24px;
}

/* Карточка */
.machine-card{
  border-radius:24px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:16px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.machine-card__link{ text-decoration:none; color:inherit; display:block; }

/* Медиа-бокс с фикс. пропорцией (выберите) */
.machine-card__media{
  width:100%;
  aspect-ratio: 16 / 10;      /* ← можно 4/3, 1/1, 3/2 — на вкус макета */
  border-radius:16px;
  overflow:hidden;
  background:#F5F6FA;         /* фон под «пустые» области/плейсхолдер */
  display:block;
}

/* Заполнение бокса без «дыр»: изображение может подрезаться по краям */
.machine-card__img{
  width:100%;
  height:100%;
  object-fit:cover;            /* cover — ровная сетка, да, будет кросс-кроп */
  object-position:center;
  display:block;
}

/* Плейсхолдер на случай отсутствия фото */
.machine-card__placeholder{
  width:100%; height:100%;
  background:linear-gradient(180deg,#eceff3 0%,#e3e7ec 100%);
}

/* Заголовок/текст */
.machine-card__title{ margin:16px 0 8px; font-weight:700; }
.machine-card__desc{
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:4;        /* обрезка по 4 строкам */
  -webkit-box-orient:vertical;
  overflow:hidden;
}


.machine-card__media {
  width: 100%;
  aspect-ratio: 2 / 3;      /* вертикальное фото */
  border-radius: 16px;
  overflow: hidden;
  background: #F5F6FA;
  display: block;
}

.machine-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* аккуратный кроп */
  object-position: center;
  display: block;
}


.policy { padding-top: 80px; padding-bottom: 80px; line-height: 1.7; color: #121321; }
.policy__title { font-size: 32px; font-weight: 600; margin-bottom: 30px; }
.policy__content .policy-text h2,
.policy__content .policy-text h3 { margin: 28px 0 14px; font-weight: 600; }
.policy__content .policy-text p { margin: 0 0 14px; }
.policy__content .policy-text ul, 
.policy__content .policy-text ol { margin: 0 0 16px 20px; }


/* ---------- CRPZ Advantages (glass) ---------- */
.crpz-advantages__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.crpz-advantages__item {
  position: relative;
  border-radius: 16px;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 10px 30px rgba(15,16,32,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.crpz-advantages__item::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(84,196,241,.25) inset;
}

.crpz-advantages__item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(15,16,32,.12),
    inset 0 1px 0 rgba(255,255,255,.35);
  border-color: rgba(84,196,241,.45);
}

/* --- Белый текст --- */
.crpz-advantages__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;          /* белый */
}

.crpz-advantages__text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: rgba(255,255,255,.9); /* почти белый */
}

/* адаптив */
@media (max-width: 1200px){
  .crpz-advantages__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 740px){
  .crpz-advantages__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .crpz-advantages__item {
    padding: 16px 18px;
    border-radius: 12px;
  }
  .crpz-advantages__title { font-size: 15px; }
  .crpz-advantages__text { font-size: 14px; }
}
@media (hover: none){
  .crpz-advantages__item:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(255,255,255,.35);
  }
}


.service-card__actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column; /* кнопки в колонку */
  gap: 12px;              /* расстояние между ними */
}

.service-card__actions .btn {
  display: flex;                /* делаем flex */
  align-items: center;          /* вертикальное выравнивание */
  justify-content: center;      /* горизонтальное выравнивание */
  width: 100%;
  min-height: 52px;             /* фиксированная высота для одинаковых кнопок */
  padding: 0 20px;              /* только горизонтальные отступы */
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  transition: background .25s, color .25s, border-color .25s;
}


/* стили */
.btn--more {
  background: transparent;
  border: 1px solid #282828;
  color: #282828;
}
.btn--more:hover {
  background: #282828;
  color: #fff;
}

.btn--book {
  background: #121321;
  border: 1px solid #121321;
  color: #fff;
}
.btn--book:hover {
  background: #282828;
  border-color: #444748;
}


/* ===== Секция со списком услуг: ближе к заголовку ===== */
.services-grid{ padding: 20px 0 56px; }
.services-grid .container{ padding-top: 0; }

/* Сетка карточек (адаптив) */
.services-alt__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px; /* убираем излишний провис */
}
@media (max-width: 1200px){
  .services-alt__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .services-alt__grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* Карточки — на случай, если шаблон даёт большие внешние отступы */
.services-page--section .service-card{ margin: 0; }

/* Блок полного описания */
.category-detail{ padding: 32px 0 64px; }
.category-detail__inner{
  max-width: 900px; margin: 0 auto; font-size: 16px; line-height: 1.7; color:#121321;
}
.category-detail__inner .richtext p{ margin: 0 0 14px; }

.services__all {
  margin-top: 20px;
  text-align: left; /* прижимаем влево */
  font-weight: 400;
}

.services__all a {
  font-size: 15px;
  color: #535353;
  text-decoration: underline;
  transition: color .25s;
}

.services__all a:hover {
  color: #121321;
}


/* ===== Насадки ===== */
.machine-nozzles { margin-top: 48px; }
.nozzles-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  padding-top: 60px;
  padding-bottom: 80px;
}
@media (max-width: 1199px){
  .nozzles-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px){
  .nozzles-grid{ grid-template-columns: 1fr; }
}

.nozzle-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #E6E8EF;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nozzle-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.nozzle-card__media{
  position:relative;
  padding-top:66.66%; /* 3:2 */
  background:#F5F6FA;
  overflow:hidden;
}
.nozzle-card__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.nozzle-card__body{
  padding:16px 16px 18px;
}
.nozzle-card__title{
  font-size:18px; line-height:1.25;
  margin:0 0 8px;
  color:#121321;
}
.nozzle-card__desc{
  font-size:15px; line-height:1.5;
  color:#6B6E7A;
}

/* Плашки Лицо/Тело под кратким описанием */
.machine-detail__badges{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.machine-detail__badge{
  font-size:15px;
  font-weight:700;
  line-height:1.15;
  padding:10px 16px;
  border-radius:100px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  border:1px solid transparent;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.machine-detail__badge--face{
  background:#E6F7FE;
  border-color:#54C4F1;
  color:#034459;
}
.machine-detail__badge--body{
  background:#ECEFF5;
  border-color:#C8CDD6;
  color:#121321;
}

/* общий ряд хедера */
.header__right {
  display: flex;
  align-items: center;
  gap: 16px;            /* при необходимости подгони */
}

/* вертикально под телефоном */
.header__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* чтобы текст выравнивался вправо, как телефон */
  line-height: 1.2;
}

/* адрес — аккуратнее и тише по тону */
.header__address {
  font-size: 14px;
  color: #6B6E7A;       /* muted-серый по умолчанию */
  margin-top: 2px;
  transition: color 0.3s ease;
}

/* при прокрутке (solid header) — делаем белым */
.header--solid .header__address {
  color: #FFFFFF;
}
/* --- скрываем адрес на мобильных --- */
@media (max-width: 768px) {
  .header__address {
    display: none;
  }
}


.phone { white-space: nowrap; } /* чтобы номер не переносился */

/* мобильная подстройка */
@media (max-width: 768px) {
  .header__right { gap: 12px; }
  .header__contacts { align-items: flex-start; } /* на мобиле можно влево */
}


html { text-wrap: pretty; }        /* аккуратные переносы на современных браузерах */
.crpz-advantages__text { hyphens: auto; }

/* для всего сайта (можно сузить селектор) */
.crpz-advantages__text,
.crpz-advantages__title {
  hyphens: none;        /* не вставлять дефисы при переносе */
  word-break: normal;   /* не ломать слова посередине */
  overflow-wrap: break-word; /* если слово слишком длинное — перенести без дефиса */
}

/* если раньше ставили */
html { text-wrap: pretty; } /* можно оставить — не влияет на дефисы */


./* Блок статуса всегда под формой */
.cta-gift__form .form-status{
  display: block;
  margin-top: 12px;
  width: 100%;
  /* если форма — grid */
  grid-column: 1 / -1;      /* растянуть на все колонки */
  /* если форма — flex */
  flex-basis: 100%;
  order: 99;                /* увести в конец ряда */
  /* косметика (можно убрать) */
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ccefff;
  background: #e8f8ff;
  color: #0b6b8e;
  font-size: 14px;
  line-height: 1.4;
}
.cta-gift__form .form-status.form-status--err{
  border-color: #ffd2d2;
  background: #ffecec;
  color: #8e0b0b;
}

/* Статус – всегда под формой, на всю ширину */
.cta-gift__form .form-status{
  display: none;              /* по умолчанию скрыт; JS покажет */
  width: 100%;
  margin-top: 12px;

  /* если форма — GRID */
  grid-column: 1 / -1 !important;

  /* если форма — FLEX */
  flex-basis: 100%;
  order: 99;

  /* оформление (можно подправить под стиль) */
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ccefff;
  background: #e8f8ff;
  color: #0b6b8e;
  font-size: 14px;
  line-height: 1.4;
}
.cta-gift__form .form-status.form-status--err{
  border-color: #ffd2d2;
  background: #ffecec;
  color: #8e0b0b;
}

.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

.field--error input,
.field--error textarea {
  border-color: #e74c3c !important;
}

.error-msg {
  font-size: 13px;
  color: #e74c3c;
  margin-top: 4px;
}


/* End */
/* /bitrix/templates/gatineau/assets/styles.css?1760958226159384 */