/* Оформление текста из визуального редактора и прайс-листа (дополнение к style.css) */
.prose__main > * + *{margin-top:18px}
.prose__main ul,.prose__main ol{padding-left:1.3em;font-size:18px;line-height:1.65;color:var(--ink-2,var(--ink))}
.prose__main li + li{margin-top:6px}
.prose__main li::marker{color:var(--pine)}
.prose__main h3{font:400 clamp(22px,2vw,28px)/1.3 var(--f-sans);color:var(--ink);letter-spacing:-.01em;margin-top:36px}
.prose__main h4{font:500 13px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:28px}
.prose__main blockquote{border-left:2px solid var(--resin);padding:4px 0 4px 20px;font-size:20px;line-height:1.5;color:var(--ink)}
.prose__main a,.split__body p a,.feature p a{color:inherit;text-decoration:underline;text-decoration-color:var(--resin);text-underline-offset:3px}
.prose__main strong,.prose__main b{font-weight:500;color:var(--ink)}
.prose__title{font:300 clamp(30px,3.4vw,48px)/1.1 var(--f-sans);letter-spacing:-.02em;color:var(--ink);margin:0 0 28px}
.prose--article .prose__main p:first-child{font:inherit;font-size:18px;line-height:1.65;color:var(--ink-2,var(--ink));letter-spacing:0}
.split__body ul:not(.ticks),.feature ul{padding-left:1.2em;margin:0 0 16px}

.price .sheet td:last-child,.price .sheet th:last-child{text-align:right;padding-right:0;white-space:nowrap}
.price__name{display:block}
.price__note{display:block;font-size:13px;color:var(--mute);margin-top:4px}
.price__val{font:500 18px var(--f-sans);color:var(--ink)}
.price__val--ask{font:400 14px var(--f-mono);color:var(--mute)}
.price__group td{font:400 11px var(--f-mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);padding-top:32px!important;border-bottom:1px solid var(--ink)!important}
.price__foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px}
.price__foot p{color:var(--mute);font-size:14px;margin:0}

/* ---------- 404: «чертёж сечения» ---------- */
.nf{padding:56px 0 24px;border-bottom:1px solid var(--rule)}
.nf__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.nf__text{grid-column:1/7;display:flex;flex-direction:column;gap:22px}
.nf__text .crumbs{margin:0}
.nf__title{margin:0;font-size:clamp(44px,6vw,92px)}
.nf__lead{margin:0;font:300 clamp(19px,1.8vw,24px)/1.4 var(--f-sans);letter-spacing:-.01em;color:var(--ink);max-width:34em}
.nf__path{font:400 .78em var(--f-mono);background:var(--plinth);padding:2px 8px;border-radius:6px;overflow-wrap:anywhere;display:inline-block;max-width:100%}
.nf__suggest{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.nf__suggest .eyebrow{padding:12px 0 4px;color:var(--mute)}
.nf__suggest a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);font-size:18px;transition:padding .25s var(--ease),color .2s}
.nf__suggest a:hover{padding-left:10px;color:var(--pine)}
.nf__suggest svg,.nf-links svg,.nf-tools svg{width:20px;flex:none}
.nf__actions{margin:0}
.nf__phone{display:flex;flex-direction:column;gap:4px;font:300 28px/1 var(--f-sans);letter-spacing:-.02em;width:max-content}
.nf__phone .eyebrow{color:var(--mute)}
.nf__phone:hover{color:var(--pine)}
.nf__draw{grid-column:7/13;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.nf__draw svg{width:100%;max-width:520px;height:auto;overflow:visible}
.nf__draw figcaption{color:var(--mute)}
.nf-face{fill:var(--plinth)}
.nf-edge{fill:none;stroke:var(--ink);stroke-width:1.5}
.nf-rings circle{fill:none;stroke:var(--pine);stroke-width:1.4;opacity:.7;stroke-dasharray:1600;stroke-dashoffset:1600;animation:nf-draw 2.4s var(--ease) forwards}
.nf-rings circle:nth-child(2n){stroke-width:2.6;opacity:.38}
.nf-rings circle:nth-child(1){animation-delay:.05s}.nf-rings circle:nth-child(2){animation-delay:.12s}.nf-rings circle:nth-child(3){animation-delay:.2s}
.nf-rings circle:nth-child(4){animation-delay:.28s}.nf-rings circle:nth-child(5){animation-delay:.36s}.nf-rings circle:nth-child(6){animation-delay:.44s}
.nf-rings circle:nth-child(7){animation-delay:.52s}.nf-rings circle:nth-child(8){animation-delay:.6s}.nf-rings circle:nth-child(9){animation-delay:.68s}
.nf-crack{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:nf-draw 1.1s 1.6s var(--ease) forwards}
.nf-pith{fill:var(--resin)}
.nf-dim path{fill:none;stroke:var(--ink-2,var(--ink));stroke-width:1}
.nf-num rect{fill:var(--paper)}
.nf-num text{font:500 15px var(--f-mono);fill:var(--ink);text-anchor:middle;letter-spacing:.06em}
@keyframes nf-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.nf-rings circle,.nf-crack{animation:none;stroke-dashoffset:0}}

.nf-map__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.nf-map__grid>div:first-child{grid-column:1/4}
.nf-links{grid-column:4/10;display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.nf-links a{display:grid;grid-template-columns:36px 1fr 20px;align-items:center;padding:16px 0;border-top:1px solid var(--rule);font-size:20px;font-weight:300;letter-spacing:-.01em;transition:padding .25s var(--ease),color .2s}
.nf-links a:hover{padding-left:8px;color:var(--pine)}
.nf-links__n{font:400 11px var(--f-mono);color:var(--mute)}
.nf-tools{grid-column:10/13;display:flex;flex-direction:column}
.nf-tools .eyebrow{color:var(--mute);padding-bottom:10px}
.nf-tools a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--ink);font-weight:500;font-size:15px;transition:padding .25s var(--ease),color .2s}
.nf-tools a:last-child{border-bottom:1px solid var(--ink)}
.nf-tools a:hover{padding-left:10px;color:var(--pine)}
@media (max-width:1000px){
  .nf__text,.nf__draw{grid-column:1/-1}
  .nf__draw svg{max-width:300px}
  .nf-map__grid>div:first-child,.nf-links,.nf-tools{grid-column:1/-1}
}
@media (max-width:600px){.nf{padding-top:24px}.nf-links{grid-template-columns:1fr}.nf__phone{font-size:24px}}

/* ---------- уведомление о cookie ---------- */
.cookie{position:fixed;left:16px;bottom:16px;z-index:60;max-width:440px;display:flex;gap:16px;align-items:center;background:var(--snow);color:var(--ink);border:1px solid var(--rule);border-radius:18px;padding:14px 14px 14px 18px;box-shadow:0 18px 40px -20px rgba(13,25,18,.45);animation:cookie-in .4s var(--ease)}
.cookie p{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2,var(--ink))}
.cookie .btn{height:40px;padding:0 18px;flex:none}
@keyframes cookie-in{from{transform:translateY(16px);opacity:0}}
@media (max-width:600px){.cookie{left:12px;right:12px;bottom:12px;max-width:none}}
body.has-bar .cookie{bottom:84px}

/* короткие формы и мессенджеры */
.form__legal{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--mute)}
.modal .form__legal,.contact__form .form__legal{max-width:36em}
.cta-band__msg{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.cta-band__msg a{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sage);border:1px solid rgba(184,198,166,.4);border-radius:999px;padding:8px 14px}
.cta-band__msg a:hover{color:var(--paper);border-color:var(--paper)}

/* всплывающее предложение */
.offer{position:fixed;right:24px;bottom:104px;z-index:58;width:min(380px,calc(100vw - 32px));background:var(--snow);color:var(--ink);border:1px solid var(--rule);border-radius:20px;padding:22px 22px 20px;box-shadow:0 24px 60px -24px rgba(13,25,18,.45);display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.offer.is-on{opacity:1;transform:none}
.offer__x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:transparent;font-size:22px;color:var(--mute);cursor:pointer;border-radius:50%}
.offer__x:hover{background:var(--plinth);color:var(--ink)}
.offer__t{font:400 22px/1.2 var(--f-sans);letter-spacing:-.01em;padding-right:28px}
.offer__d{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2,var(--ink))}
.offer__btn{align-self:flex-start;margin-top:4px}
@media (max-width:600px){.offer{left:12px;right:12px;bottom:12px;width:auto;border-radius:18px}}
@media (prefers-reduced-motion:reduce){.offer{transition:none}}

/* раздел «По теме» — ссылки на дочерние страницы */
.related{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.related .label{grid-column:1/4}
.related__links{grid-column:4/11}
.related__links a{font-size:18px;font-weight:400}
@media (max-width:900px){.related .label,.related__links{grid-column:1/-1}}

/* ===================== Полировка вёрстки (impeccable: layout · typeset · adapt · polish) ===================== */
:root{interpolate-size:allow-keywords}
html{scroll-padding-top:104px;scrollbar-color:var(--sage) var(--paper)}
body{caret-color:var(--pine)}
h1,h2,h3,.tile__title,.prose__title,.h-display{text-wrap:balance}
p,li,.lead{text-wrap:pretty}
table,.price-list,[data-count],.stat__num{font-variant-numeric:tabular-nums}

/* меню: пункты никогда не переносятся; на ноутбуках — плотнее */
.nav a{white-space:nowrap}
@media (max-width:1480px){
  .header__in{gap:20px}
  .nav{gap:0}
  .nav a{padding:10px 10px}
  .nav__n{display:none}
}

/* плитки направлений: двухстрочные заглавные не слипаются и читаются на любом фото */
.tile__title{line-height:1.04}
.tile::after{background:linear-gradient(180deg,rgba(13,25,18,.62),rgba(13,25,18,.18) 34%,rgba(13,25,18,0) 52%,rgba(13,25,18,0) 62%,rgba(13,25,18,.6))}
.tile__bottom .btn{transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.tile:hover .tile__bottom .btn{background:var(--snow);color:var(--ink);border-color:var(--snow)}

/* длина строки: 65–75 знаков на планшете и ноутбуке, когда колонка во всю ширину */
@media (max-width:1100px){
  .prose__main > p,.prose__main > ul,.prose__main > ol,.faq__a,.section__head .lead,.split__body p,.cta-band p,.feature p{max-width:68ch}
}

/* вопросы и ответы — раскрывающийся список в языке сайта (1px линии, круглая иконка) */
.faq{border-top:1px solid var(--ink);margin-top:8px}
.prose__main .faq{margin-top:28px}
.faq__item{border-bottom:1px solid var(--rule,rgba(19,32,26,.18))}
.faq__item:last-child{border-bottom-color:var(--ink)}
.faq__q{display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:12px;padding:22px 0;cursor:pointer;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__n{font:400 13px var(--f-mono);color:var(--mute);align-self:start;padding-top:.45em}
.prose__main .faq__t{margin:0;font:400 clamp(19px,1.7vw,24px)/1.3 var(--f-sans);letter-spacing:-.012em;color:var(--ink);transition:color .25s}
.faq__q:hover .faq__t{color:var(--pine)}
.faq__i{width:40px;height:40px;border-radius:999px;border:1px solid var(--ink);position:relative;transition:background .3s var(--ease),color .3s var(--ease),transform .45s var(--ease)}
.faq__i::before,.faq__i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.faq__i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__i{background:var(--ink);color:var(--snow)}
.faq__item[open] .faq__i::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{padding:0 52px 26px 56px}
.faq__a > * + *{margin-top:12px}
.faq__a p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2,var(--ink))}
.faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .5s cubic-bezier(.16,1,.3,1),content-visibility .5s allow-discrete}
.faq__item[open]::details-content{block-size:auto}
.faq__q:focus-visible{outline:2px solid var(--pine);outline-offset:4px;border-radius:4px}
@media (max-width:600px){
  .faq__q{grid-template-columns:1fr 36px;padding:18px 0}
  .faq__n{display:none}
  .faq__i{width:36px;height:36px}
  .faq__a{padding:0 0 22px}
}

/* один авторский момент: заголовок первого экрана проявляется по словам — из размытия в резкость */
.h-display .w{display:inline-block;opacity:0;transform:translateY(.32em);filter:blur(10px);animation:wsWord 1.25s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.15s + var(--i) * 70ms)}
@keyframes wsWord{to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.h-display .w{opacity:1;transform:none;filter:none;animation:none}}

/* тонкая линия прочтения под шапкой — только на длинных страницах, только где браузер умеет */
@supports (animation-timeline:scroll()){
  .read-line{position:fixed;left:0;right:0;top:0;height:2px;z-index:70;background:var(--resin);transform-origin:0 50%;transform:scaleX(0);animation:wsRead linear both;animation-timeline:scroll(root);pointer-events:none}
  @keyframes wsRead{to{transform:scaleX(1)}}
}
.faq__q--own{grid-template-columns:1fr 40px}
.faq__q--own + .faq__a,.faq__item:has(.faq__q--own) .faq__a{padding-left:0}
.page-hero .h-display--long{font-size:clamp(40px,5.6vw,84px);line-height:1.02;max-width:17ch}
@media (max-width:1100px){.intro__text .lead,.intro__text p{max-width:60ch}}
.page-hero .crumbs,.scene .crumbs{text-shadow:0 1px 14px rgba(13,25,18,.7)}

/* ===================== Выпадающие списки в стиле сайта =====================
   Настоящий <select> (формы, конструктор и калькуляторы работают как раньше), но список рисуем сами.
   Браузеры без поддержки (Safari, Firefox) показывают системный список — ничего не ломается. */
@supports (appearance:base-select){
  select:not([multiple]){appearance:base-select;cursor:pointer;display:flex;align-items:center}
  select:not([multiple])::picker-icon{display:none}
  select:not([multiple]):open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 7l5-5 5 5' fill='none' stroke='%2313201a' stroke-width='1.5'/%3E%3C/svg%3E")}
  ::picker(select){
    appearance:base-select;
    position-try-order:normal;
    border:1px solid var(--rule);border-radius:16px;padding:6px;margin-block:10px;
    background:var(--snow);color:var(--ink);
    box-shadow:0 28px 56px -20px rgba(13,25,18,.34),0 2px 8px rgba(13,25,18,.06);
    min-inline-size:anchor-size(self-inline);max-block-size:min(380px,60vh);overflow:auto;
    scrollbar-width:thin;scrollbar-color:var(--sage) transparent;
    opacity:0;translate:0 -8px;scale:.985;transform-origin:50% 0;
    transition:opacity .2s cubic-bezier(.16,1,.3,1),translate .38s cubic-bezier(.16,1,.3,1),scale .38s cubic-bezier(.16,1,.3,1),overlay .38s allow-discrete,display .38s allow-discrete;
  }
  ::picker(select):popover-open{opacity:1;translate:0 0;scale:1}
  @starting-style{::picker(select):popover-open{opacity:0;translate:0 -8px;scale:.985}}
  select:not([multiple]) option{
    display:flex;align-items:center;gap:14px;min-block-size:46px;padding:11px 14px;border-radius:10px;
    font:400 17px/1.3 var(--f-sans);color:var(--ink);background:transparent;cursor:pointer;
    transition:background-color .16s ease,color .16s ease;
  }
  select:not([multiple]) option::checkmark{display:none}
  select:not([multiple]) option:hover,select:not([multiple]) option:focus-visible{background:var(--plinth);outline:none}
  select:not([multiple]) option:checked{background:var(--lichen);font-weight:500}
  select:not([multiple]) option:checked::after{content:"";margin-left:auto;flex:none;width:7px;height:7px;border-radius:50%;background:var(--pine)}
  select:not([multiple]) option:disabled{color:var(--mute);cursor:default}
  @media (prefers-reduced-motion:reduce){::picker(select){transition:none}}
}

/* калькуляторы: результат не распирает карточку при любых числах; подсказка о допустимом диапазоне */
.res__row dt{flex:none;max-width:45%}
.res__row dd{min-width:0;overflow-wrap:anywhere}
.calc__in .inp{position:relative}
.calc__in .inp.is-capped input{border-color:var(--resin-deep);box-shadow:0 0 0 1px var(--resin-deep)}
.calc__in .inp.is-capped::after{content:"Допустимо " attr(data-hint);position:absolute;left:0;top:100%;margin-top:6px;z-index:3;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--snow);font:400 12px/1.2 var(--f-mono);white-space:nowrap;animation:wsHint .3s cubic-bezier(.16,1,.3,1)}
@keyframes wsHint{from{opacity:0;translate:0 -4px}}