/* Mobile-first landing (cleaning) */
:root{
  --bg1:#bff6ef;
  --bg2:#c7f7ff;
  --bg3:#b9f0d8;

  --text:#0b2b2e;
  --muted: rgba(11,43,46,.7);

  --card: rgba(255,255,255,.55);
  --stroke: rgba(11,43,46,.12);

  --shadow: 0 18px 45px rgba(0,0,0,.12);

  --primary1:#a855f7;
  --primary2:#fb7185;
  --primary3:#f59e0b;

  --radius2: 28px;
  --container: 1100px;
  --linkHover:#0a66ff;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(120deg, var(--bg1), var(--bg2), var(--bg3));
  overflow-x:hidden;
}

a{ color: inherit; text-decoration:none; }
strong{ font-weight: 800; }

.container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.bg{
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity: .85;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(800px 600px at 70% 30%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(900px 700px at 30% 80%, rgba(255,255,255,.25), transparent 60%);
  z-index: -1;
}

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding: 18px 0 6px;
  gap: 16px;
}

.brand{
  display:flex;
  gap: 12px;
  align-items:center;
  min-width: 0;
}
.brand__logo{
  width: 254px;
  height: 254px;
  border-radius: 40px;
}



.brand__text{ min-width:0; }
.brand__name{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.contacts{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.contacts__phones{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.phone{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
}

.status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  color: rgba(0,140,150,.9);
  font-weight: 700;
  font-size: 12px;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,200,140,.95);
  box-shadow: 0 0 0 6px rgba(0,200,140,.18);
}

.hero{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 18px 0 12px;
  align-items: start;
}

.hero__left{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.kicker{
  background: rgba(255,255,255,.28);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 14px 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}
.kicker__text{
  margin:0;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(0,40,45,.85);
}

.cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 10px;
}

.btn{
  border: 0;
  cursor: pointer;
  font-weight: 900;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 15px;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px) scale(.99); }

.btn--primary{
  color: rgba(20,10,25,.96);
  background: linear-gradient(90deg, var(--primary1), var(--primary2), var(--primary3));
  box-shadow: 0 14px 30px rgba(166, 85, 247, .25), 0 8px 18px rgba(245, 158, 11, .20);
}
.btn--primary:hover{
  filter: brightness(1.03);
  box-shadow: 0 18px 40px rgba(166, 85, 247, .28), 0 12px 25px rgba(245, 158, 11, .22);
}

.btn--ghost{
  background: rgba(255,255,255,.45);
  border: 1px solid var(--stroke);
  color: rgba(10,35,40,.95);
  box-shadow: 0 14px 35px rgba(0,0,0,.08);
}
.btn--ghost:hover{ filter: brightness(1.02); }

.cta__hint{
  font-size: 13px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap: 8px;
}

.services{
  background: rgba(255,255,255,.22);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 14px 14px;
  backdrop-filter: blur(10px);
}
.services__title{
  margin:0 0 8px;
  font-size: 14px;
  letter-spacing: .3px;
}
.services__list{
  margin:0;
  padding: 0 0 0 18px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  color: rgba(0,40,45,.9);
  font-weight: 700;
  font-size: 14px;
}
.services__meta{
  margin-top: 10px;
  color: rgba(0,40,45,.65);
  font-weight: 700;
  font-size: 13px;
}

.hero__right{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.hero__imgWrap{
  position: relative;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.15);
  min-height: 240px;
}
.hero__img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transform: scale(1.02);
}

.messengers{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background: rgba(255,255,255,.25);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 12px 14px;
  backdrop-filter: blur(10px);
}
.messengers__text{
  font-size: 13px;
  color: rgba(0,40,45,.75);
  line-height: 1.25;
  font-weight: 700;
}

.messengers__icons{
  display:flex;
  gap: 10px;
}
.iconBtn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 12px 25px rgba(0,0,0,.12);
  transition: transform .12s ease, filter .12s ease;
  background: rgba(255,255,255,.35);
}
.iconBtn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.iconBtn--wa{ background: rgba(34,197,94,.25); }
.iconBtn--tg{ background: rgba(59,130,246,.22); }
.iconBtn--ph{ background: rgba(168,85,247,.22); }

.section{ padding: 18px 0; }
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.card--split{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.card__title{
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: .2px;
}
.card__text{
  margin: 0;
  color: rgba(0,40,45,.75);
  line-height: 1.45;
  font-weight: 600;
}

.contactLines{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.contactLine{
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.35);
  border: 1px solid var(--stroke);
}

.miniCta{ margin-top: 12px; }

.mapPlaceholder{
  border-radius: 22px;
  border: 1px dashed rgba(0,40,45,.25);
  background: rgba(255,255,255,.25);
  min-height: 170px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.mapPlaceholder__inner{
  color: rgba(0,40,45,.6);
  font-weight: 800;
  padding: 14px;
  text-align:center;
}

.footer{
  padding: 16px 0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: rgba(0,40,45,.65);
  font-weight: 700;
  font-size: 13px;
}

/* honeypot hidden */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

/* MODAL */
.modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 50;
}
.modal.is-open{ display:block; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.modal__dialog{
  position: relative;
  width: min(560px, calc(100% - 24px));
  margin: 10vh auto 0;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  padding: 18px 16px;
}
.modal__close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.5);
  font-size: 22px;
  cursor:pointer;
}
.modal__title{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
}
.modal__subtitle{
  margin: 0 0 14px;
  color: rgba(0,40,45,.70);
  font-weight: 700;
  line-height: 1.35;
  font-size: 13px;
}

.form__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.field{ display:flex; flex-direction:column; gap: 6px; }
.field__label{
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,40,45,.75);
}
.field__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,40,45,.18);
  background: rgba(255,255,255,.7);
  outline: none;
  font-weight: 700;
  font-size: 14px;
}
.field__input:focus{
  border-color: rgba(168,85,247,.55);
  box-shadow: 0 0 0 5px rgba(168,85,247,.14);
}
.field__textarea{
  min-height: 92px;
  resize: vertical;
}
.field--full{ grid-column: 1 / -1; }

.check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin-top: 2px;
}
.check__input{ position:absolute; opacity:0; }
.check__box{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(0,40,45,.25);
  background: rgba(255,255,255,.75);
  flex: 0 0 auto;
  margin-top: 2px;
}
.check__text{
  font-size: 12px;
  color: rgba(0,40,45,.72);
  font-weight: 700;
  line-height: 1.25;
}
.check__input:checked + .check__box{
  background: linear-gradient(90deg, var(--primary1), var(--primary2), var(--primary3));
  border-color: transparent;
}

.form__actions{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.form__note{
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,40,45,.75);
}

@media (min-width: 900px){
  .hero{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 26px;
    padding: 26px 0 10px;
    align-items: start;
  }
  .brand__name{ font-size: 20px; }
  .phone{ font-size: 15px; }
  .hero__imgWrap{ min-height: 520px; }
  .card--split{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .modal__dialog{
    padding: 20px 18px;
  }
  .form__grid{
    grid-template-columns: 1fr 1fr;
  }
  .field--full{ grid-column: 1 / -1; }
}


/* =========================
   PATCHES (requested changes)
   ========================= */

/* 4) Header: увеличить в 2 раза + шрифты */
.header{
  padding-top: 28px;
  padding-bottom: 28px;
  min-height: 120px;
  align-items: center;
  gap: 24px;
}
.brand__logo{
  width: 254px;
  height: 254px;
  border-radius: 40px;
}



.brand__name{ font-size: 28px; line-height: 1.1; }
.brand__sub{ font-size: 18px; opacity: .85; }
.contacts__phones .phone{
  font-size: 22px;
  line-height: 1.15;
}
.status{ font-size: 18px; }

/* 5) Пульсация точки "Сейчас на связи" каждые 3 секунды */
.status .dot{
  animation: dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse{
  0%   { transform: scale(.85); opacity: .25; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(.85); opacity: .25; }
}

/* 6) Плейсхолдеры под лого операторов рядом с номерами */
.phoneRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
}
.opLogo{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  user-select:none;
}

/* 7) CTA по центру экрана */
.ctaCenter{
  min-height: calc(100vh - 140px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px 0 8px;
}
.ctaCenter .cta{
  justify-content: center;
  align-items: center;
}
.ctaCenter .cta__hint{
  justify-content: center;
}
.ctaCenter .kicker{
  max-width: 760px;
  margin: 0 auto;
}
.ctaCenter .kicker__text{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.25;
}

/* 8) Услуги сверху: слева, картинка справа */
.topRow{
  display:grid;
  grid-template-columns: minmax(280px, 520px) minmax(280px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 14px 0 10px;
}
@media (max-width: 920px){
  .topRow{ grid-template-columns: 1fr; }
  .phoneRow{ justify-content:flex-start; }
  .contacts{ text-align:left; }
  .status{ justify-content:flex-start; }
}

/* 1) hero.webp без рамки */
.hero__imgWrap{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 2) Плавное смещение (параллакс делает JS) */
.hero__img{
  will-change: transform;
  transform: translate3d(0,0,0) scale(1.02);
}

/* 9) Услуги кликабельные */
.services__list li{
  cursor: pointer;
  position: relative;
  padding-right: 18px;
}
.services__list li::after{
  content: "›";
  position: absolute;
  right: 0;
  top: 0;
  opacity: .55;
}

/* 11) Остались вопросы по центру */
.questionsCenter{
  display:grid;
  place-items:center;
  text-align:center;
}
.questionsCenter .messengers{
  justify-content:center;
  text-align:center;
}
.questionsCenter .messengers__icons{
  justify-content:center;
}

/* Контакты: без карты, слева текст, справа телефоны, кнопка снизу по центру */
.card--contactsNew{
  display:grid;
  grid-template-columns: 1fr minmax(220px, 360px);
  gap: 22px;
  align-items: start;
}
.card--contactsNew .contactLines{
  display:grid;
  gap: 10px;
  justify-items: end;
  text-align: right;
  margin-top: 0;
}
.card--contactsNew .miniCta{
  grid-column: 1 / -1;
  display:flex;
  justify-content:center;
  margin-top: 8px;
}
@media (max-width: 920px){
  .card--contactsNew{ grid-template-columns: 1fr; }
  .card--contactsNew .contactLines{ justify-items:start; text-align:left; }
}

/* Попап услуги */
.modal--service .modal__dialog{ max-width: 760px; }
.serviceBody{
  margin-top: 10px;
  opacity: .9;
  line-height: 1.55;
}


/* Header height: desktop vs mobile */
.header{
  min-height: 220px;
}
@media (max-width: 768px){
  .header{
    min-height: 120px;
  }
  .brand__logo{
  width: 254px;
  height: 254px;
  border-radius: 40px;
}

}

/* Services font larger */
.services__list li{
  font-size: 22px;
  font-weight: 600;
}

/* Services + hero alignment */
.topRow{
  align-items: flex-start;
}

/* Block after image: meta info */
.afterHeroMeta{
  margin-top: 18px;
  font-size: 18px;
  opacity: .9;
  text-align: center;
}

/* v3: header sizing desktop/mobile */
.header{
  min-height: 300px;
}
@media (max-width: 920px){
  .brand__logo{
    width: 120px;
    height: 120px;
    border-radius: 24px;
  }
  .header{
    min-height: 140px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .brand__name{ font-size: 22px; }
  .brand__sub{ font-size: 14px; }
  .contacts__phones .phone{ font-size: 18px; }
}

/* v3: services typography */
.services__title{
  font-size: 28px;
}
.services__list li{
  font-size: 20px;
  padding: 10px 18px 10px 0;
}
@media (max-width: 920px){
  .services__title{ font-size: 24px; }
  .services__list li{ font-size: 18px; }
}

/* v3: block after image (proof) */
.proofBar{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 22px;
  align-items:center;
  justify-content:center;
  margin: 10px 0 18px;
  text-align:center;
  opacity: .92;
}
.proofBar__item{
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* v4: services + hero strictly one row, two columns */
.topRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 40px;
}
.hero__right{
  display: flex;
  justify-content: center;
}
.hero__img{
  max-width: 100%;
  height: auto;
}
@media (max-width: 920px){
  .topRow{
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}


/* =========================
   vNext PATCHES (2026-01-27)
   ========================= */

/* Header: статус "Сейчас позвонить" первым, компактнее */
.contacts{
  gap: 10px;
}
.status--call{
  justify-content: flex-end;
  margin-bottom: 6px;
}

/* Operator icon placeholders (header + contacts) */
.opLogo{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(11,43,46,.18);
  background: rgba(255,255,255,.35);
  flex: 0 0 auto;
  overflow:hidden;
  position: relative;
}
/* Под твои картинки: просто назначь background-image для нужного класса */
.opLogo--op1{}
.opLogo--op2{}
.opLogo--viber{}
.opLogo--mail{}

/* Contacts lines with icons */
.contactLine{
  display:flex;
  align-items:center;
  gap: 10px;
}
.contactLine__text{
  display:inline-block;
}

/* Контакты: меньше расстояние между строками */
.card--contactsNew .contactLines{
  gap: 6px;
}
.card--contactsNew .contactLine{
  padding: 8px 10px;
}

/* Services + hero: строго по центру по вертикали */
.topRow{
  align-items: center;
}

/* CTA: ближе к "О нас", кнопку от текста отделить */
.ctaCenter{
  min-height: 0;
  padding: 10px 0 6px;
}
.ctaCenter .cta{
  margin-top: 22px; /* отделяем кнопку от текста */
  align-items: center;
}
.ctaCenter .btn{
  margin-top: 0;
}

/* Вопросы: как "Контакты" по ширине */
.questionsCenter .messengers{
  width: 100%;
}

/* =========================
   UNIFIED CANVAS (почти без границ между блоками)
   + компактнее по контенту, чтобы сократить длину сайта
   (хедер не трогаем)
   ========================= */

/* 1) Секции — меньше "воздуха" */
.section{ padding: 4px 0 !important; }

/* TopRow (услуги + фото) — компактнее */
.topRow{
  padding: 6px 0 !important;
  row-gap: 14px !important;
  column-gap: 22px !important;
}

/* 2) Убираем границы/тени у блоков (кроме хедера) */
.card,
.services,
.kicker,
.messengers,
.contactLine,
.hero__imgWrap,
.modal__dialog{
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 3) Единая "подложка" — чтобы блоки воспринимались цельно */
.card,
.services,
.kicker,
.messengers{
  background: rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 4) Меньше скругления и внутренние отступы — компактнее по контенту */
.card,
.services,
.kicker,
.messengers{
  border-radius: 14px !important;
  padding: 10px 12px !important;
}

/* 5) Типографика чуть плотнее (сокращает высоту) */
.card__title{ margin-bottom: 6px !important; }
.card__text{ line-height: 1.35 !important; }

/* 6) CTA — убираем ощущение отдельного экрана */
.ctaCenter{
  min-height: 0 !important;
  padding: 4px 0 !important;
}
.ctaCenter .kicker{ margin: 0 auto 6px !important; }
.ctaCenter .cta{
  margin-top: 10px !important; /* отделение кнопки от текста, но компактно */
  gap: 8px !important;
}

/* 7) Кнопки чуть компактнее */
.btn{
  padding: 12px 16px !important;
  font-size: 14px !important;
}

/* 8) Контакты — меньше расстояние между строками */
.contactLines{ gap: 3px !important; }
.contactLine{
  padding: 7px 10px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.18) !important;
}

/* 9) Остались вопросы — плотнее и во всю ширину */
.questionsCenter{ padding-top: 2px !important; }
.questionsCenter .messengers{ width: 100% !important; }

/* 10) Модалки — компактнее */
.modal__dialog{
  border-radius: 16px !important;
  padding: 14px 14px !important;
}

/* =========================
   MOBILE HEADER + CTA PATCH (2026-01-28)
   Requested:
   1) Logo 64x64 on mobile
   2) Header layout: logo+name on top without trimming
   3) Phones under logo on mobile
   4) hero.webp stays visible on mobile
   5) CTA+button shown inside .topRow (requires ctaMobile block in HTML),
      and original .ctaCenter hidden on mobile to avoid duplication
   ========================= */

/* Desktop/tablet default: hide mobile CTA block */
.ctaMobile{ display:none; }

@media (max-width: 920px){

  /* 1) Logo 64x64 */
  .brand__logo{
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
  }

  /* 2–3) Header: stack, no trimming title, phones below */
  .header{
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: auto !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .brand{
    width: 100% !important;
    align-items: center !important;
  }

  /* do not cut brand name on mobile */
  .brand__name{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.15 !important;
  }

  .brand__sub{
    white-space: normal !important;
  }

  .contacts{
    width: 100% !important;
    text-align: left !important;
  }

  .status--call{
    justify-content: flex-start !important;
  }

  .phoneRow{
    justify-content: flex-start !important;
  }

  /* 5) CTA in topRow: show ctaMobile, hide old ctaCenter */
  .ctaMobile{ display:block !important; }
  .ctaCenter{ display:none !important; }

  /* 4) Ensure hero is not hidden on mobile (explicit) */
  .hero__right,
  .hero__imgWrap,
  .hero__img{
    display: block !important;
  }
}

/* =========================
   MOBILE HEADER PHONES ON NEW LINE
   Logo + name on one row, phones below
   ========================= */

@media (max-width: 920px){

  .header{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Top row: logo + brand name */
  .brand{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .brand__logo{
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 auto !important;
  }

  .brand__name{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.15 !important;
  }

  /* Second row: phones under brand */
  .contacts{
    width: 100% !important;
    padding-left: 74px !important; /* align under text, not logo */
    text-align: left !important;
  }

  .status--call{
    justify-content: flex-start !important;
  }

  .phoneRow{
    justify-content: flex-start !important;
  }
}

/* =========================
   DESKTOP FIX: hero next to services, CTA below (single instance)
   - Works with .ctaInline placed as 3rd child inside .topRow
   - Removes need for duplicated CTA blocks
   ========================= */

/* TopRow as grid with areas:
   Desktop: services | hero, then CTA full width under both
   Mobile:  services, CTA, hero (hero stays visible)
*/
.topRow{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "services hero"
    "cta      cta" !important;
  align-items: center !important;
  row-gap: 16px !important;
}

.services{ grid-area: services !important; }
.hero__right{ grid-area: hero !important; }
.ctaInline{
  grid-area: cta !important;
  text-align: center !important;
}

/* CTA styling (compact, consistent) */
.ctaInline .kicker{
  max-width: 760px;
  margin: 0 auto 10px;
}
.ctaInline .cta{
  justify-content: center;
  align-items: center;
}

/* Ensure hero is not constrained weirdly on desktop */
.hero__imgWrap{
  max-width: 100%;
}
.hero__img{
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile layout: stack services -> CTA -> hero */
@media (max-width: 920px){
  .topRow{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "services"
      "cta"
      "hero" !important;
  }

  /* align phones block under brand text as we did before */
  .contacts{
    padding-left: 74px !important;
  }
}

/* If any legacy CTA-mobile rules exist earlier, neutralize them */
.ctaMobile{ display:none !important; }
.ctaCenter{ display:block !important; } /* in case it still exists somewhere; but HTML removes it */

/* =========================
   FINAL PATCH: CTA INLINE CENTER (2026-01-28)
   Goal:
   - Desktop: services + hero in one row, CTA below them centered
   - Mobile: services -> CTA -> hero, CTA centered
   ========================= */

.topRow{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "services hero"
    "cta      cta" !important;
  align-items: center !important;
  column-gap: 22px !important;
  row-gap: 16px !important;
}

/* Bind areas explicitly */
.topRow > .services{ grid-area: services !important; }
.topRow > .hero__right{ grid-area: hero !important; }
.topRow > .ctaInline{ grid-area: cta !important; }

/* CTA centered (no viewport hacks) */
.topRow > .ctaInline{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.topRow > .ctaInline .kicker{
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto 12px !important;
}
.topRow > .ctaInline .kicker__text{
  text-align: center !important;
}

.topRow > .ctaInline .cta{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Mobile stacking */
@media (max-width: 920px){
  .topRow{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "services"
      "cta"
      "hero" !important;
    row-gap: 14px !important;
  }
  .topRow > .ctaInline .kicker{
    max-width: 520px !important;
  }
}

/* Safety: if any legacy CTA blocks exist, keep them hidden */
.ctaCenter{ display:none !important; }
.ctaMobile{ display:none !important; }

/* Hover: phones & messengers -> blue */
.phone:hover{ color: var(--linkHover); }
.contactLine:hover{ color: var(--linkHover); }
.contactLine:hover .contactLine__text{ color: var(--linkHover); }
.messengers__icons a:hover{ color: var(--linkHover); }
.iconBtn:hover span{ color: var(--linkHover); }

/* About: center content */
.card--about{ text-align:center; }
.card--about .advantages{
  list-style:none;
  padding: 0;
  margin: 10px auto 0;
  display:inline-block;
  text-align:left;
}
.card--about .advantages li{
  position: relative;
  padding-left: 22px;
  margin: 8px 0;
}
.card--about .advantages li::before{
  content: "✓";
  position:absolute;
  left:0;
  top:0;
}
.srOnly{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}