/* Эвакуатор и манипулятор: один мотив — наклонная платформа-пандус (клин).
   Он режет фото, кнопки, маркеры, вкладки папок и разделительную полосу. */

@font-face{font-family:Rubik;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/rubik-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/rubik-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/rubik-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/rubik-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/rubik-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/rubik-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/rubik-cyrillic-700.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Rubik;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/rubik-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Цвета берём у предмета: асфальт, сигнальный жёлтый, оранжевый маячка, сталь, бетон */
:root{
  --night:#17181b; --night-2:#1f2125;
  --bg:#f1f1ee; --ink:#121315; --muted:#3b3d3a;
  --accent:#ffc400; --accent-ink:#121315;
  --f1:#ffc400; --f2:#ff6a1a; --f3:#a9c2d3; --f4:#d8d4c6;
  --blue:#14456d; --rust:#9a3a00;

  --gut:clamp(16px,4vw,72px);
  --rise:clamp(22px,3.4vw,52px);           /* высота клина (мотив) */
  --cut:polygon(0 0,100% 0,100% calc(100% - var(--rise)),calc(100% - var(--rise)*5) 100%,0 100%);

  --step-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-body:1.0625rem;
  --step-lead:clamp(1.1875rem,1.05rem + .6vw,1.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.55 Rubik,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Клин: маркер, один и тот же везде */
.wedge{display:inline-block;flex:none;width:.85em;height:.62em;background:var(--c,currentColor);clip-path:polygon(0 100%,100% 100%,100% 0);transform:translateY(.06em)}

/* Кнопка: правый край уходит клином */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 52px 0 30px;border:0;background:var(--night);color:var(--bg);font:600 1.0625rem/1 Rubik,system-ui,sans-serif;text-decoration:none;cursor:pointer;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 100%,0 100%);transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s;will-change:transform}
.btn:hover{transform:translateX(4px);background:#000}
.btn:active{transform:translateX(0) scale(.985)}
.btn:focus-visible{outline:3px solid currentColor;outline-offset:-8px}
.btn-wa{background:var(--night);color:var(--bg)}

/* ---------- Главный экран ---------- */
.hero{position:relative;display:flex;flex-direction:column;min-height:100svh;overflow:hidden;background:var(--night);color:var(--bg)}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px var(--gut) 0}
.brand{grid-column:2;display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
.mark{color:var(--accent)}
.top-tel{grid-column:3;justify-self:end;font-weight:500;font-size:1.0625rem;text-decoration:none;padding:6px 0}
.top-tel:hover{text-decoration:underline;text-underline-offset:4px}
.h1{margin:clamp(22px,3vw,44px) auto 0;padding:0 var(--gut);text-align:center;font-weight:600;font-size:clamp(2.5rem,7.2vw,7rem);line-height:1.02;letter-spacing:-.028em}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.h1 .ln>span{display:block}
.lead{max-width:46ch;margin:18px auto 0;padding:0 var(--gut);text-align:center;font-size:var(--step-lead);line-height:1.4;color:var(--bg)}

.stack{position:relative;flex:none;margin-top:clamp(22px,3.4vh,40px);height:clamp(400px,50vh,500px)}
.fold{position:absolute;left:var(--gut);right:var(--gut);top:calc(44px + var(--i)*54px);height:120svh;display:block;background:var(--c);color:var(--ink);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.f1{--c:var(--f3)} .f2{--c:var(--bg)} .f3{--c:var(--f4)} .f4{--c:var(--f2)} .f5{--c:var(--f1)}
a.fold:hover,a.fold:focus-visible{transform:translateY(-10px)}
a.fold:focus-visible{outline-offset:6px}
.tab{position:absolute;left:var(--tx);bottom:100%;display:flex;align-items:center;height:44px;padding:0 48px;background:var(--c);clip-path:polygon(0 100%,40px 0,calc(100% - 40px) 0,100% 100%);font-weight:600;font-size:1.0625rem;white-space:nowrap}
.front{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start;align-content:start;padding:28px 0 0 32px;height:100%}
.front-act{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:2px}
.tel-link{font-weight:500;font-size:1.0625rem;text-underline-offset:4px}
.tel-link:hover{text-decoration-thickness:3px}
.front-pic{width:100%;height:clamp(150px,22vh,200px);object-fit:cover;object-position:30% 55%;clip-path:polygon(calc(var(--rise)*2) 0,100% 0,100% 100%,0 100%);margin-top:-4px}

/* ---------- Общее для секций ---------- */
.sec{position:relative}
h2{font-weight:600;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}

/* ---------- Что мы делаем ---------- */
.s-uslugi{background:var(--f3);color:var(--ink);padding:clamp(72px,9vw,136px) 0}
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5.5vw,96px);align-items:start}
.feat-pic{position:sticky;top:10vh;height:min(78svh,820px);min-height:460px;overflow:hidden;clip-path:var(--cut)}
.feat-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;will-change:transform}
.feat-body{padding-right:var(--gut)}
.feat h2{font-size:clamp(2rem,3.5vw,3.125rem)}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px;margin-top:clamp(36px,4vw,56px)}
.pts li:nth-child(3n+1){--c:var(--night)}
.pts li:nth-child(3n+2){--c:var(--blue)}
.pts li:nth-child(3n){--c:var(--rust)}
.pts h3{display:flex;gap:.6em;align-items:flex-start;font-weight:600;font-size:1.1875rem;line-height:1.3;letter-spacing:-.01em}
.pts h3 .wedge{margin-top:.28em}
.pts p{margin-top:10px;padding-left:1.45em;font-size:var(--step-body);line-height:1.5;color:var(--ink)}

/* ---------- Как мы работаем: по одному глаголу ---------- */
.s-kak{background:var(--night)}
.panel{position:relative;isolation:isolate;height:100svh;min-height:560px;overflow:clip;color:var(--bg);background:var(--night)}
.pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
.p1 .pimg{object-position:50% 40%}
.p3 .pimg{object-position:35% 55%}
.p4 .pimg{object-position:50% 38%}
.panel:not(.p2)::after{content:"";position:absolute;inset:0;background:rgba(18,19,21,.42);z-index:1}
.p2{background:#1c1e22}
.scene{position:absolute;inset:0}
.scene svg{width:100%;height:100%}
.verbwrap{position:sticky;top:50%;z-index:3;height:0;display:flex;justify-content:center;pointer-events:none}
.verb{align-self:flex-start;transform:translateY(-50%);font-weight:700;font-size:clamp(4.5rem,17vw,16rem);line-height:.9;letter-spacing:-.035em;color:var(--accent);text-align:center}
.psay{position:absolute;z-index:3;left:0;bottom:0;max-width:min(54ch,100%);padding:28px calc(var(--rise)*3) 28px var(--gut);background:var(--night);color:var(--bg);font-size:1.1875rem;line-height:1.5;clip-path:polygon(0 0,calc(100% - var(--rise)*3) 0,100% 100%,0 100%)}

/* ---------- Что возим: меню с фото вместо маркеров ---------- */
.s-chto{background:var(--f4);color:var(--ink);padding:0 var(--gut) clamp(72px,9vw,136px)}
.cat{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:clamp(64px,8vw,112px) 0 clamp(24px,3vw,40px)}
.cat h2{font-size:clamp(2rem,3.5vw,3.125rem)}
.cnt{font-size:var(--step-small);font-weight:500}
.menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px clamp(32px,4.4vw,64px)}
.item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start;transition:opacity .24s}
.bul{width:64px;height:64px;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
.itl{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.item h3{font-weight:600;font-size:1.1875rem;line-height:1.3;letter-spacing:-.01em}
.item p{margin-top:6px;max-width:38ch;font-size:var(--step-body);line-height:1.5}
.note{color:var(--rust);font-weight:500;font-size:var(--step-small)!important}
.ask{flex:none;display:inline-flex;align-items:center;gap:.5em;padding:6px 0;border:0;background:none;font-weight:600;font-size:1.0625rem;cursor:pointer;color:var(--ink)}
.ask .wedge{--c:var(--rust);transition:transform .2s}
.ask:hover .wedge,.ask:focus-visible .wedge{transform:translate(4px,-3px) scale(1.2)}
.ask:hover{text-decoration:underline;text-underline-offset:4px}
@media (hover:hover){
  .menu:has(.item:hover) .item:not(:hover){opacity:.38}
  .menu:has(.item:focus-within) .item:not(:focus-within){opacity:.38}
}
.peek{position:fixed;z-index:30;right:var(--gut);top:50%;width:min(28vw,420px);aspect-ratio:4/3;margin:0;background:var(--night);clip-path:var(--cut);opacity:0;transform:translateY(calc(-50% + 14px));transition:opacity .24s,transform .24s;pointer-events:none;overflow:hidden}
.peek.on{opacity:1;transform:translateY(-50%)}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .24s}
.peek .pb{opacity:0}
.peek.flip .pa{opacity:0}
.peek.flip .pb{opacity:1}
@media (min-width:1101px){.s-chto .menu,.s-chto .cat{margin-right:calc(min(28vw,420px) + 56px)}}
@media (hover:none),(max-width:1100px){.peek{display:none}}

/* ---------- Полоса-пандус: стрела манипулятора ---------- */
.band{position:relative;background:var(--night);clip-path:polygon(0 clamp(40px,6vw,96px),100% 0,100% 100%,0 100%);margin-top:calc(-1*clamp(40px,6vw,96px))}
.crane{width:100%;height:auto;aspect-ratio:1600/520}

/* ---------- Заявка: купон ---------- */
.s-zayavka{background:var(--f2);color:var(--ink);padding:clamp(56px,7vw,112px) var(--gut) clamp(72px,9vw,136px)}
.coupon{position:relative;display:grid;grid-template-columns:46fr 54fr;width:min(100%,1120px);margin:0 auto;background:var(--night);color:var(--bg)}
.notch{position:absolute;left:46%;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:var(--f2);z-index:2}
.n1{top:-15px}.n2{bottom:-15px}
.c-perf{position:absolute;left:46%;top:18px;bottom:18px;border-left:5px dotted var(--f2);margin-left:-2px}
.c-left{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:clamp(28px,3.6vw,52px);padding-right:clamp(28px,4vw,60px)}
.c-left h2{font-size:clamp(1.75rem,3.5vw,3.125rem);color:var(--accent)}
.c-left p{font-size:1.0625rem;line-height:1.55;max-width:34ch}
.c-left a{font-weight:600;white-space:nowrap}
.c-right{display:flex;flex-direction:column;gap:10px;padding:clamp(28px,3.6vw,52px);padding-left:clamp(28px,4vw,60px)}
.chips{display:flex;gap:10px;margin:0 0 6px;padding:0;border:0}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 34px 0 20px;background:#2b2e33;color:var(--bg);font-weight:500;font-size:1.0625rem;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 100%,0 100%);cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
.chip:hover span{transform:translateX(3px)}
.chip input:checked+span{background:var(--accent);color:var(--accent-ink)}
.chip input:focus-visible+span{outline:3px solid var(--bg);outline-offset:-6px}
.field{width:100%;height:52px;padding:0 18px;border:0;border-radius:0;background:#2b2e33;color:var(--bg);font-size:1.0625rem;transition:background-color .2s,outline-color .2s}
.field::placeholder{color:#b6b8ba;opacity:1}
.field:hover{background:#33363c}
.field:focus{outline:3px solid var(--accent);outline-offset:-3px;background:#33363c}
.btn-send{width:100%;height:56px;margin-top:6px;padding:0 40px 0 24px;background:var(--accent);color:var(--accent-ink);justify-content:center}
.btn-send:hover{background:#ffd23d}
.preview{margin-top:10px;min-height:3em;max-width:56ch;font-size:var(--step-small);line-height:1.45;color:#c9cbcc}
.preview b{color:var(--bg);font-weight:500}

/* ---------- Подвал и плавающая кнопка ---------- */
.foot{background:var(--night);color:var(--bg);padding:clamp(40px,5vw,72px) var(--gut)}
.foot-in{display:grid;grid-template-columns:auto 1fr;gap:20px 48px;align-items:center;max-width:1280px;margin:0 auto}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--bg)}
.foot-brand svg{color:var(--accent)}
.foot-contacts{display:flex;gap:28px;justify-content:flex-end;font-weight:500}
.foot-contacts a{text-underline-offset:4px}
.credits{grid-column:1/-1;max-width:64ch;font-size:var(--step-small);line-height:1.55;color:#c9cbcc}

.wa-float{position:fixed;z-index:40;right:var(--gut);bottom:18px;min-height:52px;opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s;background:var(--accent);color:var(--accent-ink)}
.wa-float.show{opacity:1;transform:none;pointer-events:auto}
.wa-float.show:hover{transform:translateX(4px);background:#ffd23d}

/* ---------- Телефон ---------- */
@media (max-width:900px){
  .top{grid-template-columns:auto 1fr;gap:12px}
  .brand{grid-column:1;font-size:1rem}
  .top-tel{grid-column:2}
  .h1{font-size:clamp(2.25rem,12.4vw,4rem);margin-top:28px}
  .lead{font-size:1.0625rem;margin-top:16px}
  .stack{height:clamp(380px,50svh,460px)}
  .fold{top:calc(34px + var(--i)*44px)}
  .tab{left:var(--txm);height:34px;padding:0 34px;font-size:.9375rem;clip-path:polygon(0 100%,28px 0,calc(100% - 28px) 0,100% 100%)}
  .front{grid-template-columns:1fr;gap:14px;padding:22px 16px 0}
  .front-act .btn{width:100%}
  .front-pic{width:100%;height:auto;aspect-ratio:1280/470;margin-top:0;clip-path:polygon(calc(var(--rise)*2) 0,100% 0,100% 100%,0 100%)}
  .feat{grid-template-columns:1fr;gap:28px}
  .feat-pic{position:relative;top:0;width:82vw;height:min(60svh,460px);min-height:0;margin-left:0}
  .feat-body{padding:0 var(--gut)}
  .pts{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .pts p{padding-left:1.45em}
  .verb{font-size:clamp(3.25rem,20vw,6rem)}
  .psay{width:100%;max-width:none;padding:22px var(--gut);font-size:1.0625rem;clip-path:none}
  .menu{grid-template-columns:1fr;gap:28px}
  .item{grid-template-columns:52px minmax(0,1fr);gap:16px}
  .bul{width:52px;height:52px}
  .cat h2{font-size:clamp(2rem,8.5vw,2.75rem)}
  .cat{padding-top:56px}
  .coupon{grid-template-columns:1fr}
  .notch{display:none}
  .c-perf{position:relative;left:auto;top:auto;bottom:auto;height:0;margin:0 18px;border-left:0;border-top:5px dotted var(--f2)}
  .c-perf::before,.c-perf::after{content:"";position:absolute;top:-17px;width:30px;height:30px;border-radius:50%;background:var(--f2)}
  .c-perf::before{left:-33px}
  .c-perf::after{right:-33px}
  .c-left{padding:28px 20px 36px}
  .c-right{padding:34px 20px 28px}
  .chips{flex-wrap:wrap}
  .foot-in{grid-template-columns:1fr}
  .foot-contacts{justify-content:flex-start}
  .wa-float{left:var(--gut);right:var(--gut);bottom:12px;width:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important}
}