/* АКСИОМА · ремонт — общая основа вариантов A1–A3. Цвета, шрифт и логотип — с axiomadom.ru */
:root{--paper:#FBFAF8;--stone:#F2EFEA;--ink:#1C222B;--ink-2:rgba(28,34,43,.72);--line-ink:#5E4633;--accent:#0B6B4B;--accent-deep:#09583E;--accent-on-dark:#74C49B;--rule:rgba(28,34,43,.12);--pad:clamp(20px,4.4vw,64px);--ease:cubic-bezier(.16,1,.3,1);color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 "Onest",system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:300;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
h2{font-size:clamp(30px,3.4vw,52px)}
h2 em,h1 em{font-style:normal;color:var(--accent)}

.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;padding:0 var(--pad);background:rgba(251,250,248,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.logo-mark{display:block;width:150px;height:auto;color:var(--ink);overflow:visible}
.logo-mark .logo-sq{fill:var(--accent)}
.nav{display:flex;gap:28px;font-size:15px;color:var(--ink-2)}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}

.eyebrow{font:500 12px/1.45 "Onest",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:18px 26px;background:var(--accent);color:#fff;font:500 13px/1 "Onest",sans-serif;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--accent);cursor:pointer;overflow:hidden;transition:background .3s}
.btn:hover{background:var(--accent-deep)}
.btn .arr{width:38px;height:1px;background:currentColor;position:relative;transition:width .4s var(--ease)}
.btn:hover .arr{width:54px}
.btn .arr::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.note{font-size:14px;color:var(--ink-2)}
.lead{font-size:19px;color:var(--ink-2);max-width:46ch}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* появление блоков */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.in .rv,.rv.in{opacity:1;transform:none}

/* цифры */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper)}
.fact{position:relative;padding:40px var(--pad) 34px;border-right:1px solid var(--rule);min-width:0}
.fact:nth-child(4){border-right:0}
.fact::before{content:"";position:absolute;left:var(--pad);top:0;width:44px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);transition-delay:calc(var(--d,0s) + .3s)}
.facts.in .fact::before{transform:scaleX(1)}
.fact b{display:flex;align-items:flex-start;gap:6px;font-weight:200;font-size:clamp(64px,7.2vw,112px);line-height:.95;letter-spacing:-.04em;color:var(--ink);white-space:nowrap}
.fact b sup{font-size:.34em;font-weight:500;line-height:1;letter-spacing:0;color:var(--accent);margin-top:.28em}
.fact .fl{display:block;margin-top:16px;font-size:15px;line-height:1.4;color:var(--ink-2);max-width:22ch}
.facts-note{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 40px;margin:0;padding:18px var(--pad);border-top:1px solid var(--rule);font:500 12px/1.4 "Onest";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.facts-note span{display:flex;align-items:center;gap:12px}
.facts-note span::before{content:"";width:9px;height:9px;background:var(--accent);flex:none}

/* путь от заявки до ключей */
.path{padding:96px var(--pad) 104px;background:var(--paper)}
.path-h{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.track::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--rule)}
.track::after{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 2.6s var(--ease) .2s}
.track.in::after{transform:scaleX(1)}
.step{position:relative;padding:34px 22px 0 0;min-width:0}
.step::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;background:var(--paper);border:1.5px solid var(--ink);transition:background .4s,border-color .4s;transition-delay:calc(var(--i) * .4s + .3s)}
.track.in .step::before{background:var(--accent);border-color:var(--accent)}
.step i{font:500 11px/1 "Onest";font-style:normal;letter-spacing:.2em;color:var(--ink-2)}
.step h3{font:500 18px/1.3 "Onest";margin:10px 0 6px}
.step p{font-size:14px;color:var(--ink-2)}

/* заявка */
.lead-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding:96px var(--pad);background:var(--stone);align-items:start}
.lead-sec ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.lead-sec li{display:grid;grid-template-columns:14px 1fr;gap:14px;align-items:baseline;color:var(--ink-2)}
.lead-sec li::before{content:"";width:10px;height:10px;background:var(--accent)}
.form{background:var(--paper);border:1px solid var(--rule);padding:34px;display:grid;gap:16px;box-shadow:0 30px 60px -36px rgba(28,34,43,.3);min-width:0}
.form label{display:grid;gap:6px;font:500 11px/1 "Onest";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.form input[type=text],.form input[type=tel],.form textarea{font:400 17px/1.4 "Onest";padding:14px 0;border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);outline:none;border-radius:0;transition:border-color .3s}
.form input:focus,.form textarea:focus{border-color:var(--accent)}
.form textarea{resize:vertical;min-height:52px}
.form .ok{display:flex;gap:10px;align-items:flex-start;font:400 13px/1.45 "Onest";letter-spacing:0;text-transform:none}
.form .ok input{margin-top:3px;accent-color:var(--accent)}
.form .btn{justify-content:space-between}
.form-done{font-size:19px;padding:20px 0}

.ftr{padding:28px var(--pad) 36px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;background:var(--paper)}

@media (max-width:860px){
  .nav{display:none}.hdr{height:64px}.logo-mark{width:118px}
  .hdr .btn{padding:12px 14px;font-size:11px;letter-spacing:.1em}.hdr .btn .arr{display:none}
  .cta .btn{width:100%;justify-content:space-between}
  .facts{grid-template-columns:1fr 1fr}.fact{padding:26px var(--pad) 22px;border-bottom:1px solid var(--rule)}.fact:nth-child(2n){border-right:0}.fact:nth-child(n+3){border-bottom:0}.fact b{font-size:60px}.fact .fl{font-size:13px;margin-top:10px}.facts-note{font-size:10px;letter-spacing:.12em;gap:8px 20px}
  .path{padding:56px var(--pad)}.path-h{margin-bottom:32px}
  .track{grid-template-columns:1fr;gap:26px}
  .track::before,.track::after{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top}
  .track::after{transform:scaleY(0)}.track.in::after{transform:scaleY(1)}
  .step{padding:0 0 0 36px}
  .lead-sec{grid-template-columns:1fr;gap:32px;padding:56px var(--pad)}.form{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ───────── первый экран: эскиз ↔ готовый интерьер ───────── */
.hero{position:relative;height:calc(100svh - 88px);min-height:620px;max-height:920px;overflow:hidden;background:var(--paper)}
.scene{position:absolute;inset:0;--x:100%;touch-action:pan-y}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;animation:settle 2.6s var(--ease) both;-webkit-user-drag:none;user-select:none}
@keyframes settle{from{transform:scale(1.07)}to{transform:none}}
.scene .photo{clip-path:inset(0 0 0 var(--x))}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,250,248,.98) 0,rgba(251,250,248,.95) 36%,rgba(251,250,248,.55) 46%,rgba(251,250,248,0) 56%);pointer-events:none}
.seam{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:var(--ink);z-index:3}
.knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;padding:0;border-radius:50%;background:var(--paper);border:1px solid var(--ink);display:grid;place-items:center;cursor:ew-resize;box-shadow:0 10px 30px -10px rgba(28,34,43,.5)}
.knob::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--accent);animation:ping 2.2s ease-out infinite}
.touched .knob::before{display:none}
@keyframes ping{from{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(1.5)}}
.knob svg{width:26px;height:26px}
.tag{position:absolute;bottom:30px;font:500 11px/1 "Onest";letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:12px;white-space:nowrap}
.tag i{display:block;width:26px;height:1px;background:currentColor}
.tag.l{right:18px;color:var(--ink)}
.tag.r{left:18px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hint{position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);font:500 10px/1 "Onest";letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:#fff;padding:7px 10px;white-space:nowrap;transition:opacity .4s}
.touched .hint{opacity:0}
.hero .txt{position:relative;z-index:4;height:100%;max-width:min(600px,42vw);padding:0 0 0 var(--pad);display:flex;flex-direction:column;gap:28px;justify-content:center;pointer-events:none}
.hero .txt a,.hero .txt button{pointer-events:auto}
.hero h1{font-size:clamp(40px,4.7vw,74px)}

/* ───────── общие заголовки секций ───────── */
.sec{padding:104px var(--pad)}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.sec-h h2{margin-top:14px}
button.btn{font-family:inherit}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.light:hover{background:#fff}

/* ───────── виды ремонта ───────── */
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.kind{display:flex;flex-direction:column;min-width:0}
.kind figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.kind img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.6s var(--ease)}
.kind:hover img{transform:scale(1.08)}
.kind h3{font:400 26px/1.2 "Onest";letter-spacing:-.01em;margin:22px 0 8px}
.kind p{font-size:15px;color:var(--ink-2);flex:1}
.kind .lnk{margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:14px;padding:0;border:0;background:none;color:var(--ink);font:500 12px/1 "Onest";letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.lnk .arr{width:38px;height:1px;background:var(--accent);position:relative;transition:width .4s var(--ease)}
.lnk:hover .arr{width:56px}
.lnk .arr::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg)}

/* ───────── скрытые работы: чертёж на зелёном ───────── */
.hidden-works{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--accent-deep);color:#fff}
.bp{position:relative;min-height:560px;overflow:hidden}
.bp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 55%}
.bp svg{position:absolute;inset:0;width:100%;height:100%}
.bp path{fill:none;stroke:var(--accent-on-dark);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1}
.bp.in path{animation:draw 2.2s var(--ease) forwards;animation-delay:calc(var(--n) * .35s + .2s)}
.bp circle{fill:#fff;opacity:0}
.bp.in circle{animation:pulse 2.4s ease-in-out infinite;animation-delay:calc(var(--n) * .3s + 1.6s)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{opacity:.25;r:3}50%{opacity:1;r:5}}
.bp .chip{position:absolute;font:500 10px/1 "Onest";letter-spacing:.2em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:7px 10px;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s var(--ease);transition-delay:calc(var(--n) * .3s + 1.8s)}
.bp.in .chip{opacity:1;transform:none}
.hw-txt{padding:96px var(--pad);display:flex;flex-direction:column;gap:26px;justify-content:center;min-width:0}
.hw-txt .eyebrow{color:rgba(255,255,255,.72)}
.hw-txt h2 em{color:var(--accent-on-dark)}
.hw-txt p{color:rgba(255,255,255,.84);max-width:48ch}
.hw-txt ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hw-txt li{display:grid;grid-template-columns:14px 1fr;gap:14px;align-items:baseline;color:rgba(255,255,255,.9);font-size:16px}
.hw-txt li::before{content:"";width:10px;height:10px;background:var(--accent-on-dark)}

/* ───────── шесть правил ───────── */
.rules{background:var(--stone)}
.rules-g{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.rule{padding:30px 28px 34px 0;border-bottom:1px solid var(--rule);min-width:0}
.rule i{display:block;font:200 54px/1 "Onest";font-style:normal;letter-spacing:-.03em;color:var(--accent)}
.rule h3{font:500 20px/1.3 "Onest";margin:18px 0 8px}
.rule p{font-size:15px;color:var(--ink-2);max-width:34ch}

/* ───────── вопросы ───────── */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:400 21px/1.3 "Onest"}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg) translate(-3px,-3px);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 40px 24px 0;color:var(--ink-2);max-width:62ch}

/* ───────── формы и окно заявки ───────── */
.form .field{display:grid;gap:6px;font:500 11px/1 "Onest";letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form input.bad{border-color:#A33A2B}
.form .consent{display:flex;gap:10px;align-items:flex-start;font:400 13px/1.45 "Onest";color:var(--ink-2);cursor:pointer}
.form .consent input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}
.form .consent a{text-decoration:underline;text-underline-offset:2px}
.form .consent.bad{color:#A33A2B}
.form-msg{font-size:14px;min-height:0}
.form-msg.err{color:#A33A2B}
.form-done{display:grid;gap:6px;padding:14px 0;font-size:17px}
.form-done b{font:400 24px/1.2 "Onest"}
.form [hidden]{display:none!important}
dialog.modal{border:0;padding:0;width:min(520px,calc(100vw - 32px));background:var(--paper);color:var(--ink);box-shadow:0 60px 120px -40px rgba(0,0,0,.6)}
dialog.modal::backdrop{background:rgba(28,34,43,.55);backdrop-filter:blur(4px)}
dialog.modal[open]{animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal-in{padding:36px 36px 34px;position:relative}
.modal-in h3{font:300 32px/1.1 "Onest";letter-spacing:-.02em;margin:10px 40px 10px 0}
.modal-text{color:var(--ink-2);font-size:15px;margin-bottom:8px}
.modal .form{border:0;padding:0;box-shadow:none;background:none}
.modal .x{position:absolute;right:18px;top:18px;width:40px;height:40px;border:1px solid var(--rule);background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--ink)}
.mcta{display:none}

/* ───────── подвал ───────── */
.ftr{display:grid;grid-template-columns:auto 1fr;gap:16px 48px;align-items:start}
.ftr .logo-mark{width:120px}
.ftr p{margin:0;max-width:92ch}
.ftr a{text-decoration:underline;text-underline-offset:2px}

@media (max-width:860px){
  .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
  .hero .txt{order:1;max-width:none;height:auto;padding:34px var(--pad) 30px;gap:22px}
  .scene{order:2;position:relative;inset:auto;height:92vw;max-height:480px}
  .veil{display:none}.tag{bottom:14px;font-size:9px}.knob{width:48px;height:48px;margin:-24px 0 0 -24px}
  .sec{padding:60px var(--pad)}.sec-h{margin-bottom:32px}
  .kinds{grid-template-columns:1fr;gap:36px}
  .hidden-works{grid-template-columns:1fr}.bp{min-height:0;aspect-ratio:4/3}.hw-txt{padding:48px var(--pad) 56px}
  .rules-g{grid-template-columns:1fr}.rule{padding:24px 0 26px}.rule i{font-size:44px}
  .faq{grid-template-columns:1fr;gap:28px}.faq summary{font-size:18px;padding:18px 0}.faq details p{padding-right:0}
  .modal-in{padding:26px 22px}.modal-in h3{font-size:26px}
  .ftr{grid-template-columns:1fr}
  .mcta{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:40;justify-content:space-between;box-shadow:0 16px 40px -12px rgba(11,107,75,.6);transition:transform .5s var(--ease),opacity .4s}
  .mcta.off{transform:translateY(140%);opacity:0;pointer-events:none}
  body{padding-bottom:84px}
}
.form .consent{letter-spacing:0;text-transform:none}