/* Первый экран всех трёх сайтов. 05.11.2026. Подключается после ses-header; цвета не меняет.
   Телефон и планшет (до 1024 px) — как на клопах: крошки, заголовок, фото, цена, текст, две кнопки.
   Фото занимает оставшееся место, поэтому две кнопки всегда заканчиваются на первом экране.
   Компьютер: пункты в одну строку (пояснения видны на телефоне), чтобы блок помещался в окно. */

@media (max-width:1023px){
  main :is([data-mobile-first-hero="v1"],#ses-hero){
    --hero-top:118px;
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto minmax(150px,1fr) auto auto auto auto!important;
    align-content:start!important;align-items:start!important;
    min-height:0!important;height:auto!important;padding:12px 16px 32px!important;background-image:none!important
  }
  /* Высота первого экрана: под шапкой до низа окна. Фото растягивается до неё */
  main :is([data-mobile-first-hero="v1"],#ses-hero)::before{content:""!important;display:block!important;position:static!important;inset:auto!important;grid-column:1;grid-row:1/7;width:0;height:calc(100svh - var(--hero-top) - 12px - 14px);background:none!important;pointer-events:none}
  main :is([data-mobile-first-hero="v1"],#ses-hero) :is(.wrap,.owner-hero-grid,.owner-hero-copy,.owner-hero-media),
  main :is([data-mobile-first-hero="v1"],#ses-hero)>.wrap>div:not(.hero-price-card){display:contents!important}
  /* Декоративные заливки и пятна первого экрана рассчитаны на фото во весь экран — на телефоне их нет */
  main :is([data-mobile-first-hero="v1"],#ses-hero)::after,
  main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media::after,main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media::before{content:none!important;display:none!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .hero-price-card{display:none!important}

  main :is([data-mobile-first-hero="v1"],#ses-hero) :is(.crumbs,.breadcrumbs){grid-column:1;grid-row:1;margin:0!important;padding:0!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) :is(.crumbs,.breadcrumbs) a{min-height:32px!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) h1{grid-column:1;grid-row:2;margin:6px 0 0!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) picture{grid-column:1;grid-row:3;align-self:stretch!important;position:relative!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:14px 0 0!important;border-radius:20px;overflow:hidden;contain:size}
  main :is([data-mobile-first-hero="v1"],#ses-hero) picture img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:var(--hero-focus,50% 50%)!important;transform:none!important}
  /* Цена — строка под фото, как на клопах */
  main :is([data-mobile-first-hero="v1"],#ses-hero) .hero-price-chip{grid-column:1;grid-row:4;position:static!important;inset:auto!important;display:block!important;margin:14px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .hero-price-chip>span{display:block;font-size:12px!important;font-weight:800!important;line-height:1.3;letter-spacing:.12em!important;text-transform:uppercase}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .hero-price-chip strong{display:block;margin-top:2px;font-size:clamp(30px,8.4vw,40px)!important;font-weight:900!important;line-height:1.05!important;letter-spacing:-.03em;white-space:nowrap}
  main :is([data-mobile-first-hero="v1"],#ses-hero) :is(.lede,.intro){grid-column:1;grid-row:5;margin:10px 0 0!important;max-width:40em;font-size:17px!important;line-height:1.5!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-actions--copy{grid-column:1;grid-row:6;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:18px 0 0!important;max-width:none!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-actions--copy>a{min-height:56px!important;padding:8px 12px!important;font-size:15px!important;line-height:1.25!important;text-align:center;white-space:normal}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .pledges{grid-column:1;grid-row:7;margin:28px 0 0!important}
  /* Всё остальное в первом экране — после пунктов, чтобы не вклиниться между фото и ценой */
  main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-copy>:not(.crumbs,.breadcrumbs,h1,.lede,.intro,.owner-hero-actions,.pledges){grid-column:1;grid-row:8;margin-top:24px!important}
}
/* Главная: бегущая лента тоже в первом экране (так было задумано и в исходной вёрстке) —
   первый экран короче на её высоту, сжимается фото */
@media (max-width:1023px){
  main :is([data-mobile-first-hero="v1"],#ses-hero):has(+ .facts-marquee){padding-bottom:16px!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero):has(+ .facts-marquee)::before{height:calc(100svh - var(--hero-top) - 12px - 14px - 16px - 52px)}
}
/* Лента: четыре копии вместо двух (на широких экранах в конце круга был пустой хвост); скорость прежняя */
.facts-marquee__track{animation-duration:63s!important}
/* «Уменьшить движение» в настройках: лента стоит. Раньше она раскладывалась столбиком со всеми копиями
   (пункты повторялись). Теперь — одна копия в одну строку, листается пальцем; высота та же */
@media (prefers-reduced-motion:reduce){
  .facts-marquee{overflow-x:auto!important;scrollbar-width:none}
  .facts-marquee__track{flex-wrap:nowrap!important;width:max-content!important}
  .facts-marquee__track>span[aria-hidden]{display:none!important}
}
/* Точка фокуса фото, где главное не в центре кадра */
main [data-hero-page="service-ants"]{--hero-focus:76% 62%}
@media (min-width:480px) and (max-width:1023px){main :is([data-mobile-first-hero="v1"],#ses-hero){--hero-top:112px}}
@media (min-width:768px) and (max-width:1023px){
  main :is([data-mobile-first-hero="v1"],#ses-hero){--hero-top:114px;padding:16px 32px 40px!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-actions--copy{max-width:520px!important}
}

/* Нижняя панель «Позвонить / Заявка» появляется только после того, как кнопки первого экрана ушли вверх.
   На 768–900 px она висела сразу и закрывала первый экран */
@media (min-width:768px) and (max-width:900px){
  .sticky,.sticky-bar,.mobile-call{transition:transform .24s ease,opacity .24s ease}
  .sticky:not(.is-active),.sticky-bar:not(.is-active),.mobile-call:not(.is-active){transform:translateY(110%);opacity:0;pointer-events:none}
}

/* Компьютер: пункты в одну строку, как на клопах */
@media (min-width:1024px){
  main :is([data-mobile-first-hero="v1"],#ses-hero) .pledge-more{display:none}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .pledges{margin-top:22px!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .pledges li{padding-block:9px!important}
  /* Фото на всю высоту первого экрана. На «О компании» стояло «вписать» (contain): снимок 3:2
     в почти квадратном блоке давал тёмные поля сверху и снизу. На Москве Сергей левее центра —
     кадр сдвинут, чтобы лицо не уходило в затемнение у левого края фото. */
  main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media img{object-fit:cover!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero)[data-hero-page="10"] .owner-hero-media img{object-position:50% 50%!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero)[data-hero-page="10"] .owner-hero-media img[src*="sergey-company-portrait-hands"]{object-position:30% 50%!important}
  /* «О компании»: фото продолжается влево до края. Резкий снимок остаётся справа (52%), его левый край
     растворяется; под текстом — размытое и затемнённое продолжение того же снимка (--owner-hero-image
     задаёт сама страница на каждом сайте). Резкой границы посередине нет. */
  main>section.sec[data-hero-page="10"]:first-of-type>.owner-hero-media{left:0!important;right:0!important;width:auto!important;overflow:hidden!important}
  main>section.sec[data-hero-page="10"]:first-of-type>.owner-hero-media::before{content:""!important;display:block!important;position:absolute!important;inset:-48px!important;z-index:0;background:var(--owner-hero-image) 30% 50%/cover no-repeat!important;filter:blur(18px) brightness(.6) saturate(.85);opacity:1!important}
  main>section.sec[data-hero-page="10"]:first-of-type>.owner-hero-media picture{position:absolute!important;top:0!important;bottom:0!important;right:0!important;left:auto!important;z-index:1;display:block!important;width:52%!important;height:100%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
  main>section.sec[data-hero-page="10"]:first-of-type>.owner-hero-media picture img{width:100%!important;height:100%!important}
  main>section.sec[data-hero-page="10"]:first-of-type>.owner-hero-media::after{z-index:2;background:linear-gradient(90deg,rgba(7,18,35,.88) 0%,rgba(7,18,35,.78) 38%,rgba(7,18,35,.4) 52%,rgba(7,18,35,.08) 64%,transparent 76%)!important}
}
/* Тёмные снимки первого экрана (средняя яркость 85–110 из 255 при обычных 125–160):
   поднять тени, не выбивая светлое (пересвет < 0,5%). Телефон и компьютер. */
main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media img[src*="cockroach-under-sink-inspection"]{filter:brightness(1.3) contrast(.92)!important}
main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media img[src*="wasp-nest-eaves"]{filter:brightness(1.4) contrast(.9)!important}
main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media img[src*="mercury-evidence-hero"]{filter:brightness(1.25) contrast(.94)!important}
/* Блохи — только телефон: на компьютере снимок не тёмный, а осветление поднимало фон под текстом на 1024 px */
@media (max-width:1023px){main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media img[src*="sofa-frame-inspection"]{filter:brightness(1.2) contrast(.95)!important}}
main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media img[src*="bedbug-lived-in-evidence"]{filter:brightness(1.25) contrast(.94)!important}
main :is([data-mobile-first-hero="v1"],#ses-hero) .owner-hero-media img[src*="ant-route-kitchen"]{filter:brightness(1.15) contrast(.96)!important}
/* Компьютер от 1280 px: затемнение нужно только под колонкой текста (до 62% ширины).
   Правее, за карточкой цены, оно лишь гасило фото — там оно слабее. Под текстом не светлее прежнего. */
@media (min-width:1280px){
  main>section.sec:first-of-type:not([data-hero-page="10"])>.owner-hero-media::after{background:linear-gradient(90deg,rgba(5,18,37,.80) 0%,rgba(5,18,37,.62) 42%,rgba(5,18,37,.56) 62%,rgba(5,18,37,.10) 74%,rgba(5,18,37,.04) 100%)!important}
  /* «Дезинфекция»: текст занимает меньше половины ширины, справа карточки нет */
  main>section.hero--service:first-of-type>.owner-hero-media::after{background:linear-gradient(96deg,rgba(7,18,35,.80) 0%,rgba(7,18,35,.62) 34%,rgba(7,18,35,.56) 48%,rgba(7,18,35,.10) 64%,rgba(7,18,35,.04) 100%)!important}
}
/* Узкая колонка текста на 1024–1279 px: длинный заголовок шёл в пять строк */
@media (min-width:1024px) and (max-width:1279px){
  main :is([data-mobile-first-hero="v1"],#ses-hero) h1{font-size:clamp(2rem,3.6vw,2.75rem)!important;line-height:1.08!important}
}
/* Невысокое окно (ноутбук, браузер с панелями): заголовок по высоте окна, плотнее отступы */
@media (min-width:1024px) and (max-height:820px){
  main :is([data-mobile-first-hero="v1"],#ses-hero) h1{font-size:clamp(2rem,min(3.4vw,6.4svh),3.25rem)!important;line-height:1.06!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) :is(.lede,.intro){margin-top:12px!important;font-size:1.0625rem!important;line-height:1.5!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .pledges{margin-top:14px!important}
  main :is([data-mobile-first-hero="v1"],#ses-hero) .pledges li{padding-block:7px!important}
}