/* ---------- Услуги генподряда ---------- */
.services-page { --svc-dark: #2b2a29; }
body.services-page { background: #fff; }

/* Первый экран: тёмный с фирменным паттерном */
.svc-hero { position: relative; isolation: isolate; background: var(--svc-dark); color: #f7f4ef; padding-bottom: calc(clamp(64px, 6vw, 96px) + 44px); }
.svc-hero::before {
  content: ""; position: absolute; inset: calc(-1 * var(--header-h, 80px)) 0 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Ccircle cx='0' cy='0' r='98.84'/%3E%3Ccircle cx='200' cy='0' r='98.84'/%3E%3Ccircle cx='0' cy='200' r='98.84'/%3E%3Ccircle cx='200' cy='200' r='98.84'/%3E%3Ccircle cx='100' cy='100' r='98.84'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 10.42vw 10.42vw; background-position: center top; opacity: .1;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 50%, transparent 82%), linear-gradient(#000 60%, transparent);
          mask-image: linear-gradient(100deg, transparent 18%, #000 50%, transparent 82%), linear-gradient(#000 60%, transparent);
  -webkit-mask-size: 200% 100%, 100% 100%; mask-size: 200% 100%, 100% 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: objects-sheen 9s ease-in-out infinite alternate;
}
@keyframes objects-sheen { from { -webkit-mask-position: 100% 0, 0 0; mask-position: 100% 0, 0 0; } to { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .svc-hero::before { animation: none; } }
.services-page .site-header:not(.is-stuck),
.services-page .site-header:not(.is-stuck) .site-header__inner { background: transparent; }
.svc-hero .page-hero__title { color: #fff; margin-top: 24px; }
.svc-hero .page-hero__lead { color: rgb(247 244 239 / 72%); max-width: 860px; margin-top: 32px; }
.svc-hero .breadcrumbs, .svc-hero .breadcrumbs a { color: rgb(247 244 239 / 60%); }
.svc-hero .breadcrumbs [aria-current] { color: rgb(247 244 239 / 85%); }
.svc-hero .breadcrumbs a:hover { color: #fff; }
.svc-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.svc-hero__actions > * { min-width: 220px; justify-content: center; }
.svc-hero__line { color: #fff; border-color: rgb(255 255 255 / 38%); }
.svc-hero__line:hover { color: #fff; border-color: rgb(255 255 255 / 70%); }

/* Якоря разделов: заходят на тёмный фон, прилипают под шапкой */
.svc-nav { position: sticky; top: calc(var(--header-h-stuck, 80px) + 12px); z-index: 20; margin-top: -44px; }
.svc-nav__row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px;
  border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 6%);
}
.svc-nav__item {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px;
  font-size: 15px; line-height: 1.3; color: var(--color-ink); text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.svc-nav__item span { font-family: var(--font-display); font-size: 14px; color: var(--color-accent); }
.svc-nav__item:hover { background: var(--color-sand); }
.svc-nav__item.is-active { background: var(--color-accent); color: #fff; }
.svc-nav__item.is-active span { color: rgb(255 255 255 / 75%); }

/* Разделы */
.svc { padding-block: clamp(80px, 7vw, 128px); background: #fff; scroll-margin-top: calc(var(--header-h-stuck, 80px) + 80px); }
.svc--alt { background: var(--color-sand); }
.svc:first-of-type, .svc-nav + .svc { padding-top: clamp(96px, 8vw, 144px); }
.svc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.svc__intro { min-width: 0; position: sticky; top: calc(var(--header-h-stuck, 80px) + 120px); }
.svc__num { display: block; font-family: var(--font-display); font-size: clamp(56px, 5vw, 88px); line-height: 1; color: var(--color-accent); }
.svc__title { margin-top: 24px; }
.svc__intro .p-large { margin-top: 24px; color: var(--color-text); }
.svc__intro .p-large + .p-large { margin-top: 16px; }
.svc__cta { margin-top: 40px; }
.svc__photo { position: relative; display: block; margin: 0; aspect-ratio: 3 / 2; border-radius: 24px; overflow: hidden; background: #ece8e3; }
.svc__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 40px 0 0; padding: 0; list-style: none; }
.svc__list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--p-size); line-height: 1.5; color: var(--color-ink); }
.svc__list .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--color-accent); }

@media (max-width: 1100px) {
  .svc-nav__row { display: flex; overflow-x: auto; scrollbar-width: none; }
  .svc-nav__row::-webkit-scrollbar { display: none; }
  .svc-nav__item { flex: none; }
}
@media (max-width: 900px) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc__intro { position: static; }
  .svc__list { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .svc-hero__actions > * { flex: 1 1 100%; }
  .svc-nav { margin-top: -36px; top: calc(var(--header-h-stuck, 64px) + 8px); }
  .svc-nav__item { padding: 10px 14px; font-size: 14px; }
  .svc__photo { border-radius: 16px; }
  .svc__cta { width: 100%; justify-content: center; }
}
/* Шапка над тёмным первым экраном — тёмная с первого кадра */
.services-page .site-header:not(.is-toned) .site-header__inner { background: transparent; }
.services-page .site-header:not(.is-stuck) .nav__link,
.services-page .site-header:not(.is-stuck) .site-header__phone,
.services-page .site-header:not(.is-stuck) .site-header__phone-btn,
.services-page .site-header:not(.is-stuck) .burger,
.services-page .site-header:not(.is-stuck) .site-header__cta { color: #fff; }
.services-page .site-header:not(.is-stuck) .site-header__cta { border-color: rgb(255 255 255 / 38%); }
.services-page .site-header:not(.is-stuck) .logo__desc { color: rgb(255 255 255 / 72%); }
body.services-page { background: var(--svc-dark); }
.services-page main > section:not(.svc-hero), .services-page .svc-nav { background-clip: padding-box; }
.services-page main { background: #fff; }
/* Правки: иконки вместо номеров, список слева, фото вертикальное, навигация выше */
.svc-nav { top: 12px; }
.svc-nav__item span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.svc-nav__item span .icon { width: 22px; height: 22px; color: var(--color-accent); }
.svc-nav__item.is-active span .icon { color: #fff; }
.svc__num { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--color-accent); color: var(--color-accent); }
.svc__num .icon { width: 32px; height: 32px; }
.svc__title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; word-break: normal; }
.svc__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.svc__intro { position: static; }
.svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.svc__body { position: relative; }
.svc__photo { position: sticky; top: 104px; aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc__photo { position: static; aspect-ratio: 4 / 3; }
  .svc__body { order: -1; }
  .svc__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .svc-nav { top: 8px; } .svc__num { width: 56px; height: 56px; } .svc__num .icon { width: 26px; height: 26px; } }
/* фото без прилипания; разделы в шахматном порядке */
.svc__photo { position: static; }
.svc__grid { align-items: center; }
@media (min-width: 901px) {
  .svc--alt .svc__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .svc--alt .svc__body { order: -1; }
}
/* навигация прячется у блока с формой */
.svc-nav { transition: opacity .25s ease, transform .25s ease; }
.svc-nav.is-hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }
/* иконка без кружка; верх фото — по верху заголовка */
.svc__num { width: 40px; height: 40px; border: 0; border-radius: 0; place-items: start; }
.svc__num .icon { width: 40px; height: 40px; }
.svc__grid { align-items: start; }
@media (min-width: 901px) { .svc__photo { margin-top: 64px; } }
@media (max-width: 640px) { .svc__num, .svc__num .icon { width: 32px; height: 32px; } }
.svc__title { margin-top: 0; }
@media (min-width: 901px) { .svc__photo { margin-top: 0; } }
/* компактная навигация при прилипании */
.svc-nav__row, .svc-nav__item { transition: padding .25s ease, background-color .2s ease, color .2s ease; }
.svc-nav.is-stuck .svc-nav__row { padding: 4px; }
.svc-nav.is-stuck .svc-nav__item { padding: 8px 14px; font-size: 14px; }
.svc-nav.is-stuck .svc-nav__item span, .svc-nav.is-stuck .svc-nav__item span .icon { width: 20px; height: 20px; }
/* компактный режим — чуть свободнее */
.svc-nav.is-stuck .svc-nav__row { padding: 5px; }
.svc-nav.is-stuck .svc-nav__item { padding: 11px 16px; font-size: 15px; }
.svc-nav.is-stuck .svc-nav__item span, .svc-nav.is-stuck .svc-nav__item span .icon { width: 22px; height: 22px; }
/* когда при прокрутке вверх выезжает шапка — навигация съезжает под неё */
.svc-nav { transition: top .3s var(--ease, ease), opacity .25s ease, transform .25s ease; }
body:has(.site-header.is-stuck.is-shown) .svc-nav { top: calc(var(--header-h-stuck, 80px) + 12px); }
.svc__photo[data-parallax] > img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
/* вторичная кнопка на тёмном — как в hero страниц объектов */
.svc-hero .svc-hero__line { color: #fff; border-color: var(--color-border-dark); }
.svc-hero .svc-hero__line:hover, .svc-hero .svc-hero__line:focus-visible { color: #fff; border-color: rgb(255 255 255 / 50%); }

/* Фото разделов: скругление как у карточек сайта (16px). Параллаксное фото
   внутри имеет translate/will-change, и overflow: hidden с border-radius
   в Chromium/Яндексе его не обрезает — углы выходили прямыми. clip-path
   обрезает надёжно, isolation отделяет фото в собственный слой. */
.svc__photo { border-radius: 16px; overflow: hidden; isolation: isolate; clip-path: inset(0 round 16px); }