/* РОВНО. Концепция «Было → Стало» на реальной квартире, язык архитектурного чертежа.
   Шрифты: Unbounded 500 — заголовки, крупные цифры, «Было/Стало»; Golos Text 400/500/600 — всё остальное.
   Чертёжные приёмы несут информацию: миллиметровка под заголовком, размерная линия с засечками, штамп с паспортом объекта,
   кликабельная планировка, штриховка = неопределённость (вилка цены материалов).
   Движение: шторка «было/стало» и один подсказочный проход в первом экране. Остальное — только в ответ на действия. */
:root{
  --bg:#EEEFEC; --surface:#FFFFFF; --ink:#1F2326; --text:#33373A; --muted:#4F4C48; --line:#D4D5D1; --line-2:#BFC0BB;
  --grid-1:rgba(31,35,38,.045); --grid-2:rgba(31,35,38,.09);
  --dark:#24282B; --dark-2:#2E3236; --dark-ink:#F1F1EE; --dark-muted:#C9C7C2; --dark-line:#41464A;
  --acc:#F28C00; --acc-hover:#DE7F00; --acc-ink:#1F2326; --tbd:#E8A23A; --err:#C2381F;
  --f-d:"Unbounded","Golos Text",system-ui,sans-serif; --f-b:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1240px; --gut:32px; --r-s:4px; --r-m:8px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
@media (max-width:599px){:root{--gut:16px}}
/* одна фирменная тема: светлая основа и тёмные акцентные блоки, системная тёмная тема не применяется */
:root,:root[data-theme]{color-scheme:light}

*{box-sizing:border-box}
html{scroll-padding-top:80px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2{font-family:var(--f-d);font-weight:500;color:var(--ink);margin:0;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(28px,3.3vw,52px)}
h2{font-size:clamp(26px,3.6vw,52px)}
h3{font:600 20px/1.25 var(--f-b);color:var(--ink);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
section{padding-block:clamp(64px,9vw,128px)}
.sh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:16px 64px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sh p{color:var(--muted);font-size:18px;line-height:1.5}
@media (max-width:860px){.sh{grid-template-columns:minmax(0,1fr)}}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:var(--r-s);border:0;font:500 16px var(--f-b);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color 150ms ease,transform 100ms ease-out}
.btn:active{transform:scale(.97)}
.b-acc{background:var(--acc);color:var(--acc-ink)}
.b-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
@media (hover:hover) and (pointer:fine){.b-acc:hover{background:var(--acc-hover)}.b-line:hover{background:color-mix(in srgb,currentColor 8%,transparent)}}
.btn svg{width:18px;height:18px}
.draft .tbd{outline:2px dashed var(--tbd);outline-offset:3px}

/* размерная линия: выносные линии и засечки 45°, как на чертеже */
.dim{position:relative;display:flex;align-items:center;gap:16px;height:24px;border-inline:1px solid currentColor;font:500 14px/1 var(--f-b);color:var(--ink);white-space:nowrap}
.dim::before,.dim::after{content:"";flex:1;height:1px;background:currentColor}
.dim i{position:absolute;top:50%;width:1px;height:14px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.dim i:first-child{left:0}.dim i:last-child{left:100%}

/* шапка */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:32px;height:64px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo svg{width:32px;height:32px;flex:none}
.logo b{font:500 17px var(--f-d);letter-spacing:.02em}
.top nav{display:flex;gap:24px;margin-left:auto;font-size:15px}
.top nav a{text-decoration:none;color:var(--muted);padding:8px 0;transition:color 150ms ease}
.top nav a:hover{color:var(--ink)}
.hc{display:flex;align-items:center;gap:24px}
.hc .ph{text-decoration:none;font-weight:500;color:var(--ink);white-space:nowrap}
.top .btn{min-height:40px;padding:0 16px;font-size:15px}
@media (max-width:1100px){.top nav{display:none}.hc{margin-left:auto}}
@media (max-width:600px){.top .btn{display:none}}

/* шторка «было/стало»: ручка — пузырёк уровня из логотипа */
.ba{position:relative;overflow:hidden;border-radius:var(--r-m);background:#2E3236;touch-action:pan-y;user-select:none;-webkit-user-select:none;max-width:100%;isolation:isolate}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .bef{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0);filter:saturate(.8)}
.ba::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.28));pointer-events:none}
.ba .line{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;margin-left:-1px;background:#fff;pointer-events:none;z-index:1}
.ba .knob{position:absolute;top:50%;left:var(--p,50%);width:24px;height:64px;margin:-32px 0 0 -12px;border-radius:12px;background:#fff;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.18);display:grid;place-items:center;z-index:1}
.ba .knob::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:inset 0 0 0 1.5px rgba(31,35,38,.35)}
.ba .tag{position:absolute;bottom:clamp(16px,2vw,28px);font:500 clamp(18px,2.2vw,32px)/1 var(--f-d);color:#fff;pointer-events:none;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 24px rgba(0,0,0,.45)}
.ba .t-b{left:clamp(16px,2vw,28px)}
.ba .t-a{right:clamp(16px,2vw,28px)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:2}
.ba:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:3px}

/* первый экран: текст на миллиметровке, шторка уходит в правый край */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(calc(100svh - 64px),880px);border-bottom:1px solid var(--line);padding:0}
.hero-t{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,96px) clamp(32px,5vw,72px) clamp(40px,5vw,72px) max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)),env(safe-area-inset-left,0px));
  background-color:var(--bg);background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),linear-gradient(var(--grid-1) 1px,transparent 1px),linear-gradient(90deg,var(--grid-1) 1px,transparent 1px);background-size:40px 40px,40px 40px,8px 8px,8px 8px;background-position:-1px -1px}
.hero .dim{margin:28px 0 24px;max-width:30rem}
.hero .lead{font-size:clamp(17px,1.4vw,19px);color:var(--muted);max-width:32rem}
.hero .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:20px;color:var(--muted);font-size:16px}
.hero .price b{font:500 clamp(22px,2vw,30px)/1.1 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums}
.hero .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.soft{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:5px}
.soft svg{width:18px;height:18px;flex:none}
.terms{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line-2);max-width:32rem;background:var(--bg)}
.terms li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.terms b{font-weight:600;color:var(--ink)}
.terms span{color:var(--muted)}
.hero-v{position:relative;min-height:480px}
.hero-v .ba{position:absolute;inset:0;border-radius:0}
.hero-v .cap{position:absolute;top:clamp(12px,2vw,28px);left:clamp(12px,2vw,28px);right:clamp(12px,2vw,28px);z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;color:#fff;font-size:15px;pointer-events:none}
.hero-v .cap span{background:rgba(24,27,29,.72);padding:6px 10px;border-radius:var(--r-s);line-height:1.3}
.hero-v .cap b{font-weight:600}
/* телефон и планшет: заголовок и цена, сразу под ними шторка, потом кнопка */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:32px;background:inherit}
  .hero-t{display:contents}
  .hero h1,.hero .price,.hero .lead,.hero .ctas,.hero .terms{padding-inline:max(var(--gut),env(safe-area-inset-left,0px))}
  .hero h1{order:1;padding-top:28px}
  .hero .dim{display:none}
  .hero .price{order:2;margin-top:12px}
  .hero-v{order:3;aspect-ratio:4/3;max-height:60svh;min-height:0;margin-top:20px}
  .hero .lead{order:4;margin-top:20px}
  .hero .ctas{order:5;margin-top:16px}
  .hero .terms{order:6;margin-inline:max(var(--gut),env(safe-area-inset-left,0px));padding-inline:0}
  .hero-v .cap span:last-child{display:none}
}
@media (max-width:599px){.hero h1{font-size:28px}.hero .terms{display:none}.hero .ctas .b-acc{flex:1 1 100%}}

/* объект */
.case{background:var(--dark);color:var(--dark-ink)}
.case h2,.case h3{color:var(--dark-ink)}
.case .sh p{color:var(--dark-muted)}
.tabs{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;margin-bottom:24px;border-bottom:1px solid var(--dark-line)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:12px 0;margin-bottom:-1px;font:500 16px var(--f-b);cursor:pointer;color:var(--dark-muted);white-space:nowrap;border-bottom:2px solid transparent;min-height:48px;transition:color 150ms ease}
.tabs button:hover{color:var(--dark-ink)}
.tabs button[aria-selected="true"]{color:var(--dark-ink);border-bottom-color:var(--acc)}
.case-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
.case-g .ba{aspect-ratio:4/3;width:100%}
.side{display:grid;gap:24px;align-content:start}
.works h3{margin-bottom:8px}
.works ul{list-style:none;margin:0;padding:0;display:grid;font-size:16px}
.works li{padding:8px 0;border-top:1px solid var(--dark-line)}
.works li:last-child{border-bottom:1px solid var(--dark-line)}
@media (max-width:960px){.case-g{grid-template-columns:minmax(0,1fr)}.case-g .ba{aspect-ratio:4/5}}

/* планировка-переключатель */
.plan-f{margin:0;display:grid;gap:8px}
.plan-f figcaption{font-size:15px;color:var(--dark-muted)}
.plan{background:#fff;border-radius:var(--r-s);padding:12px}
.plan-in{position:relative}
.plan-in img{width:100%}
.plan-in button{position:absolute;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:2px;transition:background-color 150ms ease;display:grid;place-items:center}
.plan-in button span{font:500 13px/1 var(--f-b);background:var(--ink);color:#fff;padding:6px 8px;border-radius:2px;opacity:0;transition:opacity 150ms ease}
.plan-in button:hover{background:rgba(242,140,0,.14)}
.plan-in button:hover span{opacity:1}
.plan-in button[aria-pressed="true"]{background:rgba(242,140,0,.24);box-shadow:inset 0 0 0 2px var(--acc)}
.plan-in button[aria-pressed="true"] span{opacity:1;background:var(--acc);color:var(--acc-ink)}
.plan-in button:focus-visible{outline:2px solid var(--acc);outline-offset:0}
@media (max-width:960px) and (min-width:640px){.side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}

/* штамп чертежа: паспорт объекта */
.stamp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--dark-line);margin-top:32px}
.stamp>div{padding:16px 20px 20px;border-right:1px solid var(--dark-line);display:grid;gap:8px;align-content:start}
.stamp>div:last-child{border-right:0}
.stamp .k{font-size:15px;color:var(--dark-muted)}
.stamp .v{font:500 clamp(22px,2.8vw,40px)/1.1 var(--f-d);color:var(--dark-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.stamp .v small{font-size:.5em;margin-left:4px}
.stamp .obj{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--dark-line);grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding-block:12px}
.stamp .obj .v{font:500 16px var(--f-b);white-space:normal}
@media (max-width:640px){.stamp{grid-template-columns:repeat(2,minmax(0,1fr))}.stamp>div:nth-child(3){border-right:0}.stamp>div:nth-child(2),.stamp>div:nth-child(3){border-bottom:1px solid var(--dark-line)}.stamp .obj{grid-template-columns:minmax(0,1fr)}}

/* детали: четыре кадра; на телефоне лента с прокруткой вбок */
.det{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:32px}
.det figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-s);background:var(--dark-2);aspect-ratio:4/5}
.det img{width:100%;height:100%;object-fit:cover}
.det figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 12px;font-size:15px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
@media (max-width:860px){.det{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}.det::-webkit-scrollbar{display:none}.det figure{flex:0 0 72%;scroll-snap-align:start}}

/* услуги */
.srv{border-top:2px solid var(--ink)}
.sr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) 12rem;gap:24px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none}
.sr h3{font:500 clamp(20px,2.2vw,28px)/1.2 var(--f-d);letter-spacing:-.01em}
.sr p{color:var(--muted);font-size:16px}
.sr .pr{font-weight:500;font-size:17px;color:var(--ink);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.sr h3{text-decoration:underline 2px transparent;text-underline-offset:8px;transition:text-decoration-color 150ms ease}.sr:hover h3{text-decoration-color:var(--acc)}}
@media (max-width:760px){.sr{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}.sr p{grid-column:1/-1;grid-row:2}}

/* калькулятор */
.calc-s{background:var(--surface);border-block:1px solid var(--line)}
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
.calc-l{position:sticky;top:112px;display:grid;gap:16px}
.calc-l p{color:var(--muted);font-size:18px;line-height:1.5;max-width:28rem}
@media (max-width:920px){.calc{grid-template-columns:minmax(0,1fr)}.calc-l{position:static}}
.quiz{background:var(--bg);border-radius:var(--r-m);border:1px solid var(--line)}
.q-top{display:flex;justify-content:space-between;align-items:baseline;padding:20px 24px 0;font-size:14px;color:var(--muted)}
.q-top span:first-child{color:var(--ink);font-weight:500}
.bar{height:3px;background:var(--line);margin:12px 24px 0;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(var(--k,.2));transition:transform 200ms var(--ease-out)}
.q-body{padding:24px;display:grid;gap:16px;align-content:start}
.q-title{font:600 22px/1.25 var(--f-b);color:var(--ink)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label{display:grid;gap:2px;padding:12px 16px;border-radius:var(--r-s);cursor:pointer;min-height:64px;align-content:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow 150ms ease}
.opt label:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.opt label b{font-weight:500;color:var(--ink)}
.opt label span{font-size:14px;color:var(--muted)}
.opt input:checked+label{box-shadow:inset 0 0 0 2px var(--acc)}
.opt input:focus-visible+label{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:420px){.opts{grid-template-columns:minmax(0,1fr)}}
.rv{font:500 56px/1 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums}
.rv small{font:400 18px var(--f-b);color:var(--muted)}
input[type=range].area{width:100%;accent-color:var(--acc);min-height:32px}
.rt{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.e{border-radius:var(--r-s);padding:16px;display:grid;gap:4px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:15px}
.e .r{display:flex;justify-content:space-between;gap:12px}
.e .r span:first-child{display:flex;align-items:center;gap:8px;color:var(--muted)}
.e .r b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.e .sw{width:12px;height:12px;flex:none;border-radius:2px}
.e .sw-w{background:var(--ink)}
.e .sw-m{background:var(--acc)}
.e .sw-h{background:repeating-linear-gradient(-45deg,var(--acc) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--acc)}
.e .tot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:600 20px/1.3 var(--f-b);color:var(--ink);padding-top:8px;margin-top:4px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.e .note{font-size:14px;color:var(--muted)}
/* полоса сметы: работы, материалы минимум, вилка материалов штриховкой */
.sb{display:flex;height:16px;margin:4px 0 8px;border-radius:2px;overflow:hidden;background:var(--line)}
.sb i{display:block;height:100%;flex:none}
.sb .w{background:var(--ink)}
.sb .m{background:var(--acc)}
.sb .h{background:repeating-linear-gradient(-45deg,var(--acc) 0 2px,transparent 2px 5px)}
.q-nav{display:flex;justify-content:space-between;gap:8px;padding:0 24px 24px}
.q-nav .btn{min-height:48px}
.field{display:grid;gap:4px}
.field label{font-size:14px;color:var(--muted)}
.field input{min-height:52px;border:0;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:var(--r-s);padding:0 16px;font:16px var(--f-b);background:var(--surface);color:var(--ink);width:100%}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.consent{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.consent input{margin-top:1px;accent-color:var(--acc);width:18px;height:18px;flex:none}
.err{color:var(--err);font-size:14px}

/* как работаем — настоящая последовательность, поэтому с крупными номерами */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.tl li{position:relative;display:grid;gap:8px;align-content:start;padding:24px 24px 0 0}
.tl li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--bg);border:2px solid var(--ink)}
.tl li:last-child::before{background:var(--acc);border-color:var(--acc)}
.tl .n{font:500 clamp(40px,4.4vw,64px)/1 var(--f-d);color:var(--line-2);font-variant-numeric:tabular-nums;margin-bottom:8px}
.tl p{color:var(--muted);font-size:16px}
.tl .pay{font-size:15px;font-weight:500;color:var(--ink);padding-left:12px;border-left:3px solid var(--acc);margin-top:8px}
@media (max-width:860px){.tl{grid-template-columns:minmax(0,1fr);border-top:0;border-left:2px solid var(--ink);margin-left:6px}.tl li{padding:0 0 32px 32px}.tl li::before{top:4px;left:-7px}.tl .n{font-size:36px}}

/* прайс */
.seg{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:none;color:var(--muted);font:500 15px var(--f-b);padding:12px 0;margin-bottom:-1px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;min-height:48px;transition:color 150ms ease}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--acc)}
.pl{margin-top:8px}
.pl .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.pl .r b{font-weight:500;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.pl .r b small{color:var(--muted);font-size:14px;font-weight:400}
.pl-more{margin-top:16px;min-height:48px}
.pn{color:var(--muted);font-size:15px;margin-top:16px}
.prices-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,80px)}
.prices-g .sh{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;margin:0}
@media (max-width:920px){.prices-g{grid-template-columns:minmax(0,1fr)}}

/* договор и гарантии */
.deal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:start}
.paper{background:var(--surface);border:1px solid var(--line-2);border-radius:2px;padding:clamp(24px,3vw,40px);box-shadow:0 1px 2px rgba(31,35,38,.06),12px 12px 0 -1px var(--bg),12px 12px 0 0 var(--line-2);font:15px/1.6 var(--f-b);color:var(--text);max-width:34rem}
.paper .doc-h{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.paper .doc-h b{font-weight:600;color:var(--ink)}
.paper .doc-h span{font-size:14px;color:var(--muted)}
.paper h4{font:600 15px var(--f-b);color:var(--ink);margin:16px 0 8px}
.paper p+p{margin-top:8px}
.paper .gray{color:#9A9893}
.paper mark{display:block;background:rgba(242,140,0,.16);box-shadow:inset 3px 0 0 var(--acc);color:var(--ink);padding:8px 12px;margin:0 -12px}
.paper .sign{display:flex;justify-content:space-between;gap:16px;margin-top:24px;padding-top:16px;border-top:1px dashed var(--line-2);font-size:14px;color:var(--muted)}
.gr{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border-top:1px solid var(--line-2)}
.gr>div{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.gr dt{font-weight:600;color:var(--ink)}
.gr dd{margin:0;color:var(--muted)}
@media (max-width:920px){.deal{grid-template-columns:minmax(0,1fr)}.paper{order:2}}
@media (max-width:480px){.gr>div{grid-template-columns:minmax(0,1fr);gap:4px}.paper{box-shadow:0 1px 2px rgba(31,35,38,.06)}}


/* мягкий вход: пример сметы и договора */
.sample{background:var(--surface);border-block:1px solid var(--line)}
.sample .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:center}
.sample p.l{color:var(--muted);font-size:18px;margin-top:12px;max-width:30rem}
.soft-f{display:grid;gap:16px}
.soft-f .row2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.soft-f .opts{grid-template-columns:repeat(3,minmax(0,1fr))}
.soft-f .opt label{min-height:48px}
.soft-ok{font:600 20px/1.3 var(--f-b);color:var(--ink)}
@media (max-width:860px){.sample .wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.soft-f .row2{grid-template-columns:minmax(0,1fr)}.soft-f .opts{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* отзывы */
.rev-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
.rev-g .sh{grid-template-columns:minmax(0,1fr);margin:0}
.rev-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vid{aspect-ratio:9/14;border:1px dashed var(--line-2);border-radius:var(--r-m);display:grid;place-items:center;align-content:center;gap:12px;padding:16px;text-align:center;color:var(--muted);background:var(--surface)}
.vid i{width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center}
.vid i::after{content:"";border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--line-2);margin-left:3px}
@media (max-width:920px){.rev-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.vids{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory}.vid{scroll-snap-align:start}}


/* ещё объекты */
.more-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.soon{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.soon .ph{aspect-ratio:16/9;background:repeating-linear-gradient(-45deg,var(--line) 0 1px,transparent 1px 10px);display:grid;place-items:center;border-bottom:1px solid var(--line-2)}
.soon .ph span{font:500 18px var(--f-d);color:var(--muted);background:var(--surface);padding:8px 16px;border-radius:var(--r-s)}
.soon .t{padding:16px 20px 20px;display:grid;gap:4px}
.soon .t p{color:var(--muted)}
@media (max-width:640px){.more-g{grid-template-columns:minmax(0,1fr)}}


/* вопросы */
.faq-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,80px)}
.faq-g .sh{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;margin:0}
@media (max-width:920px){.faq-g{grid-template-columns:minmax(0,1fr)}}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:500 18px/1.35 var(--f-b);color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:1.5px;background:currentColor;transition:transform 200ms var(--ease-out)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details p{padding:0 0 20px;color:var(--text);font-size:17px;max-width:40rem}

/* финал */
.fin{background:var(--dark);color:var(--dark-ink);padding:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fin-t{padding:clamp(64px,9vw,128px) clamp(32px,5vw,72px) clamp(64px,9vw,128px) max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)),env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:center}
.fin h2{color:var(--dark-ink);font-size:clamp(30px,4.6vw,68px)}
.fin .dim{color:var(--dark-ink);margin:32px 0;max-width:30rem}
.fin p{color:var(--dark-muted);font-size:18px;max-width:30rem}
.fin .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fin .b-line{color:var(--dark-ink)}
.fin .fin-soft{margin-top:24px;font-size:17px;color:var(--dark-ink)}
.fin-soft a{text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:4px}
.msg{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px}
.msg a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--dark-ink);text-decoration:underline;text-decoration-color:var(--dark-muted);text-underline-offset:4px;font-size:16px}
.msg a:hover{text-decoration-color:currentColor}
.msg svg{width:18px;height:18px;color:var(--dark-muted)}
.fin-v{position:relative;min-height:420px}
.fin-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.fin{grid-template-columns:minmax(0,1fr)}.fin-t{padding:56px var(--gut)}.fin-v{order:-1;min-height:0;aspect-ratio:4/3}}

footer{background:var(--dark);color:var(--dark-muted);font-size:15px;border-top:1px solid var(--dark-line)}
.fc{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-block:48px 32px}
footer b{display:block;color:var(--dark-ink);font-weight:500;margin-bottom:8px}
footer a{display:block;text-decoration:none;padding:4px 0}
footer a:hover{color:var(--dark-ink)}
footer .logo{color:var(--dark-ink)}
.legal{border-top:1px solid var(--dark-line);padding-block:24px;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.legal a{display:inline}
@media (max-width:820px){.fc{grid-template-columns:1fr 1fr}}
@media (max-width:760px){footer{padding-bottom:80px}}

.mbar{display:none}
@media (max-width:760px){.mbar{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--dark);border-top:1px solid var(--dark-line);padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .mbar .btn{min-height:48px;padding:0 8px;font-size:15px}.mbar .b-line{color:var(--dark-ink)}}

@media (prefers-reduced-motion:reduce){.btn,.bar i,.faq summary::after,.tabs button,.seg button,.top nav a,.opt label,.plan-in button,.plan-in button span,.sr h3{transition:none}}

.preview{background:#dce2e3;text-align:center;padding:8px 16px;font-size:12px;color:#38434a}.header-cta{margin-left:auto}.menu-toggle{display:none}.new-footer{background:#24282b;color:#fff;padding:48px 0}.new-footer .wrap{display:grid;grid-template-columns:1fr 2fr 2fr;gap:28px}.new-footer small{grid-column:2/-1;color:#bfc8cb}.new-footer b{font:500 23px var(--f-d)}.new-footer a{align-self:start}.hero-t{padding:60px max(28px,4vw)}.hero{min-height:660px}.hero h1{font-size:clamp(30px,3.05vw,46px)}.hero-location{font-size:15px;margin-bottom:24px}.hero .lead{margin-top:24px}.hero .terms{margin-top:28px}.hero .ctas{gap:12px}.experience{display:flex;align-items:center;gap:32px;padding-block:32px}.experience strong{font:500 42px var(--f-d)}.experience p{line-height:1.4}.experience a{margin-left:auto;text-underline-offset:5px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service-grid a{display:flex;flex-direction:column;background:white;border-radius:8px;padding:30px;text-decoration:none;border:1px solid var(--line)}.service-grid a:hover{border-color:#8a9597}.service-grid p{margin:16px 0 28px}.service-grid span{margin-top:auto;color:var(--ink);font-weight:500;display:flex;justify-content:space-between}.case-note{margin-top:24px;max-width:65ch;color:var(--dark-muted)}.case .det{margin:32px 0}.budget-section{background:#fff}.budget-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:64px}.budget-rows>div{padding:22px 0;border-top:1px solid var(--line)}.budget-rows p{margin-top:8px;max-width:56ch}.budget-panel{background:#e8ecec;padding:32px;border-radius:8px;align-self:start}.budget-panel p{margin-top:16px}.budget-panel ul{padding-left:20px;margin:24px 0}.budget-panel li{margin-bottom:8px}.note{font-size:14px;line-height:1.5;color:var(--muted)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.process-grid span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #bfc0bb;border-radius:50%;margin-bottom:22px}.process-grid h3{margin-bottom:12px}.design-note{background:#dfe5e5}.design-note .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:60px}.design-note .soft{margin-top:24px}.contact{background:#fff}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px}.contact h2{margin:20px 0 28px}.contact p{max-width:54ch}.contact .note{margin-top:24px}.eyebrow{font-size:15px}.contact form{padding:32px;background:var(--bg);border-radius:8px}.preview-note{font-size:13px;margin:14px 0 24px;color:#515a60}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid label{font-size:14px;display:grid;gap:8px}.form-grid input,.form-grid select{width:100%;min-width:0;padding:12px;border:1px solid #a7b0b2;border-radius:4px;background:white;color:var(--ink);font:16px var(--f-b);height:48px}.contact button{margin-top:24px;white-space:normal}.contact [role=status]:not(:empty){margin-top:20px;padding:16px;border-left:3px solid var(--acc)}.mobile-cta{display:none}.service-hero{background:#dfe5e5}.service-hero .wrap{max-width:1000px}.service-hero h1{max-width:22ch;margin:26px 0}.service-hero p{max-width:55ch;font-size:20px;margin-bottom:28px}.service-hero .crumb{font-size:14px}.service-body{max-width:960px}.service-body article{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;padding:32px 0;border-bottom:1px solid var(--line)}.case-alternative{display:flex;gap:12px;margin-top:12px}.case-alternative button{font:14px var(--f-b);padding:8px 14px;background:transparent;border:1px solid #8d989e;border-radius:4px;color:inherit;cursor:pointer}.mobile-nav a{display:block}.ba[data-mode=before] .t-a,.ba[data-mode=after] .t-b{visibility:hidden}
@media(max-width:900px){.hero{min-height:0}.hero-location{order:0;padding:24px 16px 0;margin:0}.hero h1{padding-top:16px}.hero .lead{margin-top:20px}.hero-v{aspect-ratio:4/3}.hero .ctas{margin-top:20px}.service-grid{grid-template-columns:1fr}.service-grid a{padding:24px}.service-grid p{margin:12px 0 18px}.budget-layout,.contact-grid{grid-template-columns:1fr;gap:32px}.process-grid{grid-template-columns:1fr 1fr}.design-note .wrap{grid-template-columns:1fr;gap:28px}.header-cta{margin-left:auto}.case-g .ba{aspect-ratio:4/3}.service-body article{gap:24px}.menu-toggle{display:block;border:1px solid var(--line);padding:10px;background:transparent;border-radius:4px;font:14px var(--f-b)}#mobile-nav:not([hidden]){display:grid;padding:12px 20px;gap:12px}.new-footer .wrap{grid-template-columns:1fr 2fr}.new-footer small{grid-column:1/-1}}
@media(max-width:599px){.hero h1{font-size:28px}.experience{gap:16px;flex-wrap:wrap}.experience strong{font-size:34px}.experience p{font-size:14px}.experience a{margin-left:0;font-size:14px}.contact form{padding:24px 18px}.form-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr;gap:32px}.process-grid>div{padding-left:52px;position:relative}.process-grid span{position:absolute;left:0;top:0}.budget-panel{padding:24px}.btn{white-space:normal}.mobile-cta{display:block;position:fixed;bottom:12px;left:16px;right:16px;padding:14px;background:var(--acc);color:var(--ink);z-index:45;text-align:center;border-radius:6px;font-weight:600;text-decoration:none;box-shadow:0 3px 15px #0002}.new-footer{padding-bottom:100px}.service-body article{grid-template-columns:1fr;gap:14px}.new-footer .wrap{grid-template-columns:1fr}.new-footer small{grid-column:auto}.top .wrap{gap:16px}.hero .ctas{align-items:stretch}.hero-v .cap{font-size:13px}.top{top:0}.contact{scroll-margin-top:72px}}

[hidden]{display:none!important}.menu-toggle{margin-left:auto}.mobile-cta:not(.is-visible){display:none}

.contact .consent{margin-top:20px}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.contact button[disabled]{opacity:.6;cursor:wait}.contact [role=status].is-error{border-left-color:#c0392b}

/* SEO: навигационная цепочка, перелинковка, ссылки в подвале */
.service-body h2{font-size:26px}
.service-hero .crumb a{color:inherit}
.service-hero .crumb span{opacity:.7}
.related{margin-top:56px}
.related h2{margin-bottom:20px}
.related .service-grid{grid-template-columns:repeat(2,1fr)}
.related .service-grid h3{margin:0 0 20px}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-self:start}
.footer-links a{color:#fff}
@media (max-width:700px){.related .service-grid{grid-template-columns:1fr}}

/* Юридические страницы: политика и согласие */
.doc{padding:48px 0 72px;background:var(--bg)}
.doc-body{max-width:780px;color:var(--text);font-size:17px;line-height:1.6}
.doc-body h2{font:500 22px/1.3 var(--f-d);color:var(--ink);margin:40px 0 12px}
.doc-body p,.doc-body ul{margin:0 0 14px}
.doc-body ul{padding-left:22px}
.doc-body li{margin-bottom:6px}
.doc-body a{color:var(--ink)}
.doc-meta{font-size:14px;color:var(--muted)}
.doc-note{padding:14px 16px;border-left:3px solid var(--acc);background:var(--surface);border-radius:var(--r-s)}
.doc-table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 16px;background:var(--surface)}
.doc-table th,.doc-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.doc-table th{font-weight:600;color:var(--ink)}
@media (max-width:640px){.doc-table thead{display:none}.doc-table tr{display:block;border:1px solid var(--line);margin-bottom:12px}.doc-table td{display:block;border:0;border-top:1px solid var(--line)}.doc-table td:first-child{border-top:0;font-weight:600}}
mark.fill{background:#FFE3B3;color:var(--ink);padding:0 4px;border-radius:3px}
.consent a{color:inherit;text-decoration:underline}
.new-footer .footer-legal a,.new-footer .footer-legal button{color:#bfc8cb;text-decoration:underline;font:inherit;background:none;border:0;padding:0;cursor:pointer}

/* Уведомление о cookie */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin-left:auto;background:var(--dark);color:var(--dark-ink);border-radius:var(--r-m);padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px;line-height:1.45}
.cookie-bar p{margin:0 0 12px}
.cookie-bar a{color:inherit}
.cookie-bar .cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-bar button{font:600 14px var(--f-b);border-radius:var(--r-s);padding:10px 16px;cursor:pointer;border:1px solid var(--dark-line)}
.cookie-bar .cookie-yes{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.cookie-bar .cookie-no{background:transparent;color:var(--dark-ink)}