/* /karetnaya-styazhka/ — новый дизайн (06.10.2026). Сборщик tools/build-service-pages.py, макет design-mockups/karetnaya-mock.html */
:root{--cu:#C8763C}
.ks .ui-wrap{max-width:1400px}
.k{font:12px Onest;letter-spacing:.3em;text-transform:uppercase;color:var(--cu)}
.h2{font:200 clamp(34px,4.6vw,72px)/1.05 Unbounded!important;letter-spacing:-.03em;color:var(--ui-strong);margin:18px 0 0;max-width:1150px}
.h2 em{font-style:normal;font-weight:300;color:var(--cu)}
.lead2{max-width:720px;margin-top:22px;font:300 18px/1.65 Onest;color:var(--ui-nav)}
.sec{padding-top:140px}
.dk{--ui-page:#0F0A08;--ui-card:#17100C;--ui-strong:#F5ECE2;--ui-text:#E9DFD3;--ui-nav:#CFC3B4;--ui-muted:#A08E7C;--ui-line:rgba(200,118,60,.18);--ui-field:rgba(255,240,225,.06);color:var(--ui-text)}

.tuft{--s:110px;--lx:50%;--ly:40%;position:relative;overflow:hidden;background-color:#3a1d0e;background-size:var(--s) var(--s);transition:background-size .45s}
.tuft::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,214,170,.22),transparent 42%),radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.55),transparent 60%);pointer-events:none}
/* 1. герой */
.hero{position:relative;overflow:hidden;background:#0b0705;min-height:min(100vh,920px);display:flex;align-items:flex-end}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;transform:scale(1.06);transition:transform .3s ease-out}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,7,5,.35),rgba(11,7,5,.15) 40%,rgba(11,7,5,.92));pointer-events:none}
.hero .ui-wrap{position:relative;z-index:1;width:100%;padding:120px 20px 56px}
.h1{font:200 clamp(46px,7vw,118px)/.95 Unbounded!important;letter-spacing:-.04em;color:#F5ECE2;margin:20px 0 0;max-width:1200px}
.h1 em{display:block;font-style:normal;font-weight:300;color:#F0B582;font-size:.42em;letter-spacing:-.01em;margin-top:18px}
.hero p{max-width:580px;margin-top:22px;font:300 18px/1.6 Onest;color:#E9DFD3}
.hero .ui-actions{margin-top:28px}
.press-x{position:absolute;right:6%;top:30%;z-index:1;display:flex;gap:10px;align-items:center;font:13px Onest;color:#F5ECE2;opacity:.85}
.press-x i{width:46px;height:46px;border-radius:50%;border:1px solid rgba(245,236,226,.5);display:grid;place-items:center;font-style:normal;animation:pr 2.4s infinite}
@keyframes pr{50%{transform:scale(.86);background:rgba(200,118,60,.35)}}

/* 2. бегущие названия */
.mq{overflow:hidden;border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);padding:24px 0;background:var(--ui-card)}
.mq div{display:flex;gap:56px;width:max-content;animation:mq 34s linear infinite;font:200 clamp(26px,3.2vw,48px) Unbounded;color:var(--ui-strong);white-space:nowrap}
.mq span:nth-child(even){color:var(--cu)}
@keyframes mq{to{transform:translateX(-50%)}}

/* 3. шаг пуговиц */
.stp{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;margin-top:50px}
.stp .tuft{height:460px;border-radius:28px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.stp .badge{position:absolute;left:20px;bottom:20px;padding:10px 16px;border-radius:999px;background:rgba(15,10,8,.8);font:14px Onest;color:#F5ECE2}
.rng{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,#8a5a34,var(--cu) 40%,var(--cu) 80%,#8a5a34);margin-top:36px}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:6px solid var(--cu);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:6px solid var(--cu);cursor:pointer}
.rv{display:flex;justify-content:space-between;margin-top:12px;font:13px Onest;color:var(--ui-muted)}
.cm{font:200 clamp(60px,6vw,96px)/1 Unbounded;color:var(--cu);letter-spacing:-.04em;margin-top:26px}
.cm small{font:300 18px Onest;color:var(--ui-nav);letter-spacing:0;margin-left:10px}
.verdict{margin-top:14px;font:300 17px/1.6 Onest;color:var(--ui-text);min-height:56px}
.verdict b{color:var(--cu);font-weight:500}

/* 4. настоящая / псевдо */
.sw{display:inline-flex;padding:6px;border-radius:999px;background:var(--ui-card);border:1px solid var(--ui-line);position:relative;margin-top:40px}
.sw button{position:relative;z-index:1;padding:14px 26px;border:0;background:none;font:15px Onest;color:var(--ui-nav);cursor:pointer;border-radius:999px;transition:color .3s}
.sw button.on{color:#fff}.sw .pill{position:absolute;top:6px;bottom:6px;left:6px;border-radius:999px;background:var(--cu);transition:all .45s cubic-bezier(.2,.8,.2,1)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:34px}
.cmp .tuft{height:380px;border-radius:26px;transition:filter .6s}

.cmp ul{list-style:none;padding:0;margin:0}
.cmp li{padding:18px 0;border-top:1px solid var(--ui-line);font:300 16px/1.6 Onest;color:var(--ui-nav)}
.cmp li b{display:block;font:300 19px Unbounded;color:var(--ui-strong);margin-bottom:4px}
.cmp .t-fake{display:none}.cmp.fake .t-fake{display:block}.cmp.fake .t-real{display:none}

/* 5. где делаем */
.where{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.where a{position:relative;aspect-ratio:3/4;border-radius:24px;overflow:hidden;background:#140D09;display:block}
.where img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.where a:hover img{transform:scale(1.05)}
.where a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,7,5,.9))}
.where span{position:absolute;left:22px;right:22px;bottom:22px;z-index:1;color:#F5ECE2}
.where span b{display:block;font:300 22px/1.2 Unbounded}.where span small{display:block;margin-top:8px;font:13px/1.5 Onest;color:#D9CDBF}

/* 6. цифры */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:50px}
@media(max-width:1180px){.facts{grid-template-columns:1fr 1fr}}   /* 15.10: на 1024 px «4–8 недель» уходил за край */
.facts div{padding:28px 24px;border-radius:22px;background:var(--ui-card);border:1px solid var(--ui-line)}
.facts b{display:block;font:200 clamp(30px,3.2vw,54px)/1 Unbounded;letter-spacing:-.04em;color:var(--ui-strong);white-space:nowrap}
.facts span{display:block;margin-top:12px;font:14px/1.5 Onest;color:var(--ui-nav)}

/* финал */
.fin{margin-top:140px}
.fin .ui-wrap{position:relative;z-index:1;padding:130px 20px;text-align:center}
.fin .h2{margin:18px auto 0}.fin p{margin:20px auto 0;max-width:560px;font:300 18px/1.6 Onest;color:#E9DFD3}
.fin .ui-actions{justify-content:center;margin-top:32px}
.fin::after{content:"";position:absolute;inset:0;background:rgba(11,7,5,.55)}

html[data-theme="light"] .facts div{background:#fff;box-shadow:0 10px 30px rgba(60,35,20,.06)}
@media(max-width:900px){.stp,.cmp{grid-template-columns:1fr}.stp .tuft{height:300px}.where{grid-template-columns:1fr 1fr}.facts{grid-template-columns:1fr 1fr}.press-x{display:none}.sec{padding-top:96px}}

/* 15.10: цифры не шире экрана — колонки сжимаются, на телефоне одна */
@media(max-width:1180px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.facts{grid-template-columns:1fr!important}}

/* текст SEO и FAQ (общие для страниц услуг) */
.sv-text{padding-top:150px}.sv-faq{padding-top:110px}
.ui-prose-body table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15px}
.ui-prose-body th,.ui-prose-body td{padding:12px 10px;border-bottom:1px solid var(--ui-line);text-align:left;vertical-align:top}
.ui-prose-body th{font-weight:500;color:var(--ui-strong)}
.ui-prose-body .sv-note{font-size:13px;color:var(--ui-muted);margin-top:-8px}
.ui-prose-body table{display:block;overflow-x:auto}
.ui-prose-body td:not(:first-child),.ui-prose-body th:not(:first-child){white-space:nowrap}
.ui-prose-body td:first-child{min-width:190px}
@media(max-width:900px){.sv-text{padding-top:100px}.sv-faq{padding-top:80px}.ui-prose-body table{font-size:13px}}
.sv-more{margin-top:22px;font:300 16px Onest;color:var(--ui-nav)}.sv-more a{color:var(--cu)}