/* PromPol: блоки сайта Industrial Power (DESIGN.md). Подключать после tokens.css и base.css.
   Здесь шапка, первый экран главной (утверждён владельцем 5 ноября 2026), «Работы и цены» (утверждён 5 ноября), «Наши объекты»
   (3D-карусель, утверждена 6 ноября) и блоки ниже: все объекты и призыв, этапы, гарантия, вопросы, заявка, подвал, страницы групп работ,
   политика данных и 404. Цвета и радиусы только из tokens.css.

   Первый экран: от 768 px текст и факты лежат на сцене, сцена во весь первый экран минус полоса заказчиков;
   до 768 px вертикальный кадр сцены (три крупные машины) стоит между текстом и фактами, его верх уходит в графит под заголовок. */

/* ======================= Шапка (все страницы) ======================= */
.header--dark {
  background: linear-gradient(180deg, rgba(var(--ip-shade-rgb), 0.9), rgba(var(--ip-shade-rgb), 0.74));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ip-text);
  animation: none;
}
.header--dark .header__bar { max-width: none; padding-inline: clamp(16px, 4.4vw, 64px); gap: 12px; }
.header--dark .header__logo { flex: none; margin-right: auto; }
.header--dark .header__logo img { height: 26px; }
.header--dark .header__descriptor { display: none; }
.header--dark a { color: var(--ip-text); }

/* Круглая кнопка звонка (пока номер не помещается в строку) и меню-бургер */
.header__call { display: none; }
.header--dark .header__call,
.header--dark .burger {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ip-line);
  border-radius: 50%;
  background: transparent;
  color: var(--ip-text);
}
.header--dark .header__call:hover, .header--dark .burger:hover { border-color: var(--color-orange); }

/* Кнопка заявки: оранжевая, строгие углы, текст Navy (на оранжевом только Navy) */
.header__cta { display: none; }
.header--dark .header__cta { gap: 10px; border-radius: var(--ip-radius); font-weight: var(--fw-bold); white-space: nowrap; color: var(--color-navy); }
.header--dark .header__cta svg { flex: none; }
/* Политика и 404: только логотип и кнопка заявки, кнопка видна и на телефоне */
.header--dark .header__cta--solo { display: inline-flex; min-height: 44px; margin-left: auto; padding: 0 16px; font-size: 0.875rem; }
/* До 360 px кнопка рядом с логотипом не помещалась (на 320 px прокрутка вбок на 7 px, по-кыргызски на 17 px):
   без стрелки и плотнее, как кнопка «Все объекты» в карусели. От 360 px всё как было */
@media (max-width: 359px) {
  .header--dark .header__cta--solo { padding: 0 12px; font-size: 0.8125rem; }
  .header--dark .header__cta--solo svg { display: none; }
}

/* Телефон с номером: с 1280 px */
.header--dark .v4-phone { display: none; }
.header--dark .v4-phone__num { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--ip-text); }
.header--dark .v4-phone__num svg { flex: none; color: var(--color-orange); }
.header--dark .v4-phone__wa { padding-left: 26px; font-size: 0.75rem; font-weight: var(--fw-medium); color: var(--ip-text-muted); }

/* Переключатель языка на графите: тихая лунка, текущий язык на оранжевой кнопке */
.header--dark .lang { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--ip-line); }
.header--dark .nav .lang a { color: var(--ip-text-muted); }
.header--dark .nav .lang a[aria-current] { color: var(--color-navy); }
.header--dark .lang a[aria-current]::before { background: var(--color-orange); box-shadow: none; }
.header--dark .lang a:focus-visible { outline-color: var(--ip-text); }

/* «Услуги»: раскрывающийся список групп работ */
.nav-drop summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: var(--ip-text);
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary svg { transition: transform var(--dur-fast) var(--ease-out); }
.nav-drop[open] summary svg { transform: rotate(180deg); }
.nav-drop__list { padding: 0 0 var(--space-2) var(--space-4); }
.header--dark .nav .nav-drop__list a { min-height: 44px; border-bottom: 0; font-size: 0.875rem; font-weight: var(--fw-medium); color: var(--ip-text-muted); }
.header--dark .nav .nav-drop__list a:hover { color: var(--ip-text); }

/* До 1180 px меню за бургером: графитовая панель под шапкой */
@media (max-width: 1179px) {
  .header--dark .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    margin: 0;
    padding: var(--space-2) clamp(16px, 4.4vw, 64px) var(--space-5);
    background: var(--ip-graphite);
    border-bottom: 1px solid var(--ip-line);
  }
  .header--dark .nav.is-open { display: block; }
  .header--dark .nav > a,
  .header--dark .nav-drop summary {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--ip-line);
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0;
    color: var(--ip-text);
  }
  .header--dark .nav .nav__phone { display: flex; color: var(--ip-text); }
  .header--dark .nav .lang { margin-top: var(--space-4); }
  .header--dark .burger { display: grid; }
}
@media (min-width: 640px) {
  .header--dark .header__logo img { height: 30px; }
  .header--dark .header__cta { display: inline-flex; min-height: 44px; padding: 0 18px; font-size: 0.875rem; }
}
@media (min-width: 1180px) {
  .header--dark .header__bar { gap: 18px; }
  .header--dark .header__logo { margin-right: 0; }
  .header--dark .header__logo img { height: 32px; }
  .header--dark .burger { display: none; }
  .header--dark .nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.4vw, 28px);
    margin: 0 auto 0 clamp(8px, 1.4vw, 24px);
    background: transparent;
  }
  .header--dark .nav > *, .nav-drop summary svg, .header--dark .v4-phone, .header--dark .header__cta { flex: none; }
  .header--dark .nav > a,
  .header--dark .nav-drop summary { min-height: 44px; font-size: 0.875rem; font-weight: var(--fw-medium); letter-spacing: 0; color: var(--ip-text); }
  .header--dark .nav > a:hover,
  .header--dark .nav-drop summary:hover { color: var(--ip-text); text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .header--dark .nav .lang { margin-left: 4px; }

  /* Список «Услуги» выпадает панелью */
  .nav-drop { position: relative; }
  .nav-drop__list {
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    z-index: 2;
    min-width: 260px;
    padding: 8px;
    background: var(--ip-graphite-2);
    border: 1px solid var(--ip-line);
    border-radius: var(--ip-radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  }
  .header--dark .nav .nav-drop__list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 4px; font-size: 0.9375rem; color: var(--ip-text); }
  .header--dark .nav .nav-drop__list a:hover { background: rgba(255, 255, 255, 0.07); text-decoration: none; }
  .header--dark .header__cta { min-height: 50px; padding: 0 22px; }
}
@media (min-width: 1280px) {
  .header--dark .header__call { display: none; }
  .header--dark .v4-phone { display: block; margin-left: 0; }
}
/* Подпись к логотипу, как в образце: с 1440 px (в кыргызском меню длиннее, подпись с 1560 px) */
@media (min-width: 1440px) {
  .header--dark .header__logo img { height: 36px; }
  .header--dark .header__descriptor {
    display: block;
    flex: none;
    padding-left: 20px;
    border-left: 1px solid var(--ip-line);
    font-size: 0.6875rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ip-text-muted);
  }
}
@media (min-width: 1440px) and (max-width: 1559px) {
  .header--dark .header__descriptor:lang(ky) { display: none; }
}

/* ======================= Первый экран ======================= */
.ip-hero {
  --ip-pad: clamp(16px, 4.4vw, 64px);
  --ip-strip-h: 90px;
  position: relative;
  margin-top: calc(-1 * var(--header-h));   /* сцена уходит под полупрозрачную шапку */
  background: var(--ip-graphite);
  color: var(--ip-text);
}
.ip-hero__main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Телефон: текст, место под технику, факты, ссылка на объекты. Кадр 941×1672 стоит во всю ширину без обрезки, техника в нём
     занимает полосу 34–78 % высоты. Место под технику = (82 % − 33 %) высоты кадра = 87,1vw: верх техники встаёт сразу под кнопку,
     а пол ниже 82 % уходит под факты (отрицательный отступ кадра −32vw). Так вся техника видна в первом экране над панелью звонка */
  grid-template-rows: auto calc(87.1vw + 12px) auto auto;
  padding: calc(var(--header-h) + 16px) 0 var(--space-5);
}
.ip-hero__scene {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: end;
  position: relative;
  z-index: -2;
  display: block;
  width: 100%;
  aspect-ratio: 941 / 1672;
}
.ip-hero__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  /* верх кадра (потолок) приглушён под текстом, чтобы светильники не попадали под строки, и проявляется к технике (34 %);
     пол под фактами уходит в графит */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 22%, #000 34%, #000 79%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 22%, #000 34%, #000 79%, transparent 100%);
}
.ip-hero__copy { grid-row: 1; grid-column: 1; position: relative; padding-inline: var(--ip-pad); }

.ip-hero h1 {
  max-width: 15em;
  font-size: clamp(1.75rem, 0.87rem + 3.62vw, 4.125rem);   /* 28 px на 390, 60 на 1280, 66 на 1440 как в образце */
  font-weight: var(--fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ip-text);
  text-wrap: balance;
}
.ip-hero h1 span { display: block; color: var(--color-orange); }
.ip-hero__lead {
  max-width: 31em;
  margin-top: 14px;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
  line-height: 1.45;
  color: var(--ip-text-muted);
}
.ip-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; margin-top: 22px; }
.ip-hero__cta {
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--ip-radius);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.ip-hero__cta svg { flex: none; }
.ip-hero__more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  color: var(--ip-text);
  text-decoration: none;
}
.ip-hero__ring {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.ip-hero__more:hover { color: var(--ip-text); text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ip-hero__more:hover .ip-hero__ring { border-color: var(--color-orange); background: rgba(242, 107, 33, 0.14); }

/* Нижняя панель: четыре факта */
.ip-facts {
  grid-row: 3;
  grid-column: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
  padding: 20px var(--ip-pad) 0;
  list-style: none;
}
.ip-fact { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ip-fact__icon {
  flex: none;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ip-fact p { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ip-fact strong { font-size: 1rem; font-weight: var(--fw-bold); line-height: 1.15; color: var(--ip-text); }
.ip-fact--num strong { font-size: clamp(1.125rem, 0.1rem + 5.4vw, 1.375rem); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; white-space: nowrap; }
.ip-fact span { font-size: 0.75rem; line-height: 1.4; color: var(--ip-text-muted); }

/* Светлая полоса заказчиков: названия текстом, пока нет файлов логотипов (FACTS.md, раздел 5) */
.ip-clients {
  display: grid;
  gap: 10px;
  padding: 18px var(--ip-pad);
  background: linear-gradient(105deg, var(--color-concrete), var(--ip-concrete) 48%, var(--ip-paper) 70%, var(--color-concrete));
  color: var(--ip-ink);
}
.ip-clients__title { font-size: 0.75rem; font-weight: var(--fw-extrabold); line-height: 1.2; letter-spacing: var(--tracking-heading); text-transform: uppercase; color: var(--ip-ink); }
.ip-clients__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; list-style: none; }
.ip-clients__list li { font-size: 0.8125rem; font-weight: var(--fw-extrabold); line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ip-ink-2); }

/* Подзаголовок: на телефоне короткий, от 768 px полный, как в утверждённом образце */
.ip-hero__lead-long { display: none; }

/* ---------- Телефон (до 768 px): текст компактнее, техника в первом экране ---------- */
@media (max-width: 767px) {
  .ip-hero__scene { margin-bottom: -32vw; }
  .ip-hero__lead { margin-top: 10px; }
  .ip-hero__actions { margin-top: 16px; }
  .ip-hero__cta { min-height: 50px; padding: 0 22px; font-size: 1rem; }
  /* «Смотреть наши объекты» не спорит с главной кнопкой: на телефоне она под фактами, тише и меньше */
  .ip-hero__actions .ip-hero__more { display: none; }
  .ip-hero__more--phone { grid-row: 4; grid-column: 1; justify-self: start; gap: 12px; margin: 14px var(--ip-pad) 0; font-weight: var(--fw-semibold); color: var(--ip-text-muted); }
  .ip-hero__more--phone .ip-hero__ring { width: 36px; height: 36px; border-width: 1.5px; border-color: var(--ip-line); }
  .ip-facts { padding-top: 12px; }
}

/* ---------- От 768 px: текст и факты на сцене, сцена во весь экран ---------- */
@media (min-width: 768px) {
  .ip-hero__main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: max(600px, calc(100svh - var(--ip-strip-h)));
    padding: calc(var(--header-h) + clamp(24px, 4.4vh, 44px)) var(--ip-pad) clamp(14px, 2vh, 22px);
  }
  .ip-hero__scene { position: absolute; inset: 0; align-self: stretch; width: auto; height: auto; aspect-ratio: auto; }
  /* Кадр 8:5 привязан к верху: потолок и свет над заголовком, лишний пол уходит под полосу заказчиков.
     Подъём техники (решение владельца 7 ноября 2026): кадр без изменения масштаба поднят на --ip-scene-lift, чтобы машины
     не прятались под фактами. От ~1500 px 100 px; уже меньше (30 px на 1280, около 55 на 1366, около 80 на 1440): там ручки
     машин встают под ссылку «Смотреть наши объекты». max(100%, …) не пускает кадр выше его нижнего края: пустой полосы снизу нет,
     а когда кадр вписан по высоте (планшет, высокие окна), подъёма нет вовсе.
     На высоких широких экранах (1920×1080 и больше) кадр срезается сильнее, и его сдвигаем вверх ещё на 35 % запаса (ниже) */
  .ip-hero { --ip-scene-lift: clamp(30px, 31.5vw - 375px, 100px); }
  .ip-hero__scene img { object-position: 50% max(100%, calc(-1 * var(--ip-scene-lift))); -webkit-mask-image: none; mask-image: none; }
  /* Затемнения для читаемости: под шапкой, слева под текстом и внизу под фактами. Сама сцена не затемнена */
  .ip-hero__main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(0deg, rgba(var(--ip-shade-rgb), 0.92) 0, rgba(var(--ip-shade-rgb), 0.8) 9%, rgba(var(--ip-shade-rgb), 0.42) 17%, rgba(var(--ip-shade-rgb), 0) 30%),
      linear-gradient(90deg, rgba(var(--ip-shade-rgb), 0.5) 0, rgba(var(--ip-shade-rgb), 0.22) 36%, rgba(var(--ip-shade-rgb), 0) 62%),
      linear-gradient(180deg, rgba(var(--ip-shade-rgb), 0.35) 0, rgba(var(--ip-shade-rgb), 0) 24%);
  }
  .ip-hero__copy { padding-inline: 0; }
  .ip-hero__lead { margin-top: 14px; }
  .ip-hero__lead-long { display: inline; }
  .ip-hero__lead-short, .ip-hero__more--phone { display: none; }
  .ip-hero__actions { margin-top: 26px; }
  .ip-facts { padding: 0; gap: 18px 0; }
  .ip-fact { flex-direction: row; align-items: center; gap: 18px; padding: 4px 24px; border-left: 1px solid var(--ip-line); }
  .ip-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ip-fact__icon { width: 44px; height: 44px; stroke-width: 1.9; }
  .ip-fact strong { font-size: 1.1875rem; }
  .ip-fact--num strong { font-size: clamp(1.5rem, 0.75rem + 1.25vw, 1.9375rem); }
  .ip-fact span { font-size: 0.8125rem; }

  .ip-clients { display: flex; align-items: center; gap: clamp(20px, 3vw, 42px); min-height: var(--ip-strip-h); padding-block: 16px; }
  .ip-clients__title { flex: none; padding-right: clamp(20px, 3vw, 40px); border-right: 1px solid var(--ip-strip-line); font-size: 1.0625rem; }
  .ip-clients__list { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 28px; }
  .ip-clients__list li { font-size: clamp(0.875rem, 0.7rem + 0.4vw, 1.0625rem); white-space: nowrap; }
}

/* ---------- От 1100 px: четыре факта в строку, как в образце ---------- */
@media (min-width: 1100px) {
  .ip-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ip-fact strong { letter-spacing: -0.01em; }
  .ip-fact { padding: 6px clamp(16px, 1.9vw, 27px); min-height: 64px; }
  .ip-fact:nth-child(odd) { padding-left: clamp(16px, 1.9vw, 27px); border-left: 1px solid var(--ip-line); }
  .ip-fact:first-child { padding-left: 0; border-left: 0; }
  .ip-fact__icon { width: 52px; height: 52px; }
}

@media (min-width: 768px) and (min-aspect-ratio: 17/10) and (min-height: 950px) {
  .ip-hero__scene img { object-position: 50% max(100%, calc(35% - var(--ip-scene-lift))); }
}

/* ---------- Низкие широкие экраны: меньше воздуха, чтобы факты не наезжали на машины ---------- */
@media (min-width: 768px) and (max-height: 820px) {
  .ip-hero__main { padding-top: calc(var(--header-h) + clamp(20px, 3.4vh, 32px)); }
  .ip-hero h1 { font-size: clamp(1.875rem, 0.6rem + 3.4vw, 3.5rem); }
  .ip-hero__actions { margin-top: 22px; }
}

/* ---------- Появление: текст поднимается один раз при загрузке. Сцена стоит сразу, без задержки ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ip-hero__copy > *, .ip-facts { animation: ip-rise 0.9s var(--ease-out) both; }
  .ip-hero__lead { animation-delay: 0.08s; }
  .ip-hero__actions { animation-delay: 0.16s; }
  .ip-facts { animation-delay: 0.26s; }
}
@keyframes ip-rise { from { opacity: 0; transform: translateY(16px); } }

/* ======================= Работы и цены (DESIGN.md, 7.2) =======================
   Светлый бетонный фон, монументальный заголовок, три факта справа, четыре графитовые карточки групп работ и полоса калькулятора.
   Калькулятор прежний: классы v4-calc* и id нужны скрипту страницы, здесь оформление полосы поверх основы калькулятора из base.css */
.ip-works {
  --ip-pad: clamp(16px, 4.4vw, 64px);
  position: relative;
  padding: clamp(44px, 5.5vw, 76px) var(--ip-pad) clamp(52px, 6vw, 92px);
  background-color: var(--ip-concrete);
  /* бетон: бесшовная плитка фактуры и мягкий свет сверху слева, чтобы плитка не читалась повтором */
  background-image: radial-gradient(ellipse 70% 60% at 18% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%), url("assets/works/concrete-light.webp");
  background-size: auto, 512px 512px;
  color: var(--ip-ink-2);
  scroll-margin-top: var(--header-h);
}

/* Шапка блока */
.ip-works__head { display: grid; gap: 26px; align-items: end; }
.ip-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8125rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange-text-on-light);
}
.ip-eyebrow::before { content: ""; flex: none; width: 52px; height: 3px; background: var(--color-orange); }
.ip-works h2 {
  margin-top: 14px;
  font-size: clamp(2.25rem, 1.1rem + 3.3vw, 4.125rem);   /* 36 px на телефоне, 66 px на 1440 */
  font-weight: var(--fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ip-ink);
}
.ip-works__lead { max-width: 40em; margin-top: 16px; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem); line-height: 1.5; color: var(--ip-ink-2); }
.ip-works__badges { display: grid; gap: 14px; list-style: none; }
.ip-works__badges li { display: flex; align-items: center; gap: 14px; font-size: 0.9375rem; font-weight: var(--fw-bold); line-height: 1.3; color: var(--ip-ink); }
.ip-works__badges svg { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--color-orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Карточки групп работ: вся карточка ведёт на страницу группы (ссылка в заголовке растянута на карточку) */
.ip-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: clamp(28px, 3.4vw, 48px); list-style: none; }
.ip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--ip-card-radius);
  background: var(--ip-graphite-2);
  box-shadow: var(--ip-card-shadow);
  color: var(--ip-text-muted);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ip-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ip-graphite); }
/* Точки кадрирования из комплекта картинок: 50 % 60 %, у шлифовки 63 % 55 %, чтобы не срезать рукоять машины */
.ip-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transition: transform 0.8s var(--ease-out); }
.ip-card--remont .ip-card__media img { object-position: 63% 55%; }
.ip-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 20px; }
.ip-card__title { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); font-weight: var(--fw-extrabold); line-height: 1.15; letter-spacing: -0.015em; color: var(--ip-text); }
.ip-card__title a { color: inherit; text-decoration: none; }
.ip-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ip-card__title a:focus-visible { outline: none; }
.ip-card:focus-within { outline: 3px solid var(--color-orange); outline-offset: 3px; }
.ip-card__text { margin: 10px 0 20px; font-size: 0.875rem; line-height: 1.5; color: var(--ip-text-muted); }
.ip-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ip-line); }
.ip-card__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.1; color: var(--ip-text); }
.ip-card__price strong { font-size: clamp(1.5rem, 1.15rem + 0.8vw, 1.75rem); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; white-space: nowrap; color: var(--color-orange); }
.ip-card__price strong + span { font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--color-orange); }
/* Над ценой работа, к которой она относится: у бетона «Затирка бетона», чтобы 250 не читалось как цена пола под ключ */
.ip-card__price .ip-card__for { flex-basis: 100%; margin-bottom: 6px; font-size: 0.8125rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--ip-text); }
.ip-card__arrow { flex: none; margin-bottom: 2px; color: var(--color-orange); transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .ip-card:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(17, 18, 20, 0.12), 0 30px 60px rgba(17, 18, 20, 0.24); }
  .ip-card:hover .ip-card__media img { transform: scale(1.04); }
  .ip-card:hover .ip-card__arrow { transform: translateX(4px); }
}

/* Полоса калькулятора */
.ip-calc.v4-calc {
  position: relative;
  display: grid;
  gap: 24px;
  margin-top: clamp(36px, 4.5vw, 64px);
  padding: 28px 20px;
  border-radius: var(--ip-card-radius);
  background: var(--ip-graphite);
  box-shadow: var(--ip-card-shadow);
  color: var(--ip-text-muted);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.ip-calc:focus { outline: none; }
.ip-calc__intro { display: flex; align-items: flex-start; gap: 18px; }
.ip-calc__icon { flex: none; width: 44px; height: 44px; fill: none; stroke: var(--color-orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ip-calc.v4-calc h3 { margin: 0; font-size: clamp(1.5rem, 1.05rem + 1.05vw, 1.875rem); font-weight: var(--fw-extrabold); line-height: 1.1; letter-spacing: -0.02em; color: var(--ip-text); }
.ip-calc .v4-calc__note { margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--ip-text-muted); }
.ip-calc__factors { margin-top: 6px; font-size: 0.8125rem; line-height: 1.5; color: var(--color-concrete); }
.ip-calc__fields { display: grid; gap: 14px; align-content: center; }
.ip-calc .v4-calc__field { margin-top: 0; }
.ip-calc .v4-calc__field input,
.ip-calc .v4-calc__field select { min-height: 52px; border-color: var(--ip-line); border-radius: var(--ip-radius); background-color: var(--ip-graphite-2); }
.ip-calc__result { display: grid; gap: 12px; align-content: center; }
.ip-calc .v4-calc__out { margin-top: 0; padding-top: 0; border-top: 0; }
.ip-calc .v4-calc__sum { font-size: clamp(1.75rem, 1.25rem + 1.3vw, 2.375rem); color: var(--color-orange); }
.ip-calc .v4-calc__sum.is-empty { font-size: 1.125rem; color: var(--ip-text-muted); }
.ip-calc .v4-calc__small { font-size: 1rem; }
.ip-calc__wa { gap: 10px; width: 100%; min-height: 54px; padding: 0 18px; border-radius: var(--ip-radius); font-size: 1rem; font-weight: var(--fw-bold); white-space: nowrap; }
.ip-calc__wa svg { flex: none; }
.ip-calc .ip-calc__send {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  width: auto;
  min-height: 44px;
  margin-top: 0;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--ip-text);
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.ip-calc .ip-calc__send:hover { text-decoration-color: var(--ip-text); }

/* Телефон: фото ниже, чтобы четыре карточки не растягивали блок; значок калькулятора над заголовком, текст во всю ширину */
@media (max-width: 639px) {
  .ip-card__media { aspect-ratio: 2 / 1; }
  .ip-card__body { padding: 20px 20px 18px; }
  .ip-card__text { margin-bottom: 16px; }
  .ip-calc__intro { flex-direction: column; gap: 14px; }
  .ip-calc__icon { width: 38px; height: 38px; }
  /* Мелкие подписи на узких телефонах (320–375 px): не меньше 13–14 px */
  .ip-card__price .ip-card__for { font-size: 0.875rem; }
  .ip-calc__factors { font-size: 0.875rem; }
  .ip-calc .v4-calc__field label, .ip-calc .v4-calc__label { font-size: 0.8125rem; letter-spacing: 0.08em; }
  .ip-calc__fields { gap: 16px; }
  .ip-calc .v4-calc__field { gap: 8px; }
}
@media (min-width: 640px) {
  .ip-works__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ip-works__badges li { padding: 0 18px; border-left: 1px solid var(--ip-hair); font-size: 0.875rem; }
  .ip-works__badges li:first-child { padding-left: 0; border-left: 0; }
  .ip-works__badges svg { width: 34px; height: 34px; }
  .ip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-card__title { min-height: 2.3em; }   /* названия в одну и две строки: описания и цены соседних карточек стоят на одной линии */
  .ip-calc.v4-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; padding: 34px 32px; }
  .ip-calc__intro { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .ip-works__head { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
  .ip-works__badges { grid-template-columns: repeat(3, auto); margin-bottom: 14px; }
  .ip-works__badges li { padding: 0 clamp(18px, 1.8vw, 28px); font-size: 0.9375rem; }
  .ip-works__badges svg { width: 40px; height: 40px; }
  .ip-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.3vw, 20px); }
  .ip-card__body { padding: 24px 26px 22px; }
  .ip-calc.v4-calc { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; padding: 36px 0; }
  .ip-calc.v4-calc > * { padding: 0 clamp(22px, 2.2vw, 36px); }
  .ip-calc__intro { grid-column: auto; }
  .ip-calc__fields, .ip-calc__result { border-left: 1px solid var(--ip-line); }
}
@media (prefers-reduced-motion: reduce) {
  .ip-card, .ip-card__media img, .ip-card__arrow { transition: none; }
  .ip-card:hover, .ip-card:hover .ip-card__media img, .ip-card:hover .ip-card__arrow { transform: none; }
}

/* ======================= Наши объекты (DESIGN.md, 7.3) =======================
   Перенос утверждённого интерактивного прототипа владельца (6 ноября 2026): размеры, перспектива, радиусы, затемнения и подписи
   из его CSS, цвета через токены графита. Движение задаёт objects.js. Два режима:
   - живой (есть JS и нет prefers-reduced-motion): секция высотой 100svh + 55svh на каждый переход (на телефоне 61,7svh),
     сцена закреплена, карточки стоят друг на друге в центре и расходятся по дуге;
   - статичный (без JS или при reduced motion): сцена не закреплена, карточки стоят в ряд и листаются вбок.
   Шапка сайта лежит поверх сцены, поэтому верх текста отступает на её высоту */
.ip-objects { --n: 4; --o-pad: clamp(34px, 5.1vw, 94px); position: relative; isolation: isolate; background: var(--ip-graphite); color: var(--ip-text); }
.ip-objects__stage { position: relative; overflow: hidden; background: var(--ip-graphite); }
.ip-objects__photo {
  position: absolute;
  inset: 0;
  background: url("assets/objects/stage-1440.webp") 54% 53% / cover no-repeat;
  background-image: image-set(url("assets/objects/stage-1440.avif") type("image/avif"), url("assets/objects/stage-1440.webp") type("image/webp"));
  filter: brightness(0.42) saturate(0.58);
  transform: scale(1.035);
}
.ip-objects__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--ip-shade-rgb), 0.96) 0%, rgba(var(--ip-shade-rgb), 0.93) 27%, rgba(var(--ip-shade-rgb), 0.67) 48%, rgba(var(--ip-shade-rgb), 0.38) 75%, rgba(var(--ip-shade-rgb), 0.6) 100%),
    linear-gradient(0deg, rgba(var(--ip-shade-rgb), 0.91) 0%, rgba(var(--ip-shade-rgb), 0) 38%, rgba(var(--ip-shade-rgb), 0.49) 100%);
}
.ip-objects__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 73% 58%, rgba(var(--ip-shade-rgb), 0) 10%, rgba(var(--ip-shade-rgb), 0.6) 80%); }
.ip-objects__marker { position: absolute; z-index: 8; top: 0; left: 0; width: 24%; height: 4px; background: var(--color-orange); }
.ip-objects__frame { position: relative; z-index: 2; width: min(1440px, 100%); margin: 0 auto; padding: calc(var(--header-h) + 48px) var(--o-pad) 56px; }

/* Текст слева */
.ip-objects__intro { position: relative; z-index: 7; max-width: 470px; }
.ip-objects__eyebrow { display: flex; align-items: center; gap: 14px; font-size: 0.75rem; font-weight: var(--fw-extrabold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-orange-text-on-dark); }
.ip-objects__eyebrow::before { content: ""; flex: none; width: 35px; height: 2px; background: var(--color-orange); }
.ip-objects h2 {
  max-width: 500px;
  margin: 25px 0 19px;
  font-size: clamp(2.125rem, 0.6rem + 3vw, 3.5rem);   /* Montserrat шире шрифта прототипа: три строки, как в нём, при 52 px на 1440 */
  font-weight: var(--fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ip-text);
}
.ip-objects h2 span { color: var(--color-orange); }
.ip-objects__summary { max-width: 380px; margin: 0 0 36px; font-size: clamp(0.875rem, 0.55rem + 0.75vw, 1.0625rem); line-height: 1.65; color: var(--ip-text-muted); }
.ip-objects__meta { display: none; }
.ip-objects__index { margin-bottom: 12px; font-size: 0.6875rem; font-weight: var(--fw-extrabold); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-orange-text-on-dark); }
.ip-objects__name { min-height: 2.26em; max-width: 410px; margin: 0 0 12px; font-size: clamp(1.4375rem, 0.4rem + 1.6vw, 2rem); font-weight: var(--fw-bold); line-height: 1.13; letter-spacing: -0.02em; color: var(--ip-text); }
.ip-objects__rule { max-width: 320px; height: 1px; margin: 16px 0; background: rgba(255, 255, 255, 0.2); }
.ip-objects__record { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.8125rem; line-height: 1.6; }
.ip-objects__record dt { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.ip-objects__record dd { font-weight: var(--fw-semibold); color: var(--ip-text); }
.ip-objects__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 4px;
  padding: 0 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--ip-radius);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  color: var(--ip-text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.ip-objects__all svg { flex: none; color: var(--color-orange); }
.ip-objects__all:hover { border-color: var(--color-orange); background: rgba(242, 107, 33, 0.12); }
.ip-objects__all-short { display: none; }
.ip-objects__note { max-width: 350px; margin-top: 18px; font-size: 0.75rem; line-height: 1.55; color: rgba(255, 255, 255, 0.5); }
.ip-objects :focus-visible { outline: 3px solid var(--color-orange-hover); outline-offset: 4px; }

/* Карточки объектов */
.ip-objects__scene { position: relative; z-index: 3; margin-top: 36px; }
.ip-objects__platform { display: none; }
.ip-objects__stack { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.ip-ocard {
  position: relative;
  flex: none;
  display: block;
  width: min(78vw, 340px);
  height: 440px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 18px;
  background: var(--ip-graphite-2);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.6);
  font: inherit;
  text-align: left;
  color: var(--ip-text);
  cursor: pointer;
  scroll-snap-align: start;
}
.ip-ocard.is-active { border-color: var(--color-orange); box-shadow: 0 30px 65px rgba(0, 0, 0, 0.85); }
.ip-ocard__photo, .ip-ocard__bottom { display: block; }
.ip-ocard__photo { position: absolute; inset: 0; background: var(--ip-graphite-2); }
.ip-ocard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.83) contrast(1.06) saturate(0.65); }
.ip-ocard__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--ip-shade-rgb), 0.98), rgba(var(--ip-shade-rgb), 0.82) 26%, rgba(var(--ip-shade-rgb), 0) 65%, rgba(var(--ip-shade-rgb), 0.4) 100%); }
.ip-ocard__top { position: absolute; top: 21px; left: 24px; right: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ip-ocard__num { font-size: 2.375rem; font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.06em; color: var(--ip-text); }
.ip-ocard.is-active .ip-ocard__num { color: var(--color-orange); }
.ip-ocard__pill { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.29); border-radius: 100px; background: rgba(var(--ip-shade-rgb), 0.73); font-size: 0.5625rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--ip-text-muted); }
.ip-ocard__bottom { position: absolute; left: 24px; right: 24px; bottom: 25px; }
.ip-ocard__type, .ip-ocard__name, .ip-ocard__line { display: block; }
.ip-ocard__type { margin-bottom: 10px; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ip-text-muted); }
.ip-ocard__name { max-width: 330px; margin-bottom: 14px; font-size: clamp(1.375rem, 0.85rem + 1.1vw, 1.9375rem); font-weight: var(--fw-extrabold); line-height: 1.08; letter-spacing: -0.03em; }
.ip-ocard__line { width: 100%; height: 1px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.42); }
.ip-ocard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.6875rem; color: var(--ip-text-muted); }
.ip-ocard__foot b { font-size: 1.125rem; font-weight: var(--fw-extrabold); white-space: nowrap; color: var(--color-orange); }

/* Низ сцены: подсказка, точки, счётчик (только в живом режиме) */
.ip-objects__bottom { display: none; }
.ip-objects__cue { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 0.6875rem; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ip-text-muted); }
.ip-objects__cue-icon { display: grid; place-items: center; width: 20px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px; font-size: 1.125rem; color: var(--color-orange); }
.ip-objects__cue-mob { display: none; }
.ip-objects__dots { display: flex; align-items: center; gap: 0; }
/* Точка 7 px, а нажимается область 24×24 */
.ip-objects__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ip-objects__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.33); transition: background-color 0.2s, transform 0.2s; }
.ip-objects__dot.is-active::before { background: var(--color-orange); transform: scale(1.4); }
.ip-objects__count { min-width: 56px; font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-align: right; color: var(--ip-text-muted); }
.ip-objects__count strong { color: var(--color-orange); }
.ip-objects__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Живой режим: закреплённая сцена и 3D-дуга (как в прототипе) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .ip-objects { height: calc(100svh + (var(--n) - 1) * 55svh); }
  html.js .ip-objects__stage { position: sticky; top: 0; height: 100svh; min-height: 600px; }
  html.js .ip-objects__frame { height: 100%; padding: 0; }
  html.js .ip-objects__intro { position: absolute; left: var(--o-pad); top: max(clamp(74px, 13svh, 142px), calc(var(--header-h) + 30px)); width: 37%; }
  html.js .ip-objects__meta { display: block; }
  html.js .ip-objects__scene { position: absolute; right: -2%; top: 7%; width: 68%; height: 86%; margin: 0; perspective: 1250px; transform-style: preserve-3d; pointer-events: none; }
  html.js .ip-objects__stack { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; transform-style: preserve-3d; pointer-events: none; }
  html.js .ip-ocard {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(300px, 31vw, 456px);
    height: clamp(400px, 60vh, 565px);
    max-height: calc(100% - 95px);
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: hidden;
    pointer-events: auto;
    will-change: transform, opacity;
  }
  html.js .ip-objects__platform {
    display: block;
    position: absolute;
    z-index: 0;
    left: 17%;
    right: 11%;
    bottom: 2%;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0) 70%);
    filter: blur(12px);
    transform: rotateX(70deg);
  }
  html.js .ip-objects__bottom {
    position: absolute;
    z-index: 9;
    left: var(--o-pad);
    right: var(--o-pad);
    bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
  /* Ноутбуки и планшеты в альбомной ориентации: как в прототипе от 761 до 1050 px */
  @media (max-width: 1050px) {
    html.js .ip-objects { --o-pad: 32px; }
    html.js .ip-objects__intro { width: 42%; }
    html.js .ip-objects__scene { right: -10%; width: 67%; }
    html.js .ip-ocard { width: 330px; height: 465px; }
    html.js .ip-objects__name { font-size: 1.5rem; }
  }
}

/* ---------- До 900 px: вертикальная дуга и раскладка телефона из прототипа ---------- */
@media (max-width: 900px) {
  .ip-objects__photo { background-image: url("assets/objects/stage-960.webp"); background-image: image-set(url("assets/objects/stage-960.avif") type("image/avif"), url("assets/objects/stage-960.webp") type("image/webp")); background-position: center; filter: brightness(0.29) saturate(0.6); }
  .ip-objects__stage::before { background: linear-gradient(180deg, rgba(var(--ip-shade-rgb), 0.96) 0%, rgba(var(--ip-shade-rgb), 0.91) 18%, rgba(var(--ip-shade-rgb), 0.64) 57%, rgba(var(--ip-shade-rgb), 0.86) 100%); }
  .ip-objects__marker { width: 30%; }
  .ip-objects { --o-pad: 23px; }
  .ip-objects__frame { padding: calc(var(--header-h) + 22px) var(--o-pad) 40px; }
  .ip-objects__intro { max-width: none; }
  .ip-objects__eyebrow { gap: 10px; font-size: 0.6875rem; }
  .ip-objects__eyebrow::before { width: 27px; }
  .ip-objects h2 { max-width: 370px; margin: 13px 0 8px; font-size: clamp(1.75rem, 0.4rem + 6.8vw, 2.375rem); line-height: 1.04; letter-spacing: -0.04em; }
  .ip-objects__summary { max-width: 335px; margin: 0; font-size: 0.8125rem; line-height: 1.5; }
  .ip-objects__summary-note, .ip-objects__note { display: none; }
  /* «Все объекты»: компактная кнопка справа на строке надзаголовка, над карточками, не мешает листать */
  .ip-objects__all { position: absolute; top: -9px; right: 0; min-height: 32px; margin: 0; padding: 0 12px; gap: 8px; font-size: 0.75rem; }
  .ip-objects__all::after { content: ""; position: absolute; inset: -6px -4px; }
  .ip-objects__all-long { display: none; }
  .ip-objects__all-short { display: inline; }
  .ip-ocard { width: min(calc(100vw - 66px), 370px); height: clamp(255px, 39svh, 380px); border-radius: 15px; }
  .ip-ocard__photo::after { background: linear-gradient(0deg, rgba(var(--ip-shade-rgb), 0.96), rgba(var(--ip-shade-rgb), 0.82) 28%, rgba(var(--ip-shade-rgb), 0) 64%, rgba(var(--ip-shade-rgb), 0.49)); }
  .ip-ocard__top { top: 14px; left: 17px; right: 17px; }
  .ip-ocard__num { font-size: 1.9375rem; }
  .ip-ocard__pill { padding: 6px 8px; font-size: 0.5625rem; }
  .ip-ocard__bottom { left: 18px; right: 18px; bottom: 16px; }
  .ip-ocard__type { margin-bottom: 6px; font-size: 0.625rem; }
  .ip-ocard__name { max-width: 290px; margin-bottom: 11px; font-size: clamp(1.25rem, 0.5rem + 4vw, 1.6875rem); }
  .ip-ocard__line { margin-bottom: 9px; }
  .ip-ocard__foot { font-size: 0.6875rem; }
  .ip-ocard__foot b { font-size: 1rem; }
  .ip-objects__cue { gap: 7px; font-size: 0.625rem; letter-spacing: 0.045em; }
  .ip-objects__cue-icon { width: 16px; height: 24px; border-radius: 8px; font-size: 0.8125rem; }
  .ip-objects__cue-desk { display: none; }
  .ip-objects__cue-mob { display: inline; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js .ip-objects { height: calc(100svh + (var(--n) - 1) * 61.7svh); }
  html.js .ip-objects__stage { min-height: 0; }
  html.js .ip-objects__intro { left: var(--o-pad); right: var(--o-pad); top: calc(var(--header-h) + 22px); width: auto; }
  html.js .ip-objects__meta { display: none; }
  html.js .ip-objects__scene {
    top: calc(var(--header-h) + 150px + 3svh);
    bottom: 75px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    perspective: 1000px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 87%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 87%, transparent);
  }
  html.js .ip-objects__stack { transform: translateY(-52px); }
  html.js .ip-ocard { width: min(calc(100vw - 66px), 370px); height: clamp(255px, 39svh, 380px); max-height: none; }
  html.js .ip-objects__platform { display: none; }
  html.js .ip-objects__bottom { left: 24px; right: 24px; bottom: 20px; padding-top: 11px; }
}
@media (max-width: 480px) {
  /* Надзаголовок и «Все объекты» на одной строке: кнопка без стрелки, буквы надзаголовка плотнее */
  .ip-objects__eyebrow { letter-spacing: 0.14em; }
  .ip-objects__all { padding: 0 10px; }
  .ip-objects__all svg { display: none; }
}
@media (max-width: 359px) {
  .ip-objects { --o-pad: 17px; }
  /* Надзаголовок и кнопка «Все объекты» делят одну строку: на самых узких телефонах без декоративной черты и плотнее */
  .ip-objects__eyebrow { font-size: 0.625rem; letter-spacing: 0.12em; }
  .ip-objects__eyebrow::before { display: none; }
  .ip-objects h2 { margin: 9px 0 6px; font-size: 1.6875rem; }
  .ip-objects__summary { max-width: 285px; font-size: 0.78125rem; }
  .ip-ocard { width: calc(100vw - 54px); height: clamp(235px, 38svh, 290px); }
  .ip-objects__cue { font-size: 0.5625rem; }
}
@media (max-width: 359px) and (prefers-reduced-motion: no-preference) {
  html.js .ip-objects__scene { top: calc(var(--header-h) + 160px); bottom: 62px; }
  html.js .ip-ocard { width: calc(100vw - 54px); height: clamp(235px, 38svh, 290px); }
  html.js .ip-objects__bottom { left: 16px; right: 16px; bottom: 14px; }
}
/* Старые браузеры без svh: те же высоты в vh */
@supports not (height: 1svh) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .ip-objects { height: calc(100vh + (var(--n) - 1) * 55vh); }
    html.js .ip-objects__stage { height: 100vh; }
  }
}

/* ======================= Общие детали блоков (DESIGN.md, «Блоки ниже карусели») =======================
   Ритм страниц: графитовые и светлые блоки чередуются. Светлый блок лежит на той же бетонной фактуре, что «Работы и цены»,
   графитовый на --ip-graphite с мягким светом. Поля по краям --ip-pad, как у первого экрана и «Работ и цен».
   Оранжевый мелкий текст: на светлом --color-orange-text-on-light, на графите --color-orange-text-on-dark */
.ip-section {
  --ip-pad: clamp(16px, 4.4vw, 64px);
  position: relative;
  padding: clamp(56px, 7vw, 112px) var(--ip-pad);
  scroll-margin-top: var(--header-h);
}
.ip-section--light {
  background-color: var(--ip-concrete);
  background-image: radial-gradient(ellipse 70% 60% at 18% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%), url("assets/works/concrete-light.webp");
  background-size: auto, 512px 512px;
  color: var(--ip-ink-2);
}
.ip-section--dark {
  background-color: var(--ip-graphite);
  background-image: radial-gradient(ellipse 60% 55% at 88% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%);
  color: var(--ip-text-muted);
}
.ip-section--dark h2, .ip-section--dark h3 { color: var(--ip-text); }
.on-dark .ip-eyebrow { color: var(--color-orange-text-on-dark); }

/* Шапка блока: надзаголовок, крупный заголовок, справа короткое пояснение */
.ip-head { display: grid; gap: 18px 48px; align-items: end; margin-bottom: clamp(28px, 3.4vw, 48px); }
.ip-title {
  margin-top: 14px;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 3.75rem);   /* 32 px на телефоне, 60 px на 1440: на ступень тише «Работ и цен» */
  font-weight: var(--fw-extrabold);
  line-height: 1.04;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}
.ip-title span { color: var(--color-orange-text-on-light); }
.on-dark .ip-title span { color: var(--color-orange); }
.ip-head__aside { max-width: 34em; font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem); line-height: 1.6; }
.ip-head__aside--strong { font-weight: var(--fw-semibold); color: var(--ip-ink); }
.on-dark .ip-head__aside--strong { color: var(--ip-text); }
@media (min-width: 1100px) {
  .ip-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); }
  .ip-head__aside { justify-self: end; padding-bottom: 8px; }
}
/* Длинные кыргызские слова («Металлдаштырылган») на экранах 320 px переносятся, а не вылезают из карточки */
.ip-step h3, .ip-kind h3, .ip-offer h3, .ip-doc h3, .ip-group h3, .ip-band__title, .ip-req__title, .ip-next__title { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 359px) { .ip-kind h3, .ip-step h3, .ip-offer h3 { overflow-wrap: anywhere; } }
/* Ссылки внутри абзацев (ответы, согласие, политика): строкой, без высоты кнопки */
p .link, li .link, label .link { display: inline; min-height: 0; }

/* Оранжевая метка сверху слева, как у карусели объектов: полоса призыва, «Что будет дальше», подвал */
.ip-band::before, .ip-next::before, .ip-footer__marker { content: ""; position: absolute; top: 0; left: 0; width: 24%; height: 4px; background: var(--color-orange); }

/* ======================= Все объекты и призыв (главная, светлый бетон) ======================= */
.ip-list .ip-title { max-width: 15em; }
.ip-fold__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border: 1.5px solid var(--ip-ink);
  border-radius: var(--ip-radius);
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--ip-ink);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ip-fold__btn::-webkit-details-marker { display: none; }
.ip-fold__btn svg { flex: none; transition: transform var(--dur-base) var(--ease-out); }
.ip-fold[open] .ip-fold__btn svg { transform: rotate(180deg); }
.ip-fold__btn:hover { background: var(--ip-ink); color: var(--ip-text); }
.ip-fold__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 28px; }
.ip-group { padding: 22px 24px 8px; border: 1px solid var(--ip-hair); border-radius: var(--ip-card-radius); background: var(--ip-panel); }
.ip-group h3 { padding-bottom: 14px; border-bottom: 2px solid var(--color-orange); font-size: 1.0625rem; font-weight: var(--fw-extrabold); letter-spacing: -0.01em; color: var(--ip-ink); }
.ip-group li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ip-hair); font-size: 0.9375rem; line-height: 1.4; color: var(--ip-ink-2); }
.ip-group li:last-child { border-bottom: 0; }
.ip-group__area { flex: none; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ip-ink); }

.ip-band {
  position: relative;
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(30px, 3.4vw, 48px) clamp(22px, 3.4vw, 56px);
  overflow: hidden;
  border-radius: var(--ip-card-radius);
  background: radial-gradient(ellipse 55% 140% at 100% 50%, rgba(242, 107, 33, 0.16), rgba(242, 107, 33, 0) 70%), var(--ip-graphite);
  box-shadow: var(--ip-card-shadow);
  color: var(--ip-text-muted);
}
.ip-band__title { font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.375rem); font-weight: var(--fw-extrabold); line-height: 1.1; letter-spacing: -0.02em; color: var(--ip-text); }
.ip-band p { max-width: 40em; margin-top: 10px; font-size: 1rem; line-height: 1.55; }
.ip-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639px) { .ip-band__actions .btn { flex: 1 1 100%; } }
@media (min-width: 1000px) { .ip-band { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }

/* ======================= Этапы (главная, графит; «Как делается» на страницах групп, светлый бетон) =======================
   Карточка этапа: номер с линией, название, текст. На графите карточки графитовые, на бетоне светлые.
   На телефоне номер слева, текст справа: восемь этапов не растягивают страницу */
.ip-steps {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, rgba(255, 255, 255, 0) 1px),
    radial-gradient(ellipse 60% 55% at 88% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%);
  background-size: 72px 72px, 72px 72px, auto;
}
.ip-steps__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ip-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 18px;
  padding: 20px;
  border: 1px solid var(--ip-hair);
  border-radius: var(--ip-card-radius);
  background: var(--ip-panel);
  color: var(--ip-ink-2);
}
.ip-step__n { grid-row: span 2; font-size: 1.75rem; font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-orange-text-on-light); }
.ip-step h3 { font-size: 1.125rem; font-weight: var(--fw-extrabold); line-height: 1.25; letter-spacing: -0.01em; color: var(--ip-ink); }
.ip-step p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; }
.ip-step__icon { grid-row: span 2; width: 34px; height: 34px; fill: none; stroke: var(--color-orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.on-dark .ip-step { border-color: rgba(255, 255, 255, 0.1); background: var(--ip-graphite-2); color: var(--ip-text-muted); }
.on-dark .ip-step__n { color: var(--color-orange); }
.on-dark .ip-step h3 { color: var(--ip-text); }
.ip-step--qc { border: 1.5px solid var(--color-orange); }
.on-dark .ip-step--qc { border-color: var(--color-orange); background: linear-gradient(160deg, rgba(242, 107, 33, 0.18), rgba(242, 107, 33, 0.03) 70%), var(--ip-graphite-2); }
@media (min-width: 640px) {
  .ip-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ip-step { display: flex; flex-direction: column; padding: 26px 26px 28px; }
  .ip-step__n { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-size: 2.5rem; }
  .ip-step__n::after { content: ""; flex: 1; height: 1px; background: var(--ip-hair); }
  .on-dark .ip-step__n::after { background: var(--ip-line); }
  .ip-step__icon { width: 44px; height: 44px; margin-bottom: 20px; }
  .ip-step p { margin-top: 10px; }
}
@media (min-width: 1100px) {
  .ip-steps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .ip-step { min-height: 236px; }
}

/* ======================= Гарантия и документы (главная, светлый бетон) =======================
   Графитовая карточка, из неё выглядывает лист документа (вёрстка, без картинки) со знаком PromPol оттиском */
.ip-docs__grid { display: grid; gap: 16px; }
.ip-doc { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ip-card-radius); background: var(--ip-graphite-2); box-shadow: var(--ip-card-shadow); color: var(--ip-text-muted); }
.ip-doc__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 168px;
  margin: 30px 30px 0;
  padding: 22px 24px;
  border-radius: 6px 6px 0 0;
  background: var(--ip-panel);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-base) var(--ease-out);
}
.ip-doc__name { font-size: 0.75rem; font-weight: var(--fw-extrabold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ip-ink); }
.ip-doc__lines { display: grid; gap: 9px; }
.ip-doc__lines i { display: block; height: 5px; border-radius: 3px; background: rgba(17, 18, 20, 0.12); }
.ip-doc__lines i:nth-child(3n + 2) { width: 82%; }
.ip-doc__lines i:nth-child(3n) { width: 64%; }
.ip-doc__stamp { position: absolute; right: 18px; bottom: 16px; display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid var(--color-orange); border-radius: 50%; background: var(--ip-panel); transform: rotate(-12deg); }
.ip-doc__stamp img { width: 28px; height: 28px; }
.ip-doc__body { flex: 1; padding: 22px 26px 26px; border-top: 3px solid var(--color-orange); }
.ip-doc h3 { font-size: 1.25rem; font-weight: var(--fw-extrabold); line-height: 1.2; letter-spacing: -0.01em; color: var(--ip-text); }
.ip-doc p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; }
@media (hover: hover) { .ip-doc:hover .ip-doc__sheet { transform: translateY(-6px); } }
/* Планшет: лист слева, текст справа, три карточки друг под другом; с 1000 px три в ряд */
@media (min-width: 600px) and (max-width: 999px) {
  .ip-doc { flex-direction: row; }
  .ip-doc__sheet { flex: none; width: 220px; margin: 26px 0 0 26px; }
  .ip-doc__body { display: flex; flex-direction: column; justify-content: center; border-top: 0; border-left: 3px solid var(--color-orange); margin-left: 26px; }
}
@media (min-width: 1000px) { .ip-docs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .ip-doc__sheet { transition: none; } .ip-doc:hover .ip-doc__sheet { transform: none; } }

/* ======================= Вопросы и ответы (графит) ======================= */
.ip-faq { --faq-line: var(--ip-line); }
.ip-faq__grid { display: grid; gap: 28px; }
.ip-faq__wa { margin-top: 26px; }
.ip-faq .faq summary { color: var(--ip-text); }
.ip-faq .faq summary:hover { color: var(--color-orange-text-on-dark); }
.ip-faq .faq details p { color: var(--ip-text-muted); }
@media (min-width: 1000px) {
  .ip-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .ip-faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* Другие группы работ под вопросами (страницы групп): тот же графит, отделён линией, карточки как в «Работах и ценах» */
.ip-faq + .ip-related { padding-top: 0; }
.ip-related .ip-head { padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--ip-line); }
.ip-related .ip-cards { margin-top: 0; }
.ip-related .ip-card { border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; }
@media (min-width: 900px) { .ip-related .ip-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ======================= Заявка (светлый бетон) =======================
   Слоган крупно, будто вдавлен в бетон (контур не годится: у вариативного Montserrat внутри букв видны линии),
   светлая панель формы и колонка: «Что будет дальше», отзыв (главная), контакты */
.ip-req__slogan {
  margin-bottom: clamp(28px, 3.4vw, 48px);
  font-size: clamp(2.5rem, 0.2rem + 6.2vw, 7rem);
  font-weight: var(--fw-extrabold);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: rgba(17, 18, 20, 0.08);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(17, 18, 20, 0.06);
}
.ip-req__grid { display: grid; gap: 18px; }
.ip-req__panel { padding: clamp(24px, 3.4vw, 48px); border: 1px solid var(--ip-hair); border-radius: var(--ip-card-radius); background: var(--ip-panel); box-shadow: var(--ip-card-shadow); }
.ip-req__title { margin-top: 14px; font-size: clamp(1.875rem, 1.1rem + 2.2vw, 3rem); font-weight: var(--fw-extrabold); line-height: 1.06; letter-spacing: -0.03em; color: var(--ip-ink); }
.ip-req__lead { max-width: 44em; margin-top: 14px; font-size: 1rem; line-height: 1.6; }

.ip-form { margin-top: 28px; }
.ip-form__fields { display: grid; gap: 18px; }
.ip-form__row { display: grid; gap: 18px; }
.ip-form__more summary { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: var(--fw-bold); line-height: 1.3; color: var(--ip-ink); }
.ip-form__more summary::-webkit-details-marker { display: none; }
.ip-form__more summary:hover { text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ip-form__plus { position: relative; flex: none; width: 26px; height: 26px; border: 1.5px solid var(--ip-ink); border-radius: 50%; }
.ip-form__plus::before, .ip-form__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--ip-ink); transition: transform var(--dur-base) var(--ease-out); }
.ip-form__plus::after { transform: rotate(90deg); }
.ip-form__more[open] .ip-form__plus::after { transform: rotate(0deg); }
.ip-form__more-body { display: grid; gap: 18px; margin-top: 12px; }
.ip-form__files { font-size: 0.875rem; line-height: 1.5; color: var(--ip-ink-muted); }
.ip-check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; }
.ip-check input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--color-orange); cursor: pointer; }
.ip-check label { font-size: 0.875rem; font-weight: var(--fw-regular); line-height: 1.5; color: var(--ip-ink-2); cursor: pointer; }
.ip-check .field__error { grid-column: 2; }
.ip-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ip-form__check:empty { display: none; }
.ip-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ip-form__send .btn { min-height: 56px; padding: 0 32px; font-size: 1.0625rem; }
.ip-form__status { font-size: 0.9375rem; font-weight: var(--fw-semibold); color: var(--ip-ink-2); }
.ip-form__status:empty { display: none; }
.ip-form__note { font-size: 0.875rem; line-height: 1.5; color: var(--ip-ink-muted); }
.ip-form__fail { display: grid; gap: 8px; padding: 20px 22px; border-left: 4px solid var(--color-error); border-radius: var(--ip-radius); background: rgba(180, 35, 24, 0.06); font-size: 0.9375rem; line-height: 1.55; color: var(--ip-ink-2); }
.ip-form__fail-title { font-size: 1.0625rem; font-weight: var(--fw-extrabold); color: var(--color-error); }
.ip-form__fallback { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ip-form__done { display: grid; justify-items: start; gap: 12px; }
.ip-form__done-icon { width: 56px; height: 56px; fill: none; stroke: var(--color-success); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ip-form__done-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: var(--fw-extrabold); line-height: 1.15; letter-spacing: -0.02em; color: var(--ip-ink); }
.ip-form__done .btn { margin-top: 8px; }
@media (max-width: 639px) {
  .ip-form__send .btn, .ip-form__fallback .btn { flex: 1 1 100%; }
}
@media (min-width: 640px) {
  .ip-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* Площадь короткая, а у вида работ длинные пункты («Пока не знаю, нужна консультация») */
  .ip-form__row + .ip-form__row { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}
.ip-form .field input, .ip-form .field select, .ip-form .field textarea { font-size: 1rem; }

.ip-req__aside { display: grid; gap: 18px; align-content: start; }
.ip-next, .ip-contact { position: relative; overflow: hidden; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--ip-card-radius); box-shadow: var(--ip-card-shadow); color: var(--ip-text-muted); }
.ip-next { background: var(--ip-graphite); }
.ip-next__title { font-size: 1.375rem; font-weight: var(--fw-extrabold); line-height: 1.2; letter-spacing: -0.02em; color: var(--ip-text); }
.ip-next__list { margin-top: 18px; }
.ip-next__list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--ip-line); font-size: 0.9375rem; line-height: 1.5; color: var(--ip-text); }
.ip-next__list li:last-child { padding-bottom: 0; }
.ip-next__n { font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; color: var(--color-orange); }

.ip-review { padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--ip-hair); border-radius: var(--ip-card-radius); background: var(--ip-panel); }
.ip-review__caption { font-size: 0.8125rem; font-weight: var(--fw-extrabold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-orange-text-on-light); }
.ip-review__mark { width: 34px; height: 26px; margin-top: 16px; fill: var(--color-orange); }
.ip-review__quote { margin-top: 12px; }
.ip-review__quote p { font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.5; color: var(--ip-ink); }
.ip-review__source { display: grid; gap: 2px; margin-top: 16px; font-size: 0.875rem; line-height: 1.45; color: var(--ip-ink-muted); }
.ip-review__source strong { font-size: 0.9375rem; color: var(--ip-ink); }

.ip-contact { background: var(--ip-graphite-2); scroll-margin-top: calc(var(--header-h) + 16px); }
.ip-contact__title { font-size: 0.8125rem; font-weight: var(--fw-extrabold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-orange-text-on-dark); }
.ip-contact__phone { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: clamp(1.375rem, 1.1rem + 1vw, 2.125rem); font-weight: var(--fw-extrabold); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ip-text); text-decoration: none; }
.ip-contact__phone:hover { color: var(--color-orange-text-on-dark); }
.ip-contact__hours { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; }
.ip-contact__wa { width: 100%; margin-top: 18px; }
.ip-contact__regions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ip-line); font-size: 0.875rem; line-height: 1.5; }
@media (min-width: 1100px) {
  .ip-req__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: start; }
}

/* ======================= Подвал (графит, на всех страницах) ======================= */
.ip-footer { --ip-pad: clamp(16px, 4.4vw, 64px); position: relative; padding: clamp(48px, 6vw, 88px) var(--ip-pad) 28px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: var(--ip-graphite); color: var(--ip-text-muted); }
.ip-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.ip-footer__brand, .ip-footer__col:last-child { grid-column: 1 / -1; }
.ip-footer__logo { display: inline-block; }
.ip-footer__logo img { width: auto; height: 44px; }
.ip-footer .lang { display: flex; width: max-content; margin-top: 24px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--ip-line); }
.ip-footer .lang a { color: var(--ip-text-muted); }
.ip-footer .lang a[aria-current] { color: var(--color-navy); }
.ip-footer .lang a[aria-current]::before { background: var(--color-orange); }
.ip-footer__col h2 { font-size: 0.8125rem; font-weight: var(--fw-extrabold); line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-orange-text-on-dark); }
.ip-footer__col ul { display: grid; margin-top: 12px; }
.ip-footer__col a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.9375rem; font-weight: var(--fw-medium); line-height: 1.3; color: var(--ip-text); text-decoration: none; }
.ip-footer__col a:hover, .ip-footer__col a[aria-current] { text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ip-footer .ip-footer__phone { font-size: 1.125rem; font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip-footer__note { max-width: 22em; padding-top: 8px; font-size: 0.875rem; line-height: 1.5; }
.ip-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(36px, 4.5vw, 64px); padding-top: 22px; border-top: 1px solid var(--ip-line); font-size: 0.8125rem; line-height: 1.6; color: var(--ip-text-dim); }
.ip-footer__bottom a { color: var(--ip-text-muted); text-decoration: underline; text-decoration-color: var(--color-orange); text-underline-offset: 4px; }
.ip-footer__bottom a:hover { color: var(--ip-text); }
@media (min-width: 640px) {
  .ip-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ip-footer__col:last-child { grid-column: auto; }
}
@media (min-width: 1100px) {
  .ip-footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
  .ip-footer__brand { grid-column: auto; }
}

/* ======================= Страница группы работ: первый экран (графит) =======================
   Путь по сайту, заголовок, подзаголовок, цена «от» с названием работы и две кнопки; справа визуал группы из «Работ и цен».
   Шапка на этих страницах стоит над экраном, а не поверх него */
.ip-sv-hero {
  --ip-pad: clamp(16px, 4.4vw, 64px);
  position: relative;
  display: grid;
  gap: 32px;
  align-items: center;
  padding: clamp(16px, 3vw, 48px) var(--ip-pad) clamp(48px, 6vw, 96px);
  overflow: hidden;
  background-color: var(--ip-graphite);
  background-image: radial-gradient(ellipse 55% 70% at 100% 45%, rgba(242, 107, 33, 0.1), rgba(242, 107, 33, 0) 70%), radial-gradient(ellipse 50% 60% at 0% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%);
  color: var(--ip-text-muted);
}
.ip-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 0.8125rem; font-weight: var(--fw-semibold); letter-spacing: 0.04em; color: var(--ip-text-dim); }
.ip-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ip-text-muted); text-decoration: none; }
.ip-crumbs a:hover { color: var(--ip-text); text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ip-crumbs span[aria-hidden] { color: var(--color-orange); }
.ip-crumbs [aria-current] { color: var(--ip-text); }
.ip-sv-hero h1 { margin-top: 10px; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); font-weight: var(--fw-extrabold); line-height: 1.02; letter-spacing: -0.035em; color: var(--ip-text); overflow-wrap: break-word; }
.ip-sv-hero__lead { max-width: 36em; margin-top: 18px; font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem); line-height: 1.6; }
.ip-sv-hero__price { max-width: 30em; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ip-line); }
.ip-sv-hero__price .ip-card__price strong { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.375rem); }
.ip-sv-hero__note { margin-top: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--ip-text-dim); }
.ip-sv-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ip-sv-hero__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ip-card-radius); background: var(--ip-graphite-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.ip-sv-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.ip-sv-hero__media--remont img { object-position: 63% 55%; }
@media (max-width: 639px) {
  .ip-sv-hero__actions .btn { flex: 1 1 100%; }
  .ip-sv-hero__media { aspect-ratio: 16 / 11; }
}
@media (min-width: 1000px) {
  .ip-sv-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 4.5vw, 80px); }
}

/* Услуги и цены группы (светлый бетон): графитовые карточки, внизу цена «от», как на карточках главной */
.ip-offers__grid { display: grid; gap: 16px; }
.ip-offer { position: relative; display: flex; flex-direction: column; padding: 28px 26px 22px; border-radius: var(--ip-card-radius); background: var(--ip-graphite-2); box-shadow: var(--ip-card-shadow); color: var(--ip-text-muted); }
.ip-offer::before { content: ""; position: absolute; top: 0; left: 26px; width: 48px; height: 3px; background: var(--color-orange); }
.ip-offer h3 { font-size: 1.25rem; font-weight: var(--fw-extrabold); line-height: 1.2; letter-spacing: -0.015em; color: var(--ip-text); }
.ip-offer__text { margin-top: 10px; font-size: 0.9375rem; line-height: 1.55; }
.ip-offer__fit { margin: 14px 0 20px; font-size: 0.875rem; line-height: 1.5; }
.ip-offer__fit span { display: block; margin-bottom: 4px; font-size: 0.8125rem; font-weight: var(--fw-extrabold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-orange-text-on-dark); }
.ip-offer__price { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ip-line); }
.ip-offers__more { margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 700px) { .ip-offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ip-offers__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } }

/* Виды (графит) */
.ip-kinds__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ip-kind { padding: 26px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--ip-card-radius); background: var(--ip-graphite-2); }
.ip-kind .ip-step__n { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: 2.25rem; }
.ip-kind .ip-step__n::after { content: ""; flex: 1; height: 1px; background: var(--ip-line); }
.ip-kind h3 { font-size: 1.375rem; font-weight: var(--fw-extrabold); line-height: 1.2; letter-spacing: -0.015em; }
.ip-kind p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.55; }
@media (min-width: 760px) { .ip-kinds__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } }

/* ======================= Политика данных ======================= */
.ip-page-head {
  --ip-pad: clamp(16px, 4.4vw, 64px);
  padding: clamp(40px, 6vw, 96px) var(--ip-pad) clamp(40px, 5vw, 72px);
  background-color: var(--ip-graphite);
  background-image: radial-gradient(ellipse 55% 70% at 100% 45%, rgba(242, 107, 33, 0.1), rgba(242, 107, 33, 0) 70%);
  color: var(--ip-text-muted);
}
.ip-page-head h1 { max-width: 18em; margin-top: 14px; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; color: var(--ip-text); overflow-wrap: break-word; }
.ip-page-head__lead { max-width: 44em; margin-top: 16px; font-size: 1.0625rem; line-height: 1.6; }
.ip-page-head__date { margin-top: 12px; font-size: 0.875rem; color: var(--ip-text-dim); }
.ip-policy__body { max-width: 780px; }
.ip-policy section + section { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--ip-hair); }
.ip-policy h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: var(--fw-extrabold); line-height: 1.25; letter-spacing: -0.015em; }
.ip-policy h2 span { flex: none; font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--color-orange-text-on-light); }
.ip-policy p, .ip-policy ul { margin-top: 12px; font-size: 1rem; line-height: 1.7; }
.ip-policy ul { display: grid; gap: 8px; }
.ip-policy li { position: relative; padding-left: 22px; }
.ip-policy li::before { content: ""; position: absolute; left: 2px; top: 0.8em; width: 8px; height: 2px; background: var(--color-orange); }
.ip-policy__home { margin-top: clamp(40px, 5vw, 64px); }

/* ======================= Страница 404 ======================= */
.ip-404 {
  --ip-pad: clamp(16px, 4.4vw, 64px);
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: 64px var(--ip-pad) 72px;
  overflow: hidden;
  background: var(--ip-graphite);
  color: var(--ip-text-muted);
}
.ip-404__scene { position: absolute; inset: 0; }
.ip-404__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; filter: brightness(0.55) saturate(0.7); }
.ip-404::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--ip-shade-rgb), 0.96) 0%, rgba(var(--ip-shade-rgb), 0.86) 42%, rgba(var(--ip-shade-rgb), 0.3) 100%), linear-gradient(0deg, rgba(var(--ip-shade-rgb), 0.8), rgba(var(--ip-shade-rgb), 0) 40%);
}
.ip-404__copy { position: relative; z-index: 1; max-width: 640px; }
.ip-404__num { font-size: clamp(6rem, 3rem + 14vw, 13rem); font-weight: var(--fw-extrabold); line-height: 0.85; letter-spacing: -0.05em; color: var(--color-orange); }
.ip-404 h1 { margin-top: 24px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ip-text); }
.ip-404__text { max-width: 36em; margin-top: 16px; font-size: 1.0625rem; line-height: 1.6; }
.ip-404__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ip-404__phone { margin-top: 22px; font-size: 0.9375rem; }
.ip-404__phone a { font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ip-text); text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .ip-404 { align-items: end; }
  .ip-404::after { background: linear-gradient(0deg, rgba(var(--ip-shade-rgb), 0.97) 0%, rgba(var(--ip-shade-rgb), 0.88) 55%, rgba(var(--ip-shade-rgb), 0.45) 100%); }
  .ip-404__actions .btn { flex: 1 1 100%; }
}