/* Start:/local/assets/dveryaninov-redesign/services.css?179185161210542*/
/* Page-only styles. Original header and footer retain their own stylesheet.
   05.10.2026: правила старого первого экрана (.dv-hero, .dv-service-nav) убраны —
   первый экран пересобран в svc-hero.css. Бордовый макета #611025 приведён к фирменному
   #8C1F3B, наведение — к #6E1630 (DESIGN.md: «the mockup's #611025 was mapped onto the brand burgundy»). */
html{scroll-behavior:smooth;scroll-padding-top:28px}
.dv-services{--dv-burgundy:#8C1F3B;--dv-ink:#252123;--dv-muted:#777173;--dv-line:#dedadb;--dv-paper:#f5f3f3;color:var(--dv-ink);font-family:Manrope,Arial,sans-serif;background:#fff;font-size:16px;line-height:1.6;overflow:clip}
.dv-services *{box-sizing:border-box}
.dv-services h1,.dv-services h2,.dv-services h3,.dv-services p{margin:0}
.dv-services a{color:inherit;text-decoration:none}
.dv-services button{font:inherit;cursor:pointer}
.dv-services button:focus-visible,.dv-services a:focus-visible,.dv-services summary:focus-visible{outline:3px solid #c08091;outline-offset:6px}
.dv-services img{display:block;width:100%;height:100%;object-fit:cover}
.dv-services h2{font-size:clamp(36px,3.55vw,58px);font-weight:500;line-height:1.12;letter-spacing:-.045em}
.dv-services h2>span{color:var(--dv-muted)}
.dv-eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;line-height:1.5;display:flex;align-items:center;gap:10px}
.dv-eyebrow>span{width:6px;height:6px;background:currentColor;border-radius:100%}
.dv-button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;padding:16px 24px;border:1px solid transparent;border-radius:3px;font-size:15px;font-weight:600;transition:background .2s,transform .25s,box-shadow .25s}
.dv-button>span{font-size:23px;line-height:1;transition:transform .3s}
.dv-button:hover>span{transform:translate(3px,-3px)}
.dv-section{padding:112px 6.4%;max-width:1680px;margin:auto}
.dv-services-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:9%}
.dv-section-intro{align-self:start;position:sticky;top:44px}
.dv-section-intro h2{margin:24px 0}
.dv-section-intro>p{color:var(--dv-muted);line-height:1.8}
.dv-text-link{display:flex;width:fit-content;gap:26px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:8px;font-size:14px;font-weight:600;transition:color .25s}
.dv-text-link span{margin-left:auto;transition:transform .25s;font-size:20px}
.dv-text-link:hover{color:#6E1630}
.dv-text-link:hover span{transform:translate(3px,-3px)}
.dv-section-intro>.dv-text-link{margin-top:32px;color:var(--dv-burgundy)}
.dv-detail{border-top:1px solid var(--dv-line);scroll-margin-top:30px}
.dv-detail:last-child{border-bottom:1px solid var(--dv-line)}
.dv-detail summary{list-style:none;display:flex;align-items:center;gap:22px;cursor:pointer;padding:27px 0;transition:color .2s}
.dv-services summary::-webkit-details-marker{display:none}
.dv-detail summary h3{font-size:clamp(19px,1.75vw,27px);font-weight:500;letter-spacing:-.025em}
.dv-detail-no{font-size:12px;color:#8d8588}
.dv-plus{position:relative;display:block;width:20px;height:20px;flex:0 0 20px;margin-left:auto}
.dv-plus:before,.dv-plus:after{content:"";position:absolute;left:3px;right:3px;top:9px;height:1px;background:currentColor;transition:transform .3s}
.dv-plus:after{transform:rotate(90deg)}
details[open]>summary .dv-plus:after{transform:rotate(0deg)}
.dv-detail[open] summary,.dv-detail summary:hover{color:var(--dv-burgundy)}
.dv-detail-body{padding:0 0 30px 38px;color:#665f62;font-size:16px}
.dv-detail-body>p{max-width:560px;line-height:1.85}
.dv-tags{display:flex;flex-wrap:wrap;gap:7px;margin:23px 0}
.dv-tags span{padding:6px 10px;border:1px solid var(--dv-line);border-radius:2px;font-size:12px;color:#6c6467}
.dv-service-result{border-left:2px solid #b48592;padding:4px 0 4px 17px;margin:22px 0}
.dv-service-result>span{font-size:11px;letter-spacing:.1em;color:#8b5b69}
.dv-service-result>p{margin-top:7px;font-size:14px;line-height:1.7}
.dv-detail-body>.dv-text-link{color:var(--dv-burgundy)}
details[open]>.dv-detail-body,details[open]>div{animation:dv-open .3s ease both}
.dv-production{display:grid;grid-template-columns:1fr 1fr;background:#f4f2f1}
.dv-production-photo{position:relative;min-height:600px;overflow:hidden}
.dv-production-photo>img{position:absolute;inset:0;transition:transform 1s}
.dv-production-photo:hover>img{transform:scale(1.025)}
.dv-image-label{position:absolute;bottom:28px;left:30px;padding:9px 13px;background:#ffffffea;color:#333;font-size:11px;letter-spacing:.09em}
.dv-production-copy{padding:72px clamp(30px,6vw,100px)}
.dv-production-copy>h2{margin:27px 0}
.dv-production-copy>p{max-width:440px;color:var(--dv-muted);line-height:1.85}
.dv-specs{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:34px 0}
.dv-specs>div{display:flex;flex-direction:column;border-top:1px solid #d7d0d0;padding-top:15px}
.dv-specs strong{font-size:40px;font-weight:500;color:var(--dv-burgundy);letter-spacing:-.05em}
.dv-specs small{font-size:20px}
.dv-specs span{font-size:12px;color:var(--dv-muted)}
.dv-services .dv-burgundy{color:white;background:var(--dv-burgundy)}
.dv-burgundy:hover{background:#6E1630!important}
.dv-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px}
.dv-section-heading h2{margin-top:24px}
.dv-section-heading>p{color:var(--dv-muted);padding-bottom:8px}
.dv-steps{display:grid;grid-template-columns:repeat(4,1fr);padding:0;list-style:none;margin:58px 0 0;gap:28px}
.dv-steps li{border-top:1px solid #c9bec1;padding-top:20px}
.dv-steps li>span{font-size:14px;color:var(--dv-burgundy)}
.dv-steps h3{font-size:20px;font-weight:500;line-height:1.4;margin:24px 0 13px;letter-spacing:-.02em}
.dv-steps p{font-size:14px;line-height:1.85;color:var(--dv-muted)}
.dv-faq{border-top:1px solid var(--dv-line);display:grid;grid-template-columns:1fr 1.15fr;gap:9%;padding-top:80px;padding-bottom:90px}
.dv-faq h2{margin-top:24px}
.dv-faq-item{border-bottom:1px solid var(--dv-line)}
.dv-faq-item:first-child{border-top:1px solid var(--dv-line)}
.dv-faq-item summary{display:flex;align-items:center;list-style:none;cursor:pointer;gap:28px;font-size:16px;font-weight:500;padding:22px 0}
.dv-faq-item summary:hover{color:var(--dv-burgundy)}
.dv-faq-item>div{padding:0 35px 24px 0;color:var(--dv-muted);font-size:15px;line-height:1.8}
.dv-contact{display:grid;grid-template-columns:1.25fr 1fr;padding:0 6.4% 90px;gap:0}
.dv-contact-copy{padding:52px;background:#f3edef}
.dv-contact h2{margin:25px 0 20px}
.dv-contact h2 span{color:var(--dv-burgundy)}
.dv-contact-copy>p{color:var(--dv-muted)}
.dv-contact-options{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}
.dv-contact-options button{padding:9px 13px;border:1px solid #cbbfc3;background:transparent;border-radius:3px;font-size:13px;transition:color .2s,background .2s,border-color .2s}
.dv-contact-options button[aria-pressed=true]{color:var(--dv-burgundy);border-color:var(--dv-burgundy);background:#fff}
.dv-contact-options button:hover{border-color:var(--dv-burgundy)}
.dv-contact-phone{display:block;width:fit-content;font-size:24px;font-weight:500;margin-top:24px;letter-spacing:-.025em}
.dv-contact-hours{font-size:12px;margin-top:5px!important}
.dv-showroom{padding:52px;background:#edeae7;display:flex;flex-direction:column}
.dv-showroom h3{font-size:clamp(25px,2.3vw,37px);font-weight:500;line-height:1.27;letter-spacing:-.035em;margin:33px 0 20px}
.dv-showroom>p{font-size:14px;color:#79726e;line-height:1.8}
.dv-showroom-address{margin:26px 0}
.dv-showroom-address>span{font-size:11px;color:#847e7a;letter-spacing:.1em}
.dv-showroom-address>p{font-size:16px;line-height:1.6;margin-top:9px}
.dv-showroom>.dv-text-link{margin-top:16px;color:var(--dv-burgundy)}
.dv-reveal{opacity:1;transform:none}
.dv-motion .dv-reveal{transition:opacity .65s cubic-bezier(.2,.6,.2,1),transform .65s cubic-bezier(.2,.6,.2,1)}
.dv-motion .dv-reveal.dv-pending{opacity:0;transform:translateY(23px)}
@keyframes dv-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.dv-section{padding:80px 35px}
.dv-services-grid,.dv-faq{gap:6%;grid-template-columns:.85fr 1.15fr}
.dv-production-copy{padding:50px 35px}
.dv-production-photo{min-height:580px}
.dv-contact{padding:0 35px 65px}
.dv-contact-copy,.dv-showroom{padding:35px}
.dv-steps{gap:20px}
.dv-steps h3{font-size:18px}
}
@media(max-width:760px){.dv-section{padding:65px 24px}
.dv-services h2{font-size:38px}
.dv-services-grid,.dv-faq{grid-template-columns:1fr;gap:38px}
.dv-section-intro{position:static}
.dv-section-intro h2{margin:22px 0}
.dv-section-intro h2 br:last-of-type{display:none}
.dv-detail summary{gap:15px;padding:22px 0}
.dv-detail summary h3{font-size:19px}
.dv-detail-body{padding-left:30px;font-size:15px}
.dv-production{grid-template-columns:1fr}
.dv-production-photo{min-height:380px;max-height:480px}
.dv-production-copy{padding:45px 24px}
.dv-production-copy h2{font-size:43px}
.dv-specs{max-width:400px}
.dv-section-heading{display:block}
.dv-section-heading>p{margin-top:24px}
.dv-steps{grid-template-columns:1fr 1fr;gap:32px 23px;margin-top:35px}
.dv-steps h3{margin-top:17px}
.dv-faq{padding-top:55px;padding-bottom:55px}
.dv-faq h2 br{display:none}
.dv-faq-item summary{font-size:15px;gap:18px}
.dv-contact{grid-template-columns:1fr;padding:0 0 0}
.dv-contact-copy,.dv-showroom{padding:42px 24px}
.dv-showroom h3{font-size:32px;margin-top:26px}
.dv-contact h2{font-size:45px}
.dv-eyebrow{font-size:11px}
.dv-button{min-height:54px;font-size:14px}
.dv-contact-options button{font-size:13px}
.dv-image-label{left:24px;font-size:10px}
}
@media(max-width:390px){.dv-desktop{display:none}
.dv-detail summary h3{font-size:17px}
.dv-steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.dv-services *{animation:none!important;transition:none!important}
.dv-motion .dv-reveal.dv-pending{opacity:1;transform:none}
}
/* Keep the original sticky header clear of in-page destinations. */
html{scroll-padding-top:130px}
.dv-section-intro{top:135px}
@media(max-width:760px){html{scroll-padding-top:105px}
}
.dv-steps p,.dv-faq-item>div,.dv-showroom>p{font-size:16px}
.dv-contact-options button,.dv-tags span{font-size:14px}
/* 13.10.2026: подписи «01 / …» над заголовками убраны — и отступ, рассчитанный на них. */
.dv-services h2:first-child{margin-top:0}
.dv-showroom h3{font-size:clamp(24px,2vw,32px);text-wrap:balance}

/* End */


/* Start:/local/assets/dveryaninov-redesign/layout.css?17912288813124*/
/* One content grid for every redesigned route, aligned with the native header. */
:root{--dv-grid-max:1440px;--dv-grid-pad:clamp(12px,3vw,40px);--dv-grid-edge:max(var(--dv-grid-pad),calc((100% - var(--dv-grid-max))/2 + var(--dv-grid-pad)));--dv-grid-gap:clamp(24px,4vw,56px)}
.dv-services{width:100%;max-width:none;margin:0;min-width:0}
.dv-services>.dv-section{width:100%;max-width:none;margin-inline:0;padding-inline:var(--dv-grid-edge)}
.dv-services>:is(.dv-service-nav,.dv-storage-band,.dv-contact,.dx-facts,.dx-lead-section,.dx-salon-strip,.dx-contact-hero,.dx-visit-callout,.dx-salons-hero,.dx-visit-prep,.dx-salon-final,.da-coatings,.da-storage,.da-end,.dp-breadcrumb,.dp-hero,.dp-section-nav,.dp-detail-band,.dp-order,.dp-help,.dc-heading,.dc-layout,.dc-after){padding-inline:var(--dv-grid-edge)}
/* Edge-to-edge surfaces retain the same inner content boundaries. */
.dv-services>:is(.dv-hero,.dx-home-hero,.da-hero,.dv-production,.dx-collection,.dx-tryon,.da-size){padding-inline:var(--dv-grid-edge);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.dv-services :is(.dv-hero-copy,.dx-home-intro,.da-intro,.dx-collection-content){padding-left:0;padding-right:var(--dv-grid-gap)}
.dv-services :is(.dv-production-copy,.dx-tryon-copy,.da-size-copy){padding-left:var(--dv-grid-gap);padding-right:0}
.dv-services .dx-showroom-section{width:calc(100% - 2 * var(--dv-grid-edge));max-width:1360px;margin-inline:auto}
.dv-services :is(.dv-services-grid,.dv-faq,.dx-lead-section,.dx-requisites,.dx-appeals,.dx-salon-faq,.dp-specs){column-gap:var(--dv-grid-gap)}
.dv-services :is(.dx-model-grid,.dx-project-grid,.da-materials,.da-checks,.dv-steps,.dp-detail-band,.dp-order-grid){gap:clamp(20px,2.25vw,32px)}
.dv-services :is(.dx-section-head,.dv-section-heading){width:100%}
.dv-services :is(.dp-info){padding-left:var(--dv-grid-gap);padding-right:0}
.dv-services :is(.dv-contact-copy,.dv-showroom,.dx-showroom-card){padding-inline:clamp(24px,3vw,40px)}
.dv-services :is(.dv-hero-copy,.dx-home-intro,.da-intro,.dv-production-copy,.dx-tryon-copy,.da-size-copy,.dp-info,.dc-items,.dc-summary){min-width:0}
/* Avoid nested max-width rules moving only some section edges. */
@media(min-width:1700px){.dv-services .dv-hero-copy{padding-left:0}}
@media(max-width:1050px){.dv-services .dv-section{padding-inline:var(--dv-grid-edge)}.dv-services .dv-service-nav{padding-inline:var(--dv-grid-edge)}}
@media(max-width:760px){
 :root{--dv-grid-gap:28px}
 .dv-services>:is(.dv-hero,.dx-home-hero,.da-hero,.dv-production,.dx-collection,.dx-tryon,.da-size){grid-template-columns:minmax(0,1fr)}
 .dv-services :is(.dv-hero-copy,.dx-home-intro,.da-intro,.dx-collection-content,.dv-production-copy,.dx-tryon-copy,.da-size-copy){padding-inline:0}
 .dv-services .dp-info{padding-inline:0}
 .dv-services .dv-contact{padding-inline:var(--dv-grid-edge);padding-bottom:40px}
 .dv-services .dx-showroom-section{margin-inline:auto}
 .dv-services .dp-section-nav{padding-inline:var(--dv-grid-edge)}
 .dv-services :is(.dv-photo-caption,.dx-photo-note,.da-hero-image>span){left:20px}
 .dv-services .dv-hero-secondary{margin-left:0;display:flex}
}

/* End */


/* Start:/local/assets/dveryaninov-redesign/svc-hero.css?17912311799017*/
/* ==========================================================================
   Первый экран /services/ (05.10.2026)

   Пересобран по замечанию заказчика к компоновке. Было: бордовая заливка на
   половину экрана (DESIGN.md: бордовый — только интерактив), механический
   сплит 50/50 с фото, обрезанным до квадрата, и сами услуги — отдельной
   полосой уже за пределами экрана.

   Стало — три яруса одного объекта:
     1. заголовок и короткий ответ «что делаем» с действием, на тёплом фоне;
     2. панорама интерьера на всю ширину: снимок широкий (1900×740), и квадрат
        выбрасывал всю его глубину;
     3. порог: белая планка с четырьмя услугами лежит на нижней кромке фото.
        Это и есть оглавление страницы — на странице «Услуги» главное должно
        быть видно сразу, а не после прокрутки.

   Сетка — та же, что у шапки сайта (layout.css: --dv-grid-edge).
   ========================================================================== */

.dv-services .dv-svc {
  --svc-warm: #F7F5F2;
  --svc-ink: #1A1A1A;
  --svc-soft: #6B6B6B;
  --svc-line: #E0DDDA;
  --svc-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  background: linear-gradient(var(--svc-warm) 0 calc(100% - var(--svc-plinth-overlap)), #fff 0);
  --svc-plinth-overlap: 56px;
}

/* ---------- 1. Заголовок ---------- */

.dv-svc__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: var(--dv-grid-gap);
  /* Заголовок прибит к верху вместе с правой колонкой (просьба заказчика: по
     нижнему краю он «висел» под пустотой и выглядел случайно). */
  align-items: start;
  padding: clamp(20px, 2.4vw, 36px) var(--dv-grid-edge) clamp(28px, 3vw, 44px);
}

.dv-svc__crumbs {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-bottom: clamp(16px, 2vw, 28px);
  font-size: 13px;
  line-height: 1.4;
  color: var(--svc-soft);
}
.dv-svc__crumbs a { transition: color .2s; }
.dv-svc__crumbs a:hover { color: var(--dv-burgundy); }
.dv-svc__crumbs [aria-current] { color: var(--svc-ink); }

.dv-services .dv-svc__title {
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.04em;
  color: var(--svc-ink);
  text-wrap: balance;
}
/* Строка — маска для подъёма текста при появлении (svc-hero.js). */
.dv-svc__line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.dv-svc__line > span { display: inline-block; }
.dv-svc__soft { color: var(--svc-soft); }

/* Отступ сверху — чтобы первая строка текста встала вровень с верхом букв заголовка. */
.dv-svc__aside { display: grid; gap: 26px; padding-top: clamp(4px, .75vw, 12px); }
.dv-svc__lead { max-width: 40ch; font-size: 17px; line-height: 1.65; color: #4A4646; }

.dv-svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.dv-services .dv-svc__cta {
  min-height: 52px;
  padding: 0 22px 0 24px;
  gap: 18px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dv-svc__cta svg { width: 16px; height: 16px; transition: transform .3s var(--svc-ease); }
.dv-svc__cta:hover svg { transform: translate(2px, -2px); }

.dv-svc__phone { display: grid; gap: 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dv-svc__phone small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--svc-soft); }
.dv-svc__phone:hover { color: var(--dv-burgundy); }

/* ---------- 2. Панорама ---------- */

.dv-svc__photo { margin: 0; }
.dv-svc__frame {
  position: relative;
  /* Высота — почти естественная пропорция снимка (1900×740 ≈ 2,57:1 → 39vw),
     но не больше 62% экрана: панорама читается целиком, а не полосой. */
  height: clamp(320px, min(62vh, 37vw), 680px);
  overflow: hidden;
  background: #D9D3CC;            /* тон стены на снимке: пока грузится — не белая дыра */
}
/* Снимок выше рамки на 10%: запас для лёгкого параллакса при прокрутке. */
.dv-svc__frame img {
  position: absolute;
  inset: -5% 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 62% 46%;
}

/* ---------- 3. Порог: услуги ---------- */

.dv-svc__services {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: calc(var(--svc-plinth-overlap) * -1) var(--dv-grid-edge) 0;
  background: #fff;
  border: 1px solid var(--svc-line);
  border-radius: 4px;
  box-shadow: 0 18px 40px -24px rgba(40, 30, 24, .28);
}
.dv-svc__service {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-content: center;
  min-height: 112px;
  padding: 22px clamp(18px, 2vw, 30px);
  transition: background .25s, color .25s;
}
.dv-svc__service + .dv-svc__service::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--svc-line);
}
.dv-svc__service strong { font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.dv-svc__service span { grid-column: 1; font-size: 14px; line-height: 1.45; color: var(--svc-soft); }
.dv-svc__service svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--svc-soft);
  transition: transform .35s var(--svc-ease), color .25s;
}
.dv-svc__service:hover { background: var(--svc-warm); }
/* Общая рамка фокуса страницы стоит с отступом 6px и залезала бы на соседний пункт. */
.dv-services .dv-svc__service:focus-visible { outline-offset: -3px; }
.dv-svc__service:hover strong,
.dv-svc__service:hover svg { color: var(--dv-burgundy); }
.dv-svc__service:hover svg { transform: translateY(3px); }
.dv-svc__service:first-child { border-radius: 4px 0 0 4px; }
.dv-svc__service:last-child { border-radius: 0 4px 4px 0; }

/* ---------- Появление (только при разрешённой анимации) ----------
   До запуска GSAP элементы появления скрыты, иначе текст мелькнул бы и
   исчез, а фото — показалось бы целиком и захлопнулось. Страховка: если
   скрипт не загрузился, через 2,5 с всё показывает CSS-анимация. */
@media (prefers-reduced-motion: no-preference) {
  .dv-js .dv-svc [data-svc-intro] { visibility: hidden; animation: svc-failsafe 0s 2.5s forwards; }
  .dv-js .dv-svc__frame { clip-path: inset(0 50% 0 50%); animation: svc-failsafe-open 0s 2.5s forwards; }
}
@keyframes svc-failsafe { to { visibility: visible; } }
@keyframes svc-failsafe-open { to { clip-path: inset(0 0 0 0); } }

/* ---------- Адаптив ---------- */

@media (max-width: 1050px) {
  .dv-svc__head { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .dv-svc__service { min-height: 100px; }
  .dv-svc__service span { font-size: 13px; }
}

@media (max-width: 760px) {
  .dv-services .dv-svc { --svc-plinth-overlap: 0px; background: var(--svc-warm); }
  .dv-svc__head { padding-bottom: 30px; row-gap: 22px; }
  .dv-services .dv-svc__title { font-size: clamp(34px, 9.4vw, 44px); }
  .dv-svc__lead { font-size: 16px; }
  .dv-services .dv-svc__cta { flex: 1 1 100%; justify-content: space-between; }
  .dv-svc__frame { height: clamp(260px, 74vw, 400px); }
  .dv-svc__frame img { object-position: 74% 50%; }
  /* Порог на телефоне — список под фото, без наложения: на узком экране
     планка перекрыла бы половину снимка. */
  .dv-svc__services {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    padding: 4px var(--dv-grid-edge) 8px;
  }
  .dv-svc__service { min-height: 0; padding: 18px 0; border-radius: 0 !important; }
  .dv-svc__service + .dv-svc__service::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .dv-svc__service:hover { background: transparent; }
}

/* End */


/* Start:/local/assets/dveryaninov-redesign/svc-page.css?179185173215124*/
/* ==========================================================================
   /services/ — блок «Ремонт затянулся?», каналы связи, микро-анимации
   (05.10.2026, правки заказчика к первой версии страницы).
   ========================================================================== */

/* Подписи над заголовками и метки — капсом через CSS, а не в тексте: так их
   можно читать и править как обычные слова. */
.dv-services .dv-eyebrow,
.dv-services .dv-service-result > span,
.dv-services .dv-showroom-address > span,
.dv-services .dv-image-label { text-transform: uppercase; }

/* Ссылки-действия стали кнопками (открывают форму) — сбрасываем вид кнопки. */
.dv-services button.dv-text-link {
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: var(--dv-burgundy);
  text-align: left;
}
.dv-services .dv-text-link svg,
.dv-services .dv-button > span svg { width: 16px; height: 16px; display: block; }
.dv-services .dv-button > svg { width: 16px; height: 16px; flex: none; transition: transform .3s; }
.dv-services .dv-button:hover > svg { transform: translate(2px, -2px); }

/* ---------- Каналы связи ---------- */

.dv-contact-channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dv-channel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border: 1px solid #CBBFC3;
  border-radius: 3px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s, color .2s, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.dv-channel img, .dv-channel svg { width: 20px; height: 20px; flex: none; }
.dv-channel:hover { border-color: var(--dv-burgundy); color: var(--dv-burgundy); transform: translateY(-2px); }
.dv-contact-copy > .dv-button { margin-top: 4px; }

/* ---------- Ремонт затянулся? ----------
   Было: бордовая полоса с текстом в три колонки — плоско и без повода
   задержаться. Стало: тёмный «склад» — стеллаж с упакованными полотнами,
   последнее помечено сургучом «Ваш заказ» (бордовый здесь — знак марки, как
   печать на конверте). Под ним путь заказа: готов → храним → привозим;
   линия пути заполняется при прокрутке. Сцену собирает services.js. */

.dv-services .dv-wait {
  --w-ink: #F3EDE6;
  --w-soft: #ADA399;
  --w-kraft: #CDB79B;
  --w-line: rgba(243, 237, 230, .16);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  column-gap: var(--dv-grid-gap);
  row-gap: clamp(44px, 5vw, 76px);
  align-items: center;
  padding: clamp(64px, 8vw, 128px) var(--dv-grid-edge) clamp(52px, 6vw, 92px);
  overflow: hidden;
  background:
    radial-gradient(55% 75% at 74% 42%, #3B2F28 0%, rgba(59, 47, 40, 0) 72%),
    #1D1917;
  color: var(--w-ink);
}

.dv-services .dv-wait__title {
  font-size: clamp(34px, 3.6vw, 56px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.dv-wait__line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.dv-wait__line > span { display: inline-block; }
.dv-wait__soft { color: var(--w-kraft); }
.dv-wait__text { margin-top: 26px !important; max-width: 42ch; font-size: 17px; line-height: 1.7; color: var(--w-soft); }
.dv-wait__cta { margin-top: 34px; }

/* Сцена: стеллаж и полотна в крафте. */
.dv-wait__scene { position: relative; height: clamp(280px, 32vw, 460px); }
.dv-wait__rack {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1vw, 16px);
  height: 100%;
  padding: 0 4%;
  border-bottom: 2px solid rgba(243, 237, 230, .22);
}
/* Тень пола под стеллажом. */
.dv-wait__rack::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -26px;
  height: 26px;
  background: radial-gradient(50% 100% at 50% 0, rgba(0, 0, 0, .45), transparent);
  pointer-events: none;
}
.dv-wait__slab {
  position: relative;
  flex: 0 0 auto;
  width: clamp(40px, 5.6vw, 88px);
  height: calc(var(--h, 1) * 100%);
  border-radius: 3px 3px 1px 1px;
  background:
    linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .24) 41%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .04) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .14)),
    var(--t, #C8B59C);
  box-shadow: inset -7px 0 12px -7px rgba(0, 0, 0, .4), 0 22px 34px -20px rgba(0, 0, 0, .7);
  transform-origin: 50% 100%;
}
/* Скотч поперёк упаковки. */
.dv-wait__slab::before,
.dv-wait__slab::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  height: 12px;
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.dv-wait__slab::before { top: 20%; }
.dv-wait__slab::after { top: 70%; }
.dv-wait__seal {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 36%;
  padding: 7px 10px;
  border-radius: 2px;
  background: #8C1F3B;
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-6deg);
  transform-origin: 50% 0;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6);
}

/* Путь заказа. */
.dv-wait__track { grid-column: 1 / -1; position: relative; padding-top: 34px; }
.dv-wait__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--w-line);
}
.dv-wait__progress {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 3px;
  background: var(--w-kraft);
  transform-origin: 0 50%;
}
.dv-wait__track ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dv-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dv-wait__track li { position: relative; display: grid; gap: 6px; }
.dv-wait__track li::before {
  content: '';
  position: absolute;
  left: 0;
  top: -40px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--w-kraft);
  background: #1D1917;
  transition: background .35s;
}
.dv-wait__track li.is-on::before { background: var(--w-kraft); }
.dv-wait__track b { font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.015em; }
.dv-wait__track span { font-size: 14px; line-height: 1.55; color: var(--w-soft); }

/* ---------- Микро-анимации: разметка для разбивки на слова ---------- */
.dv-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.dv-w > span { display: inline-block; will-change: transform; }
/* Слова — тоже span, а у пакета есть правила «цветной span в заголовке»
   (h2 > span — серый, .dv-contact h2 span — бордовый). Без этого весь заголовок
   красился целиком. Слово берёт цвет своей строки. */
.dv-services h2 > .dv-w,
.dv-services .dv-contact h2 .dv-w,
.dv-services .dv-contact h2 .dv-w > span { color: inherit; }
/* Счётчик «10 мм» / «500+» — тоже span, а правило пакета `.dv-specs span`
   (подпись под цифрой: 12px, серый) делало саму цифру мелкой. */
.dv-services .dv-specs strong > [data-count] { font-size: inherit; color: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; }
.dv-steps li { position: relative; }
.dv-steps__draw {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--dv-ink);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Адаптив ---------- */
@media (max-width: 1050px) {
  .dv-services .dv-wait { grid-template-columns: minmax(0, 1fr); }
  .dv-wait__scene { height: clamp(240px, 46vw, 380px); }
}
@media (max-width: 760px) {
  .dv-wait__text { font-size: 16px; }
  .dv-services .dv-wait__cta { width: 100%; justify-content: space-between; }
  .dv-wait__slab { width: 12.5vw; }
  .dv-wait__seal { font-size: 10px; padding: 6px 8px; }
  .dv-wait__track ol { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Вертикальный путь на телефоне: линия слева, точки на ней. */
  .dv-wait__track { padding: 0 0 0 30px; }
  .dv-wait__track::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .dv-wait__progress { left: 4px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; transform-origin: 50% 0; }
  .dv-wait__track li::before { left: -30px; top: 4px; }
  .dv-channel { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ---------- Аккордеоны: плавное раскрытие (services.js) ----------
   Скрипт сам анимирует высоту, поэтому CSS-«вздрагивание» пакета выключаем;
   is-closing возвращает плюс и цвет сразу, а не после схлопывания. */
.dv-acc details[open] > .dv-detail-body,
.dv-acc details[open] > div { animation: none; }
.dv-acc details.is-closing > summary .dv-plus:after { transform: rotate(90deg); }
.dv-acc .dv-detail.is-closing > summary { color: inherit; }

/* Отклик на касание. */
.dv-services :is(.dv-button, .dv-channel, .dv-contact-options button) { -webkit-tap-highlight-color: transparent; }
.dv-services :is(.dv-button, .dv-channel, .dv-contact-options button):active { transform: scale(.97); transition-duration: .08s; }

/* ==========================================================================
   Телефон: компоновка (05.10.2026, замечание «текст сплошняком»).
   Было: серые абзацы 15–16px с интервалом 1.85, четыре шага столбиком,
   у каждой услуги открыт длинный текст. Стало: текст плотнее и темнее,
   у разделов свой ритм, шаги — вертикальная шкала с номерами, услуги —
   короткий список, раскрывается по касанию. Ничего не листается вбок:
   горизонтальную прокрутку на телефоне не замечают (замечание заказчика).
   ========================================================================== */
@media (max-width: 760px) {
  .dv-services .dv-section { padding-top: 60px; padding-bottom: 60px; }
  .dv-services h2 { font-size: clamp(32px, 9vw, 38px); line-height: 1.08; }
  .dv-services .dv-section-intro h2 { margin: 14px 0 14px; }

  .dv-services :is(.dv-section-intro > p, .dv-production-copy > p, .dv-section-heading > p,
    .dv-detail-body > p, .dv-faq-item > div, .dv-steps p, .dv-contact-copy > p, .dv-showroom > p) {
    font-size: 16px;
    line-height: 1.6;
    color: #5C5557;
  }
  .dv-services .dv-section-intro > .dv-text-link { margin-top: 22px; }

  /* Услуги. min-width: 0 — длинные строки не растягивают ячейку грида за край экрана. */
  .dv-services .dv-services-grid > *,
  .dv-services .dv-detail,
  .dv-services .dv-detail-body { min-width: 0; }
  .dv-services .dv-service-accordion { margin-top: 4px; }
  .dv-services .dv-detail summary { padding: 20px 0; gap: 14px; }
  .dv-services .dv-detail summary h3 { font-size: 19px; }
  .dv-services .dv-detail-body { padding: 0 0 26px; }
  .dv-services .dv-tags { margin: 18px 0; gap: 6px; }
  .dv-services .dv-service-result {
    margin: 18px 0 20px;
    padding: 14px 16px;
    border-left: 0;
    border-radius: 4px;
    background: #F7F5F2;
  }
  .dv-services .dv-service-result > p { font-size: 15px; line-height: 1.55; }

  /* Под ваш проект */
  .dv-services .dv-production-copy { padding-top: 40px; padding-bottom: 52px; }
  .dv-services .dv-production-copy > h2 { margin: 16px 0 14px; }
  .dv-services .dv-specs { margin: 26px 0 28px; gap: 20px; }

  /* Как мы работаем — вертикальная шкала: слева линия с номерами шагов.
     При прокрутке линия заполняется, номер пройденного шага закрашивается. */
  .dv-services .dv-section-heading > p { margin-top: 14px; }
  .dv-services .dv-steps {
    position: relative;
    display: block;
    margin: 32px 0 0;
    padding: 0 0 0 54px;
  }
  .dv-services .dv-steps li {
    position: relative;
    padding: 4px 0 30px;
    border-top: 0;
  }
  .dv-services .dv-steps li:last-child { padding-bottom: 0; }
  .dv-services .dv-steps li > span {
    position: absolute;
    z-index: 1;
    left: -54px;
    top: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #C9BEC1;
    border-radius: 50%;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--dv-muted);
    transition: background .35s, color .35s, border-color .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1);
  }
  .dv-services .dv-steps li.is-on > span {
    border-color: var(--dv-ink);
    background: var(--dv-ink);
    color: #fff;
    transform: scale(1.08);
  }
  .dv-services .dv-steps h3 { margin: 6px 0 6px; font-size: 19px; line-height: 1.3; }
  .dv-services .dv-steps__draw { display: none; }
  /* Линия от центра первого кружка к центру последнего (--rail-end считает
     services.js); заполнение — --rail-p от 0 до 1 по прокрутке. */
  .dv-services .dv-steps::before,
  .dv-services .dv-steps::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 18px;
    bottom: var(--rail-end, 18px);
    width: 2px;
    background: var(--dv-line);
  }
  .dv-services .dv-steps::after {
    background: var(--dv-ink);
    transform-origin: 50% 0;
    transform: scaleY(var(--rail-p, 1));
  }

  /* Вопросы */
  .dv-services .dv-faq { padding-top: 60px; padding-bottom: 60px; gap: 26px; }
  .dv-services .dv-faq-item summary { padding: 18px 0; font-size: 16px; line-height: 1.4; }
  .dv-services .dv-faq-item > div { padding: 0 0 20px; }

  /* Контакты */
  .dv-services .dv-contact h2 { font-size: clamp(36px, 10vw, 42px); margin: 16px 0 12px; }
  .dv-services .dv-contact-options { margin: 22px 0; }
  .dv-services .dv-showroom h3 { font-size: 24px; margin: 18px 0 12px; }
}

/* End */


/* Start:/local/assets/dveryaninov-redesign/dv-pages.css?179185173224679*/
/* ==========================================================================
   «О компании», «Адреса салонов», «Контакты» (13.10.2026)

   Основа — база /services/ (services.css: кнопки, заголовки, секции, вопросы;
   svc-hero.css: первый экран; svc-page.css: шаги, каналы связи, разбивка слов).
   Здесь — то, чего у «Услуг» нет. Палитра — DESIGN.md: бордовый только у
   действия и выбранного, фоны чередуются белый → тёплый → белый.
   На телефоне всё столбиком: горизонтальную прокрутку не замечают (заказчик).
   ========================================================================== */

.dv-page {
  --pg-warm: #F7F5F2;
  --pg-blush: #F0E8EA;
  --pg-ink: #1A1A1A;
  --pg-soft: #6B6B6B;
  --pg-line: #E0DDDA;
  --pg-ease: cubic-bezier(.16, 1, .3, 1);
}
.dv-page h3 { font-weight: 500; letter-spacing: -.02em; }
.dv-page .dv-text-link_quiet { color: var(--pg-soft); }
.dv-page .dv-light { background: #fff; color: var(--pg-ink); border-color: var(--pg-line); }
.dv-page .dv-light:hover { border-color: var(--dv-burgundy); color: var(--dv-burgundy); }
.dv-page .dv-section-heading > p { max-width: 42ch; text-align: right; line-height: 1.7; }

/* ---------- Появление первого экрана ----------
   До запуска GSAP элементы появления скрыты; страховка — через 2,5 с всё
   показывает CSS, даже если скрипт не загрузился. */
@media (prefers-reduced-motion: no-preference) {
  .dv-js .dv-page [data-ph-intro] { visibility: hidden; animation: svc-failsafe 0s 2.5s forwards; }
  .dv-js .dv-page [data-leaf] { clip-path: inset(0 50% 0 50%); animation: svc-failsafe-open 0s 2.5s forwards; }
  .dv-js .dv-page [data-curtain] { clip-path: inset(0 0 100% 0); animation: svc-failsafe-open 0s 2.5s forwards; }
}

/* ==========================================================================
   О компании
   ========================================================================== */

/* Триптих первого экрана: три створки — раскрой, пресс, готовая дверь. */
.dv-tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  /* Ниже панорамы «Услуг»: на ноутбуке порог с фактами должен попасть в первый экран. */
  height: clamp(300px, min(48vh, 33vw), 560px);
  background: #fff;
}
.dv-tri__leaf { position: relative; margin: 0; overflow: hidden; background: #D9D3CC; }
.dv-tri__leaf img {
  position: absolute;
  inset: -5% 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
}
.dv-tri__leaf:nth-child(1) img { object-position: 55% 60%; }
.dv-tri__leaf:nth-child(2) img { object-position: 50% 45%; }
.dv-tri__leaf:nth-child(3) img { object-position: 60% 40%; }
.dv-tri__leaf figcaption {
  position: absolute;
  left: clamp(14px, 1.6vw, 24px);
  bottom: calc(var(--svc-plinth-overlap) + 18px);
  padding: 8px 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pg-ink);
}

/* Порог с фактами: число крупно, подпись мельче. Правило svc-hero.css
   «.dv-svc__service span» красило бы и цифру внутри strong — возвращаем. */
.dv-svc_about .dv-svc__head { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.dv-facts .dv-svc__service strong { font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dv-facts .dv-svc__service strong span { grid-column: auto; font: inherit; color: inherit; }

/* 01 — кто мы */
.dv-who {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "head head" "text photo";
  gap: 32px var(--dv-grid-gap);
  align-items: start;
}
.dv-who__head { grid-area: head; }
.dv-who__text { grid-area: text; display: grid; gap: 18px; max-width: 58ch; color: #4A4646; line-height: 1.8; }
.dv-who__photo { grid-area: photo; position: relative; margin: 0; aspect-ratio: 1100 / 978; overflow: hidden; border-radius: 2px; }
.dv-who__photo img { position: absolute; inset: 0; }

/* 02 — под ваш проём */
.dv-page .dv-size .dv-specs strong { font-size: clamp(30px, 2.6vw, 40px); white-space: nowrap; }
.dv-page .dv-size .dv-size__note { margin: 0 0 28px; font-size: 14px; line-height: 1.7 !important; }
.dv-page .dv-size .dv-production-copy > .dv-text-link { color: var(--dv-burgundy); }

/* 03 — что внутри: срез двери с метками слоёв */
.dv-inside {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  grid-template-areas: "head head" "figure list" "figure more";
  gap: 48px var(--dv-grid-gap);
  align-items: start;
}
.dv-inside__head { grid-area: head; }
.dv-inside__head h2 { margin-top: 24px; }
.dv-inside__figure { grid-area: figure; margin: 0; position: sticky; top: 90px; }
.dv-inside__frame { position: relative; aspect-ratio: 960 / 1687; max-height: 78vh; margin-inline: auto; overflow: hidden; border-radius: 2px; background: #E9E3DD; }
.dv-inside__frame img { position: absolute; inset: 0; }
.dv-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.dv-pin::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transform: scale(.6);
  opacity: 0;
  transition: transform .5s var(--pg-ease), opacity .3s;
}
.dv-pin span {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--pg-ink);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 14px -4px rgba(26, 26, 26, .45);
  transition: background .25s, color .25s, transform .35s var(--pg-ease);
}
.dv-pin.is-on span { background: var(--dv-burgundy); color: #fff; transform: scale(1.12); }
.dv-pin.is-on::before { opacity: 1; transform: scale(1.35); animation: dv-pulse 1.8s var(--pg-ease) infinite; }
@keyframes dv-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

.dv-inside__list { grid-area: list; margin: 0; padding: 0; list-style: none; }
.dv-inside__list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 0;
  padding: 26px 0;
  border-top: 1px solid var(--pg-line);
  color: var(--pg-soft);
  cursor: default;
  transition: color .3s;
}
.dv-inside__list li:last-child { border-bottom: 1px solid var(--pg-line); }
.dv-inside__list li > span { grid-row: 1 / span 2; padding-top: 6px; font-size: 13px; font-weight: 600; transition: color .3s; }
.dv-inside__list h3 { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; color: var(--pg-soft); transition: color .3s; }
.dv-inside__list p { max-width: 52ch; font-size: 15px; line-height: 1.75; }
.dv-inside__list li.is-on h3 { color: var(--pg-ink); }
.dv-inside__list li.is-on > span { color: var(--dv-burgundy); }
.dv-inside__list li.is-on { color: #4A4646; }
.dv-inside__list li:focus-visible { outline-offset: 4px; }
.dv-inside__more { grid-area: more; color: var(--dv-burgundy); }

/* 04 — покрытия: тёплая полоса */
.dv-coats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px var(--dv-grid-gap);
  padding: clamp(72px, 8vw, 112px) var(--dv-grid-edge);
  background: var(--pg-warm);
}
.dv-coats > h2 { grid-column: 1 / -1; }
.dv-coats__intro p { max-width: 46ch; color: var(--pg-soft); line-height: 1.8; margin-bottom: 32px; }
.dv-coats__list { margin: 0; padding: 0; list-style: none; align-self: center; }
.dv-coats__list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid #D8D1CB;
}
.dv-coats__list li:last-child { border-bottom: 1px solid #D8D1CB; }
.dv-coats__list li > span { font-size: 13px; font-weight: 600; color: var(--pg-soft); }
.dv-coats__list h3 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; margin-bottom: 8px; }
.dv-coats__list p { max-width: 44ch; font-size: 14px; line-height: 1.7; color: var(--pg-soft); }
.dv-coats__list strong { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--pg-ink); }

/* ремонт затянулся — короткая полоса */
.dv-keep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px var(--dv-grid-gap);
  align-items: end;
  padding: clamp(60px, 6vw, 88px) var(--dv-grid-edge);
  background: var(--pg-blush);
}
.dv-keep h2 { margin-top: 22px; }
.dv-keep__text p { max-width: 52ch; margin-bottom: 26px; color: #4A4646; line-height: 1.8; }
.dv-keep .dv-text-link { color: var(--dv-burgundy); }

/* 06 — документы: лист PDF с превью */
.dv-docs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.25vw, 32px); margin-top: 52px; }
.dv-doc { display: grid; gap: 8px; align-content: start; }
.dv-doc__sheet {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--pg-line);
  border-radius: 2px;
  background: var(--pg-warm);
  margin-bottom: 10px;
}
.dv-doc__sheet img { object-fit: cover; object-position: top; transition: transform .8s var(--pg-ease); }
.dv-doc__sheet b {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--dv-burgundy);
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
}
.dv-doc:hover .dv-doc__sheet img { transform: scale(1.04) translateY(-1%); }
.dv-doc__name { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; transition: color .2s; }
.dv-doc:hover .dv-doc__name { color: var(--dv-burgundy); }
.dv-doc__meta { font-size: 13px; color: var(--pg-soft); }

.dv-reviews { padding-top: 0; }
.dv-reviews .yreviews { margin: 0; }

/* финал: действие */
.dv-end {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px var(--dv-grid-gap);
  align-items: end;
  padding: clamp(72px, 8vw, 120px) var(--dv-grid-edge);
  background: var(--pg-warm);
}
.dv-end h2 { margin-top: 22px; }
.dv-end__actions { display: grid; justify-items: start; gap: 26px; }
.dv-end__actions .dv-text-link { color: var(--pg-ink); }

/* ==========================================================================
   Первый экран: адреса и контакты
   ========================================================================== */

.dv-ph {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--dv-grid-gap);
  align-items: stretch;
  padding: clamp(20px, 2.4vw, 36px) var(--dv-grid-edge) clamp(56px, 6vw, 88px);
  background: linear-gradient(var(--pg-warm) 0 72%, #fff 0);
}
.dv-ph__copy { display: grid; align-content: start; gap: 22px; }
.dv-ph .dv-svc__crumbs { margin-bottom: 0; }
.dv-ph .dv-svc__title { margin-bottom: 4px; font-size: clamp(36px, 3.7vw, 56px); }

/* шоурум */
.dv-salon {
  display: grid;
  gap: 18px;
  margin-top: 6px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--pg-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 40px -26px rgba(40, 30, 24, .3);
}
.dv-salon__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dv-salon__kind { color: var(--pg-soft); }
.dv-salon__addr { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.dv-salon__addr span { color: var(--pg-soft); }
.dv-salon__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0; padding-top: 16px; border-top: 1px solid var(--pg-line); }
.dv-salon__facts dt { font-size: 12px; color: var(--pg-soft); }
.dv-salon__facts dd { margin: 3px 0 0; font-size: 14px; line-height: 1.5; }
.dv-salon__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.dv-salon__phone { font-size: 18px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dv-salon__phone:hover { color: var(--dv-burgundy); }
.dv-salon__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.dv-salon__links .dv-text-link { color: var(--dv-burgundy); }
.dv-salon__copy {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--pg-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #C9C2BC;
}
.dv-salon__copy:hover, .dv-salon__copy.is-done { color: var(--dv-burgundy); }
.dv-salon__status, .dv-req__status { font-size: 13px; color: #2F6B4F; min-height: 1.4em; }

.dv-ph__map {
  position: relative;
  /* Виджет Яндекса рисует карту на свою высоту: растянутый по карточке блок
     оставлял под картой пустую серую полосу. */
  align-self: start;
  height: clamp(440px, 40vw, 580px);
  overflow: hidden;
  border-radius: 4px;
  background: #E9E5E0;
  box-shadow: 0 22px 48px -30px rgba(40, 30, 24, .45);
}
.dv-ph__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* контакты: каналы связи */
.dv-ph__channels { display: grid; gap: 10px; align-content: start; }
.dv-ch {
  position: relative;
  display: grid;
  gap: 4px;
  padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--pg-line);
  border-radius: 4px;
  background: #fff;
  transition: border-color .25s, transform .35s var(--pg-ease), box-shadow .35s;
}
a.dv-ch:hover { border-color: var(--dv-burgundy); transform: translateY(-2px); box-shadow: 0 16px 34px -24px rgba(40, 30, 24, .4); }
.dv-ch__kind { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-soft); }
.dv-ch strong { font-size: clamp(24px, 2.3vw, 34px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dv-ch_main strong { font-size: clamp(32px, 3.4vw, 52px); }
.dv-ch small { font-size: 13px; color: var(--pg-soft); }
.dv-ch > svg { position: absolute; top: 26px; right: 26px; width: 20px; height: 20px; color: var(--pg-soft); transition: transform .35s var(--pg-ease), color .25s; }
a.dv-ch:hover > svg { color: var(--dv-burgundy); transform: translate(3px, -3px); }
a.dv-ch:hover strong { color: var(--dv-burgundy); }
.dv-ch_social { background: var(--pg-warm); border-color: transparent; }
.dv-ch_social .dv-contact-channels { margin-top: 10px; }

/* ==========================================================================
   Адреса салонов: разделы
   ========================================================================== */

.dv-reasons__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.25vw, 32px); margin-top: 52px; }
.dv-reasons__grid article { padding-top: 22px; border-top: 1px solid #C9BEC1; }
.dv-reasons__grid span { font-size: 14px; color: var(--dv-burgundy); }
.dv-reasons__grid h3 { margin: 22px 0 12px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; }
.dv-reasons__grid p { max-width: 40ch; font-size: 15px; line-height: 1.75; color: var(--pg-soft); }

.dv-prep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px var(--dv-grid-gap);
  padding: clamp(72px, 8vw, 112px) var(--dv-grid-edge);
  background: var(--pg-warm);
}
.dv-prep__intro h2 { margin: 24px 0; }
.dv-prep__intro p { max-width: 42ch; color: var(--pg-soft); line-height: 1.8; }
.dv-prep__list { margin: 0; padding: 0; list-style: none; align-self: center; }
.dv-prep__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; border-top: 1px solid #D8D1CB; }
.dv-prep__list li:last-child { border-bottom: 1px solid #D8D1CB; }
.dv-prep__list i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  border: 1.5px solid #BDB4AD;
  border-radius: 50%;
  color: #fff;
  transition: background .4s var(--pg-ease), border-color .4s;
}
.dv-prep__list svg { width: 18px; height: 18px; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .5s .15s var(--pg-ease); }
.dv-prep__list li.is-on i { background: var(--pg-ink); border-color: var(--pg-ink); }
.dv-prep__list li.is-on svg { stroke-dashoffset: 0; }
.dv-prep__list h3 { font-size: 20px; line-height: 1.35; margin-bottom: 4px; }
.dv-prep__list p { font-size: 15px; line-height: 1.7; color: var(--pg-soft); }

/* ==========================================================================
   Контакты: разделы
   ========================================================================== */

.dv-topics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: 52px; }
.dv-topic {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  min-height: 300px;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--pg-line);
  border-radius: 4px;
  background: #fff;
  color: var(--pg-ink);
  text-align: left;
  transition: border-color .25s, background .25s, transform .35s var(--pg-ease), box-shadow .35s;
}
.dv-topic:hover { border-color: var(--dv-burgundy); transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(40, 30, 24, .45); }
.dv-topic__no { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-soft); }
.dv-topic h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -.03em; }
.dv-topic p { font-size: 15px; line-height: 1.7; color: var(--pg-soft); }
.dv-topic__cta { display: inline-flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--pg-line); font-size: 14px; font-weight: 600; color: var(--dv-burgundy); }
.dv-topic__cta svg { width: 16px; height: 16px; transition: transform .35s var(--pg-ease); }
.dv-topic:hover .dv-topic__cta svg { transform: translate(3px, -3px); }

.dv-visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px var(--dv-grid-gap);
  align-items: end;
  padding: clamp(60px, 6vw, 88px) var(--dv-grid-edge);
  background: var(--pg-blush);
}
.dv-visit h2 { margin-top: 22px; }
.dv-visit__aside { display: grid; justify-items: start; gap: 24px; }
.dv-visit__aside p { max-width: 50ch; color: #4A4646; line-height: 1.8; }

.dv-req { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px var(--dv-grid-gap); align-items: start; }
.dv-req__intro h2 { margin: 24px 0; }
.dv-req__intro > p { color: var(--pg-soft); line-height: 1.8; }
.dv-req__actions { display: grid; justify-items: start; gap: 20px; margin-top: 30px; }
.dv-page .dv-req__copy { gap: 18px; background: #fff; border-color: var(--pg-ink); color: var(--pg-ink); }
.dv-page .dv-req__copy:hover, .dv-page .dv-req__copy.is-done { border-color: var(--dv-burgundy); color: var(--dv-burgundy); }
.dv-page .dv-req__actions .dv-text-link { color: var(--pg-ink); }
.dv-req__table { margin: 0; }
.dv-req__table > div { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 18px; padding: 16px 0; border-top: 1px solid var(--pg-line); }
.dv-req__table > div:last-child { border-bottom: 1px solid var(--pg-line); }
.dv-req__table dt { font-size: 14px; color: var(--pg-soft); }
.dv-req__table dd { margin: 0; font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.dv-appeals { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px var(--dv-grid-gap); border-top: 1px solid var(--pg-line); }
.dv-appeals h2 { margin-top: 24px; }
.dv-appeals__text { display: grid; gap: 20px; align-content: start; color: #4A4646; line-height: 1.8; }
.dv-appeals__text a:not(.dv-text-link) { color: var(--dv-burgundy); text-decoration: underline; text-underline-offset: 4px; }
.dv-appeals__addr { color: var(--pg-soft); }
.dv-appeals__links { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 8px; }
.dv-appeals__links .dv-text-link:first-child { color: var(--dv-burgundy); }

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 1050px) {
  .dv-svc_about .dv-svc__head { grid-template-columns: minmax(0, 1fr); }
  .dv-ph { grid-template-columns: minmax(0, 1fr); background: var(--pg-warm); }
  .dv-ph__map { height: 460px; }
  .dv-inside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dv-topic { min-height: 0; }
}

@media (max-width: 760px) {
  /* «Делаем двери сами — от раскроя до упаковки» — в три строки, не в четыре. */
  .dv-services .dv-svc_about .dv-svc__title { font-size: clamp(28px, 8.2vw, 36px); }
  .dv-page .dv-section-heading { flex-direction: column; align-items: flex-start; gap: 18px; }
  .dv-page .dv-section-heading > p { text-align: left; }
  /* Перенос строки в заголовке на телефоне прячет пакет (services.css) — пробел перед <br> в разметке. */
  .dv-page h2 br { display: none; }

  /* триптих — три узкие створки, как три двери в ряд */
  .dv-tri { height: clamp(220px, 62vw, 300px); gap: 4px; }
  .dv-tri__leaf figcaption { left: 8px; right: 8px; bottom: 8px; padding: 5px 6px; font-size: 10px; letter-spacing: .04em; text-align: center; }
  .dv-facts .dv-svc__service { grid-template-columns: minmax(0, 1fr) auto; }
  .dv-facts .dv-svc__service strong { font-size: 28px; }

  .dv-who { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "text" "photo"; gap: 26px; }

  .dv-inside { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "figure" "list" "more"; gap: 28px; }
  .dv-inside__figure { position: static; }
  .dv-inside__frame { aspect-ratio: 4 / 5; max-height: none; }
  .dv-inside__frame img { object-position: 50% 15%; }
  .dv-inside__list li { padding: 20px 0; }
  .dv-pin { width: 44px; height: 44px; margin: -22px 0 0 -22px; }

  .dv-coats, .dv-keep, .dv-prep, .dv-visit, .dv-end { grid-template-columns: minmax(0, 1fr); padding-block: 64px; }
  .dv-coats__list li { grid-template-columns: 34px minmax(0, 1fr); }
  .dv-coats__list strong { grid-column: 2; }

  .dv-docs__list, .dv-reasons__grid, .dv-topics__grid { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .dv-doc { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .dv-doc__sheet { grid-row: 1 / span 2; margin: 0; }
  .dv-doc__sheet b { top: 6px; right: 6px; font-size: 9px; padding: 2px 5px; }
  .dv-doc__name { font-size: 16px; }

  .dv-ph { padding-bottom: 48px; }
  .dv-ph__map { height: 400px; margin-inline: calc(var(--dv-grid-edge) * -1); border-radius: 0; }
  .dv-salon__facts { grid-template-columns: minmax(0, 1fr); }
  .dv-salon__actions .dv-button { flex: 1 1 100%; }
  .dv-page .dv-svc__actions .dv-button { flex: 1 1 100%; justify-content: space-between; }
  .dv-ch_main strong { font-size: 34px; }

  .dv-req, .dv-appeals { grid-template-columns: minmax(0, 1fr); }
  .dv-req__table > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dv-end__actions .dv-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-pin.is-on::before { animation: none; }
  .dv-prep__list svg, .dv-prep__list i { transition: none; }
}

/* End */


/* Start:/local/assets/dveryaninov-redesign/hidden.css?179186708813970*/
/* ==========================================================================
   /skrytye-dveri-na-zakaz/ — «Скрытые двери на заказ» (13.10.2026)

   Надстройка над services.css + svc-hero.css + dv-pages.css. Палитра — DESIGN.md:
   бордовый только у действия и выбранного; фоны чередуются тёплый → белый →
   тёплый → белый → розоватый (панели) → белый → тёплый. Углы — одна система:
   3 px, как у кнопок .dv-button; круглыми бывают только образцы цвета.

   Жест страницы — шов: первый экран раскрывается от линии зазора скрытой двери
   (dv-pages.js), переключатель систем короба меняет узел тем же движением —
   полотно отъезжает в сторону (hidden.js).
   ========================================================================== */

.dv-page_hidden {
  --hd-warm: #F7F5F2;
  --hd-blush: #F0E8EA;
  --hd-ink: #1A1A1A;
  --hd-soft: #6B6B6B;
  --hd-line: #E0DDDA;
  --hd-r: 3px;
  --hd-ease: cubic-bezier(.16, 1, .3, 1);
  /* Переменные формы лендинга (css/landing.css берёт их из .lp — здесь его нет). */
  --lp-accent: #8C1F3B;
  --lp-accent-hover: #6E1630;
  --lp-ink: #1A1A1A;
  --lp-muted: #6B6B6B;
  --lp-line: #E0DDDA;
  --lp-r-card: 3px;
  --lp-r-btn: 3px;
}
.dv-page_hidden ::selection { background: #F4E8EC; color: #6E1630; }

/* ---------- 1. Первый экран: стена с дверями раскрывается от шва ---------- */

.dv-services .hd-hero { --svc-plinth-overlap: 0px; background: var(--hd-warm); }
/* Шов — правый край двери с ручкой на снимке (в процентах ширины кадра).
   На телефоне свой кадр (hero-m.webp), шов в нём правее. */
.hd-hero__stage {
  --seam: 40.5%;
  position: relative;
  height: clamp(360px, 64vh, 760px);
  overflow: hidden;
  background: #CDBFB1;
}
.hd-hero__photo { position: absolute; inset: 0; margin: 0; }
.hd-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 62%;
  transform-origin: var(--seam, 40%) 50%;
}
/* Зазор полотна: прорисовывается сверху вниз до того, как стена раскроется. */
.hd-hero__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--seam, 40.5%);
  width: 2px;
  margin-left: -1px;
  background: #2B2522;
  transform-origin: 50% 0;
  opacity: 0;
  pointer-events: none;
}
.dv-js .hd-hero__seam { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* До запуска GSAP кадр закрыт по шву; страховка открывает его через 2,5 с. */
  .dv-js .dv-page [data-seam] {
    clip-path: inset(0 calc(100% - var(--seam, 50%)) 0 var(--seam, 50%));
    animation: svc-failsafe-open 0s 2.5s forwards;
  }
}

/* ---------- 2. Закрыта — стена, открыта — дверь ---------- */

.hd-wall {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 112px);
  align-items: center;
}
.hd-wall__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1119 / 1641;
  max-height: 86vh;
  overflow: hidden;
  border-radius: var(--hd-r);
  background: #D9D7D5;
}
.hd-wall__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hd-wall__copy > p { max-width: 52ch; margin-top: 28px !important; color: var(--hd-soft); font-size: 17px; line-height: 1.75; }
.hd-wall__facts {
  display: grid;
  gap: 22px;
  margin: clamp(36px, 4vw, 52px) 0 0;
  padding: 28px 0 0;
  list-style: none;
  border-top: 1px solid var(--hd-line);
}
.hd-wall__facts li { display: grid; gap: 4px; }
.hd-wall__facts strong { font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; letter-spacing: -.02em; }
.hd-wall__facts span { color: var(--hd-soft); font-size: 15px; line-height: 1.6; }

/* ---------- 3. Три системы короба: список слева, узел справа ---------- */

.hd-sys { background: var(--hd-warm); padding: clamp(72px, 8vw, 120px) var(--dv-grid-edge); }
.hd-sys__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(36px, 4vw, 60px);
}
.hd-sys__list { display: grid; gap: 10px; }
.hd-sys__opt {
  display: grid;
  grid-template-columns: clamp(104px, 9vw, 136px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px);
  border: 1px solid transparent;
  border-radius: var(--hd-r);
  background: transparent;
  color: var(--hd-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .35s var(--hd-ease), border-color .35s var(--hd-ease), color .35s var(--hd-ease), box-shadow .35s var(--hd-ease);
}
.hd-sys__opt:hover { color: var(--hd-ink); border-color: var(--hd-line); }
.hd-sys__opt.is-active {
  background: #fff;
  border-color: var(--hd-line);
  color: var(--hd-ink);
  box-shadow: 0 18px 40px -24px rgba(74, 52, 40, .35);
}
.hd-sys__opt:focus-visible { outline: 2px solid var(--dv-burgundy); outline-offset: 2px; }
.hd-sys__mm { font-size: 15px; font-weight: 500; white-space: nowrap; }
.hd-sys__mm b {
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hd-sys__opt.is-active .hd-sys__mm b { color: var(--dv-burgundy); }
.hd-sys__name { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.hd-sys__name span { display: block; font-weight: 400; color: var(--hd-soft); font-size: 15px; letter-spacing: 0; }

.hd-sys__stage { position: relative; display: grid; }
.hd-sys__panel { grid-area: 1 / 1; margin: 0; }
.hd-sys__panel[hidden] { display: none; }
.hd-sys__img {
  overflow: hidden;
  border-radius: var(--hd-r);
  aspect-ratio: 467 / 376;
  max-width: 520px;
  background: #CBB9A8;
}
.hd-sys__img img { width: 100%; height: 100%; object-fit: cover; }
.hd-sys__panel p { max-width: 46ch; margin-top: 22px !important; color: var(--hd-soft); font-size: 16px; line-height: 1.7; }

/* ---------- 4. Отделка полотна и цвет профиля ---------- */

.hd-finish__board {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 96px);
  margin-top: clamp(36px, 4vw, 60px);
}
.hd-finish__group h3 { font-size: 15px; font-weight: 600; color: var(--hd-ink); margin-bottom: 26px !important; }
.hd-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hd-swatches_metal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-swatches li { display: grid; justify-items: start; gap: 6px; }
.hd-swatches img,
.hd-sw-enamel {
  display: block;
  width: clamp(64px, 6vw, 88px);
  height: clamp(64px, 6vw, 88px);
  margin-bottom: 10px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 22px -12px rgba(40, 28, 22, .45), inset 0 0 0 1px rgba(26, 26, 26, .06);
}
.hd-sw-enamel { background: radial-gradient(circle at 34% 28%, #8E6E7E 0, #4A3540 46%, #261B21 100%); }
.hd-swatches strong { font-size: 16px; font-weight: 500; }
.hd-swatches span { color: var(--hd-soft); font-size: 14px; line-height: 1.5; }
.hd-finish__note { max-width: 40ch; margin-top: 28px !important; color: var(--hd-soft); font-size: 15px; line-height: 1.7; }

/* ---------- 5. Стеновые панели ---------- */

.hd-panels {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  grid-template-areas:
    "copy photo"
    "profiles profiles"
    "note note";
  gap: clamp(28px, 4vw, 72px) clamp(28px, 5vw, 96px);
  align-items: center;
  padding: clamp(72px, 8vw, 120px) var(--dv-grid-edge);
  background: var(--hd-blush);
}
.hd-panels__copy { grid-area: copy; }
.hd-panels__copy > p { max-width: 44ch; margin-top: 24px !important; color: #5E5659; line-height: 1.75; }
.hd-panels__specs { display: flex; flex-wrap: wrap; gap: 18px 44px; margin: 32px 0 0; }
.hd-panels__specs div { display: grid; gap: 4px; }
.hd-panels__specs dt { font-size: 14px; color: #5E5659; }
.hd-panels__specs dd { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-panels__photo {
  grid-area: photo;
  margin: 0;
  overflow: hidden;
  border-radius: var(--hd-r);
  aspect-ratio: 1077 / 594;
}
.hd-panels__photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 70% 30%; }
.hd-profiles {
  grid-area: profiles;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px clamp(20px, 3vw, 48px);
  margin: 0;
  padding: clamp(24px, 3vw, 36px) 0 0;
  list-style: none;
  border-top: 1px solid rgba(94, 86, 89, .22);
}
.hd-profiles li { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; align-items: start; }
.hd-profiles img { grid-row: 1 / span 2; width: 76px; height: 76px; object-fit: cover; border-radius: var(--hd-r); }
.hd-profiles strong { font-size: 16px; font-weight: 500; padding-top: 6px; }
.hd-profiles span { color: #5E5659; font-size: 14px; line-height: 1.5; }
.hd-panels__note { grid-area: note; max-width: 70ch; color: #5E5659; font-size: 15px; line-height: 1.7; }

/* ---------- 6. Заводская врезка ---------- */

.hd-fit__head > p { max-width: 58ch; margin-top: 24px !important; color: var(--hd-soft); line-height: 1.75; }
.hd-fit__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
  margin-top: clamp(36px, 4vw, 56px);
}
.hd-fit__tile {
  display: grid;
  grid-template-rows: 1fr auto;
  margin: 0;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--hd-r);
  background: var(--hd-warm);
  overflow: hidden;
}
/* У рендеров белый фон — на тёплой плашке он растворяется. */
.hd-fit__tile img { mix-blend-mode: multiply; align-self: center; justify-self: center; max-width: 100%; height: auto; max-height: 280px; object-fit: contain; transition: transform .8s var(--hd-ease); }
.hd-fit__tile:hover img { transform: scale(1.04); }
.hd-fit__tile_stopper img { max-height: 220px; }
.hd-fit__tile figcaption { display: grid; gap: 4px; margin-top: 22px; }
.hd-fit__tile strong { font-size: 18px; font-weight: 500; }
.hd-fit__tile span { color: var(--hd-soft); font-size: 14px; line-height: 1.55; }
.hd-fit__hw h3 { font-size: 15px; font-weight: 600; margin-bottom: 16px !important; }
.hd-fit__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hd-fit__list .hw-row { border-radius: var(--hd-r); }
.hd-fit__list .hw-row__media { border-radius: var(--hd-r); }

/* ---------- 7. Проём: галочки — из dv-pages (.dv-prep) ---------- */
.hd-prep .dv-prep__intro h2 { margin-top: 0; }

/* ---------- 9. Форма ---------- */

.hd-form {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding: clamp(72px, 8vw, 120px) var(--dv-grid-edge);
  background: var(--hd-warm);
  scroll-margin-top: 110px;
}
.hd-form__copy > p { max-width: 44ch; margin-top: 24px !important; color: var(--hd-soft); line-height: 1.75; }
.hd-form__phone { display: inline-grid; margin-top: 32px; }
.hd-form__card.lp-form {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--hd-r);
  background: #fff;
  box-shadow: 0 28px 60px -34px rgba(74, 52, 40, .38);
}
.hd-form__card .lp-field__input { border-radius: var(--hd-r); min-height: 52px; font-size: 16px; }
.hd-form__card .lp-field__input::placeholder { color: #8A8580; }
.hd-form__card .lp-method { border-radius: var(--hd-r); }
.hd-form__card .lp-form__submit { width: 100%; margin-top: 22px; }
.hd-form__card .lp-form__submit:disabled { opacity: .6; cursor: progress; }

/* ---------- Планшет ---------- */
@media (max-width: 1050px) {
  .hd-sys__grid, .hd-finish__board { grid-template-columns: minmax(0, 1fr); }
  .hd-sys__img { max-width: none; }
  .hd-fit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hd-fit__hw { grid-column: 1 / -1; }
  .hd-panels { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "photo" "profiles" "note"; }
}

/* ---------- Телефон: всё столбиком ---------- */
@media (max-width: 760px) {
  .hd-hero__stage { --seam: 78.8%; height: min(118vw, 540px); }
  .hd-hero__photo img { object-position: 78% 55%; }
  .hd-wall, .hd-form { grid-template-columns: minmax(0, 1fr); }
  .hd-wall__photo { max-height: 70vh; }
  .hd-sys__opt { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .hd-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-swatches_metal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hd-profiles { grid-template-columns: minmax(0, 1fr); }
  .hd-fit__grid { grid-template-columns: minmax(0, 1fr); }
  .hd-fit__tile img { max-height: 200px; }
  .hd-form .lp-form__row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hd-sys__opt, .hd-fit__tile img { transition: none; }
  .hd-fit__tile:hover img { transform: none; }
}

/* End */


/* Start:/css/hardware.css?17918778584893*/
/* Карточка фурнитуры /catalog/furnitura/{код}/ и список фурнитуры в кейсах (13.10.2026).
   Каркас — классы карточки двери (.pdp__*, .pdp-*, css/product-detail.css); здесь только
   то, чем фурнитура отличается: квадратное фото, плашки цветов, компактные строки. */

/* ---------- фото ---------- */
.pdp_hw .hw-stage {
  aspect-ratio: 1 / 1;
  padding: clamp(28px, 6%, 64px);
}
/* Кадры производителя (чертёж, ракурс) сняты на белом — multiply растворяет белый
   в фоне сцены, и они встают в один ряд с основным фото на прозрачном фоне. */
.pdp_hw .hw-stage img,
.pdp_hw .hw-thumbs img { mix-blend-mode: multiply; }
.pdp_hw .hw-thumbs .pdp__thumb { padding: 6px; }
.pdp_hw .pdp__thumb:focus-visible { outline: 2px solid var(--color-accent, #8c1f3b); outline-offset: 2px; }

/* ---------- цвета модели: каждая плашка — ссылка на позицию этого цвета ---------- */
.hw-colors__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.hw-swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 4px 16px 4px 4px;
  border: 1px solid var(--color-border, #e6e2dc);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text-primary, #1a1a1a);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s;
}
.hw-swatch img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.hw-swatch:hover { border-color: var(--color-text-secondary, #6b6b6b); }
.hw-swatch.is-active {
  border-color: var(--color-accent, #8c1f3b);
  box-shadow: inset 0 0 0 1px var(--color-accent, #8c1f3b);
  cursor: default;
}
.hw-swatch:focus-visible { outline: 2px solid var(--color-accent, #8c1f3b); outline-offset: 2px; }

.pdp_hw .pdp-price { margin-top: 4px; }
.pdp_hw .pdp-actions { margin-top: 0; }
.hw-tip {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary, #4f4f4f);
}

/* ---------- о модели: текст и характеристики рядом ---------- */
.hw-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(24px, 4vw, 64px);
  align-items: start;
}
.hw-about__grid .pdp-desc__text { max-width: 60ch; }
.hw-specs .pdp-specs__val { text-wrap: pretty; }

/* ---------- компактные строки фурнитуры (карточка + кейсы) ---------- */
.hw-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--color-border, #e6e2dc);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text-primary, #1a1a1a);
  text-decoration: none;
  transition: border-color .18s;
}
.hw-row:hover { border-color: var(--color-accent, #8c1f3b); }
.hw-row:focus-visible { outline: 2px solid var(--color-accent, #8c1f3b); outline-offset: 2px; }
.hw-row__media {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 6px;
  background: var(--color-section-alt, #f7f6f4);
  overflow: hidden;
}
.hw-row__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.hw-row__body { display: grid; gap: 3px; min-width: 0; }
.hw-row__kind {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-light, #8a8a8a);
}
.hw-row__name { font-size: 16px; font-weight: 500; line-height: 1.3; }
.hw-row__price,
.hw-row__meta { font-size: 14px; color: var(--color-text-secondary, #4f4f4f); }
.hw-row__go { color: var(--color-accent, #8c1f3b); font-size: 18px; transition: transform .18s; }
.hw-row:hover .hw-row__go { transform: translateX(3px); }

/* ---------- кейс: фурнитура под сеткой дверей ---------- */
.project-hw { margin-top: clamp(28px, 3vw, 40px); }
.project-hw_solo { margin-top: 0; }
.project-hw__title { margin: 0 0 16px; font-size: 20px; font-weight: 600; }

@media (max-width: 720px) {
  .hw-about__grid { grid-template-columns: minmax(0, 1fr); }
  .hw-swatch { font-size: 13px; padding-right: 14px; }
  .hw-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .hw-row__media { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-swatch, .hw-row, .hw-row__go { transition: none; }
}

/* End */
/* /local/assets/dveryaninov-redesign/services.css?179185161210542 */
/* /local/assets/dveryaninov-redesign/layout.css?17912288813124 */
/* /local/assets/dveryaninov-redesign/svc-hero.css?17912311799017 */
/* /local/assets/dveryaninov-redesign/svc-page.css?179185173215124 */
/* /local/assets/dveryaninov-redesign/dv-pages.css?179185173224679 */
/* /local/assets/dveryaninov-redesign/hidden.css?179186708813970 */
/* /css/hardware.css?17918778584893 */