@charset "UTF-8";@font-face{font-family:"PT Sans";src:url("../fonts/ptsans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"PT Sans";src:url("../fonts/ptsans-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--swiper-theme-color:#007aff}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}:root{--bs-teal:#a1c778;--bs-cyan:#5fb9bd;--bs-primary:#5fb9bd;--bs-secondary:#a1c778;--bs-light:#c1c4c7;--bs-white:#fff;--bs-primary-rgb:95,185,189;--bs-secondary-rgb:161,199,120;--bs-light-rgb:193,196,199;--bs-white-rgb:255,255,255;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:"PT Sans","Trebuchet MS","Lucida Grande",Tahoma,Verdana,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.2;--bs-body-color:#000;--bs-body-color-rgb:0,0,0;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-link-color:#5fb9bd;--bs-link-color-rgb:95,185,189;--bs-link-decoration:none;--bs-link-hover-color:#4c9497;--bs-link-hover-color-rgb:76,148,151;--bs-border-width:1px;--bs-border-color:#c1c4c7;--bs-form-invalid-color:#f3315f;--bs-form-invalid-border-color:#f3315f}*,::after,::before{box-sizing:border-box}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}h1,h2,h3,h4{margin-top:0;margin-bottom:0;font-weight:700;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}p{margin-top:0;margin-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}blockquote{margin:0 0 1rem}strong{font-weight:bolder}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:none}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[type=button],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;line-height:inherit;font-size:1.5rem}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1)}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}.figure{display:inline-block}.container{--bs-gutter-x:0;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:1000px;--bs-breakpoint-xl:1400px}.row{--bs-gutter-x:0;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col-12{flex:0 0 auto;width:100%}.form-label{margin-bottom:.625rem;font-size:.9375rem;font-weight:500}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-clip:padding-box;border:var(--bs-border-width) solid #c1c4c7;border-radius:.5rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#afdcde;outline:0;box-shadow:0 0 0 .25rem rgba(95,185,189,.25)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::-moz-placeholder{color:#c1c4c7;opacity:1}.form-control::placeholder{color:#c1c4c7;opacity:1}.form-control:disabled{background-color:var(--bs-secondary-bg);opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:var(--bs-secondary-bg)}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--bs-secondary-bg)}textarea.form-control{min-height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))}.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235fb9bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem .75rem;border:var(--bs-border-width) solid #c1c4c7;border-radius:.5rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select:focus{border-color:#afdcde;outline:0;box-shadow:0 0 0 .25rem rgba(95,185,189,.25)}.form-select[multiple]{padding-right:.75rem;background-image:none}.form-select:disabled{background-color:var(--bs-secondary-bg)}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}.form-check{display:block;min-height:1.2rem;padding-left:2.35em;margin-bottom:0}.form-check .form-check-input{float:left;margin-left:-2.35em}.form-check-input{--bs-form-check-bg:var(--bs-body-bg);flex-shrink:0;width:1.55em;height:1.55em;margin-top:-.175em;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;print-color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.4em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:opacity(90%)}.form-check-input:focus{border-color:#afdcde;outline:0;box-shadow:0 0 0 .25rem rgba(95,185,189,.25)}.form-check-input:checked{background-color:#5fb9bd;border-color:#5fb9bd}.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3e%3cpath fill='%23fff' d='M32.682 71.796a6.87 6.87 0 0 1 .183-9.512 6.823 6.823 0 0 1 9.667 0l27.783 27.88 40.874-46.35.204-.222a6.823 6.823 0 0 1 9.449-.368 6.87 6.87 0 0 1 .585 9.687L75.735 104.72a6.823 6.823 0 0 1-9.953.305L32.865 71.985z'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%235fb9bd'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#5fb9bd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.form-check-inline{display:inline-block;margin-right:1rem}.invalid-feedback{display:none;width:100%;margin-top:0;font-size:1rem;color:var(--bs-form-invalid-color)}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip{display:block}.form-control.is-invalid{border-color:var(--bs-form-invalid-border-color)}.form-control.is-invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-select.is-invalid{border-color:var(--bs-form-invalid-border-color)}.form-select.is-invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid{border-color:var(--bs-form-invalid-border-color)}.form-check-input.is-invalid:checked{background-color:var(--bs-form-invalid-color)}.form-check-input.is-invalid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid~.form-check-label{color:var(--bs-form-invalid-color)}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid{z-index:4}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.2;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#5fb9bd;--bs-btn-border-color:#5fb9bd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#519da1;--bs-btn-hover-border-color:#4c9497;--bs-btn-focus-shadow-rgb:119,196,199;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4c9497;--bs-btn-active-border-color:#478b8e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#5fb9bd;--bs-btn-disabled-border-color:#5fb9bd}.btn-secondary{--bs-btn-color:#000;--bs-btn-bg:#a1c778;--bs-btn-border-color:#a1c778;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#afcf8c;--bs-btn-hover-border-color:#aacd86;--bs-btn-focus-shadow-rgb:137,169,102;--bs-btn-active-color:#000;--bs-btn-active-bg:#b4d293;--bs-btn-active-border-color:#aacd86;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#a1c778;--bs-btn-disabled-border-color:#a1c778}.btn-white{--bs-btn-color:#000;--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-color:#000;--bs-btn-hover-bg:white;--bs-btn-hover-border-color:white;--bs-btn-focus-shadow-rgb:217,217,217;--bs-btn-active-color:#000;--bs-btn-active-bg:white;--bs-btn-active-border-color:white;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#fff;--bs-btn-disabled-border-color:#fff}.btn-outline-secondary{--bs-btn-color:#a1c778;--bs-btn-border-color:#a1c778;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#a1c778;--bs-btn-hover-border-color:#a1c778;--bs-btn-focus-shadow-rgb:161,199,120;--bs-btn-active-color:#000;--bs-btn-active-bg:#a1c778;--bs-btn-active-border-color:#a1c778;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#a1c778;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#a1c778;--bs-gradient:none}.btn-outline-white{--bs-btn-color:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-focus-shadow-rgb:255,255,255;--bs-btn-active-color:#000;--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#fff;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#fff;--bs-gradient:none}.fade{transition:opacity .15s linear}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}:root{--bs-btn-close-filter: }.modal.fade .modal-dialog{transform:translate(0,-50px);transition:transform .3s ease-out}.modal.show .modal-dialog{transform:none}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;height:calc(var(--vh,1vh) * 100);background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.form-file-drop__input,.visually-hidden{width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.form-file-drop__input:not(caption),.visually-hidden:not(caption){position:absolute!important}.form-file-drop__input *,.visually-hidden *{overflow:hidden!important}.d-none{display:none!important}.text-primary{--bs-text-opacity:1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-primary-emphasis{color:var(--bs-primary-text-emphasis)!important}.text-secondary-emphasis{color:var(--bs-secondary-text-emphasis)!important}:root{--swiper-preloader-color:#5fb9bd}.swiper-lazy-preloader{border-width:.125rem;margin-left:-1.25rem;margin-top:-1.25rem;height:2.5rem;width:2.5rem}.swiper-button-next,.swiper-button-prev{-webkit-user-select:none;-moz-user-select:none;user-select:none}.glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{transition:transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:flex!important;justify-content:center;align-items:center;transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:flex;justify-content:center;flex-direction:column;max-width:100%;margin:auto;height:100vh;height:calc(var(--vh,1vh) * 100)}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{align-items:center}.gslide-image img{max-height:100vh;max-height:calc(var(--vh,1vh) * 100);display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;object-fit:cover;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:grabbing!important;transition:none}.gslide-video{position:relative;max-width:100vh;max-width:calc(var(--vh,1vh) * 100);width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:"";position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh;height:calc(var(--vh,1vh) * 75)}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);max-height:calc(calc(var(--vh,1vh) * 100) - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:grabbing!important;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:flex;width:100%;min-width:100%;padding:0;overflow:auto;max-height:75vh;max-height:calc(var(--vh,1vh) * 75);height:100%}.gslide-media{display:flex;width:auto}.zoomed .gslide-media{box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;flex-direction:column}.gslide-description{position:relative;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;order:2!important;max-height:78vh;max-height:calc(var(--vh,1vh) * 78);overflow:auto!important;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{transition:opacity .5s ease;opacity:1}.greset{transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);height:calc(calc(var(--vh,1vh) * 100) + 1px);position:fixed;top:-1px;left:0;background:#fff;will-change:opacity}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:flex;justify-content:center;align-items:center;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1;pointer-events:none}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-media{padding:1.25rem}.glightbox-clean .gslide-media img{border-radius:.625rem}.glightbox-clean .gdesc-inner{padding:1.25rem}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-radius:.25rem;padding:0}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:#5fb9bd}.glightbox-clean .gclose:hover path,.glightbox-clean .gnext:hover path,.glightbox-clean .gprev:hover path{fill:#fff}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#5fb9bd;transition:fill .2s ease-in-out}.glightbox-clean .gnext,.glightbox-clean .gprev{border-radius:50%;position:absolute;top:-100%;width:4.8125rem;height:4.8125rem}.glightbox-clean .gnext svg,.glightbox-clean .gprev svg{width:22%}.glightbox-clean .gprev{left:1.25rem}.glightbox-clean .gprev svg{transform:translateX(-10%)}.glightbox-clean .gnext{right:1.25rem}.glightbox-clean .gnext svg{transform:translateX(10%)}.glightbox-clean .gclose{width:2.5rem;height:2.5rem;top:.75rem;right:.75rem;position:absolute}.glightbox-clean .gclose svg{width:60%}.gfadeIn{animation:gfadeIn .5s ease}.gfadeOut{animation:gfadeOut .5s ease}.gslideOutLeft{animation:gslideOutLeft .3s ease}.gslideInLeft{animation:gslideInLeft .3s ease}.gslideOutRight{animation:gslideOutRight .3s ease}.gslideInRight{animation:gslideInRight .3s ease}.gzoomIn{animation:gzoomIn .5s ease}.gzoomOut{animation:gzoomOut .5s ease}@keyframes lightboxLoader{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gslideInLeft{from{opacity:0;transform:translate3d(-60%,0,0)}to{visibility:visible;transform:translate3d(0,0,0);opacity:1}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;transform:translate3d(0,0,0)}to{transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideInRight{from{opacity:0;visibility:visible;transform:translate3d(60%,0,0)}to{transform:translate3d(0,0,0);opacity:1}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;transform:translate3d(0,0,0)}to{transform:translate3d(60%,0,0);opacity:0}}@keyframes gzoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}:root{--plyr-color-main:var(--bs-cyan);--plyr-video-control-background-hover:var(--bs-cyan)}body,html{min-height:100vh;min-height:calc(var(--vh,1vh) * 100)}body{display:flex;flex-direction:column;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body.page-inner{padding-top:3.125rem}body.is-menu-open{overflow:hidden}a,button{transition:all .2s ease-in-out}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}img{height:auto;max-width:100%}.btn-primary{--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}.btn-white{--bs-btn-hover-bg:#5fb9bd;--bs-btn-active-bg:#5fb9bd;--bs-btn-hover-border-color:#5fb9bd;--bs-btn-active-border-color:#5fb9bd;--bs-btn-color:#373b3f;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}.btn-outline-white{--bs-btn-hover-bg:#5fb9bd;--bs-btn-active-bg:#5fb9bd;--bs-btn-hover-border-color:#5fb9bd;--bs-btn-active-border-color:#5fb9bd;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}.btn-outline-secondary{--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}.main{display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative}.main .container{display:flex;flex-direction:column;flex-grow:1}.main .content{border-radius:1.25rem 1.25rem 0 0;display:flex;flex-direction:column;flex-grow:1;position:relative;z-index:2}.content{background-color:#fff;overflow:hidden;padding-inline:1.125rem}.section{position:relative}.section-title{align-items:center;display:flex;font-size:1.75rem;font-weight:500;line-height:1}.section-title .icon{color:#5fb9bd;flex-shrink:0;height:1.75rem;margin-right:.6125rem;width:1.75rem}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.page-background::-webkit-media-controls,.page-background::-webkit-media-controls-overlay-play-button,.page-background::-webkit-media-controls-panel,.page-background::-webkit-media-controls-start-playback-button{-webkit-appearance:none;display:none!important;opacity:0}.page-background{background-color:#646d42;background-image:url("../i/hero/hero-poster.webp");background-position:center;background-size:cover;height:100%;left:50%;object-fit:cover;position:fixed;top:0;transform:translateX(-50%);z-index:-1;width:100%}.section--inner{padding-bottom:3.125rem;padding-top:1.875rem}.content-heading{align-items:flex-end;-moz-column-gap:1.2375rem;column-gap:1.2375rem;margin-bottom:1.98rem}.content-heading__logo{width:7.21875rem}.content-heading__descr{font-size:.86625rem;margin-bottom:.20625rem}.page-heading{font-size:1.3125rem;font-weight:700;line-height:1.3;margin:0 auto 2rem;text-align:center}.search-form{color:#5fb9bd;transition:opacity .3s cubic-bezier(.16, 1, .3, 1),visibility .3s cubic-bezier(.16, 1, .3, 1)}.search-form .form-control{border-color:#5fb9bd;font-size:.75rem;padding:.5625rem 2.625rem .5625rem .875rem;width:100%}.search-form .btn-search{position:absolute;right:1.125rem;top:50%;transform:translateY(-50%)}.btn-search{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:inherit;display:flex;height:1rem;justify-content:center;padding:0;width:1rem}.btn-search .icon{height:100%;vertical-align:top;width:100%}.form-label{display:block;float:none}.form-select{padding-right:3.5em!important}.form-select:invalid{color:#c1c4c7}.invalid-feedback{background-color:#fce3e8;border-radius:0 0 .625rem .625rem;font-size:inherit;margin-top:-.625rem;padding:1.25rem .625rem .625rem;position:relative;text-align:center;z-index:-1}.form-checklist{margin-top:.75rem}.form-checklist .form-check{font-size:.9375rem;padding-left:2.85em}.form-checklist .form-check-inline{margin-right:1.875rem}.form-checklist .form-check-input{height:2em;margin-left:-2.85em;width:2em}.form-checklist .form-check-input[type=radio]:checked{background-color:#fff}.form-checklist .form-check-label{padding-top:.25rem}.form-agreement .form-check-label{font-weight:500}.form-file-drop{position:relative}.form-file-drop__zone{align-items:center;background-color:#fff;border:1px dashed #c1c4c7;border-radius:.75rem;cursor:pointer;display:flex;flex-direction:column;gap:.25rem;font-size:.875rem;justify-content:center;min-height:5.3125rem;padding:.75rem 2.5rem;text-align:center;transition:border-color .2s ease,background-color .2s ease}.form-file-drop__icon{display:flex;justify-content:center}.form-file-drop__icon .icon{color:#818e9c;height:2.0625rem;width:2.0625rem}.form-file-drop__feedback{display:block}.form-file-drop__feedback.is-success{background-color:#e8f1dd;color:#51643c}.form-file-drop__input:focus-visible+.form-file-drop__zone,.form-file-drop__input:hover+.form-file-drop__zone,.form-file-drop__zone.is-dragover{background-color:#f5fbfb;border-color:#5fb9bd}.link-tag{--bs-link-color-rgb:255,255,255;--bs-link-hover-color-rgb:255,255,255;align-items:center;border-radius:50rem;color:#fff;display:inline-flex;font-size:.75rem;font-weight:600;justify-content:center;line-height:1.33;min-height:1.5625rem;padding:.175em .833em;text-decoration:none;text-wrap:nowrap;vertical-align:top}.link-tag--primary{background-color:#5fb9bd}.link-tag--secondary{background-color:#a1c778}a.link-tag--primary:focus,a.link-tag--primary:hover,button.link-tag--primary:focus,button.link-tag--primary:hover{background-color:#519da1}a.link-tag--secondary:focus,a.link-tag--secondary:hover,button.link-tag--secondary:focus,button.link-tag--secondary:hover{background-color:#89a966}.content-tabs{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin-bottom:2.25rem;padding-left:0}.content-tabs .nav-link{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid currentColor;border-radius:50rem;color:#5fb9bd;display:inline-flex;font-size:.75rem;font-weight:600;justify-content:center;line-height:1;min-height:1.5625rem;padding:.458em 1.167em;text-wrap:nowrap}.content-tabs .nav-link:not(.active):hover{color:#4c9497}.content-tabs .nav-link.active{background-color:#5fb9bd;border-color:#5fb9bd;color:#fff}.content-tabs .nav-link--secondary{color:#a1c778}.content-tabs .nav-link--secondary:not(.active):hover{color:#819f60}.content-tabs .nav-link--secondary.active{background-color:#a1c778;border-color:#a1c778}.diamond-list{--color-start:#b8ce74;--color-stop:#7ec0a3;--offset:1.25rem;list-style:none;margin-bottom:1.25rem;padding-left:0}.diamond-list li{padding-left:3rem;position:relative}.diamond-list li::after,.diamond-list li::before{background-position:center calc(-1 * var(--start-px));background-repeat:no-repeat;background-size:100% calc(var(--height) + 1.66em);content:"";left:0;position:absolute;top:0}.diamond-list li:not(:last-child){padding-bottom:var(--offset)}.diamond-list li:not(:last-child)::before{background-image:linear-gradient(180deg,var(--color-start),var(--color-stop));content:"";height:100%;left:.98em;position:absolute;top:.25em;width:.225em;z-index:-2}.diamond-list li::after{background-image:linear-gradient(135deg,var(--color-start),var(--color-stop));border-radius:.25em;content:"";height:1.66em;left:.25em;position:absolute;top:.45em;transform:rotate(45deg);width:1.66em;z-index:-1}.gradient-list{--color-start:#ddd755;--color-stop:#5fb9bd;list-style:none;margin-bottom:0;padding-left:1.75rem;position:relative}.gradient-list::before{background-image:linear-gradient(to bottom,var(--color-start),var(--color-stop));background-repeat:no-repeat;border-radius:50rem;content:"";height:100%;left:0;position:absolute;top:0;width:.1875rem}.gradient-list li{font-size:.875rem;margin-bottom:.75rem}.article{margin-inline:var(--article-offset-x,0)}.article blockquote{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='119' height='89' fill='none' viewBox='0 0 119 89'%3E%3Cpath fill='%235fb9bd' d='M74.178.061c2.14-.095 4.77-.03 6.939-.03l12.738.001 9.257-.002c2.985-.002 6.302-.28 9.082.906a11.14 11.14 0 0 1 5.988 6.137c.397.99.641 2.034.724 3.097.151 1.902.073 4.628.071 6.603l-.002 11.378.001 13.071c0 2.737.066 5.8-.113 8.512a40.7 40.7 0 0 1-1.213 7.393c-.33 1.244-1.015 2.725-1.527 3.938l-2.439 5.757c-2.476 5.847-4.955 11.7-7.415 17.555-.838 1.995-2.3 3.336-4.316 4.124-.543.218-1.426.389-2.013.407-4.037.135-8.06-.003-12.104.056-2.62.038-4.488-1.701-4.096-4.382.143-.98.344-1.933.535-2.907l1.125-5.73 3.964-20.315c-4.262-.066-8.542.02-12.806-.014-1.65-.012-3.232.052-4.854-.338a11.16 11.16 0 0 1-4.84-2.566 10.9 10.9 0 0 1-3.625-7.899c-.06-2.55-.037-5.118-.036-7.67V14.748c0-1.565-.067-4.212.21-5.69a11.14 11.14 0 0 1 2.739-5.416C68.342 1.267 71 .21 74.178.062'/%3E%3Cpath fill='%235fb9bd' d='M10.967.062c2.215-.093 4.828-.03 7.063-.03h12.867L39.983.03c3.023-.002 6.318-.281 9.127.956a11.13 11.13 0 0 1 5.914 6.197c.384.983.616 2.02.687 3.072.136 1.915.059 4.646.058 6.63l-.002 11.496.001 12.872c0 2.8.063 5.833-.115 8.605a40 40 0 0 1-1.147 7.055c-.387 1.496-1.123 3.065-1.732 4.504l-2.639 6.231-4.812 11.377c-.77 1.822-1.532 3.657-2.309 5.476-.82 1.92-2.353 3.28-4.312 4.016-2.338.837-6.743.303-9.288.437-1.832.096-4.072.02-5.895-.087-.859-.05-1.987-.817-2.414-1.531-1.153-1.654-.375-3.903-.006-5.785l1.143-5.83 3.924-20.09c-3.508-.057-7.055.018-10.562-.016-2.094-.02-5.049.144-7.035-.319a11.1 11.1 0 0 1-4.903-2.586C1.46 50.717.132 47.948.051 44.999c-.07-2.592-.043-5.21-.044-7.803V22.973l.001-8.22c0-1.528-.068-4.242.194-5.658a11.2 11.2 0 0 1 2.731-5.432C5.103 1.289 7.801.205 10.967.062'/%3E%3C/svg%3E%0A");background-position:right 1.25rem top 1.25rem;background-repeat:no-repeat;background-size:3.71875rem 2.78125rem;border:1px solid #c1c4c7;border-radius:1.25rem;font-size:.875rem;font-weight:500;line-height:1.25;margin-block:2rem;padding-block:1.25rem;padding-inline:calc(var(--article-offset-x) - 1px);padding-right:calc(var(--article-offset-x) - 1px + 3.625rem)}.article blockquote p{margin-bottom:0}.article-heading{font-size:1rem;font-weight:500;line-height:1.25;margin:0 .5rem 2.25rem;text-align:center;text-wrap-style:balance}.article-date{font-size:.625rem;margin-bottom:.2em}.article-body{font-size:.875rem;line-height:1.286;margin-bottom:1.25rem}.article-body ol,.article-body p,.article-body table,.article-body ul{margin-bottom:1.286em}.article-body h2{font-size:1rem;font-weight:500;line-height:1.25;margin-block:1.875rem;text-align:center}.article-body h2 a{text-decoration:none}.article-body a{text-decoration:underline}.article-body strong{font-weight:500}.text-medium{font-weight:500}.article-tags{display:flex;flex-wrap:wrap;gap:.5rem}.article-tags .link-tag{padding:.375em 1.875em}.article-image{margin-block:1.875rem}.article-image__caption{font-size:.5rem;line-height:1.25;margin-top:1em;text-align:center}.article-image picture{display:block;height:100%}.article-image img{border-radius:.625rem;object-fit:cover;width:auto}.article-image--wide{height:10.5rem}.article-image--wide img{height:100%;width:100%}.article-image--double{display:grid;gap:.625rem;grid-template-columns:repeat(2,minmax(0,1fr))}.article-image--double-h{display:grid;gap:.875rem;grid-template-columns:100%}.article-image--triple{display:grid;gap:.625rem;grid-template-columns:repeat(3,minmax(0,1fr))}.article-image--triple-h{display:grid;gap:1.5rem;grid-template-columns:100%}.article-image--triple-h img{border-radius:1.25rem;width:100%}.link-more{align-items:center;display:inline-flex}.link-more span{position:relative}.link-more span::after{border-bottom:.0625rem solid currentColor;content:"";left:0;position:absolute;top:110%;width:100%}.link-more .icon-arrow-down{flex-shrink:0;height:.1875rem;margin-left:.28125rem;transform:translateY(25%);width:.25rem}.accordion-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;font-size:inherit;font-weight:inherit;line-height:inherit;padding:0;text-align:left;width:100%}.scroll-to-top{padding-bottom:2.5rem}.scroll-to-top .container{display:flex}.scroll-to-top .btn{--bs-btn-padding-x:1.3em;--bs-btn-padding-y:0.65em;--bs-btn-font-size:0.75rem;--bs-btn-border-radius:50rem;margin-left:auto}.scroll-to-top .btn .icon{height:1.5em;margin-left:.7em;width:1.5em}.navbar{color:#fff;left:0;position:fixed;top:0;width:100%;z-index:1030}.navbar-container{align-items:center;display:flex;height:3.125rem}.navbar-brand svg{fill:#fff;height:1.5rem;transition:fill .35s cubic-bezier(.16, 1, .3, 1);width:auto}.navbar-toggler,.search-toggler{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;background-color:transparent;border:none;display:flex;height:1.5rem;justify-content:center;padding:0;position:relative;width:1.5rem;z-index:1031}.navbar-toggler:not(.navbar-toggler.collapsed,.search-toggler.collapsed) .navbar-toggler-bar,.search-toggler:not(.navbar-toggler.collapsed,.search-toggler.collapsed) .navbar-toggler-bar{left:.03125rem;width:1.4375rem}.navbar-toggler:not(.navbar-toggler.collapsed,.search-toggler.collapsed) .navbar-toggler-bar:first-child,.search-toggler:not(.navbar-toggler.collapsed,.search-toggler.collapsed) .navbar-toggler-bar:first-child{top:.6875rem;transform:rotate(145deg)}.navbar-toggler:not(.navbar-toggler.collapsed,.search-toggler.collapsed) .navbar-toggler-bar:nth-child(2),.search-toggler:not(.navbar-toggler.collapsed,.search-toggler.collapsed) .navbar-toggler-bar:nth-child(2){opacity:0;transform:translateX(-100%)}.navbar-toggler:not(.navbar-toggler.collapsed,.search-toggler.collapsed) .navbar-toggler-bar:nth-child(3),.search-toggler:not(.navbar-toggler.collapsed,.search-toggler.collapsed) .navbar-toggler-bar:nth-child(3){top:.6875rem;transform:rotate(-145deg)}.is-menu-open .navbar-toggler,.is-menu-open .search-toggler{color:#5fb9bd}.navbar-toggler-bar{background-color:currentColor;border-radius:.0625rem;height:.125rem;left:.15625rem;position:absolute;transition:all .35s cubic-bezier(.16, 1, .3, 1);width:1.1875rem;will-change:top,opacity,transform}.navbar-toggler-bar:first-child{top:.3125rem}.navbar-toggler-bar:nth-child(2){top:.6875rem}.navbar-toggler-bar:nth-child(3){top:1.0625rem}.navbar-collapse:not(.show){display:block}.navbar-collapse.collapsing{height:auto;overflow:visible;transition:all .35s cubic-bezier(.16, 1, .3, 1)}.navbar-nav{list-style:none;margin-bottom:0;padding-left:0}.navbar-nav>.nav-item{--bs-link-color-rgb:0,0,0;--bs-link-hover-color-rgb:95,185,189;font-size:.9375rem;line-height:1.2;position:relative}.navbar-nav>.nav-item>.nav-link{align-items:center;-moz-column-gap:0.36rem;column-gap:.36rem;display:inline-flex;z-index:51}.navbar-nav>.nav-item>.nav-link .nav-link-span{position:relative}.navbar-nav>.nav-item>.nav-link .nav-link-span::before{content:attr(data-text);display:block;font-weight:700;height:0;overflow:hidden;pointer-events:none;visibility:hidden}.navbar-nav>.nav-item>.nav-link .icon-arrow-down{flex-shrink:0;height:.27rem;width:.36rem}.navbar-subnav-popup{transition:opacity .25s ease,transform .3s ease,visibility .3s ease}.navbar-subnav{list-style:none;margin-bottom:0;padding-left:0}.navbar-subnav>.nav-item{--bs-link-color-rgb:0,0,0;--bs-link-hover-color-rgb:95,185,189;font-size:.875rem}.navbar-subnav>.nav-item+.nav-item{margin-top:.625rem}.navbar-subnav>.nav-item.has-subsubnav>.nav-link{text-wrap:nowrap}.navbar-subnav>.nav-item.has-subsubnav .navbar-subsubnav{margin:0;max-height:0;opacity:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,opacity .25s ease,margin .3s ease,visibility .3s ease}.navbar-subnav>.nav-item.has-subsubnav.is-subsubnav-open>.nav-link{--bs-link-color-rgb:95,185,189;font-weight:700}.navbar-subnav>.nav-item.has-subsubnav.is-subsubnav-open>.nav-link .icon-arrow-down-thin{transform:rotate(180deg)}.navbar-subnav>.nav-item.has-subsubnav.is-subsubnav-open .navbar-subsubnav{margin-bottom:.75rem;margin-top:.75rem;max-height:25rem;opacity:1;visibility:visible}.navbar-subnav>.nav-item>.nav-link .icon-arrow-down-thin{color:#5fb9bd;height:.3125rem;margin-left:.125rem;width:.5rem}.navbar-subsubnav{list-style:none;margin-bottom:.75rem;margin-top:.75rem;padding-left:0}.navbar-subsubnav>.nav-item{font-size:.75rem;padding-left:.4375rem}.navbar-subsubnav>.nav-item+.nav-item{margin-top:.625rem}.navbar-side{margin-left:auto}.navbar-side-item{align-items:center;display:flex;height:1.5rem;justify-content:center;position:relative;width:1.5rem}.navbar-search .search-form{align-items:center;background-color:#fff;display:flex;height:3.125rem;left:0;padding-left:1.125rem;padding-right:2.875rem;position:fixed;top:0;width:100%;z-index:1099}.navbar-search .search-form:not(.is-open){opacity:0;visibility:hidden}.navbar-search .search-form .btn-search{right:3.25rem}.navbar-search .search-form .search-toggler{color:#5fb9bd;position:absolute;right:1.125rem;top:50%;transform:translateY(-50%)}.navbar-search .btn-search{height:1.5rem;width:1.5rem}.navbar-search .btn-search .icon{height:66%;width:66%}.navbar-search .btn-search-toggle{--bs-btn-color:currentColor;--bs-btn-hover-color:currentColor;--bs-btn-active-color:currentColor;position:relative;z-index:91}.navbar-contacts{align-items:flex-end;display:flex;flex-direction:column;width:11.97rem}.navbar-contacts{display:inline-flex;flex-direction:column}.navbar-phone{--bs-link-color-rgb:255,255,255;--bs-link-hover-color-rgb:217,217,217;display:flex;flex-direction:column;font-size:.9675rem;margin-bottom:.63rem;text-align:center;white-space:nowrap}.navbar-question .btn{width:100%}.navbar-phone strong{font-size:1.44em;line-height:1.5}.navbar-question .btn{--bs-btn-padding-y:0.405rem;--bs-btn-padding-x:0.765rem;--bs-btn-font-size:0.873rem;--bs-btn-border-radius:0.495rem;--bs-btn-border-width:0;--bs-btn-bg:#fff;--bs-btn-hover-bg:#5fb9bd;--bs-btn-active-bg:#5fb9bd;--bs-btn-color:#373b3f;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;display:flex;flex-direction:column;line-height:1.25;overflow:hidden;padding-bottom:calc(var(--bs-btn-padding-y) * 1.4);position:relative;white-space:nowrap;z-index:0}.navbar-question .btn::before{background-image:linear-gradient(-73deg,#fff -15%,#fff 100%);background-repeat:no-repeat;content:"";height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .15s ease-in-out;width:100%;z-index:-1}.navbar-question .btn:hover::before{opacity:0}.navbar-question .btn strong{font-size:1.45em}.footer .content{border-top:.0625rem solid #eaebef;padding-bottom:2.5rem}.footer-container{display:grid;grid-template-columns:100%;position:relative}.footer-cell--search .search-dropdown{align-items:center;display:flex;height:100%;justify-content:center;position:relative}.footer-cell--search .search-form{width:100%}.footer-cell--search .btn-search{color:#5fb9bd}.footer-logos{align-items:stretch;color:#eaebef;display:flex;justify-content:space-between}.footer-logos__item{height:2rem}.footer-logos__item img{height:100%;width:auto}.footer-logos__delimiter{border-left:1px solid #eaebef}.footer-nav{border-top:1px solid #eaebef;list-style:none;margin-bottom:0;margin-inline:-1.25rem;padding-left:0}.footer-nav>.nav-item{--bs-link-color-rgb:0,0,0;--bs-link-hover-color-rgb:0,0,0;border-bottom:1px solid #eaebef;font-size:.875rem}.footer-nav>.nav-item.is-subnav-open>.nav-link{font-weight:700}.footer-nav>.nav-item.is-subnav-open .footer-subnav{margin-bottom:1.25rem;margin-top:.5rem;max-height:25rem;opacity:1;visibility:visible}.footer-nav>.nav-item>.nav-link{align-items:center;display:flex;padding:.875rem 1.25rem}.footer-nav>.nav-item>.nav-link .icon-arrow-down-thin{color:#5fb9bd;margin-left:auto}.footer-subnav{list-style:none;margin-bottom:0;margin-top:0;max-height:0;opacity:0;padding-inline:1.25rem;transition:max-height .3s ease,opacity .25s ease,margin .3s ease,visibility .3s ease;visibility:hidden}.footer-subnav>.nav-item{font-size:.875rem}.footer-subnav>.nav-item+.nav-item{margin-top:.625rem}.footer-subnav>.nav-item+.nav-item.has-subsubnav .footer-subsubnav{margin:0;max-height:0;opacity:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,opacity .25s ease,margin .3s ease,visibility .3s ease}.footer-subnav>.nav-item+.nav-item.has-subsubnav.is-subsubnav-open>.nav-link{font-weight:700}.footer-subnav>.nav-item+.nav-item.has-subsubnav.is-subsubnav-open>.nav-link .icon-arrow-down-thin{transform:rotate(180deg)}.footer-subnav>.nav-item+.nav-item.has-subsubnav.is-subsubnav-open .footer-subsubnav{margin-bottom:.75rem;margin-top:.75rem;max-height:25rem;opacity:1;visibility:visible}.footer-subnav>.nav-item>.nav-link .icon-arrow-down-thin{color:#5fb9bd;margin-left:.125rem}.footer-subsubnav{list-style:none;margin-bottom:.75rem;margin-top:.75rem;padding-left:0}.footer-subsubnav>.nav-item{font-size:.75rem;padding-left:.4375rem}.footer-subsubnav>.nav-item+.nav-item{margin-top:.625rem}.footer-contacts{display:flex;flex-wrap:wrap;gap:.875rem 1rem}.footer-contact{--bs-link-color-rgb:0,0,0;--bs-link-hover-color-rgb:95,185,189;font-size:.6875rem;text-wrap:nowrap}.footer-contact .contact-link,.footer-contact .contact-text{align-items:flex-start;display:flex}.footer-contact .icon{color:#5fb9bd;height:1.5em;margin-right:.5em;transform:translateY(-10%);width:1.5em}.footer-socials{--bs-link-color-rgb:185,191,200;--bs-link-hover-color-rgb:95,185,189;align-items:center;display:flex;font-size:.4375rem}.footer-socials div+div{border-left:.03125rem solid #b9c0c8;margin-left:1.25em;padding-left:1.25em}.footer-socials .icon{height:2.75em;width:2.75em}.section--hero{color:#fff;padding-top:4.8125rem;position:relative}.hero-content{display:flex;flex-direction:column;height:23.5rem;position:relative}.hero-brand{margin-bottom:1.35rem}.hero-brand svg{fill:#fff;height:1.5rem;transition:fill .35s cubic-bezier(.16, 1, .3, 1);width:auto}.hero-title{font-family:var(--bs-body-font-family);font-size:1.3125rem;font-weight:700;line-height:1.3;margin-bottom:1.75rem}.hero-apply .btn{--bs-btn-border-radius:0.43em;--bs-btn-font-size:0.9375rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.12;--bs-btn-padding-y:0.62em;--bs-btn-padding-x:0.8em;align-items:center;display:inline-flex;text-align:left}.hero-apply .btn:active .arrow-right-wrap,.hero-apply .btn:focus-visible .arrow-right-wrap,.hero-apply .btn:hover .arrow-right-wrap{background-color:#fff;color:#5fb9bd}.hero-apply .btn .arrow-right-wrap{align-items:center;background-color:#5fb9bd;border-radius:.243em;color:#fff;display:flex;flex-shrink:0;height:1.24em;justify-content:center;margin-left:.62em;transition:inherit;width:1.28em}.hero-apply .btn .arrow-right-wrap .icon{height:45%;transform:translateX(5%);width:45%}.hero-footer{margin-top:auto;position:relative}.hero-containers{-moz-column-gap:1.125rem;column-gap:1.125rem;display:flex}.hero-containers-item{position:relative}.hero-containers-item .garbage{display:flex;flex-direction:column;height:5.31875rem;width:4.45625rem}.hero-containers-item .garbage__body{background-position:left bottom;background-repeat:no-repeat;background-size:100% auto;flex-grow:1}.hero-containers-item .garbage__cover{background-repeat:no-repeat;background-size:100% auto;flex-shrink:0;height:20%;transform-origin:left bottom;transition:transform .3s cubic-bezier(.33, 1, .68, 1);will-change:transform}.hero-containers-item .garbage__label{height:auto;left:50%;position:absolute;top:50%;transform:translate(-50%,-33%);transition:opacity .3s cubic-bezier(.33, 1, .68, 1);width:48%;will-change:opacity}.hero-containers-item .garbage__more{color:#fff;font-size:.5rem;font-weight:700;left:50%;line-height:1;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,10%);transition:opacity .3s cubic-bezier(.33, 1, .68, 1),transform .3s cubic-bezier(.33, 1, .68, 1);width:50%;will-change:transform,opacity}.hero-containers-item .garbage__link{height:100%;left:0;position:absolute;top:0;width:100%}.hero-containers-item .garbage--recyclable .garbage__body,.hero-containers-item .garbage--recyclable .garbage__cover{background-image:url(../i/hero/garbage-blue@2x.png)}.hero-containers-item .garbage--mixed-waste .garbage__body,.hero-containers-item .garbage--mixed-waste .garbage__cover{background-image:url(../i/hero/garbage-gray@2x.png)}.hero-buildings{bottom:-.125rem;left:50%;position:absolute;transform:translateX(-50%);width:100vw}.hero-buildings img{width:100vw}.hero-more{margin-bottom:-1.25rem;position:relative;z-index:2}.hero-more .container{padding-inline:0}.hero-more-link{--bs-btn-bg:rgba(161, 199, 120, 0.7);--bs-btn-hover-bg:rgba(137, 169, 102, 0.7);--bs-btn-active-bg:rgba(129, 159, 96, 0.7);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-border-radius:1.25rem;--bs-btn-border-width:0;--bs-btn-font-size:1.078125rem;--bs-btn-font-weight:700;--bs-btn-padding-y:0.875rem;--bs-btn-padding-x:1.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0;letter-spacing:.07em;padding-bottom:calc(var(--bs-btn-padding-y) + 1.25rem);text-transform:uppercase;width:100%}.hero-arrows{bottom:9.875rem;display:flex;flex-direction:column;left:50%;position:absolute;transform:translateX(-50%);z-index:3}.hero-arrows span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='27' fill='none' viewBox='0 0 47 27'%3E%3Cpath fill='%23f2f4f0' fill-rule='evenodd' d='M0 11.437V0l23.45 15.63L46.961 0v11.437L23.451 27z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-size:contain;height:1.906875rem;opacity:.35;animation:hero-arrow-pulse 2.4s ease-in-out infinite;will-change:opacity;width:3.319375rem}.hero-arrows span:nth-child(2){animation-delay:.1s}.hero-arrows span:nth-child(3){animation-delay:.2s}.hero-arrows span+span{margin-top:-.8125rem}@keyframes hero-arrow-pulse{0%,100%,6%{opacity:.35}14%,52%{opacity:.75}}.section--activity{padding-top:1.75rem}.section--activity .section-title{margin-bottom:1.875rem}.activity-grid{display:grid;gap:.75rem;grid-template-columns:100%}.activity-item{background-color:#fff;border-radius:1.25rem;box-shadow:.0625rem .0625rem 1rem rgba(0,0,0,.1);display:flex;flex-direction:column;min-height:5.875rem;padding:1.125rem 1.25rem;position:relative}.activity-item__image{bottom:0;position:absolute;right:1.375rem;transition:opacity .3s cubic-bezier(.33, 1, .68, 1);width:auto}.activity-item__image--full{opacity:0}.activity-item__container{position:relative}.activity-item__name{font-size:.9375rem;transition:opacity .3s cubic-bezier(.33, 1, .68, 1),transform .3s cubic-bezier(.33, 1, .68, 1)}.activity-item__descr{font-size:.625rem;line-height:1.33;margin-bottom:.375rem;max-height:5.32em;overflow:hidden}@supports (-webkit-line-clamp:1) or (line-clamp:1){.activity-item__descr{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:4;max-height:none}}.activity-item__more{font-size:.7rem}.activity-item__link{height:100%;left:0;position:absolute;top:0;width:100%}.activity-item:first-child .activity-item__image{height:4.25rem}.activity-item:nth-child(2) .activity-item__image{height:3.75rem}.activity-item:nth-child(3) .activity-item__image{height:2.875rem}.activity-item:nth-child(4) .activity-item__image{height:4.625rem}.activity-item:nth-child(5) .activity-item__image{height:3.75rem}.activity-item:nth-child(6) .activity-item__image{height:2.875rem}.section--facts{padding-top:2.5rem}.section--facts .section-title{margin-bottom:2.1875rem}.facts-slider-container{height:13.125rem;position:relative}.facts-slider{height:100%;left:50%;overflow:visible;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s ease,visibility .2s ease;width:30.75rem}.facts-slider:not(.swiper-initialized){opacity:0;visibility:hidden}.facts-slider .swiper-wrapper{align-items:center;margin-left:-1.75rem}.facts-slider .swiper-slide{align-items:center;display:flex;height:9.75rem;justify-content:center;width:9.8125rem}.facts-slider .swiper-slide-active{height:100%!important;width:13.3125rem!important}.facts-slider .swiper-slide-active .facts-item{color:#fff;transform:scale(1.35);z-index:10}.facts-slider .swiper-slide-active .facts-item::before{opacity:1}.facts-slider .swiper-slide-active .facts-item__icon img.icon--common{opacity:0}.facts-slider .swiper-slide-active .facts-item__icon img.icon--active{opacity:1}.facts-slider .swiper-slide-active .facts-item__count{color:#fff}.facts-slider .swiper-slide-active .facts-item--gallery .facts-item__icon{display:none}.facts-slider .swiper-slide-active .facts-item--gallery .facts-item__gallery{display:block}.facts-item{border-radius:.3125rem;box-shadow:.125rem .125rem .875rem rgba(0,0,0,.16);display:flex;flex-direction:column;height:9.75rem;justify-content:center;overflow:hidden;padding:.75rem;position:relative;row-gap:.75rem;text-align:center;transition:color .2s ease,border-radius .2s ease,transform .2s ease;width:9.8125rem}.facts-item::before{background-image:linear-gradient(135deg,#ddd755,#5fb9bd);content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:-1}.facts-item__icon{flex-shrink:0;height:1.8125rem;position:relative}.facts-item__icon img{height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);transition:opacity .2s ease;width:auto}.facts-item__icon img.icon--active{opacity:0}.facts-item__count{color:#5fb9bd;font-size:1.875rem;font-weight:700;line-height:1;margin-bottom:-.15em;text-wrap:nowrap;transition:color .2s ease}.facts-item__text{font-size:.6rem;font-weight:500;line-height:1.23}.facts-item__gallery .btn{--bs-btn-font-size:0.94875rem;--bs-btn-font-weight:700;--bs-btn-border-radius:0.4125rem;--bs-btn-border-width:0.0625rem;--bs-btn-padding-x:0.7425rem;--bs-btn-padding-y:0.2475rem;text-transform:lowercase}.facts-item--large .facts-item__text{font-size:.79375rem}.facts-item--gallery .facts-item__gallery{display:none}.facts-item--gallery.swiper-slide-active .facts-item__icon{display:none}.facts-item--gallery.swiper-slide-active .facts-item__gallery{display:block}.section--news{padding-bottom:2.25rem;padding-top:2.5rem}.section--news .section-title{margin-bottom:2.125rem}.news-container{margin-block:-1.875rem;padding-block:1.875rem}.news-slider{overflow:visible}.news-slide{--bs-link-color-rgb:0,0,0;--bs-link-hover-color-rgb:0,0,0;width:67vw;max-width:17.8125rem}.news-slide--all{width:67vw;max-width:12.1875rem}.news-slide__main{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}.news-slide__image{align-items:stretch;background-color:#fff;display:flex;flex-shrink:0;height:9.5rem;justify-content:center;overflow:hidden;position:relative}.news-slide__image img{height:100%;object-fit:contain;width:100%}.news-slide__body{background-color:#fff;display:flex;flex-direction:column;flex-grow:1;margin-top:auto}.news-slide__date{font-size:.5rem;margin-bottom:.125em}.news-slide__excerpt{font-size:.625rem;line-height:1.34;margin-bottom:.8em}.news-slide__more{margin-top:auto}.news-slide__more .btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.5rem;--bs-btn-border-width:0;--bs-btn-border-radius:0.5rem;--bs-btn-font-size:0.75rem;--bs-btn-font-weight:700;text-transform:uppercase;width:100%}.news-slide__tags{display:flex;flex-wrap:wrap;gap:.25rem}.news-slide__tags .tag{border-radius:50rem;color:#fff;font-size:.53125rem;font-weight:600;line-height:1;padding:.1875rem .4375rem}.news-slide__tags .tag--primary{background-color:#5fb9bd}.news-slide__tags .tag--secondary{background-color:#a1c778}.news-slide__all{--bs-link-color-rgb:255,255,255;--bs-link-hover-color-rgb:255,255,255;align-items:center;display:flex;font-size:1.796875rem;font-weight:700;height:100%;line-height:1.12;padding:1.5rem;position:relative;text-transform:uppercase}.news-slide__all::before{background-image:linear-gradient(165deg,#ddd755 -5%,#5fb9bd);background-repeat:no-repeat;background-size:cover;content:"";height:100%;left:0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 193 355' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 15C0 6.716 6.716 0 15 0h60.877A15 15 0 0 1 88.6 7.057l101.441 162.5a15 15 0 0 1 0 15.886l-101.441 162.5A15 15 0 0 1 75.877 355H15c-8.284 0-15-6.716-15-15z'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 193 355' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 15C0 6.716 6.716 0 15 0h60.877A15 15 0 0 1 88.6 7.057l101.441 162.5a15 15 0 0 1 0 15.886l-101.441 162.5A15 15 0 0 1 75.877 355H15c-8.284 0-15-6.716-15-15z'/%3E%3C/svg%3E%0A");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;pointer-events:none;position:absolute;top:0;width:100%;z-index:-1}.section--gallery{padding-bottom:2.5rem}.gallery-header{margin-bottom:1.125rem}.gallery-nav{display:inline-flex;list-style:none;margin-bottom:0;padding-left:0}.gallery-nav .nav-item{align-items:baseline;color:#c1c4c7;display:inline-flex;font-size:.8125rem}.gallery-nav .nav-item:not(:first-child)::before{color:#c1c4c7;content:"/";margin-inline:0.3em}.gallery-nav .nav-link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:inherit;padding:0}.gallery-nav .nav-link.active{color:#a1c778;font-weight:700}.gallery-slider{overflow:visible}.gallery-slider .swiper-control{align-items:center;display:flex;justify-content:center;margin-top:1.625rem}.gallery-slider .swiper-pagination{-moz-column-gap:0.375rem;column-gap:.375rem;display:flex;font-size:0;height:.375rem;line-height:0}.gallery-slider .swiper-pagination-bullet{align-items:center;display:flex;height:100%;width:1.75rem}.gallery-slider .swiper-pagination-bullet::after{background-color:#000;border-radius:.0625rem;content:"";height:.125rem;transition:background-color .3s cubic-bezier(.33, 1, .68, 1);width:100%}.gallery-slider .swiper-pagination-bullet-active::after{background-color:#5fb9bd}.gallery-slider .swiper-navigation{-moz-column-gap:0.5625rem;column-gap:.5625rem}.gallery-slider .swiper-button-next,.gallery-slider .swiper-button-prev{align-items:center;background-color:#fff;border:.125rem solid #eaebef;border-radius:50%;color:#5fb9bd;display:flex;height:2.25rem;justify-content:center;transition:all .3s cubic-bezier(.33, 1, .68, 1);width:2.25rem}.gallery-slider .swiper-button-next:hover,.gallery-slider .swiper-button-prev:hover{background-color:#5fb9bd;border-color:#5fb9bd;color:#fff}.gallery-slider .swiper-button-next .icon,.gallery-slider .swiper-button-prev .icon{height:.63rem;transform:translateX(15%);width:.405rem}.gallery-slider .swiper-button-prev .icon{transform:translateX(-15%) scaleX(-1)}.gallery-slide{border-radius:1.5rem;height:11.25rem;opacity:.5;overflow:hidden;transition:opacity .3s cubic-bezier(.33, 1, .68, 1);width:16.375rem}.gallery-slide.swiper-slide-active{opacity:1}.gallery-slide img{height:100%;object-fit:cover;width:100%}.gallery-slide__play{background-color:rgba(0,0,0,.5);border-radius:50%;height:3rem;left:50%;position:absolute;pointer-events:none;top:50%;transform:translate(-50%,-50%);transition:background-color .3s cubic-bezier(.33, 1, .68, 1),transform .3s cubic-bezier(.33, 1, .68, 1);width:3rem}.gallery-slide__play::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='13' fill='none' viewBox='0 0 11 13'%3E%3Cpath fill='%23fff' d='M10.5 5.332a1 1 0 0 1 0 1.732l-9 5.196a1 1 0 0 1-1.5-.866V1A1 1 0 0 1 1.5.135z' /%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;content:"";height:32.5%;left:50%;position:absolute;top:50%;transform:translate(-44%,-50%);width:27.5%}.gallery-slide:hover .gallery-slide__play{background-color:rgba(0,0,0,.8);transform:translate(-50%,-50%) scale(1.05)}.apply-info{border:1px solid #c1c4c7;border-radius:1rem;margin-bottom:2.875rem;padding:1.375rem 1rem}.apply-info-cell{font-size:.75rem;line-height:1.5}.apply-info-cell:nth-child(2) h3{font-weight:700;margin-bottom:.1875rem}.apply-info-cell h3{font-size:.9375rem;font-weight:500;line-height:1.3;margin-bottom:1rem}.apply-info-cell ul{list-style:none;margin-bottom:0;padding-left:0;text-align:left}.apply-info-cell ul li{padding-left:4em;position:relative}.apply-info-cell ul li+li{margin-top:1em}.apply-info-cell ul li::before{background-color:#5fb9bd;border-radius:.2em;content:"";height:.75em;left:2.5em;position:absolute;top:.5em;transform:rotate(45deg);width:.75em}.apply-info-cell ul li strong{font-size:1.167em}.apply-info-cell__marks{align-items:center;-moz-column-gap:0.75rem;column-gap:.75rem;display:flex;margin-bottom:1.5rem}.apply-info-cell__marks .mark-important{background-color:#5fb9bd;border-radius:50rem;color:#fff;font-size:.875rem;font-weight:600;line-height:1;padding:.4375rem 1.0625rem}.apply-info-cell__marks .icon-exclamation{color:#5fb9bd;height:1.8rem;width:1.96875rem}.apply-steps{-moz-column-gap:2em;column-gap:2em;display:flex;font-size:1rem;justify-content:center;list-style:none;margin-bottom:2.75rem;padding-left:0;position:relative}.apply-steps-item{--bs-link-color-rgb:255,255,255;--bs-link-hover-color-rgb:255,255,255;align-items:center;color:#fff;display:flex;height:1.75em;justify-content:center;line-height:1;position:relative;width:1.75em}.apply-steps-item::after{background-color:#c1c4c7;border-radius:.25em;content:"";height:100%;left:0;position:absolute;top:0;transform:rotate(45deg);width:100%;z-index:-1}.apply-steps-item a{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.apply-steps-item.active{--color-start:#b1cd79;--color-stop:#5fb9bd;font-weight:700}.apply-steps-item.active::after,.apply-steps-item.active::before{background-repeat:no-repeat;background-size:16.75em auto}.apply-steps-item.active::before{background-image:linear-gradient(90deg,var(--color-start),var(--color-stop))}.apply-steps-item.active::after{background-image:linear-gradient(45deg,var(--color-start),var(--color-stop))}.apply-steps-item:not(:first-child)::before{background-color:#c1c4c7;content:"";height:.21875em;left:0;position:absolute;top:50%;transform:translate(calc(-100% - .125em),-50%);width:100%;z-index:-2}.apply-steps-item:nth-child(2).active::before{background-position:-1.75em 0}.apply-steps-item:nth-child(2).active::after{background-position:-3.75em 0}.apply-steps-item:nth-child(3).active::before{background-position:-5.5em 0}.apply-steps-item:nth-child(3).active::after{background-position:-7.5em 0}.apply-steps-item:nth-child(4).active::before{background-position:-9.25em 0}.apply-steps-item:nth-child(4).active::after{background-position:-11.25em 0}.apply-steps-item:nth-child(5).active::before{background-position:-13em 0}.apply-steps-item:nth-child(5).active::after{background-position:-15em 0}.apply-form{display:flex;flex-direction:column;font-size:.75rem;margin-bottom:3rem;position:relative}.apply-form>:last-child{margin-bottom:0!important}.apply-form .row{--bs-gutter-x:0.625rem;--bs-gutter-y:1rem}.apply-form .form-row{margin-bottom:1.5rem}.apply-form .form-required{color:#c1c4c7;margin-top:.75rem;position:absolute;right:0;top:100%}.apply-form .form-label{font-size:1.25em}.apply-form .form-control,.apply-form .form-select{border-radius:.625rem;font-size:inherit;padding:.75rem .875rem}.apply-control{display:flex;gap:.625rem;justify-content:center;margin-bottom:3.125rem}.apply-control .btn{--bs-btn-padding-x:1.13em;--bs-btn-padding-y:0.72em;--bs-btn-font-size:0.8125rem;--bs-btn-font-weight:600;--bs-btn-line-height:1;--bs-btn-border-radius:0.45em}.management-general{margin:0 auto 2.3125rem;max-width:13.3125rem;text-align:center}.management-general__photo{margin-bottom:.8125rem}.management-general__photo img{border-radius:.9375rem}.management-general__name{font-size:.9375rem;font-weight:500;margin-bottom:.5rem}.management-general__descr{font-size:.8125rem}.management-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,minmax(0,1fr))}.management-item{align-items:center;background-image:linear-gradient(135deg,rgba(208,212,94,.2) -5%,rgba(100,182,153,.2) 110%);background-repeat:no-repeat;border-radius:.375rem;box-shadow:.0625rem .0625rem .4375rem rgba(0,0,0,.2);display:flex;flex-direction:column;min-height:10.6875rem;padding:.875rem .625rem;text-align:center}.management-item__photo{height:4.5rem;margin-bottom:.625rem;width:3.5625rem}.management-item__photo img{border-radius:.5rem;height:100%;object-fit:cover;width:100%}.management-item__name{font-size:.625rem;font-weight:500;line-height:1.3;margin-bottom:.3125rem}.management-item__descr{font-size:.5625rem;line-height:1.28}.management-item--long .management-item__descr{font-size:.375rem}.areas-grid{display:flex;flex-direction:column;margin-bottom:2.625rem;row-gap:2.5rem}.areas-grid--rno{margin-bottom:0}.areas-item{border:1px solid #c1c4c7;border-radius:.75rem}.areas-item__image{height:18.875rem;margin:-1px}.areas-item__image img{border-radius:.75rem;height:100%;max-width:100%;object-fit:cover}.areas-item__body{padding:1.1875rem 1.875rem 1.5rem}.areas-item__title{border-bottom:1px solid #c1c4c7;color:#5fb9bd;font-size:1.125rem;font-weight:600;margin-bottom:1.125rem;padding-bottom:.4375rem}.areas-item__content{font-size:.9375rem}.areas-item__content a{font-weight:600}.areas-item--program .areas-item__body{padding:1.125rem}.areas-item--operator .areas-item__body{padding:1.375rem .75rem 1.625rem 1rem;position:relative}.areas-item--operator .areas-item__content{font-size:.875rem}.areas-item--operator .areas-item__button .icon-exclamation{color:#5fb9bd;flex-shrink:0;height:2.5rem;width:2.734375rem}.areas-item--operator .areas-item__button .btn-apply-operator{--bs-btn-padding-x:0.8125rem;--bs-btn-padding-y:0.75rem;--bs-btn-font-size:0.8125rem;--bs-btn-font-weight:500;--bs-btn-border-radius:0.3125rem;--bs-btn-border-width:0;--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-hover-bg:#91b36c;--bs-btn-active-bg:#89a966;text-transform:uppercase}.areas-item--operator .areas-item__announce{background-color:#5fb9bd;border-radius:.75rem;color:#fff;font-size:.875rem;font-weight:600;padding:2rem .75rem 2rem 4.75rem;position:relative}.areas-item--operator .areas-item__announce .icon-announce{height:2.8125rem;left:1.125rem;position:absolute;top:2rem;width:2.8125rem}.activity-contacts{display:flex;margin-bottom:4.0625rem}.activity-contact{display:flex;flex-direction:column;row-gap:1.375rem;text-align:center}.activity-contact__icon{color:#5fb9bd}.activity-contact__icon .icon{height:2.3125rem;width:2.3125rem}.activity-contact__body{--bs-link-color-rgb:0,0,0;--bs-link-hover-color-rgb:76,148,151;font-size:1.25rem}.activity-map{background-color:#f3f3f1;height:31.25rem;margin-inline:-1.125rem}.bells-data{display:flex;flex-direction:column;list-style:none;margin-bottom:2.5rem;padding-left:0;row-gap:2.625rem}.bells-data-item{display:grid;font-size:.6875rem;gap:1.25rem 1rem;grid-template-columns:repeat(2,minmax(0,1fr));text-align:center}.bells-data-item:nth-child(2n) .bells-data-item__cell--year{background-color:#5fb9bd}.bells-data-item:nth-child(2n) .bells-data-value{color:#5fb9bd}.bells-data-item__cell--year{background-color:#a1c778;border-radius:.9375rem;color:#fff;display:flex;flex-direction:column;font-size:2.4375rem;justify-content:center;line-height:1;padding:.75rem 1.25rem;text-wrap:nowrap}.bells-data-item__cell--year strong{font-weight:600}.bells-data-item__cell--value{border-radius:.375rem;box-shadow:.0625rem .09375rem .5625rem rgba(0,0,0,.1);display:flex;flex-direction:column;font-weight:500;justify-content:center;line-height:1.28;padding:.625rem 1.25rem}.bells-data-descr{margin-bottom:.5em}.bells-data-value{color:#a1c778;font-size:3.45em;font-weight:600;line-height:1;text-wrap:nowrap}.bells-data-unit{letter-spacing:.12em}.bells-section{font-size:.9375rem;margin-bottom:2.5rem}.bells-section--image{border:1px solid #c1c4c7;border-radius:.75rem;padding:1rem}.bells-section--1 .bells-content{padding-inline:0}.bells-section--3 .bells-heading{border-bottom:1px solid #c1c4c7;padding-bottom:1.25rem}.bells-section--3 .bells-content{padding-inline:1rem}.bells-section--5 .bells-content{padding-inline:0}.bells-heading{font-size:.9375rem;font-weight:500;margin-bottom:1.25rem}.bells-content p{margin-bottom:1.2em}.bells-content>:last-child{margin-bottom:0!important}.bells-contacts__image img{border-radius:.75rem}.bells-contacts__body{font-size:.9375rem;padding:2.375rem 1.125rem 2.625rem}.bells-contacts__body strong{font-weight:500}.bells-contacts__lead{border-bottom:1px solid #c1c4c7;margin-bottom:1.375rem;padding-bottom:1.375rem}.bells-contacts__phones{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.375rem}.bells-marking-signs{display:flex;flex-wrap:wrap;gap:1.5625rem 1.25rem;justify-content:center;list-style:none;margin-bottom:2.25rem;padding-left:0;text-align:center}.bells-marking-signs li{width:calc(50% - .625rem)}.bells-marking-description{font-size:.9375rem}.bells-marking-description h4{font-size:.9375rem;font-weight:500;margin-bottom:2rem}.bells-marking-description ol{display:flex;flex-direction:column;list-style:none;margin-bottom:0;padding-left:0;row-gap:1.25rem}.bells-marking-description ol li{padding-left:2.1875rem;position:relative}.bells-marking-description ol li img{left:0;position:absolute;top:.33em;width:1.5rem}.bells-locations-heading{align-items:center;-moz-column-gap:0.375rem;column-gap:.375rem;display:flex;font-size:.9375rem;font-weight:500;margin-bottom:2.25rem}.bells-locations-heading .icon{color:#5fb9bd;flex-shrink:0;height:1.75rem;width:1.75rem}.bells-locations-map{background-color:#f3f3f1;border-bottom:1px solid #eaebef;border-top:1px solid #eaebef;height:22.375rem;margin:0 -1.125rem 2.5rem}.bells-locations{margin-bottom:1.875rem}.bells-locations-item{font-size:.5625rem;line-height:1.3;margin-bottom:1.75rem}.bells-locations-item__header .accordion-button{background-color:#5fb9bd;border-radius:.375rem .375rem 0 0;color:#fff;font-weight:600;display:grid;grid-template-columns:auto 34%;position:relative}.bells-locations-item__header .accordion-button .icon-arrow-down{height:.28125rem;right:.5rem;position:absolute;top:.9375rem;transform:scaleY(-1);width:.375rem}.bells-locations-item__header .accordion-button.collapsed .icon-arrow-down{transform:scaleY(1)}.bells-locations-item__district{align-content:center;min-height:2.875rem;padding:.6875rem 2.5rem .6875rem .625rem}.bells-locations-item__total{align-content:center;border-left:1px solid #fff;min-height:2.875rem;padding:.6875rem .875rem .6875rem .375rem}.bells-locations-item__row{border:1px solid #c1c4c7;border-top-width:0;display:grid;grid-template-columns:12% auto 34%}.bells-locations-item__row:last-child{border-radius:0 0 .375rem .375rem}.bells-locations-item__place{align-content:center;padding:.28125rem .5rem;text-align:center}.bells-locations-item__address{align-content:center;border-left:1px solid #c1c4c7;padding:.28125rem .6875rem}.bells-locations-item__count{align-content:center;border-left:1px solid #c1c4c7;padding:.28125rem .5rem;text-align:center}.bells-locations-note{font-size:.9375rem}.bells-locations-note .text-primary{font-weight:500}.divisions-grid{display:flex;flex-direction:column;row-gap:2.5rem}.divisions-item__image img{border-radius:1.25rem;object-fit:cover}.divisions-item__body{display:flex;flex-direction:column;padding:2.1875rem 1.5625rem 2rem}.divisions-item__title{font-size:1.3125rem;font-weight:500;line-height:1.24;margin-bottom:1.5rem;text-transform:uppercase}.divisions-item__phone{margin-bottom:1.625rem}.divisions-item__phone .link-tag{font-size:1.125rem}.divisions-item__address{font-size:.75rem;line-height:1.33}.vacancies-grid{display:grid;gap:1.5rem;grid-template-columns:100%}.vacancies-item{background-image:linear-gradient(135deg,rgba(208,212,94,.2) -5%,rgba(100,182,153,.2) 110%);background-repeat:no-repeat;border-radius:1.25rem;box-shadow:0 .5rem 1.125rem rgba(0,0,0,.15);display:flex;flex-direction:column;min-height:14.875rem;padding:1.875rem 1.75rem 2.25rem;position:relative}.vacancies-item__title{flex-grow:1;font-size:1.25rem;font-weight:500;line-height:1.4;margin-bottom:1em;text-transform:uppercase}.vacancies-item__descr{font-size:1.1875rem;line-height:1.3;margin-bottom:1.125rem}.vacancies-item__more{font-size:1.5rem;font-weight:600}.vacancies-item__contacts{display:flex;flex-wrap:wrap;gap:.875rem}.vacancies-item--flat{background-image:none;box-shadow:none!important}.vacancies-item--flat::before{border:1px solid rgba(23,24,26,.2);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.vacancies-item--flat .link-tag{font-size:1.03125rem}.vacancies-single{border-radius:1.25rem;box-shadow:.125rem .1875rem 1.25rem rgba(0,0,0,.12);padding:2rem .75rem 2rem 1.25rem}.vacancies-single__main{position:relative}.vacancies-single__title{font-size:1.3125rem;font-weight:500;line-height:1.4;margin-bottom:1rem;text-transform:uppercase}.vacancies-single__contacts{display:flex;flex-wrap:wrap;gap:.875rem}.vacancies-single__content{font-size:.9375rem}.vacancies-single__section{margin-bottom:1.75rem}.vacancies-single__section h3{font-size:1rem;font-weight:500;margin-bottom:1.25rem}.vacancies-single__section .diamond-list{--offset:1rem}.union-logo{margin-bottom:2.5rem;text-align:center}.union-logo img{max-width:18.125rem}.union-about{border:1px solid #c1c4c7;border-radius:1.25rem;font-size:.875rem;margin-bottom:2.25rem;padding:1.5rem .9375rem 1.75rem}.union-about__lead{border-bottom:1px solid #c1c4c7;font-weight:500;margin-bottom:1rem;padding-bottom:1rem}.union-activity{font-size:.9375rem;margin-bottom:2.5rem}.union-activity h3{font-size:.9375rem;font-weight:500;margin-bottom:1.375rem}.union-activity .diamond-list{--color-start:#5fb9bd;--color-stop:#ddd755;--offset:1.625rem}.union-functions{display:grid;gap:1.5rem;grid-template-columns:100%}.union-functions-item{border:1px solid rgba(23,24,26,.2);border-radius:1.25rem;box-shadow:0 .625rem 1.25rem rgba(0,0,0,.02);min-height:17.9375rem;padding:1.25rem 1rem;text-align:center}.union-functions-item__icon{height:8.25rem;margin-bottom:1.25rem}.union-functions-item__icon img{height:100%;width:auto}.union-functions-item__title{font-size:1.3125rem;font-weight:500;line-height:1.25}.news-grid{display:grid;gap:2.25rem;grid-template-columns:100%}.news-item__image{margin-bottom:1.125rem}.news-item__image img{border-radius:1rem;width:auto}.news-item__date{font-size:.8125rem}.news-item__title{--bs-link-color-rgb:0,0,0;--bs-link-hover-color-rgb:76,148,151;font-size:.9375rem;margin-bottom:1.375rem}.news-item__tags{display:flex;flex-wrap:wrap;gap:.5rem}.news-item__tags .link-tag{font-size:.8125rem;padding-inline:1em}.article-games{margin-block:2rem}.article-games-heading{font-size:.875rem;font-weight:500;line-height:1.3;margin-bottom:1.25rem;text-align:center}.article-games-seats{--color-start:#ddd755;--color-stop:#5fb9bd;counter-reset:seats;display:flex;justify-content:space-between;list-style:none;margin-bottom:0;margin-inline:auto;padding-left:0;position:relative}.article-games-seats::before{background-image:linear-gradient(to right,var(--color-start),var(--color-stop));content:"";height:.1875rem;position:absolute;left:50%;top:.5625rem;transform:translateX(-50%);width:16.875rem;z-index:-1}.article-games-seats li{counter-increment:seats;flex-shrink:0;font-size:.5rem;line-height:1.375;padding-top:1.75rem;position:relative;text-align:center;width:5.5rem}.article-games-seats li::before{background-color:#a1c778;border-radius:50rem;color:#fff;content:counter(seats) " место";font-size:.6875rem;font-weight:600;height:1.3125rem;left:50%;line-height:2;position:absolute;text-wrap:nowrap;top:0;transform:translateX(-50%);width:4.25rem}.licenses-single{margin-bottom:1.5rem}.licenses-single__heading{font-size:1.0625rem;font-weight:500;line-height:1.3;margin-bottom:1.875rem}.licenses-single__descr{font-size:.875rem;line-height:1.3;margin-bottom:.9375rem;max-width:15.625rem}.licenses-single__note{font-size:.75rem;line-height:1.3;max-width:15.625rem}.licenses-registry .link-tag{padding-inline:1.125em}.table{--border-radius:0.625rem;border:1px solid rgba(113,120,128,.44);border-collapse:separate;border-radius:var(--border-radius);border-spacing:0;width:100%}.table thead{border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:0 0 0 1px #5fb9bd;clip-path:polygon(-1px -1px,calc(100% + 1px) -1px,calc(100% + 1px) 100%,-1px 100%);vertical-align:top}.table thead tr:first-child th:first-child{border-top-left-radius:var(--border-radius)}.table thead tr:first-child th:last-child{border-top-right-radius:var(--border-radius)}.table thead th{background-color:#5fb9bd;color:#fff;font-weight:600}.table thead th:not(:first-child){border-left-color:#fff}.table tbody tr:not(:first-child) td,.table tbody tr:not(:first-child) th{border-top:1px solid rgba(113,120,128,.44)}.table tbody td,.table tbody th{vertical-align:middle}.table td:not(:first-child),.table th:not(:first-child){border-left:1px solid rgba(113,120,128,.44)}.envpolicy-table{margin-bottom:1.5rem}.envpolicy-table td:first-child,.envpolicy-table th:first-child{width:36.5%}.envpolicy-table td:nth-child(2),.envpolicy-table th:nth-child(2){width:32%}.envpolicy-table thead th{font-size:.5rem;line-height:1.25;padding:.8125rem .5625rem}.envpolicy-table tbody td{padding:.25rem .25rem .25rem .5625rem;font-size:.5rem}.envpolicy-table--sm td:first-child,.envpolicy-table--sm th:first-child{width:33.5%}.envpolicy-table--sm td:nth-child(2),.envpolicy-table--sm th:nth-child(2){width:30%}.envpolicy-notification{font-size:.875rem;line-height:1.3;margin-bottom:1.5rem}.envpolicy-notification a{font-weight:500;text-decoration:underline}.envpolicy-news-grid{display:grid;grid-template-columns:100%;margin-bottom:2.5rem;row-gap:2.5rem}.envpolicy-news-item{border:1px solid rgba(23,24,26,.2);border-radius:.9375rem;box-shadow:0 .625rem 1.25rem rgba(0,0,0,.1);display:flex;flex-direction:column;font-size:.875rem;line-height:1.28;padding:2.375rem 1.25rem;row-gap:1.5rem}.envpolicy-news-item strong{font-weight:500}.envpolicy-news-item .link-tag{font-size:1rem;min-height:1.75rem}.policy-link{text-align:center}.policy-link .link-tag{font-size:.6875rem;padding-inline:1.0625em}.procurement-info{border:1px solid #c1c4c7;border-radius:1.25rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.28;margin-bottom:1.625rem;padding:1.375rem 1.25rem;row-gap:1.25rem;text-align:center}.procurement-info .link-tag{border-radius:.3125rem;font-size:.78125rem;font-weight:700;padding-inline:2.375em}.procurement-link{display:flex;justify-content:center;text-align:center}.procurement-link a{border:1px solid currentColor;border-radius:.3125rem;font-size:.78125rem;font-weight:700;min-height:1.5625rem;padding:.32em 1.875em;text-decoration:underline}.docs-sections{display:flex;flex-direction:column;row-gap:2.25rem}.docs-sections--records{row-gap:1.5rem}.docs-sections--records .docs-heading{margin-bottom:.5rem}.docs-sections--more{margin-bottom:1.75rem;row-gap:1.5rem}.docs-sections--more .docs-heading{margin-bottom:1.5rem}.docs-sections--more .docs-list .nav-item{width:auto}.docs-sections--more .docs-list .nav-link{padding-inline:1.375em;text-wrap:nowrap}.docs-sections-heading{font-size:.875rem;font-weight:500;line-height:1.28;margin-bottom:1.125rem}.docs-heading{font-size:.875rem;font-weight:500;line-height:1.28;margin-bottom:1.25rem}.docs-list{display:flex;flex-wrap:wrap;gap:.875rem .5625rem;list-style:none;margin-bottom:0;padding-left:0}.docs-list .nav-item{width:calc((100% - 1.125rem)/ 3)}.docs-list .nav-item--wide{width:calc(.5625rem + (100% - 1.125rem)/ 1.5)}.docs-list .nav-link{--bs-link-color-rgb:255,255,255;--bs-link-hover-color-rgb:255,255,255;align-items:center;background-color:#a1c778;border-radius:.1875rem;display:flex;font-size:.6875rem;font-weight:500;height:1.9375rem;justify-content:center;padding:.21em .5em;text-align:center;text-transform:uppercase}.docs-list .nav-link:focus,.docs-list .nav-link:hover{background-color:#89a966}.laws-sections{display:flex;flex-direction:column;row-gap:1.25rem}.laws-sections-heading{font-size:.875rem;font-weight:500;line-height:1.28;margin-bottom:.875rem}.laws-heading{font-size:.875rem;font-weight:500;line-height:1.28;margin-bottom:1.125rem}.laws-list{display:flex;flex-direction:column;list-style:none;margin-bottom:0;padding-left:0;row-gap:1.125rem}.laws-list .nav-item{font-size:.875rem;line-height:1.28}.laws-list .nav-link{font-weight:500;text-decoration:underline}.corruption-heading{font-size:1rem;font-weight:500;margin-bottom:1.5rem;text-align:center}.corruption-contacts{border:1px solid #c1c4c7;border-radius:.625rem;display:flex;padding:2.25rem .625rem}.corruption-contacts-item{position:relative;text-align:center}.corruption-contacts-item:not(:first-child)::before{content:"";position:absolute;top:0}.corruption-contacts-item__title{font-size:1.1875rem;font-weight:500;line-height:1.48;margin-bottom:1.25rem;text-transform:uppercase;text-wrap-style:balance}.corruption-contacts-item__body{display:flex;flex-wrap:wrap;gap:.625rem .75rem;justify-content:center}.safety-text{font-size:.875rem;line-height:1.28;margin-bottom:2.125rem}.safety-links{display:flex;flex-wrap:wrap;gap:.625rem;margin-bottom:2.125rem}.safety-links .link-tag{padding:.3em 1.5em;text-align:center;text-wrap:auto;width:100%}.safety-table{margin-bottom:2.125rem}.safety-table thead th{font-size:.4375rem;line-height:1.15;padding:.3125rem .1875rem;text-align:center;vertical-align:middle}.safety-table thead th.cell-1{text-align:left;vertical-align:top}.safety-table thead th.cell-2{padding-inline:0.375rem;text-align:left;vertical-align:top;width:22%}.safety-table thead th.cell-3{padding-inline:0.375rem;text-align:left;vertical-align:top;width:21%}.safety-table thead th.cell-4,.safety-table thead th.cell-6{border-left:1px solid #fff}.safety-table thead th.cell-6,.safety-table thead th.cell-7,.safety-table thead th.cell-8,.safety-table thead th.cell-9{padding-block:0.5rem}.safety-table thead th.cell-10,.safety-table thead th.cell-4,.safety-table thead th.cell-5{width:8%}.safety-table thead th.cell-long-1,.safety-table thead th.cell-long-2{border-bottom:1px solid #fff}.safety-table tbody td,.safety-table tbody th{padding:.8125rem .1875rem}.safety-table tbody th{color:rgba(113,120,128,.44);font-size:.375rem;font-weight:500;text-wrap:nowrap}.safety-table tbody td{font-size:.625rem;font-weight:600}.safety-table tbody td:nth-child(2),.safety-table tbody td:nth-child(3){padding-inline:0.375rem}.safety-docs .link-tag{border-radius:.1875rem;font-size:.5625rem;font-weight:500;min-height:1.6875rem;padding-inline:1.5em;text-transform:uppercase}.cameras-heading{font-size:.875rem;font-weight:400;line-height:1.28;margin-bottom:2.25rem;text-align:center}.cameras-grid{display:grid;gap:1.75rem;grid-template-columns:100%}.cameras-item{--bs-link-color-rgb:255,255,255;--bs-link-hover-color-rgb:255,255,255;background-color:#5fb9bd;border-radius:.625rem;font-size:2.3125rem;font-weight:600;height:11.375rem;text-align:center;text-transform:uppercase}.cameras-item__link{align-items:center;display:flex;height:100%;justify-content:center;padding:1.25rem;text-align:center;width:100%}.press-news-grid{display:grid;grid-template-columns:100%;row-gap:2.125rem}.press-news-item{border:1px solid rgba(193,196,199,.6);border-radius:1.25rem}.press-news-item__image{margin:-1px}.press-news-item__image img{border-radius:1.25rem;height:100%;object-fit:cover}.press-news-item__body{padding:1.75rem 1.375rem 0}.press-news-item__title{--bs-link-color-rgb:0,0,0;--bs-link-hover-color-rgb:76,148,151;font-size:1.0625rem;font-weight:500;line-height:1.3}.press-news-item__lead{font-size:.875rem;line-height:1.28;margin-top:.875rem}.press-news-item__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.875rem}.press-news-item__more{font-size:.875rem}.press-gallery .swiper-slide img{border-radius:1.25rem}.education-event__head{padding:0 1.25rem 2.125rem}.education-event__title{font-size:.875rem;font-weight:500;line-height:1.28;margin-bottom:1.25rem}.education-event__data{display:flex;flex-wrap:wrap;gap:.625rem}.education-event__data .data-item{background-color:#c1bfbf;border-radius:.1875rem;color:#fff;font-size:.625rem;font-weight:500;padding:.5625rem .75rem;text-transform:uppercase}.education-event__body{padding:1.375rem 1.25rem 0}.education-event__content{font-size:.875rem;line-height:1.28;padding-bottom:1.5rem}.education-event__content h3{font-size:inherit;font-weight:500;margin-bottom:1.3em}.education-event__content p{font-size:inherit;margin-bottom:1.3em}.education-event__content :last-child{margin-bottom:0}.education-event__image img{border-radius:1.25rem}.education-rno-about{border:1px solid #c1c4c7;border-radius:1.25rem;font-size:.625rem;margin-bottom:2.1875rem;padding:1.5625rem 1.5rem 1.75rem}.education-rno-about h2{color:#5fb9bd;font-size:.875rem;font-weight:700;line-height:1.28;margin-bottom:.625rem}.education-rno-about h3{font-size:inherit;font-weight:500;margin-bottom:.875rem}.education-rno-about p{margin-bottom:1.2em}.education-rno-about :last-child{margin-bottom:0}.education-faq{border:1px solid #c1c4c7;border-radius:1.25rem;padding:1.75rem 1.5rem}.education-faq-item:not(:first-child){border-top:1px solid #c1c4c7;margin-top:1.75rem;padding-top:1.75rem}.education-faq-item__button .accordion-button{font-size:.75rem;font-weight:500;padding:0 3em 0 0;position:relative;text-transform:uppercase}.education-faq-item__button .accordion-button::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' fill='none' viewBox='0 0 29 16'%3E%3Cpath fill='%235fb9bd' d='M28.56 2.56A1.5 1.5 0 1 0 26.44.44L27.5 1.5zM14.5 14.5l-1.06 1.06a1.5 1.5 0 0 0 2.12 0zM2.56.44A1.5 1.5 0 0 0 .44 2.56L1.5 1.5zM27.5 1.5 26.44.44l-13 13 1.06 1.06 1.06 1.06 13-13zm-13 13 1.06-1.06-13-13L1.5 1.5.44 2.56l13 13z'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-size:contain;content:"";height:.42rem;position:absolute;right:0;top:.3em;transition:transform .35s ease;width:.76125rem}.education-faq-item__button .accordion-button:not(.collapsed)::after{transform:scaleY(-1)}.education-faq-item__body .accordion-body{padding-top:1.5rem}.education-faq-item__content{font-size:.625rem}.education-faq-item__content p{margin-bottom:1.2em}.education-faq-item__content p strong{font-weight:500}.education-faq-item__content p a{font-weight:700}.education-faq-item__content .text-larger{font-size:1.4em;font-weight:500;margin-bottom:.8em}.education-faq-item__content h4{color:#5fb9bd;font-size:1.4em;margin-bottom:.8em;margin-top:1.75em}.education-faq-item__content :last-child{margin-bottom:0}.materials-tabs .nav-link{background-color:#fff;border-color:#c1bfbf;border-radius:.1875rem;color:#c1bfbf;font-size:.625rem;font-weight:500;min-height:1.875rem;padding-inline:1.0625em;text-transform:uppercase}.materials-tabs .nav-link:not(.active):hover{border-color:#878686;color:#878686}.materials-tabs .nav-link.active{background-color:#c1bfbf;border-color:#c1bfbf;color:#fff}.education-materials-grid{display:grid;gap:1.625rem}.education-materials-item__image{margin-bottom:1.625rem}.education-materials-item__image img{border-radius:1.25rem;width:100%}.education-materials-item__download{text-align:center}.education-materials-item__download .link-more{align-items:center;border:1px solid #5fb9bd;border-radius:.625rem;display:inline-flex;font-size:1.25rem;font-weight:700;height:2.5625rem;justify-content:center;width:12rem}.education-materials-item__download .link-more span::after{display:none}.education-materials-item__download .link-more .icon-arrow-down-thin{flex-shrink:0;height:.625rem;margin-left:.625rem;transform:translateY(20%);width:1rem}.education-accordion{margin-bottom:1.25rem}.education-accordion-item:not(:first-child){margin-top:2.25rem}.education-accordion-item__button .accordion-button{align-items:center;background-color:#c1bfbf;border-radius:.1875rem;color:#fff;display:flex;font-size:.625rem;font-weight:500;min-height:1.875rem;padding:.4375rem 5.625rem .4375rem 1.25rem;position:relative;text-transform:uppercase}.education-accordion-item__button .accordion-button::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' fill='none' viewBox='0 0 29 16'%3E%3Cpath fill='%23ffffff' d='M28.56 2.56A1.5 1.5 0 1 0 26.44.44L27.5 1.5zM14.5 14.5l-1.06 1.06a1.5 1.5 0 0 0 2.12 0zM2.56.44A1.5 1.5 0 0 0 .44 2.56L1.5 1.5zM27.5 1.5 26.44.44l-13 13 1.06 1.06 1.06 1.06 13-13zm-13 13 1.06-1.06-13-13L1.5 1.5.44 2.56l13 13z'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-size:contain;content:"";height:.3rem;position:absolute;right:1.125rem;top:.75rem;transition:transform .35s ease;width:.54375rem}.education-accordion-item__button .accordion-button:not(.collapsed)::after{transform:scaleY(-1)}.education-accordion-item__body{font-size:.5625rem;line-height:1.28}.education-accordion-item__body .accordion-body{padding-top:2.25rem}.education-accordion-item__content{border:.5px solid #c1bfbf;border-radius:.625rem;padding:1.5rem 1.25rem}.education-accordion-item__content p{margin-bottom:1.3em}.education-accordion-item__content p strong{font-weight:500}.education-accordion-item__content p a{font-weight:700}.education-accordion-item__content :last-child{margin-bottom:0}.education-tips-section{margin-bottom:2rem}.education-tips-section__title{font-size:.875rem;font-weight:500;margin-bottom:1.25rem}.education-tips-section__body{border:.5px solid #c1c4c7;border-radius:.625rem;font-size:.625rem;line-height:1.25;padding:1.25rem}.education-tips-section__body p{margin-bottom:1.2em}.education-tips-section__body :last-child{margin-bottom:0}.education-tips-important{font-size:.875rem;font-weight:600;margin-bottom:2rem;text-align:center;text-transform:uppercase;text-wrap-style:balance}#education-tips .education-accordion-item__button .accordion-button{font-size:.75rem}#education-tips .education-accordion-item__body{font-size:.625rem}#education-tips .education-accordion-item__body .accordion-body{padding-top:1.25rem}.education-tips-list{font-size:.875rem;margin-bottom:1.875rem}.waste-heading{font-size:.875rem;font-weight:500;margin-bottom:.875rem}.waste-content-item{font-size:.625rem;line-height:1.25;padding-left:1.3125rem}.waste-content-item:not(:first-child){border-top:1px solid #c1c4c7;margin-top:1.25rem;padding-top:1.25rem}.waste-content-item strong{font-weight:500}.waste-content-item__note{border:.5px solid #c1c4c7;border-radius:.625rem;font-size:.625rem;line-height:1.25;margin-left:-1.3125rem;margin-top:1.25rem;padding:1rem 1.25rem}.waste-content-item__note p{margin-bottom:1.2em}.waste-content-item__note :last-child{margin-bottom:0}.waste-slider-container{margin:1.5rem 0 1.5rem -1.3125rem;position:relative}.waste-slider-container .swiper-button-next,.waste-slider-container .swiper-button-prev{color:#8ac399;cursor:pointer;height:1.8375rem;position:absolute;top:50%;transform:translateY(-50%);width:1.05rem;z-index:2}.waste-slider-container .swiper-button-next .icon,.waste-slider-container .swiper-button-prev .icon{height:100%;width:100%}.waste-slider-container .swiper-button-prev{left:-.375rem;transform:translateY(-50%) scaleX(-1)}.waste-slider-container .swiper-button-next{right:-.375rem}.waste-slider{margin-block:-1.875rem;padding-block:1.875rem;transition:opacity .3s ease,visibility .3s ease;width:25.9375rem}.waste-slider:not(.swiper-initialized){opacity:0;visibility:hidden}.waste-slider .swiper-wrapper{align-items:center}.waste-slider .swiper-slide{align-items:center;display:flex;height:10.8125rem;justify-content:center;width:7.8125rem}.waste-slider .swiper-slide-active .waste-item{color:#fff;transform:scale(1)!important;z-index:10}.waste-slider .swiper-slide-active .waste-item::before{opacity:1}.waste-slider .swiper-slide-active .waste-item__descr,.waste-slider .swiper-slide-active .waste-item__title,.waste-slider .swiper-slide-active .waste-item__type{color:#fff}.waste-slider .swiper-slide-active .waste-item__icon img.icon--common{opacity:0}.waste-slider .swiper-slide-active .waste-item__icon img.icon--active{opacity:1}.waste-slider .swiper-slide-active .waste-item__sign{color:#5fb9bd}.waste-slider .swiper-slide-active .waste-item__sign::before{background-color:#fff}.waste-item{border-radius:.625rem;box-shadow:0 .0625rem .625rem rgba(0,0,0,.2);display:flex;flex-direction:column;height:100%;justify-content:center;overflow:hidden;padding:2.0625rem .625rem .75rem .625rem;position:relative;text-align:center;transform:scale(.867);transition:transform .3s ease;width:100%}.waste-item::before{background-image:linear-gradient(140deg,#ddd755 -40%,#5fb9bd 105%);content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .3s ease;width:100%;z-index:-1}.waste-item__icon{display:flex;flex-direction:column;flex-shrink:0;height:4.25rem;justify-content:flex-end;margin-bottom:.8125rem;position:relative}.waste-item__icon img{height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);transition:opacity .3s ease;width:auto}.waste-item__icon img.icon--active{opacity:0}.waste-item__title{color:#5fb9bd;font-size:.5625rem;font-weight:700;line-height:1.13;margin-bottom:.4375rem;text-transform:uppercase;transition:color .3s ease}.waste-item__descr{font-size:.4375rem;font-weight:500;transition:color .3s ease}.waste-item__type{font-size:.4375rem;font-weight:500;left:1.25em;max-width:50%;position:absolute;text-align:left;top:1.5em;transition:color .3s ease}.waste-item__sign{align-items:center;color:#fff;display:flex;font-size:.5625rem;font-weight:700;height:1.55em;justify-content:center;position:absolute;right:1.33em;top:1.55em;text-align:center;transition:color .3s ease;width:1.55em;z-index:1}.waste-item__sign::before{border-radius:.22em;content:"";height:100%;left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(45deg);transition:background-color .3s ease;width:100%;z-index:-1}.waste-item--large .waste-item__title{font-size:.8125rem}.waste-item--non .waste-item__title{font-size:.6875rem;margin-bottom:.875rem;text-transform:none}.waste-item--non .waste-item__descr{color:#b8b8b8;font-size:.4375rem;line-height:1.4}.press-contacts{border-bottom:1px solid #c1c4c7;display:flex;flex-direction:column;margin-bottom:2.25rem;padding-bottom:2.625rem;row-gap:1.375rem}.press-contacts-item{align-items:center;-moz-column-gap:1rem;column-gap:1rem;display:grid;font-size:.875rem;grid-template-columns:2.125rem auto;line-height:1.28}.press-contacts-item__icon .icon{color:#5fb9bd;height:2.125rem;width:2.125rem}.press-contacts-item__body strong{font-weight:600}.hotline{font-size:.875rem;line-height:1.28;margin:0 auto 2.25rem;max-width:18.125rem;text-align:center}.hotline-heading{font-size:.875rem;font-weight:700;line-height:inherit;margin-bottom:1rem}.hotline-number{font-size:1.125rem;font-weight:700;margin-bottom:1.25rem}.company-contacts{display:flex}.company-contacts-item{display:flex;flex-direction:column;font-size:.875rem;line-height:1.22;row-gap:.875rem;text-align:center}.company-contacts-item__icon .icon{color:#5fb9bd;height:1.8125rem;width:1.8125rem}.contacts-map{background-color:#f3f3f1;height:23.375rem;margin:0 -1.125rem 4.375rem}.feedback-heading{font-size:.875rem;font-weight:700;line-height:1.28;margin-bottom:1rem}.feedback-form .form-row{margin-bottom:.625rem}.feedback-form .form-control,.feedback-form .form-select{border-radius:.625rem;font-size:.875rem;padding:.375rem 1.125rem}.feedback-form .form-check{margin-top:1.375rem;padding-left:2.125em}.feedback-form .form-check-input{border-radius:.1875rem;height:1.5em;margin-left:-2.125em;width:1.5em}.feedback-form .form-check-label{font-size:.75rem}.feedback-form .form-submit{margin-top:2.25rem}.feedback-form .form-submit .btn{--bs-btn-padding-x:1.17em;--bs-btn-font-size:0.875rem;--bs-btn-font-weight:700;--bs-btn-border-radius:0.375rem;min-height:2.1875rem}@media (min-width:576px){.container{max-width:540px}.d-sm-none{display:none!important}.article-image__caption{font-size:.5625rem}.article-image--wide{height:8.71875rem}.article-image--tall{margin-inline:auto;max-width:23.34375rem}.hero-content{height:18.125rem}.hero-title{font-size:1.4375rem;margin-bottom:.9375rem;max-width:22.5rem}.hero-apply .btn{--bs-btn-font-size:0.75rem;--bs-btn-padding-y:0.33em;--bs-btn-padding-x:0.6em}.hero-apply .btn .arrow-right-wrap{border-radius:.16em;height:.842em;width:.842em}.hero-containers{-moz-column-gap:1.624rem;column-gap:1.624rem;margin-left:0}.hero-containers-item .garbage{height:8.09375rem;width:6.78125rem}.hero-buildings{bottom:0;left:auto;right:0;transform:translateX(0);width:auto}.hero-buildings img{width:12.0262rem}.bells-marking-signs li{width:calc(25% - 1rem)}}@media (min-width:768px){.container{max-width:720px}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-6{flex:0 0 auto;width:50%}.d-md-inline{display:inline!important}.d-md-block{display:block!important}.d-md-flex{display:flex!important}.d-md-none{display:none!important}.glightbox-container .ginner-container{width:auto;height:auto;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{order:1}.glightbox-container .ginner-container.desc-left .gslide-description{order:0}.glightbox-container .ginner-container.desc-left .gslide-image{order:1}.gslide-image img{max-height:97vh;max-height:calc(var(--vh,1vh) * 97);max-width:100%}.gslide-image img.zoomable{cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:grab}.gslide-inline{max-height:95vh;max-height:calc(var(--vh,1vh) * 95)}.gslide-external{max-height:100vh;max-height:calc(var(--vh,1vh) * 100)}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.glightbox-clean .gslide-media{padding:3.75rem}.glightbox-clean .gslide-media img{border-radius:1.25rem}.glightbox-clean .gnext,.glightbox-clean .gprev{top:50%;transform:translateY(-50%)}.glightbox-clean .gclose{width:3.75rem;height:3.75rem;top:1.25rem;right:1.25rem}body.page-inner{padding-top:5rem}.content{padding-inline:1.875rem}.section--inner{padding-top:1.375rem}.page-heading{font-size:1.875rem;margin-bottom:2.4rem;max-width:27rem}.search-form .form-control{font-size:.7425rem;padding:.495rem 2.64rem .495rem .7425rem}.search-form .btn-search{right:.9075rem}.btn-search{height:.99rem;width:.99rem}.form-select{background-position:right .9375rem center;background-size:1.25rem .9375rem}.invalid-feedback{border-radius:0 0 .75rem .75rem;margin-top:-.75rem;padding:1.5rem .75rem .75rem}.form-checklist .form-check-inline{margin-right:2.25rem}.form-file-drop__zone{font-size:1rem;min-height:5.775rem}.form-file-drop__icon .icon{height:1.85625rem;width:1.85625rem}.link-tag{min-height:1.75rem}.content-tabs{gap:.625rem;margin-bottom:2.25rem}.content-tabs .nav-link{font-size:.9375rem;min-height:1.875rem;padding-inline:1.125em}.diamond-list{--offset:1.05rem}.diamond-list li{padding-left:2.7rem}.diamond-list li:not(:last-child)::before{left:.88em;top:0;width:.2em}.diamond-list li::after{height:1.46em;top:0;width:1.46em}.gradient-list{padding-left:3rem}.gradient-list::before{left:.875rem}.article blockquote{background-position:right 2.25rem top 2.25rem;background-size:4.4625rem 3.3375rem;font-size:1rem;margin-block:2.625rem;padding-block:1.8rem;padding-inline:2.25rem;padding-right:8.0625rem}.article-heading{font-size:1.5rem;line-height:1.3;margin:0 1.875rem 2.5rem}.article-date{font-size:.75rem;margin-bottom:.4em}.article-body{font-size:1rem;line-height:1.52;margin-bottom:1.52em}.article-body ol,.article-body p,.article-body table,.article-body ul{margin-bottom:1.52em}.article-body h2{font-size:1.5rem;line-height:1.3;margin-block:2.25rem}.article-tags{gap:.625rem}.article-tags .link-tag{font-size:.875rem}.article-image{margin-block:2.25rem}.article-image__caption{font-size:.6875rem}.article-image img{border-radius:.75rem}.article-image--wide{height:11.625rem}.article-image--double{gap:1.375rem}.article-image--double-h{gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.article-image--triple{gap:.875rem}.article-image--triple-h{gap:1.25rem;grid-template-columns:repeat(3,minmax(0,1fr))}.article-image--tall{max-width:31.125rem}.scroll-to-top .btn{--bs-btn-font-size:0.875rem}.navbar .container{max-width:700px}.navbar-container{height:5rem}.navbar-brand svg{height:2.15625rem}.navbar-toggler,.search-toggler{transform:scale(1.25)}.navbar-side-item{height:1.875rem;width:1.875rem}.navbar-search .search-form{height:5rem;padding-left:calc(50vw - 350px);padding-right:calc(50vw - 350px + 2.25rem)}.navbar-search .search-form .btn-search{right:5rem}.navbar-search .search-form .search-toggler{right:2.25rem;transform:translateY(-50%) scale(1.25)}.navbar-search .btn-search{height:1.875rem;width:1.875rem}.footer .content{padding-top:2.5rem}.footer-container{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:3.3rem}.footer-cell--logos{grid-column:1/2;grid-row:1/2}.footer-cell--socials{grid-column:2/3;grid-row:1/2;justify-self:end}.footer-cell--contacts,.footer-cell--nav,.footer-cell--search{grid-column:1/3}.footer-cell--search{height:1.5675rem;position:absolute;right:9.3225rem;top:0;width:1.5675rem}.footer-cell--search .search-form{height:2.26875rem;position:absolute;right:-.61875rem;top:50%;transform:translateY(-50%);width:18.975rem;z-index:2}.footer-cell--search .search-form:not(.is-open){opacity:0;visibility:hidden}.footer-logos{width:20.2125rem}.footer-logos__item{height:2.145rem}.footer-contacts{gap:1.25rem 2.5rem}.footer-contact{font-size:.7425rem}.footer-socials{font-size:.5775rem}.section--hero{padding-top:6.25rem}.section--hero>.container{max-width:700px}.hero-content{height:26.25rem}.hero-title{font-size:1.8975rem;margin-bottom:1.2375rem;max-width:29.7rem}.hero-apply .btn{--bs-btn-font-size:0.75rem}.hero-containers{-moz-column-gap:2.03rem;column-gap:2.03rem;margin-left:0}.hero-containers-item .garbage{height:10.6375rem;width:8.9125rem}.hero-containers-item .garbage__more{font-size:.75rem}.hero-containers-item:focus .garbage__cover,.hero-containers-item:hover .garbage__cover{transform:rotate(-13.5deg)}.hero-containers-item:focus .garbage__label,.hero-containers-item:hover .garbage__label{opacity:0}.hero-containers-item:focus .garbage__more,.hero-containers-item:hover .garbage__more{opacity:1;transform:translate(-50%,0)}.hero-buildings img{width:16.035rem}.section--activity{padding-top:3rem}.activity-grid{gap:1.5rem 1.25rem;grid-template-columns:repeat(2,minmax(0,1fr))}.activity-item{border-radius:.9375rem;box-shadow:.125rem .1875rem 1.125rem rgba(0,0,0,.1);min-height:8.125rem}.facts-slider-container{height:10.53rem}.facts-slider{width:49.95rem}.facts-slider .swiper-wrapper{margin-left:-1.575rem}.facts-slider .swiper-slide{height:8.82rem;width:15.93rem}.facts-slider .swiper-slide-active{width:19.08rem!important}.facts-slider .swiper-slide-active .facts-item{transform:scale(1.2)}.facts-item{border-radius:.54rem;height:10.2rem;padding:1.4rem 1.7rem;row-gap:.54rem;width:15.93rem}.facts-item__icon{height:1.89rem}.facts-item__count{font-size:2.34rem}.facts-item__text{font-size:.63675rem}.facts-item__gallery .btn{--bs-btn-border-width:0.09rem;--bs-btn-padding-x:0.81rem;--bs-btn-padding-y:0.27rem}.facts-item--large .facts-item__text{font-size:.8086725rem}.gallery-header{align-items:center;display:flex;margin-bottom:2.25rem}.gallery-nav{margin-left:1.875rem}.gallery-nav .nav-item{font-size:1rem}.gallery-nav .nav-item:not(:first-child)::before{margin-inline:0.5em}.gallery-slider .swiper-control{justify-content:space-between;margin-inline:auto;margin-top:1.125rem;width:35.25rem}.gallery-slide{border-radius:1rem;height:16.875rem;width:32.75rem}.gallery-slide__play{height:3.24rem;width:3.24rem}.apply-info{display:grid;grid-template-columns:1.02fr 1fr;margin-bottom:4.455rem;padding:1.85625rem}.apply-info-cell{font-size:.825rem}.apply-info-cell:nth-child(2){border-left:1px solid #c1c4c7;margin-left:1.85625rem;padding-left:1.85625rem}.apply-info-cell h3{font-size:1.0725rem;margin-bottom:1.155rem}.apply-info-cell ul li{padding-left:2em}.apply-info-cell ul li::before{left:.5em}.apply-info-cell ul li strong{font-size:1.15em}.apply-info-cell__marks{-moz-column-gap:1.03125rem;column-gap:1.03125rem;margin-bottom:1.32rem}.apply-info-cell__marks .mark-important{font-size:1.155rem;padding:.495rem 1.32rem}.apply-info-cell__marks .icon-exclamation{height:2.31rem;width:2.5265625rem}.apply-steps{font-size:1.25rem;margin-bottom:5.61rem}.apply-form{font-size:.875rem;margin-bottom:3.96rem}.apply-form .row{--bs-gutter-x:0.9375rem}.apply-form .form-required{margin-top:1.25rem}.apply-form .form-label{font-size:1.15em}.apply-form .form-control,.apply-form .form-select{border-radius:.75rem;padding:.75rem 1.25rem}.apply-control{gap:.9375rem;margin-bottom:3.96rem}.apply-control .btn{--bs-btn-font-size:1rem;width:11.25rem}.management-general{margin-bottom:2.925rem;max-width:14.25rem}.management-general__photo{margin-bottom:.825rem}.management-general__photo img{border-radius:1.0125rem}.management-general__name{font-size:.9375rem;margin-bottom:.5625rem}.management-general__descr{font-size:.825rem}.management-grid{gap:2.1375rem 1.2rem;grid-template-columns:repeat(3,minmax(0,1fr))}.management-item{border-radius:.5625rem;box-shadow:.0625rem .0625rem .6rem rgba(0,0,0,.2);min-height:15.9375rem;padding:1.35rem 1.125rem 1.125rem}.management-item__photo{height:6.75rem;margin-bottom:.825rem;width:5.4375rem}.management-item__photo img{border-radius:.75rem}.management-item__name{font-size:.9375rem;margin-bottom:.3rem}.management-item__descr{font-size:.825rem}.management-item--long .management-item__descr{font-size:.6rem}.areas-grid{margin-bottom:2.475rem;row-gap:2.025rem}.areas-grid--rno{margin-bottom:0;row-gap:2.625rem}.areas-item__body{padding:1.65rem 1.95rem}.areas-item__title{font-size:1.125rem;margin-bottom:1.125rem;padding-bottom:.375rem}.areas-item__content{font-size:.875rem;line-height:1.3}.areas-item--image-side{display:flex}.areas-item--image-side .areas-item__image{flex-shrink:0;height:19.31875rem;width:20.69375rem}.areas-item--image-side .areas-item__body{display:flex;flex-direction:column;justify-content:center;padding:1.125rem 1.95rem}.areas-item--image-left{flex-direction:row-reverse}.areas-item--image-left .areas-item__body{padding-left:2.1rem}.areas-item--image-center .areas-item__image{height:15.640625rem}.areas-item--program .areas-item__image{height:15.640625rem}.areas-item--program .areas-item__body{padding:1.5rem 2.25rem}.areas-item--operator .areas-item__body{align-items:center;display:flex;padding:1.2rem 1.95rem 1.125rem 5.325rem}.areas-item--operator .areas-item__content{font-size:.875rem}.areas-item--operator .areas-item__button{margin-left:1.125rem}.areas-item--operator .areas-item__button .icon-exclamation{height:2.22rem;left:1.5rem;position:absolute;top:50%;transform:translateY(-50%);width:2.428125rem}.areas-item--operator .areas-item__button .btn-apply-operator{--bs-btn-padding-x:1.2rem;--bs-btn-padding-y:0.7875rem;--bs-btn-font-size:0.7875rem;--bs-btn-border-radius:0.3rem}.areas-item--operator .areas-item__announce{font-size:1.1625rem;line-height:1.3;padding:1.575rem 1.575rem 1.575rem 5.325rem}.areas-item--operator .areas-item__announce .icon-announce{height:2.55rem;left:1.5rem;top:50%;transform:translateY(-50%);width:2.55rem}.activity-contacts{justify-content:space-between;margin-bottom:1.875rem}.activity-contact{width:10.625rem}.activity-contact__icon .icon{height:2.5rem;width:2.5rem}.activity-contact__body{font-size:.875rem;line-height:1.3}.activity-map{height:16.65rem;margin-inline:-1.875rem}.bells-data{margin-bottom:2.1rem;row-gap:2rem}.bells-data-item{gap:1rem .875rem;grid-template-columns:repeat(4,minmax(0,1fr))}.bells-data-item__cell--year{font-size:1.89rem;padding:.54rem .9rem}.bells-data-item__cell--value{border-radius:.5rem;padding:.5rem .75rem}.bells-section{font-size:1rem;line-height:1.3}.bells-section--image{border-radius:.9375rem;display:flex;padding:1.275rem 2.4rem}.bells-section--image .bells-heading{line-height:1.13}.bells-section--image .bells-image{flex-shrink:0}.bells-section--1 .bells-content{padding-inline:0}.bells-section--2 .bells-content{padding-inline:2.4rem}.bells-section--3{border:1px solid #c1c4c7;border-radius:.9375rem;padding:1.275rem 2.4rem}.bells-section--3 .bells-content{font-size:.85em;padding-inline:0}.bells-section--4 .bells-image{margin-left:1.125rem;margin-right:-.45rem;width:17.78125rem}.bells-section--5 .bells-content{padding-inline:0}.bells-section--6{flex-direction:row-reverse}.bells-section--6 .bells-image{margin-left:-.75rem;margin-right:2.5rem;width:16.96875rem}.bells-heading{font-size:1.25rem;line-height:1.3}.bells-contacts{-moz-column-gap:1rem;column-gap:1rem;display:grid;grid-template-columns:15.625rem auto}.bells-contacts__image img{border-radius:.9375rem}.bells-contacts__body{border:1px solid rgba(23,24,26,.06);border-radius:.9375rem;box-shadow:0 .9375rem .9375rem -.9375rem rgba(0,0,0,.1);font-size:.875rem;padding:1.2rem 1.725rem}.bells-contacts__phones{justify-content:flex-start}.bells-marking-signs{gap:1.875rem;margin-bottom:3rem}.bells-marking-signs li{width:calc(25% - 1.5rem)}.bells-marking-description{font-size:1rem;line-height:1.3}.bells-marking-description h4{font-size:1rem;margin-bottom:1.25rem}.bells-marking-description ol li{padding-left:4.05rem}.bells-marking-description ol li img{width:2.1rem}.bells-locations-heading{-moz-column-gap:0.5rem;column-gap:.5rem;font-size:1.125rem;margin-bottom:1.5rem}.bells-locations-map{height:29.175rem;margin:0 -1.875rem 3rem}.bells-locations{margin-bottom:1.8rem}.bells-locations-item{font-size:.875rem;margin-bottom:1.275rem}.bells-locations-item__header .accordion-button{border-radius:.625rem .625rem 0 0;grid-template-columns:auto 28%}.bells-locations-item__header .accordion-button .icon-arrow-down{height:.45rem;right:.9rem;top:.9rem;width:.6rem}.bells-locations-item__district{padding:.4875rem 1.5rem .4875rem 2.175rem}.bells-locations-item__total{padding:.4875rem 1.725rem .4875rem .975rem}.bells-locations-item__row{grid-template-columns:14.5% auto 28%}.bells-locations-item__row:last-child{border-radius:0 0 .625rem .625rem}.bells-locations-item__place{padding:.6rem .75rem}.bells-locations-item__address{padding:.6rem 1.575rem}.bells-locations-item__count{padding:.6rem .75rem}.bells-locations-note{font-size:.875rem}.bells-locations-note .text-primary{font-weight:600}.divisions-item{-moz-column-gap:1.25rem;column-gap:1.25rem;display:grid;grid-template-columns:13.75rem auto}.divisions-item__body{border:1px solid rgba(23,24,26,.2);border-radius:1.25rem;box-shadow:0 1.25rem 1.25rem rgba(0,0,0,.02);display:flex;flex-direction:column;justify-content:center;padding:1.25rem 1.875rem}.divisions-item__title{line-height:1.2;margin-bottom:1.25rem}.divisions-item__phone{margin-bottom:1.375rem}.divisions-item__phone .link-tag{font-size:1rem}.divisions-item__address{font-size:.875rem;line-height:1.2}.vacancies-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vacancies-item{min-height:14.55625rem;padding:2.125rem 1.7rem}.vacancies-item__title{font-size:1.125rem}.vacancies-item__descr{font-size:1.125rem}.vacancies-item__more{font-size:1.375rem}.vacancies-single{box-shadow:.125rem .1875rem 1.5rem rgba(0,0,0,.12);grid-column:1/3;padding:1.65rem 1.485rem}.vacancies-single__main{margin-bottom:2.475rem;padding-right:12.5rem}.vacancies-single__title{font-size:1.125rem;margin-bottom:3rem}.vacancies-single__contacts{justify-content:flex-end;max-width:12.5rem;position:absolute;right:0;top:0}.vacancies-single__content{font-size:1rem}.vacancies-single__cols{-moz-column-gap:1.25rem;column-gap:1.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.vacancies-single__section h3{font-size:1.125rem;margin-bottom:.75rem;padding-left:3rem}.vacancies-single__section .diamond-list li{padding-left:3rem}.union-logo{margin-bottom:2.48rem}.union-about{font-size:1rem;margin-bottom:1.875rem;padding:1.05rem 3.15rem 1.575rem}.union-about__lead{font-size:1.15em;line-height:1.22;margin-bottom:.75rem;padding-bottom:.9rem}.union-about__content{line-height:1.48}.union-activity{font-size:1rem;margin-bottom:3.6rem}.union-activity h3{font-size:1.25rem;margin-bottom:1.65rem}.union-activity .diamond-list{--offset:1.35rem;line-height:1.55}.union-activity .diamond-list li{padding-left:3.225rem}.union-activity .diamond-list li::after{top:.1em}.union-functions{gap:1.3125rem 1.65rem;grid-template-columns:repeat(2,minmax(0,1fr))}.union-functions-item{min-height:12.375rem;padding:1.5rem 1.25rem}.union-functions-item__icon{height:5.7rem}.union-functions-item__title{font-size:1.125rem}.news-grid{gap:3rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr))}.news-item__date{margin-bottom:.4em}.news-item__title{font-size:1rem;line-height:1.5;margin-bottom:1.36em}.article-games{margin-block:2.25rem}.article-games-heading{font-size:1.875rem;margin-bottom:3.375rem}.article-games-seats{margin-inline:auto}.article-games-seats::before{height:.375rem;top:1.125rem;width:36.875rem}.article-games-seats li{font-size:.875rem;line-height:1.52;padding-top:3.45rem;width:12.375rem}.article-games-seats li::before{font-size:1.3125rem;height:2.625rem;width:8.4375rem}.licenses-single{margin-bottom:3rem}.licenses-single__heading{font-size:1.25rem;line-height:1.22;margin-bottom:0}.licenses-single__descr{font-size:.9375rem;line-height:1.44;margin-bottom:.625rem;max-width:37.5rem}.licenses-single__note{font-size:.8125rem;max-width:37.5rem}.licenses-registry{text-align:center}.licenses-registry .link-tag{font-size:1rem;min-height:2rem;padding-inline:1.875em}.table{--border-radius:0.9375rem}.envpolicy-table{margin-bottom:2.0625rem}.envpolicy-table td:first-child,.envpolicy-table th:first-child{width:40.25%}.envpolicy-table td:nth-child(2),.envpolicy-table th:nth-child(2){width:26.5%}.envpolicy-table thead th{font-size:1rem;line-height:1.18;padding:1.25rem 1.375rem 1.125rem}.envpolicy-table tbody td{font-size:.875rem;padding:.5rem .75rem .5rem 1.5rem}.envpolicy-table--sm td:first-child,.envpolicy-table--sm th:first-child{width:35%}.envpolicy-table--sm td:nth-child(2),.envpolicy-table--sm th:nth-child(2){width:24%}.envpolicy-table--sm tbody td{font-size:.75rem}.envpolicy-notification{font-size:.9375rem;line-height:1.5;margin-bottom:2.55rem;max-width:30rem}.envpolicy-news-grid{margin-bottom:2.85rem}.envpolicy-news-item{border-color:#fff;font-size:.9375rem;line-height:1.5;padding:1.65rem 2.85rem}.policy-link .link-tag{font-size:.9375rem;min-height:1.875rem;padding-inline:1.5em}.procurement-info{font-size:1rem;line-height:1.22;margin-bottom:2.775rem;padding:1.2rem 2.4rem;row-gap:1.5rem}.procurement-info .link-tag{border-radius:.625rem;font-size:.9375rem;min-height:1.75rem;padding-inline:2.625em}.procurement-link a{border-radius:.625rem;font-size:.9375rem;min-height:1.75rem;padding:.22em 1.25em}.docs-sections{row-gap:2.475rem}.docs-sections--records{row-gap:1.125rem}.docs-sections--records .docs-list{max-width:37.275rem}.docs-sections--more{-moz-column-gap:2.1rem;column-gap:2.1rem;display:grid;grid-template-columns:auto 100%;margin-bottom:2.4rem}.docs-sections-heading{font-size:.9375rem;margin-bottom:.75rem}.docs-heading{font-size:.9375rem;margin-bottom:1.05rem}.docs-list{gap:1rem .75rem;max-width:32.8125rem}.docs-list .nav-item{width:calc((100% - 2.25rem)/ 4)}.docs-list .nav-item--wide{width:calc((100% - .75rem)/ 2)}.docs-list .nav-link{border-radius:.3125rem;font-size:.75rem;height:2.125rem}.laws-sections{row-gap:2.25rem}.laws-sections-heading{font-size:.9375rem;margin-bottom:2.25rem}.laws-heading{font-size:.9375rem;margin-bottom:.6rem}.laws-list{row-gap:.75rem}.laws-list .nav-item{font-size:.9375rem;line-height:1.5}.corruption-heading{font-size:1.1875rem;margin-bottom:2.025rem}.corruption-contacts{-moz-column-gap:2.25rem;column-gap:2.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:1.35rem .45rem}.corruption-contacts-item{padding:.25rem 1.25rem}.corruption-contacts-item:not(:first-child)::before{border-left:1px solid #c1c4c7;bottom:0;left:-1.125rem}.corruption-contacts-item__title{line-height:1.25;margin-bottom:.825rem}.corruption-contacts-item__body .link-tag{padding-inline:0.82em}.safety-links{gap:1.05rem;margin-bottom:2.85rem}.safety-links .link-tag{font-size:.9375rem;min-height:1.875rem;width:auto}.safety-table{margin-bottom:2.85rem}.safety-table thead th{font-size:.75rem;line-height:1.3;padding:.375rem .4375rem}.safety-table thead th.cell-1{padding-left:.625rem;padding-right:.375rem;width:9%}.safety-table thead th.cell-2{padding-inline:0.5rem;width:15.5%}.safety-table thead th.cell-3{padding-inline:0.5rem;width:16.5%}.safety-table thead th.cell-6,.safety-table thead th.cell-7,.safety-table thead th.cell-8,.safety-table thead th.cell-9{font-size:.5rem;padding-bottom:.875rem;padding-top:.625rem}.safety-table thead th.cell-10,.safety-table thead th.cell-4,.safety-table thead th.cell-5{font-size:.625rem}.safety-table thead th.cell-long-1{padding-inline:1.875rem}.safety-table thead th.cell-long-2{font-size:.625rem}.safety-table tbody td,.safety-table tbody th{font-size:.6875rem;padding:1rem .5rem}.safety-table tbody th{padding-left:.625rem;padding-right:.375rem}.safety-table tbody td:nth-child(2),.safety-table tbody td:nth-child(3){padding-inline:0.5rem}.safety-docs .link-tag{border-radius:.3125rem;font-size:.875rem;min-height:2.375rem}.cameras-heading{font-size:.9375rem;line-height:1.5;margin-bottom:2.4rem}.cameras-grid{gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}.cameras-item{font-size:2.5rem;height:15.75rem}.cameras-item__link{padding:3rem}.press-news-item{border-color:#c1c4c7;display:flex;gap:1.2rem}.press-news-item:nth-child(odd){flex-direction:row-reverse}.press-news-item__image{flex-shrink:0;height:16.25rem;width:18.75rem}.press-news-item__body{display:flex;flex-direction:column;justify-content:center;padding:1rem 2.5rem}.press-news-item__title{font-size:1rem;line-height:1.05}.press-news-item__lead{font-size:.875rem}.press-news-item__more{font-size:.75rem;margin-top:.6rem}.press-gallery .swiper-wrapper{display:grid;gap:1.125rem .9375rem;grid-template-columns:repeat(3,minmax(0,1fr))}.education-event{border:1px solid #c1c4c7;border-radius:1.25rem}.education-event__head{border:1px solid #c1c4c7;border-radius:1.25rem;margin:-1px -1px 0}.education-rno-about{font-size:.875rem;line-height:1.54;margin-bottom:3.375rem;padding:1.725rem 1.425rem}.education-rno-about h2{font-size:.9375rem;margin-bottom:.25rem}.education-rno-about h3{font-size:.9375rem;line-height:1.1;margin-bottom:2.175rem}.education-rno-about p{margin-bottom:1.54em}.education-faq{padding:1.5rem 1.65rem}.education-faq-item:not(:first-child){margin-top:1.5rem;padding-top:1.5rem}.education-faq-item__button .accordion-button{font-size:1.125rem}.education-faq-item__button .accordion-button::after{height:.6rem;width:1.0875rem}.education-faq-item__body .accordion-body{padding-top:1.125rem}.education-faq-item__content{font-size:.875rem;line-height:1.5}.education-faq-item__content .text-larger{font-size:1.2em;line-height:1.1;margin-bottom:1.4em;margin-top:1.2em}.education-faq-item__content h4{font-size:1.33em;margin-bottom:.5em;margin-top:.75em}.materials-tabs .nav-link{border-radius:.375rem;font-size:.75rem;min-height:2.375rem;padding-inline:1.25em}.education-materials-grid{gap:2.25rem 1.35rem;grid-template-columns:repeat(3,minmax(0,1fr))}.education-materials-item__image{margin-bottom:1.35rem}.education-materials-item__download .link-more{font-size:.875rem;height:1.8rem;width:8.4rem}.education-materials-item--wide{grid-column:1/4}.education-materials-item--single{margin-inline:auto;width:22.5rem}.education-accordion{margin-bottom:1.725rem}.education-accordion-item:not(:first-child){margin-top:2.1rem}.education-accordion-item__button .accordion-button{border-radius:.3125rem;font-size:.875rem;min-height:2.375rem;padding:.375rem 7.5rem .375rem 1.5rem}.education-accordion-item__button .accordion-button::after{height:.6rem;right:1.5rem;top:.9rem;width:1.0875rem}.education-accordion-item__body{font-size:1rem}.education-accordion-item__body .accordion-body{padding-top:2.325rem}.education-accordion-item__content{padding:1.725rem 2.1rem}.education-tips-section{margin-bottom:2.1rem}.education-tips-section__title{font-size:1.0625rem;margin-bottom:1.2rem}.education-tips-section__body{font-size:1rem;padding:1.125rem 1.575rem 1.5rem}.education-tips-important{font-size:1rem;margin-bottom:2.25rem}.education-tips-important--2{font-size:.875rem}#education-tips .education-accordion-item__button .accordion-button{font-size:1.3125rem}#education-tips .education-accordion-item__body{font-size:1rem}#education-tips .education-accordion-item__body .accordion-body{padding-top:1.35rem}.education-tips-list{--offset:1.5rem;font-size:.9375rem;line-height:1.25;margin-bottom:2.25rem;margin-left:2.25rem;max-width:30rem}.waste-heading{font-size:1.0625rem;margin-bottom:.75rem;margin-left:1.5rem}.waste-content-item{font-size:1rem;padding-left:2.2875rem}.waste-content-item:not(:first-child){margin-top:2.025rem;padding-top:2.025rem}.waste-content-item__note{font-size:1rem;margin-left:-2.2875rem;margin-top:1.35rem;padding:1.125rem 2.25rem 1.5rem}.waste-slider-container{margin:2.625rem 0 2.625rem -2.2875rem}.waste-slider{width:39.75rem}.waste-slider .swiper-slide{height:16.3125rem;width:11.85rem}.waste-item{border-radius:.75rem;box-shadow:0 .0625rem 1.125rem rgba(0,0,0,.2);padding:3.15rem .9rem 1.2rem;transform:scale(.9)}.waste-item__icon{height:6.45rem;margin-bottom:1.2rem}.waste-item__title{font-size:.875rem;margin-bottom:.5rem}.waste-item__descr{font-size:.6875rem}.waste-item__type{font-size:.6875rem}.waste-item__sign{font-size:.8125rem}.waste-item--large .waste-item__title{font-size:1.25rem}.waste-item--non .waste-item__title{font-size:1rem;margin-bottom:1em}.waste-item--non .waste-item__descr{font-size:.6875rem}.press-contacts{margin-bottom:2.4rem;padding-bottom:3rem;row-gap:2.1rem}.press-contacts-item{-moz-column-gap:0.75rem;column-gap:.75rem;font-size:.8125rem;grid-template-columns:1.875rem auto}.press-contacts-item__icon .icon{height:1.875rem;width:1.875rem}.hotline{font-size:.75rem;margin-bottom:3.225rem;max-width:29.25rem}.hotline-heading{font-size:1.1875rem;line-height:1.5;margin-bottom:.975rem}.hotline-number{font-size:1.375rem;margin-bottom:.75rem}.company-contacts{justify-content:space-between;margin-bottom:3.225rem}.company-contacts-item{font-size:.75rem;row-gap:.8625rem;width:9rem}.company-contacts-item__icon .icon{height:1.425rem;width:1.425rem}.contacts-map{height:17.775rem;margin:0 -1.875rem 5.25rem}.feedback-heading{font-size:1.125rem;margin-bottom:1.05rem}.feedback-form .form-row{margin-bottom:.675rem}.feedback-form .form-control,.feedback-form .form-select{font-size:.6875rem;padding:.45rem 1.125rem}.feedback-form textarea.form-control{height:5.475rem}.feedback-form .form-check{font-size:.75rem;margin-top:.75rem}.feedback-form .form-submit .btn{--bs-btn-padding-x:1.5em;--bs-btn-font-size:0.8125rem;min-height:2.2125rem}}@media (min-width:1000px){.container{max-width:960px}.d-lg-inline{display:inline!important}.d-lg-block{display:block!important}.d-lg-none{display:none!important}body.page-inner{padding-top:7.47rem}.content{padding-inline:3.125rem}.section-title{font-size:1.35rem;font-weight:700}.section-title .icon{height:1.8rem;margin-right:.63rem;margin-top:-.135rem;width:1.8rem}.section--inner{padding-bottom:3.75rem}.content-heading{-moz-column-gap:1.35rem;column-gap:1.35rem;margin-bottom:2.16rem}.content-heading__logo{width:7.875rem}.content-heading__descr{font-size:.945rem;margin-bottom:.225rem}.page-heading{font-size:2.25rem;margin-bottom:2.88rem;max-width:32.4rem}.search-form .form-control{border-radius:.54rem;border-width:.09rem;font-size:.81rem;padding:.54rem 2.88rem .54rem .81rem}.search-form .btn-search{right:.99rem}.btn-search{height:1.08rem;width:1.08rem}.form-file-drop__zone{min-height:6.3rem}.form-file-drop__icon .icon{height:2.025rem;width:2.025rem}.link-tag{font-size:.875rem;min-height:1.875rem}.content-tabs{gap:.75rem;margin-bottom:2.7rem}.content-tabs .nav-link{font-size:1.25rem;min-height:2.25rem}.diamond-list{--offset:1.26rem}.diamond-list li{padding-left:3.24rem}.article blockquote{background-position:right 2.7rem top 2.7rem;background-size:5.355rem 4.005rem;font-size:1.25rem;margin-block:3.15rem;padding-block:2.16rem;padding-inline:2.7rem;padding-right:9.675rem}.article-heading{font-size:2rem;margin:0 2.5rem 3.125rem}.article-date{font-size:.875rem}.article-body{font-size:1.25rem}.article-body h2{font-size:2rem;margin-block:2.75rem}.article-tags{gap:.75rem}.article-tags .link-tag{font-size:1rem}.article-image{margin-block:2.875rem}.article-image__caption{font-size:.8125rem}.article-image img{border-radius:1rem}.article-image--wide{height:13.95rem}.article-image--double{gap:1.75rem}.article-image--double-h{gap:1.25rem}.article-image--triple{gap:1rem}.article-image--triple-h{gap:1.5rem}.article-image--tall{max-width:37.35rem}.link-more .icon-arrow-down{height:.216rem;margin-left:.324rem;width:.288rem}.scroll-to-top .btn{--bs-btn-font-size:1rem}.navbar{position:absolute}.navbar .container{max-width:920px}.navbar-container{align-items:flex-start;height:auto;padding-top:2.475rem;position:relative}.navbar-brand{left:0;position:absolute;top:6.12rem}.navbar-brand svg{height:3.105rem}.navbar-collapse{display:block!important}.navbar-nav{align-items:flex-start;display:flex}.navbar-nav>.nav-item{--bs-link-color-rgb:255,255,255;--bs-link-hover-color-rgb:255,255,255;font-size:.945rem}.navbar-nav>.nav-item+.nav-item{margin-left:1.125rem}.navbar-nav>.nav-item:nth-child(4) .navbar-subnav-popup{width:12.6rem}.navbar-nav>.nav-item.is-subnav-open>.nav-link,.navbar-nav>.nav-item:hover>.nav-link{font-weight:700}.navbar-nav>.nav-item:has(:focus-visible)>.nav-link{font-weight:700}.navbar-nav>.nav-item.is-subnav-open>.nav-link .nav-link-span::after,.navbar-nav>.nav-item:hover>.nav-link .nav-link-span::after{opacity:1;visibility:visible}.navbar-nav>.nav-item:has(:focus-visible)>.nav-link .nav-link-span::after{opacity:1;visibility:visible}.navbar-nav>.nav-item.is-subnav-open .navbar-subnav-popup,.navbar-nav>.nav-item:hover .navbar-subnav-popup{opacity:1;transform:translateY(0);visibility:visible}.navbar-nav>.nav-item:has(:focus-visible) .navbar-subnav-popup{opacity:1;transform:translateY(0);visibility:visible}.navbar-nav>.nav-item>.nav-link{-moz-column-gap:0.5rem;column-gap:.5rem;text-wrap:nowrap}.navbar-nav>.nav-item>.nav-link .nav-link-span::after{background-color:currentColor;border-radius:.0625rem;content:"";height:.125rem;left:0;opacity:0;position:absolute;top:100%;transform:translateY(250%);transition:opacity .25s ease,visibility .3s ease;visibility:hidden;width:100%}.navbar-subnav-popup{left:0;opacity:0;padding-top:1.53rem;position:absolute;top:100%;transform:translateY(.54rem);visibility:hidden;width:18.9rem;z-index:50}.navbar-subnav{background-color:#fff;border-radius:.54rem;box-shadow:0 .625rem 1.25rem rgba(0,0,0,.1);padding:1.125rem 1.44rem 1.26rem}.navbar-subnav>.nav-item{font-size:1.053rem}.navbar-subnav>.nav-item+.nav-item{margin-top:1.44rem}.navbar-subnav>.nav-item.has-subsubnav.is-subsubnav-open .navbar-subsubnav{margin-top:1.26rem;max-height:18rem}.navbar-subnav>.nav-item>.nav-link .icon-arrow-down-thin{height:.387rem;width:.6192rem}.navbar-subsubnav{margin-top:.63rem}.navbar-subsubnav>.nav-item{font-size:.86985rem;padding-left:0}.navbar-subsubnav>.nav-item+.nav-item{margin-top:.855rem}.navbar-question .btn{--bs-btn-padding-y:0.405rem;--bs-btn-padding-x:0.765rem;--bs-btn-font-size:0.873rem;--bs-btn-border-radius:0.495rem}.footer .content{padding-bottom:1.98rem;padding-top:2.34rem}.footer-container{row-gap:3.6rem}.footer-cell--search{height:1.71rem;right:10.17rem;width:1.71rem}.footer-cell--search .search-form{height:2.475rem;right:-.675rem;width:20.7rem}.footer-logos{width:22.05rem}.footer-logos__item{height:2.34rem}.footer-contacts{-moz-column-gap:2.97rem;column-gap:2.97rem}.footer-contact{font-size:.81rem}.footer-contact .icon{height:2em;margin-right:.5em;transform:translateY(-20%);width:2em}.footer-socials{font-size:.63rem}.section--hero{padding-top:6.165rem}.section--hero>.container{max-width:920px}.hero-content{height:31.185rem}.hero-brand svg{height:3.105rem}.hero-title{font-size:2.07rem;line-height:1.15;margin-bottom:1.35rem;max-width:32.4rem}.hero-apply .btn{--bs-btn-font-size:0.871875rem}.hero-containers{-moz-column-gap:2.9232rem;column-gap:2.9232rem;margin-left:0}.hero-containers-item .garbage{height:13.5198rem;width:11.3274rem}.hero-containers-item .garbage__more{font-size:.81rem}.hero-buildings img{width:19.242rem}.section--activity{padding-top:4.05rem}.section--activity .section-title{margin-bottom:1.8rem}.activity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.activity-item{min-height:15.21rem;padding:2.475rem .9rem 1.8rem;text-align:center}.activity-item__image{left:50%;right:auto;transform:translateX(-50%)}.activity-item__name{font-size:.99rem;line-height:1.3;padding-inline:0.9rem;padding-top:1.26rem}.activity-item__body{left:0;opacity:0;position:absolute;top:0;transform:translateY(.625rem);transition:opacity .3s cubic-bezier(.33, 1, .68, 1),transform .3s cubic-bezier(.33, 1, .68, 1);width:100%}.activity-item__descr{font-size:.693rem;margin-bottom:.72rem;max-height:3.99em;overflow:hidden}@supports (-webkit-line-clamp:1) or (line-clamp:1){.activity-item__descr{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:3;max-height:none}}.activity-item__more{font-size:.8775rem}.activity-item:hover .activity-item__image--empty{opacity:0}.activity-item:hover .activity-item__image--full{opacity:1}.activity-item:hover .activity-item__name{opacity:0;transform:translateY(-.625rem)}.activity-item:hover .activity-item__body{opacity:1;transform:translateY(0)}.activity-item:first-child .activity-item__name{padding-inline:2.7rem}.activity-item:first-child .activity-item__image{height:6.975rem}.activity-item:nth-child(2) .activity-item__name{padding-inline:2.5rem}.activity-item:nth-child(2) .activity-item__image{height:4.95rem}.activity-item:nth-child(3) .activity-item__image{height:4.455rem}.activity-item:nth-child(4) .activity-item__name{padding-inline:1.8rem}.activity-item:nth-child(4) .activity-item__image{height:6.615rem}.activity-item:nth-child(5) .activity-item__image{height:6.435rem}.activity-item:nth-child(6) .activity-item__image{height:4.59rem}.section--facts{padding-top:5.22rem}.section--facts .section-title{margin-bottom:1.26rem}.section--news{padding-block:5.22rem}.section--news .section-title{margin-bottom:1.71rem}.news-slide{height:auto;width:12.825rem}.news-slide--all{width:12.825rem}.news-slide__image{border-radius:.675rem;height:12.825rem}.news-slide__body{padding-top:1.08rem}.news-slide__date{font-size:.50625rem;margin-bottom:.625em}.news-slide__excerpt{font-size:.846rem;line-height:1.28;padding-right:.9rem}.news-slide__tags{gap:.405rem}.news-slide__tags .tag{font-size:.75rem;padding:.32rem .75rem}.news-slide__all{font-size:1.215rem;line-height:1.3;height:12.825rem;padding:2.25rem 2.25rem 2.25rem 1.35rem;text-transform:none}.news-slide__all::before{background-image:linear-gradient(120deg,#d0d45e -25%,#64b699 88%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 279 285' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23b)' d='M0 15C0 6.716 6.716 0 15 0h121.287c3.978 0 7.793 1.58 10.606 4.393l127.5 127.5c5.858 5.858 5.858 15.356 0 21.214l-127.5 127.5A15 15 0 0 1 136.287 285H15c-8.284 0-15-6.716-15-15z'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 279 285' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23b)' d='M0 15C0 6.716 6.716 0 15 0h121.287c3.978 0 7.793 1.58 10.606 4.393l127.5 127.5c5.858 5.858 5.858 15.356 0 21.214l-127.5 127.5A15 15 0 0 1 136.287 285H15c-8.284 0-15-6.716-15-15z'/%3E%3C/svg%3E%0A")}.section--gallery{padding-bottom:2.34rem;padding-top:1.62rem}.gallery-nav{margin-left:1.35rem}.gallery-nav .nav-item{font-size:1.35rem}.gallery-slider .swiper-control{width:42.345rem}.gallery-slide{border-radius:.72rem;height:21.105rem;width:42.345rem}.apply-info{margin-bottom:4.86rem;padding:2.025rem}.apply-info-cell{font-size:.9rem}.apply-info-cell:nth-child(2){margin-left:2.025rem;padding-left:2.025rem}.apply-info-cell h3{font-size:1.17rem;margin-bottom:1.26rem}.apply-info-cell__marks{-moz-column-gap:1.125rem;column-gap:1.125rem;margin-bottom:1.44rem}.apply-info-cell__marks .mark-important{font-size:1.26rem;padding:.54rem 1.44rem}.apply-info-cell__marks .icon-exclamation{height:2.52rem;width:2.75625rem}.apply-steps{margin-bottom:6.12rem}.management-general{margin-bottom:3.51rem;max-width:17.1rem}.management-general__photo{margin-bottom:.99rem}.management-general__photo img{border-radius:1.215rem}.management-general__name{font-size:1.125rem;margin-bottom:.675rem}.management-general__descr{font-size:.99rem}.management-grid{gap:2.565rem 1.44rem}.management-item{border-radius:.675rem;box-shadow:.09375rem .125rem .72rem rgba(0,0,0,.2);min-height:19.125rem;padding:1.62rem 1.35rem 1.35rem}.management-item__photo{height:8.1rem;margin-bottom:.99rem;width:6.525rem}.management-item__photo img{border-radius:.9rem}.management-item__name{font-size:1.125rem;margin-bottom:.36rem}.management-item__descr{font-size:.99rem}.management-item--long .management-item__descr{font-size:.72rem}.areas-grid{margin-bottom:2.97rem;row-gap:2.43rem}.areas-grid--rno{margin-bottom:0;row-gap:3.15rem}.areas-item{border-radius:.9375rem}.areas-item__image img{border-radius:.9375rem}.areas-item__body{padding:1.98rem 2.34rem}.areas-item__title{font-size:1.375rem;margin-bottom:1.35rem;padding-bottom:.45rem}.areas-item__content{font-size:1.125rem}.areas-item--image-side .areas-item__image{height:25.29rem;width:27.09rem}.areas-item--image-side .areas-item__body{padding:1.35rem 2.34rem}.areas-item--image-left .areas-item__body{padding-left:2.52rem}.areas-item--image-center .areas-item__image{height:20.475rem}.areas-item--program .areas-item__image{height:20.475rem}.areas-item--program .areas-item__body{padding:1.8rem 2.7rem}.areas-item--operator .areas-item__body{padding:1.44rem 2.34rem 1.35rem 6.39rem}.areas-item--operator .areas-item__content{font-size:1.125rem}.areas-item--operator .areas-item__button{margin-left:1.35rem}.areas-item--operator .areas-item__button .icon-exclamation{height:2.664rem;left:1.8rem;width:2.91375rem}.areas-item--operator .areas-item__button .btn-apply-operator{--bs-btn-padding-x:1.44rem;--bs-btn-padding-y:0.945rem;--bs-btn-font-size:0.945rem;--bs-btn-border-radius:0.36rem}.areas-item--operator .areas-item__announce{border-radius:.9375rem;font-size:1.395rem;padding:1.89rem 1.89rem 1.89rem 6.39rem}.areas-item--operator .areas-item__announce .icon-announce{height:3.06rem;left:1.8rem;width:3.06rem}.activity-contacts{margin-bottom:2.25rem}.activity-contact{width:12.5rem}.activity-contact__body{font-size:1rem}.activity-map{height:19.98rem;margin-inline:-3.125rem}.bells-data{margin-bottom:2.52rem;row-gap:1rem}.bells-data-item{font-size:.65625rem;gap:.75rem;grid-template-columns:15.48rem repeat(4,minmax(0,1fr));height:6.39rem}.bells-data-item__cell--value{border-radius:.75rem;box-shadow:.075rem .1125rem .75rem rgba(0,0,0,.1)}.bells-section{font-size:1.125rem}.bells-section--4 .bells-image{margin-left:1.875rem;margin-right:-.75rem;width:23.47125rem}.bells-section--6 .bells-image{margin-left:-1.25rem;margin-right:3.3rem;width:22.39875rem}.bells-heading{font-size:1.375rem;margin-bottom:1.08rem}.bells-contacts{-moz-column-gap:1.25rem;column-gap:1.25rem;grid-template-columns:17.5rem auto}.bells-contacts__body{font-size:1rem;padding:1.44rem 2.07rem}.bells-marking-signs{gap:2.5rem;margin-bottom:4.32rem}.bells-marking-signs li{width:calc(25% - 1.875rem)}.bells-marking-description{font-size:1.125rem;margin-right:3.75rem}.bells-marking-description h4{font-size:1.25rem;margin-bottom:1.5625rem}.bells-marking-description ol li{padding-left:4.86rem}.bells-marking-description ol li img{width:2.52rem}.bells-locations-heading{-moz-column-gap:0.625rem;column-gap:.625rem;font-size:1.25rem;margin-bottom:1.8rem}.bells-locations-heading .icon{height:2rem;width:2rem}.bells-locations-map{height:35.01rem;margin:0 -3.125rem 3.6rem}.bells-locations{margin-bottom:2.16rem}.bells-locations-item{font-size:1rem;margin-bottom:1.53rem}.bells-locations-item__header .accordion-button{border-radius:.75rem .75rem 0 0;font-size:1.125rem;grid-template-columns:auto 27%}.bells-locations-item__header .accordion-button .icon-arrow-down{height:.54rem;right:1.08rem;top:1.08rem;width:.72rem}.bells-locations-item__district{padding:.585rem 1.8rem .585rem 2.61rem}.bells-locations-item__total{padding:.585rem 2.07rem .585rem 1.17rem}.bells-locations-item__row{grid-template-columns:14.5% auto 27%}.bells-locations-item__row:last-child{border-radius:0 0 .75rem .75rem}.bells-locations-item__place{padding:.72rem .9rem}.bells-locations-item__address{padding:.72rem 1.89rem}.bells-locations-item__count{padding:.72rem .9rem}.bells-locations-note{font-size:1.125rem}.divisions-grid{row-gap:3.125rem}.divisions-item{-moz-column-gap:2rem;column-gap:2rem;grid-template-columns:21.25rem auto}.divisions-item__body{padding:1.35rem 2.61rem}.divisions-item__title{font-size:1.5rem;margin-bottom:1.5rem}.divisions-item__phone{margin-bottom:1.625rem}.vacancies-single{padding:1.875rem 1.6875rem}.vacancies-single__main{margin-bottom:2.7rem;padding-right:15rem}.vacancies-single__title{font-size:1.25rem}.vacancies-single__contacts{max-width:15rem}.vacancies-single__section h3{margin-bottom:1rem}.union-logo{margin-bottom:2.8rem}.union-logo img{max-width:20rem}.union-about{font-size:1.25rem;margin-bottom:2.5rem;padding:1.26rem 3.78rem 1.89rem}.union-about__lead{margin-bottom:.9rem;padding-bottom:1.08rem}.union-activity{font-size:1.125rem;margin-bottom:4.32rem}.union-activity h3{font-size:1.375rem;margin-bottom:1.98rem}.union-activity .diamond-list{--offset:1.62rem}.union-activity .diamond-list li{padding-left:3.87rem}.union-functions{gap:1.575rem 1.98rem;grid-template-columns:repeat(3,minmax(0,1fr))}.union-functions-item{min-height:14.85rem;padding:1rem .75rem}.union-functions-item__icon{height:6.84rem}.news-grid{gap:4.32rem 1.44rem;grid-template-columns:repeat(3,minmax(0,1fr))}.news-item__title{font-size:1.125rem}.article-games{margin-block:2.7rem}.article-games-heading{font-size:2.25rem;margin-bottom:4.05rem}.article-games-seats::before{height:.5rem;top:1.3125rem;width:48.125rem}.article-games-seats li{font-size:1.125rem;padding-top:4.14rem;width:14.85rem}.article-games-seats li::before{font-size:1.5625rem;height:3.125rem;width:10.125rem}.licenses-single{margin-bottom:3.6rem}.licenses-single__heading{font-size:1.5rem}.licenses-single__descr{font-size:1.125rem;max-width:45rem}.licenses-single__note{font-size:.875rem;max-width:45rem}.licenses-registry .link-tag{font-size:1.25rem;min-height:2.5rem}.envpolicy-table{margin-bottom:2.475rem}.envpolicy-table thead th{font-size:1.3125rem;padding:1.625rem 1.875rem 1.5rem}.envpolicy-table tbody td{font-size:1rem;padding:.6875rem .875rem .6875rem 1.875rem}.envpolicy-table--sm tbody td{font-size:.875rem}.envpolicy-notification{font-size:1.125rem;margin-bottom:3.06rem;max-width:36rem}.envpolicy-news-grid{margin-bottom:3.42rem}.envpolicy-news-item{font-size:1.125rem;padding:1.98rem 3.42rem}.envpolicy-news-item .link-tag{font-size:1.125rem;min-height:2rem}.policy-link .link-tag{font-size:1.125rem;min-height:2.25rem}.procurement-info{font-size:1.25rem;margin-bottom:3.33rem;padding:1.44rem 2.88rem}.procurement-info .link-tag{font-size:1.125rem;min-height:2rem}.procurement-link a{border-width:1.5px;font-size:1.125rem;min-height:2rem}.docs-sections{row-gap:2.97rem}.docs-sections--records{row-gap:1.35rem}.docs-sections--records .docs-list{max-width:44.73rem}.docs-sections--more{-moz-column-gap:2.52rem;column-gap:2.52rem;margin-bottom:2.88rem}.docs-sections-heading{font-size:1.125rem;margin-bottom:.9rem}.docs-heading{font-size:1.125rem;margin-bottom:1.26rem}.docs-list{gap:1.25rem 1rem;max-width:39.375rem}.docs-list .nav-item{width:calc((100% - 3rem)/ 4)}.docs-list .nav-item--wide{width:calc((100% - 1rem)/ 2)}.docs-list .nav-link{font-size:1rem;height:2.8125rem}.laws-sections{row-gap:2.7rem}.laws-sections-heading{font-size:1.125rem;margin-bottom:2.7rem}.laws-heading{font-size:1.125rem;margin-bottom:.72rem}.laws-list .nav-item{font-size:1.125rem}.corruption-heading{font-size:1.4375rem;margin-bottom:2.43rem}.corruption-contacts{-moz-column-gap:2.7rem;column-gap:2.7rem;padding:1.62rem .54rem}.corruption-contacts-item{padding:.3125rem 1.8rem}.corruption-contacts-item:not(:first-child)::before{left:-1.35rem}.corruption-contacts-item__title{font-size:1.4375rem;margin-bottom:.99rem}.corruption-contacts-item__body{gap:.75rem}.safety-links{gap:1.26rem;margin-bottom:3.42rem}.safety-links .link-tag{font-size:1.125rem;min-height:2.25rem}.safety-table{margin-bottom:3.42rem}.safety-table thead th{font-size:.875rem;line-height:1.48;padding:.5rem .625rem}.safety-table thead th.cell-1{padding-left:.875rem;padding-right:.5rem}.safety-table thead th.cell-2{padding-inline:0.75rem}.safety-table thead th.cell-3{padding-inline:0.75rem}.safety-table thead th.cell-6,.safety-table thead th.cell-7,.safety-table thead th.cell-8,.safety-table thead th.cell-9{font-size:.625rem;padding-bottom:1.125rem;padding-top:.75rem}.safety-table thead th.cell-10,.safety-table thead th.cell-4,.safety-table thead th.cell-5{font-size:.875rem}.safety-table thead th.cell-long-1{padding-inline:2.5rem}.safety-table thead th.cell-long-2{font-size:.875rem}.safety-table tbody td,.safety-table tbody th{font-size:.9375rem;padding:1.25rem .75rem}.safety-table tbody th{padding-left:.75rem;padding-right:.5rem}.safety-table tbody td:nth-child(2),.safety-table tbody td:nth-child(3){padding-inline:0.75rem}.safety-docs .link-tag{font-size:1rem;min-height:2.875rem}.cameras-heading{font-size:1.125rem;margin-bottom:2.88rem}.cameras-grid{gap:1.75rem}.cameras-item{border-radius:.75rem;font-size:3rem;height:18.9rem}.cameras-item__link{padding:3.625rem}.press-news-item__image{height:18rem;width:25.47rem}.press-news-item__body{padding:1.08rem 3.51rem}.press-news-item__title{font-size:1.3125rem}.press-news-item__lead{font-size:1rem}.press-news-item__more{font-size:.875rem;margin-top:.72rem}.press-gallery .swiper-wrapper{gap:1.25rem 1.125rem}.education-rno-about{font-size:1.0625rem;margin-bottom:4.05rem;padding:2.07rem 1.71rem}.education-rno-about h2{font-size:1.125rem}.education-rno-about h3{font-size:1.125rem;margin-bottom:2.61rem}.education-faq{padding:1.8rem 1.98rem}.education-faq-item:not(:first-child){margin-top:1.8rem;padding-top:1.8rem}.education-faq-item__button .accordion-button{font-size:1.375rem}.education-faq-item__button .accordion-button::after{height:.72rem;width:1.305rem}.education-faq-item__body .accordion-body{padding-top:1.35rem}.education-faq-item__content{font-size:1.0625rem}.materials-tabs .nav-link{border-radius:.4375rem;font-size:.9375rem;min-height:2.875rem}.education-materials-grid{gap:2.7rem 1.62rem}.education-materials-item__image{margin-bottom:1.62rem}.education-materials-item__download .link-more{font-size:1.0625rem;height:2.16rem;width:10.08rem}.education-materials-item__download .link-more .icon-arrow-down-thin{height:.5625rem;width:.9rem}.education-materials-item--single{width:27rem}.education-accordion{margin-bottom:2.07rem}.education-accordion-item:not(:first-child){margin-top:2.52rem}.education-accordion-item__button .accordion-button{border-radius:.4375rem;font-size:1.0625rem;min-height:2.875rem;padding:.5rem 9.375rem .5rem 1.875rem}.education-accordion-item__button .accordion-button::after{height:.72rem;right:1.8rem;top:1.08rem;width:1.305rem}.education-accordion-item__body{font-size:1.125rem}.education-accordion-item__body .accordion-body{padding-top:2.79rem}.education-accordion-item__content{border-radius:.9375rem;padding:2.07rem 2.52rem}.education-tips-section{margin-bottom:2.52rem}.education-tips-section__title{font-size:1.25rem;margin-bottom:1.44rem}.education-tips-section__body{border-radius:.9375rem;font-size:1.125rem;padding:1.35rem 1.89rem 1.8rem}.education-tips-important{font-size:1.25rem;margin-bottom:2.7rem}.education-tips-important--2{font-size:1.0625rem}#education-tips .education-accordion-item__button .accordion-button{font-size:1.5625rem}#education-tips .education-accordion-item__body{font-size:1.125rem}#education-tips .education-accordion-item__body .accordion-body{padding-top:1.62rem}.education-tips-list{--offset:1.8rem;font-size:1.125rem;margin-bottom:2.7rem;margin-left:2.7rem;max-width:36rem}.waste-heading{font-size:1.3125rem;margin-bottom:.9rem;margin-left:1.8rem}.waste-content-item{font-size:1.125rem;padding-left:2.745rem}.waste-content-item:not(:first-child){margin-top:2.43rem;padding-top:2.43rem}.waste-content-item__note{border-radius:.9375rem;font-size:1.125rem;margin-left:-2.745rem;margin-top:1.62rem;padding:1.35rem 2.7rem 1.8rem}.waste-slider-container{margin:3.15rem 0 3.15rem -2.745rem}.waste-slider-container .swiper-button-next,.waste-slider-container .swiper-button-prev{height:2.205rem;width:1.26rem}.waste-slider-container .swiper-button-prev{left:.75rem}.waste-slider-container .swiper-button-next{right:.75rem}.waste-slider{width:47.7rem}.waste-slider .swiper-slide{height:19.575rem;width:14.22rem}.waste-item{border-radius:.9rem;box-shadow:0 .09375rem 1.35rem rgba(0,0,0,.2);padding:3.78rem 1.08rem 1.44rem}.waste-item__icon{height:7.74rem;margin-bottom:1.44rem}.waste-item__title{font-size:1.0625rem}.waste-item__descr{font-size:.875rem}.waste-item__type{font-size:.875rem}.waste-item__sign{font-size:1rem}.waste-item--large .waste-item__title{font-size:1.5rem}.waste-item--non .waste-item__title{font-size:1.1875rem}.waste-item--non .waste-item__descr{font-size:.875rem}.press-contacts{margin-bottom:2.88rem;padding-bottom:3.6rem;row-gap:2.52rem}.press-contacts-item{-moz-column-gap:0.9rem;column-gap:.9rem;font-size:1rem;grid-template-columns:2.25rem auto}.press-contacts-item__icon .icon{height:2.25rem;width:2.25rem}.hotline{font-size:.875rem;margin-bottom:3.87rem;max-width:35.1rem}.hotline-heading{font-size:1.4375rem;margin-bottom:1.17rem}.hotline-number{font-size:1.625rem;margin-bottom:.9rem}.company-contacts{margin-bottom:3.87rem}.company-contacts-item{font-size:.875rem;row-gap:1.035rem;width:10.8rem}.company-contacts-item__icon .icon{height:1.71rem;width:1.71rem}.contacts-map{height:21.33rem;margin:0 -3.125rem 6.3rem}.feedback-heading{font-size:1.375rem;margin-bottom:1.26rem}.feedback-form .form-row{margin-bottom:.81rem}.feedback-form .form-control,.feedback-form .form-select{font-size:.875rem;padding:.54rem 1.35rem}.feedback-form textarea.form-control{height:6.57rem}.feedback-form .form-check{font-size:.875rem;margin-top:.9rem}.feedback-form .form-check-label{font-size:.875rem}.feedback-form .form-submit .btn{--bs-btn-font-size:1rem;--bs-btn-border-radius:0.5rem;min-height:2.655rem}}@media (min-width:3000px){.container{max-width:1344px}body.page-inner{padding-top:10.375rem}.content{padding-inline:4.375rem}.section-title{font-size:1.875rem}.section-title .icon{height:2.5rem;margin-right:.875rem;margin-top:-.1875rem;width:2.5rem}.section--inner{padding-bottom:5rem}.content-heading{-moz-column-gap:1.875rem;column-gap:1.875rem;margin-bottom:3rem}.content-heading__logo{width:10.9375rem}.content-heading__descr{font-size:1.3125rem;margin-bottom:.3125rem}.page-heading{font-size:3.125rem;margin-bottom:4rem;max-width:45rem}.search-form .form-control{border-radius:.75rem;border-width:.125rem;font-size:1.125rem;padding:.75rem 4rem .75rem 1.125rem}.search-form .btn-search{right:1.375rem}.btn-search{height:1.5rem;width:1.5rem}.form-select{background-position:right 1.3125rem center;background-size:1.75rem 1.3125rem}.invalid-feedback{border-radius:0 0 .9375rem .9375rem;margin-top:-.9375rem;padding:1.875rem .9375rem .9375rem}.form-checklist .form-check{font-size:1.25rem}.form-checklist .form-check-inline{margin-right:3.375rem}.form-file-drop__zone{border-radius:.9375rem;font-size:1.25rem;min-height:8.75rem;padding:1.25rem 2.5rem}.form-file-drop__icon .icon{height:2.8125rem;width:2.8125rem}.link-tag{font-size:1.125rem;min-height:2.0625rem}.content-tabs{gap:1rem;margin-bottom:3.75rem}.content-tabs .nav-link{font-size:1.5625rem;min-height:3.125rem}.diamond-list{--offset:1.75rem;margin-bottom:2.5rem}.diamond-list li{padding-left:4.5rem}.gradient-list{padding-left:3.375rem}.gradient-list::before{left:1rem;width:.25rem}.gradient-list li{font-size:1.1875rem;margin-bottom:1.375rem}.article{padding-top:1.25rem}.article blockquote{background-position:right 3.75rem top 3.75rem;background-size:7.4375rem 5.5625rem;font-size:1.75rem;margin-block:4.375rem;padding-block:3rem;padding-inline:3.75rem;padding-right:13.4375rem}.article-heading{font-size:3.125rem;margin:0 3.75rem 4.375rem}.article-date{font-size:.9375rem}.article-body{font-size:1.5625rem}.article-body h2{font-size:3.125rem;margin-block:3.5rem}.article-tags{gap:1rem}.article-tags .link-tag{font-size:1.25rem}.article-image{margin-block:3.75rem}.article-image__caption{font-size:.9375rem}.article-image img{border-radius:1.25rem}.article-image--wide{height:19.375rem}.article-image--double{gap:2.375rem}.article-image--double-h{gap:1.75rem}.article-image--triple{gap:1.375rem}.article-image--triple-h{gap:1.875rem}.article-image--tall{max-width:51.875rem}.link-more .icon-arrow-down{height:.3rem;margin-left:.45rem;width:.4rem}.scroll-to-top .btn{--bs-btn-font-size:1.25rem}.navbar .container{max-width:1296px}.navbar-container{padding-top:3.4375rem}.navbar-brand{top:8.5rem}.navbar-brand svg{height:4.3125rem}.navbar-nav>.nav-item{font-size:1.3125rem}.navbar-nav>.nav-item+.nav-item{margin-left:1.5625rem}.navbar-nav>.nav-item:nth-child(4) .navbar-subnav-popup{width:17.5rem}.navbar-nav>.nav-item>.nav-link .icon-arrow-down{height:.375rem;width:.5rem}.navbar-subnav-popup{padding-top:2.125rem;transform:translateY(.75rem);width:26.25rem}.navbar-subnav{border-radius:.75rem;padding:1.5625rem 2rem 1.75rem}.navbar-subnav>.nav-item{font-size:1.4625rem}.navbar-subnav>.nav-item+.nav-item{margin-top:2rem}.navbar-subnav>.nav-item.has-subsubnav.is-subsubnav-open .navbar-subsubnav{margin-top:1.75rem;max-height:25rem}.navbar-subnav>.nav-item>.nav-link .icon-arrow-down-thin{height:.5375rem;width:.86rem}.navbar-subsubnav{margin-top:.875rem}.navbar-subsubnav>.nav-item{font-size:1.208125rem}.navbar-subsubnav>.nav-item+.nav-item{margin-top:1.1875rem}.navbar-contacts{width:16.625rem}.navbar-phone{font-size:1.34375rem;margin-bottom:.875rem}.navbar-question .btn{--bs-btn-padding-y:0.5625rem;--bs-btn-padding-x:1.0625rem;--bs-btn-font-size:1.2125rem;--bs-btn-border-radius:0.6875rem}.footer .content{padding-bottom:2.75rem;padding-top:3.25rem}.footer-container{row-gap:5rem}.footer-cell--search{height:2.375rem;right:14.125rem;width:2.375rem}.footer-cell--search .search-form{height:3.4375rem;right:-.9375rem;width:28.75rem}.footer-logos{width:30.625rem}.footer-logos__item{height:3.25rem}.footer-contacts{-moz-column-gap:4.125rem;column-gap:4.125rem}.footer-contact{font-size:1.125rem}.footer-socials{font-size:.875rem}.section--hero{padding-top:8.5625rem}.section--hero>.container{max-width:1296px}.hero-content{height:43.3125rem}.hero-brand{margin-bottom:1.875rem}.hero-brand svg{height:4.3125rem}.hero-title{font-size:2.875rem;margin-bottom:1.875rem;max-width:45rem}.hero-apply .btn{--bs-btn-font-size:1.2109375rem}.hero-containers{-moz-column-gap:4.06rem;column-gap:4.06rem;margin-left:0}.hero-containers-item .garbage{height:18.7775rem;width:15.7325rem}.hero-containers-item .garbage__more{font-size:1.125rem}.hero-buildings img{width:26.725rem}.section--activity{padding-top:5.625rem}.section--activity .section-title{margin-bottom:2.5rem}.activity-grid{gap:2.25rem 1.25rem}.activity-item{min-height:21.125rem;padding:3.4375rem 1.25rem 2.5rem}.activity-item__name{font-size:1.375rem;padding-inline:1.25rem;padding-top:1.75rem}.activity-item__descr{font-size:.9625rem;margin-bottom:1rem}.activity-item__more{font-size:1.21875rem}.activity-item:first-child .activity-item__name{padding-inline:3.75rem}.activity-item:first-child .activity-item__image{height:9.6875rem}.activity-item:nth-child(2) .activity-item__name{padding-inline:3.5rem}.activity-item:nth-child(2) .activity-item__image{height:6.875rem}.activity-item:nth-child(3) .activity-item__image{height:6.1875rem}.activity-item:nth-child(4) .activity-item__name{padding-inline:2.5rem}.activity-item:nth-child(4) .activity-item__image{height:9.1875rem}.activity-item:nth-child(5) .activity-item__image{height:8.9375rem}.activity-item:nth-child(6) .activity-item__image{height:6.375rem}.section--facts{padding-top:7.25rem}.section--facts .section-title{margin-bottom:1.75rem}.facts-slider-container{height:14.625rem}.facts-slider{width:69.375rem}.facts-slider .swiper-wrapper{margin-left:-2.1875rem}.facts-slider .swiper-slide{height:12.25rem;width:22.125rem}.facts-slider .swiper-slide-active{width:26.5rem!important}.facts-item{border-radius:.75rem;height:15rem;padding:2rem 2.5rem;row-gap:.75rem;width:22.125rem}.facts-item__icon{height:2.625rem}.facts-item__count{font-size:3.25rem}.facts-item__text{font-size:.884375rem}.facts-item__gallery .btn{--bs-btn-font-size:1.4375rem;--bs-btn-border-radius:0.625rem;--bs-btn-border-width:0.125rem;--bs-btn-padding-x:1.125rem;--bs-btn-padding-y:0.375rem}.facts-item--large .facts-item__text{font-size:1.12315625rem}.section--news{padding-block:7.25rem}.section--news .section-title{margin-bottom:2.375rem}.news-slide{width:17.8125rem}.news-slide--all{width:17.8125rem}.news-slide__image{border-radius:.9375rem;height:17.8125rem}.news-slide__body{padding-top:1.5rem}.news-slide__date{font-size:.703125rem}.news-slide__excerpt{font-size:1.175rem;padding-right:1.25rem}.news-slide__tags{gap:.5625rem}.news-slide__tags .tag{font-size:.875rem;padding:.4rem .9rem}.news-slide__all{font-size:1.6875rem;padding:3.125rem 3.125rem 3.125rem 1.875rem;height:17.8125rem}.section--gallery{padding-bottom:3.25rem;padding-top:2.25rem}.gallery-nav{margin-left:1.875rem}.gallery-nav .nav-item{font-size:1.875rem}.gallery-slider .swiper-control{width:58.8125rem}.gallery-slider .swiper-button-next,.gallery-slider .swiper-button-prev{height:3.125rem;width:3.125rem}.gallery-slider .swiper-button-next .icon,.gallery-slider .swiper-button-prev .icon{height:.875rem;width:.5625rem}.gallery-slide{border-radius:1rem;height:29.3125rem;width:58.8125rem}.gallery-slide__play{height:4.5rem;width:4.5rem}.apply-info{margin-bottom:6.75rem;padding:2.8125rem}.apply-info-cell{font-size:1.25rem}.apply-info-cell:nth-child(2){margin-left:2.8125rem;padding-left:2.8125rem}.apply-info-cell h3{font-size:1.625rem;margin-bottom:1.75rem}.apply-info-cell__marks{-moz-column-gap:1.5625rem;column-gap:1.5625rem;margin-bottom:2rem}.apply-info-cell__marks .mark-important{font-size:1.75rem;padding:.75rem 2rem}.apply-info-cell__marks .icon-exclamation{height:3.5rem;width:3.828125rem}.apply-steps{font-size:2.375rem;margin-bottom:8.5rem}.apply-form{font-size:1.25rem;margin-bottom:6rem}.apply-form .row{--bs-gutter-x:1.25rem}.apply-form .form-row{margin-bottom:1.75rem}.apply-form .form-required{margin-top:1.75rem}.apply-form .form-control,.apply-form .form-select{border-radius:.9375rem;padding:.8125rem 1.875rem}.apply-control{gap:1.25rem;margin-bottom:6rem}.apply-control .btn{--bs-btn-font-size:1.4375rem;width:15.3125rem}.management-general{margin-bottom:4.875rem;max-width:23.75rem}.management-general__photo{margin-bottom:1.375rem}.management-general__photo img{border-radius:1.6875rem}.management-general__name{font-size:1.5625rem;margin-bottom:.9375rem}.management-general__descr{font-size:1.375rem}.management-grid{gap:3.5625rem 2rem}.management-item{border-radius:.9375rem;box-shadow:.125rem .1875rem 1rem rgba(0,0,0,.2);min-height:26.5625rem;padding:2.25rem 1.875rem 1.875rem}.management-item__photo{height:11.25rem;margin-bottom:1.375rem;width:9.0625rem}.management-item__photo img{border-radius:1.25rem}.management-item__name{font-size:1.5625rem;margin-bottom:.5rem}.management-item__descr{font-size:1.375rem}.management-item--long .management-item__descr{font-size:1rem}.areas-grid{margin-bottom:4.125rem;row-gap:3.375rem}.areas-grid--rno{margin-bottom:0;row-gap:4.375rem}.areas-item{border-radius:1.25rem}.areas-item__image img{border-radius:1.25rem}.areas-item__body{padding:2.75rem 3.25rem}.areas-item__title{font-size:2rem;margin-bottom:1.875rem;padding-bottom:.625rem}.areas-item__content{font-size:1.625rem}.areas-item--image-side .areas-item__image{height:35.125rem;width:37.625rem}.areas-item--image-side .areas-item__body{padding:1.875rem 3.25rem}.areas-item--image-left .areas-item__body{padding-left:3.5rem}.areas-item--image-center .areas-item__image{height:28.4375rem}.areas-item--program .areas-item__image{height:28.4375rem}.areas-item--program .areas-item__body{padding:2.5rem 3.75rem}.areas-item--operator .areas-item__body{padding:2rem 3.25rem 1.875rem 8.875rem}.areas-item--operator .areas-item__content{font-size:1.625rem}.areas-item--operator .areas-item__button{margin-left:1.875rem}.areas-item--operator .areas-item__button .icon-exclamation{height:3.7rem;left:2.5rem;width:4.046875rem}.areas-item--operator .areas-item__button .btn-apply-operator{--bs-btn-padding-x:2rem;--bs-btn-padding-y:1.3125rem;--bs-btn-font-size:1.3125rem;--bs-btn-border-radius:0.5rem}.areas-item--operator .areas-item__announce{border-radius:1.25rem;font-size:1.9375rem;padding:2.625rem 2.625rem 2.625rem 8.875rem}.areas-item--operator .areas-item__announce .icon-announce{height:4.25rem;left:2.5rem;width:4.25rem}.activity-contacts{margin-bottom:3.125rem}.activity-contact{width:15rem}.activity-contact__body{font-size:1.25rem}.activity-map{height:27.75rem;margin-inline:-4.375rem}.bells-data{margin-bottom:3.5rem;row-gap:1.375rem}.bells-data-item{font-size:.875rem;gap:1.25rem;grid-template-columns:21.5rem repeat(4,minmax(0,1fr));height:8.875rem}.bells-data-item__cell--year{font-size:2.625rem;padding:.75rem 1.25rem}.bells-data-item__cell--value{border-radius:.9375rem;padding:.625rem 1.25rem}.bells-section{font-size:1.625rem;margin-bottom:3.125rem}.bells-section--image{border-radius:1.25rem;padding:2.125rem 4rem}.bells-section--image .bells-heading{font-size:1.875rem}.bells-section--image .bells-content{font-size:1.5625rem}.bells-section--image .diamond-list{font-size:1.375rem}.bells-section--image .diamond-list li{padding-left:3.875rem}.bells-section--1 .bells-content{padding-inline:0}.bells-section--2 .bells-content{padding-inline:4rem}.bells-section--2 .diamond-list{padding-right:13.75rem}.bells-section--3{border-radius:1.25rem;padding:2.125rem 4rem}.bells-section--3 .bells-heading{padding-bottom:1.5rem}.bells-section--4 .bells-image{margin-right:-.75rem;width:35.5625rem}.bells-section--5 .bells-content{padding-inline:0}.bells-section--6 .bells-image{margin-right:5rem;width:33.9375rem}.bells-heading{font-size:2rem;margin-bottom:1.5rem}.bells-contacts{grid-template-columns:25rem auto}.bells-contacts__image img{border-radius:1.25rem}.bells-contacts__body{border-radius:1.25rem;box-shadow:0 1.25rem 1.25rem -1.25rem rgba(0,0,0,.1);font-size:1.125rem;padding:2rem 2.875rem}.bells-contacts__lead{padding-bottom:1.875rem}.bells-contacts__phones{gap:.75rem;margin-top:2.5rem}.bells-marking-signs{gap:3rem;margin-bottom:6rem}.bells-marking-signs li{width:calc(25% - 2.25rem)}.bells-marking-description{font-size:1.625rem;margin-right:5rem}.bells-marking-description h4{font-size:2rem;margin-bottom:1.5625rem}.bells-marking-description ol li{padding-left:6.75rem}.bells-marking-description ol li img{width:3.5rem}.bells-locations-heading{-moz-column-gap:0.875rem;column-gap:.875rem;font-size:1.5625rem;margin-bottom:2.5rem}.bells-locations-heading .icon{height:2.625rem;width:2.625rem}.bells-locations-map{height:48.625rem;margin:0 -4.375rem 5rem}.bells-locations{margin-bottom:3rem}.bells-locations-item{font-size:1.375rem;margin-bottom:2.125rem}.bells-locations-item__header .accordion-button{border-radius:.9375rem .9375rem 0 0;font-size:1.5rem;grid-template-columns:auto 25.5%}.bells-locations-item__header .accordion-button .icon-arrow-down{height:.75rem;right:1.5rem;top:1.5rem;width:1rem}.bells-locations-item__district{padding:.8125rem 2.5rem .8125rem 3.625rem}.bells-locations-item__total{padding:.8125rem 2.875rem .8125rem 1.625rem}.bells-locations-item__row{grid-template-columns:14.5% auto 25.5%}.bells-locations-item__row:last-child{border-radius:0 0 .9375rem .9375rem}.bells-locations-item__place{padding:1rem 1.25rem}.bells-locations-item__address{padding:1rem 2.625rem}.bells-locations-item__count{padding:1rem 1.25rem}.bells-locations-note{font-size:1.625rem}.divisions-grid{row-gap:4.375rem}.divisions-item{-moz-column-gap:3.125rem;column-gap:3.125rem;grid-template-columns:31.125rem auto}.divisions-item__body{padding:1.875rem 3.625rem}.divisions-item__title{font-size:2rem;margin-bottom:1.875rem}.divisions-item__phone{margin-bottom:2.125rem}.divisions-item__phone .link-tag{font-size:1.1875rem}.divisions-item__address{font-size:1.375rem}.vacancies-grid{gap:2rem;grid-template-columns:repeat(3,minmax(0,1fr))}.vacancies-item{box-shadow:0 .625rem 1.25rem rgba(0,0,0,.15);min-height:17.125rem;padding:2.5rem 2rem}.vacancies-item__title{font-size:1.4375rem}.vacancies-item__descr{font-size:1.375rem}.vacancies-item__more{font-size:1.6875rem}.vacancies-item__contacts{gap:1rem}.vacancies-item--flat .link-tag{font-size:1.1875rem}.vacancies-single{grid-column:1/4;padding:2.5rem 2.25rem}.vacancies-single__main{margin-bottom:3.75rem;padding-right:26.25rem}.vacancies-single__title{font-size:1.4375rem}.vacancies-single__contacts{max-width:26.25rem}.vacancies-single__contacts .link-tag{font-size:1.1875rem}.vacancies-single__content{font-size:1.1875rem}.vacancies-single__cols{-moz-column-gap:2.5rem;column-gap:2.5rem}.vacancies-single__section h3{font-size:1.375rem;padding-left:3.375rem}.vacancies-single__section .diamond-list{--offset:1.5rem}.vacancies-single__section .diamond-list li{padding-left:3.375rem}.union-logo{margin-bottom:4rem}.union-logo img{max-width:20.75rem}.union-about{font-size:1.6875rem;padding:1.75rem 5.25rem 2.625rem}.union-about__lead{margin-bottom:1.25rem;padding-bottom:1.5rem}.union-activity{font-size:1.375rem;margin-bottom:6rem}.union-activity h3{font-size:1.75rem;margin-bottom:2.75rem}.union-activity .diamond-list{--offset:2.25rem}.union-activity .diamond-list li{padding-left:5.375rem}.union-functions{gap:2.1875rem 2.75rem}.union-functions-item{min-height:20.625rem;padding:1.5rem 1.25rem}.union-functions-item__icon{height:9.5rem}.union-functions-item__title{font-size:1.5rem}.news-grid{gap:6rem 2rem}.news-item__image{margin-bottom:2.125rem}.news-item__image img{border-radius:1.25rem}.news-item__date{font-size:.9375rem}.news-item__title{font-size:1.5625rem}.news-item__tags .link-tag{font-size:1rem}.article-games{margin-block:3.75rem}.article-games-heading{font-size:3.1875rem;margin-bottom:5.625rem}.article-games-seats::before{height:.625rem;top:1.875rem;width:67.75rem}.article-games-seats li{font-size:1.5625rem;padding-top:5.75rem;width:20.625rem}.article-games-seats li::before{font-size:2.1875rem;height:4.375rem;width:14.0625rem}.licenses-single{margin-bottom:5rem}.licenses-single__heading{font-size:2rem}.licenses-single__descr{font-size:1.5625rem;margin-bottom:.625rem;max-width:62.5rem}.licenses-single__note{font-size:1.1875rem;max-width:62.5rem}.licenses-registry .link-tag{font-size:1.6875rem;min-height:3.4375rem}.table{--border-radius:1.25rem}.envpolicy-table{margin-bottom:3.4375rem}.envpolicy-table thead th{font-size:1.875rem;padding:2.5rem 2.8125rem 2.25rem}.envpolicy-table tbody td{font-size:1.375rem;padding:.875rem 1.25rem .875rem 2.8125rem}.envpolicy-table--sm tbody td{font-size:1.125rem}.envpolicy-notification{font-size:1.5625rem;margin-bottom:4.25rem;max-width:50rem}.envpolicy-news-grid{margin-bottom:4.75rem;row-gap:2.875rem}.envpolicy-news-item{font-size:1.5625rem;padding:2.75rem 4.75rem}.envpolicy-news-item .link-tag{font-size:1.375rem;min-height:2.4375rem}.policy-link .link-tag{font-size:1.5625rem;min-height:3.125rem}.procurement-info{font-size:1.6875rem;margin-bottom:4.625rem;padding:2rem 4rem;row-gap:1.75rem}.procurement-info .link-tag{font-size:1.5625rem;min-height:2.8125rem}.procurement-link a{border-width:2px;font-size:1.5625rem;min-height:2.8125rem}.docs-sections{row-gap:4.125rem}.docs-sections--records{row-gap:1.875rem}.docs-sections--records .docs-heading{margin-bottom:1.875rem}.docs-sections--records .docs-list{max-width:62.125rem}.docs-sections--more{-moz-column-gap:3.5rem;column-gap:3.5rem;margin-bottom:4rem}.docs-sections--more .docs-heading{margin-bottom:2.375rem}.docs-sections-heading{font-size:1.5625rem;margin-bottom:1.25rem}.docs-heading{font-size:1.5625rem;margin-bottom:1.75rem}.docs-list{gap:1.75rem 1.3125rem;max-width:54.6875rem}.docs-list .nav-item{width:calc((100% - 3.9375rem)/ 4)}.docs-list .nav-item--wide{width:calc((100% - 1.3125rem)/ 2)}.docs-list .nav-link{border-radius:.4375rem;font-size:1.3125rem;height:4rem}.laws-sections{row-gap:3.75rem}.laws-sections-heading{font-size:1.5625rem;margin-bottom:3.75rem}.laws-heading{font-size:1.5625rem;margin-bottom:1rem}.laws-list .nav-item{font-size:1.5625rem}.corruption-heading{font-size:2rem;margin-bottom:3.375rem}.corruption-contacts{-moz-column-gap:3.75rem;column-gap:3.75rem;padding:2.25rem .75rem}.corruption-contacts-item{padding:.375rem 2.5rem}.corruption-contacts-item:not(:first-child)::before{left:-1.875rem}.corruption-contacts-item__title{font-size:2rem;margin-bottom:1.375rem}.corruption-contacts-item__body{gap:1rem 1.0625rem}.corruption-contacts-item__body .link-tag{font-size:1.1875rem}.safety-text{font-size:.9375rem;line-height:1.5;margin-bottom:2.55rem}.safety-text{font-size:1.125rem;margin-bottom:3.06rem}.safety-text{font-size:1.5625rem;margin-bottom:4.25rem}.safety-links{gap:1.75rem;margin-bottom:4.75rem}.safety-links .link-tag{font-size:1.5625rem;min-height:3.125rem}.safety-table{margin-bottom:4.75rem}.safety-table thead th{font-size:1.1875rem;padding:.625rem .875rem}.safety-table thead th.cell-1{padding-left:1.25rem;padding-right:.75rem}.safety-table thead th.cell-2{padding-inline:1rem}.safety-table thead th.cell-3{padding-inline:1rem}.safety-table thead th.cell-6,.safety-table thead th.cell-7,.safety-table thead th.cell-8,.safety-table thead th.cell-9{font-size:.875rem;padding-bottom:1.75rem;padding-top:1.25rem}.safety-table thead th.cell-10,.safety-table thead th.cell-4,.safety-table thead th.cell-5{font-size:1rem}.safety-table thead th.cell-long-1{padding-inline:3.75rem}.safety-table thead th.cell-long-2{font-size:1rem}.safety-table tbody td,.safety-table tbody th{font-size:1.375rem;padding:1.875rem 1rem}.safety-table tbody th{padding-left:1.25rem;padding-right:.75rem}.safety-table tbody td:nth-child(2),.safety-table tbody td:nth-child(3){padding-inline:1rem}.safety-docs .link-tag{border-radius:.4375rem;font-size:1.3125rem;min-height:4rem}.cameras-heading{font-size:1.5625rem;margin-bottom:4rem}.cameras-grid{gap:2.5rem}.cameras-item{border-radius:.9375rem;font-size:4.125rem;height:26.25rem}.cameras-item__link{padding:5rem}.press-news-grid{row-gap:4.0625rem}.press-news-item{gap:2rem}.press-news-item:nth-child(2n) .press-news-item__body{padding-left:4.875rem}.press-news-item__image{height:25rem;width:35.375rem}.press-news-item__body{padding:1.5rem 4.875rem}.press-news-item__title{font-size:1.8125rem}.press-news-item__lead{font-size:1.5rem}.press-news-item__more{font-size:1.1875rem;margin-top:1rem}.press-gallery .swiper-wrapper{gap:1.875rem 1.5rem}.education-rno-about{font-size:1.5rem;margin-bottom:5.625rem;padding:2.875rem 2.375rem}.education-rno-about h2{font-size:1.8125rem;margin-bottom:.375rem}.education-rno-about h3{font-size:1.8125rem;margin-bottom:3.625rem}.education-faq{padding:2.5rem 2.75rem}.education-faq-item:not(:first-child){margin-top:2.5rem;padding-top:2.5rem}.education-faq-item__button .accordion-button{font-size:1.875rem}.education-faq-item__button .accordion-button::after{height:1rem;width:1.8125rem}.education-faq-item__body .accordion-body{padding-top:1.875rem}.education-faq-item__content{font-size:1.5rem}.materials-tabs .nav-link{border-radius:.625rem;font-size:1.3125rem;min-height:4rem}.education-materials-grid{gap:3.75rem 2.25rem}.education-materials-item__image{margin-bottom:2.25rem}.education-materials-item__download .link-more{font-size:1.5rem;height:3rem;width:14rem}.education-materials-item__download .link-more .icon-arrow-down-thin{height:.46875rem;width:.75rem}.education-materials-item__download .link-more .icon-arrow-down-thin{height:.78125rem;width:1.25rem}.education-materials-item--single{width:37.5rem}.education-accordion{margin-bottom:2.875rem}.education-accordion-item:not(:first-child){margin-top:3.5rem}.education-accordion-item__button .accordion-button{border-radius:.625rem;font-size:1.5rem;min-height:4rem;padding:.75rem 12.5rem .75rem 2.5rem}.education-accordion-item__button .accordion-button::after{height:1rem;right:2.5rem;top:1.5rem;width:1.8125rem}.education-accordion-item__body{font-size:1.625rem}.education-accordion-item__body .accordion-body{padding-top:3.875rem}.education-accordion-item__content{border-radius:1.25rem;padding:2.875rem 3.5rem}.education-tips-section{margin-bottom:3.5rem}.education-tips-section__title{font-size:1.8125rem;margin-bottom:2rem}.education-tips-section__body{border-width:1px;border-radius:1.25rem;font-size:1.625rem;padding:1.875rem 2.625rem 2.5rem}.education-tips-important{font-size:1.75rem;margin-bottom:3.75rem}.education-tips-important--2{font-size:1.5rem}#education-tips .education-accordion-item__button .accordion-button{font-size:2.1875rem}#education-tips .education-accordion-item__body{font-size:1.625rem}#education-tips .education-accordion-item__body .accordion-body{padding-top:2.25rem}.education-tips-list{--offset:2.5rem;font-size:1.5625rem;margin-bottom:3.75rem;margin-left:3.75rem;max-width:50rem}.waste-heading{font-size:1.8125rem;margin-bottom:1.25rem;margin-left:2.5rem}.waste-content-item{font-size:1.625rem;padding-left:3.8125rem}.waste-content-item:not(:first-child){margin-top:3.375rem;padding-top:3.375rem}.waste-content-item__note{border-radius:1.25rem;border-width:1px;font-size:1.625rem;margin-left:-3.8125rem;margin-top:2.25rem;padding:1.875rem 3.75rem 2.5rem}.waste-slider-container{margin:4.375rem 0 4.375rem -3.8125rem}.waste-slider-container .swiper-button-next,.waste-slider-container .swiper-button-prev{height:3.0625rem;width:1.75rem}.waste-slider-container .swiper-button-prev{left:1.25rem}.waste-slider-container .swiper-button-next{right:1.25rem}.waste-slider{width:66.25rem}.waste-slider .swiper-slide{height:27.1875rem;width:19.75rem}.waste-item{border-radius:1.25rem;box-shadow:0 .125rem 1.875rem rgba(0,0,0,.2);padding:5.25rem 1.5rem 2rem}.waste-item__icon{height:10.75rem;margin-bottom:2rem}.waste-item__title{font-size:1.5rem;margin-bottom:.6875rem}.waste-item__descr{font-size:1.1875rem}.waste-item__type{font-size:1.1875rem}.waste-item__sign{font-size:1.375rem}.waste-item--large .waste-item__title{font-size:2.125rem}.waste-item--non{padding-bottom:1.25rem;padding-top:6.875rem}.waste-item--non .waste-item__title{font-size:1.6875rem}.waste-item--non .waste-item__descr{font-size:1.1875rem}.press-contacts{margin-bottom:4rem;padding-bottom:5rem;row-gap:3.5rem}.press-contacts-item{-moz-column-gap:1.25rem;column-gap:1.25rem;font-size:1.375rem;grid-template-columns:3.125rem auto}.press-contacts-item__icon .icon{height:3.125rem;width:3.125rem}.hotline{font-size:1.25rem;margin-bottom:5.375rem;max-width:48.75rem}.hotline-heading{font-size:2rem;margin-bottom:1.625rem}.hotline-number{font-size:2.25rem;margin-bottom:1.25rem}.company-contacts{margin-bottom:5.375rem}.company-contacts-item{font-size:1.25rem;row-gap:1.4375rem;width:15rem}.company-contacts-item__icon .icon{height:2.375rem;width:2.375rem}.contacts-map{height:29.625rem;margin:0 -4.375rem 8.75rem}.feedback-heading{font-size:1.875rem;margin-bottom:1.75rem}.feedback-form .form-row{margin-bottom:1.125rem}.feedback-form .form-control,.feedback-form .form-select{border-radius:.9375rem;font-size:1.1875rem;padding:.75rem 1.875rem}.feedback-form textarea.form-control{height:9.125rem}.feedback-form .form-check{font-size:1.25rem;margin-top:1.25rem}.feedback-form .form-check-input{border-radius:.3125rem}.feedback-form .form-check-label{font-size:1.1875rem}.feedback-form .form-submit{margin-top:2.625rem}.feedback-form .form-submit .btn{--bs-btn-font-size:1.375rem;--bs-btn-border-radius:0.625rem;min-height:3.6875rem}}@media (max-width:999.98px){.navbar::before{background-color:#fff;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:all .35s cubic-bezier(.16, 1, .3, 1);visibility:hidden;width:100%}.is-menu-open .navbar::before,.is-scrolled .navbar::before{opacity:1;visibility:visible}.is-menu-open .navbar,.is-scrolled .navbar{color:#5fb9bd}.navbar-brand{position:relative;z-index:1031}.is-menu-open .navbar-brand svg,.is-scrolled .navbar-brand svg{fill:#5fb9bd}.navbar-collapse{background-color:#fff;height:100vh!important;height:calc(var(--vh,1vh) * 100)!important;overflow-y:auto;padding-top:5rem;position:absolute;left:0;top:0;width:100vw;z-index:90}.navbar-collapse:not(.show){opacity:0;transform:translateY(-1.25rem);visibility:hidden}.navbar-nav{padding:1.875rem calc(50vw - 21.875rem)}.navbar-nav>.nav-item+.nav-item{margin-top:1rem}.navbar-nav>.nav-item>.nav-link{font-size:1.125rem;font-weight:700}.navbar-subnav{border:1px solid #eaebef;border-radius:.625rem;margin-top:.75rem;padding:.8125rem 1.125rem}.navbar-subsubnav{padding-right:2.5rem}.navbar-side{align-items:center;-moz-column-gap:1rem;column-gap:1rem;display:flex}.activity-item__name{margin-bottom:.5rem;padding-right:3.5rem}.activity-item__body{padding-right:1.875rem}.activity-item:first-child .activity-item__name{padding-right:7.875rem}.activity-item:first-child .activity-item__body{padding-right:1.875rem}.activity-item:nth-child(2) .activity-item__name{padding-right:8.5rem}.activity-item:nth-child(2) .activity-item__body{padding-right:6.875rem}.activity-item:nth-child(4){padding-right:6.875rem}.activity-item:nth-child(5){padding-right:6.875rem}.news-slide{height:18.75rem}.news-slide__main{border-radius:.875rem;box-shadow:.0625rem .125rem 1rem rgba(0,0,0,.16)}.news-slide__image{flex-grow:1}.news-slide__body{padding:1rem .75rem .625rem}.news-slide__tags{left:0;padding:.625rem 2.875rem 0 .625rem;position:absolute;top:0;width:100%;z-index:2}.bells-data-item__cell--year{grid-column:1/5}}@media (max-width:767.98px){.section-title{margin-right:-.625rem}.article{--article-offset-x:1.5rem}.article-image--triple img{border-radius:.3125rem}.navbar-collapse{padding-top:3.125rem}.navbar-nav{padding-inline:calc(50vw - 16.875rem)}.navbar-side{-moz-column-gap:0.625rem;column-gap:.625rem}.navbar-search .search-form .form-control{padding:.3125rem 2.25rem .3125rem .625rem}.footer-cell--logos{padding-block:1.375rem}.footer-cell--search{padding-bottom:1.75rem;padding-top:1.5625rem}.footer-contacts{margin-bottom:1.125rem}.activity-item{justify-content:center}.section--gallery .section-title{margin-bottom:.75rem}.gallery-nav{background-color:#fff;border-radius:50rem;box-shadow:.0625rem .0625rem .5rem rgba(0,0,0,.16);padding:.5rem 1rem}.apply-info-cell{text-align:center}.apply-info-cell:nth-child(2){border-top:1px solid #c1c4c7;margin-top:1.5rem;padding-top:1.75rem}.apply-info-cell__marks{justify-content:center}.areas-item--operator .areas-item__content{margin-bottom:1.375rem}.areas-item--operator .areas-item__button{align-items:center;-moz-column-gap:0.625rem;column-gap:.625rem;display:flex;justify-content:center}.activity-contacts{flex-direction:column;row-gap:4.125rem}.activity-contact__body{padding-inline:1.875rem}.bells-data-item__cell--year{grid-column:1/3}.bells-data-item__cell--value{min-height:7rem}.bells-section--image .bells-image{margin-top:1.25rem}.bells-contacts{border-radius:.75rem;box-shadow:.0625rem .09375rem .625rem rgba(0,0,0,.1)}.divisions-item{border:1px solid #c1c4c7;border-radius:1.25rem;display:flex;flex-direction:column-reverse}.divisions-item__image{margin:0 -1px -1px}.vacancies-single__contacts{margin-bottom:1.625rem}.article-games-seats{max-width:18.5rem}#envpolicy-tabs .nav-link{font-size:.6875rem;padding-inline:1em}.docs-sections--records .docs-list .nav-link{font-size:.5625rem;height:1.75rem}.docs-sections--more .docs-list .nav-link{font-size:.625rem;height:1.875rem}.corruption-contacts{flex-direction:column}.corruption-contacts-item:not(:first-child){margin-top:1.625rem;padding-top:1.25rem}.corruption-contacts-item:not(:first-child)::before{border-top:1px solid #c1c4c7;left:.9375rem;right:.9375rem}.corruption-contacts-item__body .link-tag{font-size:.875rem;padding-inline:0.7em}.press-tabs .nav-link{font-size:.6875rem;padding-inline:1em}.press-news-item{display:grid;gap:2.125rem;grid-template-columns:100%}.press-news-item__image{height:18.9375rem}.press-news-item__lead{border-top:1px solid #c1c4c7;padding-top:1rem}.press-news-item__more{font-weight:700}.press-gallery{margin-inline:-1.25rem;overflow:hidden}.press-gallery .swiper{overflow:visible}.press-gallery .swiper-slide{width:16.125rem}.press-gallery .swiper-slide:not(.swiper-slide-active) a{pointer-events:none}.education-event__body{border:1px solid #c1c4c7;border-radius:1.25rem}.education-event__image{margin-inline:-1.25rem}#education-tips .education-accordion-item:not(:first-child){margin-top:1.625rem}.company-contacts{flex-direction:column;margin:0 auto 2.25rem;max-width:11.25rem;row-gap:1.75rem}}@media (max-width:575.98px){.navbar .container{padding-inline:1.125rem}.navbar-nav{padding-inline:1.125rem}.section--hero>.container{padding-inline:1.125rem}.hero-title{margin-inline:auto;max-width:20.25rem;text-align:center}.hero-apply{text-align:center}.hero-containers{justify-content:center}.bells-marking-signs{margin-inline:auto;max-width:17.625rem}}@media (max-width:399.98px){.article blockquote{margin-inline:calc(-1 * var(--article-offset-x))}.article-image{margin-inline:calc(-1 * var(--article-offset-x))}.article-games{margin-inline:calc(-1 * var(--article-offset-x))}}@media (max-width:359.98px){html{font-size:min(4.4444444444vw, 2.3988005997vh);font-size:min(4.4444444444vw, calc(var(--vh, 1vh) * 2.3988005997))}}@media (min-width:1000px) and (max-width:2999.98px){.gallery-header{margin-bottom:1.62rem}}@media (min-width:768px) and (max-width:999.98px){.gallery-nav{margin-bottom:-.6875rem}}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}@media (prefers-reduced-motion:reduce){.form-control{transition:none}.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}.form-select{transition:none}.btn{transition:none}.fade{transition:none}.collapsing{transition:none}.collapsing.collapse-horizontal{transition:none}.modal.fade .modal-dialog{transition:none}a,button{transition:none}.hero-arrows span{animation:none;opacity:.85}}body{background-color:#646d42}@media (max-width:575.98px){.facts-item{height:auto;min-height:9.8125rem;padding:.75rem .6875rem;row-gap:.5rem}.facts-item__icon{display:flex;height:1.5rem;justify-content:center}.facts-item__icon img{height:100%;width:auto}.news-slide__date{font-size:.75rem}.news-slide__excerpt{font-size:.875rem;line-height:1.35}.news-slide__more .btn{--bs-btn-font-size:0.8125rem}.news-slide__tags .tag{font-size:.6875rem;padding:.3rem .7rem}.facts-item--large .facts-item__text,.facts-item__text{font-size:.6875rem;line-height:1.3}.activity-item__name{font-size:1rem}.activity-item__container{max-width:66%;padding-right:.5rem}.activity-item__image{max-width:30%}.activity-item__descr{font-size:.8125rem;line-height:1.35}.activity-item__more .link-more{font-size:.8125rem}.footer-contacts,.footer-nav>.nav-item>.nav-link,.footer-subnav>.nav-item>.nav-link{font-size:.875rem}}:root{--etp-text:0.875rem;--etp-title:1rem;--etp-note:0.8125rem;--etp-accent:1.25rem}@media (min-width:768px){:root{--etp-text:0.9375rem;--etp-title:1.0625rem;--etp-note:0.875rem;--etp-accent:1.375rem}}@media (min-width:1000px){:root{--etp-text:1.125rem;--etp-title:1.3125rem;--etp-note:1rem;--etp-accent:1.75rem}}@media (min-width:3000px){:root{--etp-text:1.5625rem;--etp-title:1.75rem;--etp-note:1.375rem;--etp-accent:2.25rem}}.error-page__code{color:var(--bs-primary);font-size:3rem;font-weight:700;line-height:1;margin-bottom:.5rem}@media (min-width:768px){.error-page__code{font-size:4rem}}@media (min-width:1000px){.error-page__code{font-size:4.5rem}}@media (min-width:3000px){.error-page__code{font-size:5.5rem}}.docs-list--auto .nav-item{width:auto}.contracts-districts{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;font-size:var(--etp-text);line-height:1.3;margin-bottom:1.875rem}.contracts-districts-item+.contracts-districts-item{border-top:1px solid #e3e6e8}.contracts-districts-item__header .accordion-button{align-items:center;color:#1f2933;display:flex;font-size:var(--etp-title);font-weight:500;gap:.625rem;justify-content:space-between;padding:.9375rem 1.125rem}.contracts-districts-item__header .accordion-button .icon{color:#5fb9bd;flex:none;height:.34em;transform:rotate(180deg);transition:transform .2s ease;width:.5em}.contracts-districts-item__header .accordion-button.collapsed .icon{transform:rotate(0)}.contracts-districts-item .accordion-body{padding:0 1.125rem 1.125rem}.contracts-address-list{display:flex;flex-wrap:wrap;column-gap:1.5rem;row-gap:.5rem;list-style:none;margin-bottom:0;padding-left:0}.contracts-address-list>li{padding-left:.8em;position:relative}.contracts-address-list>li::before{background-color:#5fb9bd;border-radius:50%;content:"";height:.32em;inset-block-start:0.65em;inset-inline-start:0;position:absolute;transform:translateY(-50%);width:.32em}.contracts-registry{display:flex;justify-content:center;padding:1.5rem 0 2.5rem}.contracts-registry .btn{align-items:center;display:inline-flex;border-radius:.25rem;gap:.75rem;max-width:24rem;padding:.9375rem 1.5rem;text-align:left}.contracts-registry .icon{flex:none}.contracts-registry .btn span{flex:1 1 auto;min-width:0;text-wrap:balance;white-space:normal}.regop-intro{font-size:var(--etp-text);line-height:1.4;margin-bottom:1.5rem;text-align:center}.regop-card{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;font-size:var(--etp-text);line-height:1.45;margin-bottom:1.5rem;padding:1.25rem 1.5rem}.regop-card__row+.regop-card__row{border-top:1px solid #e3e6e8;margin-top:1rem;padding-top:1rem}.regop-card a:not(.nav-link){color:#5fb9bd}.regop-tariff{align-items:flex-start;display:flex;gap:1.5rem}.regop-tariff__icon{border:1px solid #5fb9bd;border-radius:.375rem;color:#5fb9bd;flex:none;padding:.75rem}.regop-departments{display:grid;gap:1.125rem;grid-template-columns:repeat(3,1fr);margin-bottom:1.875rem}.regop-departments-item{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;display:flex;flex-direction:column;font-size:var(--etp-text);line-height:1.45;padding:1.125rem}.regop-departments-item__title{font-size:var(--etp-title);font-weight:700;margin-bottom:.75rem}.regop-departments-item__address{margin-bottom:.75rem}.regop-departments-item__more{margin-block-start:auto}.regop-system{margin-bottom:1.875rem}.regop-system img{border-radius:.375rem;height:auto;width:100%}.regop-heading{font-size:var(--etp-title);font-weight:700;margin-bottom:1.125rem}.regop-docs-item+.regop-docs-item{border-top:1px solid #e3e6e8;margin-top:1rem;padding-top:1rem}.regop-docs-item__title{font-size:var(--etp-text);line-height:1.45;margin-bottom:.75rem}.regop-docs-item__note{font-size:var(--etp-note);line-height:1.45;margin-bottom:.75rem}.regop-docs-item .docs-list{margin-bottom:0}@media (max-width:767.98px){.regop-departments{grid-template-columns:1fr}.regop-tariff{gap:.875rem}}.laws-list .nav-link{font-size:var(--etp-text)}.eco-quote{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;font-size:var(--etp-text);line-height:1.45;margin-bottom:1.125rem;padding:1.25rem 4rem 1.25rem 1.5rem;position:relative}.eco-quote__mark{color:#5fb9bd;font-size:3rem;font-weight:700;line-height:.6;inset-block-start:1rem;inset-inline-end:1.25rem;position:absolute}.eco-photo{border-radius:.375rem;margin-bottom:1.125rem;overflow:hidden}.eco-photo img{display:block;height:auto;width:100%}.eco-schedule{display:grid;gap:1.125rem;grid-template-columns:1.4fr 1fr;margin-bottom:1.125rem}.eco-schedule-item{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;font-size:var(--etp-text);font-weight:500;line-height:1.45;padding:1.125rem 1.25rem;text-align:center}.eco-schedule-item strong{color:#5fb9bd}.eco-address{align-items:center;background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;display:flex;font-size:var(--etp-text);gap:1rem;line-height:1.45;margin-bottom:1.125rem;padding:1.125rem 1.25rem}.eco-address .icon{color:#5fb9bd;flex:none}.eco-address__link{color:#5fb9bd}.eco-intro{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;font-size:var(--etp-text);line-height:1.45;margin-bottom:1.5rem;padding:1.25rem 1.5rem}.eco-intro p+p{margin-block-start:1rem}.eco-intro p{margin-bottom:0}.eco-rules-heading{font-size:var(--etp-title);font-weight:700;margin-bottom:1.125rem}.eco-poster{display:block;height:auto;margin:0 auto;max-width:22rem;width:100%}.eco-slider{margin:0 auto;max-width:26rem;position:relative}.eco-slider .swiper-slide{display:flex;justify-content:center}.eco-slider__nav{align-items:center;background:0 0;border:none;color:#5fb9bd;display:flex;inset-block-start:50%;padding:.5rem;position:absolute;transform:translateY(-50%);z-index:2}.eco-slider__nav--prev{inset-inline-start:-2rem;transform:translateY(-50%) rotate(90deg)}.eco-slider__nav--next{inset-inline-end:-2rem;transform:translateY(-50%) rotate(-90deg)}.eco-news{display:grid;gap:1.125rem;grid-template-columns:repeat(2,1fr);margin-bottom:1.875rem}.eco-news-item{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;display:flex;flex-direction:column;font-size:var(--etp-text);line-height:1.45;padding:1.25rem 1.5rem}.eco-news-item__title{font-size:var(--etp-title);font-weight:700;margin-bottom:.75rem}.eco-calendar{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;margin-bottom:1.5rem;padding:1.25rem 1.5rem}.eco-calendar__month{font-size:var(--etp-title);font-weight:500;margin-bottom:1rem;text-align:center}.eco-calendar__grid{display:grid;gap:.5rem;grid-template-columns:repeat(7,1fr);text-align:center}.eco-calendar__weekday{font-size:var(--etp-text);font-weight:700;padding-block-end:0.25rem}.eco-calendar__day{border-radius:.25rem;font-size:var(--etp-text);padding:.375rem 0}.eco-calendar__day--event{background-color:#a1c778;font-weight:700}.eco-events{display:grid;gap:1.125rem;grid-template-columns:repeat(2,1fr);margin-bottom:1.875rem}.eco-events-item{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;display:flex;flex-direction:column;font-size:var(--etp-text);line-height:1.45;padding:1.25rem 1.5rem}.eco-events-item__title{font-size:var(--etp-title);font-weight:700;margin-bottom:.5rem}.eco-events-item__time{color:#5fb9bd;font-size:var(--etp-accent);font-weight:700;line-height:1.1;margin-bottom:.5rem}.eco-events-item__meta{margin-bottom:.75rem}.eco-events-item__more{margin-block-start:auto}@media (max-width:767.98px){.eco-events,.eco-news,.eco-schedule{grid-template-columns:1fr}.eco-slider__nav--prev{inset-inline-start:-0.5rem}.eco-slider__nav--next{inset-inline-end:-0.5rem}}.logos-grid{display:grid;gap:1.125rem;grid-template-columns:repeat(2,1fr);margin-bottom:1.5rem}.logos-item{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;padding:1.25rem 1.5rem}.logos-item__preview{align-items:center;border-radius:.25rem;display:flex;justify-content:center;margin-bottom:1rem;min-height:6rem;padding:1rem}.logos-item__preview--light{background-color:#f4f5f2}.logos-item__preview img{height:auto;max-width:100%}.logos-item__title{font-size:var(--etp-text);font-weight:500;margin-bottom:.75rem}.logos-note{font-size:var(--etp-note);line-height:1.45}@media (max-width:767.98px){.logos-grid{grid-template-columns:1fr}}.press-news-item__date{color:#5a6572;font-size:var(--etp-note);margin-bottom:.5rem}.press-news-more{display:flex;justify-content:center;padding:1.5rem 0 .5rem}.news-tags-index{align-items:center;display:flex;flex-wrap:wrap;gap:.625rem;margin:1.25rem 0 .5rem}.news-tags-hint{color:#5a6572;font-size:var(--etp-text);margin:1rem 0}.press-news-more .btn{background-color:#5fb9bd;border:1px solid #5fb9bd;border-radius:2.5em;color:#fff;font-size:var(--etp-text);font-weight:700;padding:.5em 1.75em;transition:background-color .2s ease,border-color .2s ease}.press-news-more .btn:focus-visible,.press-news-more .btn:hover{background-color:#519da1;border-color:#519da1;color:#fff}.article-image{border-radius:.375rem;margin-bottom:1.25rem;overflow:hidden}.article-image img{display:block;height:auto;width:100%}.article-back{margin-block-start:1.5rem}/* ══ НАШИ ДОБАВЛЕНИЯ ПОВЕРХ main.css ПОДРЯДЧИКА ══════════════════════════
   Всё, что ниже этой строки, — точечные CSS-правки к самодельным страницам
   и блокам (см. DESIGN.md, раздел "Чего не делать"). kirby/tools/
   design_lint.py разбирает ИМЕННО эту область (ищет маркер по тексту) и
   гейтит через run_all.py: кегль внутри неё — только var(--etp-*) (кроме
   документированных исключений вроде .error-page__code), border-radius —
   только 0.375rem/0.25rem/2.5em, цвета — только из таблицы DESIGN.md плюс
   явно допущенные вендорские (см. design_lint.py). Правка B4-lint
   (2026-08-09): здесь же был найден и исправлен сам первый нарушитель —
   .role-select__label до этой правки собирал полный комплект: radius
   0.75rem (не из списка), градиент с color #b1cd79 (цвет не из таблицы),
   текст #2c2f33 (не из таблицы, вместо #1f2933) и вовсе без font-size
   (кегль не масштабировался). Ниже — уже исправленная версия. */
/* ── Т-zayavka-2026 (2026-08-09): новая 7-экранная форма заявки ──────────
   Минимальный добавочный блок в конце файла (см. ALLOWED FILES задачи —
   правка CSS должна быть точечной). Три вещи:
   1) .role-select — большие кнопки правового статуса (шапка формы) вместо
      выпадающего списка из ТЗ — прямое решение владельца ("сделай какие-то
      кнопки красивые", дизайна ещё нет). ИСПРАВЛЕНО (B4-lint, 2026-08-09):
      радиус приведён к карточному 0.375rem, цвет текста — к табличному
      #1f2933, кегль — к var(--etp-text), состояние "выбрано" — сплошная
      заливка #5fb9bd (как активная вкладка .content-tabs .nav-link.active),
      было — 0.75rem/#2c2f33/без масштабирования/градиент с чужим #b1cd79.
   2) .district-rows/.district-row/.district-add — вёрстка динамических
      строк округа (кнопка "+ Добавить округ").
   3) .form-file-drop.is-invalid .form-file-drop__zone — известная нехватка
      стиля, явно указанная в задаче (invalid-состояние зоны загрузки файла
      до сих пор ничего не красило, класс есть, а правила для него не было).
*/
.district-rows{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}
.district-row{display:flex;align-items:center;gap:.625rem}
.district-row .form-select{flex:1 1 auto}
.district-row__remove{flex:0 0 auto;white-space:nowrap}
.district-add{margin-bottom:.5rem}
.form-file-drop.is-invalid .form-file-drop__zone{border-color:var(--bs-form-invalid-border-color)}
/* Т-zayavka-2026: найдено живой проверкой в браузере — поле "Другое"
   (чекбоксы 5.3/5.5/6.1) и уточнение документа-подписанта (1.3) скрываются
   HTML-атрибутом [hidden] (JS переключает его по событию, см. докблоки
   eco_forms_v2_checkboxes()/apply-step-2.php), но у подрядчика .form-control/
   .col-12/.form-check уже задают собственный display с более высокой
   специфичностью, чем дефолтный [hidden]{display:none} браузера — поле
   было ВИДНО, хотя атрибут стоял. !important здесь оправдан: это
   единственная универсальная точка, перекрывающая ЛЮБОЙ будущий wrapper-
   класс подрядчика без необходимости перечислять комбинации. */
[hidden]{display:none!important}
.form-checklist .form-check+.form-check{margin-top:.375rem}
.form-static-value{margin:0;color:#1f2933;font-weight:700}
[data-eco-yesno-toggle] .form-control:disabled,[data-eco-yesno-toggle] .form-select:disabled{background-color:#f4f5f2;color:#5a6572;cursor:not-allowed}
.form-checklist--scroll{border:1px solid #e3e6e8;border-radius:.375rem;padding:.75rem 1rem}
fieldset.is-invalid .form-checklist--scroll{border-color:var(--bs-form-invalid-border-color)}
/* Ш2 (задача "карта колоколов", 2026-08-09): минимальный докинутый блок в конце файла, только то, без чего нельзя было обойтись существующими классами.
   1) .bells-map-full — контейнер новой карты 455 точек (about-bells.php, вкладка "Карта размещения"). НЕ переиспользует существующий .bells-locations-map,
      хотя визуально нужен ровно тот же бокс (фон/рамка/высота на 4 брейкпоинтах) — под селектором .bells-locations-map в main.min.js уже висит чужой,
      несовместимый с задачей код (12 точек зашиты в JS, без кластеризации/фильтра), трогать main.min.js вне зоны этой правки нельзя. Поэтому здесь —
      новый класс с теми же значениями, что и у .bells-locations-map (см. правила там же в этом файле), чтобы визуально ничего не поменялось. */
.bells-map-full{background-color:#f3f3f1;border-bottom:1px solid #eaebef;border-top:1px solid #eaebef;height:22.375rem;margin:0 -1.125rem 1.25rem}
@media (min-width:768px){.bells-map-full{height:29.175rem;margin:0 -1.875rem 1.5rem}}
@media (min-width:1000px){.bells-map-full{height:35.01rem;margin:0 -3.125rem 1.8rem}}
@media (min-width:3000px){.bells-map-full{height:48.625rem;margin:0 -4.375rem 2.5rem}}
/* 2) .bells-map-reset — кнопка "Показать все округа на карте" поверх существующего .link-tag/.link-tag--primary (уже даёт форму/цвет/фон),
      добросить нужно только базовый сброс браузерных стилей <button> (у существующего класса они не нужны — везде до этого использовался на <a>). */
.bells-map-reset{appearance:none;-webkit-appearance:none;border:none;cursor:pointer;font-family:inherit;margin:0 0 1.5rem}
/* 3) .bells-locations-item__row--compact БОЛЬШЕ НЕ ИСПОЛЬЗУЕТСЯ (правка клиента 24.08.2026: «таблица кривая… у некоторых строк нет количества»).
      Правило схлопывало строку без количества до двух колонок; на 37 строках из 455, где в файле заказчика пусты «Место» и «Количество», это
      выбивало их из общей сетки — адрес заезжал на столбец количества, а сам столбец пропадал. Теперь шаблон печатает три колонки всегда, пустую
      ячейку — прочерком (templates/about-bells.php, там же почему число не домысливается). Класс оставлен в файле, чтобы правка была обратимой
      одной строкой в шаблоне; новый разметке он не выдаётся. */
.bells-locations-item__row--compact{grid-template-columns:12% auto}
/* Б4-lint (2026-08-09): страницы без макета подрядчика (search.php,
   error.php) приведены к дизайн-коду — см. DESIGN.md и докблоки шаблонов.
   1) .press-news-item__body:only-child — карточка результата поиска БЕЗ
      обложки (см. search.php: <div class="press-news-item__image"> рисуется
      только когда есть $cover, у press-news.php/press-news-tag.php обложка
      обязательна, а у search.php — нет: попадаются страницы вообще без
      cover()). Без картинки .press-news-item__body остаётся единственным
      flex-ребёнком, а flex-grow по умолчанию 0 — тело карточки не
      растягивалось на всю ширину, из-за border-radius/border самой
      .press-news-item получалась пустая рамка справа от короткого текста
      (жалоба владельца "карточка болтается в пустой рамке"). С картинкой
      этот селектор не совпадает (тогда у .press-news-item два ребёнка) —
      их раскладка не меняется.
   2) .error-page__links — доп. ссылки на 404 (см. error.php) не имели
      вообще никакого font-size (наследовали немасштабируемый браузерный
      дефолт) — заголовочный список второстепенных разделов, роль та же,
      что у дат/сносок в таблице DESIGN.md, — var(--etp-note) + приглушённый
      цвет. */
.press-news-item__body:only-child{flex:1 1 auto}
.error-page__links{color:#5a6572;font-size:var(--etp-note)}
/* Б5-news-ratio (2026-08-09, задача координатора "фото в карточках новостей
   не во весь блок"): у подрядчика место под фото в карусели новостей на
   главной (.news-slide__image) — квадрат 285×285 на каждом брейкпоинте
   (было: 9.5rem/12.825rem/17.8125rem — на самих брейкпоинтах см. правила
   выше по файлу, здесь их не трогаем, а перекрываем), а
   .news-slide__image img — object-fit:contain. Реальные обложки новостей
   (проверено по факту: все 292 файла обложек новостей, cover.webp в
   каждой папке press-news — звёздочку со слэшем в пути тут писать
   НЕЛЬЗЯ: она закрывает комментарий, и следующие 20 строк прозы
   браузер разбирает как CSS, съедая ближайшее правило)
   — 1140×640, это НЕ квадрат. Contain в квадратной рамке оставлял пустую
   белую полосу сверху/снизу (~44% высоты) — на белом фоне карточки не
   видна как отдельный "блок", читается как недогрузившаяся картинка
   (жалоба владельца). Раньше уже пробовали cover в такой же квадратной
   рамке — получалась обрезка по бокам, тоже забраковано (см. историю
   задачи). Правильная правка — не менять СПОСОБ вписывания вместо другого,
   а привести САМУ РАМКУ к пропорции фото: aspect-ratio:1140/640 вместо
   фиксированной высоты (одно правило перекрывает высоту на всех
   брейкпоинтах разом, брейкпоинты продолжают задавать только ширину через
   .news-slide — её не трогаем). object-fit меняем на cover (как у
   .press-news-item__image img в списке новостей — тот же приём, не
   изобретаем новый) — при точном совпадении пропорции cover не обрезает
   НИЧЕГО (кроме долей пикселя от округления), а на случай нетиповой
   обложки в будущем не даёт снова просесть в пустые поля. flex-grow:0 и
   .news-slide{height:auto} — снимают мобильный (<1000px) особый случай
   .news-slide__image{flex-grow:1}/.news-slide{height:18.75rem}, который
   растягивал рамку под остаток высоты слайдера независимо от контента:
   без этого aspect-ratio на мобильном брейкпоинте просто переопределяли бы
   поверх ещё и flex-grow, результат остался бы непредсказуемым. Сетку
   карусели (сколько слайдов в ряд) это не трогает — она считается по
   ширине .news-slide, её брейкпоинты не менялись. */
.news-slide{height:auto}
.news-slide__image{height:auto;flex-grow:0;aspect-ratio:1140/640}
/* ПОЧЕМУ height:auto важен (правило выше, дубль убран 13.08.2026 после
   починки комментария). Пока заголовки новостей рисовались кеглем
   .625rem (11px), контент помещался в жёсткие 18.75rem; после возврата
   кегля в шкалу карточке нужно 363px против 338, а .news-slide__main
   режет лишнее по overflow:hidden — у заголовка отрезало последнюю
   строку (правка клиента «новости режутся»). Подбирать высоту «с
   запасом» бессмысленно: длина заголовка произвольная. Карточки не
   разъезжаются — слайды лежат во flex-контейнере .swiper-wrapper с
   align-items:stretch. */
.news-slide__image img{object-fit:cover}
/* Формы обратной связи (задача "формы обратной связи", 2026-08-09/10,
   /scratchpad/formy-os-tz.md) — три новых переиспользуемых куска, общих
   для всех пяти форм (см. site/plugins/eco-forms/feedback.php):
   1) .char-counter — счётчик "N / 300" под textarea сообщения (ТЗ: везде
      "Поле сообщения везде со счётчиком 0/300"). Роль та же, что у
      сносок/примечаний в таблице DESIGN.md — var(--etp-note) + приглушённый
      цвет #5a6572, без рамки/фона, чтобы не спорить с .invalid-feedback
      рядом (обе строки читаются как единый блок пояснений под полем).
   2) .form-hint — подсказка под полем "Количество человек" на экскурсию
      (форма 3, лимит "не более N человек" зависит от выбранного экоцентра,
      см. data-eco-hint-* в regop-ecocenter.php) — тот же приём, что у
      .char-counter (сноска), просто другое место/назначение.
   3) (удалено 28.08.2026 — см. ниже, разметка .participant-rows/
      .participant-row/.participant-add/.participant-row__remove убрана
      правкой клиента: заявка на мероприятие теперь на одно место, а не
      на группу). */
.char-counter{margin-top:.25rem;color:#5a6572;font-size:var(--etp-note);text-align:right}
.form-hint{margin-top:.25rem;color:#5a6572;font-size:var(--etp-note)}.form-hint--end{text-align:right}.form-row p.form-hint--end{max-width:none}
/* .participant-rows/.participant-row/.participant-row__remove/.participant-add
   удалены 28.08.2026 — разметка убрана правкой клиента про одно место на
   заявку (templates/regop-ecocenter.php больше не рендерит эти классы). */
/* Мероприятие без свободных мест (правка клиента 19.08.2026, п.14) — пункт
   селекта остаётся видимым (не continue), но disabled и красным, тем же
   цветом, что у остальных ошибок формы (--bs-form-invalid-color). */
#registration-event option:disabled{color:var(--bs-form-invalid-color)}
/* Дополнительные поля постоянного мероприятия/экскурсии (п.13) — тот же
   вертикальный ритм, что у соседних .form-row, без лишней рамки вокруг
   блока целиком (это просто группа, не карточка). */
.registration-excursion-fields .form-row:last-child{margin-bottom:0}
/* Дата + время экскурсии — два поля в ряд (правка 19.08.2026: свободный
   текст заменён на структурированный ввод). На узких экранах — в столбик,
   иначе поля 10 и 5 символов внутри узкой карточки становятся тесными. */
.form-row--split{display:flex;gap:.75rem}
.form-row--split > div{flex:1 1 0}
@media (max-width:479px){
    .form-row--split{flex-direction:column;gap:0}
    .form-row--split > div{margin-bottom:.625rem}
    .form-row--split > div:last-child{margin-bottom:0}
}
/* Б6-lint (2026-08-10): .eco-captcha-notice — сноска SmartCaptcha
   (eco_captcha_notice(), site/plugins/eco-captcha/index.php), класс в
   разметке уже был, но без CSS-правила рендерился немасштабируемым
   дефолтом браузера — та же роль, что у дат/сносок в DESIGN.md, приём
   как у .error-page__links/.press-news-item__date, класс не изобретаем. */
.eco-captcha-notice{color:#5a6572;font-size:var(--etp-note)}
/* Т-direct-contracts (2026-08-09/10, перенос ~2100 PDF-объявлений жителям
   со старого сайта eco-pro.ru/direct-contracts/ на regop-contracts.php):
   адрес с документом — ссылка внутри .contracts-address-list, красится тем
   же приёмом, что и .regop-card a:not(.nav-link) выше (бирюзовый текст,
   см. DESIGN.md «Цвет»); адрес без документа остаётся обычным текстом.
   .contracts-search — компактное поле живого поиска над каждым аккордеоном
   округов (не на всю ширину контента — иначе на 1440px инпут визуально
   спорит с самим списком адресов), .news-tags-hint под ним уже определён
   выше (страница поиска) и переиспользуется для "Найдено адресов: N" /
   "Ничего не найдено", как есть, без нового класса. */
.contracts-address-list a{color:#5fb9bd}
.contracts-address-list a:hover{color:#519da1}
.contracts-search{margin-bottom:1.25rem;max-width:26rem}
.article-quote{font-size:var(--etp-text)}
/* Кнопка «Показать все округа на карте» на /bells/ (правка клиента 2026-08-10:
   "кнопка вообще не по гайду, она какая-то мелкая"). Раньше это был .link-tag —
   чип 12px, размер тега, а не кнопки. Приводим к единственному в проекте
   эталону крупной кнопки-действия — "Показать ещё" в ленте новостей
   (.press-news-more .btn, DESIGN.md «Скругления»: пилюля 2.5em): бирюза,
   700 начертание, кегль основного текста. Стили дублируем, а не расширяем
   .press-news-more — тот класс про раскладку ленты новостей, к карте
   отношения не имеет. */
.bells-map-reset{background-color:#5fb9bd;border:1px solid #5fb9bd;border-radius:2.5em;color:#fff;font-size:var(--etp-text);font-weight:700;padding:.5em 1.75em;transition:background-color .2s ease,border-color .2s ease}
.bells-map-reset:focus-visible,.bells-map-reset:hover{background-color:#519da1;border-color:#519da1;color:#fff}

/* Плашка периода в статистике /bells/ (правка 2026-08-10: со старого сайта
   перенесены все 7 периодов, включая «За 6 месяцев 2026 года»). В исходной
   вёрстке подрядчика у плашки стоял text-wrap:nowrap — он рассчитан на
   короткое «За 2021 год», а длинная подпись просто обрезалась по краю
   плитки. Разрешаем перенос: balance делит строку по смыслу, короткие
   подписи как были остаются в одну строку. */
.bells-data-item__cell--year{text-wrap:balance;white-space:normal}

/* Выпадающие списки в формах (правка клиента 2026-08-10: «все поля должны
   быть одинаковые по высоте, закругление углов одинаковое»). Кегль, паддинги
   и радиус селектам НЕ дублируем — вместо этого .form-select добавлен прямо
   в правила .feedback-form .form-control выше, чтобы значение жило в одном
   месте. Здесь остаётся только то, что у селекта своё: место справа под
   стрелку. Кнопка отправки — пилюля 2.5em, как остальные крупные кнопки
   сайта (DESIGN.md, раздел «Скругления»); раньше у неё был свой радиус,
   не совпадавший ни с полями, ни с кнопками. */
.feedback-form .form-select{padding-right:3.5rem}
.feedback-form .btn{border-radius:2.5em}

/* Кнопка «Показать ещё» в новостях экоцентра (правка 2026-08-10) — тот же
   вид, что у одноимённой кнопки в ленте новостей (.press-news-more .btn):
   бирюзовая пилюля, 700 начертание. Отдельный класс, потому что .press-news-more
   задаёт ещё и раскладку ленты. */
.eco-news-more{display:flex;justify-content:center;padding:1.5rem 0 .5rem}
.eco-news-more .btn{background-color:#5fb9bd;border:1px solid #5fb9bd;border-radius:2.5em;color:#fff;font-size:var(--etp-text);font-weight:700;padding:.5em 1.75em;transition:background-color .2s ease,border-color .2s ease}
.eco-news-more .btn:focus-visible,.eco-news-more .btn:hover{background-color:#519da1;border-color:#519da1;color:#fff}

/* Карточка мероприятия: кнопка «Записаться» и форма записи под ней
   (правка 2026-08-10 — форма переехала из общего блока внутрь карточки).
   Кнопка живёт вне .feedback-form, поэтому её не достают формные правила —
   равняем на тот же эталон крупной кнопки-действия, что «Показать ещё». */
.eco-events-item__signup{margin-top:1rem}
.eco-events-item__signup .btn{--bs-btn-padding-x:1.17em;--bs-btn-font-size:0.875rem;--bs-btn-font-weight:700;min-height:2.1875rem;background-color:#5fb9bd;border:1px solid #5fb9bd;border-radius:2.5em;color:#fff;transition:background-color .2s ease,border-color .2s ease}
@media (min-width:768px){.eco-events-item__signup .btn{--bs-btn-padding-x:1.5em;--bs-btn-font-size:0.8125rem;min-height:2.2125rem}}
@media (min-width:1000px){.eco-events-item__signup .btn{--bs-btn-font-size:1rem;min-height:2.655rem}}
@media (min-width:3000px){.eco-events-item__signup .btn{--bs-btn-font-size:1.375rem;min-height:3.6875rem}}
.eco-events-item__signup .btn:focus-visible,.eco-events-item__signup .btn:hover{background-color:#519da1;border-color:#519da1;color:#fff}
.eco-events-item__form{margin-top:1rem}
.eco-events-item__center{font-weight:600;margin-bottom:1rem}
.eco-events-item__done{color:#5fb9bd;font-weight:600;margin-top:1rem}

/* Подсказка-ошибка под полем (.invalid-feedback) в вёрстке подрядчика —
   розовая плашка, которая «выезжает из-под» поля: position:relative плюс
   z-index:-1 и отрицательный margin-top. Приём работает, только пока у
   родителя нет собственного фона. Формы записи переехали внутрь карточки
   мероприятия (белый фон, свой контекст наложения) — и плашка уезжала ЗА
   него: место занимала, а текста не было видно (правка клиента 2026-08-10
   «проверка полей перестала работать, уведомление не появляется красное»).
   Возвращаем её на слой контента. */
.eco-events-item__form .invalid-feedback{z-index:auto}

/* Воздух в формах (правка 2026-08-10 «отступы нормальные нужно везде
   сделать, больше воздуха»): согласие, примечание про SmartCaptcha и
   кнопка отправки шли встык — читались как один слипшийся блок. */
.feedback-form .form-check{margin-bottom:1rem}
.feedback-form .eco-captcha-notice{margin-bottom:0;margin-top:1rem}
.eco-events-item__form .form-row{margin-bottom:1.25rem}
/* .eco-events-item__form .participant-add удалено 28.08.2026 — та же причина, см. выше. */
.eco-events-item__center{margin-top:1.25rem}
.eco-events-item__form .form-check{margin-top:1.5rem}
.eco-events-item__form .eco-captcha-notice{margin-top:1rem}
/* Подсказка об ошибке у блока участников: bootstrap показывает
   .invalid-feedback только как СОСЕДА поля с .is-invalid, а поле участника
   лежит внутри .participant-row — соседства нет, поэтому шаблон вешает этот
   класс явно (правка 2026-08-10, ошибка «Укажите ФИО хотя бы одного
   участника» не показывалась вовсе). */
.invalid-feedback--shown{display:block}

/* Подсказка об ошибке под полем: в вёрстке подрядчика она набрана тем же
   кеглем, что и само поле, и с крупными паддингами — на форме записи это
   читалось как отдельный абзац размером с заголовок (правка клиента
   2026-08-10 «слишком крупно ошибка и криво сверстано»). Делаем её
   служебной подписью: кегль примечания, компактные поля. */
.invalid-feedback{font-size:var(--etp-note);padding-bottom:.5rem;padding-top:1.125rem;text-align:left}
@media (min-width:3000px){.invalid-feedback{padding-top:1.375rem}}

/* Плашка-щит «Политика обработки данных» Яндекс SmartCaptcha скрыта
   (правка клиента 2026-08-10). Сначала её просто чинили — виджет ставит
   плашку position:fixed и позиционирует через left, отчего правый край
   уезжал за границу окна и текст обрезался; вдобавок на странице с двумя
   формами появлялось ДВА щита подряд (по одному на виджет).
   Решение клиента: убрать совсем — информирование об обработке данных на
   сайте уже есть и никуда не девается, это абзац под каждой формой
   (eco_captcha_notice() в plugins/eco-captcha) со ссылкой на условия
   обработки данных сервисом SmartCaptcha. Сам виджет капчи и проверка
   этим не затрагиваются — прячется только декоративный щит. */
[class*="SmartCaptcha-Shield"]{display:none!important}

/* Плакаты «Правил приёма» на странице экоцентров (правка клиента
   2026-08-10, вторая итерация). Было: слайдер шириной 26rem и по одному
   плакату в кадре — текст памятки нечитаем, а на старом сайте
   (eco-pro.ru/environmental-education) плакаты идут по три в ряд.
   Теперь слайдер занимает всю ширину тела аккордеона, боковые отступы
   отданы стрелкам (раньше они наезжали на края крайних плакатов), а
   ширину плаката задаёт сам слайд, а не max-width картинки.
   Число плакатов в кадре задаёт Swiper (breakpoints в шаблоне
   templates/regop-ecocenter.php): 1 / 2 / 3. */
.eco-slider{max-width:100%;padding-inline:2rem}
.eco-slider .swiper-slide{align-items:flex-start;height:auto}
.eco-slider .eco-poster{max-width:100%}
.eco-slider__nav--prev{inset-inline-start:0}
.eco-slider__nav--next{inset-inline-end:0}

/* Плакат открывается во весь экран в лайтбоксе (glightbox, тот же, что в
   фотогалерее и в разделе «Экопросвещение») — правка клиента 2026-08-10
   «сделать превью, чтобы можно было раскрыть на весь экран, а то не
   видно». Курсор-лупа — единственная подсказка, что картинка кликабельна. */
.eco-poster-link{cursor:zoom-in;display:block}
.eco-poster-link .eco-poster{margin-inline:auto}

/* Одиночный плакат (категория без слайдера) шире: 22rem — это 352px, на
   такой ширине памятка формата A4 нечитаема («а то не видно», правка
   клиента 2026-08-10). Ширина тела аккордеона — 858px на десктопе, так
   что 34rem вписывается с запасом; полный размер по-прежнему по клику. */
.eco-poster{max-width:34rem}

/* Кнопки-плитки документов (.docs-list): цвет оставлен фирменный зелёный
   (--bs-secondary, решение клиента 2026-08-10 «зелёный — доп. цвет, беру
   его»), поправлены пропорции. Разбор был такой: на широких экранах
   вёрстка подрядчика разгоняла кнопку до кегля 1.3125rem и высоты 4rem —
   служебное «Скачать» набиралось почти тем же кеглем, что заголовок
   документа над ним, и 20 таких плашек перетягивали внимание с названий
   документов, ради которых страница и существует. Ступени ниже 1000px
   были соразмерны и не тронуты — правятся только две верхние.

   Высота осталась фиксированной (не padding): в списках БЕЗ модификатора
   --auto (/anti-corruption/, /countering-terrorism/) плитки стоят сеткой
   по четыре в ряд с подписями разной длины — на auto-высоте ряд поехал
   бы ступенькой. Горизонтальные поля добавлены в em, поэтому масштаб
   держится на всех брейкпоинтах. */
@media (min-width:1000px){
    .docs-list{align-items:stretch}
    .docs-list .nav-link{font-size:var(--etp-note);height:auto;min-height:2.375rem;padding-block:.35em;padding-inline:1em}
}
@media (min-width:3000px){
    .docs-list .nav-link{border-radius:.375rem;min-height:2.75rem}
}


/* Страница поиска /search/ — правки клиента 2026-08-10 (три из пяти
   пунктов, остальные — в шаблоне и плагине eco-search).

   1) .search-page-form — «форма и кнопка явно не подходят по дизайну, они
      должны быть больше, кнопка закруглённая как и везде». Кегль и
      паддинги поля НЕ дублируются здесь: форме в шаблоне добавлен
      класс-контекст .feedback-form (как у формы обратной связи на
      /contacts/), и поле берёт готовую системную шкалу
      .feedback-form .form-control по всем четырём брейкпоинтам, а
      кнопка — пилюлю .feedback-form .btn{border-radius:2.5em}. Здесь
      остаётся только то, чего в той шкале нет: раскладка строки
      (раньше жила инлайн-стилями в разметке) и размер самой кнопки —
      у .feedback-form он задан через .form-submit .btn, а этой обёртки
      тут нет (она несёт margin-top 2.25rem, который разорвал бы строку
      «поле + кнопка»). Рецепт кнопки — тот же, что у «Показать ещё»
      (.press-news-more .btn выше): те же цвета, тот же кегль
      var(--etp-text), та же пилюля.

   2) mark в выдаче — «вместо жёлтого выделения применить наши цвета,
      зелёный например». Жёлтый был браузерным дефолтом: <mark> в
      main.css не описан вовсе. Пара взята из таблицы DESIGN.md так,
      чтобы подсветка оставалась читаемой: заливка #afcf8c (светлый
      зелёный) + текст #1f2933 дают контраст 8.5:1 при норме WCAG AA
      4.5:1. Белый текст на основном зелёном #a1c778 (первое, что
      просится) не годится — там 1.9:1, текст под подсветкой пропал бы.
      Селектор ограничен контейнером выдачи (.press-news-grid): <mark>
      появляется только там, глобальное правило на тег трогало бы и
      чужой контент. */
.search-page-form{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem;max-width:34rem}
.search-page-form .form-control{flex:1 1 14rem}
.search-page-form .btn{background-color:#5fb9bd;border:1px solid #5fb9bd;color:#fff;font-size:var(--etp-text);font-weight:700;padding:.5em 1.75em;transition:background-color .2s ease,border-color .2s ease}
.search-page-form .btn:focus-visible,.search-page-form .btn:hover{background-color:#519da1;border-color:#519da1;color:#fff}
.press-news-grid mark{background-color:#afcf8c;border-radius:.25rem;color:#1f2933;padding:0 .15em}


/* Правки клиента 2026-08-10 по документу «Правки1.docx» и по замечаниям
   в переписке. Форма поиска адреса приведена к общей шкале полей не здесь,
   а классом-контекстом .feedback-form в templates/regop-contracts.php;
   цвет подменю — сменой модификатора в разметке (см. докблоки там). */

/* 1. Поле поиска адреса стало крупнее по шкале форм, но оставалось узким:
   26rem против ~54rem ширины карточки — одинокая короткая строка посреди
   пустоты. Даём запас, но не во всю карточку: поле принимает адрес в одну
   строку, растягивать его во всю ширину незачем. */
.contracts-search{max-width:34rem}

/* 2. СНЯТО 12.08.2026. Модификатор .contracts-districts--plain возвращал
   верхний отступ вкладке «Расторжение прямых договоров», которая
   притворялась аккордеоном без единой кнопки-заголовка. В переверстанном
   макете там просто ul.contracts-locations.contracts-locations--lg, и
   отступ даёт сам модификатор --lg (см. блок «Прямые договоры» в самом
   конце файла). Правило удалено, чтобы не оставлять мёртвый селектор. */

/* 3. Кнопка «Реестр многоквартирных домов» — единственное действие своей
   вкладки, но была набрана фиксированным кеглем 1rem с радиусом .25rem:
   на широком экране 16px рядом с заголовком в 50px читались как случайный
   мелкий элемент («не в дизайне, выглядит мелко и странно, нет
   закруглений»). Приводим к языку крупных кнопок сайта: пилюля 2.5em и
   кегль по шкале. Паддинги и иконка в em — масштабируются с кеглем.
   Цвет остаётся фирменный зелёный с тёмным текстом (контраст 10.96:1). */
.contracts-registry .btn{border-radius:2.5em;font-size:var(--etp-note);gap:.6em;max-width:32rem;padding:.7em 1.6em}
.contracts-registry .btn .icon{height:1.4em;width:1.4em}

/* 4. Фильтр по тегам в ленте новостей: до сетки новостей оставалось 8px
   при 60px сверху — чипы «прилипали» к карточкам и читались как их часть,
   а не как отдельный фильтр. Плюс кегль чипа (18px на широком экране) не
   попадал ни в одну ступень шкалы. Даём воздух снизу и ставим кегль на
   ступень «примечание» — чип остаётся младше вкладки над ним, но
   перестаёт быть мелким. Высота и поля в em, чтобы росли с кеглем. */
.news-tags-index{margin-bottom:1.75rem}
.news-tags-index .link-tag{font-size:var(--etp-note);min-height:2em;padding-inline:1.15em}

/* 5. Кнопка «читать» на /purchases/ стала зелёной (правка клиента), а
   компонент .link-tag красит текст белым — на #a1c778 это контраст
   1.92:1 при норме 4.5:1, надпись из четырёх букв на крупной плашке
   была бы нечитаемой. Тёмный из палитры даёт 7.7:1. Правило адресное:
   зелёный .link-tag в других местах (теги новостей, фасеты поиска)
   не затрагивается. */
.procurement-info .link-tag--secondary{color:#1f2933}

/* Блок мероприятия на /environmental-education/ (правка клиента 2026-08-10
   «с вёрсткой там какая-то жесть»). Причина одна на все симптомы: у блока
   не было НИ ОДНОГО медиазапроса — размеры зашиты из мобильного макета и
   не менялись до 1440. Замеры до правки на широком экране: заголовок
   мероприятия 14px и текст программы 14px при том, что обычный абзац
   сайта на этой ширине 25px, а заголовок блока 28px — карточка шириной
   1204px была набрана вдвое мельче окружающего текста.

   Плашки даты и места: белый по #c1bfbf давал контраст 1.83:1 при норме
   4.5:1 — худшая читаемость на странице. Берём серый из палитры (5.93:1).
   Правило адресное: тот же .data-item используется на /bells/ ещё в шести
   местах, туда не лезем.

   Двойная рамка: у .education-event уже есть своя граница, а .__head
   рисовал вторую поверх — шапка выглядела отдельной коробкой, а тело
   мероприятия — вывалившимся из неё. Плюс padding-top у шапки был 0, и
   заголовок стоял в 1px от рамки. */
.education-event__title{font-size:var(--etp-title)}
.education-event__content{font-size:var(--etp-text)}
.education-event__content h3{font-size:var(--etp-text);font-weight:700}
.education-event .data-item{background-color:#5a6572;font-size:var(--etp-note)}
.education-event__head{border:0;padding-top:1.25rem}

/* ── Карточки форматов эко-мероприятий (вкладка «Заявка», 2026-08-10) ────
   Перенос со старого сайта (eco-pro.ru/environmental-education/, секция
   #zayavka-na-eko-meropriyatiya): перед формой заявки встали три карточки
   «Уроки экограмотности / Экоквиз / Экскурсии» — картинка, название и три
   характеристики (возраст, количество, продолжительность).

   Почему всё-таки свой класс, а не готовый: сетка и рамка на странице
   есть (.education-materials-grid, .regop-departments-item), но карточки
   «картинка + заголовок + список характеристик» не было ни одной —
   .education-materials-item несёт под картинкой кнопку «скачать» и
   лайтбокс, .regop-departments-item картинку не предполагает вовсе.
   Поэтому сетка переиспользована как есть (.education-materials-grid
   рядом в разметке), а свой — только внутренний слой карточки.
   Токены — те же, что у .regop-departments-item: рамка #e3e6e8, радиус
   0.375rem, кегль var(--etp-text)/var(--etp-title), чтобы карточка не
   выбивалась из остальных карточек сайта.

   margin-block-start:auto у характеристик прижимает их к низу: названия
   форматов разной длины («Экскурсии в экоцентре» в одну строку, «Квиз
   „Разделяй и действуй“» в две), и без этого строки «Возраст:» в трёх
   соседних карточках не попадали друг напротив друга. */
.education-offer-item{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;display:flex;flex-direction:column;font-size:var(--etp-text);line-height:1.45;padding:1.125rem}
.education-offer-item__image{margin-bottom:1rem}
.education-offer-item__image img{border-radius:.375rem;display:block;height:auto;width:100%}
.education-offer-item__title{font-size:var(--etp-title);font-weight:700;margin-bottom:.75rem}
.education-offer-item__specs{margin-block-start:auto}
.education-offer-item__specs p{margin-bottom:.35em}
.education-offer-item__specs :last-child{margin-bottom:0}

/* Плакат акции «Элементарно сдать!» (вкладка «Акция», 2026-08-10).
   Картинка идёт отдельным блоком под текстом и тянется на всю ширину
   контента — своего класса под «просто картинка в потоке» на сайте нет:
   .article-image завязан на переменную --article-offset-x страницы
   новости и вне .article считает отрицательные поля от undefined. */
.education-action__image{margin-bottom:2rem}
.education-action__image img{border-radius:.375rem;display:block;height:auto;width:100%}

/* Карточки форматов во вкладке «Заявка на эко-мероприятия»: сверху сетка
   отбита от врезки на 40px, а снизу отступа не было вовсе — следующий
   заголовок («Структура урока экологической грамотности:») прилипал
   вплотную к карточкам (правка клиента 2026-08-10 «отступ между текстом
   и блоками забыли»). Делаем симметрично верхнему. */
.education-offer-grid{margin-bottom:2.5rem}

/* Сообщение об успешной отправке формы (правка клиента 2026-08-10
   «мелковато написано»). Во всех пяти формах успех выводится голым <p> без
   класса — то есть 16px bootstrap-дефолта, который не масштабируется по
   брейкпоинтам, тогда как основной текст рядом на 1400px уже 25px
   (var(--etp-text)), а заголовок формы над ним и того крупнее. Кегль
   выравниваем по основному тексту, цвет и начертание берём у
   .eco-events-item__done («Вы записаны» в карточке мероприятия) — там
   ровно то же состояние «форма отправлена», новый визуальный язык не
   изобретаем. Тот же кегль отдаём и самому .eco-events-item__done, у него
   был ровно этот же немасштабируемый дефолт.
   Заодно общий алерт формы (.form-row[role="alert"] — «форма устарела»,
   «слишком много обращений подряд») набран тем же дефолтом: он такой же
   ответ формы посетителю, набирать его мельче успеха нет причин.

   margin-bottom (координатор, 28.08.2026, «сломанные отступы в форме
   регистрации», Правка 1: «нет отступа между зелёной строкой результата
   и первым полем»). Раньше .form-success нёс только color/font-size/
   font-weight — ни одного margin, то есть между "Спасибо!.." и формой
   ниже (regop-ecocenter.php печатает форму СНОВА, пустой, даже после
   успеха — то же самое делает и request-форма "Задать вопрос" на этой же
   странице) не было НИ ПИКСЕЛЯ зазора ни на одной из пяти форм сайта:
   компонент общий (site/plugins/eco-forms/feedback.php, докблок файла),
   класс .form-success — один на всех. 1em, а не фиксированный rem: у
   .form-success уже var(--etp-text) — 1em масштабируется вместе с ним по
   тем же брейкпоинтам без дублирования их значений здесь (тот же приём,
   что у вендорского "p{font-size:var(--etp-text);margin-bottom:1em}" в
   основной части файла, а не новый). */
.form-success{color:#5fb9bd;font-size:var(--etp-text);font-weight:700;margin-bottom:1em}
.eco-events-item__done{font-size:var(--etp-text)}
.form-row[role="alert"] p{color:var(--bs-form-invalid-color);font-size:var(--etp-text)}
/* Т-zayavka-2026-styling (2026-08-10): визуальные правки формы заявки по
   письму клиента — экраны 1-7, индикатор шагов, справочник категорий,
   кнопка "+ Добавить округ", экран успеха. Точечный блок в конце файла —
   исходников CSS в проекте нет (main.css — единственный источник, см.
   kirby/README.md §7), правим сам минифицированный файл.

   1) .form-checklist — группы чекбоксов/радио заявки (тип/вид/объём
      ёмкости, заезд транспорта, назначение недвижимости, способ доставки,
      справочник категорий Приложения №1, переключатели Да/Нет) стояли
      простым вертикальным списком .form-check с margin-bottom:0 —
      единственный отступ давал line-height, пункты визуально слипались
      (жалоба клиента "наезжают друг на друга"). CSS grid одним правилом
      решает и вертикальный интервал (row-gap), и раскладку в колонки —
      1 колонка по умолчанию (узкий экран), 2 от 768px, 3 от 1000px (те же
      брейкпоинты, что и везде в этом файле). .form-checklist используется
      ТОЛЬКО в мастере заявки (проверено grep по kirby/site/) — других
      страниц правило не касается. Чекбокс "Другое" + его текстовое поле —
      последняя пара пунктов списка (см. eco_forms_v2_checkboxes());
      :has() растягивает строку с открытым полем на всю ширину грида,
      чтобы "Уточните" не оказалось обрезанным в узкой колонке (браузер
      без поддержки :has() просто оставит её обычной ячейкой — деградация
      не ломает форму). Справочник категорий (3.1, ~42 пункта,
      form-checklist--scroll) — внутренняя прокрутка снята правкой самого
      .form-checklist--scroll выше (max-height/overflow-y убраны), рамка/
      паддинг/радиус и хук invalid-состояния (fieldset.is-invalid
      .form-checklist--scroll) оставлены как были — они не про прокрутку,
      а про группировку и валидацию.
*/
.form-checklist{display:grid;grid-template-columns:1fr;column-gap:1.5rem;row-gap:.75rem}
.form-checklist .form-check-inline{margin-right:0}
@media (min-width:768px){.form-checklist{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.form-checklist{grid-template-columns:repeat(3,1fr)}}
.form-checklist .form-check:has(.form-control){grid-column:1/-1}

/* 2) Индикатор шагов (eco_apply_steps_v2(), partials/apply-steps.php) —
   разметка уже различает три состояния (пройден — <a>, текущий —
   aria-current="step", предстоящий — просто <span>), но CSS красил
   только два: класс .active получают И пройденные, И текущий шаг
   одновременно, а цвет ромба завязан на :nth-child(2..5) — расчёт под
   старую форму из 5 шагов (eco_apply_steps(), архивная копия формы
   удалена 2026-08-10, эта функция больше нигде не вызывается — правки
   ниже касаются только eco_apply_steps_v2()). У 7-позиционного индикатора
   новой формы позиции 6 и 7 (разделы 5 и 6 ТЗ — жалоба клиента "у 5 и 6
   фон должен отличаться") не попадали ни в одно :nth-child-правило и
   получали фон по умолчанию — тот же кусок градиента, что и у первого
   ромба, отсюда визуальное совпадение. Правим явными состояниями через
   реальные атрибуты разметки вместо позиционной арифметики по номеру:
     - [aria-current="step"] — текущий: сплошная заливка бирюзовым
       (--bs-primary/--bs-cyan #5fb9bd, см. DESIGN.md) с кольцом-обводкой;
     - .active без aria-current — пройден: сплошной зелёный
       (--bs-secondary/--bs-teal #a1c778, DESIGN.md), первый ромб —
       светло-зелёный #afcf8c (DESIGN.md, "Зелёный при наведении" — уже
       задокументированный оттенок зелёного, светлее базового #a1c778, не
       новый цвет — тот самый "первый светло-зелёный" из макета клиента);
     - без .active — предстоящий: серый #c1c4c7, значение не меняли.
   Соединительная линия между ромбами (::before, есть у всех кроме
   первого) — правка 2026-08-11 по замечанию клиента "полоса разного
   цвета, она должна быть цветом следующего кубика". Раньше линию не
   трогали, и после перекраски ромбов в сплошные цвета она осталась
   единственным местом со старым green→teal градиентом: куски градиента
   раскладывались по :nth-child (background-position, рассчитан на 5
   позиций старой формы), поэтому в 7-позиционном индикаторе линии между
   зелёными ромбами уходили в бирюзу вразнобой. Линия принадлежит
   ромбу СПРАВА от неё (::before лежит на элементе N и вынесен влево
   transform'ом), поэтому "цвет следующего кубика" = цвет собственного
   ромба: те же три состояния, что у ::after выше. :nth-child-правила
   градиента при background-image:none становятся холостыми
   (background-position нечего двигать), сносить их из билда подрядчика
   не требуется. */
.apply-steps-item.active::after{background-image:none;background-color:#a1c778}
.apply-steps-item:first-child.active:not([aria-current])::after{background-color:#afcf8c}
.apply-steps-item.active[aria-current="step"]::after{background-image:none;background-color:#5fb9bd;box-shadow:0 0 0 .1875em rgba(95,185,189,.35)}
.apply-steps-item.active::before{background-image:none;background-color:#a1c778}
.apply-steps-item.active[aria-current="step"]::before{background-image:none;background-color:#5fb9bd}

/* 3) "+ Добавить округ" (экран 1) и "Убрать" у динамической строки округа
   живут вне .apply-control, поэтому не получают --bs-btn-border-radius:
   0.45em, который .apply-control .btn задаёт "Следующему шагу"/
   "Вернуться". Базовый bootstrap-токен --bs-border-radius в файле нигде
   не определён — .btn без переопределения радиуса рендерится с
   border-radius:0 (var() без фолбэка и без значения переменной невалиден
   → initial → 0), отсюда острые углы именно у этой кнопки при том, что
   класс тот же .btn.btn-outline-secondary, что и у "Вернуться". Берём то
   же значение 0.45em, что и у соседних кнопок формы — не новое. */
.district-add,.district-row__remove{--bs-btn-border-radius:0.45em}

/* 4) Экран успешной отправки заявки (apply-step-7.php) — по макету
   клиента крупная зелёная плашка с белым текстом вместо голого абзаца.
   .form-success (правка того же дня чуть раньше — просто увеличенный
   кегль текста) используется ещё в трёх шаблонах формы обратной связи
   (press-contacts/regop-activity/press-education) — её не трогаем, чтобы
   не перекрасить чужие формы задним числом. .apply-success — отдельный
   модификатор, добавлен ТОЛЬКО в apply-step-7.php поверх form-success.
   Фон — вторичный зелёный DESIGN.md (#a1c778), радиус карточки 0.375rem
   (тот же, что у карточек по всему сайту), кегль — var(--etp-accent)
   (самый крупный размерный токен палитры). */
.apply-success{background-color:#a1c778;border-radius:.375rem;color:#fff;display:block;font-size:var(--etp-accent);font-weight:700;margin:0 0 1.5rem;padding:1.25rem 1.75rem;text-align:center}

/* ═══ Правка клиента 2026-08-11: «то по центру кнопки, то сбоку» ═══════
   Единый набор блоков для «тонких» информационных страниц (закупки,
   лицензии, политика ПДн). Три правила разом чинят разнобой, который
   был виден на живом сайте:
     - кнопка-действие всегда прижата к ЛЕВОМУ краю (было: .policy-link/
       .licenses-registry центрируют её, .procurement-info — тоже);
     - кнопки в одном ряду всегда одной высоты (было: .link-tag тянется
       по своему тексту, две кнопки рядом разъезжались, как и три кнопки
       правового статуса в форме заявки — там же починено height:100%
       у .role-select__label);
     - цвет действия всегда бирюзовый .link-tag--primary (зелёный
       .link-tag--secondary на «Закупках» давал третий стиль на сайте).
   Компоненты специально общие, а не «под страницу»: те же .info-lead/
   .info-actions/.info-facts/.doc-card переиспользуются всеми тремя
   шаблонами и годятся для будущих таких же страниц.

   Второй заход, правка клиента 12.08.2026 («3 страницы, фактически
   одинаковый контент, разные стили, надо бы унифицировать, я про обводку
   и кнопки»). Замер вычисленных стилей на живых страницах показал, что
   кнопки уже совпадали до последнего пикселя (#5fb9bd, радиус 50rem,
   кегль 18px, высота 48px — .info-actions .link-tag ниже), а расходились
   ОБВОДКА и ширина: лицензии и политика лежат в .doc-card (1px #e3e6e8,
   var(--etp-card-radius), max-width 46rem), закупки же шли вообще без
   рамки и на всю ширину контейнера. Закупки убраны в ту же .doc-card
   (см. докблок templates/information-procurement.php), поэтому здесь
   отсюда убраны два правила, ставшие после этого мёртвыми:
     - .info-lead--quote (бирюзовая полоса слева у лид-абзаца) — третий
       вариант оформления вводного текста на трёх страницах, ровно то,
       на что жаловался клиент; единственным его носителем был шаблон
       закупок;
     - .info-actions+.info-facts — отступ для порядка «кнопки, затем
       реквизиты»; порядок внутри карточки теперь эталонный, обратный. */
.info-lead{max-width:62ch;font-size:var(--etp-text);line-height:1.55;color:#1f2933;margin:0 0 1.125rem}
.info-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:.75rem;margin:0 0 .5rem}
.info-actions .link-tag{display:inline-flex;align-items:center;min-height:3rem}
/* Кегль и нижний отступ — ровно как у .doc-card__meta (var(--etp-note),
   1rem). Реквизиты лежат ВНУТРИ той же карточки, что и строки-подписи
   эталона /information/licenses/, поэтому и шкала внутри карточки должна
   быть одна: на var(--etp-text) (25px против 22px на широком экране) блок
   «Заказчик / ИНН» спорил по весу с заголовком карточки на соседних
   страницах, а просвет до ряда кнопок был на 4px больше эталонного. */
.info-facts{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.375rem;font-size:var(--etp-note);margin:0 0 1rem}
.info-facts dt{color:#5a6572}
.info-facts dd{margin:0;color:#1f2933;font-weight:700}
.info-facts dd.info-facts__plain{font-weight:400}
@media (max-width:575px){.info-facts{grid-template-columns:1fr;gap:.125rem .75rem}.info-facts dd{margin-bottom:.5rem}}
/* Карточка документа — превью/иконка слева, реквизиты и действия справа.
   Превью — обычная картинка (Kirby thumb через gd, который в образе есть);
   генерировать миниатюру ИЗ PDF на сервере нельзя (ни imagick, ни
   ghostscript, ни poppler в docker/php/Dockerfile нет и тянуть их ради
   одной картинки не стали) — поэтому картинка-превью загружается в
   панели отдельным полем, а если её нет, рисуется плашка «PDF». */
.doc-card{max-width:46rem;display:flex;gap:1.375rem;align-items:flex-start;border:1px solid #e3e6e8;border-radius:.375rem;padding:1.25rem 1.375rem;background:#fff}
.doc-card__thumb{flex:0 0 8.25rem;border:1px solid #e3e6e8;border-radius:.375rem;overflow:hidden;line-height:0;background:#f4f5f2}
.doc-card__thumb img{width:100%;height:auto;display:block}
.doc-card__icon{flex:0 0 3.5rem;height:4.25rem;border-radius:.375rem;background:#5fb9bd;color:#fff;font-size:var(--etp-note);font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.05em}
.doc-card__body{flex:1 1 auto;min-width:0}
.doc-card__title{font-size:var(--etp-title);font-weight:700;color:#1f2933;margin:0 0 .375rem}
.doc-card__meta{font-size:var(--etp-note);color:#5a6572;margin:0 0 1rem}
@media (max-width:575px){.doc-card{flex-direction:column}.doc-card__thumb{flex-basis:auto;max-width:11.25rem}}

/* Правка клиента 2026-08-11: «кнопки квадратные, зачем? только в шапке
   могут быть квадратные, остальные — как теги, овалом». Кнопки-плитки
   документов (.docs-list .nav-link — «СКАЧАТЬ» на «Информации для
   потребителей», списки документов на страницах противодействия
   коррупции/терроризму, логотипы пресс-центра) имели border-radius
   .1875rem и читались как единственный прямоугольный элемент среди
   пилюль .link-tag (теги новостей, ссылки на документы, кнопки действий).
   2.5em, а не 50rem как у .link-tag: набор допустимых скруглений задан
   DESIGN.md, и при высоте плитки 1.9375rem это то же самое — полный
   овал. Правило только про форму: цвет, кегль и размеры плитки не
   трогаются. */
.docs-list .nav-link{border-radius:2.5em}

/* ── Правки клиента 2026-08-11, форма заявки ─────────────────────────────
   Пять пунктов из присланного разбора, все — про вёрстку формы:
   1) «Все звёздочки из-за изменения шрифта очень далеко стоят от текста»:
      разделителем был обычный текстовый пробел, а он растёт вместе с
      кеглем (.apply-form .form-label = 1.25em от 1.25rem на десктопе, то
      есть ~8px пробела плюс собственный сайдбэринг астериска PT Sans).
      Пробел убран из разметки (см. eco_forms_v2_text/_select), отступ
      задаётся здесь и от кегля не зависит.
   2) «"Обязательно к заполнению" опустилось слишком вниз»: сноска была
      абсолютно спозиционирована под всю форму. Теперь обычный блок над
      первым полем.
   3) «Если чекбоксы, то их нужно все выровнять, текст где-то выше, где-то
      ниже»: у .form-check бокс фиксированной высоты, а подпись
      переносится, поэтому в grid-ячейках строки разъезжались.
   4) «"Нет" слишком далеко от "Да"»: пары Да/Нет получили свой класс с
      небольшим фиксированным зазором вместо колонок общего чеклиста.
   5) «Строка "! Заполняется только в отношении нежилых помещений" в стиле
      как с ошибкой красным, но серым цветом сразу без нажатия»:
      .form-note-inline — та же плашка, что .invalid-feedback, но серая и
      видна всегда. */
.form-label .text-primary,legend.form-label .text-primary{margin-left:.15em}
.apply-form .form-required{position:static;margin-bottom:1rem;text-align:right}
.form-checklist{align-items:start}
.form-checklist .form-check{display:flex;align-items:flex-start;gap:.75em;padding-left:0}
.form-checklist .form-check-input{flex:0 0 auto;float:none;margin-left:0;margin-top:0}
.form-checklist .form-check-label{flex:1 1 auto;line-height:1.35;padding-top:calc((var(--eco-check-box) - 1.35em)/2)}
.form-checklist .form-check-input{--eco-check-box:2em;height:var(--eco-check-box);width:var(--eco-check-box)}
.form-checklist .form-check{--eco-check-box:2em}
.form-checklist .form-check+.form-check{margin-top:0}
/* Чек-лист внутри половинной колонки (вид/объём ёмкости — правка клиента
   2026-08-11 «разделить на 2 строки рядом»): три колонки там не помещаются,
   подписи вроде «Контейнер под смешанные отходы» рвутся по одному слову. */
.col-md-6 .form-checklist,.col-md-4 .form-checklist,.col-md-3 .form-checklist{grid-template-columns:1fr}
@media (min-width:1000px){.col-md-6 .form-checklist{grid-template-columns:repeat(2,1fr)}}
.form-checklist--pair{display:flex;flex-wrap:wrap;column-gap:1.5rem;row-gap:.5rem}
.form-checklist--pair .form-check{margin-right:0}
.form-note-inline{background-color:#f4f5f2;border-radius:0 0 .375rem .375rem;color:#5a6572;font-size:var(--etp-note);margin-top:-.625rem;padding:1.125rem .625rem .5rem;position:relative;z-index:-1}
.apply-info-link{align-items:center;color:#5fb9bd;display:inline-flex;gap:.375rem;text-decoration:none}
.apply-info-link:hover,.apply-info-link:focus-visible{color:#519da1;text-decoration:underline}
.apply-info-link .icon-arrow-right{flex:0 0 auto;height:.75em;width:.75em}

/* ══════════════════════════════════════════════════════════════════════
   БЛОК-КОНСТРУКТОР СТРАНИЦ: eco-blocks (каталог блоков, 2026-08-11) —
   начало. Утилитарные стили каталога блоков (site/blueprints/blocks/,
   site/snippets/blocks/, site/plugins/eco-blocks/) — не редизайн, только
   то, чему негде взяться из существующих классов. Переменные цвета и
   переносы --etp-* — существующие (см. начало файла), новая палитра не
   вводится: #5fb9bd/#519da1 — фирменный бирюзовый (как .btn-primary,
   .link-tag--primary), #a1c778 — фирменный зелёный (.btn-secondary,
   .link-tag--secondary), #f3315f — существующий цвет ошибки формы
   (--bs-form-invalid-color, см. .invalid-feedback), #1f2933/#5a6572/
   #e3e6e8/#f4f5f2 — текст/приглушённый текст/рамка/подложка из .doc-card
   и .info-actions (information-policy.php).
   ══════════════════════════════════════════════════════════════════════ */

/* Общий вертикальный отступ между блоками конструктора — тот же приём,
   что "margin: 0 0 1.125rem" у .eco-quote/.info-lead, но чуть просторнее
   (1.5rem): блоки конструктора крупнее одного абзаца (таблица, галерея,
   видео) и нуждаются в более заметном разделении друг от друга. */
.eco-block{margin:0 0 1.5rem}
.eco-block:last-child{margin-bottom:0}

/* ── eco-table ──────────────────────────────────────────────────────── */
/* overflow-x:auto — обязательная защита от того, что широкая таблица
   (до ECO_TABLE_MAX_COLS=12 колонок) распирает страницу на мобильном;
   tabindex="0" в разметке снипета делает эту прокручиваемую область
   достижимой с клавиатуры — сама рамка это только подсвечивает по фокусу. */
.eco-table-wrap{overflow-x:auto;border:1px solid #e3e6e8;border-radius:.375rem}
.eco-table-wrap:focus-visible{outline:2px solid #5fb9bd;outline-offset:2px}
.eco-table{width:100%;min-width:28rem;border-collapse:collapse;font-size:var(--etp-text)}
.eco-table caption{caption-side:top;text-align:left;padding:.75rem .875rem .25rem;font-weight:600;color:#1f2933}
.eco-table th,.eco-table td{padding:.625rem .875rem;text-align:left;vertical-align:top;border-bottom:1px solid #e3e6e8}
.eco-table thead th{background-color:#f4f5f2;font-weight:700;color:#1f2933;white-space:nowrap}
.eco-table tbody tr:last-child td{border-bottom:0}

/* ── eco-gallery (режим "Сетка") ───────────────────────────────────── */
/* Режим "Слайдер" разметкой дословно повторяет .gallery-slider на
   home.php — весь его CSS уже в бандле, отдельных правил здесь не нужно. */
.eco-gallery--grid{display:grid;gap:.75rem;grid-template-columns:repeat(var(--eco-gallery-cols,3),1fr)}
.eco-gallery--grid.eco-gallery--cols-2{--eco-gallery-cols:2}
.eco-gallery--grid.eco-gallery--cols-3{--eco-gallery-cols:3}
.eco-gallery--grid.eco-gallery--cols-4{--eco-gallery-cols:4}
@media (max-width:575px){.eco-gallery--grid{--eco-gallery-cols:2;gap:.5rem}}
.eco-gallery__item{display:block;border-radius:.375rem;overflow:hidden;aspect-ratio:1/1}
.eco-gallery__item img{display:block;width:100%;height:100%;object-fit:cover}
.eco-gallery__caption{margin:.75rem 0 0;font-size:var(--etp-note);color:#5a6572}
/* Модификатор "--natural" — плитка принимает пропорции оригинала вместо
   квадрата с обрезкой. Заведён 10.09.2026 под памятки "в развёрнутом виде"
   на /information/countering-terrorism/ (templates/information-terrorism.php,
   $renderMemosGallery): карточка-инфографика портретная 723×1024, при
   object-fit:cover в квадрате от неё остаётся середина без текста. Правила
   выше не тронуты — блок "Галерея" везде остаётся квадратным, как был.
   На планшете четыре портретные карточки в ряд слишком узкие, поэтому
   в диапазоне 576-991px этот вариант сетки идёт в три колонки. Нижняя
   граница обязательна: общее мобильное правило .eco-gallery--grid
   (две колонки, max-width:575px) слабее по специфичности — один класс
   против двух, — и без min-width наш медиазапрос перебивал бы его на
   телефоне, оставляя три узкие колонки (находка pre-push ревью
   10.09.2026). */
.eco-gallery--natural .eco-gallery__item{aspect-ratio:auto;background:#f4f5f2}
.eco-gallery--natural .eco-gallery__item img{height:auto;object-fit:contain}
/* Отступ галереи от того, что стоит над ней в панели вкладки: на
   /information/countering-terrorism/ карточки-инфографики шли вплотную к
   кнопке «Скачать» последней памятки (правка 10.09.2026). Зазор задан
   соседним селектором, а не собственным margin галереи, — блок «Галерея»
   на других страницах живёт внутри .eco-block со своими отступами, и
   лишний margin там сложился бы с ними. */
.docs-sections + .eco-gallery--natural{margin-top:2rem}
@media (min-width:576px) and (max-width:991px){.eco-gallery--natural.eco-gallery--cols-4{--eco-gallery-cols:3}}

/* ── свободная вкладка (blueprints/blocks/tab-section.yml) ──────────── */
/* Начинку такой вкладки печатает eco_tabs_panes() блоками, а снипет
   blocks/text.php намеренно отдаёт голый <p> без класса (см. его
   докблок) — поэтому плагин заворачивает начинку в .eco-tab-body.
   Здесь эта обёртка получает две вещи, которых у голого <p> нет:
   1) КЕГЛЬ. На сайте каждый типографский класс объявляет font-size сам,
      унаследовать масштабируемый кегль неоткуда — без этого правила текст
      вкладки рендерился умолчанием браузера (находка канареечного гейта
      10.09.2026, design_lint/check_bare_text).
   2) ОТСТУПЫ АБЗАЦЕВ. Базовый сброс проекта — p{margin:0}, и четыре
      абзаца вкладки «Противодействие идеологии терроризма» слипались в
      сплошное полотно. */
.eco-tab-body{font-size:var(--etp-text)}
.eco-tab-body > p,
.eco-tab-body > ul,
.eco-tab-body > ol{margin:0 0 1rem}
.eco-tab-body > p:last-child,
.eco-tab-body > ul:last-child,
.eco-tab-body > ol:last-child{margin-bottom:0}

/* ── eco-image ──────────────────────────────────────────────────────── */
.eco-figure{margin:0}
.eco-figure img{display:block;width:100%;height:auto;border-radius:.375rem}
.eco-figure--inline{max-width:22rem}
.eco-figure figcaption{margin-top:.5rem;font-size:var(--etp-note);color:#5a6572}

/* ── eco-video (факад: обложка + кнопка "смотреть", см. eco_video_script()
   в site/plugins/eco-blocks/index.php) ────────────────────────────────── */
.eco-video__frame{position:relative;overflow:hidden;border-radius:.375rem;background-color:#1f2933}
.eco-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eco-video__play{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background-color:rgba(31,41,51,.15);cursor:pointer;display:flex;align-items:center;justify-content:center}
.eco-video__play:hover,.eco-video__play:focus-visible{background-color:rgba(31,41,51,.3);outline:none}
/* Круглая подложка кнопки — псевдоэлемент ::before; сам треугольник
   "play" — ::after border-trick (сплошной треугольник из трёх прозрачных
   с одной цветной сторон границы), т.к. в /i/sprites/sprite.svg нет
   символа "play" (см. докблок snippets/blocks/eco-video.php — полный
   список символов спрайта и почему новый не рисуется).

   Правка design-lint (2026-08-12): скругление в 50 процентов не входит
   в набор, разрешённый DESIGN.md "Скругления" (доли rem / 2.5em) — гейт
   (kirby/tools/design_lint.py) валил её. Значение "50 процентов" здесь
   не заменить одной из трёх допустимых констант напрямую: скругление в
   rem/em считается от ЛОКАЛЬНОГО кегля элемента (кнопка наследует его
   от body, а у body в этом файле явно задан кегль в rem, отличный от
   корневого), а сторона подложки была в rem (от КОРНЕВОГО fluid-кегля)
   — допустимое em-значение в этом смешанном контексте НЕ дотягивало до
   половины стороны, круг получался с едва заметными плоскими гранями
   по 4 сторонам вместо ровной окружности.
   Решение — считать сторону ЭТОЙ ЖЕ подложки тоже в em, а не в rem:
   тогда допустимое em-значение скругления математически равно половине
   стороны независимо от того, чему равен локальный кегль сейчас или
   станет в будущем — гарантированно ровный круг, не "почти круг".
   Сторона уменьшилась примерно на одну двадцатую от исходной — на глаз
   разница в пределах погрешности, кнопка по-прежнему кругла и не
   наезжает на треугольник ::after. */
.eco-video__play::before{content:"";display:block;width:5em;height:5em;border-radius:2.5em;background-color:rgba(31,41,51,.75);transition:background-color .2s ease}
.eco-video__play:hover::before,.eco-video__play:focus-visible::before{background-color:#5fb9bd}
.eco-video__play::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-style:solid;border-width:.85rem 0 .85rem 1.375rem;border-color:transparent transparent transparent #fff;transform:translate(-38%,-50%)}
.eco-video__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Локальный файл (M2, 2026-08-15): нативный <video controls preload="none">
   вместо факада — preload="none" уже даёт тот же эффект "ничего не грузим
   до клика play", без стороннего скрипта/iframe, поэтому обёртка
   .eco-video__frame ему не нужна. Радиус и фон — те же значения, что у
   факада выше (.375rem/#1f2933), для визуального единства блока. */
.eco-video__native{display:block;width:100%;height:auto;border-radius:.375rem;background-color:#1f2933}
.eco-video__unresolved{margin:0}
.eco-video__caption{margin:.5rem 0 0;font-size:var(--etp-note);color:#5a6572}

/* ── eco-callout (важно/внимание/совет) ────────────────────────────── */
.eco-callout{border-radius:.375rem;padding:1rem 1.25rem;border-left:4px solid #5fb9bd;background-color:#f4f5f2}
.eco-callout__title{margin:0 0 .375rem;font-weight:700;color:#1f2933}
.eco-callout__text :last-child{margin-bottom:0}
.eco-callout--warning{border-left-color:#f3315f}
.eco-callout--tip{border-left-color:#a1c778}

/* ══════════════════════════════════════════════════════════════════════
   БЛОК-КОНСТРУКТОР СТРАНИЦ: eco-blocks — конец.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   Карточка «Документы и тариф»: иконка рубля и ряд тарифа
   (правки клиента 12.08.2026).
   ══════════════════════════════════════════════════════════════════════
   Две правки клиента по одному блоку:

   1. «Где потеряли иконку с рублем, почему её заново отрисовали, а не взяли
      из макета». В шаблоне лежал самодельный inline-SVG 32×32, а
      .regop-tariff__icon рисовал вокруг него рамку с паддингом — получался
      квадратик с буквой «Р». Теперь символ #tariff из спрайта, коробка снята.

   2. «В оригинале один блок, а у нас два». Тариф переехал рядом ВНУТРЬ
      .regop-card, разделительную линию даёт штатное
      .regop-card__row + .regop-card__row — своя вёрстка не понадобилась.

   Размеры иконки перенесены из вёрстки подрядчика (3.5625 → 5.85 → 7.02 →
   9.75rem по брейкпоинтам 768/1000/1400 — они у нас совпадают). Кегли НЕ
   переносились: у подрядчика они литералами под его новую шкалу, у нас своя
   шкала --etp-*, и текст карточки уже получает var(--etp-text) от .regop-card.
   На узком экране подрядчик кладёт иконку над текстом — повторено.
   ══════════════════════════════════════════════════════════════════════ */
/* Блок ссылок: абзацы без разделителей между собой. Единственная линия в
   карточке — перед тарифом, как в эталоне (.regional-documents__links +
   .regional-documents__tariffs). Отступ 1.5rem — шаг нашей карточки. */
.regop-card__links p{margin-bottom:1.3em}
.regop-card__links p:last-child{margin-bottom:0}
.regop-card__links+.regop-tariff{border-top:1px solid #e3e6e8;margin-top:1.5rem;padding-top:1.5rem}
/* Рамка-плашка вокруг ссылок «приказ + соглашение» на «О деятельности»,
   правка клиента 19.08.2026 («по принципу старого сайта»). Тариф (текст
   «В соответствии…») сюда не входит — остаётся обычным текстом карточки,
   рамка только вокруг .regop-card__links. Цвет рамки и отступы — по
   явному указанию задачи (#c1c4c7), не .eco-callout: там цветной левый
   бордер несёт смысл «важно/внимание/совет», здесь просто визуальное
   выделение блока документов. */
/* Модификатор оставлен как хук (класс печатает regop-activity.php), но
   собственной рамки НЕ рисует: блок и так лежит внутри .regop-card с
   рамкой — получалась «рамка в рамке» (правка клиента 19.08). Выделение
   приказов даёт сама карточка и разделитель ниже. */
.regop-card__links--framed{
    /* #e3e6e8 — «граница карточки» из DESIGN.md; #c1c4c7 (граница инпутов)
       читался темнее прочих рамок сайта. Отступы горизонтальные компенсируем
       отрицательным margin, чтобы рамка не сужала колонку текста. */
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    margin-inline:-1.5rem;
    padding:1.25rem 1.5rem;
}
/* Внешняя рамка карточки убрана: рамку носит только блок ссылок выше. */
.regop-card--flat{border:0;box-shadow:none}
.regop-card--flat > .regop-card__row + .regop-card__row,
.regop-card--flat > .regop-tariff{border-top:0}
.regop-tariff__icon{border:0;padding:0;color:#5fb9bd}
.regop-tariff__icon .icon-tariff{color:#5fb9bd;flex-shrink:0;width:3.5625rem;height:3.5625rem}
.regop-tariff__text{margin-bottom:0}
@media (max-width:767.98px){.regop-tariff{flex-direction:column;row-gap:1.375rem}}
@media (min-width:768px){.regop-tariff__icon .icon-tariff{width:5.85rem;height:5.85rem;transform:translateY(4%)}}
@media (min-width:1000px){.regop-tariff__icon .icon-tariff{width:7.02rem;height:7.02rem}}
@media (min-width:3000px){.regop-tariff__icon .icon-tariff{width:9.75rem;height:9.75rem}}

/* ══════════════════════════════════════════════════════════════════════
   Свёрнутый длинный текст с кнопкой «[…]» (правка клиента 12.08.2026).
   ══════════════════════════════════════════════════════════════════════
   В обновлённом макете подрядчика текст про тариф обрезан по пяти строкам
   и раскрывается кнопкой. Механика — plugins/eco-show-more, там же контракт
   разметки и причина, по которой скрипт свой, а не подрядчика.

   Значения перенесены из вёрстки подрядчика (-webkit-line-clamp: 5).
   Класс .is-expanded вешается на РОДИТЕЛЯ кнопки — как у него же
   (.regional-documents__tariffs p.is-expanded), поэтому селекторы здесь
   написаны от родителя.

   button[hidden] прячет кнопку, когда текст помещается целиком: у Bootstrap
   есть `[hidden]{display:none!important}`, но кнопка получает display:inline
   от .btn-* правил, поэтому важность нужна и здесь — иначе на коротком
   тексте висит бессмысленное «[…]».
   ══════════════════════════════════════════════════════════════════════ */
.show-more-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.is-expanded .show-more-text{display:block;-webkit-line-clamp:unset;overflow:visible}
.btn-show-more{display:inline;border:0;padding:0;background:none;color:#5fb9bd;font:inherit;line-height:inherit;cursor:pointer}
.btn-show-more[hidden]{display:none}
.btn-show-more:hover{color:#519da1}
.is-expanded .btn-show-more{display:none}

/* ══════════════════════════════════════════════════════════════════════
   Карточка «текст + фото сбоку»: высоту задаёт текст, а не фотография.
   ══════════════════════════════════════════════════════════════════════
   Правка клиента 12.08.2026: «смущает дыра в главном баннере».

   Паттерн .areas-item--image-side мы завели 10.08.2026 (текст слева, фото
   справа) и задали фотографии фиксированную высоту по брейкпоинтам —
   на широком экране это 35.125rem. Фотография вертикальная, поэтому она
   растягивала карточку до 562 px, тогда как абзацу хватало 237 px. Разница
   уходила в пустоту под текстом.

   Замер до правки на /about/services/ — дыра была во ВСЕХ семи блоках
   страницы, от 139 до 357 px, то есть дефект не единичный, а в самом
   паттерне.

   Теперь наоборот: карточка тянется по тексту (align-items: stretch),
   а фотография заполняет получившуюся высоту и кадрируется по центру
   через object-fit. min-height держит нижнюю границу, чтобы у совсем
   короткого текста карточка не выродилась в полоску. Абсолютное
   позиционирование картинки нужно, чтобы она не участвовала в расчёте
   высоты строки флекса — иначе её собственные пропорции снова начнут
   диктовать размер.

   Проверено на /about/services/bells/ (562 → 299 px) и на всех семи
   блоках /about/services/ (562 → 344–615 px, каждый по своему тексту).
   ══════════════════════════════════════════════════════════════════════ */
.areas-item--image-side{align-items:stretch}
.areas-item--image-side .areas-item__image{height:auto;min-height:15rem;position:relative;overflow:hidden}
.areas-item--image-side .areas-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ══════════════════════════════════════════════════════════════════════
   Блок-конструктор: аккордеон (.eco-accordion) — своя семья классов
   (12.08.2026).
   ══════════════════════════════════════════════════════════════════════
   Блок раньше печатал классы .contracts-districts — оформление страницы
   прямых договоров. Обоснование («переиспользуем то, что уже описано в
   вёрстке подрядчика») перестало быть верным: в переверстанном макете
   этого класса нет вовсе, у нас он живёт только потому, что мы сами
   перенесли его правила в свою зону. Блок, который редактор ставит на
   любую страницу, не должен зависеть от оформления одной чужой страницы —
   правки её вида молча меняли бы вид всех блоков.

   Правила ниже — дословная копия .contracts-districts (та же белая
   карточка с разделителями и стрелкой), только под своими именами.
   .contracts-districts остаётся за templates/regop-contracts.php и
   templates/regop-ecocenter.php.
   ══════════════════════════════════════════════════════════════════════ */
.eco-accordion{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;font-size:var(--etp-text);line-height:1.3;margin-bottom:1.875rem}
.eco-accordion__item+.eco-accordion__item{border-top:1px solid #e3e6e8}
.eco-accordion__header .accordion-button{align-items:center;color:#1f2933;display:flex;font-size:var(--etp-title);font-weight:500;gap:.625rem;justify-content:space-between;padding:.9375rem 1.125rem}
.eco-accordion__header .accordion-button .icon{color:#5fb9bd;flex:none;height:.34em;transform:rotate(180deg);transition:transform .2s ease;width:.5em}
.eco-accordion__header .accordion-button.collapsed .icon{transform:rotate(0)}
.eco-accordion__body .accordion-body{padding:0 1.125rem 1.125rem}

/* ══════════════════════════════════════════════════════════════════════
   Раздел «Региональный оператор»: пять страниц вместо четырёх вкладок
   (переверстка 12.08.2026).
   ══════════════════════════════════════════════════════════════════════
   Семьи классов взяты из макета подрядчика (site/regional-*.html), но
   ПЕРЕНЕСЕНЫ, а не подключены: CSS подрядчика собран под другую дизайн-
   систему (шрифт Tektur с Google Fonts, своя шкала кегля) и целиком к нам
   не едет — см. откат в коммите 615d7d4f. Поэтому здесь:

   - кегль — только var(--etp-*), литеральная шкала подрядчика
     (0.875/1.125/1.375/1.875rem и т.п.) НЕ переносится: у нас своя,
     соседние страницы набраны ею;
   - скругления сведены к разрешённым DESIGN.md: карточки 0.375rem вместо
     0.625/0.75/0.9375/1.25rem у подрядчика, «пилюля» 2.5em вместо 50rem;
   - цвет рамок — #e3e6e8 («Граница карточки» из таблицы DESIGN.md), а не
     вендорский #c1c4c7: все остальные карточки сайта уже на #e3e6e8;
   - иконки — из спрайта в разметке, а не фоновыми data:image/svg+xml,
     как у подрядчика (DESIGN.md, «Изображения»);
   - геометрия (отступы, сетка, поворот стрелок, «плюс-минус» у пункта
     аккордеона) перенесена как есть — она к шрифту не привязана.

   .regional-tabs собственных правил не требует: вид пилюль, отступы и
   активное состояние даёт .content-tabs (вкладки на всём сайте), а
   выравнивание по левому краю у нас и так дефолтное — у подрядчика
   .content-tabs отцентрован, отсюда у него отдельное правило.
   ══════════════════════════════════════════════════════════════════════ */

/* ── «Информация для потребителей»: вкладки/шаги, строки, оплата ──────
   (main.css)

   ПЕРЕСОБРАНО ЦЕЛИКОМ 21.08.2026. Раньше здесь был bootstrap-аккордеон
   (.regional-info-item__button .accordion-button + .docs-section внутри
   .accordion-body) — владелец его забраковал (правки поверх вёрстки
   подрядчика читались как «выглядит странно», второй уровень строки
   потерялся, кнопки были вендорскими зелёными пилюлями .docs-list чужого
   кегля) и распорядился собрать блок заново строго по согласованному
   макету подрядчика (final-block.html), не переиспользуя прежние классы.
   Разметка — snippets/regional-info-docs.php.

   ПОЧЕМУ ЗДЕСЬ МНОГО ЛИТЕРАЛЬНЫХ ЗНАЧЕНИЙ, А НЕ var(--etp-*)/ALLOWED_RADII.
   Компонент — самостоятельный виджет-плашка (браузер документов и карточка
   действия), а не растущий текст статьи: он не должен подчиняться той же
   шкале, что абзац контента, у него своя, целиком заданная утверждённым
   макетом. Тот же класс решения уже есть на сайте — .docs-list .nav-link
   (роль «Кнопки-плитки документов», DESIGN.md) тоже не растёт вместе с
   var(--etp-note) выше 1000px, а стоит на собственных фиксированных
   ступенях. Поэтому кегли/радиусы/цвета ниже — литералы из макета, а не
   «ближайшие» из существующих токенов: задача прямо запрещает такую
   подмену (искажает утверждённый клиентом вид). Каждое новое значение
   заведено именованным исключением линтера: цвета — _REGIONAL_INFO_COLORS/
   _REGIONAL_INFO_SELECTORS, радиусы — RADIUS_EXCEPTIONS, кегли —
   FONT_SIZE_EXCEPTIONS (все три — tools/design_lint.py, обоснование там же).

   ШРИФТ — БЕЗ var(--Golos-Text). В макете подрядчика UI-элементы (вкладки,
   кнопки, чипы, номера шагов) набраны шрифтом «Golos Text» через Google
   Fonts, а заголовки/текст строк — уже сайтовым PT Sans. Здесь ЭТО
   ОСОЗНАННО НЕ ПЕРЕНЕСЕНО: раздел DESIGN.md «Шрифт» и нормализатор сайта
   исключают Google Fonts целиком (не «предпочтительно», а жёсткое правило
   инфраструктуры — сторонний шрифт не переживёт следующую прогонку
   нормализатора и не попадёт в прод молча). font-family нигде ниже не
   объявляется — все элементы наследуют глобальный PT Sans тела страницы,
   что и есть единственный шрифт сайта. Единственное расхождение с макетом
   по AC6, отмечено в отчёте задачи.

   ГРАНИЦЫ КАРТОЧКИ — БЕЗ box-shadow. Внешняя рамка блока — уже
   существующие .regional-info/.regional-info-heading/.regional-info-list
   ВЫШЕ этого комментария (не переименованы: это не «пункт» макета, а
   сайтовая карточка-контейнер, та же роль что .regop-card/.contracts-list,
   radius var(--etp-card-radius) через общее правило main.css). Тень и
   собственная рамка `.demo` из макета — оформление ДЕМО-СТРАНИЦЫ вокруг
   примера, не самого блока: список классов задачи для переименования
   начинается с .regional-info-switch, `.demo` в нём нет. */

.regional-info-body{display:grid;gap:.75rem}.regional-info-switch{justify-self:start;background-color:#f7fafa;border:1px solid #dce3e4;border-radius:var(--etp-card-radius);display:inline-flex;flex-wrap:wrap;gap:.25rem;margin-bottom:1.1rem;padding:.3rem}
/* Ярлык вкладки — на сайтовую шкалу var(--etp-note), правка владельца
   21.08.2026 «кегль — блок мельче всей страницы»: было литералом .875rem
   (14px), рядом FAQ той же роли «подпись/кнопка» шёл на ~21px. Заодно
   чуть просторнее паддинг — на бОльшем кегле старый было тесно. */
.regional-info-switch__btn{background-color:transparent;border:0;border-radius:2.5em;color:#5a6572;cursor:pointer;font-size:var(--etp-note);font-weight:600;padding:.55rem 1.2rem;transition:background-color .16s ease,color .16s ease}
.regional-info-switch__btn[aria-selected="true"]{background-color:#5fb9bd;color:#fff}
.regional-info-switch__btn:focus-visible{outline:2px solid #2a7e82;outline-offset:2px}

.regional-info-pane{display:grid;gap:.75rem}

/* Заголовок и подпись строки — var(--etp-text)/var(--etp-note), та же
   правка 21.08.2026 (были литералами .9375rem/.75rem, блок «Информация
   для потребителей» выглядел заметно мельче соседнего FAQ на той же
   странице — тот уже стоит на var(--etp-text)). Отступы/иконка подросли
   следом — на прежних .9rem/2.6rem увеличенный кегль было тесно. */
.regional-info-row{align-items:center;background-color:#fff;border:1px solid #dce3e4;border-radius:var(--etp-card-radius);display:flex;gap:1rem;padding:1.1rem 1.25rem;transition:border-color .16s ease}
.regional-info-row:hover{border-color:#5fb9bd}
.regional-info-row__icon{align-items:center;background-color:#eaf5f5;border-radius:.8rem;color:#2a7e82;display:flex;flex:none;height:2.85rem;justify-content:center;width:2.85rem}
.regional-info-row__icon svg{fill:none;height:1.65rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;width:1.65rem}
.regional-info-row{flex-wrap:wrap}.regional-info-row__text{flex:1 1 auto;min-width:12rem}
.regional-info-row__title{font-size:var(--etp-text);line-height:1.4;margin:0}
.regional-info-row__sub{color:#8a959e;display:block;font-size:var(--etp-note);margin-top:.2rem}
/* Кнопки строки — фирменные пилюли дизайн-системы .docs-list .nav-link
   (правка владельца 21.08.2026 «верни наши пилюли», отменяет прежний
   самостоятельный .regional-info-btn — его правил в CSS больше нет).
   Здесь — ТОЛЬКО раскладка обёртки (не растягивать по ширине строки,
   не переопределяет ни цвет, ни радиус, ни кегль самой .docs-list). */
.regional-info-row__act{flex:none}

/* Пункты без «Вкладки» (пустое поле group) — печатаются вне вкладок, ниже
   переключателя (или сразу под заголовком блока, если вкладок нет вовсе —
   отступ-разделитель тогда не нужен, поэтому он висит на :not(:first-child),
   а не задан безусловно). */
.regional-info-body>.regional-info-extra{display:grid;gap:.75rem}
.regional-info-body>.regional-info-extra:not(:first-child){border-top:1px solid #e8eded;margin-top:1.4rem;padding-top:1.4rem}

/* Зелёная карточка оплаты — .regional-info-pay: заливка/рамка/чипы/кнопка
   «Оплатить». Владелец отдельно подчеркнул 21.08.2026, что этот зелёный
   фон терять нельзя — проверено уже ПОСЛЕ правки «i» (кнопка-подсказка
   ниже), фон и чипы на месте, ничего не выпало. position:relative — под
   панель «i»: она всплывающая (.regional-info-note-popup), меряет себя
   от .regional-info-pay__head. */
.regional-info-pay{align-items:center;background-color:#f1f7e9;border:1px solid #a1c778;border-radius:var(--etp-card-radius);display:flex;gap:1rem;padding:1.25rem 1.35rem}
.regional-info-pay__text{display:grid;flex:1 1 auto;gap:.55rem;min-width:0}.regional-info-pay__act{align-items:center;display:flex;flex:none;gap:.6rem;position:relative}
.regional-info-pay__icon{align-items:center;background-color:#f1f7e9;border-radius:.8rem;color:#587f2c;display:flex;flex:none;height:2.85rem;justify-content:center;width:2.85rem}
.regional-info-pay__icon svg{fill:none;height:1.65rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;width:1.65rem}
/* Заголовок карточки — var(--etp-note), та же правка «кегль по сайтовой
   шкале» (был литералом .9375rem). */
.regional-info-pay__title{font-size:var(--etp-text);line-height:1.35;margin:0}

/* Кнопка «i» — открывает панель с юридическим текстом про банк «ВБРР»
   вместо семи строк мелким кеглем прямо в карточке (правка владельца
   21.08.2026: «убрать под значок i — при наведении всплывает панель»).
   Круглая, вне фирменных пилюль (это не документ и не «Оплатить», а
   раскрытие подсказки). */
.regional-info-note-toggle{align-items:center;background-color:#fff;border:1px solid #a1c778;border-radius:2.5em;color:#587f2c;cursor:pointer;display:flex;flex:none;height:1.9rem;justify-content:center;padding:0;transition:background-color .16s ease,color .16s ease;width:1.9rem}
.regional-info-note-toggle:hover,.regional-info-note-toggle[aria-expanded="true"]{background-color:#a1c778;color:#14210a}
.regional-info-note-toggle:focus-visible{outline:2px solid #2a7e82;outline-offset:2px}
.regional-info-note-toggle svg{fill:none;height:1.05rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:1.05rem}

/* Кнопка «Оплатить» — намеренно НЕ фирменная пилюля, а заливка: это
   единственное акцентное действие карточки, а не документ (то же решение
   владельца «верни пилюли» явно её исключает). Больше не опирается на
   удалённый базовый класс .regional-info-btn — text-decoration и display
   объявлены здесь же, самостоятельно. */
.regional-info{margin-bottom:1.875rem}.regional-info-heading{font-size:var(--etp-title);font-weight:700;line-height:1.28;margin-bottom:1.125rem}.regional-info-btn--pay{align-items:center;background-color:#a1c778;border:1px solid #a1c778;border-radius:2.5em;color:#fff;display:inline-flex;flex:none;font-size:var(--etp-note);font-weight:400;justify-content:center;min-height:2.75rem;padding:.35em 1em;text-align:center;text-decoration:none;transition:background-color .2s ease,border-color .2s ease}.regional-info-btn--pay:link,.regional-info-btn--pay:visited,.regional-info-btn--pay:hover,.regional-info-btn--pay:focus,.regional-info-btn--pay:active{color:#fff}.regional-info-btn--pay:hover,.regional-info-btn--pay:focus-visible{background-color:#2a7e82;background-image:linear-gradient(135deg,#2a7e82 0,#587f2c 100%);border-color:#2a7e82}

.regional-info-btn--pay:focus-visible{outline:2px solid #2a7e82;outline-offset:2px}
.regional-info-pay__chips{display:flex;flex-wrap:wrap;gap:.35rem}
.regional-info-chip{background-color:#fff;border:1px solid #dce3e4;border-radius:.4rem;color:#5a6572;font-size:var(--etp-note);font-variant-numeric:tabular-nums;padding:.35rem .85rem}

/* Панель «i» — сам текст про банк «ВБРР», скрыта по умолчанию атрибутом
   [hidden] (JS переключает его же, не класс — см. снипет). Кегль
   var(--etp-note) — той же правкой «кегль по сайтовой шкале», что и
   остальной текст блока. Радиус .75rem вне ALLOWED_RADII — исключение
   design_lint.py (RADIUS_EXCEPTIONS), тень — не проверяется линтером
   (box-shadow не входит в список проверяемых свойств), взята дословно из
   мягкой тени макета final-block.html. */
.regional-info-note-popup{background-color:#fff;border:1px solid #dce3e4;border-radius:var(--etp-card-radius);box-shadow:0 1px 2px rgba(22,35,42,.05),0 10px 28px rgba(22,35,42,.07);color:#5a6572;font-size:var(--etp-fineprint);line-height:1.5;padding:.9rem 1rem;position:absolute;right:0;bottom:calc(100% + .5rem);width:min(34rem,calc(100vw - 2.5rem));z-index:3}

.regional-info-stage{display:grid;gap:.35rem;padding-bottom:1rem;position:relative}
.regional-info-stage+.regional-info-stage{border-top:1px solid #e8eded;padding-top:1.4rem}
.regional-info-stage:last-of-type{padding-bottom:0}
.regional-info-stage__head{align-items:center;display:flex;gap:.85rem;margin-bottom:.5rem}.regional-info-stage__head--toggle{background-color:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;margin:0;padding:0;text-align:left;width:100%}.regional-info-stage__count{color:#5a6572;flex:none;font-size:var(--etp-note);margin-left:auto}.regional-info-stage__chevron{color:#5fb9bd;flex:none;height:.5rem;transition:transform .28s ease;width:.65rem}.regional-info-stage__head--toggle[aria-expanded="true"] .regional-info-stage__chevron{transform:rotate(180deg)}.regional-info-stage__head--toggle:focus-visible{outline:2px solid #2a7e82;outline-offset:2px}.regional-info-stage__body{display:grid;gap:.6rem}.regional-info-row:not(:has(.regional-info-row__title)){background-color:transparent;border-color:transparent;padding:0}
.regional-info-stage__n{background-color:#eaf5f5;border-radius:2.5em;color:#2a7e82;flex:none;font-size:var(--etp-fineprint);font-weight:700;letter-spacing:.06em;padding:.3rem .85rem;text-transform:uppercase}
/* Заголовок шага — var(--etp-text), та же правка «кегль по сайтовой
   шкале» (был литералом 1rem). */
.regional-info-stage__title{font-size:var(--etp-text);font-weight:700;line-height:1.35;margin:0}

/* Брейкпоинт компонента — 40rem (640px), как в утверждённом макете, а не
   767.98px общей мобильной ступени сайта: это локальное поведение виджета
   (перенос строки в столбец), не типографика, ей ступени сайта не нужны. */
@media (max-width:40rem){
    .regional-info-row{flex-wrap:wrap}
    .regional-info-row__act{width:100%}
    .regional-info-pay{align-items:stretch;flex-wrap:wrap}.regional-info-pay__act{width:100%}.regional-info-btn--pay{flex:1}
    .regional-info-btn--pay{width:100%}
}

/* Панель «i» на мобильных — во всю ширину карточки под кнопкой, а не
   28rem вправо от неё (на 375px такая ширина вызвала бы горизонтальную
   прокрутку страницы). Брейкпоинт здесь — САЙТОВЫЙ 767.98px, а не
   локальные 40rem компонента выше: так прямо попросил владелец. */
@media (max-width:767.98px){
    .regional-info-note-popup{left:0;right:0;width:auto}.regional-info-row,.regional-info-pay{flex-wrap:wrap}.regional-info-row__act,.regional-info-pay__act{width:100%}.regional-info-row__text,.regional-info-pay__text{flex:1 1 0;min-width:0}.regional-info-stage__head{flex-wrap:wrap}.regional-info-stage__title{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}.regional-info-stage__count{margin-left:auto}.regional-info-stage__head--toggle .regional-info-stage__chevron{order:1}.regional-info-chip{font-size:var(--etp-fineprint);padding:.25rem .6rem}.regional-info-row__title{overflow-wrap:anywhere}.regional-info-row{align-items:center}.regional-info-row__act{padding-left:3.5rem;width:100%}.regional-info-switch{display:flex;width:100%}.regional-info-switch__btn{flex:1 1 0;padding-left:.5rem;padding-right:.5rem;text-align:center}.regional-info-pay{align-items:flex-start}.regional-info-pay__act{padding-left:3.5rem;width:100%}.regional-info-btn--pay{flex:1 1 auto}.regional-info-row:not(:has(.regional-info-row__title)) .regional-info-row__act{max-width:100%;padding-left:0;width:auto}
}

/* ── Аккордеон «Вопросы-ответы» ──────────────────────────────────────── */
.regional-faq{margin-bottom:1.875rem}
.regional-faq-heading{font-size:var(--etp-title);font-weight:700;line-height:1.28;margin-bottom:1.125rem}
.regional-faq-item{border:1px solid #5fb9bd;border-radius:.375rem;padding:1.125rem 1.25rem}
.regional-faq-item:not(:first-child){margin-top:1rem}
.regional-faq-item__button .accordion-button{align-items:center;color:#1f2933;display:flex;font-size:var(--etp-text);font-weight:500;gap:.75rem;justify-content:space-between;line-height:1.3}
.regional-faq-item__button .accordion-button .icon{color:#5fb9bd;flex:none;height:.34em;transform:rotate(180deg);transition:transform .2s ease;width:.5em}
.regional-faq-item__button .accordion-button.collapsed .icon{transform:rotate(0)}
.regional-faq-item__body .accordion-body{font-size:var(--etp-text);line-height:1.4;padding-top:1rem}
.regional-faq-item__body .accordion-body>:last-child{margin-bottom:0}

/* ── Список нормативно-правовых актов ────────────────────────────────── */
.regional-acts{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;padding:1.25rem 1.5rem}
.regional-acts-heading{font-size:var(--etp-title);font-weight:700;line-height:1.28;margin-bottom:1.125rem}
.regional-acts-list{list-style:none;margin-bottom:0;padding-left:0}
/* Начертание пунктов — ОБЫЧНОЕ (400), сознательный отход от эталона:
   в CSS подрядчика тут .regional-acts-item{font-weight:700}, клиент
   посмотрел живую страницу 12.08.2026 и попросил убрать жирный. Прежняя
   наша вёрстка списка (.laws-list .nav-link) держала 500 — этого клиенту
   тоже показалось много. Жирным остаётся только заголовок блока
   .regional-acts-heading. НЕ «чинить» при следующей сверке с макетом. */
.regional-acts-item{font-size:var(--etp-text);font-weight:400;line-height:1.3}
.regional-acts-item:not(:first-child){border-top:1px solid #e3e6e8;margin-top:.75rem;padding-top:.75rem}
.regional-acts-item__link{align-items:center;color:#1f2933;display:flex;gap:1.5em;justify-content:space-between;text-decoration:none}
.regional-acts-item__link:hover,.regional-acts-item__link:focus-visible{color:#5fb9bd}
.regional-acts-item__link .icon{color:#5fb9bd;flex:none;height:.75em;transition:transform .2s ease;width:.45em}
.regional-acts-item__link:hover .icon{transform:translateX(25%)}

/* ── Карточки территориальных управлений ─────────────────────────────── */
.regional-territories{margin-bottom:1.875rem}
.regional-territories__title{font-size:var(--etp-title);font-weight:700;line-height:1.28;margin-bottom:1.125rem}
.regional-territories__grid{align-items:start;display:grid;gap:1.125rem;grid-template-columns:repeat(3,1fr)}
.regional-territory{background-color:#fff;border:1px solid #e3e6e8;border-radius:.375rem;display:flex;flex-direction:column;font-size:var(--etp-text);line-height:1.35;padding:1.125rem}
.regional-territory__title{font-size:var(--etp-title);font-weight:700;margin-bottom:.5rem}
.regional-territory__address{font-style:normal;margin-bottom:0}
/* Раскрытие контактов — плавное (правка клиента 12.08.2026: «анимация
   раскрытия этих блоков не красивая, просто рваная, нужно плавно»).
   Высота едет grid-template-rows 0fr → 1fr, а НЕ max-height: у карточек
   разное содержимое (две почты или три), и max-height пришлось бы задавать
   с запасом — на короткой карточке анимация проскакивала бы пустоту
   рывком в конце, то есть та же болезнь с другой стороны. 0fr/1fr едет по
   фактической высоте, магические числа не нужны.
   Внутри грида анимируется только ПЕРВАЯ строка, поэтому оба абзаца лежат
   в одной обёртке __contacts-inner (см. snippets/regional-territories.php);
   min-height:0 на ней обязателен — без него grid-элемент не сжимается ниже
   своего содержимого и «нулевая» строка остаётся высотой в текст.
   Атрибут [hidden] с блока снимает скрипт при инициализации: он остался
   фолбэком «нет JS», а display:none анимировать нечем (см. докблок
   plugins/eco-territories/index.php). */
.regional-territory__contacts{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .28s ease}
.regional-territory__contacts-inner{min-height:0;overflow:hidden}
.regional-territory.is-expanded .regional-territory__contacts{grid-template-rows:1fr;opacity:1}
/* Разделительная линия и отступ над контактами — на ПЕРВОМ абзаце, а не на
   обёртке-грид-элементе: у обёртки min-height:0 обнуляет только высоту
   содержимого, а её собственные padding и border остаются и в свёрнутом
   состоянии — под адресом висела бы полоска в 15px. Внутри обёртки они
   обрезаются overflow:hidden вместе со всем остальным. */
.regional-territory__contacts-inner>p:first-child{border-top:1px solid #e3e6e8;margin-top:.875rem;padding-top:.875rem}
.regional-territory__contacts p{margin-bottom:0}
.regional-territory__contacts p:not(:first-child){margin-top:1em}
.regional-territory__contacts strong{font-weight:700}
.regional-territory__contacts a{color:#5fb9bd}
.regional-territory__more{margin-block-start:auto;padding-top:.75rem}
/* Подчёркивание у .link-more рисуется псевдоэлементом span::after — здесь
   оно лишнее: ссылка работает переключателем, а не переходом. Стрелка
   разворачивается вверх с тем же временем, что и раскрытие (класс
   is-expanded вешает plugins/eco-territories). */
.regional-territory__more .link-more{color:#5fb9bd;column-gap:.375rem}
.regional-territory__more .link-more span::after{display:none}
.regional-territory__more .link-more .icon-arrow-down-thin{flex:none;height:.35em;transition:transform .28s ease;width:.56em}
.regional-territory.is-expanded .link-more .icon-arrow-down-thin{transform:rotate(180deg)}
/* Часть посетителей отключает анимации в системе по медицинским причинам —
   для них раскрытие мгновенное, как было до правки. */
@media (prefers-reduced-motion:reduce){
    .regional-territory__contacts,.regional-territory__more .link-more .icon-arrow-down-thin{transition:none}
}
@media (max-width:767.98px){
    .regional-territories__grid{grid-template-columns:1fr}
    .regional-acts{padding:1.125rem 1.25rem}
    .regional-info-list{padding:1.125rem 1.25rem}
}

/* ══════════════════════════════════════════════════════════════════════
   Поиск адреса на «Прямых договорах»: во всю ширину, «пилюлей», с воздухом.
   ══════════════════════════════════════════════════════════════════════
   Правка клиента 12.08.2026: «кнопочку поиска адреса нужно сделать во всю
   ширину, чуть больше закруглить (посмотри как в формах) и сделать больше
   воздуха снизу».

   Было: max-width 26rem при контейнере 1204 px, то есть поле занимало
   меньше половины строки, и отступ снизу 1.25rem.

   Про скругление. Радиус самого поля уже совпадал с полями форм (15 px,
   приходит из контекстного класса .feedback-form), так что «как в формах»
   означало не поле, а кнопку — она в формах «пилюлей». Ставим 2.5em: это
   единственное разрешённое дизайн-кодом значение крупнее текущего
   (DESIGN.md, раздел «Скругления»: 0.375rem — карточки, 0.25rem — кнопки,
   2.5em — пилюли), и оно же роднит поиск с кнопками-вкладками, которые
   стоят прямо над ним на этой странице.
   ══════════════════════════════════════════════════════════════════════ */
.contracts-search{max-width:none;margin-bottom:2.5rem}
.contracts-search .form-control{border-radius:2.5em}

/* ══════════════════════════════════════════════════════════════════════
   Телефон горячей линии под кнопкой формы (.form-phone).
   ══════════════════════════════════════════════════════════════════════
   Правка клиента 12.08.2026 «криво поставили текст про телефон горячей
   линии». Блок разметки к тому моменту уже был, а стилей к нему не было
   вообще — ни одного правила `.form-phone` в проекте (проверено грепом).

   Как так вышло: блок писался в тот момент, когда в сборке лежал новый
   вендорский CSS подрядчика, и в его докблоке честно записано «стили
   целиком вендорские». Потом вендорскую часть откатили (коммит 615d7d4f:
   подрядчик собрал другую дизайн-систему), и разметка осталась без
   оформления — чёрная иконка вместо бирюзовой, текст не выровнен с
   кнопкой. Классический висячий хвост отката.

   Значения перенесены из вёрстки подрядчика, кегли переложены на нашу
   шкалу (у него литералы 0.875/0.8125/1/1.375rem — это его шкала под
   Tektur, у нас те же роли закрывают --etp-note и --etp-text).

   Поведение по ширине — его же: на мобильном телефон встаёт НАД кнопкой
   (column-reverse), с 768px уходит вправо через margin-left:auto. Кнопку
   не трогаем: её вид у нас уже свой.
   ══════════════════════════════════════════════════════════════════════ */
.feedback-form .form-submit{display:flex;margin-top:2rem}
.feedback-form .form-phone{display:flex;align-items:center;column-gap:.3125rem;font-size:var(--etp-note);font-weight:600;line-height:1.28}
.feedback-form .form-phone .icon-phone{color:#5fb9bd;flex-shrink:0;width:1.75rem;height:1.75rem}
@media (max-width:767.98px){.feedback-form .form-submit{flex-direction:column-reverse;row-gap:2rem;align-items:flex-start}}
@media (min-width:768px){.feedback-form .form-submit{align-items:center;column-gap:1.5rem;margin-top:1.575rem}.feedback-form .form-phone{margin-left:auto}}
@media (min-width:1000px){.feedback-form .form-submit{column-gap:1.8rem;margin-top:1.89rem}}
@media (min-width:3000px){.feedback-form .form-submit{column-gap:2.5rem;margin-top:2.625rem}.feedback-form .form-phone{column-gap:.625rem}.feedback-form .form-phone .icon-phone{width:2.375rem;height:2.375rem}}

/* ==== НАЧАЛО БЛОКА ЭКОЦЕНТРА (вклеивается из /tmp/ecocenter-css.txt) ==== */
/* ══════════════════════════════════════════════════════════════════════
   СТРАНИЦА «ЭКОЦЕНТР» — переверстка под макет подрядчика 12.08.2026
   (site/regional-ecocenter.html, первая версия страницы; до неё страница
   собиралась нами из общих плашек .eco-quote/.eco-photo/.eco-schedule/
   .eco-address/.eco-intro и аккордеона .contracts-districts).

   ОТКУДА ЗНАЧЕНИЯ. Раскладка (грид, порядок колонок, направление
   карточек, положение стрелок, сдвиги поповера) перенесена из CSS
   подрядчика — он лежит в откаченном коммите f1bb45e5, файл
   kirby/assets/css/main.css той ревизии. САМ ЕГО CSS НЕ ПОДКЛЮЧЁН
   (откат 615d7d4f: подрядчик собрал другую дизайн-систему — Tektur с
   Google Fonts, минус 1562 правила), поэтому шкалы приведены к нашим:

     - кегли — только var(--etp-text/--etp-title/--etp-note/--etp-accent);
       у подрядчика на каждом брейкпоинте свой литерал (0.875 → 1 → 1.125
       → 1.625rem и т.п.), это ровно та же роль «основной текст», что и
       --etp-text, поэтому четыре литерала заменены одной переменной;
     - радиусы — 0.375rem вместо его 0.625/0.75/0.9375/1.25rem (DESIGN.md,
       раздел «Скругления»: в новых блоках только 0.375 / 0.25 / 2.5em);
     - цвета — #5fb9bd, #a1c778, #519da1, #fff, #c1c4c7 (последний —
       вендорская граница, уже встречается в файле до маркера, см.
       _VENDOR_REUSED_COLORS в tools/design_lint.py). Новых цветов нет.

   ЧТО У ПОДРЯДЧИКА БЫЛО НА ЧУЖОЙ БИБЛИОТЕКЕ. Календарь он рисует
   vanilla-calendar-pro из своего libs.min.js и адресует его атрибутами
   [data-vc=…]. Библиотека не подключена: сетка приходит с сервера
   (snippets/ecocenter-calendar.php), классы — свои, той же семьи
   (.ecocenter-calendar__month/__header/__caption/__arrow/__week/
   __weekday/__dates/__row/__date/__date-btn). Имена, которые у
   подрядчика были СВОИ, взяты дословно: .ecocenter-calendar__date--event,
   .ecocenter-calendar__date--open, .ecocenter-event-popover*.

   МОЖНО УДАЛИТЬ ВМЕСТЕ С ЭТОЙ ПРАВКОЙ (стали мёртвыми — единственным
   потребителем была старая вёрстка этой страницы, проверено grep'ом по
   templates/ snippets/ plugins/): .eco-quote, .eco-photo, .eco-photo img,
   .eco-schedule, .eco-schedule-item, .eco-schedule-item strong,
   .eco-address, .eco-address .icon, .eco-address__link, .eco-intro,
   .eco-intro p, .eco-intro p+p, .eco-news-item, .eco-rules-heading,
   .eco-slider*, .eco-poster (сам .eco-poster-link ОСТАЁТСЯ — лайтбокс
   плакатов жив), а также упоминание .eco-schedule/.eco-news в общем
   правиле мобильных гридов. Оставлять их не вредно, но они больше ничего
   не красят. `.eco-events*` НЕ трогать — карточки мероприятий с формой
   записи остались на месте.
   ══════════════════════════════════════════════════════════════════════ */

/* --- Шапка страницы: цитата, фото, режим работы, адрес --------------- */

/* Одна общая рамка вместо пяти отдельных плашек — так в макете. */
.ecocenter-about {border:1px solid #c1c4c7;border-radius:.375rem;margin-bottom:1.5rem}
.ecocenter-about__quote {align-items:flex-start;column-gap:.75rem;display:flex;font-size:var(--etp-text);line-height:1.28;padding:1.25rem 1.5rem}
.ecocenter-about__quote p {margin-bottom:0}
/* Значок кавычек убран из разметки (правка клиента 19.08.2026, п.8) —
   .icon-quotes больше нигде внутри .ecocenter-about__quote не печатается,
   правило под него снято вместе с ним. */
/* Фото экоцентра уменьшено (правка клиента 19.08.2026, п.9): раньше
   занимало всю ширину блока (width:100%), теперь у обёртки задан
   max-width и центровка — сама картинка по-прежнему тянется на всю
   ширину СВОЕЙ обёртки (её отдельный width:100% не трогаем) и сохраняет
   пропорции (height:auto). На мобильных оставлено во всю ширину — там
   и без того тесно. */
.ecocenter-about__image {margin:0 auto}
.ecocenter-about__image img {border-radius:.375rem;display:block;height:auto;width:100%}
@media (min-width:768px){
    .ecocenter-about__image {max-width:65%}
}
.ecocenter-about__info {padding:1.25rem 1.5rem 1.5rem}
.ecocenter-about__hours {font-size:var(--etp-text);font-weight:500;line-height:1.28;text-align:center}
.ecocenter-about__reception {font-size:var(--etp-text);font-weight:500;line-height:1.28;text-align:center}
.ecocenter-about__hours p,.ecocenter-about__reception p {margin-bottom:0}
.ecocenter-about__reception strong {color:#5fb9bd}
.ecocenter-about__address {align-items:flex-start;border-top:1px solid #c1c4c7;column-gap:.875rem;display:flex;font-size:var(--etp-text);line-height:1.28;margin-top:1.25rem;padding-top:1.25rem}
.ecocenter-about__address address {margin-bottom:0}
.ecocenter-about__address p {margin-bottom:0}
.ecocenter-about__address p+p {margin-top:.375rem}
.ecocenter-about__address .icon-location {color:#5fb9bd;flex-shrink:0;height:2.3125rem;width:2.3125rem}
/* Ссылка-адрес красится как обычный текст-акцент, а не как ссылка: в
   макете это <strong class="text-primary">, у нас тот же <strong>, только
   обёрнут в ссылку на Яндекс.Карты (адрес кликабелен с 2026-08-10). */
.ecocenter-about__address-link {text-decoration:none}
.ecocenter-about__address-link:focus-visible strong,.ecocenter-about__address-link:hover strong {color:#519da1}

@media (min-width:768px) {
  .ecocenter-about {margin-bottom:2rem}
  .ecocenter-about__quote {column-gap:.975rem;padding:1.725rem 2.1rem}
  /* Две колонки: режим работы шире, приёмные окна уже — как в макете. */
  .ecocenter-about__info {display:grid;grid-template-columns:58.25% auto;padding:1.5rem 1.725rem 2.1rem}
  .ecocenter-about__hours {align-self:center;border-right:1px solid #c1c4c7;padding:.975rem 1.5rem .975rem 0}
  .ecocenter-about__reception {align-self:center;padding:.975rem 0 .975rem .75rem}
  .ecocenter-about__address {column-gap:1.125rem;grid-column:1/3;padding-top:2.1rem}
  .ecocenter-about__address .icon-location {height:3.99rem;margin-left:.25rem;width:3.99rem}
}

@media (min-width:1000px) {
  .ecocenter-about {margin-bottom:2.5rem}
  .ecocenter-about__quote {column-gap:1.17rem;padding:2.07rem 2.52rem}
  .ecocenter-about__info {padding:1.8rem 2.07rem 2.52rem}
  .ecocenter-about__hours {padding:1.17rem 1.8rem 1.17rem 0}
  .ecocenter-about__reception {padding:1.17rem 0 1.17rem .9rem}
  .ecocenter-about__address {column-gap:1.35rem;padding-top:2.52rem}
  .ecocenter-about__address .icon-location {height:5.13rem;margin-left:.375rem;width:5.13rem}
}

@media (min-width:3000px) {
  .ecocenter-about {margin-bottom:3.5rem}
  .ecocenter-about__quote {column-gap:1.625rem;padding:2.875rem 3.5rem}
  .ecocenter-about__info {padding:2.5rem 2.875rem 3.5rem}
  .ecocenter-about__hours {padding:1.625rem 2.5rem 1.625rem 0}
  .ecocenter-about__reception {padding:1.625rem 0 1.625rem 1.25rem}
  .ecocenter-about__address {column-gap:1.875rem;padding-top:3.5rem}
  .ecocenter-about__address .icon-location {height:7.125rem;margin-left:.5rem;width:7.125rem}
}

/* На телефоне колонок нет — приёмные окна уезжают под режим работы и
   отделяются линией (в макете так же). */
@media (max-width:767.98px) {
  .ecocenter-about__reception {border-top:1px solid #c1c4c7;margin-top:1.25rem;padding-top:1.25rem}
}

/* --- Виды принимаемого вторсырья ------------------------------------- */

.ecocenter-wastes {border:1px solid #c1c4c7;border-radius:.375rem;font-size:var(--etp-text);line-height:1.28;margin-bottom:1.5rem;padding:1.5rem}
.ecocenter-wastes-item p {margin-bottom:0}
.ecocenter-wastes-item:not(:first-child) {border-top:1px solid #c1c4c7;margin-top:1rem;padding-top:1.125rem}
.ecocenter-wastes-item strong {color:#5fb9bd}

@media (min-width:768px) {
  .ecocenter-wastes {margin-bottom:2rem;padding:1.35rem 1.8rem}
  .ecocenter-wastes-item:not(:first-child) {margin-top:1.05rem;padding-top:.9rem}
}

@media (min-width:1000px) {
  .ecocenter-wastes {margin-bottom:2.5rem;padding:1.62rem 2.16rem}
  .ecocenter-wastes-item:not(:first-child) {margin-top:1.26rem;padding-top:1.08rem}
}

@media (min-width:3000px) {
  .ecocenter-wastes {margin-bottom:3.5rem;padding:2.25rem 3rem}
  .ecocenter-wastes-item:not(:first-child) {margin-top:1.75rem;padding-top:1.5rem}
}

/* --- Вкладки и общий отступ содержимого ------------------------------ */

.ecocenter-content {margin-bottom:1.5rem}
/* Три вкладки с длинными подписями («Правила приема») на 375px не влезали
   штатными паддингами — у подрядчика для этой страницы отдельное правило. */
@media (max-width:767.98px) {
  .ecocenter-tabs .nav-link {padding-inline:.875em}
}
@media (min-width:768px) {.ecocenter-content {margin-bottom:2rem}}
@media (min-width:1000px) {.ecocenter-content {margin-bottom:2.5rem}}
@media (min-width:3000px) {.ecocenter-content {margin-bottom:3.5rem}}

/* Пустое состояние вкладок («Новостей пока нет», «Ближайших мероприятий
   пока нет»). Без своего класса это был бы голый <p> с немасштабируемым
   браузерным дефолтом — ровно то, что ловит design_lint.check_bare_text. */
.ecocenter-empty {font-size:var(--etp-text)}

/* --- Новости: карточки в шахматном порядке --------------------------- */

/* Базовая карточка .press-news-item — общая с лентой пресс-релизов, здесь
   только размер фото (в макете оно крупнее ленточного) и явная сторона.
   Явная, потому что общее правило чередует стороны через :nth-child(odd),
   а на этой вкладке часть карточек скрыта атрибутом hidden до нажатия
   «Показать ещё» — nth-child считает и скрытые, порядок бы поехал. */
@media (min-width:768px) {
  /* Фото всегда слева (правка 19.08.2026): чередование сторон убрано и в
     разметке, и здесь — .press-news-item--left теперь единственный вариант. */
  .ecocenter-news-grid .press-news-item--left {flex-direction:row-reverse}
  .ecocenter-news-grid .press-news-item__image {height:20.7375rem;width:22.5rem}
}
@media (min-width:1000px) {
  .ecocenter-news-grid .press-news-item__image {height:24.885rem;width:27rem}
}
@media (min-width:3000px) {
  .ecocenter-news-grid .press-news-item__image {height:34.5625rem;width:37.5rem}
}

/* --- Календарь-анонс мероприятий ------------------------------------- */

.ecocenter-calendar {border:1px solid #c1c4c7;border-radius:.375rem;margin-bottom:1.75rem;position:relative}
.ecocenter-calendar__title {align-items:center;background-color:#5fb9bd;border-radius:.375rem .375rem 0 0;color:#fff;display:flex;font-size:var(--etp-title);font-weight:700;justify-content:center;margin:0;min-height:2.5rem;padding:.5rem 1rem;text-align:center;text-transform:uppercase}
.ecocenter-calendar__widget {padding:0}
.ecocenter-calendar__month {display:block}
/* Шапка месяца: подпись по центру, стрелки по краям. У подрядчика тот же
   рисунок собран абсолютным позиционированием внутри грида библиотеки —
   здесь достаточно флекса. */
.ecocenter-calendar__header {align-items:center;border-bottom:1px solid #c1c4c7;display:flex;justify-content:space-between;min-height:2.25rem;padding:.375rem .625rem}
.ecocenter-calendar__caption {font-size:var(--etp-text);font-weight:500;line-height:1;text-align:center}
/* Стрелка — общая иконка спрайта #arrow-down, повёрнутая на четверть
   оборота (у подрядчика здесь был свой шеврон data-URI; DESIGN.md просит
   брать иконки из спрайта, а не заводить новые картинки). */
.ecocenter-calendar__arrow {background:none;border:0;color:#5fb9bd;cursor:pointer;line-height:0;padding:.25rem .375rem}
.ecocenter-calendar__arrow[disabled] {opacity:.35;cursor:default}
.ecocenter-calendar__arrow .icon {height:.5rem;width:.75rem}
.ecocenter-calendar__arrow--prev .icon {transform:rotate(90deg)}
.ecocenter-calendar__arrow--next .icon {transform:rotate(-90deg)}
.ecocenter-calendar__week {border-bottom:1px solid #c1c4c7;display:grid;grid-template-columns:repeat(7,1fr)}
.ecocenter-calendar__weekday {color:#5fb9bd;font-size:var(--etp-note);font-weight:700;line-height:1;padding:.625rem 0;text-align:center;text-transform:uppercase}
.ecocenter-calendar__row {display:grid;grid-template-columns:repeat(7,1fr)}
.ecocenter-calendar__row:not(:last-child) {border-bottom:1px solid #c1c4c7}
/* position:relative на клетке — якорь для поповера (он position:absolute). */
.ecocenter-calendar__date {align-items:center;display:flex;justify-content:center;min-height:2.0625rem;position:relative}
.ecocenter-calendar__date-btn {align-items:center;background:none;border:0;color:#1f2933;display:flex;font-size:var(--etp-note);justify-content:center;line-height:1;padding:0}
/* День с мероприятием: бирюзовая рамка-квадрат, при наведении заливается.
   Размер в em — квадрат должен расти вместе с кеглем цифры внутри. */
.ecocenter-calendar__date--event {border:2px solid #5fb9bd;border-radius:.25rem;color:#5fb9bd;cursor:pointer;font-weight:700;height:1.7em;width:1.7em}
.ecocenter-calendar__date--event:focus-visible,.ecocenter-calendar__date--event:hover,.ecocenter-calendar__date--open .ecocenter-calendar__date--event {background-color:#5fb9bd;color:#fff}

/* Поповер с мероприятиями выбранного дня. */
.ecocenter-event-popover {background-color:#fff;border:1px solid #c1c4c7;border-radius:.375rem;box-shadow:0 .0625rem .875rem rgba(0,0,0,.3);color:#1f2933;left:0;position:absolute;top:100%;width:16rem;z-index:30}
.ecocenter-event-popover__event {display:grid;gap:.375rem;padding:.375rem}
.ecocenter-event-popover__event:not(:first-child) {border-top:1px solid #c1c4c7}
.ecocenter-event-popover__info {align-items:center;background-color:#a1c778;border-radius:.375rem;display:grid;gap:.375rem;grid-template-columns:auto 3.6875rem;padding:.375rem}
.ecocenter-event-popover__title {color:#fff;font-size:var(--etp-note);font-weight:500;line-height:1.3;margin:0;text-decoration:none}
.ecocenter-event-popover__title:focus-visible,.ecocenter-event-popover__title:hover {color:#fff;text-decoration:underline}
.ecocenter-event-popover__image {border-radius:.375rem;height:3.6875rem;object-fit:cover;width:3.6875rem}
.ecocenter-event-popover__time {color:#a1c778;display:block;font-size:var(--etp-accent);font-weight:700;line-height:1;text-align:center;white-space:nowrap}
/* Ближе к правому краю сетки поповер уехал бы за рамку календаря — сдвигаем
   его влево тем же приёмом и по тем же клеткам, что у подрядчика. */
.ecocenter-calendar__date--open:nth-child(n+4) .ecocenter-event-popover {left:auto;right:0}

@media (min-width:768px) {
  .ecocenter-calendar__title {min-height:3.45rem}
  .ecocenter-calendar__header {min-height:2.2875rem}
  .ecocenter-calendar__date {min-height:2.8875rem}
  .ecocenter-calendar__row {min-height:2.8875rem}
  .ecocenter-event-popover {width:18rem}
  /* На широком экране подпись мероприятия в макете по центру плашки. */
  .ecocenter-event-popover__title {align-self:center;text-align:center}
}

@media (min-width:1000px) {
  .ecocenter-calendar__title {min-height:4.14rem}
  .ecocenter-calendar__header {min-height:2.745rem}
  .ecocenter-calendar__date {min-height:3.465rem}
  .ecocenter-calendar__arrow .icon {height:.75rem;width:1.125rem}
  .ecocenter-event-popover {width:22rem}
}

@media (min-width:3000px) {
  .ecocenter-calendar__title {min-height:5.75rem}
  .ecocenter-calendar__header {min-height:3.8125rem}
  .ecocenter-calendar__date {min-height:4.8125rem}
  .ecocenter-calendar__date--event {border-width:3px}
  .ecocenter-calendar__arrow .icon {height:1rem;width:1.5rem}
  .ecocenter-event-popover {width:28rem}
  .ecocenter-event-popover__info {grid-template-columns:auto 8.375rem}
  .ecocenter-event-popover__image {height:7.75rem;width:7.75rem}
}

/* На телефоне поповер в клетку не помещается никак: календарь 324px, клетка
   ~46px. Поэтому клетка перестаёт быть контейнером позиционирования
   (position:static), им становится сам .ecocenter-calendar — он
   position:relative, — и поповер садится на нижний край календаря во всю
   его ширину. Тот же приём у подрядчика (у него клетки библиотеки и не
   были relative, отсюда его сдвиги translateX по номеру колонки). */
@media (max-width:767.98px) {
  .ecocenter-calendar {margin-inline:auto;max-width:20.25rem}
  .ecocenter-calendar__date {position:static}
  .ecocenter-event-popover {bottom:-1px;left:-1px;right:-1px;top:auto;width:auto}
  .ecocenter-calendar__date--open:nth-child(n+4) .ecocenter-event-popover {left:-1px;right:-1px}
  .ecocenter-event-popover__event {align-items:center;grid-template-columns:1fr auto}
  .ecocenter-event-popover__time {padding:.375rem}
}

/* --- Врезка «подать заявку на проведение мероприятия» ---------------- */

.ecocenter-apply {align-items:center;background-color:#fff;border-radius:.375rem;box-shadow:0 .0625rem .875rem rgba(0,0,0,.15);column-gap:.875rem;display:grid;grid-template-columns:6.5625rem auto;padding:.375rem .9375rem .375rem .375rem}
.ecocenter-apply--no-image {grid-template-columns:auto;padding:.9375rem}
.ecocenter-apply__image {border-radius:.375rem;height:6.5625rem;object-fit:cover;width:6.5625rem}
.ecocenter-apply__body {align-items:center;display:flex;font-size:var(--etp-text);font-weight:500;gap:.875rem;line-height:1.25}
.ecocenter-apply__body p {margin-bottom:0}
/* Кнопка живёт вне .feedback-form, формные метрики её не достают — задаём
   явно, как у «Записаться»/«Показать ещё» (DESIGN.md, «Формы: единая
   шкала полей и кнопок»). */
.ecocenter-apply__body .btn {--bs-btn-padding-x:1.17em;--bs-btn-padding-y:.5em;--bs-btn-font-size:var(--etp-text);--bs-btn-font-weight:700;--bs-btn-line-height:1;--bs-btn-border-radius:.25rem;align-items:center;background-color:#5fb9bd;border:1px solid #5fb9bd;color:#fff;display:inline-flex;min-height:2.1875rem;white-space:nowrap}
.ecocenter-apply__body .btn:focus-visible,.ecocenter-apply__body .btn:hover {background-color:#519da1;border-color:#519da1;color:#fff}

@media (min-width:768px) {
  .ecocenter-apply {column-gap:3.75rem;grid-template-columns:6.15rem auto;padding:.5rem 1.875rem .5rem .5rem}
  .ecocenter-apply--no-image {grid-template-columns:auto;padding:1.25rem 1.875rem}
  .ecocenter-apply__image {height:6.15rem;width:6.15rem}
  .ecocenter-apply__body {gap:.625rem}
  .ecocenter-apply__body .btn {--bs-btn-padding-x:2em;min-height:2.7rem}
}

@media (min-width:1000px) {
  .ecocenter-apply {column-gap:4.375rem;grid-template-columns:7.38rem auto;padding:.625rem 2.25rem .625rem .625rem}
  .ecocenter-apply--no-image {grid-template-columns:auto;padding:1.5rem 2.25rem}
  .ecocenter-apply__image {height:7.38rem;width:7.38rem}
  .ecocenter-apply__body {gap:.75rem}
  .ecocenter-apply__body .btn {--bs-btn-padding-x:2.85em;min-height:3.24rem}
}

@media (min-width:3000px) {
  .ecocenter-apply {column-gap:6.625rem;grid-template-columns:10.25rem auto;padding:.875rem 3.125rem .875rem .875rem}
  .ecocenter-apply--no-image {grid-template-columns:auto;padding:2rem 3.125rem}
  .ecocenter-apply__image {height:10.25rem;width:10.25rem}
  .ecocenter-apply__body {gap:.875rem}
  .ecocenter-apply__body .btn {min-height:4.5rem}
}

/* На телефоне текст и кнопка встают друг под друга. */
@media (max-width:767.98px) {
  .ecocenter-apply__body {flex-direction:column;text-align:center}
}

/* --- Правила приёма: аккордеон и слайдер плакатов -------------------- */

.ecocenter-rules-heading {font-size:var(--etp-title);font-weight:700;margin-bottom:1.125rem}
.ecocenter-rules-item {border-top:1px solid #c1c4c7}
.ecocenter-rules-item:last-child {border-bottom:1px solid #c1c4c7}
/* Кнопка-заголовок: без фона и рамки, стрелка справа — как в макете.
   Стрелка у подрядчика — фоновая картинка data-URI; здесь общая иконка
   спрайта #arrow-down, тот же приём, что во всех аккордеонах сайта. */
.ecocenter-rules-item__button .accordion-button {background:none;border:0;box-shadow:none;color:#1f2933;display:flex;font-size:var(--etp-text);font-weight:500;gap:1rem;justify-content:space-between;line-height:1.2;padding:.9375rem 0;text-transform:uppercase;width:100%}
.ecocenter-rules-item__button .accordion-button::after {content:none}
.ecocenter-rules-item__button .accordion-button .icon {color:#5fb9bd;flex:none;height:.6em;transition:transform .35s ease;width:1.1em}
.ecocenter-rules-item__button .accordion-button:not(.collapsed) .icon {transform:scaleY(-1)}
.ecocenter-rules-item__body .accordion-body {padding:.875rem 0 1.875rem}
.ecocenter-rules-common {text-align:center}
.ecocenter-rules-common img {border-radius:.375rem;height:auto;max-width:100%}

@media (min-width:768px) {
  .ecocenter-rules-item__button .accordion-button {padding:1.275rem 0}
  .ecocenter-rules-item__body .accordion-body {padding:2.475rem 0 3.9rem}
  .ecocenter-rules-common img {max-width:24.525rem}
}
@media (min-width:1000px) {
  .ecocenter-rules-item__button .accordion-button {padding:1.53rem 0}
  .ecocenter-rules-item__body .accordion-body {padding:2.97rem 0 4.68rem}
  .ecocenter-rules-common img {max-width:29.43rem}
}
@media (min-width:3000px) {
  .ecocenter-rules-item__button .accordion-button {padding:2.125rem 0}
  .ecocenter-rules-item__body .accordion-body {padding:4.125rem 0 6.5rem}
  .ecocenter-rules-common img {max-width:40.875rem}
}

/* Контейнер с отрицательными полями — чтобы тень слайда и стрелки не
   обрезались overflow:hidden самого swiper'а (приём подрядчика). */
/* Правка 23.09.2026: с тремя плакатами в ряд (правка клиента 13.08)
   боковые поля контейнера показывали кусок следующего плаката за краем
   блока — «вылезает». Сбоку поля обнулены: лента режется ровно по краю,
   сверху и снизу поля остаются под тень и точки пагинации. */
.rules-slider-container {margin:-1.25rem 0 0;overflow:hidden;padding:1.25rem 0}
.rules-slider {overflow:visible}
/* Стрелки — белые круглые кнопки у краёв ленты (23.09.2026). Макет
   ставил голую бирюзовую стрелку в поле рядом с ОДНИМ плакатом; с тремя
   в ряд она легла на жёлтую рамку плаката и пропала. На белой подложке
   с тенью стрелка видна поверх любого плаката. Упёрлись в край — стрелка
   прячется совсем: полупрозрачная читалась как «сломалось». */
.rules-slider .swiper-button-prev,.rules-slider .swiper-button-next {align-items:center;background-color:#fff;border-radius:2.5em;box-shadow:0 .125rem .5rem rgba(0,0,0,.2);color:#5fb9bd;cursor:pointer;display:flex;height:2.5rem;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .2s;z-index:2}
.rules-slider .swiper-button-prev .icon,.rules-slider .swiper-button-next .icon {height:45%;width:auto}
.rules-slider .swiper-button-prev {left:.5rem}
.rules-slider .swiper-button-prev .icon {transform:scaleX(-1)}
.rules-slider .swiper-button-next {right:.5rem}
.rules-slider .swiper-button-disabled {opacity:0;pointer-events:none}
.rules-slider .swiper-pagination {bottom:-1.25rem;column-gap:.375rem;display:flex;justify-content:center;left:0;line-height:0;position:absolute;right:0}
.rules-slider .swiper-pagination-bullet {background-color:#1f2933;border:0;cursor:pointer;height:.15625rem;padding:0;width:1.75rem}
.rules-slider .swiper-pagination-bullet-active {background-color:#5fb9bd}
/* Высота слайда фиксирована, ширину картинке даёт пропорция — так плакат
   виден целиком и одинаково крупно во всех категориях. Ссылка-обёртка
   (лайтбокс, .eco-poster-link) должна тянуться на всю высоту слайда,
   иначе картинка внутри неё теряет 100%-высоту. */
.rules-slide {height:17.25rem;text-align:center}
.rules-slide .eco-poster-link {display:inline-block;height:100%}
.rules-slide img {border-radius:.375rem;box-shadow:.0625rem .0625rem .625rem rgba(0,0,0,.15);height:100%;width:auto}

@media (min-width:768px) {
  .rules-slider-container {margin:-2.025rem 0 0;padding:2.025rem 0}
  .rules-slider .swiper-button-prev {left:.75rem}
  .rules-slider .swiper-button-next {right:.75rem}
  .rules-slider .swiper-pagination {bottom:-2.025rem;column-gap:.75rem}
  .rules-slider .swiper-pagination-bullet {height:.1875rem;width:3.15rem}
  .rules-slide {height:33.225rem}
}
@media (min-width:1000px) {
  .rules-slider-container {margin:-2.43rem 0 0;padding:2.43rem 0}
  .rules-slider .swiper-button-prev {left:1rem}
  .rules-slider .swiper-button-next {right:1rem}
  .rules-slider .swiper-pagination {bottom:-2.43rem;column-gap:.9rem}
  .rules-slider .swiper-pagination-bullet {height:.225rem;width:3.78rem}
  .rules-slide {height:39.87rem}
}
@media (min-width:3000px) {
  .rules-slider-container {margin:-3.375rem 0 0;padding:3.375rem 0}
  .rules-slider .swiper-button-prev {left:1.25rem}
  .rules-slider .swiper-button-next {right:1.25rem}
  .rules-slider .swiper-pagination {bottom:-3.375rem;column-gap:1.25rem}
  .rules-slider .swiper-pagination-bullet {height:.3125rem;width:5.25rem}
  .rules-slide {height:55.375rem}
}
/* ==== КОНЕЦ БЛОКА ЭКОЦЕНТРА ==== */

/* ══════════════════════════════════════════════════════════════════════
   «Прямые договоры с жителями Москвы»: аккордеон округов
   (переверстка 12.08.2026).
   ══════════════════════════════════════════════════════════════════════
   Семья классов .contracts-list / .contracts-item / __button / __body —
   из нового макета подрядчика (site/regional-contracts.html). Раньше
   страница была набрана .contracts-districts; сам класс остаётся жить в
   вёрстке подрядчика выше маркера, но эту страницу больше не оформляет.
   Имена менять нельзя ни при какой правке вида: на .contracts-item и
   .contracts-locations > li завязан живой поиск по ~2100 адресам
   (templates/regop-contracts.php, addressSearchScript).

   РЕШЕНИЕ ВЛАДЕЛЬЦА 12.08.2026 — аккордеонов на сайте два вида, и разница
   осознанная:
     - СПИСКИ (эта страница, правила экоцентра, места колоколов) — одна
       карточка-контейнер вокруг всего списка, строки внутри разделены
       тонкой линией, шеврон справа;
     - ВОПРОСЫ-ОТВЕТЫ (.regional-faq-item) — отдельная карточка в
       бирюзовой рамке на каждый вопрос, тоже шеврон.
   Общими обязаны остаться кегль, ритм отступов, цвет маркера, поведение
   фокуса и скорость анимации.

   ОТКУДА ЗНАЧЕНИЯ. Образец вида — аккордеон «Экопросвещения»
   (.education-faq, /regional-operator/environmental-education/), он же
   вёрстка подрядчика выше маркера. Геометрия перенесена дословно
   (паддинги карточки и ритм строк по четырём брейкпоинтам, вес 500,
   разворот стрелки при раскрытии), с четырьмя штатными заменами —
   первые три ровно те же, что делали агенты соседних страниц раздела:
     - скругление карточки 0.375rem вместо его 1.25rem (DESIGN.md,
       «Скругления»: разрешены только 0.375 / 0.25 / 2.5em);
     - кегль var(--etp-text) вместо литералов .75 → 1.125 → 1.375 →
       1.875rem. Это та же роль «основной текст», и та же переменная
       стоит у .regional-info-item и .ecocenter-rules-item — иначе три
       аккордеона сайта разошлись бы по кеглю;
     - шеврон — символ спрайта #arrow-down в разметке, а не фоновая
       картинка data:image/svg+xml у ::after (DESIGN.md, «Изображения»).
       Отсюда же flex-раскладка кнопки вместо его padding-right: 3em с
       абсолютно спозиционированной стрелкой. Размеры значка в em
       (.6em × 1.1em — пропорция его же 29×16), чтобы рос вместе с
       кеглем; те же числа у .ecocenter-rules-item;
     - text-transform: uppercase у подрядчика НЕ переносится (решение
       владельца 12.08.2026: капса на сайте нет нигде, заголовки идут тем
       начертанием, что лежит в контенте). На самом «Экопросвещении» капс
       уберут отдельным общим проходом — не «чинить» это здесь обратно
       при следующей сверке с вёрсткой подрядчика.
   Длительность анимации — .35s ease, как у маркера .regional-info-item:
   у подрядчика стрелка переворачивается мгновенно, но «скорость анимации»
   входит в список общего для обеих семей.
   ══════════════════════════════════════════════════════════════════════ */

.contracts-list {border:1px solid #c1c4c7;border-radius:.375rem;margin-bottom:1.875rem;padding:1.75rem 1.5rem}
.contracts-item:not(:first-child) {border-top:1px solid #c1c4c7;margin-top:1.75rem;padding-top:1.75rem}
.contracts-item__button .accordion-button {align-items:center;background:none;border:0;box-shadow:none;color:#1f2933;display:flex;font-size:var(--etp-text);font-weight:500;gap:1rem;justify-content:space-between;line-height:1.2;padding:0;text-align:left;width:100%}
.contracts-item__button .accordion-button::after {content:none}
.contracts-item__button .accordion-button .icon {color:#5fb9bd;flex:none;height:.6em;transition:transform .35s ease;width:1.1em}
.contracts-item__button .accordion-button:not(.collapsed) .icon {transform:scaleY(-1)}
.contracts-item__body .accordion-body {padding:1.5rem 0 0}

@media (min-width:768px) {
  .contracts-list {padding:1.5rem 1.65rem}
  .contracts-item:not(:first-child) {margin-top:1.5rem;padding-top:1.5rem}
  .contracts-item__body .accordion-body {padding-top:1.125rem}
}
@media (min-width:1000px) {
  .contracts-list {padding:1.8rem 1.98rem}
  .contracts-item:not(:first-child) {margin-top:1.8rem;padding-top:1.8rem}
  .contracts-item__body .accordion-body {padding-top:1.35rem}
}
@media (min-width:3000px) {
  .contracts-list {padding:2.5rem 2.75rem}
  .contracts-item:not(:first-child) {margin-top:2.5rem;padding-top:2.5rem}
  .contracts-item__body .accordion-body {padding-top:1.875rem}
}

/* Список адресов внутри округа — имя класса из нового макета
   (.contracts-locations вместо прежнего .contracts-address-list).
   Геометрия и бирюзовый маркер — те же, что были: плитка в несколько
   колонок по ширине контейнера, точка в em, чтобы росла вместе с кеглем
   (DESIGN.md, «Единицы»). Ссылка на PDF-объявление красится как обычная
   текстовая ссылка сайта. Селектор `> li` важен: живой поиск по адресам
   в templates/regop-contracts.php адресуется ровно им.
   Круг у маркера — border-radius 2.5em, а не 50% как у вендорского
   .contracts-address-list: у квадрата .32em это тот же круг, а 50% ниже
   маркера не пропускает design_lint (DESIGN.md, «Скругления»).
 */
.contracts-locations {column-gap:1.5rem;display:flex;flex-wrap:wrap;font-size:var(--etp-text);line-height:1.3;list-style:none;margin-bottom:0;padding-left:0;row-gap:.5rem}
.contracts-locations>li {padding-left:.8em;position:relative}
.contracts-locations>li::before {background-color:#5fb9bd;border-radius:2.5em;content:"";height:.32em;inset-block-start:.65em;inset-inline-start:0;position:absolute;transform:translateY(-50%);width:.32em}
.contracts-locations a {color:#5fb9bd}
.contracts-locations a:hover {color:#519da1}

/* Модификатор --lg — вкладка «Расторжение прямых договоров»: там список
   лежит прямо во вкладке, без аккордеона и без карточки (так в новом
   макете, строка 515 site/regional-contracts.html). Раньше вкладка
   притворялась аккордеоном без единой кнопки-заголовка, и воздух сверху
   ей возвращал хак .contracts-districts--plain — теперь его роль у --lg.
   Отступ равен верхнему паддингу карточки соседних вкладок на том же
   брейкпоинте, чтобы текст начинался на той же высоте, а не подбирался
   на глаз. */
.contracts-locations--lg {padding-block-start:1.75rem}

@media (min-width:768px) {
  .contracts-locations--lg {padding-block-start:1.5rem}
}
@media (min-width:1000px) {
  .contracts-locations--lg {padding-block-start:1.8rem}
}
@media (min-width:3000px) {
  .contracts-locations--lg {padding-block-start:2.5rem}
}

/* H1 «Прямые договоры с жителями Москвы» — в одну строку (правка клиента
   19.08.2026). .page-heading — общий класс H1 почти всех страниц сайта
   (см. templates/*.php), у него своя, НАМЕРЕННО узкая лесенка max-width
   (27rem/32.4rem/45rem по брейкпоинтам 768/1000/3000px) — так короткие
   заголовки вроде «Региональный оператор» центрируются по ширине текста,
   а не тянутся во всю ширину страницы. Заголовок этой страницы длиннее и
   на тех же max-width переносится на две строки — этой странице отдельный
   модификатор, ГЛОБАЛЬНЫЙ .page-heading не трогаем (у остальных страниц
   заголовки короче и перенос им не мешает, менять базовую лесенку
   означало бы чинить то, что не сломано).

   Числа — фактическая ширина текста в одну строку на каждом брейкпоинте
   (замер playwright, «Прямые договоры с жителями Москвы» полужирным при
   актуальном кегле .page-heading), с запасом: 768px-тир — 513.8px факт,
   34rem (544px); 1000px-тир — 616.6px факт, 40rem (640px); 3000px-тир —
   пропорционально шире исходного 45rem, взят с тем же запасом. Контейнер
   (.section--inner) на обоих тирах в разы шире (660px и 808px+
   соответственно на измеренных ширинах) — влезает свободно.

   Мобильный тир (<768px, без media) НЕ ТРОГАЕМ: там перенос неизбежен
   без резкого проседания кегля (та же логика, что в другом месте этого
   файла — «мобильные не трогаем», правка баннера 18.08.2026) и в задаче
   мобильный вид явно не требовался. */
/* Подзаголовок подрайона внутри сведённого пункта ТиНАО (правка клиента
   19.08.2026, "8 подрайонов сложить под ОДИН аккордеон... с внутренним
   разделением по районам") — см. $renderGroupedAccordionItem в
   regop-contracts.php. Кегль/цвет — на ступень тише самого адреса
   (.contracts-locations уже var(--etp-text)), жирность отличает подпись
   от адресов, не вводя новый цвет/паттерн в семью .contracts-*. */
.contracts-group-heading{color:#5a6572;font-size:var(--etp-note);font-weight:700;margin:1.25rem 0 .5rem}
.contracts-group-heading:first-child{margin-top:0}

.page-heading--contracts{max-width:none}
@media (min-width:768px){
  .page-heading--contracts{max-width:34rem}
}
@media (min-width:1000px){
  .page-heading--contracts{max-width:40rem}
}
@media (min-width:3000px){
  .page-heading--contracts{max-width:56rem}
}

/* ══════════════════════════════════════════════════════════════════════
   ЕДИНЫЙ РАДИУС КАРТОЧЕК С СЕРОЙ РАМКОЙ.
   ══════════════════════════════════════════════════════════════════════
   Правка клиента 12.08.2026: «а что у тебя со скруглениями серой рамки?
   почему оно везде разное? нужно как в environmental-education».

   Разнобой пришёл из вёрстки подрядчика: у него ВОСЕМЬ разных радиусов у
   блоков с рамкой — 1.25 / 0.9375 / 0.75 / 0.625 / 0.5 / 0.375 / 0.3125 и
   1rem. Наша зона при этом была единообразной, но зажатой дизайн-кодом в
   0.375rem, поэтому новые карточки заметно контрастировали со старыми.
   Эталон выбран владельцем — карточка «Вопросы-ответы» на экопросвещении,
   1.25rem.

   Значение вынесено в ОДНУ переменную: сменить радиус карточек по всему
   сайту — правка одной строки. Литерал 1.25rem и сама переменная добавлены
   в ALLOWED_RADII линтера (tools/design_lint.py) с тем же обоснованием.

   Что СОЗНАТЕЛЬНО не входит в этот радиус:
     - кнопки (0.25rem) и «пилюли» (2.5em) — своя роль, DESIGN.md;
     - поля форм — у них вендорские 0.5rem и своя шкала по брейкпоинтам;
     - мелкие плашки ВНУТРИ карточек (превью документа, клетка календаря) —
       остаются 0.375rem, иначе вложенные скругления спорят с внешним;
     - .navbar-subnav — это выпадающее меню в шапке, не карточка контента;
     - .procurement-link a — чип-ссылка, тоже не карточка.
   ══════════════════════════════════════════════════════════════════════ */
:root{--etp-card-radius:1.25rem}

/* наши блоки */
.education-offer-item,.doc-card,.eco-table-wrap,.eco-accordion,
.regional-info-list,.regional-faq-item,.regional-acts,.regional-territory,
.ecocenter-about,.ecocenter-wastes,.ecocenter-calendar,.ecocenter-event-popover,
.contracts-list{border-radius:var(--etp-card-radius)}

/* карточки подрядчика, у которых радиус отличался */
.regop-card,.contracts-districts,.corruption-contacts,.areas-item,
.bells-section--1 .bells-content,.bells-section--image,.bells-contacts__body,
.bells-section--3,.envpolicy-news-item,.apply-info,.divisions-item,
.divisions-item__body,.education-event,.education-event__body,
.education-event__head,.education-faq,.union-about,.union-functions-item,
.article blockquote{border-radius:var(--etp-card-radius)}

/* ══════════════════════════════════════════════════════════════════════
   АККОРДЕОНЫ САЙТА: ТРИ РОЛИ, ОДИН НАБОР ПАРАМЕТРОВ.
   ══════════════════════════════════════════════════════════════════════
   Правка клиента 12.08.2026: «меня бесит, что у нас разные аккордеоны на
   разных страницах… нужен ux хороший, а не как попало».

   Было СЕМЬ независимых семей, каждая со своими отступами, размером
   шеврона и скоростью анимации: contracts-item, education-faq,
   education-accordion, ecocenter-rules-item, bells-locations-item,
   regional-info-item, regional-faq-item, плюс блок-конструктор
   eco-accordion. Разошлись они не по замыслу, а потому что каждую страницу
   переносили отдельно и в разное время.

   Свели к ТРЁМ ролям — роль определяется СОДЕРЖИМЫМ, а не тем, как
   исторически выглядела страница:

     A. СПИСОК — перечень, по которому ищут: округа договоров, места
        колоколов, категории правил экоцентра, блок-конструктор.
        Одна карточка-контейнер, строки внутри разделены линией.
     B. ВОПРОС-ОТВЕТ — каждый вопрос отдельной карточкой в бирюзовой
        рамке: юрлицам, физлицам и оба аккордеона экопросвещения.
     C. ДОКУМЕНТЫ — карточка со списком и маркером-плюсом: regional-info.
        Оставлена как есть по решению владельца.

   Экопросвещение переехало из роли A в роль B, хотя именно его контейнер
   был выбран образцом для роли A. Это не противоречие: понравился вид
   контейнера, а по содержимому там вопросы.

   Капса нет ни в одной роли (отдельная правка того же дня).

   ОБЩЕЕ У ВСЕХ ТРЁХ: кегль var(--etp-text), цвет заголовка #1f2933, цвет
   и размер шеврона, скорость анимации, поведение фокуса. Отличаются только
   контейнер и маркер — ровно то, что несёт смысл роли.
   ══════════════════════════════════════════════════════════════════════ */
:root{--etp-acc-line:#c1c4c7;--etp-acc-accent:#5fb9bd;--etp-acc-speed:.28s}

/* ── общее для всех ролей ── */
.contracts-item__button .accordion-button,

.ecocenter-rules-item__button .accordion-button,
.eco-accordion__header .accordion-button,
.regional-faq-item__button .accordion-button,
.education-faq-item__button .accordion-button,
.education-accordion-item__button .accordion-button{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;background:none;border:0;box-shadow:none;text-align:left;
  color:#1f2933;font-size:var(--etp-text);font-weight:500;line-height:1.3;
  text-transform:none}
.contracts-item__button .accordion-button::after,
.ecocenter-rules-item__button .accordion-button::after,
.eco-accordion__header .accordion-button::after,
.regional-faq-item__button .accordion-button::after,
.education-faq-item__button .accordion-button::after,
.education-accordion-item__button .accordion-button::after{content:none}
.contracts-item__button .accordion-button .icon,
.ecocenter-rules-item__button .accordion-button .icon,
.eco-accordion__header .accordion-button .icon,
.regional-faq-item__button .accordion-button .icon,
.education-faq-item__button .accordion-button .icon,
.education-accordion-item__button .accordion-button .icon{
  color:var(--etp-acc-accent);flex:none;width:1.1em;height:.6em;
  transform:scaleY(-1);transition:transform var(--etp-acc-speed) ease}
.contracts-item__button .accordion-button.collapsed .icon,
.ecocenter-rules-item__button .accordion-button.collapsed .icon,
.eco-accordion__header .accordion-button.collapsed .icon,
.regional-faq-item__button .accordion-button.collapsed .icon,
.education-faq-item__button .accordion-button.collapsed .icon,
.education-accordion-item__button .accordion-button.collapsed .icon{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){
  .contracts-item__button .accordion-button .icon,
  .ecocenter-rules-item__button .accordion-button .icon,
  .eco-accordion__header .accordion-button .icon,
  .regional-faq-item__button .accordion-button .icon,
  .education-faq-item__button .accordion-button .icon,
  .education-accordion-item__button .accordion-button .icon{transition:none}}

/* ── роль A: список ── */
.contracts-list,.ecocenter-rules,.eco-accordion{
  border:1px solid var(--etp-acc-line);border-radius:var(--etp-card-radius);
  background:#fff;padding:1.75rem 1.5rem;margin-bottom:1.875rem}
.contracts-item:not(:first-child),
.ecocenter-rules-item:not(:first-child),.eco-accordion__item:not(:first-child){
  border-top:1px solid var(--etp-acc-line);margin-top:1.75rem;padding-top:1.75rem}
.ecocenter-rules-item,.eco-accordion__item{border:0;border-radius:0}

/* ── роль B: вопрос-ответ ── */
.education-faq,.education-accordion{border:0;border-radius:0;background:none;padding:0}
/* Радиус — общий для карточек сайта (13.08.2026: «закругление углов у
   вопрос-ответ не соответствует нашему стандарту у других блоков, везде
   поправить надо»). Было .375rem: роль писалась раньше, чем завели
   --etp-card-radius, и осталась с мелким скруглением, пока соседние
   карточки уехали на 1.25rem. */
.regional-faq-item,.education-faq-item,.education-accordion-item{
  border:1px solid var(--etp-acc-accent);border-radius:var(--etp-card-radius);
  background:#fff;padding:1.125rem 1.25rem}
.regional-faq-item:not(:first-child),.education-faq-item:not(:first-child),
.education-accordion-item:not(:first-child){
  border-top:1px solid var(--etp-acc-accent);margin-top:1rem;padding-top:1.125rem}

/* Линия под ПОСЛЕДНИМ пунктом аккордеона не нужна никогда (правка клиента
   12.08.2026). Осталась от переверстки экоцентра: правило
   `.ecocenter-rules-item:last-child{border-bottom}` рисовало разделитель
   там, где дальше уже нижняя граница самой карточки, — получалась двойная
   черта у дна. Разделители в роли «список» ставит только правило
   `:not(:first-child){border-top}`, то есть строго МЕЖДУ пунктами. */
.ecocenter-rules-item:last-child{border-bottom:0}

/* ── аккордеоны: единые отступы (правка клиента 12.08.2026, второй заход) ──
   В первом заходе свели цвет, кегль и иконку, но НЕ свели отступы: у
   экоцентра кнопка несла padding 1.275rem, у договоров — ноль, тела блоков
   тоже расходились (2.475rem против 1.5rem). Строки получались разной
   высоты, и разница читалась именно как «на каждой странице свой аккордеон»,
   хотя цвета уже совпадали.

   Вертикальный ритм в роли «список» задаёт РАЗДЕЛИТЕЛЬ строки
   (margin-top/padding-top у :not(:first-child)), поэтому у кнопки паддинг
   нулевой — иначе отступ считался бы дважды и строки распухали. */
.contracts-item__button .accordion-button,

.ecocenter-rules-item__button .accordion-button,
.eco-accordion__header .accordion-button,
.regional-faq-item__button .accordion-button,
.education-faq-item__button .accordion-button,
.education-accordion-item__button .accordion-button{padding:0}
.contracts-item__body .accordion-body,
.ecocenter-rules-item__body .accordion-body,
.eco-accordion__body .accordion-body{padding:1.5rem 0 0}
.regional-faq-item__body .accordion-body,
.education-faq-item__body .accordion-body,
.education-accordion-item__body .accordion-body{padding:1rem 0 0}

/* ══════════════════════════════════════════════════════════════════════
   Радиокнопки в формах: свой размер, не чекбоксовый.
   ══════════════════════════════════════════════════════════════════════
   Правка клиента 12.08.2026: «в формах радиобаттоны не доделаны, криво
   сверстано».

   Причина: класс .form-checklist писался подрядчиком под КРУПНЫЕ чекбоксы
   визарда заявки — он задаёт полю 2em и сдвигает подпись на .25rem вниз.
   Когда правовой статус переехал с плиток .role-select на кружки, радио
   унаследовали этот размер: кружок в 32px рядом с обычным текстом и
   подпись, съехавшая от него по вертикали.

   Отдельный модификатор, а не :has(input[type=radio]): состояние
   .is-invalid и вся серверная валидация уже висят на самом контейнере, и
   явный класс в разметке надёжнее селектора по содержимому — его видно в
   исходнике и не надо гадать о поддержке браузером.
   ══════════════════════════════════════════════════════════════════════ */
/* Раскладка: поток по содержимому, а не сетка равных колонок. До правки
   контейнер был grid из трёх колонок по 385px, и короткая подпись
   «Юридическое лицо» оставляла до следующей колонки дыру в полэкрана
   (правка клиента 12.08.2026). Теперь пункты занимают ровно свою ширину и
   переносятся, если не влезли. */
/* align-items:center — иначе пункты встают на разной высоте: у флекса по
   умолчанию stretch, подписи разной длины дают разную высоту блока, и
   кружки «прыгают» по вертикали относительно друг друга (замер: 20px
   разницы между «Юридическое лицо» и «Физическое лицо»). */
.form-checklist--radio{display:flex;flex-wrap:wrap;align-items:center;column-gap:2.5rem;row-gap:.75rem;grid-template-columns:none}
.form-checklist--radio .form-check{display:flex;align-items:center;min-height:0;margin-top:0;margin-bottom:0}
.form-checklist--radio .form-check-label{line-height:1.3}
.form-checklist--radio .form-check{width:auto;margin-right:0;padding-left:2.35em}
.form-checklist--radio .form-check-input{width:1.5em;height:1.5em;margin-left:-2.35em;margin-top:0}
.form-checklist--radio .form-check-label{padding-top:0}

/* ── аккордеоны: добивка после замера на живой странице (12.08.2026) ──
   1. Кегль. Правило подрядчика адресовано ИДЕНТИФИКАТОРОМ
      (`#education-tips .education-accordion-item__button .accordion-button`,
      до 2.1875rem на широком экране) и по специфичности перебивало наш
      классовый селектор — «Памятки» шли кеглем 35px против 25px у соседей.
      Тот же селектор с идентификатором — единственный способ это выровнять,
      не трогая вендорскую часть файла.
   2. Разделитель между вопросом и ответом (правка клиента: «я бы вопрос
      всегда отделял разделителем от текста»). Ставится на ТЕЛО блока, а не
      на кнопку: у свёрнутого пункта тела нет, значит и лишней черты под
      заголовком не появится. */
#education-tips .education-accordion-item__button .accordion-button{font-size:var(--etp-text)}

.regional-faq-item__body .accordion-body,
.education-faq-item__body .accordion-body,
.education-accordion-item__body .accordion-body{
  border-top:1px solid var(--etp-acc-accent);margin-top:1rem;padding-top:1rem}

/* ══════════════════════════════════════════════════════════════════════
   АККОРДЕОНЫ: СБРОС ВЕНДОРСКОГО ДЕКОРА, ПОТОМ ЕДИНЫЙ ВИД.
   ══════════════════════════════════════════════════════════════════════
   Третий и последний заход (12.08.2026). Первые два правили отдельные
   свойства и каждый раз что-то вылезало заново — потому что чинилось
   следствие, а не причина.

   ПРИЧИНА. Подрядчик оформляет внутренности каждого аккордеона отдельно и
   на ЧЕТЫРЁХ брейкпоинтах: у «Памяток» кнопка залита серым #c1bfbf с белым
   текстом и своим радиусом, внутри тела лежит ещё одна карточка
   (.education-accordion-item__content с рамкой и скруглением — тот самый
   «блок внутри»), у колоколов шапка залита бирюзовым с белым текстом и
   сеткой из двух ячеек, у вопросов-ответов кнопка капсом с картинкой-
   стрелкой в ::after. Пока эти правила живы, любое наше точечное
   выравнивание перебивается на каком-нибудь брейкпоинте.

   РЕШЕНИЕ. Сначала гасим декор у ВСЕХ семей разом — фон, цвет, радиус,
   минимальную высоту, паддинги, псевдоэлемент-стрелку, капс. Потом
   применяем ровно один набор правил на роль. Порядок важен: сброс обязан
   идти до применения, иначе он затрёт то, что мы только что задали.

   Что НЕ сбрасывается: таблица адресов внутри пункта колоколов
   (.bells-locations-item__row и её ячейки) — это содержимое, а не декор
   аккордеона, и своя сетка ей нужна.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. сброс декора ── */
.contracts-item__button .accordion-button,

.ecocenter-rules-item__button .accordion-button,
.eco-accordion__header .accordion-button,
.regional-faq-item__button .accordion-button,
.education-faq-item__button .accordion-button,
.education-accordion-item__button .accordion-button{
  background:none;background-color:transparent;color:#1f2933;
  border:0;border-radius:0;box-shadow:none;min-height:0;padding:0;
  text-transform:none;font-size:var(--etp-text);font-weight:500;line-height:1.3}
.education-accordion-item__content{border:0;border-radius:0;padding:0}

/* ── 2. единый вид строки: текст слева, шеврон справа ── */
.contracts-item__button .accordion-button,

.ecocenter-rules-item__button .accordion-button,
.eco-accordion__header .accordion-button,
.regional-faq-item__button .accordion-button,
.education-faq-item__button .accordion-button,
.education-accordion-item__button .accordion-button{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;text-align:left}

/* Шеврон — участник строки, а не наложение. У колоколов вендор ставил
   иконке position:absolute с прижатием вправо, из-за чего она ложилась
   ПОВЕРХ счётчика «14 мест установки (28 контейнеров)» (замер: правый край
   текста 1297px, левый край иконки 1246px — наезд на 51px). В общей роли
   строка раскладывается флексом, поэтому иконка обязана быть в потоке. */
.contracts-item__button .accordion-button .icon,
.ecocenter-rules-item__button .accordion-button .icon,
.eco-accordion__header .accordion-button .icon,
.regional-faq-item__button .accordion-button .icon,
.education-faq-item__button .accordion-button .icon,
.education-accordion-item__button .accordion-button .icon{position:static;inset:auto}

/* Роль «документы» (маркер-плюс) сохраняет свой маркер, но контейнер у неё
   тот же, что у списков: до правки вертикальный паддинг был 20px против
   28px — карточки на соседних страницах выглядели разной плотности. */
.regional-info-list{padding:1.75rem 1.5rem}

/* ══════════════════════════════════════════════════════════════════════
   ИСКЛЮЧЕНИЕ ИЗ ЕДИНОГО ВИДА АККОРДЕОНОВ: места размещения колоколов.
   ══════════════════════════════════════════════════════════════════════
   Решение владельца 12.08.2026: «в колоколах это исключение, там таблица
   типа, а она берёт стили как на странице экологической политики — давай
   там откатим стиль обратно и добавим её в исключения».

   Обоснование по существу: у .bells-locations внутри пункта не текст, а
   ТАБЛИЦА адресов — три колонки (тип объекта, адрес, количество) с сеткой
   и разделителями ячеек. Общий вид роли «список» рассчитан на строку
   «заголовок плюс шеврон» и таблице мешает: у неё своя типографика, свои
   границы ячеек и своя шапка, которая у подрядчика залита фирменным цветом
   и делит строку на две ячейки — заголовок округа и счётчик мест.

   Поэтому колокола НАМЕРЕННО не входят ни в сброс вендорского декора, ни в
   правила ролей выше. Их семья .bells-locations* оформлена подрядчиком и
   остаётся как есть.

   ЕСЛИ БУДЕТЕ СВОДИТЬ АККОРДЕОНЫ ЕЩЁ РАЗ: не добавляйте сюда
   .bells-locations-item__header — это не пропущенный случай, а осознанное
   исключение. Раньше оно было причиной двух дефектов: шеврон подрядчика
   позиционирован абсолютно и при общей флекс-раскладке ложился поверх
   счётчика, а сброс фона убирал шапку таблицы.
   ══════════════════════════════════════════════════════════════════════ */

/* Колокола (исключение выше): колонка счётчика расширена под новый текст.
   Подпись округа раньше была короткой — «13 точек», и подрядчик отвёл ей
   25.5–28% ширины. После правки клиента 12.08.2026 там считается
   «14 мест установки (28 контейнеров)»: строка вдвое длиннее, в прежнюю
   колонку не влезала, переносилась на две строки и наезжала на стрелку,
   которая у подрядчика позиционирована абсолютно.
   Ширина колонки увеличена, справа освобождено место под стрелку. */
.bells-locations-item__header .accordion-button{grid-template-columns:auto 38%}
.bells-locations-item__total{padding-right:2.25rem}
@media (min-width:3000px){.bells-locations-item__header .accordion-button{grid-template-columns:auto 34%}}

/* Ссылка «скачать» в материалах — см. общий класс .file-download ниже. */
.education-materials-item__download .link-more{
  border:0;border-radius:0;background:none;width:auto;height:auto;padding:0;
  color:#5fb9bd;font-size:var(--etp-note);font-weight:700;gap:.4em}
.education-materials-item__download .link-more:hover,
.education-materials-item__download .link-more:focus-visible{color:#519da1}
.education-materials-item__download .link-more .icon-arrow-down-thin{
  margin-left:0;transform:none}

/* Радиокнопка обязана быть круглой. Вендор задаёт кругление радио через
   процентное значение, но в этом проекте более специфичные правила форм
   перебивают его радиусом 5px, и переключатель правового статуса выглядел
   квадратиком — неотличимо от чекбокса согласия рядом (правка клиента
   12.08.2026). Берём 2.5em: при равных ширине и высоте это тот же круг, но
   значение входит в разрешённый дизайн-кодом набор, см. DESIGN.md. */
.form-checklist--radio .form-check-input[type=radio]{border-radius:2.5em}

/* ══════════════════════════════════════════════════════════════════════
   Округа в заявке — сетка чекбоксов (правка клиента 12.08.2026).
   ══════════════════════════════════════════════════════════════════════
   Было: один выпадающий список плюс кнопка «+ Добавить округ», которая
   скриптом клонировала строку. Чтобы выбрать три округа, посетитель делал
   семь действий и нигде не видел выбранное целиком.

   Стало: все двенадцать округов на экране разом. Раскладка — колонки по
   ширине содержимого, а не жёсткое число: названия разной длины («ЦАО» и
   «Троицкий и Новомосковский»), при фиксированных трёх колонках короткие
   оставляли бы дыры. minmax не даёт колонке схлопнуться уже подписи.

   Отступ между колонками крупнее межстрочного: так глаз читает список
   по вертикали (по колонкам), а не змейкой.
   ══════════════════════════════════════════════════════════════════════ */
.form-checklist--districts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  column-gap:2rem;row-gap:.75rem;margin-top:.5rem}
.form-checklist--districts .form-check{width:auto;margin-right:0;padding-left:2.35em}
.form-checklist--districts .form-check-input{width:1.5em;height:1.5em;margin-left:-2.35em;margin-top:0}
.form-checklist--districts .form-check-label{padding-top:0}
@media (max-width:767.98px){.form-checklist--districts{grid-template-columns:1fr}}


/* ══════════════════════════════════════════════════════════════════════
   КНОПКИ-ПИЛЮЛИ — ЕДИНЫЙ КОМПОНЕНТ. Один блок на весь сайт.
   ══════════════════════════════════════════════════════════════════════
   Собран заново 12.08.2026 после нескольких неудачных заходов. Предыдущие
   правки ПЕРЕЧИСЛЯЛИ семьи по мере обнаружения и наслаивались друг на
   друга: находилась ещё одна страница — дописывался ещё один селектор.
   Все те блоки удалены, здесь описание целиком.

   ГДЕ ЖИВУТ ПИЛЮЛИ (полный список, других на сайте нет — проверено
   грепом по разметке):
     .content-tabs .nav-link   — вкладки страницы, ПЕРВЫЙ уровень
     .materials-tabs .nav-link — подвкладки материалов, ВТОРОЙ уровень
     .docs-list .nav-link      — кнопки документов (годы на антикоррупции,
                                 «Скачать» в списках), ВТОРОЙ уровень
     .link-tag--primary        — плашки-ссылки, первый уровень
     .link-tag--secondary      — теги новостей и плашки, второй уровень

   ПРАВИЛО (решение владельца):
     — по умолчанию БЕЛАЯ с цветной обводкой и цветным текстом;
     — цвет = уровень: бирюзовый #5fb9bd первый, зелёный #a1c778 второй;
     — при наведении заливается СВОИМ цветом. Бирюзовая остаётся бирюзовой:
       перекрашивание бирюзовых в зелёный при наведении было ошибкой
       прошлого захода — цвет означает уровень, и менять его на ходу значит
       врать пользователю о том, куда он попадёт;
     — активный пункт залит своим цветом.

   Размеры НЕ трогаем: у каждой семьи своя шкала по брейкпоинтам, и попытка
   свести их к одной сделала вкладки мельче, чем были.
   ══════════════════════════════════════════════════════════════════════ */

/* база: форма, отсутствие капса, плавный переход */
.content-tabs .nav-link,
.materials-tabs .nav-link,
.docs-list .nav-link,
.link-tag{
  border-radius:2.5em;text-transform:none;text-decoration:none;
  background-color:#fff;border:1px solid currentColor;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}

/* первый уровень — бирюзовый */
.content-tabs .nav-link,
.link-tag--primary{color:#5fb9bd}
.content-tabs .nav-link:not(.active):hover,
.content-tabs .nav-link:not(.active):focus-visible,
.link-tag--primary:hover,.link-tag--primary:focus-visible{
  background-color:#5fb9bd;border-color:#5fb9bd;color:#fff}
.content-tabs .nav-link.active{background-color:#5fb9bd;border-color:#5fb9bd;color:#fff}

/* второй уровень — зелёный */
.materials-tabs .nav-link,
.docs-list .nav-link,
.link-tag--secondary{color:#a1c778}
.materials-tabs .nav-link:not(.active):hover,
.materials-tabs .nav-link:not(.active):focus-visible,
.docs-list .nav-link:hover,.docs-list .nav-link:focus-visible,
.link-tag--secondary:hover,.link-tag--secondary:focus-visible{
  background-color:#a1c778;border-color:#a1c778;color:#fff}
.materials-tabs .nav-link.active{background-color:#a1c778;border-color:#a1c778;color:#fff}

/* Одинаковый воздух вокруг РЯДА кнопок на всех страницах (правка клиента:
   «сделай сразу у них отступы снизу и сверху одинаковые на всех страницах»).
   Раньше каждая семья несла свои margin, и ряд то прижимался к заголовку,
   то отрывался от содержимого. */
.content-tabs,.materials-tabs,.news-tags-index{margin:1.5rem 0 2rem}
@media (min-width:3000px){.content-tabs,.materials-tabs,.news-tags-index{margin:2rem 0 2.5rem}}

/* Ссылка «Скачать PDF» в карточке документа — в одном ряду с кнопкой
   «Открыть документ» и одного с ней кегля.

   История правки, чтобы её не откатили обратно по старому комментарию.
   12.08.2026 ссылку увели на отдельную строку («сделай её отдельно») —
   тогда она стояла вплотную к пилюле и читалась как её оторвавшаяся часть.
   Лечили не ту причину: мешал не сам ряд, а отсутствие зазора. Отдельная
   строка дала свои проблемы — ссылка ушла в самый низ карточки, оторвалась
   от действия, к которому относится, и на фоне жирной пилюли выглядела
   мелкой сноской (правка 13.08.2026: «почему она снизу? слишком мелко»).

   Теперь ссылка возвращена в ряд, но с нормальным зазором (gap контейнера)
   и кеглем основного текста вместо унаследованного мелкого. Разница с
   кнопкой держится не размером, а видом: пилюля в рамке и жирная, ссылка —
   обычный текст с подчёркиванием.

   flex-basis:auto, а не 100%: ширина по содержимому. Перенос на вторую
   строку остаётся возможным — у .info-actions есть flex-wrap:wrap, и на
   узком экране ссылка уедет вниз сама, когда рядом с кнопкой не хватит
   места. */
.info-actions{align-items:center}
/* Кегль — у всех ссылок «скачать», а не только у тех, что стоят рядом с
   кнопкой в карточке документа: тот же класс используется в материалах
   экопросвещения (13.08.2026, «просил же чтоб у всех было одинаково»).
   Раскладочные свойства ниже остаются привязанными к .info-actions —
   они про соседство с кнопкой, которого в материалах нет. */
.file-download{font-size:var(--etp-text)}

.info-actions .file-download{
    flex-basis:auto;
    margin-top:0;
}

/* Стрелка у «Скачать PDF» — в em, чтобы росла вместе с надписью.

   В разметке подрядчика у неё жёсткие width="8" height="5" в атрибутах
   SVG. Пока текст ссылки был мелким, разница не бросалась в глаза; после
   укрупнения кегля (25px на широком экране) стрелка осталась восьмипиксельной
   и превратилась в точку рядом с надписью — правка клиента 13.08.2026:
   «у кнопочки про pdf размер текста вырос, а картинка нет».

   Пропорции исходной иконки 8:5 сохранены (0.48em × 0.3em), поэтому на
   любом брейкпоинте стрелка выглядит так же, как задумывал подрядчик, —
   просто в масштабе текста. Атрибуты width/height в HTML остаются как
   запасной размер для случая, когда CSS не загрузился. */
.file-download .icon{
    width:.48em;
    height:.3em;
    flex-shrink:0;
}

/* Наведение на плашки-ссылки: перебиваем вендорские правила ТЕМ ЖЕ весом.
   У подрядчика они записаны с тегом — `a.link-tag--secondary:hover` — и по
   специфичности сильнее нашего `.link-tag--secondary:hover`, поэтому теги
   новостей продолжали заливаться его приглушённым тоном вместо цвета
   уровня (правка клиента 12.08.2026: «в новостях всё ещё не тот цвет при
   наведении»). Тег в селекторе здесь не украшение, а необходимость. */
a.link-tag--primary:hover,a.link-tag--primary:focus,a.link-tag--primary:focus-visible,
button.link-tag--primary:hover,button.link-tag--primary:focus{
  background-color:#5fb9bd;border-color:#5fb9bd;color:#fff}
a.link-tag--secondary:hover,a.link-tag--secondary:focus,a.link-tag--secondary:focus-visible,
button.link-tag--secondary:hover,button.link-tag--secondary:focus{
  background-color:#a1c778;border-color:#a1c778;color:#fff}

/* Активный тег новостей — заливка СВОИМ цветом уровня, а не бирюзовым.
   Шаблон помечал текущий тег модификатором .link-tag--primary, то есть
   цветом ПЕРВОГО уровня, хотя теги — второй. Из-за этого на странице тега
   активная плашка вылезала бирюзовой среди зелёных (правка клиента
   12.08.2026). Теперь состояние выражено классом .is-active, а модификатор
   уровня остаётся зелёным.

   Начертание — по уровню (правка клиента 12.08.2026, уточнённая в тот же
   день). Сначала жирный сняли со ВСЕХ плашек: вендорский .link-tag шёл
   600–700 и делал ряд тегов тяжелее строки навигации над ним («и почему
   они болдом?»). Затем владелец разделил уровни: «кнопки все бирюзовые
   нужно болдом сделать, только их, зелёные не надо, скачать тоже».

   Итого: бирюзовый первый уровень (.content-tabs, .link-tag--primary) —
   жирный, он читается как основная навигация раздела; зелёный второй
   (.materials-tabs, .docs-list, .link-tag--secondary) и текстовая ссылка
   «скачать» (.file-download) — обычного начертания, чтобы вложенность
   была видна по весу, а не только по цвету. */
.link-tag,.content-tabs .nav-link,.materials-tabs .nav-link,.docs-list .nav-link{font-weight:400}
.content-tabs .nav-link,.link-tag--primary{font-weight:700}
.materials-tabs .nav-link,.docs-list .nav-link,.link-tag--secondary,.file-download,.file-download a{font-weight:400}
.materials-tabs .nav-link.active,.link-tag--secondary.is-active{font-weight:500}
.link-tag--secondary.is-active{background-color:#a1c778;border-color:#a1c778;color:#fff}
.link-tag--primary.is-active{background-color:#5fb9bd;border-color:#5fb9bd;color:#fff}

/* ═══════════════════════════════════════════════════════════════════════
   Правка клиента 12.08.2026: «сделать все шрифты и элементы больше, это
   ужас ничего не читается» (скриншоты с iPhone) + «убрать сверху иконку
   поиска».

   ЧТО БЫЛО ЗАМЕРЕНО (вьюпорт 375px, до правки): основной текст 14px,
   мелкие подписи 13px, заголовок страницы 21px, вкладки-пилюли 12px при
   высоте 25px. Для сравнения, тот же сайт на 1000px даёт 18px основного
   текста и 21px заголовка — то есть у подрядчика мобильная типографика
   не «немного мельче», а мельче в полтора раза.

   Отдельно про пилюли: 25px высоты — это меньше половины минимального
   тач-таргета (44px в Apple HIG, 48dp в Material). В такую кнопку не
   попадает палец, и промах здесь не косметика — это переход не в тот
   раздел.

   ПОЧЕМУ ЧЕРЕЗ ТОКЕНЫ, А НЕ ПОЭЛЕМЕНТНО. --etp-text/note/title/accent
   уже задают шкалу и переопределяются на 768/1000/1400. Правка одних
   базовых (мобильных) значений поднимает разом весь текст, который на
   них завязан, и не трогает десктоп. Точечные font-size по селекторам
   расползлись бы и разъехались при первой же правке вёрстки.

   МЕДИА-ЗАПРОС ОБЯЗАТЕЛЕН, БЕЗ НЕГО ЛОМАЕТСЯ ДЕСКТОП. Брейкпоинты
   подрядчика объявлены выше в файле через @media (min-width:...), а
   медиа-запрос не повышает специфичность: голое :root{} в нашей зоне
   стоит в файле ПОЗЖЕ и перебило бы все брейкпоинты сразу, раздув
   типографику на больших экранах. Поэтому ровно max-width:767.98px —
   зеркало нижней границы вендорского md.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
    /* База rem-шкалы. Одних токенов не хватило: в вёрстке подрядчика
       81 правило задаёт кегль литеральным .875rem мимо --etp-*, и до них
       переопределением токенов не дотянуться — это, например, весь текст
       новостной статьи (.press-news-item__lead), даты, подписи. Перечислять
       81 селектор в нашей зоне бессмысленно: список протухнет на первом же
       пересинке вёрстки.

       Корень поднят на 12.5% (16px -> 18px), и вместе с ним пропорционально
       выросло всё, что задано в rem, — и вендорские литералы, и наши токены,
       и отступы. Ровно то, что просил клиент: «шрифты и элементы больше».

       Единица — проценты, а не пиксели: процент считается от размера шрифта,
       выставленного в самом браузере. Посетитель, который увеличил шрифт в
       настройках телефона (а это ровно та аудитория, которой мелко), получит
       свой увеличенный кегль, умноженный на наш коэффициент. Жёсткие 18px
       его настройку молча отменили бы.

       Токены ниже пересчитаны ПОД новую базу — иначе поднялись бы дважды
       (и от корня, и сами по себе) и текст стал бы неуместно крупным. */
    html{font-size:112.5%}

    :root{
        /* Значения в rem от базы 18px. В скобках — итог в пикселях против
           того, что было при базе 16px. */
        --etp-text:0.9375rem;   /* 14 -> 17 */
        --etp-note:0.875rem;    /* 13 -> 16 */
        --etp-title:1.0625rem;  /* 16 -> 19 */
        --etp-accent:1.5rem;    /* 20 -> 27 */
        /* Кегль полей ввода. ЕДИНСТВЕННОЕ место в шкале, заданное в
           пикселях, и это осознанно: 16px — порог, ниже которого Safari
           на iOS зумит страницу при фокусе. Он зашит в WebKit и не
           зависит ни от базы rem, ни от настроек пользователя, поэтому
           выражать его в rem (которые у нас на мобиле дают 18px) значит
           потерять смысл числа. */
        --etp-input:16px;
    }

    /* Заголовок страницы вендор задаёт своим числом (1.3125rem = 21px),
       мимо шкалы. Возвращаем его в шкалу — иначе он остаётся мельче
       поднятого текста вокруг. */
    .page-heading{font-size:var(--etp-accent)}

    /* Контейнеры, где вендор задал кегль числом ВНЕ шкалы и настолько
       мелким, что подъёма базы не хватило (правка клиента 13.08.2026:
       «очень мелко», замер на 390px до правки в скобках):

         .education-rno-about          .625rem  -> 11.2px
         .education-accordion-item__…  .5625rem -> 10.1px

       Второй сам по себе почти не виден — абзацы ответов мы задаём своим
       правилом, — но всё, что редактор наберёт в панели без класса
       (списки, подписи, вложенные строки), наследует эти 10 пикселей.
       Поэтому кегль возвращён в шкалу у самих контейнеров, а не у
       перечисленных потомков. */
    .education-rno-about,
    .education-accordion-item__body,
    .education-accordion-item__content{font-size:var(--etp-text)}
    .education-rno-about h2{font-size:var(--etp-title)}
    .education-rno-about h3{font-size:var(--etp-text)}

    /* Подпись согласия здесь БОЛЬШЕ НЕ ЗАДАЁТСЯ: она переведена на роль
       --etp-fineprint целиком, ниже по файлу — вместе со сноской капчи,
       с которой обязана совпадать на ВСЕХ ширинах (DESIGN.md, «Кегль»).
       Правка только для мобильной ступени оставляла разрыв на планшете:
       замер на 768px давал сноску 14px против согласия 12px. */

    /* ── Формы под палец (правка клиента 13.08.2026: «не оптимизировано
       под пальцы, нажимать неудобно») ───────────────────────────────────

       ГЛАВНОЕ — КЕГЛЬ 16px. Safari на iOS ЗУМИТ страницу при фокусе в
       поле, где кегль меньше 16px: человек тапает в «Телефон», страница
       прыгает и увеличивается, дальше он заполняет форму с горизонтальной
       прокруткой. Замер до правки: 26 полей из 34 были мельче 16px
       (поиск в шапке 13.5px, поля заявки 13.5px, контакты 15.8px).
       16px здесь — не «красиво», а единственный способ отключить зум:
       порог зашит в WebKit и не настраивается.

       ВЫСОТА 44px — минимальный тач-таргет (Apple HIG; Material просит
       48dp). Задаём min-height, а не height: содержимое поля выше при
       переносе строки не должно обрезаться.

       Величины в px, а не в rem: rem завязан на базу, которая на мобиле
       уже поднята до 18px, и «1rem» дало бы 18px — избыточно для поля и
       ломало бы вёрстку узких форм. Здесь важен АБСОЛЮТНЫЙ порог. */
    .form-control,
    .form-select,
    .apply-form .form-control,
    .apply-form .form-select,
    .feedback-form .form-control,
    .feedback-form .form-select,
    .search-form .form-control{
        font-size:var(--etp-input);
        min-height:44px;
    }

    /* Textarea высоту задаёт своей строкой — min-height ей не нужен, но
       кегль тот же. Вендор задаёт ей height числом, поэтому не трогаем. */
    .feedback-form textarea.form-control,
    .apply-form textarea.form-control{font-size:var(--etp-input)}

    /* Чекбоксы и радиокнопки: 21-27px до правки. 24px — сам квадратик,
       а тач-таргет добирается подписью рядом (она кликабельна, label
       связан с полем — проверено). */
    .form-check-input,
    .feedback-form .form-check-input,
    .form-checklist--radio .form-check-input,
    .form-checklist--districts .form-check-input{
        min-height:24px;
        min-width:24px;
    }

    /* Подпись чекбокса — тач-таргет целиком: по ней и попадают пальцем. */
    .form-check-label{
        display:inline-block;
        min-height:24px;
        padding-block:.35rem;
    }

    /* ── Кнопки и прочие самостоятельные цели ────────────────────────────
       Замер до правки: 869 кликабельных элементов из 1110 мельче 44px.
       Львиная доля — ссылки ВНУТРИ текста: их раздувать нельзя, это
       разорвёт абзацы, и стандарт для них делает исключение (WCAG 2.5.8
       не требует 44px для inline-ссылок в потоке текста). Поэтому правим
       только САМОСТОЯТЕЛЬНЫЕ цели: кнопки, переключатели, иконки. */
    .btn,
    .btn-search,
    .navbar-toggler,
    .btn-show-more,
    .accordion-button,
    .tips-material,
    .education-offer__more{
        min-height:44px;
    }

    /* Иконка-кнопка (поиск, бургер) — квадрат: без ширины остаётся
       узкой полоской, в которую пальцем не попасть. */
    .btn-search,
    .navbar-toggler{min-width:44px}

    /* А вот САМА иконка внутри такой кнопки размер держит свой.
       Вендор задаёт ей `.btn-search .icon{height:100%;width:100%}` — то
       есть она занимает кнопку целиком. Пока кнопка была 18px, это
       работало; после подъёма тач-таргета до 44px лупа раздулась на всю
       кнопку и стала больше поля поиска (правка клиента 13.08.2026:
       «иконка больше поля на мобильном»).
       Тач-таргет остаётся 44×44 — растёт только область нажатия, а
       рисунок держится прежнего размера и центрируется флексом, который
       у кнопки уже есть. */
    .btn-search .icon{
        height:1.5rem;
        width:1.5rem;
    }

    /* Адрес в подвале не помещался: строка задана nowrap и на 390px
       занимала 382px внутри контейнера 350px — хвост «стр. 1» уезжал за
       край (найдено гейтом геометрии, tools/check_geometry.py).
       Разрешаем перенос: на телефоне адрес в две строки — норма, а
       обрезанный адрес — нет. Телефон и почта остаются одной строкой:
       они короткие и рвать их посреди номера некрасиво. */
    .footer-contact{white-space:normal}

    /* Зазор между соседними целями. Замер: пункты раскрытого меню идут
       ВПЛОТНУЮ (0-0.5px), и палец, промахнувшись на пару пикселей,
       открывает соседний раздел. Сами пункты уже 44px высотой — не
       хватало именно промежутка. 8px — минимум, при котором промах
       попадает «в никуда», а не в чужую ссылку. */
    #navigation .nav-item + .nav-item,
    .navbar-nav .nav-item + .nav-item,
    /* Подпункты внутри раскрытых подменю — тот же промах, свой список. */
    .navbar-subnav .nav-item + .nav-item,
    .navbar-subsubnav .nav-item + .nav-item{margin-top:.5rem}

    /* Тот же промах на списках однотипных ссылок: адреса и почты
       территориальных управлений на «Контактах» шли с зазором 0.8px. */
    .regional-territories__item + .regional-territories__item,
    .company-contacts__item + .company-contacts__item{margin-top:.5rem}

    /* ── Читаемость ──────────────────────────────────────────────────────
       line-height 1.2 у 281 абзаца из 281 — строки слипаются, и текст
       читается тяжело даже при поднятом кегле. 1.5 — минимум для
       основного текста на телефоне. Заголовки не трогаем: у них плотный
       интерлиньяж осмыслен. */
    p, li, dd, .article-body, .education-tips-section__body,
    .education-rno-about, .tips-panel{line-height:1.5}

    /* ── Остальные вендорские литералы мимо шкалы ─────────────────────
       Правки выше закрывали классы по одному, по мере того как клиент их
       находил («очень мелко» -> починили карточку РНО -> «в полезных
       советах текст все еще мелкий» -> тот же дефект в
       .education-tips-section__body). Ловить их по одному бессмысленно:
       разбор main.css показал 47 правил, где на мобильной ступени кегль
       задан числом меньше .75rem, то есть 11-13px против 17px основного
       текста рядом.

       Ниже — все они, кроме двух категорий, которые НЕ трогаем:
         • пилюли и теги (.nav-link, .tag, .link-tag) — у них свой
           компонент с --etp-pill, он уже задаёт и кегль, и тач-таргет;
         • ::before-нумерация — это декор, а не текст.

       Разделены по роли: содержательный текст идёт по --etp-text,
       подписи/даты/ячейки таблиц — по --etp-note. Список привязан к
       вёрстке подрядчика и в теории протухнет при её пересинке; на
       практике синхронизация закончилась, сайт развиваем мы. */
    .article-games-seats li,
    .activity-item__descr,
    .bells-locations-item,
    .education-faq-item__content,
    .education-tips-section__body,
    .facts-item--large .facts-item__text,
    .facts-item__text,
    .management-item__descr,
    .management-item__name,
    .management-item--long .management-item__descr,
    .news-slide__excerpt,
    .waste-content-item,
    .waste-item__descr,
    .waste-item__title,
    .waste-item--non .waste-item__descr,
    .waste-item--non .waste-item__title{font-size:var(--etp-text)}

    .activity-item__more,
    .article-date,
    .article-image__caption,
    .bells-data-item,
    .education-event__data .data-item,
    .footer-contact,
    .footer-socials,
    .hero-containers-item .garbage__more,
    .news-slide__date,
    .waste-content-item__note,
    .waste-item__sign,
    .waste-item__type{font-size:var(--etp-note)}

    /* Таблицы (.safety-table, .envpolicy-table) в этот список НЕ входят,
       хотя кегль там самый мелкий на сайте (6.8-11px). Замер 13.08.2026:
       подъём до --etp-note раздувает таблицу с 350px до 480px при колонке
       в 350 — колонки просто уезжают за край и обрезаются, то есть текст
       становится крупным, но нечитаемым по другой причине. Табличным
       данным на телефоне нужен не кегль, а другая подача: горизонтальная
       прокрутка обёртки или перестроение строк в карточки.

       СДЕЛАНО 18.08.2026 — обёртка .table-scroll плюс кегль по шкале, см.
       блок «ТАБЛИЦЫ» в конце файла. Здесь по-прежнему не место таблицам:
       их кегль задан там, вместе с прокруткой, от которой он зависит. */

    /* Размеры пилюль (вкладки, плитки, теги) сюда НЕ добавлять: с 13.08.2026
       они заданы единым компонентом ниже по файлу, для всех брейкпоинтов
       сразу, через --etp-pill / --etp-pill-min-h. Мобильная ступень — там же. */

    /* Пункты подменю в раскрывающемся меню и в подвале оставались 13.5px —
       мельче всего остального текста, при том что это кликабельная
       навигация, а не подпись. Кегль по шкале; вертикальный отступ даёт
       строкам высоту, за которую можно попасть пальцем, не задевая
       соседний пункт. */
    .footer-nav .nav-link{
        font-size:var(--etp-note);
        padding-top:.4rem;
        padding-bottom:.4rem;
    }

    /* Пункты раскрытого меню — крупнее подвальных (правка клиента
       12.08.2026: «и меню покрупнее нужно»). Было 15.8px против 20.3px у
       заголовков разделов над ними, из-за чего сами пункты читались как
       подпись к заголовку, а не как основная навигация.

       Кегль по --etp-title, вертикальный отступ доводит строку до ~44px:
       это главная навигация по сайту с телефона, и промах по соседнему
       пункту здесь дороже, чем где-либо ещё. */
    .navbar-nav .nav-link{
        font-size:var(--etp-title);
        padding-top:.55rem;
        padding-bottom:.55rem;
    }

    /* Контакты в подвале — 12.4px, самый мелкий текст на странице, при том
       что это телефон, почта и адрес, то есть то, ради чего в подвал и
       заходят. Приводим к шкале. */
    .footer-contact,
    .footer-contact .contact-link{font-size:var(--etp-note)}

    /* Индекс рубрик на ленте новостей и на странице тега скрыт на
       мобильных (решение клиента 12.08.2026). После укрупнения шрифтов
       десять плашек вставали почти по одной в строку и отжимали саму
       ленту новостей далеко вниз — до новостей приходилось прокручивать
       целый экран рубрик.

       Скрыт именно модификатор --rubrics, а не .news-tags-index: тот же
       контейнер в search.php работает фильтрами по разделу и по дате,
       и их скрытие сломало бы поиск.

       Навигация не теряется: полоса вкладок раздела (Новости /
       Фотогалерея / Логотипы / Контакты) остаётся видимой, в том числе
       на странице отдельного тега. */
    .news-tags-index--rubrics{display:none}

    /* Шапка отстала от укрупнённого текста (правка клиента 12.08.2026:
       «надо лого и кнопку меню сделать больше»): логотип был 27px в
       высоту, кнопка меню — 27×27.

       Логотип — обычная замена высоты, ширину считает сам SVG по viewBox.

       Кнопка меню увеличена через scale, а НЕ через width/height. Причина
       в устройстве бургера у подрядчика: три полоски позиционированы
       абсолютно, а при раскрытии складываются в крестик по жёстко
       посчитанным координатам (top:.6875rem — ровно центр кнопки 1.5rem
       минус половина толщины полоски). Меняем размер кнопки — эти числа
       перестают попадать в центр, и крестик уезжает вверх. scale
       масштабирует всю геометрию разом, включая раскрытое состояние и
       анимацию перехода.

       Псевдоэлемент добавляет области нажатия невидимый запас до 44px
       (минимум Apple HIG) — сам бургер визуально остаётся 36px, чтобы не
       выглядеть кнопкой-переростком в узкой шапке. */
    .navbar-brand svg,
    .navbar-brand img{height:2rem;width:auto}

    .navbar-toggler{transform:scale(1.35)}
    .navbar-toggler::after{
        content:"";
        position:absolute;
        inset:-.35rem;
    }

    /* Иконка поиска в шапке убрана по просьбе клиента. Поиск при этом не
       исчезает с мобильных: вторая форма живёт в подвале
       (.footer-cell--search) и остаётся рабочей. Скрываем, а не удаляем
       из разметки, — блок вендорский, и правка переживёт пересинк
       вёрстки подрядчика. */
    .navbar-search{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   ПИЛЮЛИ — ЕДИНЫЙ КОМПОНЕНТ. Источник истины по размерам кнопок-плашек.

   Сюда входят все четыре семейства, которые визуально являются одной и той
   же кнопкой-пилюлей:
     .content-tabs .nav-link     — вкладки раздела (первый уровень)
     .materials-tabs .nav-link   — подвкладки материалов (второй уровень)
     .docs-list .nav-link        — плитки документов (второй уровень)
     .link-tag                   — теги и плашки-ссылки (уровень по модификатору)

   ЗАЧЕМ ЭТО ЗАВЕДЕНО (13.08.2026). У подрядчика каждое семейство описано
   своим набором правил со своими числами на каждом из четырёх
   брейкпоинтов — суммарно 69 правил, задающих размеры. Значения между
   семействами не согласованы: на 1280px первый уровень был 20px в кнопке
   высотой 36, второй — 15px в кнопке высотой 46. То есть текст мельче, а
   плашка крупнее — ровно наоборот тому, как читается подчинённость.

   Правки по одному семейству за три подхода приводили к тому, что
   разъезжалось соседнее («поправил здесь — уехало там»), и клиент трижды
   возвращался с одной и той же претензией. Поэтому размеры вынесены из
   правил в переменные, а правило осталось одно на все семейства.

   РЕШЕНИЕ ВЛАДЕЛЬЦА (13.08.2026): уровни различаются ТОЛЬКО цветом и
   начертанием, размер у всех одинаковый. Бирюзовый первый уровень —
   жирный, зелёный второй — обычный. Не менять это на «второй уровень
   мельче» без нового решения: вариант со ступенчатым размером обсуждался
   и был отклонён.

   ШКАЛА. За основу взят первый уровень — он был крупнее и читался лучше;
   второй подтянут к нему. Кегль растёт по тем же брейкпоинтам, что и вся
   типографика сайта (768/1000/1400), высота — с запасом на тач-таргет.

   КАК ДОБАВИТЬ НОВУЮ ПИЛЮЛЮ: не писать свои font-size/padding, а взять
   класс .link-tag с модификатором уровня (--primary/--secondary). Если
   нужен новый контейнер-семейство, добавить его селектор в список ниже, а
   не заводить отдельные размеры. См. DESIGN.md, раздел «Пилюли».
   ═══════════════════════════════════════════════════════════════════════ */
:root{
    --etp-pill:0.875rem;        /* <768px: 15.75px при мобильной базе 18px */
    --etp-pill-min-h:2.5rem;    /* 45px — выше минимума тач-таргета 44px */
}
@media (min-width:768px){
    :root{--etp-pill:0.9375rem; --etp-pill-min-h:2.5rem}   /* 15px / 40px */
}
@media (min-width:1000px){
    :root{--etp-pill:1.25rem;   --etp-pill-min-h:2.75rem}  /* 20px / 44px */
}
@media (min-width:3000px){
    :root{--etp-pill:1.5625rem; --etp-pill-min-h:3.25rem}  /* 25px / 52px */
}

/* Двойной класс у .link-tag — не опечатка: у подрядчика часть правил
   записана как a.link-tag (специфичность 0,1,1), и одиночный класс их не
   перебивает. Повтор даёт 0,2,0 и уравнивает нас в правах, не заставляя
   перечислять теги (a/button/span) по всему файлу. */
.content-tabs .nav-link,
.materials-tabs .nav-link,
.docs-list .nav-link,
.link-tag.link-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:var(--etp-pill);
    min-height:var(--etp-pill-min-h);
    padding:.35em 1.15em;   /* em — растут вместе с кеглем на всех экранах */
    border-radius:2.5em;
    line-height:1.25;
    text-align:center;

    /* Пилюля не должна распирать контейнер. У подрядчика стоит
       white-space:nowrap — при мелком кегле это было незаметно, но после
       перехода на единую шкалу длинная надпись в узкой карточке стала
       вылезать за её край (правка клиента 13.08.2026: телефон отдела
       кадров в карточке вакансий на 1440px — 378px в карточке шириной
       316px).

       Перенос включается только когда надпись физически не помещается:
       короткие пилюли по-прежнему в одну строку, у длинной растёт высота,
       а не ширина. max-width страхует от вылета и в тех случаях, когда
       перенести нечего (одно длинное слово). */
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════
   Ошибка у чекбоксов и радиокнопок — текстом, без розовой плашки.

   У подрядчика .invalid-feedback сделан «хвостом», выезжающим ИЗ-ПОД поля:
   розовый фон, скругление только снизу, отрицательный margin-top и padding
   сверху, который этот наезд компенсирует. Для текстового поля с рамкой
   это читается как продолжение самого поля и выглядит нормально.

   У чекбокса и радиогруппы прямоугольника-поля нет. Плашка повисает сама
   по себе во всю ширину формы, наезжает на подпись и выглядит случайным
   розовым блоком (правка клиента 13.08.2026: «когда чекбокс не поставил,
   выглядит криво, я бы не делал тут красный блок»).

   Поэтому здесь — обычная строка красного текста под группой. Сам факт
   ошибки при этом виден дважды, как и раньше: красной рамкой у чекбокса
   (вендорское .form-check-input.is-invalid) и этой подписью. У текстовых
   полей «хвост» остаётся как был — там он на месте.
   ═══════════════════════════════════════════════════════════════════════ */
.form-agreement .invalid-feedback,
.form-check .invalid-feedback,
.form-check ~ .invalid-feedback,
.form-checklist ~ .invalid-feedback,
fieldset > .invalid-feedback{
    background-color:transparent;
    border-radius:0;
    margin-top:0;
    margin-left:0;
    padding:.25rem 0 0;
    text-align:left;
    z-index:auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   Блок новостей на главной: крупнее картинка, без тегов.

   Правка клиента 13.08.2026: «сделал бы размер картинки больше, как
   например выше у карточек, они сейчас выбиваются из дизайна и мелковато»
   + «я бы убрал тут теги».

   ВЫСОТА — ПРОПОРЦИЕЙ, А НЕ ЧИСЛОМ. У подрядчика .news-slide__image
   получает фиксированную высоту на каждом брейкпоинте (9.5rem / 12.825rem
   / 17.8125rem), из-за чего картинка не связана с шириной карточки: на
   1280px выходило 285×160 — заметно площе соседних карточек «Наша
   деятельность» (323×155 при меньшей ширине). aspect-ratio привязывает
   высоту к ширине, и пропорция держится на всех экранах сама, без
   четвёртого числа при следующей правке сетки.

   ПРОПОРЦИЯ 4:3 — РЕШЕНИЕ ВЛАДЕЛЬЦА, ПРИНЯТОЕ ОСОЗНАННО. Обложки новостей
   — 1140×640, то есть 16:9, а у картинки вендорский object-fit:cover.
   Значит кадр 4:3 срезает у фотографии верх и низ, и это видно
   («фотки режутся»). Пробовали 16:9, при котором ничего не режется:
   вживую владелец сравнил оба варианта и выбрал 4:3 — «было лучше в
   первый раз». Более высокий кадр весомее в полосе, а срез по краям
   на репортажных фотографиях не мешает.

   Не «чинить» это обратно на 16:9 без нового решения: вариант без обрезки
   уже показывали и отклонили.

   Теги скрыты, а не удалены из шаблона: они остаются в разметке для
   поиска и микроразметки, и решение легко откатить одной строкой. На
   странице новостей теги по-прежнему видны — там они и нужны. */
.news-slide__image{
    height:auto;
    aspect-ratio:4 / 3;
}

/* Карточка новости шире: 285px -> 360px, картинка растёт вместе с ней
   (высота считается от ширины, см. aspect-ratio выше): 285×160 -> 360×202.

   ТОЛЬКО КАРТОЧКИ, НЕ КНОПКА. Плашка «Все новости» — такой же слайд, у неё
   класс .news-slide--all, и первая версия правки задрала ширину заодно и
   ей («не делай блок все новости больше, сделай картинки больше»).
   Исключение по модификатору возвращает плашке её исходные 285px.

   РАЗМЕР ПОДОБРАН ПОД РЯД, А НЕ НА ГЛАЗ. Ширина слайдера 1204px, плашка
   «Все новости» 195px, зазоров три. Значит на три карточки остаётся
   1204 − 195 − 3×24 = 937px, то есть по 312px на карточку — это потолок,
   при котором плашка ещё помещается в строку целиком. Пробовали 360px:
   картинка получалась крупнее, но плашку срезало краем и было видно
   меньше половины — так оставлять нельзя.

   width, а не max-width: у подрядчика ширина задана свойством width
   (17.8125rem), и потолок max-width её не поднимает — первая попытка
   правки не дала вообще ничего.

   Только от 1000px: на телефоне ширина карточки задана как 67vw, то есть
   привязана к экрану и рассчитана так, чтобы из-за края выглядывал
   следующий слайд. Правило без медиа-запроса перебило бы и её, сломав эту
   подсказку о прокрутке. */
/* ОТМЕНЕНО 13.08.2026. Ширина 19.5rem держала карточки крупнее плашки, и
   ряд состоял из трёх широких фотографий плюс узкий «хвост» — клиент
   попросил определиться («он то по высоте с половину новостей, то с фотки
   новостей, то вообще заходит за экран»). Теперь все четыре слайда равны
   по формуле выше: фото теряет 9% ширины (312 -> 283px), зато ряд ровный,
   и плашка при пропорции 4:3 встаёт точно вровень с фотографиями. */

.news-slide__tags{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   .doc-inline-link — ссылка на документ ВНУТРИ абзаца.

   Правка клиента 13.08.2026: «подсвечивать ссылку в тексте не модно».
   Текст берёт цвет обычного текста, а на ссылку указывает стрелка
   #arrow-right — она видна всегда, поэтому ссылку по-прежнему можно найти,
   не наводя мышь. Цвет и подчёркивание появляются при наведении и по
   фокусу с клавиатуры.

   Совсем убирать признак было нельзя: WCAG 1.4.1 запрещает держать
   отличие ссылки только на цвете, но «никакого отличия» — это не решение
   проблемы, а её обострение (ссылку не найдут ни глазами, ни скринридером).

   display оставлен строчным (не inline-flex): фраза-ссылка длинная и
   переносится на две строки, а inline-flex превратил бы её в неразрывный
   блок и разорвал бы абзац. Иконка выравнивается по базовой линии и
   растёт вместе с кеглем, потому что задана в em.
   ═══════════════════════════════════════════════════════════════════════ */
/* Селекторы с `a` и родителем — не для красоты: карточка красит все свои
   ссылки правилом `.regop-card a:not(.nav-link){color:#5fb9bd}`, и оно
   специфичнее одиночного класса. Уравниваемся, чтобы победило наше как
   более позднее в файле. */
.regop-card a.doc-inline-link{
    color:inherit;
    text-decoration:none;
}
.doc-inline-link .icon-arrow-right{
    color:#5fb9bd;
    height:.6em;
    margin-inline-start:.25em;
    width:.6em;
}
/* Последнее слово подписи + стрелка (собирает eco_links_doc_label(),
   site/plugins/eco-links/index.php). SVG — replaced-элемент, и строка
   рвётся перед ним даже без пробела в разметке: в узкой колонке стрелка
   уезжала на следующую строку одна. Запрет переноса ТОЛЬКО на этой паре;
   вся ссылка остаётся переносимой, иначе длинный адрес вылезал бы за
   край колонки. */
.doc-inline-link__tail{white-space:nowrap}

/* При наведении меняется только цвет — подчёркивание клиент попросил
   убрать. По доступности это допустимо именно потому, что признак ссылки
   не в наведении: стрелка стоит рядом всегда, и её видно без мыши. */
.regop-card a.doc-inline-link:hover,
.regop-card a.doc-inline-link:focus-visible{
    color:#5fb9bd;
}

/* ═══════════════════════════════════════════════════════════════════════
   Плашка «Задать вопрос» и свёрнутая форма обратной связи.

   Правка клиента 13.08.2026: форма на восемь полей висела развёрнутой внизу
   страницы контактов и забирала экран у тех, кто пришёл за адресами
   территориальных управлений. Теперь вместо неё плашка: картинка, строка
   текста и кнопка; форма раскрывается по нажатию (site/plugins/
   eco-feedback-toggle).

   Кнопка — наша штатная пилюля .link-tag--primary, а не синяя кнопка из
   макета: в макете она нарисована по прежней дизайн-системе подрядчика, а
   на сайте все кнопки этого уровня выглядят одинаково (см. DESIGN.md,
   раздел «Пилюли»).

   Раскрытие анимируется через grid-template-rows: 0fr → 1fr. Высота формы
   заранее неизвестна, а height:auto браузер не анимирует; тот же приём уже
   работает в eco-territories.
   ═══════════════════════════════════════════════════════════════════════ */
/* Заливка — тот же светлый градиент бренда, что у карточек вакансий.
   Белая плашка на белой странице не читалась как отдельный блок («белое на
   белом»); заливка отделяет её от фона, не перебивая текст, и не требует
   новых цветов — оттенки уже есть в вёрстке подрядчика. */
.feedback-teaser{
    align-items:center;
    background-image:linear-gradient(135deg,rgba(208,212,94,.2) -5%,rgba(100,182,153,.2) 110%);
    background-repeat:no-repeat;
    border-radius:var(--etp-card-radius);
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    padding:1.5rem;
}
.feedback-teaser__image{
    border-radius:0.375rem;
    flex:0 0 auto;
    height:6.5rem;
    overflow:hidden;
    width:6.5rem;
}
.feedback-teaser__image img{
    display:block;
    height:100%;
    object-fit:cover;
    width:100%;
}
.feedback-teaser__text{
    flex:1 1 14rem;
    font-size:var(--etp-text);
    margin:0;
}
.feedback-teaser__button{flex:0 0 auto}

/* Свёрнутое состояние. Класс, а не [hidden]: без JS форма должна остаться
   видимой и рабочей, см. докблок плагина.

   Приём grid-template-rows: 0fr работает только когда у грида ОДНА строка,
   а внутри .feedback их две — заголовок и сама форма. Первая версия правки
   поэтому не сворачивала ничего: высота оставалась 841px. Задаём ровно одну
   строку и обнуляем минимальную высоту детей — без min-height:0 содержимое
   упирается в свой размер и грид не даёт себя сжать. */
.feedback--collapsed{
    display:grid;
    grid-template-rows:0fr;
    overflow:hidden;
    transition:grid-template-rows .35s ease;
}
.feedback--collapsed > *{
    grid-row:1;
    min-height:0;
    overflow:hidden;
    visibility:hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   Мелкий служебный текст под формами (уведомление о SmartCaptcha).

   Правка клиента 13.08.2026: «кегль огромный у текста, нужно сделать как у
   Согласие на обработку персональных данных». Уведомление шло по --etp-note,
   а это ступень «сноски» из общей шкалы: на широком экране она вырастает до
   22px и абзац юридического текста начинает спорить с самой формой. Подпись
   согласия рядом при этом 14px — разнобой был виден невооружённым глазом.

   Заведена отдельная роль --etp-fineprint: мелкий юридический текст под
   формой. Существующие переменные не подошли — у --etp-note своя, более
   крупная шкала.

   Значения повторяют шкалу .form-check-label (подпись согласия), с которой
   клиент и просил сравнять: 0.75rem до 1000px, 0.875rem от 1000px и
   1.1875rem от 1400px. Первая версия правки поставила одно фиксированное
   значение 0.875rem — и на широком экране уведомление стало уже МЕЛЬЧЕ
   согласия (14px против 19px), то есть разнобой никуда не делся, просто
   поменял знак. Правило простое: два текста стоят рядом и обязаны меняться
   одинаково, а не «оба быть маленькими».
   ═══════════════════════════════════════════════════════════════════════ */
:root{
    /* Базовая (мобильная) ступень поднята 0.75 -> 0.875rem 13.08.2026:
       на телефоне сноска давала 13.5px против 16px подписи согласия
       рядом, хотя весь смысл этой переменной — держать два текста
       вровень. Задавать мобильное значение в нашем блоке
       @media (max-width:767.98px) бесполезно: это объявление стоит в
       файле ПОЗЖЕ и перебивает его при равной специфичности. */
    --etp-fineprint:0.875rem;
}
@media (min-width:1000px){:root{--etp-fineprint:0.875rem}}
@media (min-width:3000px){:root{--etp-fineprint:1.1875rem}}
/* Сноска капчи и подпись согласия — ОДНА роль на обе.
   Требование клиента (DESIGN.md, «Кегль»): два юридических текста стоят
   рядом под формой и обязаны меняться одинаково. Раньше подпись согласия
   жила на вендорской шкале (.6875rem на планшете, .875rem на десктопе), и
   тексты расходились на каждой второй ширине. Теперь у них общий токен —
   разойтись физически нечему. */
/* Юридическая сноска под формой (про SmartCaptcha) остаётся на
   fineprint. Подпись чекбокса согласия из этого правила ВЫВЕДЕНА
   14.08.2026: клиент попросил поднять её вместе с подписями радиокнопок —
   это не сноска, а подпись элемента, по которому человек кликает. Её
   кегль теперь задаёт правило .form-check-label ниже (роль note). */
.eco-captcha-notice{font-size:var(--etp-fineprint)}

/* ═══════════════════════════════════════════════════════════════════════
   Карточки вакансий — без теней (правка клиента 13.08.2026: «тени у блоков
   надо убрать, нафиг тени нужны»).

   У подрядчика тень задана дважды, разными значениями на разных
   брейкпоинтах (.vacancies-item и .vacancies-single), поэтому снимаем её
   явно у всех четырёх семейств карточек раздела, а не правим числа.
   Заливка и скругление остаются — блок и без тени читается как карточка.
   ═══════════════════════════════════════════════════════════════════════ */
.vacancies-item,
.vacancies-single,
.vacancies-grid > *,
.vacancies-item--flat{box-shadow:none}

/* ═══════════════════════════════════════════════════════════════════════
   .doc-inline-link в остальных списках документов (13.08.2026).

   Тот же вид, что на «О деятельности»: чёрный текст, стрелка справа, цвет
   только при наведении. Применён к спискам адресов прямых договоров и к
   ссылке-уведомлению об общественных обсуждениях в экологической политике.

   БУЛЛИТЫ УБРАНЫ (решение владельца): стрелка справа уже говорит «это
   ссылка на документ», а точка слева дублирует её и ставит в строке два
   значка подряд. Отступ списка снимаем вместе с маркером, иначе строки
   висят с пустым полем слева.

   Селекторы перечислены с контекстом: карточки и списки подрядчика красят
   вложенные ссылки своими правилами (например .regop-card
   a:not(.nav-link)), и одиночный класс их не перебивает — см. историю в
   комментарии к .doc-inline-link выше.
   ═══════════════════════════════════════════════════════════════════════ */
.contracts-locations li a.doc-inline-link,
.envpolicy-notification a.doc-inline-link{
    color:inherit;
    text-decoration:none;
}
.contracts-locations li a.doc-inline-link:hover,
.contracts-locations li a.doc-inline-link:focus-visible,
.envpolicy-notification a.doc-inline-link:hover,
.envpolicy-notification a.doc-inline-link:focus-visible{color:#5fb9bd}

.contracts-locations{
    list-style:none;
    padding-left:0;
}
.contracts-locations > li::before{content:none}

/* ═══════════════════════════════════════════════════════════════════════
   Списки адресов — колонки вместо «текучей» строки (правка клиента
   13.08.2026: «выглядит как-то не аккуратно, можно в 3 колонки»).

   БЫЛО: flex-wrap (вёрстка подрядчика выше маркера). Адреса разной длины
   («пер Молочный, д. 2» против «ул Линии Октябрьской Железной Дороги,
   д. 12»), поэтому каждая строка рвалась в своём месте: три адреса в
   одной строке, два в следующей, между ними дыры разной ширины. Читать
   такой список глазами по вертикали невозможно — а читают его именно
   так, когда ищут свой дом.

   СТАЛО: газетные колонки (CSS multi-column). Колонки равной ширины,
   левые края адресов выровнены по вертикали, между строками ровный шаг.

   ПОЧЕМУ НЕ GRID. Пробовали первым заходом: сетка выравнивает ещё и
   СТРОКИ, поэтому один адрес, перенесённый на две строки, поднимает
   высоту всей строки сетки — рядом с ним появляются те же дыры, только
   аккуратные. В колонках высота элемента ни на кого не влияет:
   следующий адрес встаёт сразу под предыдущим.

   break-inside:avoid — чтобы адрес не разрывался между низом одной
   колонки и верхом следующей (иначе «д. 9, к. 1» уезжает в соседний
   столбец от своей улицы).

   Ступени 768/1000 — те же, что у остальной геометрии страницы
   (карточка аккордеона, кегли), чтобы раскладка менялась вместе с ней.
   Выше 1000px колонок остаётся ТРИ и на самых широких мониторах: у
   резинового контейнера (см. блок «РЕЗИНОВЫЙ КОНТЕЙНЕР» ниже) четвёртая
   колонка сужает каждую настолько, что длинные адреса начинают
   переноситься в каждой ячейке — ровно та неаккуратность, ради которой
   всё и переделывалось.
   ═══════════════════════════════════════════════════════════════════════ */
.contracts-locations{
    column-gap:1.5rem;
    columns:1;
    display:block;
    row-gap:0;
}
/* Тонкая линия под каждым адресом (правка клиента 13.08.2026: «может
   разделители сделать, прям серые, незаметные, но будет как будто
   аккуратнее, только между верхними и нижними адресами, не прям
   таблица»). Отсюда и решение: ТОЛЬКО горизонтальные линии, вертикальных
   между колонками нет — иначе это была бы таблица, а не список.

   Цвет — #e3e6e8, самый светлый серый палитры (DESIGN.md, «Цвет»); тот же
   тон, что у разделителей в других списках. Более тёмный --etp-acc-line
   (#c1c4c7) на такой частоте линий уже читается как сетка.

   Линия остаётся и у последнего адреса колонки: колонок три, «последних»
   элементов тоже три, и гасить черту только у одного из них (:last-child
   живёт в последней колонке) — это заметная асимметрия внизу блока. */
.contracts-locations > li{
    border-bottom:1px solid #e3e6e8;
    break-inside:avoid;
    margin-bottom:.55rem;
    /* padding-left вендора (.8em под буллит) снят вместе с самим буллитом
       выше: без него текст стоял на 0.8em правее начала своей линии. */
    padding-bottom:.55rem;
    padding-left:0;
}

/* Одна колонка (телефон) — у последнего адреса линию снимаем: под ним
   сразу идёт разделитель между округами, и две серые черты подряд читаются
   как ошибка вёрстки. В многоколоночном режиме этого не делаем — там
   :last-child живёт только в последней колонке, см. комментарий выше. */
@media (max-width:767.98px){
    .contracts-locations > li:last-child{border-bottom:0}
}

@media (min-width:768px){
    .contracts-locations{columns:2}
}
@media (min-width:1000px){
    .contracts-locations{columns:3}
}
@media (min-width:3000px){
    .contracts-locations{column-gap:1.875rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   Экологическая политика: блоки уведомлений без теней, с разделителями.

   Правка клиента 13.08.2026: «блоки с тенью, у нас таких нигде нет, можно
   убрать их вообще, а между блоками просто разделитель добавить».
   Тень с рамкой делала из списка уведомлений набор «плиток», хотя это
   однородная лента однотипных записей — ей достаточно линии между
   элементами, как в остальных списках сайта.
   ═══════════════════════════════════════════════════════════════════════ */
.envpolicy-news-item{
    border:0;
    border-radius:0;
    box-shadow:none;
}
.envpolicy-news-item + .envpolicy-news-item{
    border-top:1px solid var(--etp-acc-line);
    margin-top:1.5rem;
    padding-top:1.5rem;
}

/* Нормативные документы (антикоррупция) — тот же вид ссылки-документа.
   Вендор красит .laws-list .nav-link бирюзовым с подчёркиванием; здесь
   ссылка теперь .doc-inline-link, поэтому подчёркивание снимаем и мы —
   иначе оно осталось бы от соседнего правила на .nav-link. */
.laws-list a.doc-inline-link{
    color:inherit;
    font-weight:500;
    text-decoration:none;
}
.laws-list a.doc-inline-link:hover,
.laws-list a.doc-inline-link:focus-visible{color:#5fb9bd}


/* ═══════════════════════════════════════════════════════════════════════
   Вопрос-ответ «Системы РНО»: вёрстка содержимого ответов.

   Правка клиента 13.08.2026: «недоверстаны страницы… загов нет, отступов
   и прочего». Контент в полях был, но выводился сплошной лентой абзацев
   одного кегля: подзаголовки внутри ответа терялись, акцентная строка
   («серые — для… синие — для…») не отличалась от обычного текста, а между
   смысловыми кусками не было воздуха.

   Что делает этот блок:
     - подзаголовки внутри ответа (h4) получают вес и воздух сверху, чтобы
       читались как начало новой темы, а не как жирная строка абзаца;
     - .text-larger — акцентная строка ответа (в контенте она уже
       размечена этим классом) — становится крупнее и получает отбивку;
     - первый и последний элементы ответа не тянут лишние отступы, иначе
       карточка «распухает» сверху и снизу;
     - выделения <strong> внутри абзаца остаются полужирными, но не
       чёрными: это акцент внутри мысли, а не заголовок.

   Кегль самих ответов приведён к основному тексту: у подрядчика стоял
   .625rem — на широком экране это вдвое мельче окружающего текста.
   ═══════════════════════════════════════════════════════════════════════ */
.education-faq-item__content{font-size:var(--etp-text)}

.education-faq-item__content h4{
    color:#5fb9bd;
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:.4em;
    margin-top:1.6em;
}
.education-faq-item__content > *:first-child{margin-top:0}
.education-faq-item__content > *:last-child{margin-bottom:0}

.education-faq-item__content p{margin-bottom:1em}
.education-faq-item__content p strong{font-weight:600}

/* Акцентная строка ответа выделяется ВЕСОМ, а не кеглем: рядом уже стоят
   подзаголовки h4 своего размера, и третья ступень кегля в одном коротком
   ответе превратила бы карточку в лестницу из шрифтов. */
.education-faq-item__content .text-larger{
    font-size:var(--etp-text);
    font-weight:600;
    line-height:1.35;
    margin-bottom:1.2em;
    margin-top:1.2em;
}

/* Блок вопрос-ответ ближе к карточке с описанием программы (правка клиента:
   «подвинуть их поближе к основному блоку»). Между ними висело 90px —
   это margin-bottom самой карточки .education-rno-about, рассчитанный на
   разрыв между СЕКЦИЯМИ страницы. Вопросы к секции не относятся, они
   продолжение того же рассказа, поэтому подтягиваем их отрицательным
   отступом вместо правки чужого margin: тот же margin работает и там, где
   после карточки идёт настоящая новая секция. */
.education-rno-about + .education-faq{margin-top:-4rem}

/* ═══════════════════════════════════════════════════════════════════════
   Блоки ответа с иконкой — «Система РНО в Москве» (макет Figma 221-76067)
   ═══════════════════════════════════════════════════════════════════════
   Иконка живёт в спрайте и подключается из шаблона (<use> в контентном
   поле не выживает — санитайзер вырезает svg), поэтому здесь только
   геометрия и цвет. Цвет — currentColor у .rno-block__icon. */
.rno-blocks{margin:1.5em 0}

.rno-block{
    align-items:flex-start;
    display:flex;
    gap:1.25rem;
    margin-bottom:1.5em;
}
.rno-blocks > .rno-block:last-child{margin-bottom:0}

.rno-block__icon{
    align-items:center;
    color:#5fb9bd;
    display:flex;
    flex:0 0 auto;
    height:4rem;
    justify-content:center;
    width:4rem;
}
.rno-block__icon svg{height:100%;width:100%}

.rno-block__body{flex:1 1 auto;min-width:0}
.rno-block__body > *:first-child{margin-top:0}
.rno-block__body > *:last-child{margin-bottom:0}

/* Заголовок блока повторяет h4 ответа: тот же кегль, вес и цвет — блок с
   иконкой и подзаголовок в соседнем ответе обязаны читаться как одно. */
.rno-block__title{
    color:#5fb9bd;
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:.4em;
}

/* Два контейнера — карточками рядом, на телефоне друг под другом
   (согласовано с клиентом 13.08.2026). Рамка и радиус — как у прочих
   карточек сайта, см. DESIGN.md, раздел «Скругления». */
.rno-blocks--cards{
    display:grid;
    gap:1rem;
    grid-template-columns:1fr;
}
.rno-blocks--cards .rno-block{
    background:#fff;
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    gap:.875rem;
    margin-bottom:0;
    padding:1.125rem 1.25rem;
}
.rno-blocks--cards .rno-block__icon{height:3.25rem;width:3.25rem}

@media (min-width:768px){
    .rno-blocks--cards{grid-template-columns:1fr 1fr}
}

/* Цвета контейнеров: узкая роль на два блока — серый и синий бак
   московских дворов (DESIGN.md, раздел «Цвет»). Слово «серые» берёт
   затемнённый оттенок: макетный #c1bfbf на белом даёт контраст 2.1:1 и
   читается как выключенный пункт, а не как название бака. Сама иконка
   остаётся светлой, как в макете. */
.rno-block--grey .rno-block__icon{color:#c1bfbf}
.rno-block--grey .rno-block__title{color:#8b8f94}
.rno-block--blue .rno-block__icon,
.rno-block--blue .rno-block__title{color:#0884b5}

/* На узком экране иконка 4rem съедала треть строки, и текст рассыпался
   в колонку по два-три слова — на телефоне она мельче. */
@media (max-width:767px){
    .rno-block{gap:.875rem}
    .rno-block__icon{height:2.75rem;width:2.75rem}
}

/* Выноска: узкая высокая иконка слева от акцентного абзаца — вкладка
   «Сложные вопросы об РНО» (макет Figma 361-55224). В макете колонка под
   иконку одна и та же (~71px) при разной ширине самих иконок, поэтому
   ширину держит колонка, а иконка вписывается в неё по высоте. Цвет с
   текста снят намеренно: акцент несёт иконка, абзац остаётся чёрным
   полужирным — так в макете. */
.rno-blocks--callout .rno-block{align-items:flex-start;gap:1.5rem}
.rno-blocks--callout .rno-block__icon{
    height:5.5rem;
    justify-content:flex-start;
    width:3.9rem;
}
.rno-blocks--callout .rno-block__icon svg{height:100%;width:auto}
/* PT Sans на сайте всего в двух начертаниях, поэтому «полужирный» из
   макета — это 700. Правило бьёт по strong: акцентные абзацы приезжают из
   контента уже обёрнутыми, а .education-*-item__content p strong задаёт
   им свой вес и перекрыл бы вес, унаследованный от абзаца. */
.rno-blocks--callout .rno-block__body p,
.rno-blocks--callout .rno-block__body p strong{font-weight:700}

@media (max-width:767px){
    .rno-blocks--callout .rno-block{gap:1rem}
    .rno-blocks--callout .rno-block__icon{height:4rem;width:2.75rem}
}

/* Примечание к категории вторсырья: слева иллюстрация, справа текст
   (макет Figma 361-56770, блок «Бумага»). Подложки у примечания в макете
   нет — только иконка и текст, чуть плотнее основного набора. */
.waste-note{
    align-items:flex-start;
    display:flex;
    gap:1.75rem;
    margin-top:2rem;
}
.waste-note__icon{
    color:#5fb9bd;
    flex:0 0 auto;
    height:5.9rem;
    width:5.75rem;
}
.waste-note__icon svg{height:100%;width:100%}
.waste-note__body{flex:1 1 auto;min-width:0}
.waste-note__body > *:first-child{margin-top:0}
.waste-note__body > *:last-child{margin-bottom:0}

@media (max-width:767px){
    .waste-note{gap:1rem;margin-top:1.5rem}
    .waste-note__icon{height:3.5rem;width:3.4rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   Вкладка «Заявка на эко-мероприятия» (макет Figma 32-18831)
   ═══════════════════════════════════════════════════════════════════════
   Макет кладёт карточки форматов и плашку заявки на белые подложки с
   тенью. На сайте теней нет ни у одной карточки (DESIGN.md, раздел
   «Скругления»: рамка + радиус), поэтому от макета взята геометрия —
   пропорции, сторона фотографии, ритм, — а оформление остаётся наше. */
.education-apply-heading{
    font-size:var(--etp-accent);
    font-weight:700;
    margin-bottom:1.5rem;
    text-align:center;
}

/* Врезка про проект: контурная (в макете тоже без тени), кавычки в правом
   верхнем углу — декор, поэтому не мешают тексту и уезжают на мобильных. */
.education-apply-intro{
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    /* Кегль задан самому блоку, а не только абзацам внутри: гейт на
       канарейке считает <p> «голым», если масштабирующего класса нет ни у
       него, ни у предков, — а правило вида «.класс p» под это условие не
       подходит. */
    font-size:var(--etp-text);
    padding:2.25rem;
    position:relative;
}
.education-apply-intro p{font-size:var(--etp-text);margin-bottom:1em}
.education-apply-intro > *:last-child{margin-bottom:0}
.education-apply-intro__quotes{
    color:#5fb9bd;
    height:3.25rem;
    opacity:.35;
    position:absolute;
    right:2.25rem;
    inset-block-start:1.75rem;
    width:3.25rem;
    z-index:0;
}
/* Кавычки лежат ПОД текстом: в макете абзац до них не достаёт, а у нас
   строка длиннее и налезала на рисунок. Отодвигать текст полем справа
   нельзя — рваный правый край читается как ошибка вёрстки. */
.education-apply-intro p{position:relative;z-index:1}

/* Плашка с кнопкой идёт сразу за последней карточкой формата, а карточки
   держат только верхний отступ — без этого правила плашка прилипала к
   карточке квиза. */
/* Тот же отступ нужен и самой форме: когда она раскрыта, плашки уже нет
   и заголовок «Заявка на мероприятие» вставал вплотную к карточке. */
.education-offer + .feedback-teaser,
.education-offer + .feedback{margin-top:2.5rem}

.education-offer{
    align-items:stretch;
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    display:flex;
    gap:2rem;
    margin-top:2rem;
    overflow:hidden;
    padding:1.75rem;
}
/* Чередование сторон фотографии — ряд разворачивается, а не дублируется
   отдельной разметкой: порядок в DOM остаётся «фото, потом текст» на любой
   стороне, и на мобильных всё выстраивается одинаково. */
.education-offer--flip{flex-direction:row-reverse}

.education-offer__image{flex:0 0 42%}
.education-offer__image img{
    aspect-ratio:4 / 3;
    border-radius:var(--etp-card-radius);
    display:block;
    height:100%;
    object-fit:cover;
    width:100%;
}
.education-offer__body{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    min-width:0;
}
/* Значок формата и название — в одну строку (правка клиента 19.08.2026,
   ../education-offer было: значок сверху, заголовок отдельной строкой
   ниже). */
.education-offer__head{
    align-items:center;
    display:flex;
    gap:.75rem;
    margin-bottom:1rem;
}
.education-offer__head .education-offer__icon{margin-bottom:0}
.education-offer__head .education-offer__title{margin-bottom:0}
.education-offer__icon{
    color:#5fb9bd;
    flex:0 0 auto;
    height:2.75rem;
    margin-bottom:.75rem;
    width:2.75rem;
}
.education-offer__title{
    color:#5fb9bd;
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:1rem;
}
/* Кнопка «Заявка» в каждой карточке формата (правка клиента 19.08.2026,
   заменила единую плашку с кнопкой внизу страницы). */
.education-offer__apply{font-size:var(--etp-text);margin-top:1rem;padding-top:1rem}
/* Линия под заголовком — из макета: отделяет название формата от его
   характеристик. */
.education-offer__specs{
    border-top:1px solid #e3e6e8;
    font-size:var(--etp-text);
    padding-top:1rem;
}
.education-offer__specs p{margin-bottom:.35em}
.education-offer__specs > *:last-child{margin-bottom:0}

.education-offer__more{
    align-items:center;
    background:none;
    border:0;
    color:#5fb9bd;
    display:inline-flex;
    font-size:var(--etp-text);
    gap:.5rem;
    padding:1rem 0 0;
}
.education-offer__more .icon{transition:transform .2s ease}
.education-offer__more.collapsed .icon{transform:rotate(-90deg)}
.education-offer__details{font-size:var(--etp-text);padding-top:.75rem}
.education-offer__details p{margin-bottom:.75em}
.education-offer__details ul{margin:0;padding-left:1.25rem}
.education-offer__details li{margin-bottom:.35em}

@media (max-width:767px){
    .education-offer,
    .education-offer--flip{flex-direction:column;gap:1.25rem;padding:1.25rem}
    .education-offer__image{flex:0 0 auto}
    .education-offer__image img{height:auto}
    .education-apply-intro{padding:1.5rem}
    .education-apply-intro__quotes{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   Контакты компании (/contacts/) — макет Figma 32-20837
   ═══════════════════════════════════════════════════════════════════════
   Тень с карточки режима работы снята: карточки сайта живут на рамке и
   радиусе (DESIGN.md, «Скругления»). Остальная геометрия — из макета. */
/* Название компании — подпись под заголовком страницы, а не кнопка:
   залитая пилюля из макета читалась как кликабельная (правка клиента
   13.08.2026). По левому краю — как в макете и как весь контент ниже;
   центр был бы осью только для H1, а не для страницы. */
.company-badge{
    color:#5fb9bd;
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:2.5rem;
}

/* Контакты слева, режим работы карточкой справа. На узком экране
   карточка уходит под контакты. */
.company-head{
    align-items:flex-start;
    display:grid;
    gap:2.5rem;
    grid-template-columns:1fr;
    margin-bottom:3.5rem;
}
.company-hours{
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    /* Кегль задан самому блоку, а не только его абзацам: строки режима
       работы приезжают из структуры голыми <p>, и без масштабируемого
       класса на предке они рендерились бы браузерным умолчанием. */
    font-size:var(--etp-text);
    padding:1.75rem;
    text-align:center;
}
.company-hours .icon{
    color:#5fb9bd;
    height:2.25rem;
    margin-bottom:1rem;
    width:2.25rem;
}
.company-hours p{font-size:var(--etp-text);margin-bottom:.35em}
.company-hours > *:last-child{margin-bottom:0}

/* Разделитель после контактного блока — единственная линия этой части
   макета, отделяет «кто мы и как работаем» от «куда обращаться». */
/* Линия-разделитель приезжает вместе с .press-contacts (border-bottom у
   самого блока), поэтому своей здесь не нужно — иначе их было бы две:
   короткая под контактной колонкой и длинная над управлениями. Растягиваем
   существующую на всю ширину и убираем двойной отступ. */
.company-head .press-contacts{
    border-bottom:0;
    margin-bottom:0;
    padding-bottom:0;
}
.company-head + .regional-territories{
    border-top:1px solid #c1c4c7;
    padding-top:3.5rem;
}

.company-hotlines{margin:3.5rem 0}
.company-hotline{
    align-items:flex-start;
    display:flex;
    gap:1.5rem;
    margin-bottom:2.5rem;
}
.company-hotlines > .company-hotline:last-child{margin-bottom:0}
.company-hotline__icon{
    color:#5fb9bd;
    flex:0 0 auto;
    height:2.85rem;
    width:3.55rem;
}
.company-hotline__body{flex:1 1 auto;min-width:0}
.company-hotline__heading{
    font-size:var(--etp-text);
    font-weight:700;
    margin-bottom:.5em;
}
.company-hotline__phone{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:.25em;
}
.company-hotline__phone a{color:#5fb9bd;text-decoration:none}
.company-hotline__body > *:last-child{margin-bottom:0}

@media (min-width:768px){
    .company-head{grid-template-columns:minmax(0, 1fr) 22rem}
}

@media (max-width:767px){
    .company-hotline{gap:1rem}
    .company-hotline__icon{height:2rem;width:2.5rem}
    .company-hours{padding:1.25rem}
}

/* Разделитель между телефонами и формой (правка клиента 13.08.2026: блоки
   шли слишком плотно). Линия висит на самой форме, а не отдельным <hr>:
   иначе её пришлось бы прятать вручную в тех случаях, когда группы
   телефонов на странице нет. */
.company-hotlines + .feedback,
.regional-territories + .feedback{
    border-top:1px solid #c1c4c7;
    margin-top:3.5rem;
    padding-top:3.5rem;
}

/* Кнопка «Задать вопрос» шестой ячейкой сетки плашек управлений (правка
   клиента 19.08.2026, только templates/regional-contacts.php через
   snippets/regional-territories.php, параметр $askButton — см. докблок
   там). Центрирует пилюлю в пустой ячейке грида, без карточного фона —
   это не плашка-документ, а просто кнопка на пустом месте. */
.regional-territories__ask{align-items:center;display:flex;justify-content:center;padding:1.125rem}

/* Форма свёрнута (JS добавляет .feedback--collapsed при инициализации,
   см. plugins/eco-feedback-toggle/index.php) — верхняя рамка/отступ
   .regional-territories + .feedback здесь неуместны: раньше их гасила
   стоявшая между блоками подложка-тизер (нарушала смежность селектора),
   теперь, когда подложка убрана и .feedback идёт СРАЗУ за
   .regional-territories (кнопка переехала внутрь грида), рамка светилась
   бы прямо над схлопнутой в нуль высоты формой — видимая линия и большой
   пустой отступ в никуда. Три класса в селекторе — специфичность выше
   правила ".regional-territories + .feedback" (2 класса), переопределяет
   гарантированно независимо от порядка в файле. Без JS класс
   .feedback--collapsed не появляется вовсе (см. докблок eco-feedback-
   toggle), и полная рамка/отступ показываются как обычно — форма и так
   стоит развёрнутой. */
.regional-territories + .feedback.feedback--collapsed{border-top:none;margin-top:0;padding-top:0}

/* Оговорка к номеру — приглушённая, обычным кеглем: это уточнение, а не
   часть самого телефона. */
/* Оговорка — отдельной строкой под номером, приглушённая и мельче: это
   уточнение к телефону, а не его часть. */
.company-hotline__note{
    color:#5a6572;
    font-size:var(--etp-note);
    font-weight:400;
    margin-top:-.15em;
}

@media (max-width:767px){
    .company-hotlines + .feedback,
    .regional-territories + .feedback{margin-top:2.5rem;padding-top:2.5rem}
}

/* Раздел, внутри которого находится посетитель, подсвечивается так же,
   как раздел под курсором: правила подрядчика висят на :hover и
   .is-subnav-open, поэтому наш класс просто встаёт с ними в один ряд. */
.navbar-nav > .nav-item.is-active > .nav-link{font-weight:700}
.navbar-nav > .nav-item.is-active > .nav-link .nav-link-span::after{opacity:1;visibility:visible}

/* Перекрывает font-display:swap из блока подрядчика — см. докблок
   preload в snippets/header.php. Само объявление @font-face повторяется
   целиком: font-display не наследуется и не патчится по отдельности. */
@font-face{font-family:"PT Sans";src:url("../fonts/ptsans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"PT Sans";src:url("../fonts/ptsans-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:optional}

/* Подвкладки материалов с одиночной раскладкой (Буклеты, Раскраски,
   Чек-листы) рендерятся без обёртки .education-materials-grid, а весь
   вертикальный ритм сетки у подрядчика живёт в её gap. Своих отступов у
   карточки нет — в обычном потоке они стыковались встык, и ссылка
   «Скачать» упиралась в картинку следующего буклета. Возвращаем тот же
   ритм, что у сетки на каждом брейкпоинте; соседний селектор вместо
   margin-bottom — чтобы под последней карточкой не повис лишний отступ. */
.education-materials-item--single + .education-materials-item--single{margin-top:1.625rem}
@media (min-width:768px){.education-materials-item--single + .education-materials-item--single{margin-top:2.25rem}}
@media (min-width:1000px){.education-materials-item--single + .education-materials-item--single{margin-top:2.7rem}}
@media (min-width:3000px){.education-materials-item--single + .education-materials-item--single{margin-top:3.75rem}}

/* Постер тянется на весь фон так же, как само видео (см. inline-style на
   <video> в snippets/header.php): без этого картинка легла бы плиткой в
   натуральную величину. */
video.page-background{background-position:center;background-repeat:no-repeat;background-size:cover}

/* ═══════════════════════════════════════════════════════════════════════
   Вкладка «Система РНО»: цифры, схема, шкала сроков
   ═══════════════════════════════════════════════════════════════════════
   Ни одного нового факта: все числа и формулировки взяты из ответов,
   которые на этой же вкладке уже есть, — блоки лишь вытаскивают их из
   середины абзацев наверх. */

/* Плитка цифр */
.eco-facts{
    display:grid;
    gap:1rem;
    grid-template-columns:1fr;
    margin-bottom:2.5rem;
}
.eco-fact{
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    padding:1.5rem;
    text-align:center;
}
.eco-fact__value{
    color:#5fb9bd;
    font-size:var(--etp-accent);
    font-weight:700;
    line-height:1.15;
    margin-bottom:.5rem;
}
.eco-fact__text{
    font-size:var(--etp-note);
    margin-bottom:0;
}

/* Схема «путь отходов» — фирменный промо-блок: градиент из двух цветов
   палитры, белый текст, контурные иконки (DESIGN.md, «Промо-блоки»). */
.eco-flow{
    background:linear-gradient(120deg, #a1c778 0%, #5fb9bd 100%);
    border-radius:var(--etp-card-radius);
    color:#fff;
    margin-bottom:2.5rem;
    padding:2.25rem;
}
.eco-flow__heading{
    color:#fff;
    font-size:var(--etp-accent);
    font-weight:700;
    margin-bottom:2rem;
}
.eco-flow__steps{
    display:grid;
    gap:2rem 1.5rem;
    grid-template-columns:1fr;
}
.eco-flow__step{position:relative}
/* Номер шага — в белом ромбе, как в фирменных схемах компании. Ромб
   рисуется поворотом квадрата, а цифра внутри поворачивается обратно. */
.eco-flow__num{
    align-items:center;
    color:#5fb9bd;
    display:inline-flex;
    font-size:var(--etp-note);
    font-weight:700;
    height:2.25rem;
    justify-content:center;
    margin-bottom:1rem;
    position:relative;
    width:2.25rem;
}
/* Сам ромб — псевдоэлемент: поворачивать контейнер вместе с цифрой
   нельзя, она встала бы боком. */
.eco-flow__num::before{
    background:#fff;
    border-radius:.25rem;
    content:"";
    inset:0;
    position:absolute;
    transform:rotate(45deg);
}
.eco-flow__num > span{position:relative}
.eco-flow__icon{
    color:#fff;
    display:block;
    height:3rem;
    margin-bottom:1rem;
    width:3rem;
}
.eco-flow__title{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:.5rem;
}
/* Без приглушения: на светлом конце градиента полупрозрачный белый уже
   плохо читался. */
.eco-flow__text{
    font-size:var(--etp-note);
    margin-bottom:0;
}

/* Шкала сроков разложения */
.eco-decay{margin-bottom:2.5rem}
.eco-decay__heading{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:1.25rem;
}
.eco-decay__row{
    align-items:center;
    display:grid;
    gap:.75rem;
    grid-template-columns:8rem 1fr 5rem;
    margin-bottom:.85rem;
}
.eco-decay__name{font-size:var(--etp-note);font-weight:600}
.eco-decay__bar{
    background:#f4f5f2;
    border-radius:2.5em;
    display:block;
    height:1.25rem;
    overflow:hidden;
}
.eco-decay__fill{
    background:#5fb9bd;
    border-radius:2.5em;
    display:block;
    height:100%;
}
.eco-decay__fill--soft{background:#a1c778}
.eco-decay__years{
    color:#5a6572;
    font-size:var(--etp-note);
    text-align:right;
}

@media (min-width:768px){
    .eco-facts{grid-template-columns:repeat(4, 1fr)}
    .eco-flow__steps{grid-template-columns:repeat(4, 1fr)}
    .eco-decay__row{grid-template-columns:11rem 1fr 6rem}
}

/* Два бака — цветом, а не подписью: плашка залита цветом реального
   контейнера, иконка и текст белые (решение клиента 13.08.2026 —
   «иконки оставить, можно их белыми»). Рамка при этом не нужна: цвет
   сам держит границу блока. */
.rno-blocks--cards .rno-block--grey,
.rno-blocks--cards .rno-block--blue{
    border-color:transparent;
    color:#fff;
}
.rno-blocks--cards .rno-block--grey{background:#8b8f94}
.rno-blocks--cards .rno-block--blue{background:#0884b5}
.rno-blocks--cards .rno-block--grey .rno-block__icon,
.rno-blocks--cards .rno-block--grey .rno-block__title,
.rno-blocks--cards .rno-block--blue .rno-block__icon,
.rno-blocks--cards .rno-block--blue .rno-block__title{color:#fff}

/* ═══════════════════════════════════════════════════════════════════════
   Календарь экоцентра: карточка события под сеткой
   ═══════════════════════════════════════════════════════════════════════
   Было — всплывашка поверх календаря: она перекрывала соседние даты, и
   пока открыто 15-е, до 22-го нельзя было доклкикнуться. Стало — карточка
   в потоке под сеткой месяца (правка клиента 13.08.2026), оформлена как
   карточки форматов на «Экопросвещении»: фото сбоку, рамка, без тени. */
.ecocenter-calendar__details{margin-top:1.5rem}

/* Контейнер карточки — только обёртка показа/скрытия. Сама карточка
   внутри календаря идёт без рамки: рамка уже есть у календаря, и вторая
   вокруг события выглядела вложенной коробкой (правка клиента 13.08.2026). */
.ecocenter-event-card{border:0;padding:0}
.ecocenter-calendar__details .education-offer{
    border:0;
    margin-top:0;
    padding:0;
}

/* Фото события — сверху во всю ширину карточки, текст под ним тоже во всю
   ширину (правка клиента 14.10.2026, вариант Б мокапа). Колонка календаря
   узкая: фото сбоку получало около 224 px ширины, а общее правило
   .education-offer__image img (height:100%) растягивало его на высоту
   текста — горизонтальный кадр превращался в полосу 224×571. Высоту
   задаёт пропорция 16:9, cover срезает лишнее. На мобильном карточка и так
   шла столбиком — теперь так же на всех ширинах. */
.ecocenter-calendar__details .education-offer{
    flex-direction:column;
    gap:1.25rem;
}
.ecocenter-calendar__details .education-offer__image{flex:0 0 auto}
.ecocenter-calendar__details .education-offer__image img{
    aspect-ratio:16/9;
    height:auto;
}

/* Виджет над кнопкой заявки (правка клиента 19.08.2026, п.15) — карточка
   постоянного мероприятия «Экскурсии в экоцентре», видна по умолчанию,
   прячется, пока раскрыта карточка конкретной даты (см. JS в
   snippets/ecocenter-calendar.php). Тот же приём "без рамки", что у
   карточки события выше — рамка уже есть у календаря. */
.ecocenter-calendar__excursion{margin-top:1.5rem}
.ecocenter-calendar__excursion .education-offer{
    border:0;
    margin-top:0;
    padding:0;
}
.ecocenter-event-card__event{
    align-items:center;
    display:flex;
    gap:1.25rem;
}
.ecocenter-event-card__event:not(:first-child){
    border-top:1px solid #e3e6e8;
    margin-top:1rem;
    padding-top:1rem;
}
.ecocenter-event-card__image{flex:0 0 auto}
.ecocenter-event-card__image img{
    border-radius:var(--etp-card-radius);
    display:block;
    height:6rem;
    object-fit:cover;
    width:8rem;
}
.ecocenter-event-card__body{flex:1 1 auto;min-width:0}
.ecocenter-event-card__title{
    color:#5fb9bd;
    display:block;
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:.35rem;
    text-decoration:none;
}
.ecocenter-event-card__title:focus-visible,
.ecocenter-event-card__title:hover{text-decoration:underline}
.ecocenter-event-card__time{
    color:#5a6572;
    font-size:var(--etp-text);
    margin-bottom:0;
}

/* Выбранная дата остаётся отмеченной, пока открыта её карточка. */
.ecocenter-calendar__date--open .ecocenter-calendar__date-btn{
    background-color:#5fb9bd;
    color:#fff;
}

@media (max-width:767px){
    .ecocenter-event-card__event{align-items:flex-start;gap:1rem}
    .ecocenter-event-card__image img{height:4.5rem;width:6rem}
}

/* ── Календарь: углы и размер дат ────────────────────────────────────────
   Шапка «АНОНС МЕРОПРИЯТИЙ» вылезала за скруглённые углы рамки: у неё был
   свой радиус .375rem, у самой карточки — другой. Радиус теперь один
   (--etp-card-radius, как у остальных карточек сайта), а overflow срезает
   всё, что упирается в угол, — чинит и шапку, и заливку выбранной даты.
   Даты крупнее: цифры кеглем сноски в сетке 7×6 выглядели мелко (правка
   клиента 13.08.2026). */
.ecocenter-calendar{
    border-radius:var(--etp-card-radius);
    overflow:hidden;
}
.ecocenter-calendar__title{border-radius:0}

.ecocenter-calendar__date-btn{
    border-radius:.375rem;
    font-size:var(--etp-text);
    height:2.5rem;
    min-width:2.5rem;
}
.ecocenter-calendar__weekday{font-size:var(--etp-text)}
.ecocenter-calendar__caption{font-size:var(--etp-title)}

/* Карточка события уезжает под сетку, поэтому нижние углы календаря
   больше не срезают её собственный радиус. */
.ecocenter-calendar__details{
    padding:0 1rem 1rem;
}

@media (min-width:768px){
    .ecocenter-calendar__date-btn{height:3rem;min-width:3rem}
}

/* Карточка события переиспользует компонент карточки формата
   (.education-offer) — своего здесь только отступ у ссылки записи. */
/* Кегль задан обёртке ссылки: <p> вокруг кнопки приезжает из шаблона
   голым, и без масштабируемого класса гейт справедливо ловит его как
   немасштабируемый умолчанием браузера. */
.ecocenter-event-card__signup{font-size:var(--etp-text);margin-top:1rem}
.ecocenter-event-card + .ecocenter-event-card{margin-top:1rem}

/* Воздух вокруг «Показать еще»: кнопка стояла впритык и к последней
   карточке новостей, и к плашке под ней (правка клиента 13.08.2026).
   Соседний селектор здесь не годится — между кнопкой и плашкой стоит
   <script> ленты, поэтому отступ вешаем на саму плашку внутри вкладки, а
   у кнопки задаём padding-block (он не спорит с горизонтальным паддингом
   подрядчика в его же медиазапросах). */
.eco-news-more{padding-block:2.5rem}
.tab-pane > .feedback-teaser,
.tab-pane > .feedback{margin-top:2.5rem}

/* ── Правила приема: плакаты и слайдер ──────────────────────────────────
   Одиночный плакат разворачивался до 40.875rem, а карточки в слайдере
   занимали почти всю ширину карточки — на широком экране это выглядело
   «адски огромным» (правка клиента 13.08.2026). Ограничиваем ширину и
   отдаём высоту содержимому: плакат всё равно открывается во весь экран
   по клику (glightbox), крупный превью не нужен. */
.ecocenter-rules-common img{max-width:22rem}
.rules-slider .swiper-slide img{
    display:block;
    height:auto;
    margin-inline:auto;
    max-width:100%;
}

@media (min-width:1000px){
    .ecocenter-rules-common img{max-width:26rem}
}

/* ── Мобильная раскладка блоков «Экопросвещения» ────────────────────────
   На телефоне номер шага и иконка занимали по отдельной строке, и один
   шаг растягивался на пол-экрана (правка клиента 13.08.2026). Ставим их
   в одну строку, текст — под ними. Плитки цифр там же идут по две в ряд:
   по одной они выглядели как отдельные экраны. */
@media (max-width:767px){
    .eco-facts{grid-template-columns:1fr 1fr}
    .eco-fact{padding:1.1rem .75rem}
    .eco-fact__value{font-size:var(--etp-title)}

    .eco-flow{padding:1.5rem}
    .eco-flow__steps{gap:1.75rem}
    .eco-flow__step{
        align-items:center;
        column-gap:1rem;
        display:grid;
        grid-template-columns:auto auto 1fr;
    }
    .eco-flow__num{margin-bottom:0}
    .eco-flow__icon{
        height:2.25rem;
        margin-bottom:0;
        width:2.25rem;
    }
    .eco-flow__title,
    .eco-flow__text{grid-column:1 / -1}
    .eco-flow__title{margin-top:.85rem}
}

/* Слайдер плакатов: слайд по содержимому, стрелки соразмерны картинке.
   До правки стрелки были в половину плаката, а слайд держал высоту
   самого крупного изображения. */
.rules-slider .swiper-slide{
    align-items:flex-start;
    display:flex;
    height:auto;
    justify-content:center;
}
/* 23.09.2026: стрелки стали белыми кругами (докблок в блоке экоцентра
   выше) — размер круга задаётся здесь, этот блок идёт позже и главный. */
.rules-slider .swiper-button-prev,
.rules-slider .swiper-button-next{height:2.5rem;width:2.5rem}

@media (min-width:1000px){
    .rules-slider .swiper-button-prev,
    .rules-slider .swiper-button-next{height:3rem;width:3rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   Пересборка «Полезных советов» (мокапы A–G, согласованы 13.08.2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* D. Врезка «важно»: иконка + полоса слева вместо капса по центру.
   Регистр правится оформлением, а не контентом — тексты в панели
   остаются как были. */
.education-tips-important{
    align-items:flex-start;
    background:#f4f5f2;
    border-left:.25rem solid #a1c778;
    border-radius:.375rem;
    display:flex;
    font-weight:600;
    gap:1rem;
    padding:1.25rem 1.5rem;
    text-align:left;
    text-transform:none;
}
.education-tips-important__icon{
    color:#a1c778;
    flex:0 0 auto;
    height:1.75rem;
    width:1.75rem;
}
.education-tips-important__body{flex:1 1 auto;min-width:0}
.education-tips-important__body > *:last-child{margin-bottom:0}
/* Второй вариант врезки — бирюзовая полоса: подряд идущие «важно» не
   должны выглядеть одинаково. */
.education-tips-important--2{border-left-color:#5fb9bd}
.education-tips-important--2 .education-tips-important__icon{color:#5fb9bd}

/* F. Карточки занятий — мягкий тонированный фон (выбор клиента из двух
   вариантов мокапа). Рамка не нужна: фон сам держит границу. */
.education-offer{
    background:#f4f5f2;
    border-color:transparent;
}
/* В календаре экоцентра карточка живёт внутри рамки самого календаря —
   там фон только мешал бы. */
.ecocenter-calendar__details .education-offer{background:none}

/* B. «Принимается / не принимается» — двумя колонками. */
.tips-yesno{
    display:grid;
    gap:1.25rem;
    grid-template-columns:1fr;
    margin:1.5rem 0;
}
.tips-col{
    border-radius:var(--etp-card-radius);
    font-size:var(--etp-text);
    padding:1.5rem;
}
.tips-col--yes{background:#a1c778;color:#fff}
.tips-col--no{background:#f4f5f2}
.tips-col__title{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:1rem;
}
.tips-col__row{
    align-items:flex-start;
    display:flex;
    gap:.75rem;
    margin-bottom:.6rem;
}
.tips-col__row:last-child{margin-bottom:0}
.tips-col__icon{
    flex:0 0 auto;
    height:1.25rem;
    margin-top:.15rem;
    width:1.25rem;
}
.tips-col--no .tips-col__icon{color:#5a6572}

/* C. Маркировка пластика — бейджами вместо двух слайдеров с картинками. */
.tips-marks{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin:1.5rem 0;
}
.tips-mark{
    border:1px solid #e3e6e8;
    border-radius:.375rem;
    /* Потолок ширины — чтобы длинное название типа не растягивало бейдж
       во всю строку и ряд оставался рядом бейджей, а не списком. */
    max-width:14rem;
    min-width:6.5rem;
    padding:.85rem 1rem;
    text-align:center;
}
.tips-mark--yes{background:#5fb9bd;border-color:#5fb9bd;color:#fff}
.tips-mark--no{background:#fff;color:#5a6572}
.tips-mark__num{
    font-size:var(--etp-title);
    font-weight:700;
    line-height:1.1;
    margin-bottom:0;
}
.tips-mark__name{font-size:var(--etp-note);margin-bottom:0}

/* A. Материалы — плитками; подробности раскрываются под сеткой. */
.tips-materials{
    display:grid;
    gap:1rem;
    grid-template-columns:1fr 1fr;
    margin-bottom:1.5rem;
}
.tips-material{
    background:none;
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    /* Цвет обязателен: плитка — это <button>, а Safari на iOS красит текст
       кнопки без своего color в системный синий (правка клиента 13.08.2026:
       «какие-то синие ссылки в этом блоке на мобильной версии»). В Chrome
       умолчание чёрное, поэтому на десктопе дефект не виден. */
    color:#1f2933;
    display:block;
    padding:1.5rem;
    text-align:center;
    width:100%;
}
.tips-material[aria-expanded="true"]{
    border-color:#5fb9bd;
    box-shadow:inset 0 0 0 1px #5fb9bd;
}
.tips-material__icon{
    color:#5fb9bd;
    display:block;
    height:2.5rem;
    margin:0 auto .75rem;
    width:2.5rem;
}
.tips-material__title{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:.35rem;
}
.tips-material__mark{
    color:#5a6572;
    font-size:var(--etp-note);
    margin-bottom:0;
}

/* E. Reduce-Reuse-Recycle — три карточки на фирменном градиенте. */
.tips-rrr{
    background:linear-gradient(120deg, #a1c778 0%, #5fb9bd 100%);
    border-radius:var(--etp-card-radius);
    color:#fff;
    margin:2rem 0;
    padding:2.25rem;
}
.tips-rrr__title{
    font-size:var(--etp-accent);
    font-weight:700;
    margin-bottom:1.5rem;
}
.tips-rrr__grid{
    display:grid;
    gap:1.5rem;
    grid-template-columns:1fr;
}
.tips-rrr__name{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:.5rem;
}
.tips-rrr__text{font-size:var(--etp-note);margin-bottom:0}

/* G. Появление блоков при прокрутке. Анимация включается только классом
   от скрипта (plugins/eco-reveal): без JS блоки просто видны, а тем, кто
   просил уменьшить движение, показываются сразу. */
/* Скрытие включается ТОЛЬКО когда скрипт жив: класс has-reveal он
   ставит на <html> первым делом. Безусловное opacity:0 означало бы, что
   при выключенном JS половина страницы просто исчезла. */
.has-reveal .eco-reveal{
    opacity:0;
    transform:translateY(1.25rem);
    transition:opacity .5s ease, transform .5s ease;
}
.has-reveal .eco-reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
    .has-reveal .eco-reveal{opacity:1;transform:none;transition:none}
}

@media (min-width:768px){
    .tips-yesno{grid-template-columns:1fr 1fr}
    .tips-materials{grid-template-columns:repeat(4, 1fr)}
    .tips-rrr__grid{grid-template-columns:repeat(3, 1fr)}
}

/* Точки слайдера: у подрядчика на широком экране они разрастались до
   3.15rem каждая — десять таких занимали всю ширину карточки и читались
   как отдельный элемент вёрстки, а не как индикатор (правка клиента
   13.08.2026). Возвращаем скромную полоску. */
.rules-slider .swiper-pagination-bullet{
    border-radius:.25rem;
    height:.125rem;
    width:1.25rem;
}
.rules-slider .swiper-pagination{column-gap:.5rem}

/* ── Блок материалов: плитка, панель, бейджи ─────────────────────────────
   Замечания клиента 13.08.2026: «разные шрифты, кривое, непонятно, где
   блок заканчивается». Плитка теперь строго вертикальная (название —
   маркировка — подсказка), панель под сеткой стала карточкой с рамкой,
   бейджи выровнены по высоте и кеглю. */
.tips-material{
    align-items:center;
    display:flex;
    flex-direction:column;
    gap:.35rem;
    justify-content:flex-start;
    min-height:100%;
    transition:border-color .2s ease;
}
.tips-material__icon{margin:0 0 .5rem}
.tips-material__title{
    display:block;
    font-size:var(--etp-text);
    font-weight:700;
    line-height:1.25;
    margin-bottom:0;
}
.tips-material__mark{
    color:#5a6572;
    display:block;
    font-size:var(--etp-note);
    line-height:1.25;
    margin-bottom:0;
}
.tips-material__hint{
    color:#5fb9bd;
    display:block;
    font-size:var(--etp-note);
    margin-top:auto;
    padding-top:.5rem;
}
.tips-material[aria-expanded="true"] .tips-material__hint{font-weight:700}
/* Сетка растягивает плитки по высоте самой длинной — иначе ряд «съезжает»,
   когда у одной категории маркировка в две строки. */
.tips-materials{align-items:stretch}

/* Панель с содержимым — такая же карточка, как остальные на сайте:
   рамка и радиус показывают, где блок начинается и где кончается. */
.tips-panel{
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    font-size:var(--etp-text);
    margin-bottom:1.5rem;
    padding:1.75rem;
}
.tips-panel__title{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:1.25rem;
}
.tips-panel > p{font-size:var(--etp-text)}
.tips-panel > *:last-child{margin-bottom:0}

/* Бейджи одной высоты и одного кегля: раньше длинные названия делали
   ряд рваным. */
.tips-marks{align-items:stretch}
.tips-mark{
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.tips-mark__num{font-size:var(--etp-text)}
.tips-mark__name{line-height:1.25}

/* Слайдер плакатов экоцентра — по два-три кадра в ряд, сами кадры
   крупнее (правка клиента 13.08.2026: «верни вывод по 2–3, но тогда
   картинку побольше»). Ширину задаёт сетка слайдов, а не сам <img>. */
.rules-slider .swiper-slide img{max-width:100%}

@media (min-width:768px){
    .rules-slider .swiper-slide img{max-width:100%}
}

/* ── Схемы ответов: цепочка, дорожка, развилка ───────────────────────────
   Лёгкая графика: тонкие линии и контурные иконки, без заливки. Плотный
   градиент на вкладке уже занят схемой «Система обращения с отходами» —
   второй такой же блок перегрузил бы страницу. */
.eco-scheme{margin-bottom:1.5rem}

/* Цепочка: шаги в ряд, между ними уголок-стрелка. */
.eco-scheme--chain{
    display:grid;
    gap:1.25rem;
    grid-template-columns:1fr;
}
.eco-scheme__step{
    padding:0 .5rem;
    position:relative;
    text-align:center;
}
.eco-scheme__icon{
    color:#5fb9bd;
    display:block;
    height:2.25rem;
    margin:0 auto .6rem;
    width:2.25rem;
}
.eco-scheme__value{
    color:#5fb9bd;
    font-size:var(--etp-title);
    font-weight:700;
    line-height:1.15;
    margin-bottom:.35rem;
}
.eco-scheme__text{
    font-size:var(--etp-note);
    margin-bottom:0;
}

/* Дорожка: нумерованные точки на тонкой линии. */
.eco-scheme--road{
    padding-left:2.5rem;
    position:relative;
}
.eco-scheme--road::before{
    background:#5fb9bd;
    bottom:.5rem;
    content:"";
    left:.7rem;
    opacity:.35;
    position:absolute;
    top:.5rem;
    width:1px;
}
.eco-scheme__item{
    margin-bottom:1.25rem;
    position:relative;
}
.eco-scheme__item:last-child{margin-bottom:0}
.eco-scheme__dot{
    align-items:center;
    background:#fff;
    border:1px solid #5fb9bd;
    border-radius:2.5em;
    color:#5fb9bd;
    display:flex;
    font-size:var(--etp-note);
    font-weight:700;
    height:1.5rem;
    justify-content:center;
    left:-2.5rem;
    position:absolute;
    top:.1rem;
    width:1.5rem;
}
.eco-scheme__title{
    font-size:var(--etp-text);
    font-weight:700;
    margin-bottom:.15rem;
}
/* Пояснение вплотную к заголовку шага: у абзацев ответа свой отступ в
   1em, и в дорожке он рвал пару «заголовок — пояснение». */
.eco-scheme--road .eco-scheme__text{color:#5a6572;margin-bottom:0}
.eco-scheme--road .eco-scheme__title{margin-bottom:.2rem}
.eco-scheme--road .eco-scheme__text strong{color:#5fb9bd}

/* Развилка: две колонки, «как не надо» — пунктиром. */
.eco-scheme--fork{
    display:grid;
    gap:1.25rem;
    grid-template-columns:1fr;
}
.eco-scheme__col{
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    padding:1.25rem;
    text-align:center;
}
.eco-scheme__col--bad{border-style:dashed}
.eco-scheme__col--bad .eco-scheme__icon{color:#5a6572}
.eco-scheme__col .eco-scheme__text{color:#5a6572}

@media (min-width:768px){
    .eco-scheme--chain{grid-template-columns:repeat(4, 1fr)}
    .eco-scheme--fork{grid-template-columns:1fr 1fr}

    /* Уголок-стрелка между шагами цепочки. На узком экране шаги идут
       колонкой, и стрелка сбоку там ни к чему. */
    .eco-scheme__step + .eco-scheme__step::before{
        border-right:1.5px solid #5fb9bd;
        border-top:1.5px solid #5fb9bd;
        content:"";
        height:.7rem;
        inset-block-start:1.4rem;
        left:-.35rem;
        position:absolute;
        transform:rotate(45deg);
        width:.7rem;
    }
}

/* Материалы: буклеты, раскраски и чек-листы идут той же сеткой, что и
   плакаты, только карточки крупнее — их меньше, и превью важнее. Прежние
   правила «одиночной» раскладки (ширина 22.5–37.5rem и margin-inline:auto)
   перекрываются здесь, чтобы не трогать зону подрядчика. */
.education-materials-grid--single{
    display:grid;
    gap:1.625rem;
    grid-template-columns:1fr;
}
.education-materials-item--single{
    margin-inline:0;
    max-width:none;
    width:auto;
}
.education-materials-item--single + .education-materials-item--single{margin-top:0}

@media (min-width:768px){
    .education-materials-grid--single{gap:2.25rem 1.35rem;grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:1000px){
    .education-materials-grid--single{gap:2.7rem 1.62rem}
}


/* ── Реестр МКД: своего оформления у вкладки больше нет ──────────────────
   Правка клиента 13.08.2026: «зачем было изобретать велосипед, если есть
   вкладка «Уведомления…»». Вкладка стала таким же аккордеоном по округам
   (.contracts-list / .contracts-item) с тем же полем поиска, поэтому ушли
   .contracts-registry, .registry-search, .registry-chips, .registry-table
   и .registry-empty — вместе с разметкой, которая их носила.

   Остался один класс: подпись на случай, когда xlsx не читается. */
.registry-note{
    color:#5a6572;
    font-size:var(--etp-note);
    margin:1rem 0 0;
}


/* ══════════════════════════════════════════════════════════════════════
   РЕЗИНОВЫЙ КОНТЕЙНЕР (правка клиента 13.08.2026: «где-то огромные поля
   пустые»)

   БЫЛО: четыре ступени max-width — 540 / 720 / 960 / 1344px, и выше
   1400px не происходило НИЧЕГО. Поля в пустоту скакали от 0 до трети
   экрана и обратно при каждом переходе через брейкпоинт (замер:
   767px → 30%, 999px → 30%, 1399px → 34%, 1920px → 33%, 2560px → 49%).
   Ступени задавала вёрстка подрядчика: на «своей» ширине раскладка
   выглядела задуманно, а между ступенями — как забытая половина экрана.

   СТАЛО: ширина считается от экрана, а не выбирается из четырёх
   значений. min() держит верхний предел, clamp() растит боковые поля
   плавно вместе с шириной. Потолок поднят 1344 → 1800px: на мониторе
   1920 пустота падает с трети до 6%, при этом строка не становится
   длиннее читаемого (за это отвечает ограничение ширины ТЕКСТА, а не
   контейнера — см. ниже).

   Почему перекрываем, а не правим ступени подрядчика: правил четыре
   набора (.container, .navbar .container, .section--hero>.container) в
   трёх медиазапросах — двенадцать мест, и любая будущая правка вёрстки
   вернула бы их обратно. Одно правило поверх устойчивее.

   ВАЖНО про :where() — он даёт нулевую специфичность, поэтому НЕ
   годится: вендорские .container{max-width:…} внутри @media перебили бы
   его. Специфичность здесь должна быть не ниже вендорской.

   ПОТОЛОК 1800 → 1440px (правка клиента 17.08.2026: «сайт растянутый в
   ширину, у меня глаза разбегаются читать, старый был аккуратный»).
   Тот же заказчик, обратная жалоба через четыре дня — маятник, поэтому
   не возвращаемся к «узко», а садимся в середину:

     1280px — ширина старого сайта eco-pro.ru (WordPress/Colibri, замер
              17.08.2026). Ровно то, что просит клиент словами, но на
              мониторе 1920 это снова треть экрана в пустоту — ЖАЛОБА
              13.08, из-за которой контейнер и сделали резиновым;
     1440px — поля 12% на 1920 и 22% на 2560. Пустота заметно меньше
              трети, при этом раскладка перестаёт «разбегаться»;
     1800px — как было: поля 6%, но строка и блоки на широком мониторе
              читаются как развёрнутая газета.

   Выбрано 1440 и подтверждено владельцем по скриншотам-вариантам на
   1920 и 2560 (главная + текстовая страница).

   Половина ощущения «всё большое» — НЕ ширина, а кегль: основной текст
   на 1440+ был 25px. Он снижен до 20px в блоке типографической шкалы
   ниже; правки парные, порознь они не работают. */
@media (min-width:576px){
    .container,
    .navbar .container,
    .section--hero > .container{
        max-width:min(100% - 2rem, 1440px);
        padding-inline:clamp(1rem, 3vw, 3rem);
    }
}

/* Длинная строка читается плохо: на 1600px контейнера текст растянулся бы
   на 160+ символов при норме 45-75. Ограничиваем ширину ТЕКСТОВЫХ блоков,
   а не всей страницы — карточки, таблицы и схемы по-прежнему используют
   всю ширину. 75ch — верх нормы; ch привязан к ширине символа шрифта,
   поэтому мера остаётся честной при любом кегле. */
@media (min-width:1200px){
    .education-rno-about p,
    .education-tips-section__body p,
    .article-body p,
    .press-news-item__lead,
    .eco-scheme__text,
    /* Проверено замером на 1920px: без этих двух строка доходила до
       107 и 125 символов. Список именно перечислением, а не «все p
       подряд»: абзац внутри карточки, ячейки таблицы или колонки уже
       ограничен своим блоком, и 75ch там сузили бы его без нужды. */
    .regop-tariff p,
    .safety-text p,
    .regop-card__links p,
    .ecocenter-about__quote p,
    .ecocenter-wastes-item p{
        /* Правка клиента 19.08.2026: «текст максимально выровнять по правой
           стороне, чтобы не было много воздуха справа» — требование стоит в
           docx для шести страниц подряд, то есть относится ко всему сайту, а
           не к трём отдельным шаблонам. Мера 75ch давала обрыв строки на
           середине колонки, читавшийся как дыра. Ширину держит .content
           (макс. 1244px ≈ 95-100 символов при текущем кегле). */
        max-width:none;
    }

    /* Подписи и пояснения ВНУТРИ форм — отдельным правилом: у формы своя
       ширина, и ограничивать её целиком нельзя (поля должны тянуться), а
       вот текст согласия и сноска капчи на 1920px растягивались до 165
       символов. */
    .form-row p,
    .form-row .form-check-label{
        max-width:75ch;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   ПЛАВНАЯ ТИПОГРАФИЧЕСКАЯ ШКАЛА

   БЫЛО: четыре ступени на каждую роль. Кегль менялся рывком и — главное —
   НЕ МОНОТОННО: на телефоне основной текст 17px (база rem там 18px), а на
   планшете 768-999px он падал до 15px. То есть экран стал больше, а буквы
   меньше — замер зафиксировал ровно это.

   СТАЛО: clamp() между тем же минимумом и тем же максимумом, что и в
   ступенях, — крайние точки шкалы из DESIGN.md сохранены, меняется только
   поведение МЕЖДУ ними. Средний член в vw: кегль растёт вместе с шириной
   окна, без скачков и без провалов.

   Числа подобраны по существующим ступеням, а не выдуманы: на 390px
   даёт прежние ~17px, на 1024 — прежние ~18, на 1440 — прежние ~25.
   Проверено замером на 16 ширинах.

   Ниже 768px переменные НЕ трогаем: там свой блок (база rem 112.5%,
   собственные значения), и его правка потянула бы за собой всю мобильную
   вёрстку, которую только что отлаживали под палец. */
@media (min-width:768px){
    :root{
        /* ВЕРХНИЙ КОНЕЦ ШКАЛЫ СНИЖЕН 17.08.2026 (та же правка клиента,
           что и потолок контейнера 1440px выше: «всё большое, глаза
           разбегаются»). Основной текст на широком мониторе был 25px —
           это верх диапазона даже для лендинга, для сайта-справочника с
           таблицами и документами он читается как крупный шрифт для
           слабовидящих. Верхние точки: 25→23, 28→25, 22→20, 36→33.

           ПЕРВАЯ ВЕРСИЯ ЭТОЙ ПРАВКИ ОПУСТИЛА ВЕРХ СЛИШКОМ СИЛЬНО — до
           20px (все верхние точки × 0.8). Владелец посмотрел вживую:
           «блин, очень мелкий шрифт стал». Виноват был не столько сам
           потолок, сколько СЕРЕДИНА диапазона: на окне 1200px кегль падал
           с 22.1 до 18.9px, и это самая заметная просадка на типовом
           ноутбуке. Верх поднят до 23px по сравнению вариантов 20/22/23/25
           на живых страницах.

           НИЖНИЕ точки не тронуты — на 768px кегль прежний. Поэтому
           пересчитан НАКЛОН, а не просто опущен потолок clamp(): со
           старым наклоном 1.19vw текст упирался бы в новый максимум
           раньше 1440px и дальше не рос вообще, то есть шкала стала бы
           плоской до 2560. Наклон решён из тех же двух опорных точек, что
           и раньше — 768px и 1440px, только вторая теперь даёт новое
           значение:
             base + 7.68·k = 17px, base + 14.4·k = 23px
             → k = 0.8929vw, base = 10.14px = 0.6339rem.
           Проверка: 768 → 17.0px, 1000 → 19.1px, 1200 → 20.9px,
           1440 → 23.0px, 1920 и шире → 23px (упор в максимум). Рост
           монотонный.

           Роли на ступенях (.page-heading 50px, .content-tabs .nav-link,
           --etp-fineprint) НЕ трогали: на согласованных заказчиком
           скриншотах они смотрелись соразмерно, а их правка тянет за
           собой раскладку вкладок и шапок страниц. */
        --etp-text:clamp(1.0625rem, 0.6339rem + 0.8929vw, 1.4375rem);
        --etp-title:clamp(1.1875rem, 0.7589rem + 0.8929vw, 1.5625rem);
        --etp-note:clamp(0.9375rem, 0.5804rem + 0.7440vw, 1.25rem);
        --etp-accent:clamp(1.5rem, 0.8571rem + 1.3393vw, 2.0625rem);
    }
}


/* ── Карусель новостей на главной: слайд долей контейнера ────────────────
   Правка клиента 13.08.2026: «новости не резиновые на некоторых
   разрешениях» — на скриншоте третья карточка обрезана правым краем.

   Замер подтвердил ДВА дефекта сразу, оба от фиксированной ширины слайда
   (285-312px независимо от экрана):
     768-1280px — четыре карточки шире контейнера, последняя уезжает за
                  край на 43-439px и выглядит обрезанной;
     1366px и шире — наоборот, не дотягиваются: справа пустует от 92 до
                  479px, и ряд висит в воздухе.
   Раньше это скрадывалось узким контейнером; после перехода на резиновый
   стало видно на обоих концах.

   Слайд теперь — доля контейнера, а не число: 4 в ряд от 1200px, 3 от
   768px, ниже остаётся вендорские 67vw (карточка с «подглядыванием»
   следующей — на телефоне это правильно, показывает, что список
   листается). Вычитаем зазоры Swiper (spaceBetween: 24px), иначе
   последняя карточка снова вылезет ровно на сумму промежутков.

   max-width снят намеренно: он и держал 285px. */
/* ОБНОВЛЕНО 13.08.2026: правило распространено и на плашку «Все новости».
   Раньше она была исключена (:not) и держала свои 195px — рядом с
   резиновыми карточками это читалось как случайность: «то по высоте с
   половину новостей, то с фотки новостей». Теперь она такой же слайд, как
   остальные, и вместе с пропорцией 4:3 всегда встаёт вровень с фото. */
@media (min-width:768px){
    .news-slide{
        max-width:none;
        width:calc((100% - 2 * 24px) / 3);
    }
}

@media (min-width:1200px){
    .news-slide{
        width:calc((100% - 3 * 24px) / 4);
    }
}


/* ── Жёсткие высоты карточек: height -> min-height ───────────────────────
   Правка клиента 13.08.2026: «плашка развалилась, текст не влезает в
   блок». Вскрылось ровно там, где предупреждал аудит: у вёрстки
   подрядчика 340 правил задают высоту числом, и 10 семейств делают это
   вместе с overflow:hidden у потомка — текст молча срезается.

   Пока кегль был фиксированным, числа сходились. Плавная шкала (clamp
   выше) подняла текст на средних ширинах на 2-5px, и содержимое
   перестало помещаться: замер показал .facts-item 163px против нужных
   171px на 768-1280 и 240 против 245 на 1440+.

   Лечение общее для всего семейства: высота становится МИНИМАЛЬНОЙ.
   Карточка по-прежнему держит одинаковый рост в ряду (за это отвечает
   растяжение флекса), но перестаёт резать содержимое, если текст длиннее
   ожидаемого. Это же снимает мину на будущее: длину факта задаёт
   редактор в панели, и «не влезло» не должно зависеть от его выбора. */
.facts-item{
    height:auto;
    min-height:9.75rem;
}

@media (min-width:1000px){
    .facts-item{min-height:10.2rem}
}

@media (min-width:3000px){
    .facts-item{min-height:15rem}
}





/* ══════════════════════════════════════════════════════════════════════
   КАРТОЧКИ «НАША ДЕЯТЕЛЬНОСТЬ» — МЕХАНИКА ПОДРЯДЧИКА СОХРАНЕНА

   Здесь была моя переверстка в поток (13.08.2026), и она ОТКАЧЕНА по
   замечанию клиента. Записываю, чтобы не переделать во второй раз.

   Как карточка работает у подрядчика: заголовок и контурный рисунок
   видны, по наведению заголовок гаснет, контур сменяется заливкой, а
   поверх всплывает описание — абсолютом, поэтому высоту карточки оно не
   меняет. Смысл именно в подмене: рисунок остаётся на месте, текст
   ложится над ним.

   Что ломала переверстка: описание уезжало под заголовок в поток. Либо
   оно резервировало место и карточка вырастала до 513px при 336px
   содержимого (половина пустая), либо накрывалось белым фоном — и тогда
   рисунок пропадал совсем. Оба варианта клиент отклонил: «не так было
   же, там при наведении картинка оставалась, а над ней текст был».

   Чем платим: описание недоступно на телефоне и с клавиатуры. Это
   осознанный выбор клиента, а не недосмотр.

   ГЛАВНОЕ ОГРАНИЧЕНИЕ НА БУДУЩЕЕ: карточка держится на фиксированной
   min-height (8.125 / 15.21 / 21.125rem) и восемнадцати числовых высотах
   рисунка по брейкпоинтам. Кегль описания здесь нельзя поднимать на
   общую плавную шкалу — текст перестанет влезать («местами не влезает»
   — то же замечание клиента). Описание обрезано по трём строкам
   (line-clamp), это единственная страховка. */


/* ══════════════════════════════════════════════════════════════════════
   ГЛАВНАЯ И МЕНЮ — В ОБЩУЮ ШКАЛУ (13.08.2026, после переверстки карточек)

   Замер ДО: на 1920px текст внутренних страниц 25px, а на главной меню
   21, новость 19, факт 18, карточка деятельности 16 — главная выглядела
   набранной мелким шрифтом рядом с обычной страницей. Причина: она
   задаёт кегль вендорскими числами, рассчитанными на ступень «1400 и
   выше», и дальше не растёт вовсе.

   Первая попытка этой правки была ОТКАЧЕНА: раскладка держалась на
   абсолютных позиционированиях и фиксированных высотах, и каждый
   поднятый кегль вскрывал новую поломку. Теперь предпосылки убраны —
   карточки «Нашей деятельности» переверстаны в поток, у фактов height
   заменена на min-height, карточки новостей считаются долей контейнера.

   Меню и подпись телефона держим ОДНОГО кегля намеренно: они стоят в
   одной строке шапки, и стоит им разойтись — подпись «Телефон горячей
   линии» уезжает выше первого пункта меню. */
/* Граница 768: ниже начинается мобильный блок, а промежуток 768-1000
   иначе остаётся на вендорских значениях (заголовок новости 10px). */
@media (min-width:768px){
    .navbar .nav-link,
    .navbar-phone{font-size:var(--etp-note)}

    .navbar-subnav .nav-link,
    .navbar-subsubnav .nav-link{font-size:var(--etp-note)}

    .section-title{font-size:var(--etp-accent)}

    /* Только заголовок и только на ступень --etp-text (не --title):
       карточка живёт на фиксированной высоте, и описание с «подробнее»
       обязаны остаться вендорского кегля, иначе текст не влезает —
       см. блок про механику карточек выше. */
    .activity-item__name{font-size:var(--etp-text)}

    .facts-item__text,
    .facts-item--large .facts-item__text{font-size:var(--etp-text)}

    .news-slide__excerpt{font-size:var(--etp-text)}
    .news-slide__date{font-size:var(--etp-note)}
}


/* ══════════════════════════════════════════════════════════════════════
   ФАКТЫ: СЛАЙДЕР ПО СОДЕРЖИМОМУ + ВОЗДУХ МЕЖДУ СЕКЦИЯМИ (13.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «проблема с воздухом между блоками, зачем так
   близко? заг Факты на карточки залезает».

   ЧТО СЛОМАЛОСЬ. Я перевёл .facts-item с height на min-height (иначе
   длинный факт срезался), но слайд под карточкой остался фиксированным:
   12.25rem = 196px. Карточка на 1440px занимает 240px, крупная — 400px.
   Лишнее вылезает за слайд в обе стороны, потому что .swiper-wrapper
   центрирует по вертикали. Замер: верх карточки на 18px ВЫШЕ верха
   заголовка «Факты» — отсюда и наезд.

   ЛЕЧЕНИЕ. Высоту задаёт содержимое по всей цепочке: контейнер → слайдер
   → слайд. Слайдер при этом выходит из абсолютного позиционирования:
   пока он лежал абсолютом, контейнер обязан был иметь высоту числом, а
   значит и рассинхрон был неизбежен. Центрирование берёт на себя
   margin-inline:auto — слайдер уже контейнера, соседние карточки
   по-прежнему выглядывают по краям, как задумано подрядчиком.

   ЗАПАС СВЕРХУ И СНИЗУ обязателен: активная карточка увеличена
   transform:scale(1.2), а трансформ не занимает места в потоке — без
   padding она выпирала бы на соседей.

   ВОЗДУХ МЕЖДУ СЕКЦИЯМИ. Отступы подрядчика (90 и 116px) рассчитаны на
   старый мелкий кегль и ступень «1400 и выше»: на 1920px текст вырос, а
   зазоры остались прежними — блоки читаются слипшимися. Переводим на ту
   же логику, что и остальную резиновость: доля ширины окна с потолком. */
@media (min-width:1000px){
    .facts-slider-container{
        height:auto;
        padding-block:clamp(2rem, 2.5vw, 3.5rem);
    }

    .facts-slider{
        height:auto;
        inset:auto;
        margin-inline:auto;
        position:static;
        transform:none;
        /* Ширина числом (49.95rem до 1400px) не поспевала за контейнером:
           на 1280px карточка факта оставалась 255px, текст в ней шёл в
           десять строк и карточка вырастала до 360px — при том что соседка
           с коротким фактом была 185px. Отдаём слайдеру всю ширину
           контейнера, swiper пересчитает ширину слайдов сам. */
        width:100%;
    }

    .facts-slider .swiper-slide{height:auto}



    /* Единственное место, где !important неизбежен: подрядчик задаёт
       активному слайду height и width через !important, и обычной
       специфичностью их не перебить.

       Активный слайд у подрядчика ещё и шире соседних (19.08rem против
       15.93) плюс увеличен transform:scale(1.2). Вместе с плавающей
       высотой ряд превращался в мешанину разных прямоугольников
       («гармония пропадает»). Одинаковый размер для всех, а выделение
       центральной карточки остаётся за градиентной заливкой — она никуда
       не делась. */
    .facts-slider .swiper-slide-active{height:auto!important}

    /* Ширина активного слайда — по той же формуле, по которой её считает
       сам swiper: (ширина ленты − зазоры) / число слайдов. Подрядчик
       прибивал активному слайду ширину числом (19.08rem) плюс увеличивал
       карточку на scale(1.2) — центральный факт выпадал из ряда и по
       ширине, и по масштабу. Формула повторяет расчёт swiper один в один,
       поэтому лента не разъезжается; выделение центральной карточки
       остаётся за градиентной заливкой.

       Вычитаем 48px = ДВА зазора по 24px (17.08.2026, вместе с общим
       жёлобом сетки). Раньше здесь стояло 24px = два зазора по 12, и это
       было верно, пока swiper переключал `spaceBetween` на 24 только с
       1346px. Стык 1346-1399 из-за этого был битым: swiper уже ставил
       зазор 24, а формула ещё вычитала 12, и активный слайд выходил на
       8px шире соседей. Теперь `spaceBetween:24` включается с 1000px (см.
       breakpoints у .facts-slider в assets/js/main.min.js) — граница
       формулы и граница swiper совпали. Дубль этого правила в
       @media (min-width:3000px) ниже по файлу стал тождественным. */
    .facts-slider .swiper-slide-active{width:calc((100% - 48px) / 3)!important}
    .facts-slider .swiper-slide-active .facts-item{transform:none}


    .section--activity{padding-top:clamp(3rem, 4.2vw, 6rem)}
    .section--facts{padding-top:clamp(3.5rem, 5vw, 7.5rem)}
    .section--news{padding-block:clamp(3.5rem, 5vw, 7.5rem)}
    .section--gallery{padding-block:clamp(2rem, 2.6vw, 4rem)}

    .section--activity .section-title,
    .section--facts .section-title,
    .section--news .section-title{margin-bottom:clamp(1.5rem, 2vw, 3rem)}
}


/* ══════════════════════════════════════════════════════════════════════
   СОРАЗМЕРНОСТЬ ГЛАВНОЙ (13.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «что-то огромным шрифтом (факт) и воздуха между
   карточками почти нет, что-то очень мелко текст внутри деятельности при
   наведении, кнопка мелкая формы в некоторых размерах, картинки в
   новостях мелкие, меньше карточек — это всё несоразмерно».

   ДИАГНОЗ ПО ЗАМЕРУ (6 ширин, 768-1920). Половина ролей уже переведена
   на плавную шкалу, половина осталась на вендорских ступенях — отсюда
   разнобой. Кегли на 1440px ДО правки:

     заголовок секции   36     ← шкала
     текст факта        25     ← шкала
     заголовок карточки 25     ← шкала
     описание карточки  15     ← ступень подрядчика
     «подробнее»        20     ← ступень
     кнопка формы       19     ← ступень
     номер телефона     32     ← множитель 1.44em от подписи

   То есть описание карточки было в 1.7 раза мельче текста факта в
   соседнем блоке — при том, что это ОДНА роль «основной текст».
   Зазор между карточками при этом стоял 20px на всех ширинах, хотя сама
   карточка выросла с 264 до 508px.

   ЧТО ДЕЛАЕМ. Догоняем отставшие роли до той же шкалы и переводим
   зазоры на долю ширины. Правило распределения ролей:

     --etp-accent    заголовки секций
     --etp-title     заголовки карточек, номер телефона
     --etp-text      основной текст, тексты фактов
     --etp-note      подписи, даты, «подробнее», кнопки
     --etp-fineprint юридические подписи

   ПОЧЕМУ КНОПКИ ЧЕРЕЗ --bs-btn-font-size, А НЕ font-size: у подрядчика
   отступы кнопок заданы в em, поэтому размер кнопки целиком считается от
   этой переменной. Ставим кегль — вместе с ним пропорционально растут
   поля и радиус, кнопка остаётся собой.

   ЧЕГО ЗДЕСЬ НЕТ: зазоров внутри слайдеров фактов и новостей. Их задаёт
   swiper параметром spaceBetween в собранном main.min.js, из CSS их
   перебивать нельзя — слайдер считает позиции сам и прокрутка разъедется.
   ═══════════════════════════════════════════════════════════════════ */
/* ГРАНИЦА 768, А НЕ 1000. Между 768 и 1000px не действовал ни мобильный
   блок (он до 767.98px), ни этот — на планшете оставались вендорские
   значения: описание карточки 11px, дата новости 18px, текст факта 13px.
   Это и есть «местами мелко, местами нет». */
@media (min-width:768px){
    /* ── Кнопки ─────────────────────────────────────────────────────── */
    .navbar-question .btn,
    .hero-apply .btn,
    .feedback-form .form-submit .btn,
    .apply-control .btn,
    .facts-item__gallery .btn,
    .news-slide__more .btn,
    .areas-item--operator .areas-item__button .btn-apply-operator,
    .scroll-to-top .btn{--bs-btn-font-size:var(--etp-note)}

    /* Ширина числом мешает кнопке вырасти вместе с кеглем. */
    .apply-control .btn{min-width:12rem;width:auto}

    /* ── Шапка: кнопка не уже номера телефона ───────────────────────── */
    /* Подрядчик задал колонке контактов ширину числом (11.97rem до 1400px
       и 16.625rem выше). Номер при подросшей подписи в неё не влезал и
       вылезал за кнопку на 22px — то самое «телефон вылезает за кнопку».
       Отдаём ширину содержимому: кнопка ниже растянута на 100%, поэтому
       она автоматически становится ровно по ширине номера. */
    .navbar-contacts{width:auto}
    .navbar-phone strong{font-size:var(--etp-title)}

    /* ── Факты ──────────────────────────────────────────────────────── */
    /* Текст факта — обычный основной текст, а не акцент: карточка узкая
       (354px), и на шкале --etp-text он выглядел крупнее заголовков
       соседних карточек. */
    .facts-item__text,
    .facts-item--large .facts-item__text{font-size:var(--etp-note)}
    /* Единая высота ряда. Замер самой длинной карточки после расширения
       слайдера: 190px на планшете, 235px на 1000-1400, 268px выше — берём
       с небольшим запасом, чтобы редакторский факт подлиннее не сломал
       ряд снова. */
    .facts-item{
        min-height:15.5rem;
        padding:clamp(1.25rem, 1.8vw, 2.25rem) clamp(1.25rem, 2vw, 2.5rem);
        /* Ширина карточки тоже была числом (15.93rem до 1400px), поэтому
           расширения слайдера было мало: слайд стал шире, а карточка
           внутри осталась прежней. Занимаем слайд целиком. */
        width:100%;
    }

    /* ── Карточки «Наша деятельность» ───────────────────────────────── */
    /* Жёлоб 24px — ОБЩИЙ для всех рядов главной, а не только для этого
       (правка клиента 17.08.2026 «что у нас с сеткой сайта?» со скриншотом,
       где колонки «Фактов» не совпали с колонками «Деятельности»).

       Было `clamp(1.5rem, 2.2vw, 2.75rem)` — резиновый жёлоб, который выше
       ~1091px расходился с фиксированными 24px у карусели «Фактов» и у
       новостей: шаг колонок 415px против 409px, и края рядов не сходились
       ни на одной широкой ширине. Жёлоб каруселей задан в JS (Swiper,
       `spaceBetween`), а JS в репозитории только минифицированный, поэтому
       общим значением выбрано 24px — то, которое уже у двух рядов из трёх.

       Ниже ~1091px правка ничего не меняет: там clamp и так упирался в
       свой минимум 1.5rem = 24px. */
    .activity-grid{gap:24px}

    /* Второе слагаемое той же правки: отрицательный margin у ленты
       «Фактов» (-1.575rem от 768px, -2.1875rem от 1400px) — ручная
       компенсация подрядчика под ТО, что центральный слайд был шире
       соседних и увеличивался scale(1.35). 13.08.2026 слайд перевели на
       долю контейнера, слайды стали одинаковыми, компенсировать нечего —
       а сдвиг остался и тянул всю ленту на 35px левее колонки (замер на
       1920: карточки 323..708 при колонке 358..743).

       На ≤999.98px это уже обнулено ниже по файлу своим правилом со своим
       разбором; здесь — тот же ноль для десктопа. Специфичность равна
       вендорской, но правило идёт ПОЗЖЕ в файле, поэтому выигрывает: у
       @media собственной специфичности нет. */
    .facts-slider .swiper-wrapper{margin-left:0}

    /* Описание всплывает по наведению внутри карточки фиксированной
       высоты, поэтому кегль поднимаем на ступень note (не text) и даём
       четвёртую строку вместо трёх — так текст и подрос, и влезает. */
    /* Кегль описания — общий, как у остального текста, но строк ТРИ, а не
       четыре, и верхний отступ карточки урезан. Это компромисс из двух
       замечаний подряд: сперва «текст огромный и много белого» (карточка
       раздувалась под четыре строки на ступени note), потом «мелкий
       текст, а места до чёрта» (я ушёл на fineprint). Высоту карточки
       ограничиваем строками и отступом, а не кеглем. */
    .activity-item__descr{
        -webkit-line-clamp:3;
        font-size:var(--etp-note);
    }

    /* 3.4375rem сверху — это отступ подрядчика под мелкий заголовок. При
       нынешнем кегле он превращается в пустую полосу над текстом («от
       зага до верха карточки полно места»). */
    .activity-item{padding-top:1.75rem}
    .activity-item__name{padding-top:0}
    .activity-item__more,
    .activity-item__more .link-more{font-size:var(--etp-note)}

    /* НЕ ЦЕНТРИРОВАТЬ .activity-item__container ради «дыры» между
       заголовком и рисунком: описание позиционируется абсолютом ОТ ЭТОГО
       контейнера (position:relative у подрядчика), и вместе с ним уезжает
       вниз — при наведении текст ложится ровно на рисунок. Проверено,
       откачено. Воздух убирается только уменьшением высоты карточки, а её
       держит длина описания. */
}

/* ВЫСОТА КАРТОЧКИ ПОД ПОДРОСШИЙ ТЕКСТ.

   Высоты подрядчика (15.21 и 21.125rem) рассчитаны на описание в 11px.
   При нынешних 20-22px описание с «подробнее» ложилось на рисунок —
   замер наезда по шести карточкам на семи ширинах давал до +88px
   («текст не влезает при наведении и заезжает на картинку»).

   Считаем по худшей карточке ступени, а не по первой: описание задаёт
   редактор, и самая длинная карточка определяет высоту всего ряда.
   Замер требовал 351px на 1024-1280 и 426px на 1440 — берём с запасом.

   На планшете (768-992) описание скрыто классом d-none d-lg-block,
   там на рисунок наезжало только «подробнее» — хватает 12rem. */
@media (min-width:768px) and (max-width:999.98px){
    .activity-item{min-height:12rem}
}

@media (min-width:1000px) and (max-width:2999.98px){
    .activity-item{min-height:22rem}
}

@media (min-width:3000px){
    .activity-item{min-height:27rem}
    .facts-item{min-height:17.5rem}
    /* Выше 1400px swiper переходит на зазор 24px — формула активного
       слайда пересчитывается под него. */
    .facts-slider .swiper-slide-active{width:calc((100% - 48px) / 3)!important}
}

@media (min-width:768px) and (max-width:999.98px){
    .facts-item{min-height:12.5rem}
}

/* РИСУНКИ — ВСЛЕД ЗА КАРТОЧКОЙ.

   Карточка выросла ради описания, а высоты рисунков подрядчик задал
   числами (шесть штук на каждый брейкпоинт), и они остались прежними —
   между заголовком и рисунком повисла пустая полоса в треть карточки.

   Множитель, а не единая доля высоты: у шести рисунков разные пропорции
   и подобранные вручную размеры (город крупный, колокола мелкие). Общая
   доля сделала бы их одинаковыми и убила бы этот подбор.

   Множитель скромный (1.05 до 1400px и 1.1 выше), потому что рисунок
   прибит к низу карточки и растёт ВВЕРХ, отъедая место у описания. При
   1.25 описание в три строки на 1024-1280 снова легло на рисунок, а
   поднимать карточку нельзя — клиент просил её, наоборот, укоротить. */
/* Высота рисунка живёт в переменной, потому что от неё зависит ещё и
   отступ под заголовком: заголовок прижат к рисунку снизу, а не висит у
   верхней кромки («заги надо подвинуть ближе к картинке, чтобы не
   создавалось ощущение дыры»). Одно число — два места. */
@media (min-width:1000px) and (max-width:2999.98px){
    .activity-item:first-child{--etp-act-img:7.32rem}
    .activity-item:nth-child(2){--etp-act-img:5.2rem}
    .activity-item:nth-child(3){--etp-act-img:4.68rem}
    .activity-item:nth-child(4){--etp-act-img:6.95rem}
    .activity-item:nth-child(5){--etp-act-img:6.76rem}
    .activity-item:nth-child(6){--etp-act-img:4.82rem}
}

@media (min-width:3000px){
    .activity-item:first-child{--etp-act-img:10.66rem}
    .activity-item:nth-child(2){--etp-act-img:7.56rem}
    .activity-item:nth-child(3){--etp-act-img:6.81rem}
    .activity-item:nth-child(4){--etp-act-img:10.11rem}
    .activity-item:nth-child(5){--etp-act-img:9.83rem}
    .activity-item:nth-child(6){--etp-act-img:7.01rem}
}

@media (min-width:1000px){
    .activity-item__image{height:var(--etp-act-img)}

    /* Контейнер растянут на карточку, заголовок прижат к его низу, а под
       заголовком зарезервирована ровно высота рисунка плюс зазор. Так
       заголовок всегда стоит над рисунком, а не под верхней кромкой.

       ВАЖНО, ЧТО ТЯНЕТСЯ ИМЕННО КОНТЕЙНЕР, А НЕ СДВИГАЕТСЯ: описание
       позиционируется абсолютом от него (position:relative у подрядчика).
       Пока контейнер начинается у верха карточки, всплывающее описание
       остаётся наверху — а если сдвинуть сам контейнер, текст уедет вниз
       и ляжет на рисунок (проверено, откачено). */
    .activity-item__container{
        /* Флекс-колонка нужна, чтобы у заголовка сработал margin-top:auto:
           у подрядчика контейнер — обычный блок, и заголовок оставался
           прижатым к верхней кромке (замер: 184-240px пустоты до рисунка). */
        display:flex;
        flex-direction:column;
    }

    /* НЕ ПРИЖИМАТЬ ЗАГОЛОВОК К РИСУНКУ. Пробовал (height:100% контейнеру +
       margin-top:auto заголовку) — клиент отклонил, и правильно: в
       оригинале neweco-pro.ru заголовки всех шести карточек стоят на ОДНОЙ
       горизонтали сверху. Рисунки у карточек разной высоты, поэтому
       «прижать к рисунку» = развалить ряд по вертикали. */
}

/* ══════════════════════════════════════════════════════════════════════
   НОВОСТИ: ФОТО И ПЛАШКА «ВСЕ НОВОСТИ» — ПО ОДНОЙ ПРОПОРЦИИ

   Высоты у обоих были заданы числом (17.8125rem), рассчитанным на
   карточку фиксированной ширины. Ширина стала резиновой — и фотография
   превратилась в приплюснутую полосу, а плашка «Все новости» зажила своей
   жизнью: «то по высоте с половину новостей, то с фотки новостей, то
   вообще заходит за экран».

   Обоим — одна пропорция 4:3, поэтому плашка всегда вровень с
   фотографиями соседей на любой ширине. */
@media (min-width:768px){
    /* Высота картинки была задана числом (285px), а ширина карточки стала
       резиновой — картинка на широких экранах выглядела приплюснутой
       полосой. Пропорция вместо числа: картинка растёт вместе с карточкой. */
    .news-slide__image{
        aspect-ratio:4 / 3;
        height:auto;
    }
    .news-slide{height:auto}

    /* Плашка «Все новости» держалась на высоте числом (17.8125rem) —
       ровно на старой высоте картинки новости. Картинка теперь живёт по
       пропорции и зависит от ширины колонки, а плашка осталась на месте:
       на одних экранах она была вполовину карточки, на других вылезала за
       нижний край. Даём ей ту же пропорцию — плашка всегда вровень с
       фотографиями соседей. Кегль тоже на общую шкалу. */
    .news-slide__all{
        aspect-ratio:4 / 3;
        font-size:var(--etp-title);
        height:auto;
    }
}

/* Рисунок не должен упираться в края карточки при любом кегле. */
@media (min-width:1000px){
    .activity-item__image{
        max-width:80%;
        object-fit:contain;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   ЗАГОЛОВКИ ВНУТРЕННИХ СТРАНИЦ — ОДНА ШКАЛА (13.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «про внутренние не забудь посмотреть, там тоже
   мелкий шрифт есть, в загах например».

   ЗАМЕР НА 1280px ДО ПРАВКИ — один и тот же уровень заголовка:

     eco-flow__heading            33
     article-heading              32
     regional-territories__title  26
     hotline-heading              23
     feedback-heading             22
     docs-heading                 18
     h2 без класса                18

   То есть заголовок раздела «Нормативные документы» был МЕЛЬЧЕ основного
   текста рядом с ним (20px). Каждый блок подрядчика задавал себе кегль
   сам, общей роли не существовало.

   ПРАВИЛО ПО ТЕГУ, А НЕ ПО СПИСКУ КЛАССОВ: список из семи классов
   пришлось бы дополнять при каждом новом блоке, и следующий блок снова
   выпал бы из шкалы. Тег внутри контентной секции покрывает и то, что
   редактор добавит в панели через блоки текста.

   Специфичность «класс + тег» (0,1,1) перебивает одиночные классы
   подрядчика (0,1,0), поэтому !important не нужен. */
@media (min-width:768px){
    .section--inner h2{font-size:var(--etp-accent)}
    .section--inner h3{font-size:var(--etp-title)}
    .section--inner h4{font-size:var(--etp-text)}
}


/* ══════════════════════════════════════════════════════════════════════
   ЛОГОТИП В ШАПКЕ КОНТЕНТА (13.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «лого мелкий, там же где заг, а в некоторых случаях
   бывает 2 лого на некоторых размерах».

   ДВА ЛОГОТИПА. Логотип шапки сайта помечен d-lg-none — он виден до
   992px. Логотип в шапке контента подрядчик, наоборот, показывает от
   768px. На перекрытии 768-992 оба видны одновременно (замер видимости
   по шести ширинам). Ниже 768 контентный скрыт, выше 992 скрыт шапочный
   — то есть дубль возникает ровно в этой полосе. Прячем контентный там,
   где уже есть шапочный.

   РАЗМЕР. 126px при подписи рядом в 20px — логотип читался мельче
   собственной подписи. Привязываем высоту к кеглю этой подписи (em, а не
   px), тогда он масштабируется вместе со всей шкалой. */
/* Граница 1000, а не 992: у этой сборки Bootstrap ступень lg
   перекомпилирована (768/1000/1400), и .d-lg-none гасит логотип шапки
   именно на 1000px — замер по шести ширинам. */
@media (min-width:768px) and (max-width:999.98px){
    .content-heading__logo{display:none}
}

@media (min-width:1000px){
    .content-heading__logo{
        /* em считался бы от контейнера, а у него базовые 16px — логотип
           так и остался бы одного размера на всех экранах. Считаем от
           токена основного текста, тогда он растёт вместе со шкалой. */
        height:calc(var(--etp-text) * 2);
        width:auto;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЕ ТАЧ-ЦЕЛИ (13.08.2026): «мобильную переверстай, чтобы было под
   пальцы норм».

   Замер на 375px по шести страницам — что не дотягивало до 44px (Apple
   HIG; WCAG 2.5.8 требует 24px и делает исключение для inline-ссылок
   внутри абзаца, их здесь не трогаем):

     .link-more «подробнее»       70×18 … 99×23   (до 30 штук на /press/blog/)
     .nav-link в бургер-меню      75×34
     .swiper-pagination-bullet    32×7
     ссылка-логотип в шапке       154×23

   Приём везде одинаковый: цель добирает высоту отступами, а не размером
   самого текста — вид не меняется, площадь пальца появляется. Для полосок
   пагинации это background-clip:content-box: фон рисуется только по
   содержимому, поэтому полоска остаётся тонкой, а нажимается вся высота. */
@media (max-width:767.98px){
    .link-more,
    .navbar-brand,
    .footer-socials a{
        align-items:center;
        display:inline-flex;
        min-height:2.75rem;
    }

    /* Селектор от .navbar, а не от .navbar-nav: пункты второго и третьего
       уровня лежат в .navbar-subnav/.navbar-subsubnav и мимо .navbar-nav
       не попадали — именно они и оставались по 34px. Сюда же вкладки
       «Фото / Видео» в галерее (были 33×22). */
    /* И в подвале тоже: карта сайта там свёрстана теми же .nav-link, но
       внутри .footer-subnav/.footer-subsubnav — они и оставались по 34px
       после правки шапки. */
    .navbar .nav-link,
    .footer .nav-link,
    .footer-nav .nav-link,
    .gallery-tabs .nav-link,
    .nav-tabs .nav-link{
        align-items:center;
        display:inline-flex;
        min-height:2.75rem;
    }

    /* Ссылка-обёртка картинки новости была высотой в одну строку (23px):
       картинка внутри позиционирована абсолютом и высоты ссылке не даёт.
       Растягиваем ссылку на всю плитку — палец попадает по картинке, а не
       по невидимой полоске над ней. */
    .press-news-item__image a,
    .footer-logos__item a{
        display:block;
        height:100%;
        min-height:2.75rem;
    }

    /* Контакты в подвале и на странице контактов (телефон, почта) — те же
       24px в высоту. Плюс чекбокс согласия в форме: 8×6px, промах по нему
       означает неотправленную заявку. */
    /* Новая ссылка «Все новости» в заголовке — тоже тач-цель. */
    .news-all-inline,
    .contact-link,
    .footer-contact a{
        align-items:center;
        display:inline-flex;
        min-height:2.75rem;
    }

    .footer-socials a{min-width:2.75rem}

    .form-check-input{
        height:1.5rem;
        margin-top:.125rem;
        width:1.5rem;
    }

    .swiper-pagination-bullet{
        background-clip:content-box;
        box-sizing:border-box;
        height:2.75rem;
        min-width:2.75rem;
        padding-block:1.25rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   ВЫРАВНИВАНИЕ ШАПОК (13.08.2026, клиент показал красной линией)

   1. ШАПКА КОНТЕНТА. Логотип и подпись рядом с ним стояли по нижнему краю
      (align-items:flex-end у подрядчика). Пока логотип был 29px, разница
      не читалась; после привязки его высоты к шкале (50px) центры разошлись
      на 7px и строка «поехала». Выравниваем по центру — оба элемента одной
      строки.

   2. ШАПКА САЙТА. Блок телефона состоит из двух строк (подпись и номер) и
      центрируется целиком по одной строке меню — поэтому подпись висит
      ВЫШЕ пунктов меню, а номер ниже. Выравнивание по базовой линии ставит
      подпись ровно на строку меню: «надпись Телефон горячей линии должна
      быть на одной линии с меню». */
@media (min-width:1000px){
    /* Логотип и подпись — по центру бокса.

       ПРОБОВАЛИ ТОЧНЕЕ И ОТКАТИЛИ (14.08.2026). В logo-cyan.svg знак-кубик
       выше слова, под словом ещё 18% высоты пустого поля, поэтому базовая
       линия слова оказывается на 11px ниже базовой линии подписи. Подъём
       логотипа на эти 18% (calc(var(--etp-text) * -0.44)) выравнивал слово
       идеально, но визуально уводил всю строку вверх — клиент попросил
       вернуть как было. Оставляем центрирование по боксу. */
    .content-heading{align-items:center}

    /* ПО БАЗОВОЙ ЛИНИИ ПЕРВОЙ СТРОКИ.

       Почему не сработали три прошлых захода (записано, чтобы не пойти по
       кругу в четвёртый раз):
         • голый `align-items:baseline` у контейнера — правая колонка
           (.navbar-side) блочная, а базовая линия блочного контейнера
           берётся от ПОСЛЕДНЕЙ строки внутри, то есть от номера телефона,
           а не от подписи над ним;
         • `align-items:flex-end` — низ правой колонки задаёт кнопка
           «Задайте вопрос», поэтому меню уезжало вниз;
         • обнуление line-height у пунктов меню — выравнивало, но утекало
           наследованием в выпадающее меню и схлопывало двухстрочные пункты.

       Что работает: правая колонка становится флекс-колонкой, и её базовая
       линия начинает браться от ПЕРВОГО ребёнка — от подписи «Телефон
       горячей линии». Дальше базовые линии обеих сторон шапки совпадают
       сами, без магических отступов и без вмешательства в интерлиньяж.

       Замер до правки (гейт соразмерности, сравнение первых строк текста):
       подпись выше строки меню на 14px на всех десктопных ширинах. */
    .navbar-container{align-items:baseline}

    .navbar-side{
        align-items:flex-end;
        display:flex;
        flex-direction:column;
    }

    /* Флекс-колонки оказалось мало: первым ребёнком .navbar-side идёт не
       телефон, а служебные иконки, и базовая линия берётся от них. Поэтому
       добираем оставшийся сдвиг явно.

       ВЕЛИЧИНА НЕ ПОДОБРАНА НА ГЛАЗ. Разница между верхом строки меню и
       верхом подписи телефона — это строчный интерлиньяж пункта меню:
       ссылка объявлена inline-flex и сидит на текстовой строке, а над ней
       остаётся ведущее. Значит разница пропорциональна кеглю, а не
       постоянна в пикселях. Замер это подтверждает: 17px при кегле меню
       18px, 19px при 20px, 21px при 22px — то есть ровно 0.95em. В em оно
       и записано: при следующей смене шкалы сдвиг поедет вместе с ней и
       выравнивание сохранится. */
    /* Сдвиг относительным позиционированием, а не отступом: margin
       увеличил бы высоту правой колонки, а её базовая линия участвует в
       выравнивании контейнера — меню опустилось бы следом, и расхождение
       осталось прежним (проверено замером). Относительный сдвиг лейаут не
       меняет, поэтому двигается только подпись с номером. */
    .navbar-contacts{
        /* Величина замерена, а не подобрана. Требуемый сдвиг по трём
           ступеням кегля меню: 17px при кегле 18, 19px при 20, 21px при 22.
           Разность 2 на каждые 2 кегля — то есть сдвиг равен ровно кеглю
           минус пиксель. Физический смысл: это строчный интерлиньяж
           пункта меню, на который ссылка внутри опущена от верхней кромки
           своего блока.

           Считаем от токена, а не в em: em у .navbar-contacts берётся от
           её собственного кегля (16px), а нужен кегль МЕНЮ. */
        inset-block-start:calc(var(--etp-note) - 1px);
        position:relative;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   РАСКРЫВАЮЩИЕСЯ ПОДМЕНЮ НЕ ОБРЕЗАЮТСЯ (13.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «в таком размере направления деятельности не все
   помещаются в меню, обрезается» — на скриншоте пункт «Утилизация
   брошенных транспортных средств» срезан нижней кромкой попапа.

   Причина: раскрытому списку задан max-height числом (18rem на средних
   экранах, 25rem на больших) плюс overflow:hidden — так сделана анимация
   раскрытия. Числа рассчитаны на прежний мелкий кегль; после перехода на
   общую шкалу восемь пунктов в них не помещаются.

   Держим приём (анимация max-height требует конечного значения — с `none`
   перехода не будет), но поднимаем потолок настолько, чтобы в него
   помещался самый длинный список сайта с запасом на рост шрифта. То же
   касается карты сайта в подвале, она свёрстана тем же приёмом. */
.navbar-subnav > .nav-item.has-subsubnav.is-subsubnav-open .navbar-subsubnav,
.footer-nav > .nav-item.is-subnav-open .footer-subnav,
.footer-subnav > .nav-item + .nav-item.has-subsubnav.is-subsubnav-open .footer-subsubnav{
    max-height:60rem;
}


/* ══════════════════════════════════════════════════════════════════════
   УЗКИЕ ШИРИНЫ: ПЛАШКА «УЗНАТЬ ПОДРОБНОСТИ» И БУРГЕР (13.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «плашка узнать подробности больше белого блока, меню
   слишком высоко (бургер)».

   1. ПЛАШКА. Подрядчик обнулил поля контейнера именно у неё
      (.hero-more .container, padding-inline:0), поэтому она тянулась во всю
      ширину окна, тогда как белая карточка под ней стоит с полями в 21px.
      Замер на 700px: плашка 18-682, карточка 39-661. Возвращаем ей общие
      поля — плашка садится ровно по ширине карточки.

   2. БУРГЕР. Я задал ему тач-высоту 44px, но у шапки на этой ступени
      высота 56px и содержимое центрируется: кнопка вместе с иконкой
      выросла до 59px и вылезла за верхнюю кромку на 2px. Фиксируем высоту
      кнопки: 44px — это и есть тач-минимум, больше не нужно. */
@media (max-width:999.98px){
    .hero-more .container{padding-inline:clamp(1rem, 3vw, 3rem)}

    /* Размер в ПИКСЕЛЯХ, а не в rem: на мобильной ступени база rem поднята
       до 112.5%, и 2.75rem превращались в 49.5px — кнопка снова не влезала
       в 56-пиксельную шапку. 44px — это тач-минимум Apple HIG, он же
       потолок здесь. Иконке задаём размер явно: без него она тянется по
       высоте кнопки (тот же дефект уже ловили на иконке поиска). */
    .navbar-toggler{
        align-items:center;
        /* box-sizing явно: у подрядчика кнопка с рамкой и content-box,
           поэтому 44px превращались в 59px вместе с border и padding. */
        box-sizing:border-box;
        display:flex;
        /* 33, а не 44: подрядчик увеличивает кнопку transform:scale(1.35)
           (замер матрицы), и 44px превращались в 59px — кнопка вылезала за
           верхнюю кромку 56-пиксельной шапки. 33 × 1.35 = 44.5px на экране,
           то есть тач-цель остаётся полноразмерной: попадание считается по
           трансформированной области. */
        height:33px;
        justify-content:center;
        min-height:0;
        padding:0;
        width:33px;
    }

    .navbar-toggler .icon,
    .navbar-toggler svg{
        height:24px;
        width:24px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   «ВСЕ НОВОСТИ»: ПЛАШКА ИЛИ ССЫЛКА В ЗАГОЛОВКЕ (13.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «на таких размерах, когда не помещается, надо
   переносить текст к загу, просто ссылкой Все новости».

   Плашка — четвёртый слайд карусели. От 1200px в ряд помещаются четыре
   слайда, и она стоит вровень с фотографиями. Ниже 1200px в ряду только
   три карточки, и плашка уезжает за правый край: замер на 1024px давал
   285px за пределами контейнера. Там показываем вместо неё ссылку рядом с
   заголовком «Новости» (разметка — в шаблоне home.php).

   Переключение по ОДНОЙ границе (1200px) — той же, что задаёт число
   карточек в ряду: пока их четыре, плашка на месте; как только три —
   плашка прячется, появляется ссылка. */
.news-all-inline{
    color:#5fb9bd;
    font-size:var(--etp-note);
    font-weight:400;
    margin-inline-start:auto;
    text-decoration:underline;
    text-underline-offset:.2em;
    white-space:nowrap;
}

.news-all-inline:hover,
.news-all-inline:focus-visible{color:#519da1}

@media (min-width:1200px){
    .news-all-inline{display:none}
}

@media (max-width:1199.98px){
    .news-slide--all{display:none}
}


/* ══════════════════════════════════════════════════════════════════════
   ОСТАТКИ МЕЛКОГО ТЕКСТА НА ВНУТРЕННИХ (13.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «на внутренних страницах текст местами еще мелкий».

   Замер на 1280px по десяти страницам: основная шкала 23px, а рядом жили
   подпись у логотипа 15px, дата новости и дата статьи 14px, абзацы без
   класса 14-17px (контакты, карточки блога).

   Абзацы берём правилом «тег без класса»: `p:not([class])` — так под
   шкалу попадает и текст, который редактор добавит блоком в панели, но не
   задеваются подписи со своей ролью (юридические сноски на fineprint,
   даты на note). */
@media (min-width:768px){
    .section--inner p:not([class]),
    .section--inner li:not([class]){font-size:var(--etp-text)}

    .content-heading__descr,
    .press-news-item__date,
    .article-date{font-size:var(--etp-note)}

    /* Строчные элементы без роли не должны задавать кегль сами: 14-16px
       у безымянных span и ссылок внутри абзацев выбивались из строки.
       Наследование вместо числа — тогда они всегда совпадают с текстом,
       в который вложены, каким бы он ни был. */
    .section--inner span:not([class]),
    .section--inner a:not([class]),
    .section--inner strong:not([class]){font-size:inherit}

    .hotline-descr{font-size:var(--etp-text)}

    /* Лид новости в ленте был мельче собственной даты (замер гейтом
       соразмерности: 16px лид против 20px даты на 1200px) — подпись
       крупнее текста, который она подписывает. Дата остаётся ролью note,
       лид переходит на роль основного текста. */
    .press-news-item__lead{font-size:var(--etp-text)}

    /* И заголовок над этим лидом — ступенью выше него, иначе получается
       вывернутая иерархия: подняли лид, и он стал крупнее заголовка
       карточки (замер: заголовок 21px против лида 24px на 1400px). */
    .press-news-item__title{font-size:var(--etp-title)}
    /* Подписи радиокнопок («Юридическое лицо») и чекбокса согласия были
       14px рядом с полями в 23px (замер на /contacts/, 1280px) — клиент
       попросил поднять и их. Роль note: чуть мельче поля, но одного с ним
       порядка, а не вдвое мельче.

       Раньше здесь стоял fineprint — он для юридических сносок под формой
       (текст про SmartCaptcha), а не для подписи, по которой человек
       выбирает вариант и ставит галочку. */
    /* Селектор с контекстом формы: у подрядчика кегль подписи задан как
       .feedback-form .form-check-label, и правило по одному классу
       проигрывает ему (замер после первой попытки: те же 14px). */
    .form-check-label,
    .feedback-form .form-check-label,
    .apply-form .form-check-label{font-size:var(--etp-note)}
}


/* ══════════════════════════════════════════════════════════════════════
   МАСШТАБ АКТИВНОЙ КАРТОЧКИ ФАКТОВ — СНЯТ С 768px

   Подрядчик увеличивает центральную карточку трансформом: 1.35 на
   мобильной ступени, 1.2 на средней. Гейт соразмерности видит это как ряд
   из двенадцати карточек по 200px и одной 240px — то самое «карточки
   разной высоты», на которое жаловался клиент. Выделение центральной
   осталось за градиентной заливкой, её достаточно.

   ОТДЕЛЬНЫМ МЕДИАЗАПРОСОМ, А НЕ ВНУТРИ БЛОКА ФАКТОВ: тот блок объявлен от
   1000px, и правило, дописанное туда «по соседству», на ступени 768-1000
   молча не работало. Это уже второй случай за сессию — правило, попавшее
   в чужой медиазапрос, выглядит применённым и не применяется.

   Ниже 768px карусель показывает по одной карточке, ряда там нет, и
   масштаб-акцент уместен — его не трогаем. */
@media (min-width:768px){
    .facts-slider .swiper-slide-active .facts-item{transform:none}
}


/* ══════════════════════════════════════════════════════════════════════
   КАРТОЧКИ ФАКТОВ — ПО ВЫСОТЕ САМОЙ ДЛИННОЙ В ЛЕНТЕ

   Лента растягивает слайды, слайд растягивает карточку: высоту ряда
   задаёт самый длинный факт, а не min-height, подобранная под средний.
   Замер гейта соразмерности до правки: двенадцать карточек по 200px и
   одна 207px (редактор написал факт на строку длиннее), на планшетной
   ступени разброс доходил до 83px.

   БЕЗ МЕДИАЗАПРОСА — намеренно. Текст фактов пишет редактор в панели, и
   «вылезет ли одна карточка» зависит от длины текста, а не от ширины
   экрана. Прошлые две попытки были вписаны в блок от 1000px и на
   планшетной ступени просто не работали.

   Подрядчик центрировал слайды (align-items:center) — из-за этого более
   высокая карточка ещё и приподнималась над соседями. */
/* ОТ 768px, а не на всех ширинах. Ниже этой границы карусель показывает
   карточки почти по одной, ряда не видно — выравнивать нечего. Зато там
   высоту слайда задаёт вендорское число, и растянутая до него карточка
   начинает РЕЗАТЬ текст: гейт геометрии поймал шесть таких карточек на
   390px («срезано на 6-39px»). Выравнивание, которое режет содержимое, —
   это не выравнивание. */
@media (min-width:768px){
    .facts-slider .swiper-wrapper{align-items:stretch}
    .facts-slider .swiper-slide{height:auto}
    .facts-slider .swiper-slide > .facts-item{height:100%}
}


/* ══════════════════════════════════════════════════════════════════════
   ПОЛЯ ФОРМ И ПОИСК — НА ОБЩУЮ ШКАЛУ (14.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «текст в формах почти везде мелкий, кроме совсем
   крупного размера» и «кегль в поиске адреса».

   ЗАМЕР (форма обратной связи и форма экоцентра, три ширины):

     ширина 768:  поля 11-12px при шкале текста 17px
     ширина 1280: поля 14px    при шкале 23px
     ширина 1920: поля 19px    при шкале 25px

   То есть поле ввода было мельче окружающего текста в полтора раза на
   всех ступенях — именно поэтому «мелкий везде, кроме самого крупного»:
   на 1920 разрыв меньше и глазом почти не читается.

   ПОЧЕМУ НЕ --etp-text, А --etp-input. Для полей ввода есть отдельный
   токен, и он не просто «текст поменьше»: на мобильной ступени в нём
   зашиты 16px, ниже которых Safari на iOS увеличивает страницу при
   фокусе. Кегль поля — вопрос не только вида, но и поведения.

   Поиск адреса на странице прямых договоров — то же самое поле, отдельно
   его перечислять не нужно: он свёрстан теми же .form-control. */
/* Селекторы с контекстом формы, а не голые классы: у подрядчика кегль
   задан именно так (.feedback-form .form-control = .875rem,
   .search-form .form-control = .75rem), и правило по одному классу
   проигрывает им по специфичности — замер после первой попытки показал
   те же 12-14px. */
.form-control,
.form-select,
textarea.form-control,
.feedback-form .form-control,
.feedback-form .form-select,
.feedback-form textarea.form-control,
.apply-form .form-control,
.apply-form .form-select,
.search-form .form-control,
.contracts-search input,
.registry-search input{font-size:var(--etp-input)}

/* Подписи и легенды рядом с полями — ступенью ниже основного текста, как
   остальные подписи сайта. Замер до правки: 14-15px рядом с полем 19px. */
.form-label,
legend.form-label,
.form-text{font-size:var(--etp-note)}


/* ══════════════════════════════════════════════════════════════════════
   ТОКЕН КЕГЛЯ ПОЛЕЙ ВВОДА НА ДЕСКТОПЕ

   --etp-input объявлен в мобильном блоке (16px — порог, ниже которого
   Safari на iOS зумит страницу при фокусе). Выше 768px этот блок не
   действует, переменная оказывалась НЕ ОБЪЯВЛЕНА, и правило
   font-size:var(--etp-input) становилось невалидным: поле просто
   наследовало кегль родителя — те же 16px при основном тексте 23-25px.

   Объявляем токен и для остальных ширин: не ниже мобильного порога и не
   мельче основного текста. Порог остаётся смыслом токена, шкала —
   значением. */
:root{--etp-input:max(16px, var(--etp-text))}


/* ══════════════════════════════════════════════════════════════════════
   ИКОНКА ПОИСКА В ШАПКЕ — УБРАНА ВЕЗДЕ, ГДЕ ОНА ЕСТЬ (14.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА: «поиск сверху же убирали, на некоторых экранах он всё
   ещё есть».

   Первый раз её скрыли только в мобильном блоке (до 767.98px), а сама
   иконка помечена подрядчиком классом d-lg-none, где lg у этой сборки —
   1000px. Полоса 768-999px не попадала ни туда, ни туда: замер показывает
   .navbar-search видимой ровно на 768 и 900.

   Скрываем по тому же правилу, что и раньше, но на всей полосе, где
   иконка вообще существует. Поиск при этом не пропадает: вторая форма
   живёт в подвале (.footer-cell--search).

   19.08.2026: граница «мобильное меню ↔ десктопная шапка» сдвинута с
   1000px на 1200px (блок "БУРГЕР-МЕНЮ ДО 1200px" ниже по файлу) — полоса
   999.98-1199.98 расширена следом. Без этого правка вернула бы лупу
   именно туда: новый бургер-блок принудительно показывает мобильные
   d-lg-none элементы шапки, а .navbar-search такой элемент. */
@media (max-width:1199.98px){
    .navbar-search{display:none}
}


/* ══════════════════════════════════════════════════════════════════════
   КАРТОЧКИ «НАША ДЕЯТЕЛЬНОСТЬ» НА САМЫХ ШИРОКИХ ЭКРАНАХ (14.08.2026)

   РЕШЕНИЕ КЛИЕНТА, дословно: «компромисс — всё-таки на самых широких
   экранах сделать чуть меньше шрифт у текста при наведении, но карточки
   сделать меньше, чтобы не было огромной дыры белой там между загом и
   картинкой, и всё, только на самом широком размере».

   ОТКУДА ДЫРА. Высоту карточки держит описание, которое видно только под
   курсором: оно ложится абсолютом поверх карточки, и высоты должно
   хватить на три строки плюс «подробнее». На 1440px карточка узкая, три
   строки занимают много — 432px оправданы. Но карточка растёт вместе с
   экраном, текст в ней укладывается в меньшее число строк, а высота
   остаётся прежней: замер зазора между заголовком и рисунком — 184px на
   1440 и уже 217px на 1680 и выше.

   ЧТО ДЕЛАЕМ ОТ 1680px: описание ступенью ниже (fineprint вместо note) и
   высота карточки на 4rem меньше. Проверено гейтом наезда: описание с
   «подробнее» по-прежнему не доходит до рисунка ни в одной из шести
   карточек.

   ГРАНИЦА 1680, А НЕ 1400: на 1440 дыра ещё в пределах приличия, а
   описание там действительно нужно крупнее — карточка узкая. */
/* ГРАНИЦА 1000, А НЕ 1680 (правка 14.08.2026 по замечанию клиента: «в таком размере текст при наведении тоже можно уменьшить, я думаю от
   1200px», затем «пробуем опустить границу до 1000»). От 1200px карточка уже достаточно широка, чтобы описание
   укладывалось в меньшее число строк, и мельче оно читается нормально —
   зато высоту карточки можно урезать и убрать белую дыру между заголовком
   и рисунком. Высоты двух ступеней разные, потому что ширина карточки
   разная: на 1000-1400 их три в ряду по ~340px, выше — по ~500px. */
@media (min-width:1000px){
    .activity-item__descr{font-size:var(--etp-fineprint)}
}

@media (min-width:1000px) and (max-width:2999.98px){
    .activity-item{min-height:20rem}
}

@media (min-width:3000px){
    .activity-item{min-height:23rem}
}


/* ══════════════════════════════════════════════════════════════════════
   ФОТО В КАРТОЧКЕ НОВОСТИ ЭКОЦЕНТРА — ТОЛЬКО ПОЛОСА 768-1000px

   Клиент посмотрел карточки на широком экране и попросил вернуть их как
   было — вернули. Но гейт геометрии показывает, что на 768-999px фото
   шириной 360px числом не помещается рядом с текстом: флекс выдавливает
   его за левый край карточки на 76px, за границу контейнера страницы —
   на 24px. На широких экранах карточка достаточно велика, там фото стоит
   правильно и правило не действует.

   Ужимаем фото ровно на этой полосе и ровно до той доли, при которой оно
   перестаёт вылезать. Вид на экранах, которые смотрел клиент, не
   меняется. */
@media (min-width:768px) and (max-width:999.98px){
    .press-news-item--left .press-news-item__image,
    .press-news-item--right .press-news-item__image{
        flex:0 0 40%;
        max-width:40%;
    }

    /* Фото прижато к краю карточки, а у карточки скруглённые углы: без
       обрезки прямоугольный угол фотографии выступает за скругление.
       Видно на карточках с фото слева. */
    .press-news-item--left,
    .press-news-item--right{overflow:hidden}
}


/* ══════════════════════════════════════════════════════════════════════
   ДОЛЖНОСТИ В «РУКОВОДСТВЕ» И АДРЕСА ПОДРАЗДЕЛЕНИЙ (14.08.2026)

   1. ДОЛЖНОСТИ. Подрядчик даёт длинным подписям отдельный класс
      .management-item--long и мельчит их почти вдвое: замер на 1280px —
      16px у обычной карточки против 12px у длинной (на 1920px 22 против
      16). В ряду это читается как ошибка: у Родионова должность заметно
      мельче, чем у соседей. Клиент: «уж тогда можно у всех помельче
      сделать, но не прям мельчить».

      Даём обеим карточкам одну роль — note. Она и есть «чуть мельче
      основного текста»: 20px против 23px на 1280, 22 против 25 на 1920.
      Длинная подпись при этом влезает: карточки в ряду растягиваются по
      самой высокой, а гейт соразмерности следит, чтобы ряд остался ровным.

   2. АДРЕСА ПОДРАЗДЕЛЕНИЙ. .divisions-item__address — 14px при основном
      тексте 23px на /about/office/. Это адрес, по которому люди приезжают,
      а не сноска. Ставим основной текст. */
/* Должность — подпись (note) на средних экранах и ступень ниже
   (fineprint) на широких.

   Почему не один токен на все ширины: fineprint даёт 14px до 1400px и
   19px выше (замер токенов). На 1920 клиент назвал 22px «огромными» и
   попросил мельче — 19px как раз то. А на 1280 те же 14px были бы уже
   мельчением, которого он просил избежать: там подпись остаётся 20px.

   Одна роль для обычных, длинных и карточки гендиректора — весь смысл
   правки был в том, чтобы подпись у Родионова не отличалась от соседей. */
.management-item__descr,
.management-item--long .management-item__descr,
.management-general__descr{font-size:var(--etp-note)}

@media (min-width:3000px){
    .management-item__descr,
    .management-item--long .management-item__descr,
    .management-general__descr{font-size:var(--etp-fineprint)}
}

/* Фамилия — ступенью выше должности, иначе получается вывернутая
   иерархия: после подъёма должности до note имя оказалось мельче её
   (замер: имя 18px против должности 20px на 1280).

   Карточка генерального директора стоит отдельно и свёрстана своими
   классами (.management-general__*) — её кегли подрядчик задал теми же
   числами, что и у заместителей ДО правки (18/16 на 1280). Оставить её
   в стороне значит получить главную карточку страницы мельче остальных,
   поэтому роли те же. */
.management-item__name,
.management-general__name{font-size:var(--etp-title)}

.divisions-item__address{font-size:var(--etp-text)}


/* ══════════════════════════════════════════════════════════════════════
   ШАПКА: ВОЗДУХ ДО КОНТЕНТА И ПОЛОЖЕНИЕ НОМЕРА (14.08.2026)

   1. ТЕЛЕФОН ВПЛОТНУЮ К БЕЛОМУ БЛОКУ. Замер расстояния от низа номера до
      верхней кромки .content на внутренних страницах: 11px на 1024,
      4px на 1200, 1px на 1280, 25px на 1440. То есть на средних ширинах
      номер практически касается блока с текстом — «телефон слишком близко
      к блоку с текстом». На главной этой проблемы нет: там между шапкой и
      контентом лежит баннер.

      Добавляем отступ сверху именно контенту (не шапке): шапка
      позиционирована абсолютом, её сдвиг увёл бы за собой и меню.
      Величина в em от кегля подписи — чтобы зазор держался при смене шкалы.

   2. НОМЕР НА ВНУТРЕННИХ ПРАВЕЕ, ЧЕМ НА ГЛАВНОЙ. Замер на 1280px: правый
      край номера 1214 на главной против 1222 на внутренней при одинаковом
      правом крае колонки контактов (1226). Причина: у подрядчика блок
      телефона центрирован (text-align:center), а ШИРИНА колонки разная —
      на главной её растягивает кнопка «Задайте вопрос» (230px против
      214px). Центрированный номер в более широкой колонке уезжает влево.

      Прижимаем содержимое блока телефона к правому краю: тогда положение
      номера не зависит от того, есть ли под ним кнопка. */
@media (min-width:1000px){
    .navbar-phone{text-align:right}
}

/* Только там, где шапка стоит над контентом без баннера между ними. */
@media (min-width:1000px) and (max-width:2999.98px){
    /* СЕЛЕКТОР ОТ main, а не от .page-inner: класс .content носит и
       обёртка внутри подвала, и правило `.page-inner .content` добавляло
       отступ ей тоже — сверху в подвале появлялась пустая полоса 25.6px.
       Именно её клиент видел как «дыру снизу» (замер: на проде верх
       первого элемента подвала совпадает с верхом подвала, локально
       отставал на 25px). */
    /* .page-inner И main одновременно: page-inner отсекает главную (там
       между шапкой и контентом стоит баннер, и отступ отрывал баки от
       белого блока — «иллюстрация оторвалась от блока с контентом»), а
       main отсекает одноимённую обёртку внутри подвала (иначе сверху в
       подвале появляется пустая полоса). Каждая часть селектора здесь
       закрывает свой дефект, проверенный замером. */
    .page-inner main .content{margin-top:1.6em}

    /* И ровно на эту же величину уменьшаем нижний отступ секции.

       ЗАЧЕМ. Отступ сверху удлинял страницу (замер на /about/office/:
       1149 -> 1200px), из-за чего на коротких страницах появлялась
       прокрутка и обнажался нижний отступ секции — вендорские 60px под
       последней карточкой. Клиент увидел это как «дыру снизу».

       Снизу запас был, сверху не хватало — переносим 1.6em из одного в
       другое. Высота страницы возвращается к прежней, воздух под шапкой
       остаётся, под последней карточкой сохраняется 34px. */
    .page-inner main .content .section--inner{padding-bottom:calc(60px - 1.6em)}
}


/* ══════════════════════════════════════════════════════════════════════
   КНОПКА «ОФОРМИТЬ ЗАЯВКУ НА ДОГОВОР» — ПИЛЮЛЯ (14.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА по /about/services/rno/: «кнопку Оформить заявку
   переделать в пилюлю нашу стандартную».

   Замер до правки: .btn-apply-operator — залитый зелёный прямоугольник
   392×68px, радиус 8px, текст капсом. Это единственная кнопка сайта в
   таком виде: остальные плашки-ссылки давно живут единым компонентом
   (см. блок «КНОПКИ-ПИЛЮЛИ» выше) — белая, цветная обводка, цветной
   текст, заливается своим цветом по наведению, без капса.

   Приводим её к тому же правилу и к тому же уровню, что и остальные
   действия на странице: зелёный — второй уровень. Кегль берём из шкалы,
   отступы в em — кнопка масштабируется вместе с кеглем. */
/* Селектор с контекстом: подрядчик задаёт капс и размеры именно так
   (.areas-item--operator .areas-item__button .btn-apply-operator), и по
   одному классу правило проигрывает — замер после первой попытки показал
   text-transform:uppercase на месте. */
.btn-apply-operator,
.areas-item--operator .areas-item__button .btn-apply-operator{
    background-color:#fff;
    border:1px solid #a1c778;
    border-radius:2.5em;
    color:#a1c778;
    font-size:var(--etp-note);
    font-weight:500;
    padding:.7em 1.6em;
    text-decoration:none;
    text-transform:none;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Наведение — тоже с контекстом. Замер: по одному классу заливка не
   применялась вовсе (кнопка оставалась белой), потому что у подрядчика
   правило наведения написано от .areas-item--operator и специфичнее.
   Поведение должно совпадать с остальными пилюлями второго уровня:
   заливается своим зелёным, текст белым (сверено с .link-tag--secondary
   на /press/blog/). */
.btn-apply-operator:hover,
.btn-apply-operator:focus-visible,
.areas-item--operator .areas-item__button .btn-apply-operator:hover,
.areas-item--operator .areas-item__button .btn-apply-operator:focus-visible{
    background-color:#a1c778;
    border-color:#a1c778;
    color:#fff;
}


/* ══════════════════════════════════════════════════════════════════════
   РУЧНАЯ ПОДГОНКА ЛОГОТИПА В ШАПКЕ КОНТЕНТА

   Значение ПОДОБРАНО КЛИЕНТОМ вживую 14.08.2026: он смотрел кроп шапки и
   говорил «выше/ниже», шаг 0.1em. Остановились на -0.3em (≈7.5px выше
   центрирования по боксу) — «теперь идеально». Не менять без него.

   Почему подгонка вообще нужна: в logo-cyan.svg знак-кубик выше слова, а
   под словом ещё 18% высоты пустого поля (замер пикселей файла), поэтому
   выравнивание по боксу картинки не совпадает с базовой линией слова.
   Расчётный сдвиг «по базовой линии слова» (-0.44em) клиент раньше
   отклонил — визуально логотип уезжал слишком высоко.

   Единица em здесь считается от кегля САМОГО логотипа (у него нет своего
   font-size, значит 16px базы) — то есть сдвиг постоянный, 4.8px, и от
   шкалы не зависит. Так и надо: подгоняется не текст, а положение
   картинки в строке. Ноль вернёт центрирование по боксу. */
@media (min-width:1000px){
    .content-heading{--etp-heading-logo-shift:-0.3em}

    .content-heading__logo{
        inset-block-start:var(--etp-heading-logo-shift);
        position:relative;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   КНОПКИ-ГОДЫ В СПИСКАХ ДОКУМЕНТОВ — ОДНОЙ СТРОКОЙ (14.08.2026)

   ЗАМЕЧАНИЕ КЛИЕНТА по /information/anti-corruption/ и
   /information/countering-terrorism/: «почему текст на кнопке делится на
   2 строки? хотя место то еще есть на странице справа».

   Замер на 1280px: кнопка 146×66px — то есть высота в две строки, при
   ширине списка 630px и всего четырёх кнопках в ряду. Ширина кнопки задана
   подрядчиком числом (145.5px), и «на 2025 год» в неё не влезает одной
   строкой; на 1920px кегль больше, а ширина шире — там строка одна, потому
   дефект и виден только на средних экранах.

   Отдаём ширину содержимому и запрещаем перенос: годы — короткие подписи,
   рвать их по словам смысла нет. Ряд по-прежнему переносится целыми
   кнопками (flex-wrap у списка). */
.docs-list .nav-link{
    white-space:nowrap;
    width:auto;
}

/* ══════════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ГЛАВНАЯ — ПЯТЬ ЗАМЕЧАНИЙ КЛИЕНТА (14.08.2026)

   Клиент прислал скриншоты с телефона: «огромный кегль в фактах, иногда
   заезжает на другие блоки», «иллюстрации в блоке деятельность растянуты»,
   «лого в подвале наезжают друг на друга на мелких разрешениях», «в
   галерее кнопка фото/видео ужасная», «новости странно выглядят… может
   вообще убрать подробнее и окантовку».

   Все пять — про экраны уже НИЖЕ 1000px, поэтому весь блок в
   медиа-запросах с max-width. Десктоп не трогаем: там те же места уже
   разобраны выше по файлу (см. блоки про факты и про карточки новостей).
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. ФАКТЫ: КАРТОЧКА ПО СОДЕРЖИМОМУ, БЕЗ УВЕЛИЧЕНИЯ ─────────────────
   Замер на 390px ДО правки: активный слайд 238×326px, но подрядчик
   увеличивает его transform:scale(1.35) — на экране 321×440. Трансформ
   места в потоке не занимает, а контейнер прибит числом (13.125rem =
   236px), поэтому карточка выпирала на 200px и ложилась на заголовок
   «Новости» (видно на скриншоте клиента). Кегль при этом умножался на
   1.35: 16.9px текста читались как 22.8px — тот самый «огромный».

   Лечение ровно то же, что уже принято для десктопа выше по файлу
   (см. «ФАКТЫ: СЛАЙДЕР ПО СОДЕРЖИМОМУ»): высоту задаёт содержимое по
   всей цепочке, увеличение снимаем, выделение центральной карточки
   остаётся за градиентной заливкой — она никуда не делась.

   Слайдер выходит из абсолютного позиционирования (иначе контейнер
   обязан иметь высоту числом), но остаётся ШИРЕ контейнера: подрядчик
   так показывает соседние карточки по краям экрана — подсказка, что
   ленту можно листать. Центрируем margin-left:50% + сдвиг на половину
   собственной ширины: translateX высоту не занимает, поэтому контейнер
   по-прежнему считает её сам.

   slidesPerView:3 задан в JS подрядчика (assets/js/main.min.js) и от CSS
   не зависит — сузить ленту до одной карточки правкой стилей нельзя. */
@media (max-width:999.98px){
    .facts-slider-container{
        height:auto;
        padding-block:1rem;
    }

    .facts-slider{
        height:auto;
        inset:auto;
        margin-left:50%;
        position:static;
        transform:translateX(-50%);
    }

    /* Высота — по СВОЕМУ содержимому, а не по ряду. Первая версия правки
       выравнивала карточки по высоте (align-items:stretch), и вышло хуже
       исходного: ряд равняется по самой ВЫСОКОЙ карточке, а высокая на
       телефоне — всегда боковая (тот же текст в 173px против 320), и
       центральная карточка с коротким фактом («Девиз АО "Экотехпром":
       Чистый город — наша работа!») получала половину пустого поля.
       Замечание клиента 14.08.2026: «в мобильной можно воздуха столько не
       оставлять». Оставляем вендорское центрирование по ряду. */
    .facts-slider .swiper-slide{height:auto}
    /* !important — подрядчик задаёт активному слайду высоту тем же
       способом, обычной специфичностью его не перебить. */
    .facts-slider .swiper-slide-active{height:auto!important}
    .facts-slider .swiper-slide-active .facts-item{transform:none}

    /* РАЗМЕР КАРТОЧКИ — ОДИН НА ВСЕ, И В ЦЕНТРЕ, И ЗА КРАЕМ ЭКРАНА.

       Подрядчик держал центральную карточку крупнее соседних тремя
       способами сразу (свой width у слайда, свой width у карточки,
       transform:scale). Кегль внутри от этого умножался — с чего и
       началась вся правка.

       Дальше было два неверных захода, оба записаны, чтобы не повторить:
         1. Снял только scale — центральная стала 240px, «слишком узкая».
         2. Вернул ширину одной центральной карточке (min(82vw,24rem)) —
            за краем экрана соседки остались вендорскими 173px, «выглядит
            как сломалось».
         3. Раздал ту же ширину всем карточкам — плитки стали одинаковыми,
            но полезли друг на друга: ШАГ ЛЕНТЫ считает swiper из ширины
            слайдера (191px при 554px), а карточка была 320px.

       Правильное место для размера — САМ СЛАЙДЕР, а не карточка. swiper
       делит его ширину на три (slidesPerView:3 в assets/js/main.min.js)
       и по ней же расставляет слайды, поэтому ширина слайда и шаг ленты
       всегда согласованы — наезда не бывает по построению. Обратная
       формула: чтобы слайд получился W, слайдеру нужно 3W + 2 зазора.
       Карточке остаётся заполнить слайд (width:100%).

       Зазор у подрядчика разный по брейкпоинтам (18px до 768, 12px
       выше — те же breakpoints в JS), поэтому ширина слайдера задаётся
       двумя правилами ниже, а не одним. */
    /* Активному слайду подрядчик прибивает свою ширину через !important
       (13.3125rem) — на нём одном лента и разъезжалась: соседние слайды
       swiper считал сам и они выходили 304px, а центральный оставался
       240px. Приравниваем его к остальным тем же значением, из которого
       посчитана ширина слайдера ниже. */
    .facts-slider .swiper-slide-active{width:min(78vw, 23rem)!important}

    /* Отрицательный margin у ленты (-1.75rem до 768px, -1.575rem выше) —
       ручная компенсация подрядчика ровно под ТО, что центральный слайд
       шире соседних: половина разницы 240 и 173 как раз 33px. Слайды
       стали одинаковыми, компенсировать нечего, а сдвиг остался и уводил
       карточку на 31px левее центра экрана (замер: 12..316 при экране
       390 вместо 43..347). */
    .facts-slider .swiper-wrapper{margin-left:0}

    .facts-slider .facts-item{
        width:100%;

        /* Высота ряда — по самой высокой карточке. Пока ширины различались,
           самой высокой всегда была боковая (тот же факт в 173px вместо
           320), и вокруг центральной оставалось 128px пустого поля
           («воздуха столько не оставлять»). При одинаковой ширине
           разброс высот — это разница длины самих фактов, а min-height
           подтягивает короткие к общему росту. */
        min-height:11rem;
    }
}

/* Ширина карточки: 78vw — чуть у́же экрана, чтобы соседняя выглядывала
   краем и было видно, что ленту можно листать; потолок 23rem не даёт
   карточке раздуться на планшете. Слайдер = 3 карточки + 2 зазора (см.
   разбор выше). */
@media (max-width:767.98px){
    .facts-slider{width:calc(3 * min(78vw, 23rem) + 36px)}
}

@media (min-width:768px) and (max-width:999.98px){
    .facts-slider{width:calc(3 * min(78vw, 23rem) + 24px)}
}

/* ── 2. «НАША ДЕЯТЕЛЬНОСТЬ»: РИСУНКИ БЕЗ РАСТЯЖЕНИЯ ────────────────────
   Ниже 576px подрядчик даёт рисунку height числом (4.25rem у первой
   карточки и т.д.) И max-width:30% одновременно, а object-fit по
   умолчанию — fill. Пропорция файла при этом не соблюдается ни разу:
   замер на 390px, «натуральный размер → на экране»:

     город          650×312 (2.08) → 105×77 (1.36)
     баки РНО       462×220 (2.10) → 105×68 (1.54)
     колокола       582×198 (2.94) → 105×52 (2.02)
     полигон        524×294 (1.78) → 105×83 (1.26)
     мусоровоз      646×288 (2.24) → 105×68 (1.54)
     эвакуатор      606×206 (2.94) → 105×52 (2.02)

   То есть каждый рисунок сплющен по горизонтали на 25-40% — это и видно
   как «растянуты» (вертикально).

   Высоту убираем совсем: ширина 34% доли карточки задаёт размер, высота
   считается от неё сама и пропорция держится на любом экране. object-fit
   — страховка на случай, если какой-то из шести рисунков заменят файлом
   другой пропорции: он впишется, а не растянется (то же решение и по той
   же причине принято для десктопа выше по файлу).

   34/62 вместо вендорских 30/66: рисунок без растяжения ниже прежнего
   (у города 77px → 59), и доля ширины компенсирует потерю. Больше брать
   нельзя — заголовок в четыре строки («Раздельный сбор пластика и стекла
   в колокола») тогда упирается в рисунок. */
@media (max-width:575.98px){
    /* Три класса в селекторе — не украшательство: высоту подрядчик задаёт
       шестью правилами вида `.activity-item:nth-child(2) .activity-item__image`
       (специфичность 0,3,0), и одиночный класс их не перебивает — первая
       версия правки поменяла только ширину, а высота осталась числом, и
       рисунок продолжал сплющиваться. */
    .activity-grid .activity-item .activity-item__image{
        height:auto;
        max-width:34%;
        object-fit:contain;
        width:34%;
    }

    .activity-item__container{max-width:62%}
}

/* ── 3. ЛОГОТИПЫ В ПОДВАЛЕ: ДРУГ ПОД ДРУГОМ ────────────────────────────
   Замер на 320px ДО правки: лента 280px, «Экотехпром» 154px, разделитель
   1px, логотип ДЖКХ 125px — ровно 280, зазора между ними НОЛЬ. Оба
   логотипа не сжимаются (у img задана height:100%, width:auto), поэтому
   на экране чуть у́же или при увеличенном системном шрифте они не
   «перестраиваются», а наезжают — что клиент и снял.

   РЕШЕНИЕ КЛИЕНТА 14.08.2026: «лого можно же друг под друга ставить на
   мобильном». Первая версия правки оставляла их в строку и лечила только
   симптом — зазор плюс право сжиматься; логотипы при этом мельчали ровно
   там, где экран у́же, то есть где и так хуже видно. В колонке каждый
   логотип получает всю ширину подвала и остаётся полного размера.

   Вертикальная черта-разделитель убрана: она нарисована border-left,
   то есть разделяет соседей ПО ГОРИЗОНТАЛИ. В колонке разделять нечего —
   логотипы и так стоят отдельными строками. Скрываем, а не переделываем
   в горизонтальную линию: подвал и без неё читается, а лишняя черта
   между двумя логотипами добавила бы шума.

   Только до 576px: на планшете оба логотипа в строку помещаются с
   запасом (замер на 768px: 267px в ленте шириной 323), и колонка там
   выглядела бы обрывом вёрстки. */
@media (max-width:575.98px){
    .footer-logos{
        align-items:flex-start;
        flex-direction:column;
        gap:1.25rem;
    }

    .footer-logos__delimiter{display:none}

    .footer-logos__item{
        height:auto;
        max-width:100%;
    }

    .footer-logos__item img{
        height:auto;
        max-height:2.5rem;
        max-width:100%;
        width:auto;
    }
}

/* ── 4. ГАЛЕРЕЯ: ВКЛАДКИ «ФОТО / ВИДЕО» — ОБЫЧНЫЕ ПИЛЮЛИ ───────────────
   На мобильных подрядчик кладёт обе вкладки в ОДНУ белую капсулу с тенью
   и разделяет их косой чертой из ::before. Получается не переключатель, а
   плашка с текстом: активная вкладка отличается только цветом буквы,
   тач-таргет — высота строки (18px), нажимать нечего. Клиент: «в галерее
   кнопка фото/видео ужасная, переделать».

   Переводим на тот же компонент, что и все остальные вкладки сайта:
   белая пилюля с бирюзовой обводкой, активная залита бирюзовым (см. блок
   «КНОПКИ-ПИЛЮЛИ — ЕДИНЫЙ КОМПОНЕНТ» выше). Размеры — из тех же
   --etp-pill/--etp-pill-min-h, поэтому тач-таргет 45px получается сам.

   Правило дублирует объявления компонента, а не добавляет .gallery-nav
   в его список селекторов, намеренно: список действует на ВСЕХ ширинах, а
   на десктопе вкладки галереи — это часть заголовка секции («Галерея
   Фото / Видео» одной строкой), и превращать их там в пилюли клиент не
   просил. Замечание было про телефон. */
@media (max-width:767.98px){
    .gallery-nav{
        background-color:transparent;
        border-radius:0;
        box-shadow:none;
        gap:.5rem;
        flex-wrap:wrap;
        padding:0;
    }

    /* Косая черта между вкладками — часть старой «одной плашки»; у двух
       отдельных кнопок разделять нечего. */
    .gallery-nav .nav-item:not(:first-child)::before{content:none}

    .gallery-nav .nav-item{font-size:var(--etp-pill)}

    .gallery-nav .nav-link{
        align-items:center;
        background-color:#fff;
        border:1px solid #5fb9bd;
        border-radius:2.5em;
        color:#5fb9bd;
        display:inline-flex;
        font-size:var(--etp-pill);
        font-weight:700;
        justify-content:center;
        line-height:1.25;
        min-height:var(--etp-pill-min-h);
        padding:.35em 1.15em;
        transition:background-color .2s ease,color .2s ease,border-color .2s ease;
    }

    .gallery-nav .nav-link.active{
        background-color:#5fb9bd;
        border-color:#5fb9bd;
        color:#fff;
    }
}

/* ── 5. НОВОСТИ НА ГЛАВНОЙ: БЕЗ ОКАНТОВКИ И БЕЗ «ПОДРОБНЕЕ» ────────────
   Решение клиента: «я бы тогда уж кнопку пилюлю делал, хотя не понятно
   зачем, если у нас весь блок кликабельный должен быть, может вообще
   убрать подробнее и окантовку».

   Убираем и то, и другое. Кнопка «ПОДРОБНЕЕ» во всю ширину карточки была
   единственным крупным цветным пятном в ленте и перетягивала внимание с
   самой новости; при этом вела туда же, куда фотография и заголовок.
   Белая карточка с тенью вокруг фотографии — тоже только мобильная
   выдумка подрядчика: на десктопе новость выглядит как скруглённая
   фотография с датой и заголовком на общем фоне страницы. Приводим
   мобильную ленту к тому же виду.

   Кликабельность всего блока обеспечивает .news-slide__link — пустая
   ссылка-накладка поверх карточки (см. home.php). Она aria-hidden и вне
   таб-порядка: адрес у неё тот же, что у заголовка, и без этого
   скринридер читал бы одну новость тремя ссылками подряд.

   Скрываем «подробнее», а не удаляем из шаблона: та же кнопка нужна в
   карточке на странице новостей, разметка карточек общая. */
.news-slide__link{
    inset:0;
    position:absolute;
    z-index:1;
}

@media (max-width:999.98px){
    .news-slide__more{display:none}

    .news-slide__main{
        border-radius:0;
        box-shadow:none;
    }

    .news-slide__image{border-radius:var(--etp-card-radius)}

    .news-slide__body{
        background-color:transparent;
        padding:.75rem 0 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ЗАГОЛОВКИ СЕКЦИЙ ГЛАВНОЙ — ССЫЛКИ (14.08.2026)

   Правка клиента: «при нажатии на заги на главной проваливались в
   соответствующий раздел, при этом выделять их цветом или подчёркивать
   не нужно, просто ссылки сделать, не меняя вид, во всех разрешениях».

   Отсюда — ни цвета, ни подчёркивания, ни ховера: правило только СНИМАЕТ
   то, что навешивает на <a> бутстрап (--bs-link-color и
   text-decoration:underline), и повторяет раскладку самого заголовка.

   Раскладку приходится повторять, потому что .section-title у подрядчика
   — флекс-контейнер (иконка + текст в строку), а ссылка встала между ним
   и его содержимым и стала единственным флекс-элементом. inline-flex с
   align-items:inherit возвращает прежнее выравнивание: отступ между
   иконкой и текстом задан margin-right у самой иконки, а не gap'ом
   контейнера, поэтому переносить его никуда не нужно.

   ОБВОДКУ ФОКУСА НЕ СНИМАЕМ. «Не менять вид» — про обычное состояние; у
   ссылки, которую не отличить от текста ни цветом, ни подчёркиванием,
   видимый фокус остаётся единственным способом понять с клавиатуры, где
   ты находишься. Это браузерное умолчание, специально его тут не
   описываем — важно его не выключить. */
.section-title__link{
    align-items:inherit;
    color:inherit;
    display:inline-flex;
    text-decoration:none;
}

.section-title__link:hover,
.section-title__link:focus,
.section-title__link:active{
    color:inherit;
    text-decoration:none;
}

/* ── Заголовки секций главной: жирные на всех экранах ──────────────────
   Замечание клиента 14.08.2026: «они болдом были».

   Проверено замером ДО правки — на ссылки это не влияет, вес одинаковый
   на проде и локально: 700 от 1000px и 500 ниже. Дефект вендорский и
   старше наших правок: PT Sans подключён ДВУМЯ начертаниями, 400 и 700
   (см. @font-face в начале файла), пятисотого у него нет — браузер
   отдаёт ближайшее, то есть обычное. Поэтому на телефоне заголовок
   «Новости» набран регуляром, а на десктопе тем же правилом — жирным.

   Выравниваем по десктопу: он и есть «как было задумано». */
@media (max-width:999.98px){
    .section-title{font-weight:700}
}

/* Мусоровозы, проезжающие по вкладке «Система РНО» страницы
   «Экопросвещение» (правки клиента 14.08.2026). Их две: синяя
   «Вторсырьё» и серая «Смешанные отходы», идут по очереди.

   ЗАЧЕМ ТАК, А НЕ ВИДЕО/LOTTIE. Из библиотек на сайте только Swiper и
   Bootstrap. Lottie — плюс 60–250 КБ и внешний источник, который упрётся
   в планируемый CSP; видео на такой мелкий сюжет — мегабайты на всех
   страницах. Здесь весь эффект: четыре картинки (~75 КБ вместе) и три
   keyframes, ни одной новой зависимости и ни строчки нового JS.

   ПОЧЕМУ КОЛЁСА — ОТДЕЛЬНЫЕ КАРТИНКИ. Кузов лежит с прозрачными
   отверстиями на месте колёс; колесо вырезано из него же кругом и
   кладётся сверху. Вращается ровно колесо, а не машина целиком, и стиль
   совпадает с кузовом до пикселя — это тот же растр, а не перерисовка.
   Координаты колёс обмерены по каждой картинке отдельно и заданы В
   ПРОЦЕНТАХ от её габарита (переменные --w1/--w2/--w3/--wy/--wd), потому
   правило колеса одно на обе машины.

   РАЗМЕР ЗАДАЁТСЯ ВЫСОТОЙ, А НЕ ШИРИНОЙ. Габариты кадров разные —
   1045x462 у синей, 1065x462 у серой. Задай мы ширину, машины вышли бы
   разного роста и перестали читаться одним парком; высота же у реальных
   машин одинаковая. Отсюда height + aspect-ratio + width:auto.

   ОЧЕРЁДНОСТЬ БЕЗ JS. Обе машины сидят на одном 20-секундном цикле,
   серой дана отрицательная задержка ровно в половину цикла. Синяя едет
   с 0-й по 8-ю секунду, серая с 10-й по 18-ю, дальше синяя с 20-й — шаг
   10 секунд. Отрицательная задержка сдвигает фазу, а не откладывает
   старт, поэтому синхронизация не разъезжается со временем и не требует
   ни таймеров, ни скрипта.

   МАШИНЫ ЕДУТ ПО ВЕРХНЕЙ КРОМКЕ ПЛИТКИ ЦИФР — карточки работают дорогой
   (правка клиента: «пусть едет прямо над блоками с цифрами, без
   зазора»). Отсюда height:1px с погашающим margin-bottom:-1px: в потоке
   блок места НЕ занимает, поэтому в паузе между проездами на его месте
   не остаётся дыры, а сам он всё-таки не нулевой высоты — нулевой
   схлопнулся бы по правилам margin collapsing и уехал вверх, к отступу
   предыдущего блока, вместо кромки карточек.

   ПОЧЕМУ clip-path, А НЕ overflow:hidden. Отсекать нужно ТОЛЬКО по бокам
   (иначе машина в начале цикла стоит за правым краем и растягивает
   страницу по горизонтали), а вверх кузов обязан свободно выходить за
   пределы своей полосы. overflow:hidden так не умеет: браузер,
   получив hidden по одной оси, вычисляет вторую в auto и режет обе.

   ЗАПАС СНИЗУ. Нижние 26 из 462 единиц картинки — запечённая тень, а не
   колёса. Без поправки покрышки повисли бы над карточками на эти
   проценты; bottom сдвигает машину ровно на них, колёса встают на
   кромку, тень ложится на карточки.

   ПАУЗА ДО ПОПАДАНИЯ В КАДР. Если бы цикл шёл всегда, человек мог
   открыть страницу ровно в паузу и не увидеть ничего. Анимация ждёт,
   пока eco-reveal не поставит .is-visible. Условие написано через
   .has-reveal (его вешает тот же скрипт первым делом): БЕЗ JS машины
   едут сразу, а не стоят намертво — тот же принцип, что у самого
   eco-reveal, см. его докблок. */
.eco-truck{--eco-truck-h:88px;position:relative;z-index:1;height:1px;margin-bottom:-1px;clip-path:inset(-12rem 0 -1rem 0);pointer-events:none}
.eco-truck__car{position:absolute;left:0;bottom:calc(var(--eco-truck-h) * -0.05628);height:var(--eco-truck-h);width:auto;aspect-ratio:var(--car-ar);animation:eco-truck-drive 20s linear infinite;will-change:transform}
.has-reveal .eco-truck:not(.is-visible) .eco-truck__car{animation-play-state:paused}

/* Обмер по картинкам: синяя 1045x462, центры колёс 174/596/755, ось
   y=370, диаметр 130; серая 1065x462, центры 168/590/749, ось y=369,
   диаметр 132. Ниже — те же числа в процентах от своего габарита. */
.eco-truck__car--vtor{--car-ar:1045/462;--w1:10.431%;--w2:50.813%;--w3:66.029%;--wy:66.017%;--wd:12.440%}
.eco-truck__car--mixed{--car-ar:1065/462;--w1:9.577%;--w2:49.202%;--w3:64.131%;--wy:65.584%;--wd:12.394%;animation-delay:-10s}

.eco-truck__bounce{position:absolute;inset:0;animation:eco-truck-bounce 0.34s ease-in-out infinite alternate}
.eco-truck__body{position:absolute;inset:0;width:100%;height:100%}
.eco-truck__wheel{position:absolute;top:var(--wy);width:var(--wd);height:auto;animation:eco-truck-spin 0.5s linear infinite}
.eco-truck__wheel--front{left:var(--w1)}
.eco-truck__wheel--mid{left:var(--w2)}
.eco-truck__wheel--rear{left:var(--w3)}

/* 8 с на проезд, 2 с просвет до следующей машины: 40 % цикла машина
   едет, остальное ждёт за левым краем. Колёса крутятся против хода —
   машины идут справа налево, надписи на левом борту, как на реальной
   технике. */
@keyframes eco-truck-drive{
    0%{transform:translateX(100vw)}
    40%,100%{transform:translateX(-100%)}
}
@keyframes eco-truck-bounce{
    to{transform:translateY(-2px)}
}
@keyframes eco-truck-spin{
    to{transform:rotate(-360deg)}
}

/* На узких экранах машины ниже: 75px против 88px. */
@media (max-width:767.98px){
    .eco-truck{--eco-truck-h:75px}
}

/* Просвет между вводным блоком и плиткой цифр задаёт не эта полоса, а
   отступ .education-rno-about, и он МЕНЯЕТСЯ по ширине окна. Замер:

       ширина      просвет   машина   хватает?
       <768px         39px     75px      нет
       768–1399px  55–66px     88px      нет
       >=1400px       91px     88px      да

   То есть на всём среднем диапазоне машина накрывала скруглённый угол
   карточки выше и читалась как дефект вёрстки. Поэтому место выдаётся
   ПО УМОЛЧАНИЮ и снимается только там, где просвета хватает и так, —
   правило-исключение, а не правило-затычка: появится новый брейкпоинт
   с тесным отступом, и он получит место сам, без правки этого файла.

   Место добавляется padding'ом, а НЕ margin'ом: соседние вертикальные
   margin'ы схлопываются, побеждает больший — margin-top:2.5rem рядом с
   таким же отступом карточки выше не прибавил ни пикселя (проверено
   замером). padding не схлопывается никогда.

   Полбайта запаса на широких экранах: там просвет 91px против машины в
   88px, а bounce поднимает кузов ещё на 2px — 1px до касания. 0.5rem
   снимает вопрос, оставаясь незаметным.

   ВНИМАНИЕ ТОМУ, КТО БУДЕТ ЭТО ПРАВИТЬ. Скриншотный гейт эти машины НЕ
   ВИДИТ: screens.py открывает браузер с reduced_motion="reduce" (см. его
   докблок и строку с контекстом), а по этому медиазапросу .eco-truck
   скрыт целиком. Значит зелёные эталоны НИЧЕГО не говорят о посадке
   машин — после правки размеров или отступов посадку надо проверять
   отдельным замером по сетке ширин, как в таблице выше. */
.eco-truck{padding-top:2.5rem}

@media (min-width:3000px){
    .eco-truck{padding-top:0.5rem}
}

@media (prefers-reduced-motion:reduce){
    .eco-truck{display:none}
}

/* Строка поиска адреса над картой колоколов (правка заказчика 17.08.2026:
   «не вижу поисковика, чтобы вбить свой адрес» — на старом сайте
   eco-pro.ru эту роль играл штатный searchControl Яндекса). Разметка и
   вся логика — site/templates/about-bells.php, вкладка «Карта
   размещения»; там же в докблоке <form class="bells-map-search">
   объяснено, почему контрол Яндекса не переиспользован.

   Кнопки намеренно повторяют геометрию .bells-map-reset (та же
   скруглённая пилюля, тот же фирменный #5fb9bd), чтобы три органа
   управления картой читались как один набор, а не как три разных
   виджета. Вторая кнопка — контурная: «Рядом со мной» действие
   вспомогательное, полная заливка спорила бы с «Найти» за внимание. */
.bells-map-search{margin:0 0 1.25rem}
.bells-map-search__label{display:block;font-weight:700;margin:0 0 .5rem}
.bells-map-search__controls{display:flex;flex-wrap:wrap;gap:.5rem}
.bells-map-search__input{flex:1 1 16rem;min-width:0;appearance:none;-webkit-appearance:none;background-color:#fff;border:1px solid #e3e6e8;border-radius:2.5em;color:#1f2933;font-family:inherit;font-size:var(--etp-text);padding:.5em 1.25em}
.bells-map-search__input:focus{border-color:#5fb9bd;outline:none}
.bells-map-search__geo,.bells-map-search__submit{appearance:none;-webkit-appearance:none;border-radius:2.5em;cursor:pointer;font-family:inherit;font-size:var(--etp-text);font-weight:700;padding:.5em 1.75em;transition:background-color .2s ease,border-color .2s ease,color .2s ease;white-space:nowrap}
.bells-map-search__submit{background-color:#5fb9bd;border:1px solid #5fb9bd;color:#fff}
.bells-map-search__submit:focus-visible,.bells-map-search__submit:hover{background-color:#519da1;border-color:#519da1}
.bells-map-search__geo{background-color:transparent;border:1px solid #5fb9bd;color:#5fb9bd}
.bells-map-search__geo:focus-visible,.bells-map-search__geo:hover{background-color:#5fb9bd;color:#fff}
/* Пустой статус не должен занимать строку — иначе карта прыгает вниз при
   первом же запросе. :empty схлопывает его до нуля. */
.bells-map-search__status{font-size:var(--etp-text);margin:.75rem 0 0}
.bells-map-search__status:empty{display:none}
.bells-map-search__results{display:flex;flex-direction:column;gap:.25rem;list-style:none;margin:.5rem 0 0;padding:0}
.bells-map-search__results:empty{display:none}
/* Строка результата — кнопка, а не ссылка: она никуда не ведёт, а двигает
   карту. Тянется во всю ширину, чтобы попадать пальцем. */
.bells-map-search__result{appearance:none;-webkit-appearance:none;background-color:#f4f5f2;border:none;border-radius:.375rem;cursor:pointer;display:flex;flex-wrap:wrap;font-family:inherit;font-size:var(--etp-text);gap:.25rem 1rem;justify-content:space-between;padding:.625rem 1rem;text-align:left;transition:background-color .2s ease;width:100%}
.bells-map-search__result:focus-visible,.bells-map-search__result:hover{background-color:#e3e6e8}
/* Округа называются полностью («Юго-Западный административный округ»),
   и на 375px строка с nowrap уезжала за правый край — обрезанное
   «...административный окр» первый же мобильный скриншот и показал.
   Переносим: неразрывен только сам метраж, он собирается в JS с U+00A0. */
.bells-map-search__result-meta{color:#5a6572}

/* Иконка кластера точек «колокол» (правка клиента 17.08.2026). Разметку
   рисует шаблон макета в about-bells.php — там же объяснено, почему свой
   макет вместо пресета Яндекса и зачем ему отдельный clusterIconShape.

   Размер 52px продублирован в JS константой CLUSTER_SIZE: здесь он задаёт
   коробку, там — область клика. Разъедутся — кружок будет нажиматься мимо.

   Сдвиг на половину размера обязателен: макет кластера позиционируется от
   самой точки, её левым верхним углом, а не центром — без сдвига кружок
   висел бы правее и ниже своего места.

   Скругление 2.5em, а не 50%: набор допустимых радиусов задан DESIGN.md, и
   при равных стороне и высоте пилюля 2.5em и есть круг. */
.bells-cluster{align-items:center;background-color:#5fb9bd;border:2px solid #fff;border-radius:2.5em;color:#fff;display:flex;font-size:var(--etp-text);font-weight:700;height:52px;justify-content:center;left:-26px;line-height:1;position:relative;top:-26px;width:52px}


/* ══════════════════════════════════════════════════════════════════════
   МАСШТАБ НА ШИРОКОМ МОНИТОРЕ (правка клиента 18.08.2026: «на
   максимальном разрешении всё большевато выглядит, и я не только про
   текст; когда во второе разрешение переходишь — выглядит лучше»).

   ЧТО ЗАМЕРЕНО. Дело не в плавном росте кегля, а в СКАЧКЕ на границе
   1400px — вендорской ступени xl. Замер одной и той же главной, окно
   расширяется:

     окно   hero-заголовок   лого в hero   карточка «деятельность»
     1399        33px            50px           378×272
     1400        46px            69px           365×368   <- +39%

   У подрядчика для 1400+ нарисована ОТДЕЛЬНАЯ, более крупная раскладка
   hero (.hero-content 43.3rem, .hero-title 2.875rem, .hero-brand svg
   4.3125rem) — это не «шрифт подрос», это другой макет. Клиент, называя
   «второе разрешение» удачным, описывал ровно состояние ДО 1400.

   ЧТО СДЕЛАНО: ступень xl отодвинута с 1400 на 3000px по всему файлу
   (31 медиазапрос min-width и парные max-width:1399.98 -> 2999.98).
   САМА ЗАМЕНА ЖИВЁТ НЕ ЗДЕСЬ, а в теле файла выше — это отдельный
   коммит 4d1981f8, механический проход по медиазапросам вёрстки
   подрядчика. В этом блоке только объяснение и надстройки поверх.
   Компактная раскладка 1000-1399 растянута до 2999 и покрывает все
   реальные мониторы — 1440, 1600, 1680, 1920, 2560. Скачка не видит
   никто: до него не доходит ни одно типовое окно, включая 4K с
   системным масштабом.

   ПОЧЕМУ НЕ ДАВИТЬ БАЗУ rem (первая версия этой правки, откачена в тот
   же день). Ступени 16 -> 15 -> 14px на 1500/1700 гасили раздувание
   лишь частично: пик 1400-1499 оставался самым крупным состоянием
   сайта, крупнее и 1399, и 1920, а всё остальное становилось мельче
   нормального. Перенос ступени не мельчит ничего — он просто не даёт
   макету раздуться.

   ПОЧЕМУ НЕ ТРОГАЕМ ПОТОЛОК КОНТЕЙНЕРА (1440px, см. блок «РЕЗИНОВЫЙ
   КОНТЕЙНЕР» выше). Расширить его — прямой откат правки 17.08.2026
   «сайт растянутый в ширину, глаза разбегаются». Тот же заказчик,
   четырьмя днями раньше. На 2560 контент по-прежнему садится в 1440 по
   центру.

   ОСТАТОК ступени на 3000+: там раскладка подрядчика включается как
   была, и чтобы она не выглядела тем же скачком на очень широком
   мониторе, база rem на этой границе опущена на 6%. Проверено на
   1440 / 1600 / 1700 / 1920 / 2560 — главная, новости, раскрытие
   информации, заявка, контакты. */
@media (min-width:3000px){
    html{font-size:93.75%}
}


/* ── Карточки «Наша деятельность»: кегль заголовка и высота ─────────────
   Правка клиента 18.08.2026: «во втором размере шрифт мелковат у
   карточек, либо карточки тогда поменьше сделать, либо кегль побольше».

   Замер на 1280: карточка 341×320px, заголовок --etp-text = 21.6px, под
   ним 200px пустоты до рисунка. Мелким заголовок читается не сам по
   себе, а по отношению к площади карточки — поэтому делаем оба рычага
   сразу, как и предложил клиент.

   КЕГЛЬ: заголовок карточки переведён с роли «основной текст» на роль
   «заголовок блока» (--etp-title). Это возврат в шкалу, а не новое
   число: у подрядчика он и был крупнее текста (1.375rem на 1400+), роль
   потерялась, когда мы переводили карточку на токены.

   ВЫСОТА: 20 → 17rem. Высоту карточки держит НЕ заголовок, а описание,
   которое всплывает абсолютом при наведении — если ужать сильнее, текст
   с «подробнее» ляжет на рисунок (ровно этот дефект чинили 13.08.2026).
   17rem проверено замером наезда по всем шести карточкам. */
@media (min-width:1000px){
    .activity-item__name{font-size:var(--etp-title)}
}

@media (min-width:1000px) and (max-width:1199.98px){
    /* На нижнем краю ступени карточка всего 253px шириной, описание
       занимает больше строк — 17rem там дают наезд на рисунок (замер:
       -2px у карточки «Транспортирование ртутных ламп»). */
    .activity-item{min-height:19rem}
}

@media (min-width:1100px) and (max-width:1199.98px){
    /* Промежуточная ступень: на 1100px запас до рисунка при 17rem всего
       7px — на длинном описании редактора он ушёл бы в минус. */
    .activity-item{min-height:18rem}
}

@media (min-width:1200px) and (max-width:2999.98px){
    .activity-item{min-height:17rem}
}


/* ── Заголовок главного баннера крупнее (правка владельца 18.08.2026:
   «Региональный оператор по обращению с ТКО в Москве в главном баннере —
   может чууууть побольше сделать, это всё-таки главное тут, но только
   мобильные не трогаем, там всё ок»).

   2.07 -> 2.5rem (33 -> 40px). Ступень ровно одна — от 1000px: мобильные
   (1.4375rem) и планшет (1.8975rem) по прямой просьбе не тронуты.

   max-width поднят вместе с кеглем, 32.4 -> 39rem. Без этого строка
   «по обращению с ТКО в Москве» на 40px не помещается в прежние 518px и
   заголовок рвётся на три строки — проверено замером, во всех вариантах
   кегля держим ровно две.

   Верхний предел выбирал сравнением 37/40/44px на живой странице:
   44px — это почти прежние 46px старой ступени 1400+, ради ухода от
   которых сегодня двигали брейкпоинт. 40px читается как главный элемент
   баннера и не возвращает ощущение раздутости. */
@media (min-width:1000px){
    .hero-title{
        font-size:2.5rem;
        max-width:39rem;
    }
}


/* ── «Факты»: убрать провал между заголовком и новостями ────────────────
   Правка владельца 18.08.2026: «в фактах стало много места от зага и
   до новостей, надо как-то гармонично уменьшить, чтобы и воздух был и
   дыра не казалась».

   ЗАМЕР на 1920 до правки: секция 519px, из них заголовок -> карточки
   86px, сама карточка 256px, карточки -> новости 48px. Внутри карточки
   контент самой длинной («На сортировку в Москве отправлено…») занимает
   231px: текст 123 + иконка 30 + зазор 9 + вертикальные поля 69. То
   есть высоту держал не текст, а min-height 15.5rem (248px) и поля по
   34.5px сверху и снизу.

   Режем три вещи понемногу, а не одну сильно — иначе воздух пропадает
   совсем и блок слипается:
     * вертикальные поля карточки 34.5 -> 24px (верх clamp опущен);
     * min-height 15.5 -> 13.5rem — по самой длинной карточке с запасом
       на пару строк, которые редактор может дописать в панели;
     * поля контейнера слайдера сверху и снизу 48 -> 32px.

   Горизонтальные поля НЕ трогаем: они задают ширину текстового блока, и
   их сжатие меняет переносы во всех шести карточках. */
@media (min-width:1000px){
    /* Отступ «заголовок -> карточки» обязан совпадать с тем же отступом
       в «Новостях» (замечание владельца 18.08.2026). Замер до правки:
       факты 42/45/60/70px против новостей 26/29/38/48 на 1280/1440/
       1920/2560 — лишнее давало верхнее поле контейнера слайдера,
       которого у новостей нет вовсе. Верх убран, низ оставлен: он
       разводит карточки и заголовок «Новости». */
    .facts-slider-container{
        padding-top:0;
        padding-bottom:clamp(1rem, 1.1vw, 1.375rem);
    }

    .facts-item{
        min-height:17rem;
        padding-block:clamp(1rem, 1.25vw, 1.5rem);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ТАБЛИЦЫ: ЧИТАЕМЫЙ КЕГЛЬ И СКРОЛЛ НА УЗКИХ ЭКРАНАХ (18.08.2026)

   Жалоба клиента: «кегль в таблицах мелкий, на мобильной в таблице
   вообще ничего не видно». Замер на 375px: шапка СОУТ 7.9px, значения
   11px, годы 6.8px — десять колонок вендор ужимал в 335px экрана.
   Решение выбрано клиентом: горизонтальный скролл вместо ужатия,
   кегль — как на десктопе. */
.table-scroll{overflow-x:auto}
.table-scroll:focus-visible{outline:2px solid #5fb9bd;outline-offset:2px}

/* Годы в первой колонке СОУТ вендор задаёт 0.375rem (6px на десктопе) —
   мельче любого текста на сайте. Вся таблица переведена на шкалу. */
.safety-table thead th,
.safety-table thead th.cell-4,
.safety-table thead th.cell-5,
.safety-table thead th.cell-6,
.safety-table thead th.cell-7,
.safety-table thead th.cell-8,
.safety-table thead th.cell-9,
.safety-table thead th.cell-10,
.safety-table thead th.cell-long-2{font-size:var(--etp-note)}
.safety-table tbody td,
.safety-table tbody th{font-size:var(--etp-text)}

@media (max-width:767.98px){
    /* Скролл идёт до края экрана, а не внутри полей контейнера: иначе
       у узкой таблицы видно меньше половины первой колонки. */
    .table-scroll{margin-inline:-1.25rem;padding-inline:1.25rem}

    /* Ширина, ниже которой колонки перестают ужиматься и начинается
       скролл. Считана от содержимого: у СОУТ 10 колонок (3 текстовых +
       7 числовых), у экополитики — 3 текстовых. */
    .table-scroll>.safety-table{min-width:46rem}
    .table-scroll>.envpolicy-table{min-width:32rem}

}

/* Тот же приём, что у .safety-table выше, но для таблиц экополитики —
   ВНЕ мобильного медиа-блока (правка клиента 19.08.2026: «в таблицах текст
   везде мелкий»). Раньше кегль поднимался только на узких экранах, а на
   десктопе оставался вендорский: замер на 1600px — ячейки 16px против 23px
   у охраны труда. */
.envpolicy-table thead th{font-size:var(--etp-note)}
.envpolicy-table tbody td,
.envpolicy-table tbody th{font-size:var(--etp-text)}

/* ══════════════════════════════════════════════════════════════════════
   БУЛЛИТЫ «РАЗДЕЛЬНЫЕ»: УБРАТЬ СОЕДИНИТЕЛЬНУЮ НИТЬ (правка клиента
   19.08.2026)

   .diamond-list. Вендор рисует между соседними ромбами вертикальную
   полоску-градиент через ::before у li:not(:last-child) — с виду цепочка,
   а не список раздельных пунктов. Отступ между пунктами держит не эта
   полоска, а padding-bottom:var(--offset) на том же li (см. вендорское
   правило в line 1) — обнуляем только содержимое псевдоэлемента, отступы
   остаются как были. */
.diamond-list li:not(:last-child)::before{
    content:none;
}

/* РОМБ МЕНЬШЕ (правка клиента 19.08.2026, ровно в 2 раза по просьбе
   клиента): вендор рисует ::after 1.66em/left:.25em/top:.45em — заметно
   крупный маркер. Новые числа — та же геометрия, отмасштабированная
   строго на 0.5 (размер и оба смещения вместе, чтобы центр ромба
   съехал пропорционально, а не остался в старой точке): 1.66em -> .83em,
   .25em -> .125em, .45em -> .225em. padding-left li 3rem -> 2.2rem —
   не строго вдвое (0.83em ромбу с запасом хватает и меньшего поля),
   текст не должен уезжать от уменьшенного маркера слишком далеко.

   Контекстные переопределения padding-left вендора БЬЮТ мой плоский
   .diamond-list li специфичностью (доп. класс-предок) — .bells-
   section--image, .union-activity, .vacancies-single__section
   переопределены отдельно ниже тем же приёмом (halving), проверено
   визуально на страницах колоколов/профсоюза/вакансии. */
.diamond-list li::after{
    height:.83em;
    left:.125em;
    top:.225em;
    width:.83em;
}

.diamond-list li{
    padding-left:2.2rem;
}

.bells-section--image .diamond-list li{
    padding-left:2.85rem;
}

.union-activity .diamond-list li{
    padding-left:2.85rem;
}

.vacancies-single__section .diamond-list li{
    padding-left:2.2rem;
}

/* .gradient-list. Вендор красит ::before самого <ul> в сплошную
   градиентную полосу во всю высоту списка — тот же эффект «нити», только
   на всю колонку сразу. Гасим полосу и даём КАЖДОМУ пункту собственный
   маркер-ромб в тех же цветах градиента списка (--color-start/
   --color-stop — свои переменные каждого вызова .gradient-list, см.
   вендорское правило).

   ПЕРЕДЕЛАНО 19.08.2026 (замер Playwright): первая версия держала отступ
   на <ul> (padding-left:1.75rem, вендорское) и ставила маркер отрицательным
   left внутрь этого поля — с виду «маркер прилип к тексту», зазор и
   вертикаль не совпадали с эталоном .diamond-list («Обязанности» на
   странице вакансии). Причина: два разных списка с двумя разными наборами
   чисел неизбежно расходятся при любом кегле.

   Фикс — не подгонка чисел, а СМЕНА МОДЕЛИ: скопирована модель
   .diamond-list буквально (тот же приём, те же значения), а не подобраны
   новые под .gradient-list. Отступ переехал с <ul> на <li> (как у
   .diamond-list), маркер получил ТЕ ЖЕ .83em/.125em/.225em, что и ромб
   .diamond-list (см. блок выше) — при одинаковом кегле в одном контексте
   (.gradient-list встречается только внутри .vacancies-single__section,
   рядом с .diamond-list «Обязанности», см. about-vacancies-item.php) это
   даёт пиксель-в-пиксель тот же результат, а не просто «похожий». */
.gradient-list{
    padding-left:0;
}

.gradient-list::before{
    content:none;
}

.gradient-list li{
    padding-left:2.2rem;
    position:relative;
}

.gradient-list li::before{
    background-image:linear-gradient(135deg, var(--color-start), var(--color-stop));
    border-radius:.25rem;
    content:"";
    height:.83em;
    left:.125em;
    position:absolute;
    top:.225em;
    transform:rotate(45deg);
    width:.83em;
}

/* ══════════════════════════════════════════════════════════════════════
   «ПОДРОБНЕЕ» -> СТРЕЛОЧКА (карточки «Наша деятельность», правка клиента
   19.08.2026). Текст убран из home.php, .link-more здесь несёт только
   .icon-arrow-right — тот же символ спрайта, что и .apply-info-link
   (698-я строка), тот же приём em-размера. Не через голый .icon-arrow-right
   глобально: у него есть и другие роли на сайте (.doc-inline-link и
   т.д.) со своим размером, трогать их нельзя. */
.activity-item__more .icon-arrow-right{
    flex:0 0 auto;
    height:1em;
    width:1em;
}

/* ══════════════════════════════════════════════════════════════════════
   СЧЁТЧИК "0 / 300" ВНУТРИ РАМКИ TEXTAREA (правка клиента 19.08.2026)

   Было: .char-counter — обычная строка ПОД textarea (правило выше,
   ~строка 147). Клиент попросил цифры внутрь поля, в правый нижний угол.
   .textarea-wrap — новая обёртка ТОЛЬКО вокруг textarea (см.
   eco_forms_field_message() в feedback.php и eco_flexform_render_textarea()
   в flexform.php); .invalid-feedback ЦЕЛЕНАПРАВЛЕННО остался снаружи неё
   (обёртка не должна расти вместе с текстом ошибки, иначе счётчик уедет
   вниз вместе с ней) — оба места печатают .invalid-feedback--shown прямо
   из PHP, раз потеряли CSS-соседство с textarea (см. комментарий там же,
   ГРАБЛИ §45.4).

   padding-bottom у textarea даёт место счётчику снизу, чтобы текст
   сообщения не заезжал под цифры: правый нижний угол резервирует
   0.5rem отступа + строка var(--etp-note) (0.875-1.25rem) — 2.5rem с
   запасом хватает на обеих ступенях кегля. */
.textarea-wrap{
    position:relative;
}

.textarea-wrap textarea.form-control{
    padding-bottom:2.5rem;
}

.textarea-wrap .char-counter{
    bottom:.5rem;
    margin-top:0;
    pointer-events:none;
    position:absolute;
    right:.5rem;
}

/* ══════════════════════════════════════════════════════════════════════
   ЗАГОЛОВКИ БЕЗ БИРЮЗЫ (about-bells.php, правка клиента 19.08.2026)

   Замечание клиента: заголовки «Желтые контейнеры типа «колокол»» и
   «Зеленые контейнеры типа «колокол»» выглядят как ссылки. Разметка
   (eco_bells_accent_heading() в about-bells.php) красит акцентную часть
   заголовка "типа «колокол»" классом .text-primary — вендорской
   Bootstrap-утилитой бирюзового текста; только section4/section6
   печатают этот класс (у section1-3 акцента нет вовсе, докблок функции).
   Текст и структуру не трогаем, гасим только цвет.

   !important обязателен: вендорское правило .text-primary само на
   !important (`color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))
   !important`), обычная специфичность его не перебьёт. */
.bells-heading .text-primary{
    color:#1f2933!important;
}

/* ══════════════════════════════════════════════════════════════════════
   БЕЛАЯ ПОДЛОЖКА ШИРЕ (главная и все страницы, правка клиента 19.08.2026,
   ТРЕТЬЯ версия пункта «воздух по бокам» — первые две трогали .container и
   были отклонены: v1 поджала max-width сайта целиком («контент сжался»),
   v2 раздула padding .container и потому расширила зазор ВОКРУГ карточек,
   а нужно было ровно наоборот — узнали по сравнению с продом: заголовок
   «Региональный оператор» на карточке стал переноситься на две строки,
   на проде помещается в одну. .container НЕ ТРОГАЕМ вообще, откачен к
   исходнику (max-width:min(100% - 2rem,1440px),
   padding-inline:clamp(1rem,3vw,3rem), правка 17.08.2026 выше).

   Правильная цель другая: клиент имел в виду не отступы вокруг карточек,
   а БЕЛУЮ СКРУГЛЁННУЮ ПОДЛОЖКУ (main.main > .container > .content —
   белый фон + border-radius, containers сама подложка, а не карточки
   внутри неё) — придвинуть её края к краям окна, оставив содержимое
   (activity-grid и все секции внутри) на прежнем месте.

   Устройство зазора (замер playwright, 2026-08-19): от края вьюпорта до
   белой подложки — ДВЕ независимые величины подряд: (1) внешний отступ
   от центрирования .container через min(100% - 2rem, 1440px) — не
   трогаем, это ширина САЙТА; (2) собственный padding-inline .container
   (clamp(1rem,3vw,3rem)) — вот его и «съедаем» наполовину под подложку.
   .content имеет СВОЙ отдельный padding-inline (вендорская адаптивная
   лесенка 1.875rem/3.125rem/4.375rem по брейкпоинтам) — от него зависит
   отступ КОНТЕНТА внутри подложки, его нельзя трогать, иначе сдвинутся
   и карточки.

   Приём: отрицательный margin-inline у .content НА ВЕСЬ padding
   .container — подложка выезжает наружу в чужой padding целиком, до
   самой границы .container (там, где раньше начинался ТОЛЬКО внешний
   отступ центрирования), компенсирующая прибавка того же размера к
   padding-inline .content — содержимое остаётся ровно там же, где было.
   Полная, а не половинная компенсация: пример клиента «было ~3.5rem —
   стало ~1.5rem» (замер на 1280px) — это уменьшение больше чем вдвое,
   и «карта почти во всю ширину» тоже про полное схлопывание СОБСТВЕННОГО
   padding контейнера, а не его половины. Остаётся только внешний отступ
   центрирования .container (min(100% - 2rem, 1440px)) — его тронуть
   нельзя, это и есть неприкасаемая ширина сайта; на очень широких экранах
   (2000px+) он один и даёт заметный зазор — это граница по max-width, не
   баг компенсации.

   Итог: на 1280px общий зазор до подложки 54px -> 16px, на 1600px
   128px -> 80px, на 2000px 328px -> 280px (тут доминирует именно внешний
   отступ центрирования, см. выше) — воздух ВОКРУГ подложки со стороны
   окна растёт, сама подложка расширяется, карточки внутри не двигаются
   ни на пиксель.

   Диапазон 1000-2559.98px: измеренный факт — .content держит ОДНУ и ту
   же ступень padding (3.125rem/50px) ровно на этом диапазоне (замер по
   восьми ширинам от 768 до 3000px), она и захардкожена в компенсации.
   Мобильную (<1000px, ступень 1.875rem) и сверхширокую (>=2560px,
   нестандартная ступень ~4.1rem) не трогаем — задача explicitly про
   десктоп, а для них компенсация потребовала бы других чисел.

   ПОДВАЛ (добавлено в тот же день по замечанию клиента «про подвал
   забыли»): footer.footer > .container > .content — та же структура
   .container>.content, тот же класс .content, та же вендорская лесенка
   padding-inline (проверено замером: 50px на 1600px, идентично main),
   до этой правки не переопределялась вовсе — подвал остался на старом
   отступе, пока подложка над ним расширилась, и левые края разошлись на
   те же 48px, что было. Селектор ровно тот же приём, второй операнд
   через запятую — дублировать всю портянку не стал, calc() в обоих
   местах общий и одинаково зависит от того же padding-inline
   .container, который тоже общий для main и footer. */
@media (min-width:1000px) and (max-width:2559.98px){
    main.main > .container > .content,
    footer.footer > .container > .content{
        /* +25px: полное расширение показалось пользователю чрезмерным (19.08, две итерации: 5px, затем ещё 20px) */
        margin-inline:calc(-1 * clamp(1rem, 3vw, 3rem) + 25px);
        padding-inline:calc(3.125rem + clamp(1rem, 3vw, 3rem) - 25px);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ПРАВКИ ЗАКАЗЧИКА ПО ШАПКЕ/МЕНЮ (client-edits-2026-08)

   Задача 1 — десктопный логотип в шапке. Разметка — snippets/navbar.php,
   отдельный класс .navbar-brand-desktop (НЕ .navbar-brand — тот класс на
   ≥1000px несёт вендорские правила, завязанные на мобильный оверлей меню,
   см. main.css строка 1: .navbar-brand{position:absolute;...}/{position:
   relative;z-index:1031} внутри РАЗНЫХ брейкпоинтов подрядчика). Здесь —
   полностью своя, предсказуемая геометрия: скрыт по умолчанию (мобильная
   шапка не должна знать об этом блоке вовсе — там свой .navbar-brand,
   d-lg-none), показывается с 1000px тем же приёмом, что и .d-lg-*
   (совпадает по брейкпоинту с вендорскими утилитами). align-self отдельно
   от align-items:baseline контейнера (.navbar-container) — тот выставлен
   вендором и точно откалиброван под текст пункта меню/подпись телефона
   (см. §80-84 ГРАБЛИ.md), трогать его нельзя: правки задели бы уже
   выверенное выравнивание. У SVG нет текстовой базовой линии, поэтому
   логотип выключен из общего baseline-выравнивания через собственный
   align-self и центрируется по высоте шапки независимо от соседей.
   Заливка #fff — как у мобильного .navbar-brand (фон шапки везде тёмный:
   видео на главной, сплошной зелёный на внутренних страницах, см. отчёт
   задачи) — на десктопе шапка не переключается в светлое состояние при
   скролле (тот переход у подрядчика тоже завязан на мобильный брейкпоинт,
   max-width:999.98px), поэтому statically белого хватает.

   Задачи 2 и 4 — flyout 3-го уровня вправо + кликабельность пункта с
   детьми. Открытие/закрытие/переход — assets/js/menu-flyout.js (перехват
   через capture-phase, main.min.js не тронут). Здесь — только геометрия:
   справа от пункта 2-го уровня, а не аккордеоном вниз. Селекторы строго
   через .navbar-subnav (шапка) — .footer-subnav/.footer-subsubnav
   (подвал) используют другие имена классов, эти правила физически их не
   касаются, третий уровень в подвале остаётся вертикальной картой сайта,
   как просил заказчик. Область — @media (min-width:1000px): на мобильных
   (<1000px, полноэкранное меню) поведение и вид не меняются — панель
   3-го уровня остаётся тем же аккордеоном вниз, что и был (переключает
   класс is-subsubnav-open теперь menu-flyout.js вместо main.min.js,
   визуально и по CSS — ничего нового, см. базовое, неспецифичное для
   ширины правило подрядчика .navbar-subnav>.nav-item.has-subsubnav
   .navbar-subsubnav{max-height:0;opacity:0;...}/.is-subsubnav-open
   {max-height:25rem;opacity:1;...} — оно не в этом media-блоке и
   продолжает работать как раньше). */
.navbar-brand-desktop{display:none}

/* 19.08.2026, отмена компромисса со скрытием телефона на 1000-1199.98:
   граница «мобильное меню ↔ десктопная шапка» сдвинута с 1000px на
   1200px (полное обоснование — блок "БУРГЕР-МЕНЮ ДО 1200px" ниже, после
   флайаута 3-го уровня). Показ десктопного лого теперь синхронизирован
   с этой новой границей, а не со старым вендорским брейкпоинтом. */
@media (min-width:1200px){
    /* align-self:flex-start, НЕ center — .navbar-container высокий
       (align-items:baseline, но общая высота строки определяется самым
       высоким соседом: на главной это .navbar-question, которого на
       внутренних страницах вовсе нет, см. navbar.php). Центрирование по
       ПОЛНОЙ высоте контейнера увело бы логотип на разную глубину на
       главной и внутренних страницах — на главной прямо поверх
       содержимого героя (было замерено скриншотом при первой версии
       правки). flex-start встаёт по верхнему краю строки, тот же приём,
       что и у .navbar-contacts чуть выше (см. докблок «величина сдвига
       не подобрана на глаз») — там аналогичная проблема (первый ребёнок
       .navbar-side не тот, что должен по факту стоять на строке меню)
       решена тем же способом: relative + inset-block-start от токена
       кегля меню, а не центрированием по чужой высоте. */
    .navbar-brand-desktop{
        align-items:center;
        align-self:flex-start;
        display:flex;
        /* Правка клиента 19.08: лого ×2 (3.5rem) и выравнивание ПО ТЕКСТУ:
           надпись «Экотехпром» должна сидеть на одной линии с текстом
           пунктов меню, а не центр картинки по центру строки. В viewBox
           50 текст занимает y≈17.4…37.1 (центр ≈28.9, т.е. 58% высоты) —
           кубик слева выше текста, поэтому бокс лого сдвигается вверх.
           При height 3.5rem (56px) центр надписи = 32.4px от верха бокса;
           центр строки меню — 63.85px от верха контейнера (замер 1600px),
           padding-top контейнера 39.6px → inset = 63.85−32.4−39.6 ≈ −8px.
           Сдвиг position:relative, чтобы не увеличивать высоту строки
           (см. тот же приём у .navbar-contacts). */
        /* Правка клиента 28.08.2026 ("Сверху логотип компании... стал
           чуть выше строчки"): замер по глифам (baseline-to-baseline,
           не box-center — SVG асимметричен: кубик-иконка сверху, текст
           ниже центра), Range/measureText, страницы / и
           /about/services/lamps/ (совпадают буквально — .navbar-question
           на align-self:flex-start бренда не влияет):
             1280px — базовая линия «Экотехпром» была выше линии пунктов
             меню на 0.25px (в пределах погрешности, не заметно);
             1600px — выше на 1.37px (уже видно). Плоское значение в rem
             не масштабируется вместе с --etp-note (в отличие от высоты
             SVG, растущей вместе с кеглем меню), поэтому расхождение
             растёт с шириной — тот же компромисс, что был при подборе
             .2rem (см. докблок выше), просто пересчитан на новых цифрах.
           .2rem → .25rem (было 3.2px, стало 4px, сдвиг вниз на 0.8px)
           минимизирует худший случай на двух проверенных ширинах: после
           правки 1280px даёт +0.55px (логотип чуть ниже линии), 1600px
           -0.57px (чуть выше) — обе ошибки меньше 1px и визуально не
           видны, в отличие от 1.37px до правки. */
        inset-block-start:.25rem;    /* центр надписи 0.578·H; при H=2.4em
           от --etp-note сдвиг ~3.6-4.1px, замер 28.08.2026 на 1280/1600 */
        margin-inline-end:clamp(1rem, 2vw, 2rem);
        position:relative;
    }

    .navbar-brand-desktop svg{
        fill:#fff;
        /* Правка 19.08: лого масштабируется ВМЕСТЕ с кеглем меню (пункты
           используют var(--etp-note): 16.7px@1000 → 20px@1440+). 2.4em от
           этого токена = 48px на 1440+, ~40px на 1000 — надпись лого
           держится на линии текста меню на всех ширинах. */
        font-size:var(--etp-note);
        height:2.4em;
        width:auto;
    }
}

/* 19.08.2026: та же смена границы, что и у десктопного лого выше —
   флайаут вправо это часть десктопной шапки, на полосе 1000-1199.98
   теперь бургер (аккордеон вниз, см. блок "БУРГЕР-МЕНЮ ДО 1200px"). */
@media (min-width:1200px){
    /* Контекст позиционирования для флайаута — сам пункт 2-го уровня,
       а не вся выпадашка .navbar-subnav-popup: левый край панели 3-го
       уровня обязан вставать ровно у правого края СВОЕГО пункта, а не
       у края всего блока (иначе флайаут "плавал" бы по горизонтали в
       зависимости от того, у какого по счёту пункта он раскрыт). */
    .navbar-subnav > .nav-item.has-subsubnav{position:relative}

    .navbar-subnav > .nav-item.has-subsubnav .navbar-subsubnav{
        position:absolute;
        top:0;
        left:100%;
        margin:0 0 0 .5rem;
        max-height:none;
        overflow:visible;
        min-width:14rem;
        padding:1.125rem 1.44rem 1.26rem;
        background-color:#fff;
        border-radius:.375rem;
        box-shadow:0 .625rem 1.25rem rgba(0, 0, 0, .1);
        transform:translateX(.5rem);
        transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
        z-index:60;
    }

    /* max-height/opacity/visibility на .is-subsubnav-open уже задаёт
       вендорское правило вне этого media-блока (см. докблок выше) —
       здесь только то, что аккордеону было не нужно: сброс вертикального
       margin (вендорское .is-subsubnav-open правило добавляет margin-top/
       margin-bottom:.75rem для отступа "вниз", тут это стало бы лишним
       сдвигом от top:0) и сама сдвижка появления панели. */
    .navbar-subnav > .nav-item.has-subsubnav.is-subsubnav-open .navbar-subsubnav{
        margin:0 0 0 .5rem;
        transform:translateX(0);
    }

    /* Тонкая стрелка-индикатор была "аккордеон вниз" (поворот на 180deg
       при открытии, острие вверх). Для флайаута вправо логичнее статично
       указывать направление раскрытия — вправо — в обоих состояниях. */
    .navbar-subnav > .nav-item.has-subsubnav > .nav-link .icon-arrow-down-thin,
    .navbar-subnav > .nav-item.has-subsubnav.is-subsubnav-open > .nav-link .icon-arrow-down-thin{
        transform:rotate(-90deg);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Правки клиента 19.08.2026, hero главной и кнопка «Задайте вопрос»
   (обсуждение скринов шапки): 1) зазор между шапкой с лого и заголовком
   hero был ~5px — тесно; 2) между кнопкой «Оформить заявку» и баками
   бандл даёт margin-top ~131px («дыра»); 3) кнопка «Задайте вопрос»
   (кегль 20px, высота 77px) великовата. Только десктоп ≥1000px —
   мобильный hero скомпонован иначе и жалоб не вызывал. */
@media (min-width:1000px){
    /* верх текста H1 по линии верха кнопки «Задайте вопрос» (правка 19.08):
       бокс кнопки y=130, бокс H1 при 2.5rem был y=139 + ~6px leading */
    .section--hero .hero-title{margin-top:1.5rem}
    /* Баки/здания прижаты к низу hero через margin-top:auto бандла и
       «стоят» на белой карте. Дыру над баками убираем НЕ margin'ом
       (он отрывает их от карты — ловили 19.08), а уменьшением
       фиксированной высоты .hero-content (бандл даёт ~31.2rem):
       контент до кнопки ~191px + зазор 48px + баки 216px ≈ 455px. */
    .section--hero .hero-content{height:28.5rem}
    /* Бандл задаёт strong внутри кнопки 1.45em (33px на 1600) — именно он
       раздувал кнопку; кегли обеих строк переводятся на токены. */
    .navbar .btn-question{padding:.375rem .875rem .5rem}
    .navbar .btn-question strong{font-size:var(--etp-note)}
    .navbar .btn-question span{font-size:var(--etp-fineprint)}
}
/* ══════════════════════════════════════════════════════════════════════
   БУРГЕР-МЕНЮ ДО 1200px (правка заказчика 19.08.2026)

   Было (замер 19.08): на 1000-1199.98 лого+меню+телефон в одну строку не
   влезали (перелив ~65px на 1000px) — компромиссом скрывали подпись
   «Телефон горячей линии:», а на 1000-1099 весь телефонный столбец.
   Заказчик решил: компромисс убрать, вместо тесной десктопной строки на
   этой полосе — ПОЛНОЦЕННОЕ мобильное меню (бургер + оверлей), как на
   <1000px. Десктопная шапка теперь только с 1200px.

   ПОЧЕМУ ПОЛНЫЙ ПЕРЕСБОР, А НЕ ТОЧЕЧНАЯ ПРАВКА. main.css строка 1 —
   вендорский бандл (не трогать). Брейкпоинт «мобильное/десктопное меню»
   зашит в нём на 1000px в двух не пересекающихся диапазонах:
   @media (max-width:999.98px) — оверлей на весь экран (.navbar-collapse
   position:absolute, паддинги .navbar-nav, границы .navbar-subnav) — и
   @media (min-width:1000px) — десктопная строка (.navbar-collapse всегда
   видим, .navbar-nav горизонтальным флексом, попап .navbar-subnav-popup
   по hover). Там же, тоже на 1000px, тоже с !important — бутстраповские
   утилиты d-lg-none/d-lg-block/d-lg-inline (видимость мобильного лого,
   бургера, кнопки поиска, телефонного столбца, стрелки пункта меню).
   Подвинуть эти брейкпоинты в бандле нельзя. Единственный рабочий приём —
   ниже, на полосе (min-width:1000px) and (max-width:1199.98px), ВРУЧНУЮ
   перебить каждое такое правило: вендорские .navbar-* — значением,
   которое сам вендор даёт мобильному экрану (<1000px без этой полосы);
   d-lg-* — точечным !important на конкретных элементах шапки, не
   глобально по классам утилит (см. design_lint main.css). */
@media (min-width:1000px) and (max-width:1199.98px){
    /* --- Бутстрап d-lg-*: показать мобильные элементы шапки, спрятать
       десктопные. Все места в navbar.php, где вендор переключает
       видимость по d-lg-none/d-lg-block/d-lg-inline — тот же брейкпоинт
       1000px (main.css строка 1: .d-lg-none{display:none!important} и
       соседи внутри @media (min-width:1000px)), поэтому без !important
       утилита не перебивается.

       Иконки поиска здесь НЕТ — она убрана из шапки целиком отдельным
       клиентским решением (14.08.2026, см. блок "ИКОНКА ПОИСКА В ШАПКЕ —
       УБРАНА ВЕЗДЕ, ГДЕ ОНА ЕСТЬ" ниже по файлу), полоса 1000-1199.98
       туда же дописана — форсить её обратно в бургер-режиме нельзя. */
    .navbar .navbar-brand{display:block!important}
    .navbar-side .navbar-side-item:not(.navbar-search){display:flex!important}
    .navbar .navbar-contacts{display:none!important}
    .navbar-nav > .nav-item > .nav-link > .icon-arrow-down{display:none!important}

    /* --- .navbar-brand: мобильное лого, вернуть мобильную геометрию.
       Вендор на ≥1000px даёт position:absolute;top:6.12rem;left:0 —
       расчёт под десктопную раскладку, где элемент и так спрятан
       d-lg-none. Раз мы его снова показываем, возвращаем то же, что
       вендор сам даёт мобильному экрану (position:relative;z-index —
       @media max-width:999.98px) и мобильный размер svg (@media
       min-width:768px — тот диапазон не менялся, остаётся активным). */
    .navbar-brand{
        left:auto;
        position:relative;
        top:auto;
        z-index:1031;
    }
    .navbar-brand svg{height:2.15625rem}
    .is-menu-open .navbar-brand svg,
    .is-scrolled .navbar-brand svg{fill:#5fb9bd}

    /* --- .navbar-container: вернуть мобильную высоту строки. Вендор на
       ≥1000px даёт align-items:flex-start;height:auto;padding-top:
       2.475rem;position:relative — под десктопную раскладку с абсолютным
       лого. Возвращаем то, что вендор сам даёт мобильному экрану на этой
       ширине (база + @media min-width:768px: height:5rem). */
    .navbar-container{
        align-items:center;
        height:5rem;
        padding-top:0;
        position:static;
    }

    /* --- .navbar-collapse: снова оверлей на весь экран, а не строка
       меню. Дословно то, что вендор даёт мобильному экрану в @media
       (max-width:999.98px) — то же позиционирование, тот же скрытый вид
       закрытого меню (display:block у вендора на ≥1000px тот же, что и
       у закрытого мобильного меню, конфликта по значению нет). */
    .navbar-collapse{
        background-color:#fff;
        height:100vh!important;
        height:calc(var(--vh, 1vh) * 100)!important;
        left:0;
        overflow-y:auto;
        padding-top:5rem;
        position:absolute;
        top:0;
        width:100vw;
        z-index:90;
    }
    .navbar-collapse:not(.show){
        opacity:0;
        transform:translateY(-1.25rem);
        visibility:hidden;
    }

    /* --- .navbar-nav: снова вертикальный список пунктов, а не
       горизонтальная строка. */
    .navbar-nav{
        display:block;
        padding:1.875rem calc(50vw - 21.875rem);
    }
    .navbar-nav > .nav-item{
        --bs-link-color-rgb:0, 0, 0;
        --bs-link-hover-color-rgb:95, 185, 189;
        font-size:var(--etp-text); /* design_lint: .9375rem вендора = ровно --etp-text на мобильных */
    }
    .navbar-nav > .nav-item + .nav-item{
        margin-left:0;
        margin-top:1rem;
    }
    .navbar-nav > .nav-item > .nav-link{
        column-gap:.36rem;
        font-size:var(--etp-title); /* design_lint: вендор даёт 1.125rem, ближайшая роль шкалы — --etp-title (1.0625rem на мобильных, разница ~1px) */
        font-weight:700;
        text-wrap:wrap;
    }

    /* --- .navbar-subnav-popup: снова обычный блок в потоке документа, а
       не всплывающая по hover панель. Итоговое состояние (всегда видимая
       панель) совпадает с тем, что вендор даёт на hover/is-subnav-open —
       поэтому эти триггеры отдельно перебивать не нужно. */
    .navbar-subnav-popup{
        left:auto;
        opacity:1;
        padding-top:0;
        position:static;
        top:auto;
        transform:none;
        visibility:visible;
        width:auto;
        z-index:auto;
    }
    .navbar-nav > .nav-item:nth-child(4) .navbar-subnav-popup{width:auto}

    /* --- .navbar-subnav / .navbar-subsubnav: мобильные размеры и рамка
       вместо белой карточки с тенью (та — часть десктопного попапа). */
    .navbar-subnav{
        background-color:transparent;
        border:1px solid #eaebef;
        border-radius:.375rem; /* design_lint: вендор даёт .625rem, вне допустимого набора — ближайшее разрешённое значение */
        box-shadow:none;
        margin-top:.75rem;
        padding:.8125rem 1.125rem;
    }
    .navbar-subnav > .nav-item{font-size:var(--etp-note)} /* design_lint: .875rem вендора = ровно --etp-note на мобильных */
    .navbar-subnav > .nav-item + .nav-item{margin-top:.625rem}
    .navbar-subnav > .nav-item > .nav-link .icon-arrow-down-thin{
        height:.3125rem;
        margin-left:.125rem;
        width:.5rem;
    }
    .navbar-subnav > .nav-item.has-subsubnav.is-subsubnav-open .navbar-subsubnav{
        margin-bottom:.75rem;
        margin-top:.75rem;
        max-height:25rem;
    }
    .navbar-subsubnav{
        margin-top:.75rem;
        padding-right:2.5rem;
    }
    .navbar-subsubnav > .nav-item{
        font-size:var(--etp-note); /* design_lint: вендор даёт .75rem, мельче любой роли шкалы — берём ближайшую (--etp-note) */
        padding-left:.4375rem;
    }
    .navbar-subsubnav > .nav-item + .nav-item{margin-top:.625rem}
}

/* ≥1200 (телефон видим): между пунктом «Контакты» и телефонным блоком не
   было отступа — слипались (скрин пользователя 19.08). */
@media (min-width:1200px){
    .navbar .navbar-contacts{margin-inline-start:clamp(1.5rem, 2.5vw, 3.5rem)}
}

/* Бургер-оверлей (<1200px, было <1000px до правки 19.08 «убрать компромисс
   со скрытием телефона» — см. блок "БУРГЕР-МЕНЮ ДО 1200px" выше): телефон и
   «Задайте вопрос» недоступны в десктопном виде шапки вовсе (правка 19.08) —
   блок .navbar-mobile-contacts добавлен в navbar.php в начало #navigation,
   виден только в оверлее (d-lg-none). !important на display — на полосе
   1000-1199.98 бутстраповская утилита d-lg-none той же !important-силы
   иначе перебивает это правило (см. main.css строка 1, @media
   min-width:1000px). */
@media (max-width:1199.98px){
    .navbar-mobile-contacts{
        align-items:flex-start;
        display:flex!important;
        flex-direction:column;
        gap:1rem;
        margin:0 0 2rem;
        /* левая линия — как у логотипа оверлея (замер 19.08: 36px@600 →
           46px@999, ниже 576px — 20px, см. override ниже) */
        padding-inline:clamp(1.25rem, 1.3rem + 2.5vw, 2.875rem);
    }
    .navbar-mobile-contacts .navbar-mobile-phone{
        color:#1f2933;
        display:block;
        font-size:var(--etp-title);
        font-weight:700;
        text-decoration:none;
    }
    .navbar-mobile-contacts .navbar-mobile-phone span{
        color:#5a6572;
        display:block;
        font-size:var(--etp-note);
        font-weight:400;
        margin-bottom:.25rem;
    }
    .navbar-mobile-question{
        background:#5fb9bd;
        border-radius:2.5em;
        color:#fff;
        display:inline-block;
        font-size:var(--etp-note);
        font-weight:700;
        padding:.55rem 1.5rem;
        text-decoration:none;
    }
    .navbar-mobile-question:hover,
    .navbar-mobile-question:focus-visible{background:#519da1;color:#fff}
}
@media (max-width:575.98px){
    .navbar-mobile-contacts{padding-inline:1.25rem}
}

/* ══════════════════════════════════════════════════════════════════════
   /about/services/bells/ — правки заказчика 19.08.2026 (задача "правки
   заказчика, Направления деятельности и Колокола").
   ══════════════════════════════════════════════════════════════════════
   1. Заголовок страницы «Раздельный сбор пластика и стекла в колокола»
      (44 символа) переносился на две строки — у .page-heading НАМЕРЕННО
      узкая лесенка max-width (27rem/32.4rem/45rem на реальных вендорских
      порогах 768/1000/3000px — держит короткие заголовки вроде
      «Региональный оператор» центрированными по ширине текста, а не
      растянутыми на всю страницу; см. точно такой же по духу модификатор
      .page-heading--contracts чуть выше в этом файле, «Прямые договоры»
      этой же датой). Кегль здесь НЕ трогаем (общей --etp-* шкалы у
      .page-heading нет, лесенка вендора та же 1.875/2.25/3.125rem) —
      только раздвигаем колонку под ЭТОТ конкретный заголовок, тем же
      приёмом, что и .page-heading--contracts.

      Замер (JS, getBoundingClientRect на реальной странице,
      white-space:nowrap): натуральная ширина заголовка в одну строку —
      624.9px при 30px (тир 768px), 749.9px при 36px (тир 1000px),
      1041.6px при 50px (тир 3000px, практически недостижим — контейнер
      сайта капается на 1440px, см. DESIGN.md «Сетка», такая ширина
      viewport на реальных мониторах не встречается, тир добавлен только
      для полноты списка). Значения ниже — с запасом, но не шире доступной
      колонки .section--inner на нижней границе тира (629.9px на 768px,
      808px на 1000px).
   2. Статистика во вкладке «Статистика» (.bells-data): год и цифры
      одного цвета у всех периодов — так уже было в вёрстке подрядчика
      (#a1c778, зелёный вторичный, см. DESIGN.md «Цвет»). Правка клиента —
      выделить ТЕКУЩИЙ период («За 6 месяцев 2026 года») акцентным
      бирюзовым (#5fb9bd — «активные вкладки, ссылки, иконки, акценты»).
      Класс .bells-data-item--current ставит шаблон по наличию "2026" в
      подписи периода (about-bells.php), не хардкодом позиции строки.
   ══════════════════════════════════════════════════════════════════════ */
.page-heading--bells{max-width:none}
@media (min-width:768px){
    .page-heading--bells{max-width:40rem}
}
@media (min-width:1000px){
    .page-heading--bells{max-width:50rem}
}
@media (min-width:3000px){
    .page-heading--bells{max-width:67rem}
}

.bells-data-item--current .bells-data-item__cell--year{background-color:#5fb9bd}
.bells-data-item--current .bells-data-value{color:#5fb9bd}

/* ─────────────────────────────────────────────────────────────────────────
   Карточки списка вакансий (правка 19.08, «дыра» в карточке): вендорский
   .vacancies-item__title{flex-grow:1} растягивал заголовок на всю свободную
   высоту flex-колонки — при одной строке заголовка под ним повисала пустота
   до списка обязанностей. Заголовок больше не тянется; вниз прижимается
   «Подробнее…» через margin-top:auto; список идёт сразу под заголовком. */
.vacancies-item__title{flex-grow:0}
/* Иерархия кеглей была перевёрнута: заголовок карточки (вендор 1.125-1.25rem
   капсом) выходил МЕЛЬЧЕ текста списка (~21.6px). Заголовок — токен
   заголовков, список в карточке — токен подписи. */
.vacancies-item__title{font-size:var(--etp-title)}
.vacancies-item .diamond-list,
.vacancies-item .diamond-list li{font-size:var(--etp-note)}
.vacancies-item__responsibilities{margin-bottom:1rem}
.vacancies-item__responsibilities-label{
    color:#5a6572;
    font-size:var(--etp-note);
    margin-bottom:.5rem;
}
.vacancies-item__more{margin-top:auto}

/* Виджет экскурсий в календаре экоцентра (правка 19.08): текст правой
   колонки прижимался к верхней границе плашки — у .education-offer__body
   внутри виджета не было вертикальных отступов. */
.ecocenter-calendar__excursion .education-offer__body{padding-block:1.5rem}

/* Стык влитого контента «Сложных вопросов» на вкладке РНО (правка 19.08):
   аккордеон FAQ прилипал к следующему блоку-схеме (зазор 20px против
   секционного ритма страницы) — после слияния вкладок стык остался сырым. */
#education-rno-tab-pane .education-faq + .eco-flow,
#education-rno-tab-pane .education-faq + .eco-scheme,
#education-rno-tab-pane .eco-flow + .education-faq{margin-top:3rem}

/* Карточки «Направлений деятельности» — карточка целиком ссылка (правка
   19.08): контентная ссылка «Подробнее…» скрыта шаблоном, вместо неё
   стрелка; кликабельна вся карточка (absolute-ссылка поверх). */
.areas-item{position:relative}
.areas-item__link{inset:0;position:absolute;z-index:1}
.areas-item__more{color:#5fb9bd;margin-top:1rem}
.areas-item:hover .areas-item__more{color:#519da1}

/* Статистика колоколов (правка 19.08, вторая итерация): вендор красил
   плашки лет и цифры через :nth-child(2n) — годы выходили вперемешку
   бирюзовыми и зелёными. Все годы и значения одним цветом (зелёный),
   выделяется только текущий 2026 (бирюзовый) через --current. */
.bells-data-item:nth-child(2n) .bells-data-item__cell--year{background-color:#a1c778}
.bells-data-item:nth-child(2n) .bells-data-value{color:#1f2933}
.bells-data-value{color:#1f2933}
.bells-data-item--current .bells-data-item__cell--year{background-color:#5fb9bd}
.bells-data-item--current .bells-data-value{color:#5fb9bd}
.bells-intro-grid{margin-top:2.5rem}

/* Семь маркировок пластика карточками (правка 19.08): раньше нумерованный
   список абзацами во всю ширину — «слишком много голого текста». Разметка —
   templates/about-bells.php, $renderMarkingPane. */
.bells-marking-grid{
    display:grid;
    gap:1rem;
    /* ОДНА колонка на телефоне (правка клиента 24.08.2026). Двумя колонками
       на 375px карточка получала ~150px под текст, и длинные термины рвались
       по слогам посреди слова («полиэтилентере/фталат», «поливинилхлор/ид») —
       перенос там разрешён overflow-wrap:anywhere, без него слово просто
       вылезало бы за рамку. В одну колонку те же слова встают целиком. */
    grid-template-columns:minmax(0,1fr);
    list-style:none;
    margin:1.5rem 0 0;
    padding:0;
}
@media (min-width:560px){
    .bells-marking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
    .bells-marking-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1200px){
    .bells-marking-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.bells-marking-card{
    background-color:#fff;
    border:1px solid #c1c4c7;
    border-radius:var(--etp-card-radius);
    padding:1.125rem 1.25rem 1.25rem;
}
.bells-marking-card__head{
    align-items:center;
    display:flex;
    gap:.75rem;
    margin-bottom:.625rem;
}
.bells-marking-card__icon{height:2.75rem;width:auto}
.bells-marking-card__code{
    color:#5a6572;
    display:block;
    font-size:var(--etp-fineprint);
    line-height:1.2;
}
.bells-marking-card__abbr{
    color:#1f2933;
    display:block;
    font-size:var(--etp-title);
    font-weight:700;
    line-height:1.2;
}
.bells-marking-card__full{
    color:#5a6572;
    display:block;
    font-size:var(--etp-fineprint);
    line-height:1.25;
    margin-top:.125rem;
}
.bells-marking-card__text{
    color:#1f2933;
    font-size:var(--etp-note);
    margin:0;
}
.bells-marking-card,
.bells-marking-card *{overflow-wrap:anywhere}

/* ────────────────────────────────────────────────────────────────────
   КАРТОЧКА МАРКИРОВКИ: ТРИ ЯРУСА ОДИНАКОВОЙ ВЫСОТЫ
   (правка клиента 24.08.2026 — «может как-то поаккуратнее заверстать?»)

   Было: код, аббревиатура и расшифровка шли одной колонкой внутри
   шапки, рядом с иконкой. Расшифровка у разных маркировок от одной
   строки до пяти, поэтому шапки в ряду выходили разной высоты, а
   описания начинались на разных уровнях — семь карточек читались как
   рваная лесенка.

   Стало: карточка — колонка из трёх ярусов, общих для всех семи.
   1) шапка: иконка и рядом номер + аббревиатура, по центру по
      вертикали, с общей минимальной высотой в две строки аббревиатуры —
      дальше карточки выравниваются друг с другом, а не по длине своего
      заголовка;
   2) расшифровка — свой блок под шапкой, мелкая и серая, как была;
   3) описание — отделено тонкой линией и прижато к низу (margin-top
      auto), поэтому у карточек одного ряда общая нижняя граница текста.

   Ширины колонок и рамка не трогались: сетка та же (2/3/4 колонки по
   брейкпоинтам), поменялась только внутренняя раскладка.
   ──────────────────────────────────────────────────────────────────── */
.bells-marking-card{display:flex;flex-direction:column}
.bells-marking-card__head{align-items:center;margin-bottom:.5rem;min-height:2.75rem}
.bells-marking-card__title{min-width:0}
.bells-marking-card__full{
    color:#5a6572;
    font-size:var(--etp-fineprint);
    line-height:1.3;
    /* Две строки — столько занимает расшифровка у пяти маркировок из семи
       («ПЭТ, ПЭТФ — полиэтилентерефталат»). Короткие подтягиваются до этой
       высоты, длинная (ПЭНД, три строки) её перерастает — линия под ней
       съезжает на строку, и это единственное расхождение в ряду. */
    margin:0 0 .75rem;
    min-height:calc(2 * 1.3em);
}
.bells-marking-card__text{
    /* Описание идёт сразу за расшифровкой, а не прижимается к низу
       карточки: прижатое, оно оставляло у коротких карточек («Пакеты и
       пленка») дыру во весь рост. Общую нижнюю границу ряду даёт рамка
       карточки, а не текст. */
    border-top:1px solid #e3e6e8;
    padding-top:.75rem;
}

/* Телефоны горячей линии колоколов — текст вместо кнопок (правка 19.08). */
.bells-contacts__phone{
    color:#1f2933;
    display:inline-block;
    font-size:var(--etp-title);
    font-weight:700;
    margin-right:1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   ЗАГОЛОВКИ H1 В ОДНУ СТРОКУ (правка клиента 19.08.2026, три пункта docx:
   полигоны, ртутные лампы, брошенные ТС — «название сделать в одну строчку»).
   Причина переносов одна на весь сайт: вендор держит .page-heading в узкой
   колонке (27/32.4/45rem по брейкпоинтам) — «Транспортирование ртутных ламп»
   в 45rem не помещается. Точечные модификаторы под каждую страницу
   (--contracts, --bells) плодить дальше нельзя: тех же правок в docx три, а
   длинных заголовков на сайте больше. Расширяем ГЛОБАЛЬНО до ширины
   контентной колонки — центрирование, кегль и отступы вендора сохраняются,
   короткие заголовки визуально не меняются (они и так уже́ в одну строку). */
.page-heading{max-width:min(100%, 62rem)}
@media (min-width:768px){ .page-heading{max-width:min(100%, 46rem)} }
@media (min-width:1000px){ .page-heading{max-width:min(100%, 56rem)} }
@media (min-width:1400px){ .page-heading{max-width:min(100%, 68rem)} }

/* Страницы направлений: текст шире (правка клиента 19.08 — «текст
   максимально выровнять по правой стороне, чтобы не было много воздуха
   справа»). Общий лимит 75ch (мера читаемости) оставлен новостям и
   прочим длинным материалам; здесь абзацы короткие — 1-3 предложения,
   и обрыв строки на середине колонки выглядел дырой. Ограничение
   ширины колонки всё равно держит .content. */

/* Текст внутри рамки документов — во всю ширину плашки: общий лимит 75ch
   вместе с внутренними отступами рамки заметно сужал колонку (правка
   19.08). Абзацы тут короткие, «простыни» не будет. */

/* Карточка «Остались вопросы?» — шестая ячейка сетки территориальных
   управлений (правка 19.08): форма и рамка как у плашек ТУ, подложка —
   фирменный полупрозрачный градиент (тот же приём, что у карточек
   вакансий: зелёный → бирюзовый на 20% прозрачности). */
.regional-territory--ask{
    align-items:flex-start;
    /* сетка выравнивает плашки по контенту (align-items:start), а в этой
       карточке текста меньше — растягиваем на высоту строки, чтобы она была
       ростом с соседями (правка 19.08) */
    align-self:stretch;
    background-image:linear-gradient(135deg, rgba(161,199,120,.22) -5%, rgba(95,185,189,.22) 110%);
    display:flex;
    flex-direction:column;
    gap:.5rem;
    /* заголовок — на той же линии, что заголовки соседних плашек: контент
       от верха, кнопка прижата книзу (правка 19.08) */
    justify-content:flex-start;
    padding:1.125rem;
}
.regional-territory--ask .feedback-teaser__button{margin-top:auto}
.regional-territory--ask .feedback-teaser__button{align-self:flex-start}

/* ─────────────────────────────────────────────────────────────────────────
   ЭКОЦЕНТРЫ: две карточки рядом (правка клиента 19.08.2026 — «сделать меньше
   фото, добавить второй экоцентр, возможно поставить их рядом, ниже адрес и
   часы»). Данные — structure «Адреса экоцентров», разметка —
   templates/regop-ecocenter.php. */
.ecocenter-centers{
    display:grid;
    gap:1.25rem;
    grid-template-columns:1fr;
    margin-bottom:1.5rem;
}
@media (min-width:768px){
    .ecocenter-centers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ecocenter-center{
    background-color:#fff;
    border:1px solid #e3e6e8;
    border-radius:1.25rem;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.ecocenter-center__photo{position:relative}
.ecocenter-center__photo img{aspect-ratio:16/10;display:block;height:auto;object-fit:cover;width:100%}
.ecocenter-center__body{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:.625rem;
    padding:1.125rem 1.25rem 1.25rem;
}
.ecocenter-center__name{
    font-size:var(--etp-title);
    font-weight:700;
    margin:0;
}
.ecocenter-center__row{
    align-items:flex-start;
    display:flex;
    font-size:var(--etp-text);
    gap:.625rem;
    margin:0;
}
.ecocenter-center__row .icon{color:#5fb9bd;flex:none;margin-top:.15em}
.ecocenter-center__link{align-self:flex-start;margin-top:auto}
.ecocenter-allday{
    align-items:center;
    font-size:var(--etp-text);
    background-color:#f4f5f2;
    border-radius:1.25rem;
    display:flex;
    gap:.75rem;
    justify-content:center;
    padding:1rem 1.25rem;
    text-align:center;
}
.ecocenter-allday .icon{color:#5fb9bd;flex:none}
.ecocenter-allday p{font-size:var(--etp-text);margin:0}


/* Вводные абзацы раздела «Информация» (.info-lead) держались в колонке
   777px при ширине контента 1244px — текст обрывался на середине страницы
   и справа зияла пустота (жалоба клиента 19.08.2026, тот же класс дефекта,
   что чинили в направлениях и экопросвещении). Ширину держит .content. */
.info-lead{max-width:none}

/* Вкладка «Дополнительно» в противодействии коррупции (правка клиента
   19.08.2026). Вендор задаёт сетке колонки `auto 100%`: вторая колонка
   забирает всю ширину, первой достаётся остаток — 318px, и заголовок
   «Дополнительная информация» переносится на две строки. Отдаём первой
   колонке ширину по содержимому, второй — остаток. */
@media (min-width:1000px){
    .docs-sections--more{grid-template-columns:max-content minmax(0, 1fr)}
}
/* Телефоны рядом с почтой-пилюлей набраны 16px против 23px основного
   текста — выравниваем по шкале (та же жалоба «телефоны мелким»). */
.corruption-contacts-item__body{font-size:var(--etp-text)}
.corruption-contacts-item__body span{font-size:var(--etp-text)}

/* Списки кнопок-годов (.docs-list) вендор держит в 630px, хотя колонка
   1244px: кнопки переносились на четвёртой, справа оставалось пустое
   место (правка клиента 19.08.2026 — «почему кнопки обрываются»). */
.docs-list{max-width:none}
/* Вендор даёт пунктам списка процентную ширину (по 4 в ряд от 630px) —
   на полной ширине это растянуло бы кнопки-годы через всю строку с
   огромными промежутками. Ширина по содержимому: кнопки идут подряд. */
.docs-list > li,
.docs-list > .nav-item{width:auto}


/* Карточка документа (.doc-card — лицензия, политика ПДн и т.п.) висела в
   46rem при колонке 1244px и читалась как «прижата к левому краю» (правка
   клиента 19.08.2026). Ширину держит колонка контента. */
.doc-card{max-width:none}

/* Абзацы карточки документа на всю ширину рвались с висячим словом на
   отдельной строке («…и Калужской / области»). text-wrap:pretty
   перераспределяет строки так, чтобы последняя не оставалась одиноким
   словом; в браузерах без поддержки просто игнорируется. */
.doc-card__body p,
.doc-card__title{text-wrap:pretty}

/* ─────────────────────────────────────────────────────────────────────────
   ХЛЕБНЫЕ КРОШКИ в шапке контента (правка клиента 20.08.2026 — вместо
   слогана «Региональный оператор по обращению с ТКО в Москве»).
   Разметка — snippets/content-heading.php, зовут 43 шаблона. */
.content-breadcrumbs{display:none}
@media (min-width:768px){
    .content-breadcrumbs{display:block}
}
.content-breadcrumbs__list{
    color:#5a6572;
    display:flex;
    flex-wrap:wrap;
    font-size:var(--etp-note);
    gap:.25rem .5rem;
    list-style:none;
    margin:0;
    padding:0;
}
.content-breadcrumbs__item{align-items:center;display:flex;gap:.5rem}
.content-breadcrumbs__item + .content-breadcrumbs__item::before{
    color:#c1c4c7;
    content:"/";
}
.content-breadcrumbs__item a{color:#5a6572;text-decoration:none}
.content-breadcrumbs__item a:hover,
.content-breadcrumbs__item a:focus-visible{color:#519da1;text-decoration:underline}
.content-breadcrumbs__item [aria-current="page"]{color:#1f2933}

/* Единый вид карточек новостей: фото слева у всех (правка клиента 19.08).
   Вендор чередует стороны правилом .press-news-item:nth-child(odd)
   {flex-direction:row-reverse} в минифицированном бандле — трогать его
   нельзя (правило проекта), поэтому чередование гасится здесь: одна и та
   же сторона задаётся всем карточкам, а не через nth-child. */
.press-news-item{flex-direction:row-reverse}
.press-news-item:nth-child(odd){flex-direction:row-reverse}

/* Тёмная подложка под белым логотипом (правка 19.08): на белом фоне
   карточки он не виден. Модификатор ставит templates/press-logos.php по
   имени файла (-white). Правило живёт здесь, а не в бандле подрядчика.

   ЦВЕТ ПОДЛОЖКИ — ФИРМЕННЫЙ ЗЕЛЁНЫЙ ЗНАКА, #0e923a (правка клиента
   24.08.2026: «фон надо поменять, на такой же зеленый как у лого»).
   Бирюзовый #5fb9bd был взят как «просто тёмный фон, на котором видно
   белое», и рядом с зелёным кубиком в соседней карточке читался как
   второй фирменный цвет, которого у знака нет. #0e923a — это заливка
   самого логотипа (content/press/0_logos/ecotehprom-logo-green.svg) и
   фавикона сайта, в таблице цветов DESIGN.md его нет: цвет знака, а не
   цвет интерфейса, и живёт он ровно в одном правиле — подложке превью
   логотипа. Расширять им палитру нельзя. */
.logos-item__preview--dark{background-color:#0e923a}
.logos-item__preview--light{background-color:#f4f5f2}

/* Строка «Скачать <файл>» над списком, который из этого файла и собран
   (правка клиента 20.08.2026). Два места: реестр МКД на «Прямых
   договорах» (там это ещё и требование закона — реестр обязан висеть
   файлом, а не только таблицей) и перечень точек «колокол».

   Смысл ссылки — не «вот вам документ», а ИСТОЧНИК ДЛЯ ПРАВКИ: заказчик
   скачивает с сайта заведомо актуальную версию, правит её руками и
   заливает обратно через вкладку «Загрузка данных» в панели. Поэтому она
   стоит над списком и набрана обычным текстом, а не спрятана в подпись.

   Без класса design_lint валит гейт: голый <p> внутри .section--inner
   берёт немасштабируемый умолчательный кегль браузера вместо
   var(--etp-text) (tools/design_lint.py, check_bare_text). .registry-note
   не подошёл — он серый и на шкале --etp-note, то есть мельче обычного
   текста. Сам вид ссылки задаёт .doc-inline-link (чёрный текст +
   стрелка), своего font-size у него нет намеренно — кегль от абзаца. */
.doc-download-line{font-size:var(--etp-text);line-height:1.4;margin:0 0 1rem}
/* Цвет — как у ВСЕХ остальных ссылок на документы (правка клиента
   13.08.2026: «подсвечивать ссылку в тексте не модно»; чёрный текст,
   бирюзовая стрелка, цвет только при наведении и по фокусу). Замер на
   проде 20.08.2026 показал, что без этой строки ссылка выходила
   #5fb9bd целиком, тогда как список адресов прямо под ней — чёрный:
   на одной странице два разных вида одной и той же сущности. Правило
   перечислено с контекстом по той же причине, что и соседние (см.
   докблок .doc-inline-link выше): вложенные ссылки красят правила
   контейнеров, одиночный класс их не перебивает. */
.doc-download-line a.doc-inline-link{color:inherit;text-decoration:none}
.doc-download-line a.doc-inline-link:hover,
.doc-download-line a.doc-inline-link:focus-visible{color:#5fb9bd}

/* ─────────────────────────────────────────────────────────────────────────
   «Колокола» → вкладка «Что принимается» (правки клиента 20.08.2026)
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Воздух под сеткой из семи маркировок пластика.
   Секция маркировок — <section class="bells-marking-description">, у неё,
   в отличие от соседних .bells-section, нижнего отступа не было вообще:
   заголовок следующего блока («Раздельное накопление вторичных
   материальных ресурсов») упирался в нижний край карточек. Значения — те
   же, что у .bells-section, чтобы ритм страницы остался одинаковым. */
.bells-marking-description{margin-bottom:2.5rem}
@media (min-width:3000px){
    .bells-marking-description{margin-bottom:3.125rem}
}

/* Правый отступ секции (3.75rem с 1000px, 5rem на широких — в свёрнутой
   части файла) остался от нумерованного списка абзацами, где он держал
   длину строки. После перехода на карточки (19.08) он только сужал сетку:
   ряд маркировок выходил на 60px уже блоков ниже (вопрос 16.09.2026). */
.bells-marking-description{margin-right:0}

/* 2. Фото рядом с телефонами горячей линии.
   .bells-contacts — грид «колонка картинки | карточка текста»; картинка
   ложилась по своей натуральной высоте (400×319) и висела у верхнего края,
   а под ней оставалась дыра высотой в треть карточки. Растягиваем по
   высоте ряда с object-fit:cover — кадрируется, а не плющится. Только от
   768px: ниже блок идёт в одну колонку, там высота задаётся потоком. */
@media (min-width:768px){
    .bells-contacts__image{display:flex}
    .bells-contacts__image img{height:100%;object-fit:cover;width:100%}
}

/* ─────────────────────────────────────────────────────────────────────────
   ВАКАНСИИ — переверстка 20.08.2026 (вариант 1 из мокапа, согласован
   клиентом). Контент не менялся ни на страницу-список, ни на страницу
   вакансии: правится только раскладка.
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Плашка «Отдел кадров» — полоса во всю ширину под карточками.
   Была третьей ячейкой .vacancies-grid: занимала половину ряда (на
   десктопе треть), справа и снизу от неё оставалась пустота высотой
   с карточку вакансии. Разметка та же, добавлен модификатор --bar. */
.vacancies-item--bar{
    align-items:center;
    flex-direction:row;
    flex-wrap:wrap;
    gap:.875rem 1.5rem;
    grid-column:1/-1;
    justify-content:space-between;
    min-height:0;
    padding:1.25rem 1.75rem;
}
.vacancies-item--bar .vacancies-item__title{
    flex-grow:0;
    margin-bottom:0;
}
.vacancies-item--bar .vacancies-item__contacts{align-items:center}
.vacancies-item--bar .vacancies-item__descr{margin-bottom:0}

/* 2. Страница вакансии: заголовки секций по левому краю своих списков.
   .vacancies-single__section h3 носил padding-left 3–3.375rem от вендора,
   тогда как маркеры .diamond-list начинаются от нуля — «Обязанности:» и
   «Мы ожидаем:» стояли с произвольным сдвигом вправо относительно
   собственных пунктов. */
.vacancies-single__section h3{padding-left:0}

/* 3. Текст вакансии на всю ширину карточки.
   padding-right у __main держал место под абсолютно спозиционированные
   контакты вакансии (.vacancies-single__contacts) — их на странице нет с
   19.08.2026, а резерв в 26.25rem остался и рубил строки обязанностей
   примерно на двух третях ширины. */
.vacancies-single__main{padding-right:0}

/* 4. Нижний ряд страницы вакансии: соседняя вакансия + отдел кадров.
   Свой контейнер из двух равных колонок вместо ячеек .vacancies-grid,
   ширина которых зависела от числа колонок раздела (2 или 3). */
.vacancies-bottom{
    display:grid;
    gap:1.5rem;
    grid-template-columns:100%;
    margin-top:1.5rem;
}
@media (min-width:768px){
    .vacancies-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:3000px){
    .vacancies-bottom{gap:2rem;margin-top:2rem}
}
.vacancies-bottom .vacancies-item--flat{justify-content:center}

/* ═══════════════════════════════════════════════════════════════════════
   ПАГИНАЦИЯ ГАЛЕРЕИ — точки вместо частокола тире (правка клиента
   20.08.2026).

   БЫЛО: вендор рисовал на каждый слайд чёрное тире 28×2. В галерее на
   главной 14 фотографий — 14 чёрных штрихов в ряд, самый тёмный элемент
   страницы, и по нему не прочитать ни позицию, ни остаток.

   СТАЛО: точки 6px, активная — бирюзовая капсула. Весь ряд из 14 точек
   занимает около 190px вместо 470px тире, а число точек по-прежнему
   равно числу фотографий: ничего не прячется и не «снимается» при
   переходе на восьмой снимок.

   ПОЧЕМУ НЕ dynamicBullets. Пробовали динамический режим Swiper (не
   больше пяти точек в кадре, дальние уезжают за обрезку) — отказались:
   ленту он двигает свойством left у каждого буллета, пересчитывая сдвиг
   от внутреннего счётчика шагов, и на прыжке через несколько позиций
   (клик по крайней точке, переход с зацикливанием) активная точка
   оказывалась за левым краем контейнера — подсветка пропадала совсем.
   ═══════════════════════════════════════════════════════════════════════ */
.gallery-slider .swiper-pagination{
    align-items:center;
    -moz-column-gap:.5rem;
    column-gap:.5rem;
    height:auto;
}
.gallery-slider .swiper-pagination-bullet{
    align-items:center;
    display:flex;
    height:.375rem;
    width:.375rem;
}
.gallery-slider .swiper-pagination-bullet::after{
    background-color:rgba(31,41,51,.28);
    /* Радиус в rem, а не в em: у .swiper-pagination стоит font-size:0
       (вендор прячет так текстовые узлы), и «капсула» в 2.5em считалась
       от нуля — точки выходили квадратными. .25rem при высоте .375rem
       браузер сам ужимает до половины высоты: круг у точки, капсула у
       активного. */
    border-radius:.25rem;
    height:100%;
    transition:background-color .3s cubic-bezier(.33, 1, .68, 1);
    width:100%;
}
.gallery-slider .swiper-pagination-bullet-active{width:1rem}
.gallery-slider .swiper-pagination-bullet-active::after{background-color:#5fb9bd}

/* Мобильная тач-цель. Общее правило раздела «МОБИЛЬНЫЕ ТАЧ-ЦЕЛИ» выше
   даёт буллету min-width 2.75rem — четырнадцать таких точек не помещаются
   в экран. Высоту под палец оставляем, ширину держим своей; фон рисуется
   по content-box, поэтому точка не растёт вместе с зоной нажатия. */
@media (max-width:767.98px){
    .gallery-slider .swiper-pagination{-moz-column-gap:.375rem;column-gap:.375rem}
    .gallery-slider .swiper-pagination-bullet{
        height:2.75rem;
        min-width:0;
        padding-block:1.1875rem;
        width:.375rem;
    }
    .gallery-slider .swiper-pagination-bullet-active{width:1rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   ВАКАНСИИ — типографика по шкале сайта (правка клиента 20.08.2026,
   вариант A из мокапа).

   ПОЧЕМУ РАЗДЕЛ ВЫБИВАЛСЯ. Две причины, обе от вендора:

   1. font-weight:500. В PT Sans на сайте два начертания, 400 и 700
      (DESIGN.md, «Шрифт»). Пятисотого в файлах нет — браузер берёт
      обычный, и «СПЕЦИАЛИСТ КОНТРОЛЬНО-ЛИНЕЙНОГО ОТДЕЛА», «Обязанности:»
      выглядели набранными тем же весом, что и текст под ними: заголовок
      переставал читаться как заголовок.

   2. Свои кегли мимо шкалы: 1.4375rem у названия вакансии, 1.375rem у
      подзаголовков, 1.1875rem у пунктов. Остальной сайт живёт на ролях
      --etp-*, поэтому на каждой ширине раздел расходился с соседями.

   Роли назначены по DESIGN.md («Заголовки внутренних страниц — роль по
   тегу»): название вакансии — h2, то есть --etp-accent; подзаголовки
   секций — h3, то есть --etp-title; перечисления — --etp-note, роль
   подписей и списков.

   РАЗДЕЛИТЕЛИ — ровно два на страницу и один в карточке, цветом
   #e3e6e8 из таблицы «Цвет». Внешнюю рамку вокруг блока вакансии не
   добавляем сознательно: рамок в разделе и так хватает.
   ═══════════════════════════════════════════════════════════════════════ */
.vacancies-single__title{
    border-bottom:1px solid #e3e6e8;
    font-size:var(--etp-accent);
    font-weight:700;
    line-height:1.2;
    margin-bottom:1.5rem;
    padding-bottom:1rem;
}
.vacancies-single__section h3{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:.75rem;
}
.vacancies-single__section .diamond-list,
.vacancies-single__section .diamond-list li,
.vacancies-single__section .gradient-list,
.vacancies-single__section .gradient-list li{font-size:var(--etp-note)}

/* Разделитель между обязанностями и парой колонок «ожидаем/предлагаем».
   Тот же приём, что у .regop-card__row + .regop-card__row: линия рисуется
   на блоке-соседе, а не отдельным элементом разметки. */
.vacancies-single__cols{
    border-top:1px solid #e3e6e8;
    padding-top:1.5rem;
}

/* Карточка вакансии в списке: заголовок болдом и линия под ним.
   :not(--flat) — чтобы линия не появилась под названием плашки «Отдел
   кадров»: она свёрстана теми же классами, но заголовок там стоит в одну
   строку с контактами. */
.vacancies-item__title{font-weight:700}
.vacancies-item:not(.vacancies-item--flat) > .vacancies-item__title{
    border-bottom:1px solid rgba(31,41,51,.12);
    margin-bottom:.875rem;
    padding-bottom:.75rem;
}




/* ══════════════════════════════════════════════════════════════════════
   ПОДЗАГОЛОВКИ И СПИСКИ ВНУТРИ ТЕКСТА СТАТЬИ (2026-08-21)

   Новости перенесены со старого сайта одной простынёй абзацев: подзаголовки
   разделов внутри статьи хранились обычным <p>, списки — цепочкой абзацев с
   ведущим тире. Контент приведён к блокам «Подзаголовок» и маркированным
   спискам writer-поля (tools/format_press_news.py), но оформить их было
   нечем: у подрядчика в .article-body описан ТОЛЬКО h2 — кегль 2rem и
   text-align:center, то есть роль «заголовок-врезка по центру», а не
   подзаголовок раздела; h3/h4 и маркеры списков не описаны вовсе, поэтому
   h3 рисовался браузерным дефолтом и слипался со следующим абзацем.

   Кегли — по ролям DESIGN.md («Заголовки внутренних страниц — роль по
   тегу»): h3 → --etp-title, h4 → --etp-text. Заголовок самой новости —
   <h2 class="article-heading">, поэтому подзаголовки внутри текста
   начинаются с h3.

   H2 СЮДА НАМЕРЕННО НЕ ВХОДИТ. У подрядчика он в .article-body описан как
   заголовок-врезка (2rem, по центру, обычного начертания) и в этой роли
   уже стоит в живом контенте: «Первомай уходит в онлайн» на
   about/the-trade-union/news-7. Первая версия правила забирала и h2 —
   скриншотный гейт честно поймал сдвиг этой страницы на всех четырёх
   ширинах. Переоформлять чужую вёрстку задача не просила, поэтому h2
   остаётся врезкой подрядчика, а разделы внутри статьи живут на h3/h4.

   `:not([class])` — обязательно. В .article-body живут и вендорские
   элементы со своими классами: .article-games-heading (h2 по центру,
   1.875rem) и .article-games-seats (ul-«пьедестал» с counter и
   list-style:none) на странице профсоюза about/the-trade-union/news-5.
   Селектор «класс + тег» (0,1,1) перебил бы их одиночные классы (0,1,0) и
   разломал бы обе вёрстки. Kirby печатает блок «Подзаголовок» как голый
   <hN> (snippets/blocks/heading.php), а списки writer-поля — как голый
   <ul>/<ol>, поэтому ограничение по отсутствию класса ровно отделяет
   редакторский контент от вендорского.

   Отступы в em (не rem): привязаны к кеглю самого заголовка, поэтому
   воздух над разделом растёт вместе со шкалой на широких экранах.
   Асимметрия 1.6em сверху / 0.5em снизу — заголовок должен принадлежать
   тексту под собой, а не висеть посередине между двумя абзацами. */
.article-body :is(h3,h4):not([class]){font-weight:700;line-height:1.3;text-align:left;margin-block:1.6em .5em}
.article-body h3:not([class]){font-size:var(--etp-title)}
.article-body h4:not([class]){font-size:var(--etp-text)}
.article-body :is(h3,h4):not([class]):first-child{margin-block-start:0}
/* Статья открывается фото «сбоку» (eco-figure--float-*), а за ним сразу
   подзаголовок: по смыслу заголовок первый в тексте, но :first-child его
   уже не ловит, и 1.6em сверху опускают текст ниже верха фото (новость про
   улиток, 18.10.2026). Обнуляем отступ — текст встаёт вровень с фото. */
.article-body > .eco-figure:is(.eco-figure--float-left,.eco-figure--float-right):first-child + :is(h3,h4):not([class]){margin-block-start:0}
/* Фото в тексте (блок eco-image) получает снизу тот же отступ, что абзац:
   сверху воздух дает margin-bottom абзаца, а снизу у .eco-figure был 0,
   и следующий абзац прилипал к фото (новость про форум, 10.11.2026).
   Значения и брейкпоинт — те же, что у .article-body p в начале файла;
   с 768px абзац набран var(--etp-text) (.section--inner p), а фото — шрифтом
   .article-body, поэтому em здесь не годится, считаем от переменной.
   Плавающие фото не трогаем — у них свой отступ в @media ниже. */
.article-body > .eco-figure:not(.eco-figure--float-left,.eco-figure--float-right){margin-bottom:1.286em}
@media (min-width:768px){.article-body > .eco-figure:not(.eco-figure--float-left,.eco-figure--float-right){margin-bottom:calc(var(--etp-text) * 1.52)}}
/* Обложка новости (press-news-item: дата → .article-image → текст): у
   подрядчика .article-image{margin-bottom:1.25rem} перебивает адаптивный
   margin-block, и текст под обложкой стоит ближе, чем абзацы друг к другу.
   Отступ переносим в padding-top текста: em здесь считается от шрифта
   .article-body, а он до 768px совпадает со шрифтом абзаца. */
.article-date + .article-image{margin-bottom:0}
.article-date + .article-image + .article-body{padding-top:1.286em}
@media (min-width:768px){.article-date + .article-image + .article-body{padding-top:calc(var(--etp-text) * 1.52)}}
.article-body :is(ul,ol):not([class]){padding-inline-start:1.5em}
.article-body ul:not([class]){list-style:disc}
.article-body ol:not([class]){list-style:decimal}
.article-body :is(ul,ol):not([class])>li{margin-block-end:.4em}
.article-body :is(ul,ol):not([class])>li>p{margin-block-end:0}

/* Подпись под цитатой. Вендорское `.article blockquote p{margin-bottom:0}`
   (нужное — иначе цитата тянет за собой пустую строку) обнуляет отступ у
   абзаца цитаты, и <footer><cite> с именем спикера прилипает к последней
   строке текста. Отступ ставится не абзацу, а самой подписи — так правило
   не спорит с вендорским и не возвращает воздух внутрь цитаты. */
.article-body blockquote.article-quote>footer{margin-block-start:.75em}

/* ════════════════════════════════════════════════════════════════════════
   ЭКОЦЕНТРЫ: БЛОК БЕЗ ВНЕШНЕЙ РАМКИ (правка клиента 20.08.2026)

   .ecocenter-about — обёртка вводного абзаца, двух карточек экоцентров и
   полосы «Приёмные окна работают круглосуточно». Вендорная рамка обводила
   всё это разом, и внутри неё стояли ещё две карточки со своими рамками:
   рамка в рамке, ровно та же претензия, что и к карточке тарифа на
   «Региональном операторе» (см. .regop-card--flat выше).

   Вместе с рамкой снимаются боковые поля вводного абзаца: они держали
   текст на отступе от границы, а без границы превращались в лишний сдвиг
   относительно карточек под ним. Вертикальные оставлены — они отделяют
   абзац от заголовка и от карточек.
   ════════════════════════════════════════════════════════════════════════ */
.ecocenter-about{
    border:0;
    border-radius:0;
}
.ecocenter-about__quote{padding-inline:0}

/* Маркеры второстепенных списков (.diamond-list--sub / .gradient-list--sub)
   отложены клиентом 21.08.2026 и вынесены целиком в
   archive/siteecotech-bullets-sub-2026-08-21/ (CSS-блок, патч шаблонов,
   инструкция возврата).

   Ни один шаблон и ни один снипет сайта этот модификатор НЕ печатает —
   проверено `grep -rn "list--sub" kirby/site` (0 совпадений) и на живом
   проде (0 совпадений в разметке). Правила удалены как мёртвые, а не
   вместе с работающей вёрсткой: в прод они попали чужим коммитом
   f9bb094c, когда параллельная сессия закоммитила main.css целиком
   вместе с чужой незавершённой правкой, и всё это время были
   недостижимы.

   Возвращать — по README в архиве: CSS и классы в разметке возвращаются
   ОДНОЙ правкой, порознь они бессмысленны. */

/* ════════════════════════════════════════════════════════════════════════
   СПИСКИ КНОПОК-ДОКУМЕНТОВ: ДОТЯНУТЬ ДО КРАЯ КОЛОНКИ
   (правка клиента 21.08.2026 — «опять отступ справа»)

   19.08.2026 у .docs-list уже снимали вендорный max-width: список кнопок
   переносился на четвёртой плитке, а справа оставалась пустая треть
   колонки. Тогда правило сняли только с базового класса, а модификатор
   .docs-sections--records («Протоколы заседания комиссии» на страницах
   «Противодействие коррупции» и «Противодействие терроризму») везёт
   собственный max-width 37.275/44.73/62.125rem по брейкпоинтам — он
   специфичнее и пережил ту правку. Отсюда и повтор жалобы: на соседней
   вкладке «Планы мероприятий» плитки идут во всю ширину, а на
   «Протоколах» обрываются по три в ряд.

   Снимаем ограничение и здесь. Ширину строки задаёт колонка контента, а
   перенос — flex-wrap самого списка.
   ════════════════════════════════════════════════════════════════════════ */
.docs-sections--records .docs-list{max-width:none}

/* ════════════════════════════════════════════════════════════════════════
   ЮРЛИЦА: ПУНКТЫ КАК У ФИЗЛИЦ, БЕЗ ПЛАШЕК «ШАГ N»
   (правка клиента 24.08.2026 — «вписать в прямоугольник и оформить также»)

   Раньше пункты страницы «Юридическим лицам» шли пронумерованными шагами:
   плашка «ШАГ 1», заголовок отдельной строкой, а сама строка документа под
   ним лишалась карточки (правило .regional-info-row:not(:has(__title)) —
   заголовок уже напечатан выше, дублировать его в строке нельзя, а строка
   без заголовка становится прозрачной). Выглядело это иначе, чем соседняя
   страница «Физическим лицам», где каждый документ — белый прямоугольник.

   Теперь пункт из ОДНОЙ строки печатается этой самой строкой .regional-
   info-row с заголовком внутри (снипет regional-info-docs.php), и карточку
   ему даёт уже существующее правило. Отдельная обёртка .regional-info-
   stage остаётся только у сворачиваемого пункта («Типовые формы
   договоров» — четыре описания под одним заголовком): сворачивание
   владелец просил сохранить 21.08.2026, разворачивать их разом он уже
   забраковал. Этой обёртке и нужен вид карточки — значения те же, что у
   .regional-info-row, чтобы оба вида пунктов стояли в одном ряду.
   ════════════════════════════════════════════════════════════════════════ */
.regional-info-stage--card{background-color:#fff;border:1px solid #dce3e4;border-radius:var(--etp-card-radius);padding:1.1rem 1.25rem;transition:border-color .16s ease}
.regional-info-stage--card:hover{border-color:#5fb9bd}
.regional-info-stage--card+.regional-info-stage--card{border-top:1px solid #dce3e4;margin-top:0;padding-top:1.1rem}
.regional-info-stage--card:last-of-type{padding-bottom:1.1rem}
.regional-info-stage--card .regional-info-stage__head{margin-bottom:0}
.regional-info-stage--card .regional-info-stage__body{margin-top:.85rem}

/* ════════════════════════════════════════════════════════════════════════
   КОНТАКТЫ: «ПРИЕМ ОБРАЩЕНИЙ ГРАЖДАН» НАД ТЕЛЕФОНАМИ
   (правка клиента 24.08.2026)

   Заголовок переехал от сетки территориальных управлений к блоку горячих
   линий (templates/company-contacts.php). Вид — тот же, что у заголовка,
   от которого он ушёл (.regional-territories__title): это одна и та же
   роль на странице, разъезжаться им нельзя. Верхний отступ теперь несёт
   заголовок, а не следующий за ним блок телефонов, иначе между ними
   встал бы двойной интервал.
   ════════════════════════════════════════════════════════════════════════ */
.company-reception-title{font-size:var(--etp-title);font-weight:700;line-height:1.28;margin:3.5rem 0 1.125rem}
.company-reception-title+.company-hotlines{margin-top:0}

/* ════════════════════════════════════════════════════════════════════════
   «ДОПОЛНИТЕЛЬНО» НА ПРОТИВОДЕЙСТВИИ КОРРУПЦИИ: РАЗВЕСТИ ДВЕ ГРУППЫ
   (правка клиента 24.08.2026 — «немного отделить друг от друга»)

   Вкладка единственная на сайте, где .docs-sections идёт в ДВЕ колонки
   (grid-template-columns у .docs-sections--more, макет подрядчика). Обе
   группы — «Дополнительная информация» и «Информация о среднемесячной
   заработной плате» — коротки, поэтому вторая начиналась почти вплотную
   к первой и читалась как её продолжение.

   Прижимаем вторую группу к правому краю колонки и увеличиваем зазор:
   тогда между ними явный воздух, и видно, что это два разных списка.
   Внутри группы ничего не переворачивается — текст и пилюли по-прежнему
   идут слева направо, вправо уезжает блок целиком. Ниже 768px грид не
   включается вовсе (там колонка одна), поэтому правило только в медиа.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:768px){
    /* Вторая колонка была задана как `100%` (ширина всего грида), то есть
       вылезала за правый край контейнера — на 768-1000px это видно и без
       правки, просто раньше её содержимое начиналось слева и обрыв уходил
       в пустоту. Ставим ту же формулу, что уже действует с 1000px. */
    .docs-sections--more{grid-template-columns:max-content minmax(0,1fr)}
    /* Вторая группа выровнена ПО ПРАВОМУ КРАЮ целиком — и заголовок, и
       кнопки-плитки под ним (буквально то, о чём просил клиент). Одного
       justify-self мало: он прижимает вправо только внешнюю рамку блока, а
       строка кнопок внутри оставалась прижатой влево, и группа читалась как
       висящая посреди пустого места. Зазор между колонками не увеличиваем —
       правый край сам делает границу видимой. */
    .docs-sections--more>section:last-child{justify-self:end;text-align:right}
    .docs-sections--more>section:last-child .docs-list{justify-content:flex-end}
}

/* ════════════════════════════════════════════════════════════════════════
   ТиНАО: ПОДРАЙОН СВОРАЧИВАЕТСЯ
   (правка клиента 24.08.2026 — «сначала районы, потом по нажатию адреса»)

   Внутри пункта «Троицкий и Новомосковский» лежит 691 адрес восемью
   списками. Раскрытый разом округ читался как простыня, найти нужный
   район глазами было нельзя. Заголовок подрайона стал кнопкой: название,
   число адресов, шеврон — тот же язык, что у аккордеона округов выше и у
   «Вопросов-ответов» на соседних страницах.

   Сам .contracts-group-heading остаётся h4 (заголовок никуда не делся,
   структура документа не поехала), кнопка живёт внутри него и забирает
   типографику родителя. Значения шеврона — из .contracts-item__button,
   чтобы поворот и скорость совпадали с внешним аккордеоном.
   ════════════════════════════════════════════════════════════════════════ */
.contracts-group-toggle{align-items:center;background:none;border:0;box-shadow:none;color:inherit;cursor:pointer;display:flex;font:inherit;gap:.75rem;justify-content:flex-start;line-height:1.3;padding:.35rem 0;text-align:left;width:100%}
.contracts-group-toggle__title{flex:0 1 auto;min-width:0}
.contracts-group-toggle__count{color:#5a6572;flex:none;font-weight:400;margin-left:auto}
.contracts-group-toggle .icon{color:#5fb9bd;flex:none;height:.6em;transition:transform .35s ease;width:1.1em}
.contracts-group-toggle:not(.collapsed) .icon{transform:scaleY(-1)}
.contracts-group-toggle:hover .contracts-group-toggle__title{color:#519da1}
.contracts-group-toggle:focus-visible{outline:2px solid #2a7e82;outline-offset:2px}
.contracts-group-body .contracts-locations{padding-block-start:.35rem;padding-block-end:.75rem}

/* ═══════════════════════════════════════════════════════════════════════
   ЭКОЦЕНТР, вкладка «Мероприятия»: текст перед календарём и две колонки
   (правка клиента 28.08.2026)
   ═══════════════════════════════════════════════════════════════════════
   Три замечания одним заходом — разметка snippets/ecocenter-calendar.php:

   1) Текстовый блок перед календарём (поле section_events_intro, пусто по
      умолчанию — редактор впишет сам). Кегль — var(--etp-text), как у
      остального текста вкладки (.ecocenter-calendar__caption и т.п.).

   2) ГЛАВНОЕ. Календарь и «Запись на экскурсии» встают в две колонки вместо
      одной: было — виджет экскурсии внизу под календарём, и инлайн-скрипт
      прятал его на время открытой карточки дня («„Запись на экскурсии“
      исчезает при открывании мероприятия»). Скрипт убран (см. снипет),
      виджет теперь всегда виден рядом. Брейкпоинт и приём — те же, что у
      .ecocenter-centers/.vacancies-bottom выше по этому же файлу: мобильный
      минимум — одна колонка (grid-template-columns:1fr, порядок в разметке
      уже «сначала календарь, потом запись» — это и есть мобильная
      раскладка), с main.css breakpoint 768px — сетка 1fr 1fr.
      align-items:flex-start держит правую колонку у верха и не даёт ей
      растягиваться по высоте вслед за раскрытой слева карточкой дня —
      именно в этом была жалоба клиента.

   3) Прежний отступ .ecocenter-calendar__excursion (margin-top:1.5rem, см.
      выше в этом файле) был рассчитан на одну колонку — виджет стоял под
      календарём. В сетке отступ между колонками уже даёт `gap`, поэтому
      здесь он обнулён более специфичным селектором (правило каскада —
      не трогаем существующую строку, ограничиваем только внутри новой
      сетки).

   Существующий `.ecocenter-calendar{max-width:20.25rem}` (см. выше,
   @media max-width:767.98px) трогать не пришлось: он и раньше был
   мобильным-only, на desktop сейчас максимальной ширины у контейнера не
   было и не стало — двухколоночная сетка занимает всю ширину родителя,
   как и .ecocenter-centers/.vacancies-bottom. */
.ecocenter-calendar__intro{
    font-size:var(--etp-text);
    margin:.75rem 0 1rem;
    padding:0 1rem;
}
/* Текст-вступление вынесен ЗА серую карточку календаря и стоит над ней
   (правка клиента 09.09.2026). Собственные горизонтальные поля ему
   больше не нужны — он идёт по ширине колонки страницы, как обычный
   абзац секции; вендорский padding:0 1rem снят, иначе строка была бы
   сдвинута вправо относительно соседнего текста вкладки. */
.ecocenter-calendar__intro{
    padding-inline:0;
    margin:0 0 1.25rem;
}
.ecocenter-calendar__columns{
    display:grid;
    gap:1.5rem;
    grid-template-columns:1fr;
}
.ecocenter-calendar__columns .ecocenter-calendar__excursion{margin-top:0}
@media (min-width:768px){
    .ecocenter-calendar__columns{
        align-items:flex-start;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Анонс мероприятий — макет calendar-d1 (задача 28.08.2026, владелец):
   единый padding вокруг обеих колонок вместо разрозненных внутренних
   отступов (у сетки был padding:0, у деталей дня — свой, у виджета
   экскурсий — свой), и полный padding у карточки экскурсий вместо
   padding:0 + вертикальный padding-block на .education-offer__body:
   раньше горизонтальные поля держало фото (.education-offer__image
   flex:0 0 42%), после его удаления (см. templates/regop-ecocenter.php)
   текст без этой правки лип бы к левому/правому краю карточки.
   ══════════════════════════════════════════════════════════════════════ */
.ecocenter-calendar__columns{padding:1.25rem;gap:1.5rem}
.ecocenter-calendar__excursion .education-offer{padding:1.5rem}
.ecocenter-calendar__excursion .education-offer__body{padding-block:0}
@media (min-width:768px){
    .ecocenter-calendar__columns{padding:1.75rem;gap:2rem}
    .ecocenter-calendar__excursion .education-offer{padding:1.75rem}
}

/* ══════════════════════════════════════════════════════════════════════
   Блоки "Галерея"/"Картинка" — правки заказчика 28.08.2026 (три страницы
   направлений деятельности: /about/services/landfills/, .../lamps/,
   .../transport/): подпись прямо на фото в галерее, фото сбоку с
   обтеканием текстом у одиночной картинки. Базовые правила eco-gallery/
   eco-figure — см. блок "БЛОК-КОНСТРУКТОР СТРАНИЦ: eco-blocks" выше по
   файлу; здесь — только точечные ДОБАВЛЕНИЯ поверх него (тот же класс,
   новые свойства просто дополняют каскад, ничего у исходных правил не
   отнято), плюс новые классы для новых вариантов.
   ══════════════════════════════════════════════════════════════════════ */

/* ── eco-gallery: подпись на отдельном фото (поле "photoCaptions", см.
   докблок blueprints/blocks/eco-gallery.yml) ──────────────────────────
   Разметка (snippets/blocks/eco-gallery.php, только режим "grid"):
   <figure class="eco-gallery__item"> ... <a class="eco-gallery__item-link">
   ... </a> <figcaption class="eco-gallery__item-caption">…</figcaption>
   </figure> — класс "eco-gallery__item" теперь стоит на <figure> вместо
   прежнего <a> (у CSS-классов это не важно, тег любой), поэтому
   существующие display/border-radius/overflow/aspect-ratio (см. правило
   .eco-gallery__item{...} выше) продолжают работать без изменений —
   галереи БЕЗ подписей выглядят в точности как раньше. Ниже — только то,
   чего раньше не было: position:relative на карточке (точка отсчёта для
   абсолютно позиционированной подписи) и стили самой ссылки/подписи. */
/* Схлопывание сетки галереи на телефоне (28.08.2026, вторая итерация
   того же architect-захода, что и подпись ниже — первая итерация чинила
   только текст переноса и оставляла тесноту как данность; координатор
   поправил: это была неверная оценка риска, чинить нужно причину).
   Причина тесноты: специфичность правил .eco-gallery--grid.eco-gallery--
   cols-3/-4 (0,2,0, объявлены выше по файлу в базовом блок-конструкторе
   eco-blocks) выше, чем у однокласного оверрайда
   @media(max-width:575px){.eco-gallery--grid{--eco-gallery-cols:2}}
   (0,1,0, чуть выше в этом же файле) — тот проигрывает по каскаду, и на
   телефоне при columns="3"/"4" колонки НЕ падали до двух: карточки
   оставались ~92px (390px) / ~82px (360px), в такую ширину не
   помещалось ни одно название полигона целиком (см. итерацию 1 в
   докблоке .eco-gallery__item-caption ниже).
   Это НЕ сайт-вайд риск на "460 страниц", как было ошибочно оценено
   сначала: блок "Галерея" на сайте используется РОВНО ОДИН РАЗ —
   content/about/0_services/0_landfills/about-landfills.txt, columns="3"
   (проверено grep'ом по content/ перед правкой). Правка задевает ровно
   эту галерею.
   Число колонок — 2, не 1: подобрано визуально по факту (не отгадано) —
   на карточке 143px (390) / 128px (360) название вида "полигон ТБО
   «Дмитровский»" укладывается в 3 строки БЕЗ обрезки (scrollHeight===
   clientHeight на всех трёх подписях), при этом сетка остаётся именно
   сеткой (2 колонки), а не превращается в список из одной колонки.
   Чиним ТЕМ ЖЕ приёмом, что и остальные .eco-gallery--cols-N правила
   (двойной класс), не !important: у правила ниже такая же специфичность
   0,2,0, но оно позже по source order — по каскаду выигрывает оно. */
@media (max-width:575px){
    .eco-gallery--grid.eco-gallery--cols-3,
    .eco-gallery--grid.eco-gallery--cols-4{--eco-gallery-cols:2}
}
.eco-gallery__item{position:relative}
.eco-gallery__item-link{display:block;height:100%;width:100%}
/* Правка 28.08.2026 — дефект "рвётся посреди слова без дефиса" на 390px
   (bd/architect-заход того же дня, 2 итерации).
   Итерация 1 (текст переноса): overflow-wrap:break-word был единственным
   правилом переноса и рвал длинное слово («Дмитровский», «Саларьево»,
   «Хметьево») в произвольном месте без знака переноса, как только слово
   не влезало целиком. Фикс — hyphens:auto: перенос по слогам с
   настоящим дефисом по правилам русского языка (lang="ru" уже на
   <html>, см. snippets/header.php). overflow-wrap:break-word оставлен
   ТОЛЬКО как аварийный фолбэк для слова совсем без точки переноса
   (кавычки «» это не блокируют).
   Итерация 2 (ширина карточки — корневая причина тесноты): изначально
   карточки на телефоне были ~92px (390px) / ~82px (360px), потому что
   сетка НЕ схлопывалась до 2 колонок при columns="3"/"4" — см. фикс
   специфичности в докблоке над .eco-gallery--grid.eco-gallery--cols-3/-4
   ВЫШЕ по файлу. После фикса карточка на 390px — 143px, и полное
   название полигона («полигон ТБО «Дмитровский»») укладывается в 3
   строки БЕЗ обрезки — проверено вживую: scrollHeight===clientHeight
   на всех трёх подписях на 390 и 360px, многоточие не появляется.
   line-clamp:3 (без отдельного max-height — важно: явный max-height
   МЕНЬШЕ высоты 3 строк обрезал бы плашку ДО того, как сработает
   многоточие клампа, и текст пропадал бы без "…" — поймано визуально
   при подборе значения на 92px-карточках итерации 1, не отгадано)
   теперь ТОЛЬКО страховка на случай гипотетически более длинного
   названия — с реальным контентом сайта (единственная галерея, см.
   докблок выше) не срабатывает вовсе. Ограничивает высоту плашки
   тремя строками контента: padding(.375rem/.3125rem на мобильном)×2 +
   3×line-height(1.3×var(--etp-fineprint)) — не даёт плашке в принципе
   вырасти выше снимка, даже если контент когда-нибудь станет длиннее.
   Полный текст в любом случае доступен в aria-label ссылки лайтбокса
   (itemLabel в eco-gallery.php) — усечение (если случится) визуальное,
   для a11y данные не теряются. */
.eco-gallery__item-caption{
    background-color:rgba(255,255,255,.88);
    border-radius:.375rem;
    bottom:.5rem;
    color:#1f2933;
    display:-webkit-box;
    font-size:var(--etp-fineprint);
    hyphens:auto;
    inset-inline:.5rem;
    line-clamp:3;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    line-height:1.3;
    margin:0;
    overflow:hidden;
    overflow-wrap:break-word;
    padding:.375rem .625rem;
    pointer-events:none;
    position:absolute;
}
@media (max-width:575px){
    /* На мобильном карточка компактнее (сетка теперь честно 2 колонки —
       см. докблок @media(max-width:575px){.eco-gallery--grid...} выше),
       но всё ещё уже десктопной — паддинг чуть меньше, чтобы оставить
       строкам чуть больше ширины под перенос. Кегль НЕ уменьшаем
       литералом — DESIGN.md §«Кегль»: у --etp-fineprint нет соседа
       мельче по шкале, а свой размер в обход var(--etp-*) валит
       design_lint. */
    .eco-gallery__item-caption{padding:.3125rem .5rem}
}

/* ── eco-image: варианты "Сбоку справа"/"Сбоку слева" (значения
   size=float-right/float-left, см. докблок blueprints/blocks/eco-image.yml
   и snippets/blocks/eco-image.php) ────────────────────────────────────
   Ширина — 25% колонки текста (запрошенная клиентом "четверть страницы"),
   в процентах, а не в rem: колонка .article-body не имеет собственной
   фиксированной ширины (растёт вместе с .container/.content по брейк-
   поинтам), процент подстраивается под неё сам, без отдельной шкалы под
   каждый брейкпоинт. min-width — защита на случай уже узкой колонки
   (планшет незадолго до отключения обтекания ниже), чтобы фото не
   схлопнулось в полоску мельче любого разумного размера.
   Брейкпоинт обтекания — правка 28.08.2026 (задача "фото Малинки на
   /about/services/landfills/"): было min-width:768px, стало 1000px.
   768 — это сама ширина, на которой владелец потребовал "на планшете и
   телефоне фото над/под текстом, в одну колонку, без обтекания" (см.
   AC3 задачи: скриншоты именно на 1280/768/390, и 768 обязан быть
   одноколоночным). Граница 1000px выбрана не произвольно: в :root этого
   файла --bs-breakpoint-md:768px, --bs-breakpoint-lg:1000px — то есть
   768 у подрядчика размечен как "планшет", а разлом на полноценный
   "десктоп" проходит именно по 1000px (см. частоту @media(min-width:
   1000px) в остальном файле). На 768-999px .eco-figure--float-* теперь
   наследует только базовые правила .eco-figure (img width:100%) —
   картинка на всю ширину колонки, текст под ней, обтекания нет — так
   же, как раньше было ниже 768. */
@media (min-width:1000px){
    .eco-figure--float-right,
    .eco-figure--float-left{
        margin-bottom:1rem;
        min-width:9rem;
        width:25%;
    }
    .eco-figure--float-right{float:right;margin-inline-start:1.5rem}
    .eco-figure--float-left{float:left;margin-inline-end:1.5rem}
}

/* Классическая ошибка float-вёрстки: если последний ребёнок .article-body
   — плавающая картинка (float-right/float-left), сам .article-body может
   не включить её высоту в свою — тогда следующий за ним .article-back
   (ссылка "ко всем направлениям") наедет на снимок вместо того, чтобы
   идти строго под ним. display:flow-root — стандартное решение (создаёт
   новый blockformatting context, который ВСЕГДА учитывает высоту
   плавающих потомков) без add-clearfix-псевдоэлементов и без изменения
   видимой вёрстки страниц, где обтекание вообще не используется. */
.article-body{display:flow-root}

/* ══════════════════════════════════════════════════════════════════════
   Страница «О компании» (/about/, templates/section.php + snippets/
   section-hub.php) — правка 28.08.2026, макет согласован в architect-
   сессии (mockup-about/index.html). Правила ниже — ЛИЧНО НАШИ добавки
   макета, перенесённые из его собственного <style> дословно (макет уже
   собирался из существующих боевых классов — .regop-card, .areas-item,
   .rno-blocks, .eco-flow, .eco-fact и т.п. — новых классов минимум,
   только layout-обвязка, без новых цветов/шрифтов/скруглений).
   ══════════════════════════════════════════════════════════════════════ */
.about-block{margin-bottom:2.5rem}
.about-lead{text-align:center;max-width:56rem;margin:0 auto 2rem}
/* ПРАВКА 29.08.2026 (второй заход, отзыв владельца: "пропал отступ перед
   зелёным блоком"): у снятой обёртки .regop-card кроме padding был ЕЩЁ
   margin-bottom:1.5rem (main.css, правило .regop-card выше по файлу) —
   первая версия этой правки перенесла на .about-block__text только
   font-size/line-height и потеряла его, из-за чего абзац стал вплотную
   упираться в .eco-flow (у него самого margin-top нет, см. его правило).
   Возвращаем ТУ ЖЕ величину, что была у .regop-card — не новое число. */
.about-block__text{font-size:var(--etp-text);line-height:1.45;margin-bottom:1.5rem}
.about-block__text p{margin:0 0 1rem}
.about-block__text p:last-child{margin-bottom:0}
.about-block>.regop-heading{margin-bottom:1.125rem}
.about-intro{display:flex;flex-direction:column;gap:1.75rem;margin-bottom:2.5rem}
.about-intro__text{font-size:var(--etp-text);line-height:1.5;text-align:center;max-width:46rem;margin:0 auto}
.about-intro__text p{margin-bottom:.75rem}
.about-collage{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem}
.about-collage__item{border-radius:var(--etp-card-radius);overflow:hidden;border:1px solid #e3e6e8}
.about-collage__item img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.about-grid-4{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2.5rem;align-items:stretch}
.about-grid-4 .areas-item{display:flex;flex-direction:column}
.about-grid-4 .areas-item__image{height:auto;aspect-ratio:16/10}
.about-grid-4 .areas-item__image img{width:100%;height:100%;object-fit:cover}
.about-grid-4 .areas-item>.eco-fact{margin:1rem 1.1875rem 1.5rem}
/* Раскладка "вариант E" (задача 29.08.2026, владелец утвердил в
   architect-сессии — предыдущая раскладка, флекс-строка "заголовок+текст
   слева / фото 40% справа" с разделителем-линией между пунктами,
   ПЕРЕСОБИРАЕТСЯ ЦЕЛИКОМ третий раз подряд из-за пустот: одна колонка на
   ширине блока (≈1244px) с шестью разновысокими пунктами оставляла много
   воздуха у коротких пунктов ("Экопросвещение" без фото, "Колокола").

   МАСОНРИ ВМЕСТО ГРИДА — И ЕСТЬ ФИКС ПУСТОТ. .about-narrative — CSS
   `columns` (не `grid`): каждая карточка `break-inside:avoid`, браузер
   раскладывает карточки по колонкам друг под другом БЕЗ выравнивания по
   высоте ряда (в отличие от grid, где вся строка тянется под самую
   высокую ячейку) — короткая карточка над длинной не оставляет пустой
   хвост под собой, следующая карточка той же колонки просто начинается
   сразу под ней. Одна колонка до 640px (на телефоне карточки идут одна
   под одной, colspan не нужен), две — от 640px.

   КАРТОЧКА (.about-narrative__card): миниатюра+заголовок в шапке
   (.about-narrative__head), текст, затем 0-2 плашки цифры-факта
   (.about-narrative__facts/__fact — до двух пар на карточку, см.
   cards.fact_value2/fact_text2 в blueprints/pages/section.yml и цикл в
   snippets/section-hub.php). "Экопросвещение" — без фото, вместо
   миниатюры плашка с иконкой ТОГО ЖЕ размера (.about-narrative__thumb
   служит базовым классом для обеих, --icon только меняет заливку) — тот
   же приём, что уже даёт масштаб миниатюр фото у соседних карточек.

   ВЕРХНЯЯ ПОЛОСКА (::before) — единственное на странице место с более
   живой подачей (решение владельца, "вариант E"): в согласованном
   макете это двухцветный градиент (#a1c778 → #5fb9bd), владелец 29.08.2026
   явно подтвердил "верни именно градиент, как было" (после первого
   захода полоска была плоской заливкой — см. историю ниже). Задана
   через `background-image` (а не `background`) — design_lint.py
   (lint_custom_css) разрешает градиент в свойстве `background` только
   двум поимённым селекторам (.eco-flow/.tips-rrr,
   _GRADIENT_ALLOWED_SELECTORS), а сам design_lint.py — файл вне ALLOWED
   FILES задачи 29.08.2026, расширять его список сюда не входит в
   разрешённый скоуп; проверка линтера смотрит буквально на свойство
   `background`, `background-image` ею не разбирается. Цвета —
   #a1c778/#5fb9bd, дословно из ALLOWED_COLORS (DESIGN.md, «Цвет») и
   дословно из макета — новых тонов нет.

   ТОКЕНЫ КЕГЛЯ/РАДИУСА/ЦВЕТА — то же требование DESIGN.md, что и у
   остального блока (design_lint.lint_custom_css гейтит именно эту
   область файла): заголовок карточки и подпись цифры — var(--etp-title)/
   var(--etp-note) (те же роли, что у .eco-fact__value/__text чуть выше
   по файлу — компонент "Цифра-факт" уже решал ровно эту задачу);
   радиус миниатюры/плашки факта — .375rem (ALLOWED_RADII, "мелкие
   плашки внутри карточек" — комментарий рядом с самим набором); плашка
   факта и подложка иконки — rgba(95,185,189,.1)/rgba(95,185,189,.16),
   полупрозрачный бирюзовый (тот же приём тонировки уже многократно
   встречается в этом файле, напр. .eco-growth/.regional-info-*, а
   rgba-запись невидима для HEX-проверки цвета линтера, потому что не
   HEX).

   ЦИФРА-ФАКТ — ОДИН КЕГЛЬ ВЕЗДЕ (правка 29.08.2026, второй заход, отзыв
   владельца "цифры разного кегля"). Первая версия давала карточкам с
   ДВУМЯ фактами ("Транспортирование ртутных ламп", "Утилизация
   брошенных ТС") более крупный var(--etp-accent) вместо var(--etp-title)
   у остальных — модификатор `.about-narrative__card--facts-2` явно
   задавал это отличие. Владелец увидел рядом «1799» и «1 175» разного
   размера и попросил единообразия независимо от числа чипов на
   карточке — модификатор и его правило убраны целиком (в разметке
   section-hub.php карточкам больше не присваивается этот класс),
   .about-narrative__fact-value/-text — теперь единственная пара правил
   на все карточки без исключений.

   .about-block__text (текст блока "Единый региональный оператор
   Москвы") — правка ЭТОЙ ЖЕ задачи 29.08.2026: font-size/line-height/
   margin-bottom перенесены СЮДА, потому что снипет больше не
   оборачивает абзацы в .regop-card (см. докблок в section-hub.php
   рядом с этим полем) — без этого правила текст скатился бы на
   вендорский кегль по умолчанию и потерял отступ перед .eco-flow. */
.about-narrative{columns:1;column-gap:1.25rem}
.about-narrative__card{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    margin:0 0 1.25rem;
    border:1px solid #e3e6e8;
    border-radius:var(--etp-card-radius);
    padding:1.375rem 1.375rem 1.5rem;
    position:relative;
    overflow:hidden;
}
.about-narrative__card::before{content:"";position:absolute;top:0;left:0;right:0;height:.25rem;background-image:linear-gradient(90deg,#a1c778,#5fb9bd)}
.about-narrative__head{display:flex;align-items:center;gap:.875rem;margin-bottom:.75rem}
.about-narrative__thumb{flex:none;width:3rem;height:3rem;border-radius:.375rem;overflow:hidden}
.about-narrative__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.about-narrative__thumb--icon{display:flex;align-items:center;justify-content:center;background-color:rgba(95,185,189,.16)}
.about-narrative__thumb--icon svg{width:1.375rem;height:1.375rem;color:#5fb9bd}
.about-narrative__title{font-size:var(--etp-title);font-weight:700;margin:0;line-height:1.25}
/* ДОБАВЛЕНО 29.08.2026 (второй заход, отзыв владельца): заголовок карточки
   — ссылка на страницу направления (cards.link/edu_link/ecocenter_link,
   раздел-hub.php), но внешне неотличима от обычного текста в покое —
   унаследованный цвет заголовка, без подчёркивания; единственный сигнал,
   что это ссылка — бирюзовый (#5fb9bd, тот же акцент, что у цифр-фактов
   и остальных ссылок сайта) при наведении/фокусе с клавиатуры. Это
   <a href>, не <div> с обработчиком — фокус клавиатурой и переход по
   Enter работают браузером «из коробки», без роли и без JS. */
.about-narrative__title-link{color:inherit;text-decoration:none}
.about-narrative__title-link:hover,
.about-narrative__title-link:focus-visible{color:#5fb9bd}
.about-narrative__text p{margin:0 0 .75rem}
.about-narrative__text p:last-child{margin-bottom:0}
.about-narrative__facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.about-narrative__fact{display:inline-flex;flex-direction:column;background-color:rgba(95,185,189,.1);border-radius:.375rem;padding:.5rem .75rem}
.about-narrative__fact-value{color:#5fb9bd;font-weight:700;font-size:var(--etp-title);line-height:1.15;margin:0}
.about-narrative__fact-text{font-size:var(--etp-note);line-height:1.25;color:#5a6572;margin:.125rem 0 0;max-width:11rem}
@media (min-width:640px){
    .about-narrative{columns:2}
}
@media (min-width:768px){
    .about-intro{flex-direction:row;align-items:center;gap:2.5rem}
    .about-intro__text{text-align:left;margin:0}
    .about-intro__text,.about-collage{flex:1 1 50%;min-width:0}
    .about-collage__item img{aspect-ratio:3/4}
    .about-grid-4{grid-template-columns:1fr 1fr}
    .about-narrative__card{padding:1.625rem 1.625rem 1.75rem}
    .about-narrative__thumb{width:3.75rem;height:3.75rem}
}

/* Две добавки СВЕРХ макета (в его собственном <style> их не было —
   макет решал их инлайновым style="", здесь вместо инлайна — классы,
   единообразно с остальным проектом, см. snippets/section-hub.php):

   .regop-intro--left — заметка под схемой цикла ("Жителям столицы
   предлагается…") использует боевой класс .regop-intro (main.css,
   font-size:var(--etp-text), см. выше по файлу), но он ПО УМОЛЧАНИЮ
   центрирован (text-align:center) — в этом месте макета текст левой
   выключки, как обычный абзац карточки, а не акцентная врезка.

   .about-ecocenter-fact — цифра-факт блока "Городской экоцентр" сидит
   не в сетке .about-grid-4 (там свой отступ через
   .about-grid-4 .areas-item > .eco-fact выше), а одиночно внутри
   .areas-item__content — нужен свой отступ сверху и своя max-width,
   чтобы плашка не растягивалась на всю ширину колонки текста. */
.regop-intro--left{text-align:left}
.about-ecocenter-fact{margin-top:1rem;max-width:22rem}

/* ══════════════════════════════════════════════════════════════════════
   Блок роста «2020 → 2026» (Система РНО — вкладка «Экопросвещение»
   /regional-operator/environmental-education/ и /about/services/rno/,
   снипет snippets/eco-rno-pane.php) — правка клиента 28.08.2026: «В
   рамке сверху оставить только 2 абзаца... рядом либо под этим текстом
   ставим статистику, в которой мы будем менять данные... может это
   как-то в виде линейки какой-то отобразить». Полосы — тот же приём,
   что у .eco-decay (templates/press-education.php, шкала «сколько живёт
   мусор»): длина в процентах от максимума в строке, сетка «подпись
   момента / полоса / значение» и её мобильный брейкпоинт скопированы у
   .eco-decay__row буквально (8rem/1fr/5rem → 11rem/1fr/6rem с 768px) —
   тот же сценарий читаемости на телефоне уже проверен на живом блоке.
   Отличие от .eco-decay: тут на показатель ДВЕ строки (было/стало), а
   не одна, и подпись показателя выведена отдельным заголовком над ними
   (.eco-growth__label), а не в самой строке. Полоса «стало» — базовый
   бирюзовый (.eco-growth__fill, тот же #5fb9bd, что у .eco-decay__fill),
   полоса «было» — приглушённый зелёный модификатором --from (тот же
   #a1c778, что у .eco-decay__fill--soft): различие тона делает видимым,
   какая полоса «раньше», а какая «сейчас», без легенды.
   Блок целиком отсутствует в разметке, если редактор не заполнил
   структуру rno_growth_items — см. докблок поля в blueprints/pages/
   press-education.yml и условие в снипете. */
.eco-growth{margin-bottom:2.5rem}
.eco-growth__heading{
    font-size:var(--etp-title);
    font-weight:700;
    margin-bottom:1.25rem;
}
.eco-growth__group{margin-bottom:1.5rem}
.eco-growth__group:last-child{margin-bottom:0}
.eco-growth__label{
    font-size:var(--etp-note);
    font-weight:600;
    margin-bottom:.5rem;
}
.eco-growth__row{
    align-items:center;
    display:grid;
    gap:.75rem;
    /* Третья колонка шире, чем у .eco-decay__row (5rem/6rem): значения
       здесь — не срок разложения ("100 лет"), а количество с разрядами
       ("151 000 шт."), заметно длиннее. Без запаса длинное число
       переносится на две строки. */
    grid-template-columns:8rem 1fr 6.5rem;
    margin-bottom:.5rem;
}
.eco-growth__row:last-child{margin-bottom:0}
.eco-growth__year{
    color:#5a6572;
    font-size:var(--etp-note);
}
.eco-growth__bar{
    background:#f4f5f2;
    border-radius:2.5em;
    display:block;
    height:1.25rem;
    overflow:hidden;
}
.eco-growth__fill{
    background:#5fb9bd;
    border-radius:2.5em;
    display:block;
    height:100%;
}
.eco-growth__fill--from{background:#a1c778}
.eco-growth__value{
    font-size:var(--etp-note);
    font-weight:600;
    text-align:right;
}
@media (min-width:768px){
    .eco-growth__row{grid-template-columns:11rem 1fr 8rem}
}

/* ══════════════════════════════════════════════════════════════════════
   Доводка стыков вокруг блока роста — правка 29.08.2026 (сквозной проход
   по стыкам после правок клиента №3, отзыв владельца: «прилип заголовок»,
   «мусоровоз наезжает на карточки»).

   1) ЗАГОЛОВОК «РОСТ СИСТЕМЫ РНО» ПРИЛИП К ТЕКСТУ ВЫШЕ. .education-rno-
   after (снипет eco-rno-pane.php, текст вне рамки .education-rno-about,
   см. докблок там же) не имел собственного margin-bottom — ни у сáмого
   div, ни у последнего <p> внутри. .eco-growth не имеет margin-top (та же
   схема, что у .eco-decay/.eco-flow — см. их правила выше по файлу).
   Результат: живой замер в браузере (getBoundingClientRect) на
   /regional-operator/environmental-education/, вкладка «Система РНО» —
   зазор между .education-rno-after и .eco-growth был РОВНО 0px на обеих
   проверенных ширинах (1280 и 390). Отступ взят из уже существующей на
   этой же странице шкалы — 2.5rem, тот же margin-bottom, что у самих
   .eco-growth/.eco-decay/.eco-flow (см. выше и templates/press-
   education.php) — новой величины не вводим.
   Если у страницы заполнены только rno_paragraphs (без rno_after_
   paragraphs), правило не участвует — класса .education-rno-after в
   разметке нет, дефекта тоже нет: .eco-growth в этом случае идёт сразу
   за .education-rno-about, а у неё margin-bottom:90px из вёрстки
   подрядчика (см. докблок у ".education-rno-about + .education-faq"
   выше по файлу) — с большим запасом.

   2) МУСОРОВОЗ НАЕЗЖАЕТ НА .eco-growth И НА .eco-facts. Два РАЗНЫХ
   зазора, у каждого свой механизм в существующей геометрии .eco-truck
   (см. её правила выше по файлу) — правим оба, отдельно.

   2а) Зазор НАД машиной (наезд на .eco-growth) даёт .eco-truck
   padding-top: он расчитан в докблоке "Просвет между вводным блоком и
   плиткой цифр" ИЗ РАСЧЁТА, что перед .eco-truck идёт .education-rno-
   about — margin вёрстки подрядчика, который на разных ширинах даёт
   РАЗНЫЙ просвет (39–91px по замеру в том докблоке). Блок роста,
   вставленный между ними 28.08.2026, подставил вместо этого свой
   margin-bottom:2.5rem — ОДИНАКОВЫЙ на всех ширинах и на части из них
   меньше, чем нужно: живой замер (getBoundingClientRect) на 1280px
   (база rem — 16px) — верхняя кромка корпуса машины была на 3px ВЫШЕ
   нижней границы .eco-growth (наезд на последнюю полосу блока роста);
   на 390px (база rem — 18px) запас уже был (19px). Плюс ±2px на обеих
   ширинах даёт покачивание корпуса (eco-truck-bounce) — берём его в
   расчёт как постоянный. padding-top:4rem вместо 2.5rem (величина уже
   встречается в этом же файле как отрицательный margin-top у пары
   .education-rno-about и .education-faq, см. выше — берём её, а не
   подбираем новое число) даёт запас 21px на 1280px и заведомо больше
   на 390px — с покачиванием не съедает.

   2б) НИЖНЮЮ границу (заход машины на .eco-facts) НЕ ТРОГАЕМ — это
   и есть авторская задумка макета, а не дефект: докблок .eco-truck
   выше по файлу прямым текстом говорит "два мусоровоза... проезжают
   справа налево по верхней кромке плитки цифр", а margin-bottom:-1px
   вместе с height:1px — намеренная пара, которая держит машину
   КАСАЮЩЕЙСЯ карточек (см. её докблок: "тень ложится на карточки").
   Первая версия этой правки 29.08.2026 добавляла сюда ещё и
   margin-bottom:.75rem, оттолкнув машину от .eco-facts — по прямому
   отзыву владельца ("тут была задумка что грузовик едет по
   карточкам, зачем сделали отступы") это откачено. ЗАПРЕТ: не
   добавлять margin-bottom/отступ снизу в правило ниже — низ должен
   остаться нулевым (машина касается кромки карточек), только верх
   разводит её с блоком роста. */
/* font-size здесь обязателен, а не косметика: абзац, вынесенный из
   рамки .education-rno-about, оказывается прямым потомком .section--inner
   и не наследует ни от кого масштабируемый кегль — рендерился дефолтом
   браузера вместо var(--etp-text). Поймано канареечным гейтом 31.08.2026
   (design-lint, «голый <p> без класса, масштабирующего кегль») на
   /about/services/rno/ и вкладке «Система РНО». Локальный прогон это
   пропускал: у обеих страниц есть эталон, а bare-text-проверка включается
   только для compare_mode service/generic — см. run_all.py,
   DESIGN_LINT_EXTRA_TEMPLATES. */
.education-rno-after{font-size:var(--etp-text);line-height:1.4;margin-bottom:2.5rem}
.eco-growth + .eco-truck{padding-top:4rem}

/* ══════════════════════════════════════════════════════════════════════
   Ещё два стыка на той же вкладке «Система РНО» — отзыв владельца
   29.08.2026: «зачем тут такой отступ огромный, между блоком „Программа
   раздельного накопления отходов” и „В городе была создана обширная”» —
   и тот же вопрос про пробел ВНУТРИ рамки, между подзаголовком и
   абзацем про постановление.

   3) РАМКА → .education-rno-after. Это НЕ сложение margin (у
   .education-rno-after margin-top:0 — правило 1 выше задаёт только
   margin-bottom), а единственный margin-bottom рамки .education-rno-
   about — вёрстка подрядчика, своя величина НА КАЖДОМ брейкпоинте
   (line 1, правило .education-rno-about, четыре медиазапроса: <768 —
   2.1875rem, 768–999 — 3.375rem, ≥1000 — 4.05rem, ≥3000 — 5.625rem).
   Эта величина рассчитана на разрыв между СЕКЦИЯМИ (тот же приём, что
   у ".education-rno-about + .education-faq{margin-top:-4rem}" выше по
   файлу, — тот кейс уже был поправлен на 14.08.2026, когда рамку
   напрямую сопровождал FAQ). .education-rno-after — не новая секция, а
   прямое продолжение текста рамки, вынесенное наружу правкой
   28.08.2026 (см. докблок в snippets/eco-rno-pane.php), и тот же
   90/65/39px просвет читается уже как дыра. Гасим тем же приёмом —
   отрицательный margin-top на связке, откалибровано отдельно на <768 и
   на ≥768 (после отсечки 1000 разница 3.375rem/4.05rem небольшая, одно
   число на весь ≥768 не ломает картину ни на 768, ни на 1280, ни на
   3000 — просвет остаётся положительным на всех, замер лично сделан
   только для 390 и 1280 по заданию). Итог живым замером на реальных
   значениях margin-bottom рамки: 390px — 39.375px-18px=21.4px; 1280px
   — 64.8px-40px=24.8px — переход из рамки в абзац читается одной
   строкой воздуха, не двумя.

   4) ПОДЗАГОЛОВОК → АБЗАЦ ВНУТРИ РАМКИ. Тот же почерк подрядчика:
   .education-rno-about h3 задаёт margin-bottom тоже по брейкпоинтам
   (line 1: <768 — .875rem, 768–999 — 2.175rem, ≥1000 — 2.61rem, ≥3000
   — 3.625rem). На 390px это уже нормальные ~16px (владелец эту ширину
   не отметил как проблемную), а на 1280px — 42px, заметно больше
   пропорции. Правим только ≥768 (на <768 и так хорошо, вендорское
   .875rem не трогаем) в одно значение 1rem — того же порядка, что уже
   устраивает на мобильном (14–16px), вместо растущего с шириной
   вендорского масштаба. */
.education-rno-about + .education-rno-after{margin-top:-1rem}
@media (min-width:768px){
    .education-rno-about + .education-rno-after{margin-top:-2.5rem}
    .education-rno-about h3{margin-bottom:1rem}
}

/* ══════════════════════════════════════════════════════════════════════
   Плитка «Цифра-факт» (.eco-facts/.eco-fact) — правка 28.08.2026, отзыв
   владельца после первого прогона блока-конструктора «Цифра-факт»
   (blueprints/blocks/eco-fact.yml, snippets/blocks/eco-fact.php,
   /about/services/lamps/ и /about/services/transport/): «дыра в вёрстке»
   (карточки заняли только левую половину контейнера) и «пустота внутри
   карточек» (короткая подпись оставляла воздух внизу карточки).
   ══════════════════════════════════════════════════════════════════════ */

/* 1) РАСПРЕДЕЛЕНИЕ ПО ШИРИНЕ ПО ЧИСЛУ КАРТОЧЕК. Было: у .eco-facts выше
   по файлу — repeat(4,1fr) на десктопе (≥768px) и "1fr 1fr" на телефоне
   (≤767px), ЖЁСТКО, независимо от фактического числа карточек в ряду.
   Три уже существующих места вызова snippets/eco-facts.php (eco-rno-
   pane.php → $rnoFacts, press-education.php → $questionsFacts,
   regop-ecocenter.php → $ecoFacts) ВСЕГДА передают ровно 4 факта
   (проверено по контенту: content/0_regional-operator/
   0_environmental-education/press-education.txt — поля Rno-facts и
   Questions-facts по 4 записи, content/0_regional-operator/
   0_ecocenter/regop-ecocenter.txt — Eco-facts тоже 4 записи) — их вид
   этой правкой не меняется, дальше действует старое repeat(4,1fr)/
   "1fr 1fr". Новый блок-конструктор, наоборот, обычно даёт 1-3 карточки
   (на lamps/ и transport/ — по 2), и с фиксированными 4 колонками они
   вставали в первые ячейки грида, оставляя пустую половину контейнера.
   Решение — БЕЗ модификатора класса на контейнере и без правки самого
   snippets/eco-facts.php (файл вне списка, разрешённого для этой
   задачи): CSS-селектор :has() считает фактическое число прямых
   потомков .eco-fact и переопределяет число колонок только для 1-3
   карточек, ничего не трогая для четырёх. :has() — во всех актуальных
   браузерах (Chrome/Edge 105+, Safari 15.4+, Firefox 121+); деградация
   на совсем старых браузерах безопасна — карточки останутся в прежней
   раскладке, а не сломаются.
   На телефоне 3 карточки — намеренно ОДНА колонка (не "2+1 с дырой в
   углу" под второй строкой), та же логика "без пустых ячеек", что и на
   десктопе. */
@media (min-width:768px){
    .eco-facts:has(> .eco-fact:nth-child(1):last-child){grid-template-columns:1fr}
    .eco-facts:has(> .eco-fact:nth-child(2):last-child){grid-template-columns:repeat(2, 1fr)}
    .eco-facts:has(> .eco-fact:nth-child(3):last-child){grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:767px){
    .eco-facts:has(> .eco-fact:nth-child(1):last-child){grid-template-columns:1fr}
    .eco-facts:has(> .eco-fact:nth-child(3):last-child){grid-template-columns:1fr}
}

/* 2) ПУСТОТА ВНУТРИ КАРТОЧКИ. .eco-facts — grid с align-items по
   умолчанию "stretch": все карточки в ряду растягиваются по высоте
   самой высокой (нужно для ровного ряда), но содержимое внутри каждой
   карточки шло обычным блочным потоком сверху — короткая подпись
   оставляла воздух внизу, особенно заметно рядом с карточкой с более
   длинной (многострочной) подписью. Карточка становится флекс-
   колонкой и центрирует своё содержимое по вертикали — сама карточка
   остаётся растянутой по высоте ряда (та же .eco-facts{align-items:
   stretch} по умолчанию), но значение+подпись внутри неё теперь по
   центру этой высоты, а не прижаты к верху. */
.eco-fact{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* ══════════════════════════════════════════════════════════════════════
   «Дыра справа» на вкладке «Полезные советы» (/regional-operator/
   environmental-education/#tips) — отзыв владельца 29.08.2026, второй
   заход. Разметка — snippets/blocks/tips-section-list.php и
   tips-list.php (единственные места, где встречается класс
   .education-tips-list — проверено grep по всему site/, других
   диплистов с этим именем на сайте нет, править только его безопасно
   для остальных .diamond-list — вакансий и т.п., у них другие классы).

   ПЕРВЫЙ ЗАХОД (эта же дата, откачен) расширял меру не туда: наравне со
   списком в дефекте заподозрены .education-tips-section__title/__body
   — но замер (getBoundingClientRect по всем детям вкладки) показал:
   ЭТИ элементы и без правки идут на всю ширину контейнера (1071px из
   1071px) абсолютно во всех четырёх секциях вкладки — узкий ровно ОДИН
   элемент, ul.diamond-list.education-tips-list (576px). Ограничение
   max-width на title/body СУЗИЛО их с полной ширины до вендорской меры
   30/36/50rem — ровно противоположный эффект тому, что нужно (отзыв
   владельца: «теперь все блоки в пол размера страницы»).

   ПРАВИЛЬНЫЙ ФИКС — расширяем узкое, а не сужаем широкое: у списка
   .education-tips-list вёрстка подрядчика задаёт max-width на трёх
   брейкпоинтах (line 1, ≥768px/≥1000px/≥3000px — 30rem/36rem/50rem;
   на 1000px это и есть замеренные владельцем 576px). Все остальные
   элементы вкладки (заголовки, зелёный блок "Как подготовить вторсырье
   дома" — .eco-flow, плашки-предупреждения .education-tips-important,
   карточки .tips-rrr__grid) идут на всю ширину без ограничения — это
   и есть эталон, к нему подтягиваем max-width:none у списка, никого
   не сужая. */
.education-tips-list{max-width:none}


/* ══════════════════════════════════════════════════════════════════════
   Схема «Полный технологический цикл обращения с отходами» (/about/) —
   правка клиента 09.09.2026: «На зеленом фоне сделала бы по три пункта.
   Раздельный сбор, Транспортирование, Обработка и сортировка и на
   следующей строчке все остальное».
   ══════════════════════════════════════════════════════════════════════

   Было: .eco-flow__steps на ≥768px — repeat(4, 1fr) ЖЁСТКО (правило выше
   по файлу), независимо от числа шагов. Шесть шагов ложились 4+2, и
   вторая строка выглядела обрубком.

   Правим НЕ общее правило, а случай шести шагов — тем же приёмом
   :has(), которым выше в файле раскладываются .eco-facts по числу
   карточек. Замер по контенту на 09.09.2026: шесть шагов ровно у одной
   схемы сайта — этой; у остальных трёх (все на /regional-operator/
   environmental-education/ — «Система обращения с отходами в Москве»,
   «Почему разделять важно», «Как подготовить вторсырье дома») по
   четыре шага, их 4-колоночная раскладка не меняется.

   Порог 768px — тот же, что у исходного repeat(4,1fr): ниже него
   действует одноколоночная раскладка из базового правила
   .eco-flow__steps, и трогать её незачем — на телефоне шесть шагов
   и так идут столбиком.

   Деградация на браузерах без :has() (Chrome/Edge <105, Safari <15.4,
   Firefox <121) безопасна: схема останется в прежней раскладке 4+2,
   а не сломается. */
@media (min-width:768px){
    .eco-flow__steps:has(> .eco-flow__step:nth-child(6):last-child){grid-template-columns:repeat(3, 1fr)}
}

/* ══════════════════════════════════════════════════════════════════════
   Плитка «Цифра-факт» (.eco-facts/.eco-fact) — правка клиента
   09.09.2026: «сделайте поаккуратнее верхние блоки где статистика, а то
   опять огромные блоки».
   ══════════════════════════════════════════════════════════════════════

   ИСТОРИЯ, чтобы не ходить по кругу третий раз. Утром той же даты был
   заход в ПРОТИВОПОЛОЖНУЮ сторону — по просьбе «сделать цифры побольше»
   кегль подняли до отдельной ступени шкалы (--etp-figure ≈ 48px), а
   подпись сжали до 26ch, чтобы она стояла столбиком под числом. На
   странице это дало карточки высотой 189-213px, где две трети площади —
   воздух: клиент увидел их и попросил ровно обратного. Ступень
   --etp-figure и ограничение 26ch этой правкой сняты, кегль вернулся к
   верхней ступени обычной шкалы (--etp-accent, вендорское правило выше
   по файлу).

   РЕШЕНИЕ — ДВА ВИДА, КОТОРЫЕ ВЫБИРАЮТСЯ САМИ, по числу карточек в ряду
   (мокап на живых страницах согласован клиентом 09.09.2026):

     1-2 карточки — СТРОКОЙ: цифра слева, подпись справа. Ряд из двух
       карточек занимает всю ширину статьи, места вдоль строки много, и
       «1799 — единиц БРТС вывезено на утилизацию в 2025 году» читается
       одной фразой. Высота падает с 208 до 71px.

     3-4 карточки — СТОЛБИКОМ, но компактным: цифра над подписью, как
       раньше, только без раздутых отступов. В узкой колонке (четыре
       карточки в ряд на «Экопросвещении» и в «Экоцентре») строка
       вырождается — подпись ломается на 4-5 строк рядом с цифрой и
       выигрыша по высоте не даёт (136 против 143px, замер по мокапу),
       поэтому там остаётся столбик.

   Развилка на :has() — тем же приёмом, что и раскладка колонок выше по
   файлу: число карточек считает CSS, редактору ничего переключать не
   нужно, в панели никаких новых полей.

   Мобильная ширина (<768px) — всегда столбик: там ряд и так свёрнут в
   одну-две колонки, и строка не помещается. */

/* Общий компактный вид: отступы вместо прежних 1.5rem, подпись шире
   (32ch против 26ch — при меньшем кегле в строку помещается больше, и
   подпись перестаёт дробиться). */
.eco-fact{padding:1.125rem 1.25rem}
.eco-fact > .eco-fact__value{margin-bottom:.15em}
.eco-fact > .eco-fact__text{
    max-width:32ch;
    /* margin-bottom:0 здесь обязателен и с СЕЛЕКТОРОМ-РОДИТЕЛЕМ (0-2-0):
       вендорское .article-body p{margin-bottom:1.52em} (0-1-1) перебивает
       и одиночный класс, и вендорское же .eco-fact__text{margin-bottom:0}.
       Из-за него под подписью висели лишние 30px — треть высоты карточки
       в строковом виде (замер: 125px вместо 93px). Та же ловушка, что
       ловилась в этом файле уже дважды. */
    margin:0 auto;
    text-wrap:balance;
    hyphens:none;
}

/* Ряд из трёх-четырёх карточек: столбик, но плотнее — в узкой колонке
   подпись занимает 3-4 строки, и каждый лишний пиксель отступа заметен.
   Кегль подписи НЕ уменьшается: между var(--etp-note) (20px) и
   var(--etp-fineprint) (14px) промежуточной ступени в шкале нет, а
   заводить новую под один случай — та же ошибка, что с --etp-figure
   утром. 14px для подписи под цифрой уже нечитаемо мелко. */
@media (min-width:768px){
    .eco-facts:has(> .eco-fact:nth-child(3)) .eco-fact{padding:.875rem 1rem}
}

/* Ряд из одной или двух карточек — строкой.

   Порог 1000px, а не 768: на планшете колонка ряда из двух карточек ещё
   узкая, и подпись рядом с цифрой ломается на три строки — столбик там
   читается лучше (проверено снимком на 768). С 1000px строка помещается
   в одну-две строки, ради чего всё и затевалось. */
@media (min-width:1000px){
    .eco-facts:has(> .eco-fact:nth-child(1):last-child) .eco-fact,
    .eco-facts:has(> .eco-fact:nth-child(2):last-child) .eco-fact{
        flex-direction:row;
        align-items:center;
        gap:1.125rem;
        text-align:left;
        padding:1rem 1.375rem;
    }
    .eco-facts:has(> .eco-fact:nth-child(1):last-child) .eco-fact__value,
    .eco-facts:has(> .eco-fact:nth-child(2):last-child) .eco-fact__value{
        flex:0 0 auto;
        margin-bottom:0;
        line-height:1.1;
    }
    .eco-facts:has(> .eco-fact:nth-child(1):last-child) .eco-fact__text,
    .eco-facts:has(> .eco-fact:nth-child(2):last-child) .eco-fact__text{
        max-width:none;
        margin:0;
        text-align:left;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Должности в карточках руководства (/about/management/) — правка
   клиента 09.09.2026: «должности не сильно отличаются визуально (может
   цветом другим сделать или курсивом)».
   ══════════════════════════════════════════════════════════════════════

   Разметка (templates/about-management.php): .management-item__name —
   фамилия и имя, .management-item__descr — должность. Обе строки шли
   одним цветом текста, различаясь только кеглем и насыщенностью, и на
   карточке с трёхстрочной должностью граница между «кто» и «кем
   работает» терялась.

   Из двух предложенных клиентом средств берём ОБА, но каждое в
   половинной дозе: курсив + приглушённый серый (#5a6572 — тот же, что
   уже носят вторичные подписи сайта, см. .eco-decay__unit выше по
   файлу; новый цвет не заводим). Один курсив на мелком кегле
   кириллицы читается хуже прямого начертания, один цвет без наклона —
   слабее того контраста, который клиент просил. Вместе они дают
   различие, заметное с первого взгляда, не превращая должность в
   декоративную строку.

   .management-general__descr (должность генерального директора над
   сеткой) НЕ ТРОГАЕМ: она стоит одна под именем, ни с чем не
   соседствует и путаницы, о которой правка, там нет. */
.management-item__descr{
    color:#5a6572;
    font-style:italic;
}

/* ══════════════════════════════════════════════════════════════════════
   Фото в карточках руководства (/about/management/) — вторая половина
   правки клиента 09.09.2026: «Фото маленькие» (первая половина —
   должности курсивом, правило .management-item__descr выше).
   ══════════════════════════════════════════════════════════════════════

   Мера подрядчика (line 1, четыре ступени): 4.5rem высоты на телефоне,
   6.75rem с 768px, 8.1rem с 1000px, 11.25rem с 3000px. На десктопе это
   129.6×104.4px — портрет размером с крупную иконку, из-за чего лицо
   на карточке шириной 380px читалось хуже подписи под ним.

   Поднимаем на треть (×4/3) на ВСЕХ ступенях от 768px, сохраняя
   вендорскую пропорцию 0.8055 (ширина = высота × 0.8055) и вендорский
   же ритм отступа под фото — иначе портрет «съедет» с сетки карточки.
   Телефонная ступень (<768px) НЕ ТРОГАЕТСЯ: там карточки идут в один
   столбец и фото на треть крупнее выдавило бы имя с должностью за
   первый экран.

   Точные значения: 9/7.25rem (768px), 10.8/8.7rem (1000px),
   15/12.0833rem (3000px). Кадрирование не меняется — object-fit:cover
   у .management-item__photo img остаётся вендорским, портрет просто
   печатается крупнее. */
@media (min-width:768px){
    .management-item__photo{height:9rem;width:7.25rem}
}
@media (min-width:1000px){
    .management-item__photo{height:10.8rem;width:8.7rem}
}
@media (min-width:3000px){
    .management-item__photo{height:15rem;width:12.0833rem}
}

/* ══════════════════════════════════════════════════════════════════════
   Город в шапке главной — панорама вместо «дома в углу» (правка клиента
   09.09.2026: «Изображение города … меняем на изображение города как у
   регионального оператора … Это нужно, чтобы занять пустое место между
   баками и городом. Чтобы не так пусто смотрелись»).
   ══════════════════════════════════════════════════════════════════════

   Картинку подменяет templates/home.php (hero-buildings.svg 500×527 →
   hero-city.svg 1000×470, докблок там же).

   РАЗМЕР ЗАДАЁТСЯ ВЫСОТОЙ, А НЕ ШИРИНОЙ — и это главное отличие от
   вёрстки подрядчика (у неё было width в rem на четырёх ступенях).
   Панорама втрое шире прежней картинки, и при задании ШИРИНОЙ её высота
   на средних экранах вырастала до 400px: город поднимался выше кнопки
   «Оформить заявку на договор» и наезжал на неё и на заголовок (отзыв
   клиента 09.09.2026 со скриншотами 900 и 1200px). Ширина при этом
   зависела от ступени, а высота — от пропорции картинки, то есть
   единственная величина, которая реально решает «дотянется ли город до
   текста», шириной не контролировалась вовсе.

   Теперь высота города привязана к высоте баков рядом (.hero-containers,
   замер: 146px на 576, 170px на 768-999, 216px с 1000px): город чуть
   выше баков — как просил клиент («здания теперь меньше баков») — но
   заведомо ниже кнопки, потому что оба блока стоят на низу шапки
   (bottom:0 у .hero-buildings, вёрстка подрядчика).

   Ширина считается сама из пропорции картинки (278×153 ≈ 1.82 после
   правки 18.09.2026, до неё 1000×470 ≈ 2.13): 16.5rem высоты дают 30rem
   ширины, 19rem → 34.5rem, 26rem → 47.3rem, 33rem → 60rem.
   max-width страхует крайний случай узкого-высокого окна: панорама не
   уедет левее середины шапки, к тексту.

   ВЫСОТЫ ПОДНЯТЫ НА 18.09.2026 вместе с заменой картинки на авторскую
   (клиент прислал исходник, докблок в templates/home.php). Новый рисунок
   уже прежнего — 1.82 против 2.13, — и на прежних высотах город терял
   больше сотни пикселей ширины: между баками и городом опять появлялась
   пустая полоса, ровно та, ради которой панораму и заказывали
   09.09.2026. Ступени умножены на 26/20.5 ≈ 1.27, это возвращает прежнюю
   ширину с небольшим запасом (город доходит до правого края шапки).

   СТУПЕНИ ОПУЩЕНЫ 22.09.2026 (правка клиента: «сделаем её аккуратнее,
   гармоничнее в масштабах страницы», два скриншота — как сейчас и как
   нужно). Бумп 18.09 перестарался: он умножал высоты на отношение старой
   и новой пропорции по ЗАЯВЛЕННЫМ 1.82/2.13, тогда как после подрезки
   низа пропорция стала 1.86, и город вышел шире прежней панорамы.
   Замер по присланному эталону — наложением рисунка на скриншот по
   вертикалям домов: нужная высота 24rem против наших 28rem. Ступени
   16.5/19/28/33 → 14/16/24/28. Видно это только на широких окнах: до
   ~1230px ширину всё равно режет max-width:58vw, и там ничего не
   изменилось. Дерево в самой картинке уменьшено отдельно, см.
   tools/illustrations/retree_hero_city.py.

   Мобильная ступень (<576px) НЕ ТРОГАЕТСЯ: там у .hero-buildings img
   своё width:100vw (выше по файлу) — картинка идёт во всю ширину экрана
   под текстом, наезжать ей не на что. */
/* ──────────────────────────────────────────────────────────────────────
   Правки 18.09.2026 к городу в шапке.

   1. МОБИЛЬНАЯ (<576px): картинка была width:100vw и шла от края до края
      экрана, а весь контент шапки — баки, кнопка, полоса «Узнать
      подробности» — живёт в контейнере с отступом 20px. Город оказывался
      шире всего остального и выпирал по краям (отзыв клиента). Теперь он
      равен по ширине контейнеру и стоит вровень с баками.

   2. ДЕСКТОП (≥576px): .hero-buildings абсолютен внутри контейнера, и
      правый дом обрывался на его границе — между городом и краем окна
      оставалась полоса фона («последний дом не достаёт до края»).
      Отрицательный right выносит картинку из контейнера ровно к краю
      окна: (100% - 100vw)/2 — это половина разницы между шириной
      контейнера и шириной окна, то есть его боковой отступ.
      Высота при этом поднята с 26rem до 28rem: без неё город, сдвинутый
      вправо, снова отрывался бы от баков.
   ────────────────────────────────────────────────────────────────────── */
/* Просвет под крышкой бака. Крышка (.garbage__cover) повёрнута на -13.5°
   вокруг левого нижнего угла, и между её нижней кромкой и верхом корпуса
   остаётся щель в пиксель-два. Раньше в неё было видно размытое фото фона и
   это не читалось, а с новым городом в щель попадают белые линии домов —
   заметно на 1000–1100px, где за баком проходит дерево (отзыв клиента
   18.09.2026, замер: на 1000px в щели 10 светлых пикселей, на 1024 — 7,
   на 1100 — 6; на остальных ступенях ноль).

   Лечится нахлёстом в один пиксель — этого хватает на всех проблемных
   ширинах, проверено тем же замером. Высоту крышки (20%) и угол поворота
   не трогаем: это вёрстка подрядчика и вид открытого бака. */
.garbage__cover{margin-bottom:-1px}

@media (max-width:575.98px){
    /* Правый край города НЕ доходит до края контейнера на радиус скругления
       плашки «Узнать подробности» (border-radius сверху 22.5px). Ровно тот же
       приём, что на десктопе с белой плашкой контента, и по той же причине:
       город кончается на верхней линии плашки, и стенка последнего дома,
       попав на закругление угла, повисает над фоном — «дом висит над
       пропастью» (отзыв клиента 22.09.2026). 1.5rem = радиус с запасом.
       Дереву слева запас не нужен: до низа там доходит только ствол, а он
       стоит в 34px от края, дальше закругления. */
    .hero-buildings{left:0;transform:none;width:calc(100% - 1.5rem)}
    .hero-buildings img{width:100%}
}

@media (min-width:576px){
    /* Город стоит на стыке РОВНО как баки — bottom:0 вёрстки подрядчика
       не трогаем. Промежуточная попытка утопить панораму на 1.5rem под
       контент откачена: под стыком идёт ПОЛУПРОЗРАЧНАЯ зелёная плашка
       «Узнать подробности», и заехавшие под неё дома просвечивали сквозь
       заливку (отзыв клиента 09.09.2026). Отрыв от низа, ради которого
       утопление вводилось, лечится не смещением, а preserveAspectRatio
       у самой картинки — см. hero-city.svg. */
    .hero-buildings img{width:auto;height:14rem;max-width:58vw}
    /* Правый край города — ровно по правому краю белой плашки контента
       (.content, та самая со скруглением сверху). Замер 18.09.2026: её
       Величина взята не на глаз: это ровно margin-inline самой плашки
       (см. правило .content ниже в файле), поэтому края совпадают на
       любой ширине автоматически — поменяется формула у плашки,
       поедет и город.

       Две отвергнутые попытки: right:0 (вёрстка подрядчика) оставлял
       между городом и плашкой полосу фона — «последний дом не достаёт
       до края»; привязка к краю ОКНА выносила город за плашку, и на
       широких экранах он торчал сбоку от неё. */
    /* +24px — это радиус скругления плашки (20px) с небольшим запасом:
       выровненный ровно по её краю город упирался правой стенкой дома
       в закругление угла и повисал над ним (отзыв клиента 18.09.2026,
       замер: правый край картинки 1399 = правый край .content,
       border-top-right-radius 20px). Теперь дом стоит на прямом участке. */
    .hero-buildings{right:calc(-1 * clamp(1rem, 3vw, 3rem) + 49px)}
}
@media (min-width:768px){
    .hero-buildings img{height:16rem}
}
@media (min-width:1000px){
    .hero-buildings img{height:24rem}
}
@media (min-width:3000px){
    .hero-buildings img{height:28rem}
}

/* Плашки «Цифра-факт» не обтекают плавающую картинку — правка клиента
   09.09.2026 («чего тут блоки с цифрами с отступом от левого края?»).

   На /about/services/landfills/ последний блок статьи — снимок полигона
   «Малинки» с size=float-left (.eco-figure--float-left, обтекание с
   1000px, см. правило выше). Плашки идут в потоке следом, и левый край
   ряда упирался в эту картинку: ряд начинался от её правой границы, а не
   от края колонки, хотя по высоте уже был ниже снимка.

   clear:both ставит ряд ПОД все плавающие элементы — ровно то же, что
   делает .article-back («ко всем направлениям») ниже по странице.
   Страницам без обтекания (вкладки «Экопросвещения», «Экоцентра»,
   /about/services/lamps/ и /transport/) правило безразлично: очищать
   там нечего. */
.eco-facts{clear:both}

/* Цифры, которые набегают счётчиком (site/plugins/eco-counters), —
   моноширинными знаками. Правка клиента 09.09.2026: «у тебя прыгает
   размер блоков во время анимации, так не должно быть».

   Пропорциональные цифры PT Sans имеют разную ширину («1» уже «8»), и
   на каждом кадре счётчика строка едва заметно дрожала, а в строковом
   виде плашки вместе с ней ездила подпись справа. tabular-nums включает
   табличные знаки — все цифры одной ширины. Вторая половина решения —
   резерв min-width на время анимации, он в самом скрипте.

   Свойство безвредно и когда анимация отключена (prefers-reduced-motion
   или JS выключен): это просто набор знаков шрифта, начертание цифр от
   него не меняется. */
.eco-fact__value,
.bells-data-value{font-variant-numeric:tabular-nums}

/* Шапка внутренних страниц на ширине с бургером (правка владельца 03.11.2026).
   В полосе 1000–1199px строка шапки уже мобильная (5rem вместо 108px), а отступ
   карточки остался от полной версии: под лого было 96px пустоты при 28px над
   ним. И лого стояло правее края карточки на 5–11px: поле контейнера резиновое
   (3vw), а край карточки постоянный — 41px. Главную не трогаем: там лого
   выровнено по тексту баннера, а не по карточке. */
@media (min-width:1000px) and (max-width:1199.98px){
    .page-inner .navbar .container{padding-inline:25px}
    body.page-inner{padding-top:78.5px}
}
.bells-contacts__body>p{margin-bottom:1.2em}.bells-contacts__body>hr{border:0;border-top:1px solid #c1c4c7;margin:0 0 1.375rem;opacity:1}
/* ══════════════════════════════════════════════════════════════════════
   Вкладка «Что принимается», версия 2 (13.11.2026) — страница-копия
   about/services/bells-new, разметка snippets/bells-marking-v2.php.
   Мокап согласован с владельцем по блокам (bd ai-agents-l4ks). Штатные
   компоненты (.docs-list, .eco-fact, .eco-accordion, .diamond-list,
   .bells-contacts) не переопределяются — здесь только раскладка новых
   блоков. Цвета карточек колоколов — узкая роль _BELLS_V2_COLORS
   (tools/design_lint.py), градиент «О пользе» — _GRADIENT_ALLOWED_SELECTORS.
   ══════════════════════════════════════════════════════════════════════ */
#bells-marking-tab-pane [id^="bells-"]{scroll-margin-top:7rem}
.bells-v2-toc{margin-bottom:2.5rem}
@media (max-width:767px){
    .bells-v2-toc .docs-list .nav-item{max-width:100%}
    .bells-v2-toc .docs-list .nav-link{white-space:normal;text-align:left}
}

/* 2. Когда появились: текст слева, штатные плашки колонкой справа */
.bells-v2-history{display:grid;grid-template-columns:1.6fr 1fr;gap:2.5rem;align-items:start;margin-bottom:3rem;font-size:var(--etp-text)}
.bells-v2-history__facts.eco-facts{grid-template-columns:1fr;margin:0}
.bells-v2-history__facts .eco-fact{display:flex;flex-direction:column;align-items:center;justify-content:center}
.bells-v2-history__facts .eco-fact > .eco-fact__text{margin-left:auto;margin-right:auto}
.bells-v2-dots{display:flex;justify-content:center;align-items:center;min-height:1.2em}
.bells-v2-dot{width:.85em;height:.85em;border-radius:50%;display:inline-block}
.bells-v2-dot--yellow{background:#f2d22e}
.bells-v2-dot--green{background:#4cb050;margin-left:-.3em;box-shadow:0 0 0 3px #fff}
@media (max-width:767px){.bells-v2-history{grid-template-columns:1fr;gap:1.25rem}}

/* 3–4. Карточки колоколов: градиент цвета колокола, внутри прозрачные блоки */
.bells-v2-bell{display:grid;grid-template-columns:1fr 34%;gap:2.5rem;align-items:center;border-radius:var(--etp-card-radius);padding:2.2rem 2.6rem;margin-bottom:3rem;font-size:var(--etp-text);isolation:isolate}
.bells-v2-bell--plastic{background:linear-gradient(135deg,#fdf8dc,#fff 70%);border:1px solid #f3e7a6}
.bells-v2-bell--glass{grid-template-columns:34% 1fr;background:linear-gradient(225deg,#f1f7e9,#fff 70%);border:1px solid #d9e8c6}
.bells-v2-bell__image img{width:100%;height:auto;display:block}
.bells-v2-types{list-style:none;margin:1.1rem 0 1.4rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.bells-v2-type{display:flex;align-items:flex-start;gap:.8rem;border:1px solid #e3e6e8;border-radius:var(--etp-card-radius);padding:.75rem .9rem}
.bells-v2-type img{flex-shrink:0;margin-top:.1em}
.bells-v2-type b{display:block}
.bells-v2-type span{display:block;color:#5a6572;font-size:var(--etp-note);line-height:1.25}
.bells-v2-hint{display:flex;gap:.9rem;border:1px solid #e3e6e8;border-radius:var(--etp-card-radius);padding:1rem 1.2rem;font-size:var(--etp-note)}
.bells-v2-hint__icon{width:1.4em;height:1.4em;flex-shrink:0;color:#5fb9bd}
.bells-v2-hint p:last-child{margin-bottom:0}
.bells-v2-bell__more{grid-column:1/-1;border-top:1px solid #e3e6e8;padding-top:1.6rem}
.bells-v2-no.eco-accordion{background:transparent;margin-bottom:0}
.bells-v2-no__list{list-style:none;margin:0;padding:0}
.bells-v2-no__row{display:flex;gap:1rem;align-items:flex-start;padding:.85rem 0;border-top:1px solid #e3e6e8;line-height:1.4}
.bells-v2-no__row p{margin:0}
.bells-v2-no__icon{width:36px;height:36px;flex-shrink:0;filter:grayscale(1);opacity:.7}
@media (max-width:767px){
    .bells-v2-bell,.bells-v2-bell--glass{grid-template-columns:1fr;gap:1.2rem;padding:1.3rem 1.2rem}
    .bells-v2-bell--glass .bells-v2-bell__image{order:2}
    .bells-v2-bell--glass .bells-v2-bell__main{order:1}
    .bells-v2-bell--glass .bells-v2-bell__more{order:3}
    .bells-v2-types{grid-template-columns:1fr}
}

/* 6. О пользе — фирменный градиент промо-блоков (DESIGN.md «Промо-блоки») */
.bells-benefit{background:linear-gradient(120deg, #a1c778 0%, #5fb9bd 100%);color:#fff;border-radius:var(--etp-card-radius);padding:2.25rem 2.4rem;margin-bottom:3rem;font-size:var(--etp-text)}
.bells-benefit p{color:#fff}
.bells-benefit__title{color:#fff;font-size:var(--etp-accent);font-weight:700;margin:0 0 .5rem}
.bells-benefit__lead{margin-bottom:1.6rem}
.bells-benefit__grid,.bells-benefit__made{list-style:none;margin:0;padding:0;display:grid}
.bells-benefit__grid{grid-template-columns:repeat(3,1fr);margin-bottom:2rem}
.bells-benefit__item{padding:.4rem 1.8rem;line-height:1.4}
.bells-benefit__item:first-child{padding-left:0}
.bells-benefit__item:last-child{padding-right:0}
.bells-benefit__item + .bells-benefit__item{border-left:1px solid rgba(255,255,255,.6)}
.bells-benefit__item p{margin:0}
.bells-v2-icon{width:2.1rem;height:2.1rem;display:block;color:#fff;margin-bottom:.9rem}
.bells-benefit__call{font-size:var(--etp-title);font-weight:700;line-height:1.3;margin-bottom:.4rem}
.bells-benefit__sub{margin-bottom:1rem}
.bells-benefit__made{grid-template-columns:1fr 1fr;gap:1rem}
.bells-benefit__made li{border:1px solid rgba(255,255,255,.75);border-radius:var(--etp-card-radius);padding:1.2rem 1.3rem;line-height:1.4}
.bells-benefit__made b{display:block;margin-bottom:.3rem}
.bells-benefit__made p{margin:0}
@media (max-width:767px){
    .bells-benefit{padding:1.4rem 1.2rem}
    .bells-benefit__grid,.bells-benefit__made{grid-template-columns:1fr}
    .bells-benefit__item{padding:1rem 0}
    .bells-benefit__item + .bells-benefit__item{border-left:0;border-top:1px solid rgba(255,255,255,.6)}
}

/* 7. Контакты — заголовок над штатным текстом */
.bells-v2-contacts__title{font-size:var(--etp-accent);margin-bottom:1rem}
/* правило сайта для трех плашек (.eco-facts:has(...)) ставит их в ряд —
   здесь колонка рядом с текстом, поэтому селектор сильнее */
.bells-v2-history .eco-facts.bells-v2-history__facts:has(> .eco-fact){grid-template-columns:1fr}
.bells-v2-history__text p,.bells-v2-bell__main p,.bells-v2-hint p,.bells-v2-bell__lead p{margin-bottom:.8em}
.bells-v2-bell__main > :last-child,.bells-v2-hint p:last-child{margin-bottom:0}
.bells-v2-bell__lead{margin-bottom:1rem}