/* ——— Hero (тёмный, с mesh-анимацией главной в тёмной палитре) ——— */
.svc-hero{
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  min-height:clamp(320px,44vh,500px);
  padding:clamp(132px,19vh,250px) clamp(18px,5vw,72px) clamp(42px,6vh,70px);
  background:radial-gradient(120% 100% at 50% 4%, #172936 0%, #12222E 54%, #0D1922 100%);
  color:var(--iw-on-dark-bright);
}
.svc-hero [data-hero-shader]{ mask-image:radial-gradient(145% 145% at 50% 34%, #000 72%, rgba(0,0,0,0.55) 90%, transparent 100%); -webkit-mask-image:radial-gradient(145% 145% at 50% 34%, #000 72%, rgba(0,0,0,0.55) 90%, transparent 100%); }
.svc-hero [data-hero-shader] canvas{ filter:blur(10px); transform:scale(1.06); }
/* затемнение под текстом: пятно шейдера гуляет по всему герою, скрим держит
   контраст заголовка независимо от фазы анимации */
.svc-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(72deg, rgba(9,18,25,0.94) 0%, rgba(9,18,25,0.74) 30%, rgba(9,18,25,0.22) 56%, rgba(9,18,25,0) 74%);
}
.svc-hero-inner{ position:relative; z-index:1; width:100%; max-width:var(--iw-container); margin:0 auto; }
.svc-hero-inner h1{ font-weight:800; font-size:clamp(34px,4.7vw,68px); line-height:1.0; letter-spacing:-0.035em; color:var(--iw-white); }
.svc-hero-inner p{
  margin-top:clamp(12px,1.2vw,18px);
  font-size:clamp(14px,1.05vw,16px); line-height:1.55; color:var(--iw-on-dark); max-width:70ch;
}

/* ——— Nav поверх тёмного героя (класс ставится из services.js, пока герой под меню) ——— */
.nav-on-dark [data-nav].is-scrolled{
  background:rgba(15,28,38,0.78);
  border-bottom-color:rgba(255,255,255,0.09);
}
.nav-on-dark [data-brand-text] .wordmark{ color:var(--iw-white); }
.nav-on-dark [data-brand-text] .studio{ color:var(--iw-white); }
.nav-on-dark [data-navlinks][data-navtext]{ color:var(--iw-on-dark); }
.nav-on-dark [data-navtext] > a:hover,
.nav-on-dark [data-navtext] > a[aria-current="page"]{ color:var(--iw-on-dark-bright); }
.nav-on-dark [data-navtext] > a::after{ background:var(--iw-on-dark-bright); }
.nav-on-dark [data-navtext] > a[aria-current="page"]::after{ background:var(--iw-accent); }
.nav-on-dark [data-btn="primary"]{
  background:var(--iw-ink); color:#EDF3F7;
  box-shadow:none; border:1px solid rgba(255,255,255,0.10);
}
.nav-on-dark [data-menu-toggle]{ border-color:rgba(255,255,255,0.22); }
.nav-on-dark [data-menu-toggle] span{ background:var(--iw-on-dark-bright); }

/* ——— Услуги: категории + аккордеоны ———
   Структура: .svc-cat = одна категория (data-category), внутри .svc-cat-side
   (счётчик + заголовок) и [data-cat-list] со строками-аккордеонами.

   На узкой раскладке всё идёт в потоке: заголовок над своим списком.
   На широкой левые заголовки не участвуют в раскладке — вместо них один
   закреплённый слот [data-cat-slot] на всю высоту блока, см. ниже. */
.svc-cats{
  background:var(--iw-cloud);
  border-top:1px solid var(--iw-border);
  /* Нижний отступ увеличен под 3D-модель: на широком экране она уезжает вниз
     в этот «карман» (высота модели — clamp(240px,40vh,440px)), поэтому padding
     держим соразмерным ей с запасом, чтобы модель целиком помещалась в белом
     блоке над «Нам доверяют» и не наезжала на серую секцию. */
  padding:clamp(56px,8vh,104px) clamp(18px,5vw,72px) clamp(280px,42vh,480px);
}
.svc-cats-inner{ max-width:var(--iw-container); margin:0 auto; }

.svc-cat{
  display:grid;
  grid-template-columns:minmax(0,0.52fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
  scroll-margin-top:110px;
}
/* Отбивка между категориями живёт на списке, а не на .svc-cat: так граница
   между категориями проходит ровно там, где кончается последняя строка +
   отбивка, и наблюдателю нечего доводить руками. */
.svc-cat-list{ padding-bottom:clamp(73px,11.7vh,146px); } /* отбивка между услугами ×1.3 */
.svc-cat:last-child .svc-cat-list{ padding-bottom:0; }

/* — левая колонка — */
.svc-cat-side{ align-self:stretch; }
.svc-cat-sticky{ display:flex; flex-direction:column; gap:clamp(24px,4vw,56px); }
.svc-cat-meta{
  display:flex; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:var(--iw-eyebrow-track);
}
.svc-cat-num{ color:var(--iw-accent); font-weight:500; }
.svc-cat-total{ color:var(--iw-line); margin-left:7px; }
.svc-cat-meta::after{
  content:""; flex:0 0 auto; width:1px; height:42px;
  margin-left:clamp(18px,2.6vw,40px); background:var(--iw-border);
}
.svc-cat-title{
  font-weight:800; font-size:clamp(30px,4vw,54px); line-height:1.0;
  letter-spacing:-0.035em; color:var(--iw-ink);
}

/* — правая колонка: строки-аккордеоны — */
.svc-row{ border-bottom:1px solid var(--iw-border); }
.svc-row:first-child{ border-top:1px solid var(--iw-border); }

.svc-row-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,2.4vw,32px);
  padding:clamp(14px,1.5vw,18px) 2px;
  background:none; border:0; cursor:pointer; text-align:left;
  color:var(--iw-ink); font-weight:500; font-size:clamp(14.5px,1.05vw,16px);
  letter-spacing:-0.005em; line-height:1.4;
  transition:color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.svc-row-head:hover{ color:var(--iw-accent-press); }
.svc-row-title{ min-width:0; }

.svc-row-icon{ position:relative; flex:0 0 auto; width:13px; height:13px; }
.svc-row-icon::before, .svc-row-icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--iw-line);
  transform:translate(-50%,-50%);
  transition:transform .45s var(--iw-ease), background .3s ease;
}
.svc-row-icon::before{ width:13px; height:1px; }
.svc-row-icon::after{ width:1px; height:13px; }
.svc-row-head:hover .svc-row-icon::before,
.svc-row-head:hover .svc-row-icon::after{ background:var(--iw-accent-press); }
/* «+» → «−»: вертикальная палочка ложится на горизонтальную */
.svc-row-head[aria-expanded="true"] .svc-row-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.svc-row-head[aria-expanded="true"] .svc-row-icon::before,
.svc-row-head[aria-expanded="true"] .svc-row-icon::after{ background:var(--iw-accent); }

/* раскрытие по высоте контента: 0fr → 1fr, без замеров в JS */
.svc-row-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--iw-ease); }
.svc-row-panel-inner{
  overflow:hidden; visibility:hidden; opacity:0;
  transition:visibility .5s var(--iw-ease), opacity .35s ease;
}
.svc-row-head[aria-expanded="true"] + .svc-row-panel{ grid-template-rows:1fr; }
.svc-row-head[aria-expanded="true"] + .svc-row-panel .svc-row-panel-inner{
  visibility:visible; opacity:1; transition-delay:0s, .1s;
}
.svc-row-panel p{
  font-size:14.5px; line-height:1.65; color:var(--iw-body);
  max-width:62ch; padding:0 2px clamp(18px,2vw,26px);
}

/* — один закреплённый слот заголовка —
   Работает только на двухколоночной раскладке. Слот и «дорожка» со всеми
   категориями — два грид-элемента одной строки, поэтому грид-область слота
   ровно по высоте всего блока услуг: заголовок висит под шапкой от первой
   категории до последней и никогда не откалывается.

   Внутри слота лежат копии всех пяти [data-cat-sticky] (их кладёт JS), все
   в одной грид-ячейке — то есть в одной и той же точке, друг над другом.
   Видна та, у которой .is-current; смена — только opacity, ничего не едет
   и ничего не зависит от скролла покадрово. Высоту слота задаёт самая
   высокая копия, поэтому при подмене не дёргается и раскладка.

   Оригинальные заголовки категорий остаются в разметке и в дереве
   доступности (sr-only), но из раскладки уходят — копии в слоте
   aria-hidden, дублей для скринридера нет.

   Два условия, без которых sticky молча превращается в обычный скролл:
   1) top обязан вычисляться. Фолбэк в var() не декоративный: если tokens.css
      придёт из кэша без --iw-nav-h-min, calc() станет невалидным, top упадёт
      в auto — а sticky с top:auto не липнет вовсе.
   2) ни у одного предка секции не должно быть overflow hidden/clip/auto/scroll.
      Поэтому горизонтальный кламп в tokens.css живёт на html, а не на body. */
@media (min-width:861px){
  .svc-cats-inner{
    display:grid;
    grid-template-columns:minmax(0,0.52fr) minmax(0,1fr);
    gap:clamp(24px,4vw,60px);
    align-items:start;
  }
  .svc-cats-track{ min-width:0; }

  .svc-cats-slot{
    position:sticky;
    top:calc(var(--iw-nav-h-min, 62px) + clamp(14px,2.6vh,28px));
    /* align-self:start обязателен: растянутый на всю строку элемент
       залипать не может — ему некуда двигаться внутри своей области */
    align-self:start;
    display:grid;
    pointer-events:none;
  }
  .svc-slot-item{
    grid-area:1 / 1;               /* все копии в одну ячейку — одна позиция */
    opacity:0;
    transition:opacity .45s ease;  /* та же длительность, что у приглушения справа */
  }
  .svc-slot-item.is-current{ opacity:1; }

  /* категория больше не двухколоночная: левую колонку держит слот */
  .svc-cat{ display:block; position:relative; }
  .svc-cat-side{
    position:absolute; width:1px; height:1px; margin:-1px;
    padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }

  /* — приглушение неактивных категорий —
     Отдельных цветов для .is-active не нужно: базовое состояние и есть активное.
     Гасим только .is-dimmed — каждый цвет уходит на шаг светлее по шкале
     нейтральных токенов: body/ink → line, line → border, border → page.
     Гасить теперь нечего слева: в слоте всегда только активная категория,
     а неактивные заголовки из раскладки убраны. Правила — про правый список.
     Классы ставит IntersectionObserver в services.js; правила живут внутри
     этой медиа-вилки, поэтому на сложенной раскладке гашение выключено
     даже если класс почему-то остался на элементе. */
  .svc-row-head, .svc-row-panel p{ transition:color .45s ease; }
  .svc-row{ transition:border-color .45s ease; }

  .svc-cat.is-dimmed .svc-row-head,
  .svc-cat.is-dimmed .svc-row-panel p{ color:var(--iw-line); }
  .svc-cat.is-dimmed .svc-row{ border-color:var(--iw-page); }
  .svc-cat.is-dimmed .svc-row-icon::before,
  .svc-cat.is-dimmed .svc-row-icon::after{ background:var(--iw-border); }

  /* приглушённая категория остаётся рабочей: ховер и раскрытие не гасим */
  .svc-cat.is-dimmed .svc-row-head:hover{ color:var(--iw-accent-press); }
  .svc-cat.is-dimmed .svc-row-head:hover .svc-row-icon::before,
  .svc-cat.is-dimmed .svc-row-head:hover .svc-row-icon::after{ background:var(--iw-accent-press); }
}

/* Сложенная раскладка: слот-подмены нет вовсе — заголовок каждой категории
   идёт в обычном потоке над своим списком, без sticky и без анимации. */
@media (max-width:860px){
  .svc-cats-slot{ display:none; }
  .svc-cat{ grid-template-columns:1fr; gap:clamp(18px,3vw,28px); }
  .svc-cat-sticky{ gap:12px; }
  .svc-cat-meta::after{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .svc-row-panel, .svc-row-panel-inner, .svc-row-icon::before, .svc-row-icon::after{ transition:none; }
}

/* ——— 3D-модель ———
   Широкий экран: зафиксирована у низа вьюпорта, по горизонтали привязана к
   левой колонке (left/width проставляет JS из геометрии слота). Прозрачностью
   управляет JS — фейд у краёв секции. Фон прозрачный, серым НЕ заливаем. */
.svc-3d{
  position:fixed;
  bottom:clamp(12px,2.4vh,32px);   /* немного ниже, ближе к нижнему краю (скрин 1) */
  height:clamp(240px,40vh,440px);
  z-index:2;
  opacity:0;
  pointer-events:none;
  will-change:transform;
  contain:layout paint;
}
.svc-3d canvas{ display:block; width:100%; height:100%; }

/* Узкий экран: модель просто стоит в потоке внизу всех услуг, во всю ширину. */
@media (max-width:860px){
  .svc-3d{
    position:static;
    opacity:1;
    width:100%;
    height:clamp(240px,52vw,360px);
    margin-top:clamp(24px,6vw,44px);
  }
  /* Большой нижний «карман» секции нужен только широкой раскладке: там модель
     зафиксирована и уезжает вниз внутрь него. В потоке карман превращается в
     пустую белую простыню под моделью (~340px), поэтому снимаем его и держим
     обычную нижнюю отбивку, симметричную верхней. */
  .svc-cats{ padding-bottom:clamp(56px,8vh,104px); }
}

/* ——— «Нам доверяют» / сетка логотипов клиентов ——— */
.svc-trust{
  background:var(--iw-surface);
  border-top:1px solid var(--iw-border);
  padding:clamp(56px,8vh,96px) clamp(18px,5vw,72px) clamp(64px,9vh,104px);
}
.svc-trust-inner{ max-width:var(--iw-container); margin:0 auto; }
.svc-trust-title{
  text-align:center; font-weight:800; font-size:clamp(24px,2.7vw,36px);
  line-height:1.05; letter-spacing:-0.02em; color:var(--iw-ink);
  margin-bottom:clamp(30px,4vw,52px);
}
/* Разделители-рамки одним пикселем: фон подложки просвечивает сквозь gap:1px,
   внешняя рамка — border. Так линии между карточками не удваиваются. */
.svc-trust-grid{
  list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--iw-border);
  border:1px solid var(--iw-border);
}
.svc-trust-cell{
  background:var(--iw-white);
  aspect-ratio:1 / 1;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,1.8vw,26px);
}
/* Логотипы обрезаны вплотную к содержимому, поэтому единый оптический размер
   задаётся двумя кэпами: широкие вордмарки упираются в max-width, компактные
   знаки — в max-height. Пропорция логотипа к белому полю — как в макете. */
.svc-trust-cell img{
  width:auto; height:auto; max-width:72%; max-height:40%;
  object-fit:contain; user-select:none; -webkit-user-drag:none;
}
@media (max-width:1000px){ .svc-trust-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .svc-trust-grid{ grid-template-columns:repeat(2,1fr); } }

/* Fallback для браузеров без aspect-ratio (Safari <15, Chrome/Edge <88).
   Там высота ячейки не вычисляется, max-height:40% схлопывается в none, и
   логотипы раздуваются до max-width:72%. Даём ячейке явную высоту и задаём
   потолок логотипа в абсолютных единицах. Современные браузеры это правило
   не видят (@supports = ложь) — их вид не меняется. */
@supports not (aspect-ratio: 1){
  .svc-trust-cell{ min-height:22vw; }
  .svc-trust-cell img{ max-height:128px; }
  @media (min-width:1465px){
    .svc-trust-cell{ min-height:322px; }
  }
  @media (max-width:1000px){
    .svc-trust-cell{ min-height:29vw; }
    .svc-trust-cell img{ max-height:110px; }
  }
  @media (max-width:680px){
    .svc-trust-cell{ min-height:45vw; }
    .svc-trust-cell img{ max-height:17vw; }
  }
}

/* ——— «Наши цены» / прайс-лист ———
   Белая подложка после «Нам доверяют». Заголовок — тот же типоразмер, что и у
   секции доверия; строки повторяют язык услуг: верхняя отбивка 1px, имя в ink,
   цена — моно. Две независимые колонки, на узком экране складываются в одну. */
.svc-prices{
  background:var(--iw-white);
  border-top:1px solid var(--iw-border);
  padding:clamp(56px,8vh,96px) clamp(18px,5vw,72px) clamp(64px,9vh,104px);
}
.svc-prices-inner{ max-width:var(--iw-container); margin:0 auto; }
.svc-prices-head{ margin-bottom:clamp(30px,4vw,52px); }
.svc-prices-title{
  margin:0; font-weight:800; font-size:clamp(24px,2.7vw,36px);
  line-height:1.05; letter-spacing:-0.02em; color:var(--iw-ink);
}
.svc-prices-cols{
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:clamp(24px,5vw,80px);
}
.svc-price-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:clamp(16px,2.4vw,32px);
  padding:clamp(14px,1.5vw,18px) 2px;
  border-top:1px solid var(--iw-border);
}
.svc-price-name{
  color:var(--iw-ink); font-weight:500; font-size:clamp(14.5px,1.05vw,16px);
  letter-spacing:-0.005em; line-height:1.4;
}
.svc-price-value{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  color:var(--iw-body); white-space:nowrap;
}
@media (max-width:680px){ .svc-prices-cols{ grid-template-columns:1fr; } }

/* ——— reassurance stats ——— */
.svc-stats{ background:var(--iw-ink); color:var(--iw-on-dark-bright); padding:clamp(56px,8vh,88px) clamp(18px,5vw,72px); }
.svc-stats-grid{ max-width:var(--iw-container); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(28px,4vw,64px); }
.svc-stat span{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(34px,4.6vw,54px); line-height:0.95; letter-spacing:-0.02em; color:var(--iw-accent); }
.svc-stat p{ font-size:14.5px; color:var(--iw-on-dark); max-width:260px; margin-top:12px; line-height:1.55; }

/* ——— CTA card variant (quote + button, matches projects page) ——— */
.cta-card{ background:var(--iw-surface-dark); border:1px solid #2C3D49; padding:clamp(30px,3.4vw,48px); display:flex; flex-direction:column; gap:26px; }
.cta-card p{ font-size:clamp(19px,2.2vw,26px); font-weight:700; line-height:1.3; letter-spacing:-0.015em; }