/* =====================================================================
   Версия 2 — по референсу Heron AI: слоновая кость, карандашная иллюстрация,
   сигнальный оранжевый для выносок и сделанной работы. Подключается после styles.css первой версии
   и содержит только отличия.
   ===================================================================== */
:root {
  --paper: #F3EDDF;      /* слоновая кость — как бумага иллюстрации */
  --paper-2: #F9F5EB;    /* карточки и поля */
  --line: #D8CFBC;
  --ink: #1C1D1F;
  --ink-2: #5C5850;
  --water: #3E78A0;
  --amber: #DD4A1A;      /* сигнальный оранжевый: выноски, сделанная работа, кнопки */
  --amber-d: #B83A10;
  --dark: #1C1D1F;
  --dark-2: #2A2B2E;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --page: 1440px;
}
html, body { overflow-x: clip; }
body { background: var(--paper); } /* крестики рамки на краю экрана не дают горизонтальной прокрутки */
h1, h2 { text-transform: uppercase; font-weight: 760; letter-spacing: -.01em; line-height: .98; }
h3 { font-weight: 650; }
.btn { background: var(--amber); color: #fff; border-radius: 0; }
.btn:hover { background: #EA5A28; }

/* шапка — ячейки, разделённые тонкими линиями */
.top { background: rgba(243, 237, 223, .95); border-bottom: 1px solid var(--line); }
.top-in { max-width: var(--page); margin: 0 auto; padding: 0; height: 100%; display: flex; align-items: stretch; gap: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.top .logo { padding: 0 22px; border-right: 1px solid var(--line); }
.nav { margin: 0; gap: 0; }
.nav a { display: flex; align-items: center; padding: 0 18px; border-right: 1px solid var(--line); border-bottom: 0; font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.nav a:hover { color: var(--ink); background: rgba(28, 29, 31, .03); }
.nav a.on { color: var(--amber); border-bottom: 0; box-shadow: inset 0 -2px 0 var(--amber); }
.top-phone { display: flex; align-items: center; padding: 0 20px; margin-left: auto; border-left: 1px solid var(--line); font-size: 15px; }
.top-cta { display: flex; align-items: center; padding: 0 22px; background: var(--amber); color: #fff; text-decoration: none; font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.top-cta:hover { background: #EA5A28; }

/* рамка страницы: тонкие линии по краям и крестики на стыках разделов */
main { max-width: var(--page); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
main > section { position: relative; border-bottom: 1px solid var(--line); }
main > section::before, main > section::after { content: '+'; position: absolute; bottom: -9px; font: 400 16px/1 var(--mono); color: var(--ink-2); z-index: 3; }
main > section::before { left: -5px; }
main > section::after { right: -5px; }
.wrap { width: 100%; max-width: none; padding: 0 clamp(16px, 4vw, 56px); }

/* первый экран */
.hero-art { position: relative; padding: clamp(16px, 3vw, 40px) clamp(8px, 3vw, 48px) 8px; }
.hero-art::before { content: ''; position: absolute; top: 18px; left: 18%; right: 4%; height: 1px; background: var(--amber); opacity: .8; }
.hero-art::after { content: ''; position: absolute; top: 18px; bottom: 30%; right: 4%; width: 1px; background: var(--amber); opacity: .8; }
.art { position: relative; max-width: 1340px; margin: 0 auto; }
.art img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.pin { position: absolute; left: var(--x); top: var(--y); text-decoration: none; z-index: 1; }
.pin i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(221, 74, 26, .22); }
.pin-box { position: absolute; left: 20px; top: -16px; width: max-content; max-width: 210px; padding: 9px 12px 11px; background: var(--amber); color: #fff; font: 650 12px/1.25 'Geologica', sans-serif; text-transform: uppercase; letter-spacing: .02em; transition: background-color .15s; }
.pin-box b { display: block; margin-bottom: 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; opacity: .85; }
.pin-l .pin-box { left: auto; right: 20px; }
.pin:hover .pin-box, .pin:focus-visible .pin-box { background: var(--ink); }
.hero-head { display: grid; grid-template-columns: 7fr 5fr; gap: 24px 56px; align-items: end; padding: clamp(28px, 4vw, 56px) clamp(16px, 4vw, 56px); border-top: 1px solid var(--line); }
.hero-head h1 { font-size: clamp(38px, 5.3vw, 86px); }
.hero-head h1 span { display: block; color: #A39C8F; }
.hero-side { display: grid; gap: 20px; }
.hero-side .lead { font-size: 17px; color: var(--ink-2); max-width: 30em; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: center; padding: 22px clamp(16px, 2vw, 28px); }
.facts li + li { border-left: 1px solid var(--line); }
.facts svg { grid-row: span 2; width: 32px; height: 32px; fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.facts b { font-weight: 650; font-size: 16px; }
.facts span { font-size: 14px; color: var(--ink-2); }

/* путь воды: иллюстрация прилипает, карточки едут поверх */
.story { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); }
.stage, .steps { grid-area: 1 / 1; }
.stage { position: sticky; top: var(--top-h); height: calc(100svh - var(--top-h)); overflow: hidden; }
.cam { position: absolute; left: 0; top: 0; width: 2752px; height: 1536px; transform-origin: 0 0; transition: transform 1.2s var(--ease); }
/* иллюстрации — фоном блоков: браузер не показывает над ними «скопировать картинку» */
.cam { --leak: url(/kesson/site/img/v2/house-leak.webp); --fixed: url(/kesson/site/img/v2/house-fixed.webp); pointer-events: none; }
.cam > div { position: absolute; background-repeat: no-repeat; }
.art-bg { inset: 0; background-image: var(--leak); background-size: 100% 100%; }
/* «после работ» проявляется только там, где изменилось: маска --m — найденные пятна воды и оранжевые слои этого места.
   Проявка — мягкая кисть: пятно с размытым краем расползается из середины места (--g от 0 до 1.4) */
@property --g { syntax: '<number>'; inherits: false; initial-value: 0; }
.fx { background-image: var(--fixed);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--g) * 100% - 35%), transparent calc(var(--g) * 100%)), var(--m);
  mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--g) * 100% - 35%), transparent calc(var(--g) * 100%)), var(--m);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: --g 1.5s var(--ease); }
.fx.on { --g: 1.4; transition-delay: .9s; }
.fx-all { inset: 0; background-image: var(--fixed); background-size: 100% 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.fx-all.on { opacity: 1; transition-delay: .6s; }
/* картинка первого экрана не ловит мышь — без подсказки браузера; выноски поверх остаются кликабельными */
.art img { pointer-events: none; }
.steps { position: relative; z-index: 2; pointer-events: none; }
.story .step { min-height: calc(100svh - var(--top-h)); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 48px clamp(16px, 4vw, 56px); max-width: none; gap: 0; box-sizing: border-box; container-type: normal; }
.card { pointer-events: auto; width: min(440px, 38vw); background: rgba(249, 245, 235, .97); border: 1px solid var(--ink); }
.card-tab { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 14px; background: var(--amber); color: #fff; font: 500 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.card-body { display: grid; gap: 14px; padding: 20px 22px 24px; }
.card h2 { font-size: clamp(24px, 2.1vw, 32px); }
.card p { font-size: 15.5px; }
.card .symptom { font-size: 17px; }
.card .act { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.card .layers li { grid-template-columns: 64px 1fr auto; gap: 12px; font-size: 14px; }
.card .price-line { border-top-color: var(--line); }
.status { left: auto; right: 16px; top: 16px; background: rgba(249, 245, 235, .95); border-color: var(--line); border-radius: 0; }

/* разделы ниже — та же сетка из тонких линий */
.sec { border-bottom: 0; }
.sec h2 { font-size: clamp(32px, 4.2vw, 60px); }
.pt-zone, .pt-zone:last-child { border-color: var(--ink); border-width: 1px; }
.pt-price { font-weight: 700; }
.pt-price small { font: 400 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.sec-calc { background: transparent; }
.calc-form { border-radius: 0; border-width: 1px; background: var(--paper-2); }
.f input, .f select, .f textarea, .qty { border-radius: 0; border-width: 1px; border-color: #B5AD9C; background: #FCF9F2; }
.ba { border-radius: 0; }
.ba-tag { border-radius: 0; font: 500 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 6px 9px; }
.case-meta { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.how { border-top: 1px solid var(--ink); }
.how li, .how li:not(:nth-child(3n + 1)) { border-color: var(--line); }
.how li::before { border-color: var(--amber); color: var(--amber); font-family: var(--mono); }
.faq details, .faq details:last-child { border-color: var(--ink); }
.area-sel { max-width: 360px; }
.map { cursor: pointer; }
.map .city.sel circle { fill: var(--amber); r: 12px; }
.map .city.sel text { font-weight: 700; }
.sec-dark .f input, .sec-dark .f select, .sec-dark .f textarea { background: var(--dark-2); border-color: #4A4B4F; }
.foot { background: #141517; }
.foot-in { max-width: var(--page); }

@media (max-width: 1180px) {
  .top-phone { display: none; }
  .nav a { padding: 0 12px; }
}
@media (max-width: 900px) {
  .top-in { border: 0; }
  .top .logo { border: 0; padding: 0 16px; }
  .nav a { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .nav a.on { box-shadow: none; }
  .top-cta { margin-left: auto; padding: 0 14px; font-size: 11.5px; }
  .burger { align-self: center; margin-right: 6px; }
  main { border: 0; }
  main > section::before, main > section::after, .hero-art::before, .hero-art::after { display: none; }
  .pin-box { display: none; }
  .pin i { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .hero-head { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .story { display: block; }
  /* на телефоне иллюстрация — треть экрана, текст шага — две трети */
  .stage { height: 33svh; z-index: 3; border-bottom: 1px solid var(--line); background: var(--paper); }
  .steps { z-index: 1; }
  .story .step { min-height: 74svh; align-items: flex-start; padding: 24px 16px 40px; scroll-margin-top: calc(var(--top-h) + 33svh); }
  .card { width: 100%; }
  .status { left: 8px; right: 8px; top: 8px; }
}
@media (max-width: 520px) {
  /* «ГИДРОИЗОЛЯЦИЯ» и «ФУНДАМЕНТА» — самые длинные слова: кегль от ширины экрана, чтобы не обрезались на 360–375 px */
  .hero-head h1 { font-size: min(38px, calc((100vw - 32px) / 9.8)); }
  .facts { grid-template-columns: 1fr; }
  .facts li + li { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .cam { --leak: url(/kesson/site/img/v2/house-leak-m.webp); --fixed: url(/kesson/site/img/v2/house-fixed-m.webp); }
}
@media (prefers-reduced-motion: reduce) {
  .cam, .fx, .fx-all { transition: none !important; }
}