/* ——— Design tokens (source of truth, синхронизировано с дизайн-системой Iron Water) ——— */
:root{
  --iw-darkest:#0F1C26; --iw-ink:#142531; --iw-iron:#16202A;
  --iw-surface-dark:#1B2C39; --iw-input-dark:#10202B;
  --iw-accent:#05B2D8; --iw-accent-hover:#2BC4E6; --iw-accent-press:#0490B0;
  --iw-error:#FF9B8A;
  --iw-white:#FFFFFF; --iw-cloud:#FDFDFD; --iw-surface:#F2F4F7; --iw-page:#E9ECF0; --iw-media:#DEE3E9;
  --iw-border:#DCE1E7; --iw-line:#9AA8B4; --iw-label:#56707F; --iw-body:#3C4A57;
  --iw-on-dark:#9DB4C0; --iw-on-dark-bright:#E7EEF3;
  /* Высота фиксированной шапки — постоянная, 62px (см. [data-nav] в components.css).
     --iw-nav-h-min оставлен как синоним: на него завязан верх липкого слота услуг. */
  --iw-nav-h:62px; --iw-nav-h-min:62px;
  --iw-ease:cubic-bezier(.22,1,.36,1);
  /* Единая межбуквенная разрядка для моноширинного eyebrow/label-стиля (IBM Plex Mono).
     Меняется здесь — применяется во всём проекте. */
  --iw-eyebrow-track:0.2px;
  --iw-shadow-soft:0 16px 34px -18px rgba(20,37,49,0.55);
  --iw-shadow-cta:0 20px 40px -22px rgba(20,37,49,0.62);
  --iw-container:1320px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* Горизонтальный кламп стоит на html, а не на body: overflow на корне
   пробрасывается во вьюпорт и не создаёт внутри документа отдельный
   clip/scroll-контейнер. На body он ломал бы position:sticky у потомков
   (левая колонка категорий в услугах). Защита от горизонтального скролла
   при этом та же. */
html{
  scroll-padding-top:90px; background:var(--iw-page);
  overflow-x:clip;
}
/* Плавный скролл ВКЛЮЧАЕТСЯ ТОЛЬКО ПОСЛЕ первого действия пользователя — класс
   ставит shared.js. Причина: Chrome применяет scroll-behavior:smooth и к
   ВОССТАНОВЛЕНИЮ позиции при перезагрузке. Обновляешь страницу, стоя не у верха, —
   и она не появляется на нужном месте, а демонстративно едет туда с нуля (замер на
   блоге: 37 кадров, ~600 мс), по дороге дёргая шапку из высокого состояния в низкое.
   С отложенным включением восстановление мгновенное, а якоря по-прежнему плавные:
   клик по ссылке — это уже действие пользователя. */
html.iw-smooth{ scroll-behavior:smooth; }
body{
  background:var(--iw-page);
  color:var(--iw-ink);
  font-family:'Manrope', sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
button{ font-family:inherit; }
::selection{ background:var(--iw-accent); color:#fff; }
*:focus-visible{ outline:2px solid var(--iw-accent); outline-offset:3px; }

@keyframes iw-cue{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(7px); opacity:1; } }
@keyframes iw-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce){
  html.iw-smooth{ scroll-behavior:auto; }
  .iw-cue{ animation:none !important; }
}

/* scroll-reveal base (JS adds inline transition/opacity/transform, this is just a no-JS fallback) */
[data-reveal]{ }

/* ——— Плавный переход между страницами (нативный View Transitions API) ———
   Браузер сам делает мягкий кроссфейд между двумя реальными снимками страниц —
   без белой вспышки, без JS и без искусственной задержки. Обе страницы на
   светло-сером фоне (--iw-page), поэтому переход выглядит бесшовным.
   Где API не поддерживается (Firefox) — обычная мгновенная навигация. */
@view-transition{ navigation:auto; }

::view-transition-group(root){
  animation-duration:.34s;
  animation-timing-function:var(--iw-ease);
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.34s;
  animation-timing-function:ease;
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none !important; }
}