/* ==========================================================
		   NSIFT MIS — главная страница. Дизайн v4: светлая тема,
		   современная типографика (Unbounded/Golos Text/JetBrains
		   Mono), карта-герой в светлых тонах. Все брейкпоинты и
		   исправления адаптива, найденные ранее, перенесены сюда.
		   ========================================================== */
		:root{
			--paper: #F6F8FC;
			--surface: #FFFFFF;
			--surface-tint: #EEF2FB;
			--surface-sunken: #E7ECF6;
			--ink: #10192B;
			--ink-soft: #57607A;
			--ink-faint: #8891A8;
			--primary: #2352E0;
			--primary-dark: #17399E;
			--primary-soft: #E7EEFF;
			--accent: #F0801F;
			--accent-2: #C9601C;
			--accent-soft: #FDE7D2;
			--line: #E2E7F1;
			--line-strong: #CBD3E3;
			--danger: #D64545;

			--font-display: 'Unbounded', 'Golos Text', sans-serif;
			--font-body: 'Golos Text', -apple-system, 'Segoe UI', Arial, sans-serif;
			--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

			--space-xs: 8px;
			--space-sm: 12px;
			--space-md: 20px;
			--space-lg: 30px;
			--space-xl: 48px;

			--radius-sm: 8px;
			--radius-md: 14px;
			--radius-lg: 24px;
			--radius-pill: 999px;

			--shadow-sm: 0 2px 10px rgba(16, 25, 43, .06);
			--shadow-md: 0 10px 28px rgba(16, 25, 43, .10);
			--shadow-lg: 0 20px 48px rgba(16, 25, 43, .14);

			--transition: .2s ease;
			--container-width: 1200px;
		}

		/* ---------- Базовый сброс ---------- */
		*, *::before, *::after{ box-sizing: border-box; }
		img{ max-width: 100%; height: auto; }
		body{
			margin: 0;
			padding: 0;
			font-family: var(--font-body);
			color: var(--ink);
			background: var(--paper);
		}
		a{ color: var(--primary); }
		h1, h2, h3, h4, h5, h6{
			font-family: var(--font-display);
			font-weight: 700;
			line-height: 1.22;
			margin: 0 0 var(--space-sm);
			letter-spacing: -.01em;
		}
		.eyebrow{
			font-family: var(--font-mono);
			font-size: 12px;
			letter-spacing: .07em;
			text-transform: uppercase;
			color: var(--accent-2);
			font-weight: 500;
		}
		.num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

		/* ==========================================================
		   ШАПКА / НАВИГАЦИЯ
		   ========================================================== */
		/* max-width + margin:auto делает шапку отдельной "плавающей" панелью
		   на фоне var(--paper) на широких экранах — с sticky;top:0 верхние
		   углы всегда прижаты к самому верху вьюпорта (никогда не видны),
		   а вот нижние на contrastном фоне были прямыми — острая,
		   старомодная плита. Скругляем только низ, верх трогать не нужно. */
		#nav_menu_container{
			width: 100%;
			max-width: var(--container-width);
			background: var(--surface);
			margin: 0 auto;
			min-height: 68px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: center;
			position: sticky;
			top: 0;
			z-index: 500;
			box-shadow: var(--shadow-sm);
			border-radius: 0 0 var(--radius-lg) var(--radius-lg);
		}
		.logo{
			display: grid;
			grid-template-columns: 44px 1fr;
			width: 500px;
			align-items: center;
			margin-left: var(--space-md);
			min-height: 65px;
			padding: 8px 0;
			cursor: pointer;
		}
		.logo img{ width: 44px; flex: none; }
		.logo div{ padding-left: 10px; min-width: 0; }
		.logo div p{
			font-family: var(--font-display);
			font-size: 13px;
			font-weight: 700;
			margin: 0;
			color: var(--ink);
			line-height: 1.3;
		}
		/* Раньше .logo/#nav_menu_container имели фиксированную height —
		   при переносе длинного названия фонда на 2–3 строки контент
		   вылезал за рамки шапки. Теперь высота гибкая (min-height),
		   а подзаголовок ниже — однострочный с многоточием. */
		.title_desc{
			display: block;
			font-size: 11px;
			font-weight: 400;
			color: var(--ink-faint);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 100%;
		}
		/* Пункты меню держались на justify-content:space-between без
		   явного gap — если флекс-контейнер не растягивался шире своего
		   контента, пункты слипались вплотную без единого пробела.
		   Заменено на явный gap, который работает на любой ширине. */
		.menu_items{
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 4px;
			margin-left: 10px;
			margin-top: var(--space-md);
			width: auto;
			max-width: 100%;
		}
		.menu_items li a{
			display: inline-block;
			padding: 8px 14px;
			border-radius: var(--radius-pill);
			color: var(--ink-soft);
			font-weight: 600;
			font-size: 14px;
			text-decoration: none;
			white-space: nowrap;
			transition: background-color var(--transition), color var(--transition);
		}
		.menu_items li a:hover{ background: var(--surface-tint); color: var(--primary); text-decoration: none; }

		.menu_btns{
			display: grid;
			grid-template-columns: 24px auto;
			align-items: center;
			justify-content: end;
			gap: 4px;
		}

		/* Выпадающее меню языка — раньше плоская прямоугольная кнопка без
		   скругления и жёсткий прямоугольный попап рядом с пилюлями
		   .menu_items li a (border-radius: var(--radius-pill)) смотрелись
		   как случайный обломок старого шаблона. Приводим к тому же языку
		   форм: скруглённая кнопка с фоном на hover, попап на card-радиусе
		   с мягким появлением (fade + сдвиг) вместо жёсткого display:none/block. */
		.dropbtn {
			background-color: transparent;
			color: var(--ink-soft);
			padding: 10px 14px;
			font-size: 14px;
			font-weight: 600;
			border: none;
			border-radius: var(--radius-pill);
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			transition: background-color var(--transition), color var(--transition);
		}
		.dropbtn:hover{ background-color: var(--surface-tint); }
		.dropdown { position: relative; display: inline-block; }
		.dropdown-content {
			display: block; position: absolute; right: 0; top: calc(100% + 6px);
			background-color: var(--surface);
			min-width: 160px; box-shadow: var(--shadow-md);
			border-radius: var(--radius-md); overflow: hidden; z-index: 999;
			border: 1px solid var(--line);
			opacity: 0; visibility: hidden; transform: translateY(-6px);
			transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		}
		.dropdown-content a { color: var(--ink); padding: 12px 16px; text-decoration: none; display: block; font-size: 14px; transition: background-color var(--transition); }
		.dropdown-content a:hover{ background-color: var(--surface-tint); }
		.dropdown:hover .dropdown-content{ opacity: 1; visibility: visible; transform: translateY(0); }
		.dropdown:hover .dropbtn{ background-color: var(--surface-tint); color: var(--primary); }
		.menu_btns a i{ color: var(--ink-faint); transition: color var(--transition); }
		.menu_btns a i:hover{ color: var(--primary); }

		.nav_right_block{ display: grid; grid-template-columns: 1fr 145px; }
		.menu_btn_icon{ display: none; }
		#nav_menu_container_mobile{
			display: none;
			position: sticky;
			top: 0;
			z-index: 500;
			background: rgba(246,248,252,.92);
			backdrop-filter: blur(10px);
			box-shadow: var(--shadow-sm);
			border-radius: 0 0 var(--radius-md) var(--radius-md);
		}
		.mobile-menu-panel{
			display: none; position: absolute; top: 100%; left: 0; right: 0;
			background: var(--surface); box-shadow: var(--shadow-md);
			z-index: 1000; border-top: 1px solid var(--line);
		}
		.mobile-menu-panel.open{ display: block; }
		.mobile-menu-panel__links{ list-style-type: none; margin: 0; padding: 0; }
		.mobile-menu-panel__links li + li{ border-top: 1px solid var(--line); }
		.mobile-menu-panel__links li a{ display: block; padding: 15px var(--space-md); color: var(--primary); font-weight: 600; text-decoration: none; }
		.mobile-menu-panel__lang{ display: flex; gap: var(--space-md); padding: 15px var(--space-md); background: var(--surface-tint); }
		.mobile-menu-panel__lang a{ color: var(--ink-faint); text-decoration: none; font-size: 13px; }

		/* ==========================================================
		   КНОПКИ-КАРТОЧКИ ПРОЕКТОВ (CSP / SERSP)
		   ========================================================== */
		.projects_bnts{
			background: transparent;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr;
			justify-items: center;
		}
		.projects_bnts_div{
			background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
			width: 100%;
			max-width: 420px;
			margin: 24px auto;
			border-radius: var(--radius-lg);
			padding: 28px 26px;
			color: var(--surface);
			box-shadow: var(--shadow-md);
			transition: transform var(--transition), box-shadow var(--transition);
		}
		.projects_bnts_div:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
		.projects_bnts div p{ font-family: var(--font-display); font-size: 19px; font-weight: 700; }
		.projects_tns_moredet{ display: grid; grid-template-columns: 100px 20px; align-items: center; }
		.projects_tns_moredet img{ width: 24px; }

		/* ==========================================================
		   ОБРАТНАЯ СВЯЗЬ / BFM
		   ========================================================== */
		.bfm_content{
			background: var(--surface);
			border: 1px solid var(--line);
			border-radius: var(--radius-lg);
			box-shadow: var(--shadow-sm);
			font-size: 14px;
			width: 98%;
			margin: 0 auto;
			padding: 44px;
		}
		.bfm_content h1{ color: var(--ink); font-size: 26px; }
		.file_content{ color: var(--accent); font-size: 26px; text-transform: uppercase; }
		.bfm_content h4{ color: var(--ink); margin-top: 15px; }
		.bfm_content p{ color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
		/* Ограничено .bfm_content — иначе тег-селектор "select" утекал бы
		   и на .filter_select в блоке карты, у которого своё оформление. */
		.bfm_content select{
			padding: 12px 10px;
			width: 100%;
			max-width: 300px;
			border: 1px solid var(--line-strong);
			border-radius: var(--radius-sm);
			background: var(--surface-tint);
			font-family: inherit;
		}

		.tab {
			overflow: hidden;
			display: inline-flex;
			gap: 4px;
			padding: 4px;
			background: var(--surface-tint);
			border-radius: var(--radius-pill);
			margin-top: var(--space-md);
			border: none;
		}
		.tab button {
			background-color: transparent;
			border: none;
			outline: none;
			cursor: pointer;
			padding: 10px 20px;
			border-radius: var(--radius-pill);
			transition: background-color var(--transition), color var(--transition);
			font-size: 13px;
			font-weight: 700;
			color: var(--ink-soft);
		}
		.tab button.active{ background-color: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
		.tabcontent { display: none; padding: 20px 0 0; }

		.send_anon_btn{
			background: linear-gradient(135deg, var(--accent), var(--accent-2));
			color: var(--surface);
			border: none;
			padding: 14px 26px;
			width: auto;
			max-width: 100%;
			white-space: normal;
			border-radius: var(--radius-pill);
			margin: var(--space-md) 0;
			outline: 0;
			cursor: pointer;
			font-weight: 700;
			box-shadow: var(--shadow-sm);
			transition: transform var(--transition), box-shadow var(--transition);
		}
		.send_anon_btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
		.send_anon_btn:active{ transform: translateY(0); }
		.form-group{ display: grid; grid-template-rows: 1fr; grid-gap: 8px; }
		.form-group label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
		.form-control{
			border: 1px solid var(--line-strong);
			padding: 12px;
			border-radius: var(--radius-sm);
			outline: 0;
			background: var(--surface-tint);
			font-family: var(--font-body);
		}
		.form-group select:focus, .form-control:focus{ outline: 2px solid var(--primary); outline-offset: 1px; }
		.col{ margin-top: var(--space-md); }
		textarea{ font-family: var(--font-body); }

		.half-circle-button {
			width: auto;
			max-width: 100%;
			min-height: 44px;
			border-radius: var(--radius-pill);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background-color: var(--ink);
			color: var(--surface);
			padding: 10px 16px;
			border: none;
			text-align: center;
			line-height: 1.3;
			text-decoration: none;
			white-space: nowrap;
			font-family: var(--font-body);
			font-weight: 600;
			font-size: 12.5px;
			transition: background-color var(--transition), transform var(--transition);
		}
		.half-circle-button:hover{ background-color: var(--primary-dark); color: var(--surface); text-decoration: none; transform: translateY(-2px); }

		/* Раньше две .half-circle-button были прибиты position:absolute с
		   left/right:-260px от .btn-group — работало только на широком
		   десктопе. Теперь .btn-group — обычный flex-ряд с переносом,
		   и все элементы в нём одной высоты (44px), чтобы стоять "в
		   одну линию", а не вразнобой. */
		/* Текста в этих 4 элементах реально много ("Количество приоритетов,
		   требующих финансирования: 789" — 55 символов), flex-wrap:wrap
		   на большинстве ширин ронял 4-й элемент на вторую строку.
		   Держим все элементы строго в одну строку (nowrap) и даём
		   собственный горизонтальный скролл только этой полоске, если
		   когда-нибудь не влезет, — вместо того чтобы ломать вёрстку
		   всей страницы или переносить строку. */
		.btn-group{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
			/* justify-content: center на переполненном flex-контейнере в
			   части браузеров обрезает начало контента слева без
			   возможности проскроллить к нему ("unsafe" центрирование).
			   safe center — тот же результат, когда всё влезает, но не
			   прячет контент, если не влезло. Неизвестное браузеру
			   значение просто игнорируется, откатываясь к строке выше. */
			justify-content: safe center;
			gap: 10px;
			width: 100%;
			max-width: 100%;
			overflow-x: auto;
			padding: 4px 2px 10px;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: thin;
		}
		.btn-group > *{ flex: none; }
		.btn-group::-webkit-scrollbar{ height: 6px; }
		.btn-group::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 3px; }
		.btn-group::-webkit-scrollbar-track{ background: transparent; }

		/* Раньше два переключателя ("Профинансированные приоритеты" /
		   "Приоритеты, требующие финансирования") были двумя отдельными
		   кнопками со случайным несимметричным border-radius — теперь
		   это один сегментированный контрол с общей рамкой, соединённый
		   посередине, как и задумывался изначально. */
		.type-toggle{
			display: inline-flex;
			height: 44px;
			border: 1px solid var(--primary);
			border-radius: var(--radius-pill);
			overflow: hidden;
		}
		.type-toggle .btn-check{ position: absolute; opacity: 0; pointer-events: none; }
		.type-toggle label.btn{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			padding: 0 16px;
			border: none;
			border-radius: 0;
			color: var(--primary);
			background: var(--surface);
			cursor: pointer;
			font-size: 12.5px;
			font-weight: 600;
			white-space: nowrap;
			transition: background-color var(--transition), color var(--transition);
		}
		.type-toggle label.btn:last-of-type{ border-left: 1px solid var(--primary); }
		.type-toggle .btn-check:checked + label.btn{ background: var(--primary); color: var(--surface); }

		#footer{ width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-md); }
		.contacts_block{ width: 100%; max-width: var(--container-width); background: transparent; margin: 0 auto; }

		/* ==========================================================
		   ОТКРЫТЫЕ ЗАЯВКИ — карточки-ссылки на формы заявок (SERSP,
		   JSDF и т.д.). Список задаётся PHP-массивом $open_applications
		   ниже по файлу: чтобы добавить новую форму, достаточно
		   добавить ещё один элемент массива, здесь ничего менять не
		   нужно — сетка сама подстроится (auto-fit).
		   ========================================================== */
		.open-apps{ width: 100%; max-width: var(--container-width); margin: var(--space-xl) auto var(--space-lg); padding: 0 var(--space-md); }
		.open-apps__head{ text-align: center; margin-bottom: var(--space-lg); }
		.open-apps__head h2{ font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); margin: 0 0 var(--space-xs); }
		.open-apps__head p{ color: var(--ink-soft); margin: 0; font-size: 15px; }
		.open-apps__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
		.open-apps__card{
			display: flex; flex-direction: column;
			background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
			padding: var(--space-lg); text-decoration: none; color: inherit;
			box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
		}
		.open-apps__card:hover, .open-apps__card:focus-visible{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); text-decoration: none; color: inherit; }
		.open-apps__icon{
			width: 56px; height: 56px; border-radius: var(--radius-md);
			background: linear-gradient(135deg, var(--primary), var(--primary-dark));
			color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px;
			margin-bottom: var(--space-md);
		}
		.open-apps__badge{
			display: inline-block; align-self: flex-start;
			background: var(--accent-soft); color: var(--accent-2);
			font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
			padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: var(--space-sm);
		}
		.open-apps__card h3{ font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 var(--space-xs); line-height: 1.3; }
		.open-apps__card p{ color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 0 0 var(--space-md); flex-grow: 1; }
		.open-apps__deadline{
			display: inline-flex; align-items: center; gap: 6px;
			color: var(--danger); font-size: 12.5px; font-weight: 600; margin-bottom: var(--space-sm);
		}
		.open-apps__cta{ display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 14px; }
		.open-apps__card:hover .open-apps__cta i{ transform: translateX(3px); }
		.open-apps__cta i{ transition: transform var(--transition); }

		/* ==========================================================
		   КАРТА (боевой Leaflet) / ФИЛЬТРЫ
		   ========================================================== */
		.leaflet-popup{ width: 90vw; max-width: 500px; }
		#map {
			margin: 0 auto;
			height: 600px;
			width: 100%;
			max-width: var(--container-width);
			background-color: var(--surface-sunken);
			border-radius: var(--radius-lg);
			overflow: hidden;
			border: 1px solid var(--line);
		}
		/* Кнопки/панели управления картой (создаются в JS через
		   L.DomUtil.create('div','custom-control')) раньше не были учтены
		   дизайном вообще — кнопки рендерились как голые системные
		   <button>, торчащие поверх аккуратной белой панели. */
		.custom-control {
			background: var(--surface);
			border: 1px solid var(--line-strong);
			border-radius: var(--radius-sm);
			padding: 5px;
			margin: 10px;
			box-shadow: var(--shadow-sm);
			font-family: var(--font-body);
			display: flex;
			flex-direction: column;
		}
		.custom-control button {
			margin: 2px 0;
			padding: 7px 9px;
			cursor: pointer;
			background: var(--surface-tint);
			border: 1px solid var(--line);
			border-radius: var(--radius-sm);
			color: var(--ink-soft);
			transition: background-color var(--transition), color var(--transition);
		}
		.custom-control-divider{ height: 1px; background: var(--line); margin: 3px 2px; }
		.custom-control button:hover{ background: var(--primary-soft); color: var(--primary); }
		.custom-control button.active{ background: var(--primary); color: var(--surface); border-color: var(--primary); }
		.custom-control h3, .custom-control h4{ font-family: var(--font-display); color: var(--ink); }
		.custom-control p{ color: var(--ink-soft); }
		.custom-control label{ color: var(--ink-soft); }
		.custom-control #closeSettings{
			background: var(--surface-tint) !important;
			border: 1px solid var(--line-strong) !important;
			border-radius: var(--radius-sm) !important;
			color: var(--ink) !important;
			font-family: var(--font-body);
		}
		.custom-control #closeSettings:hover{ background: var(--primary-soft) !important; }

		/* В режиме "types=subproject_funding" кластеры на карте получают
		   класс marker-cluster-funding-medium — его не было НИ в одной
		   подключённой Leaflet-теме (ни в MarkerCluster.Default.css, ни
		   в кастомном MarkerCluster.1.5.0.css) и не был определён в этом
		   файле. Кластеры оставались без цвета заливки — фактически
		   невидимыми кружками. Это старый баг, не из моих сегодняшних
		   правок, но он и есть причина "не работает карта в режиме
		   subproject_funding". */
		.marker-cluster-funding-medium{ background-color: rgba(240, 129, 31, .55); }
		.marker-cluster-funding-medium div{ background-color: rgba(201, 96, 28, .8); color: #fff; }

		/* Стандартный зум-контрол Leaflet (+/-) рядом с нашей панелью
		   .custom-control выглядел визуально из другого мира — родная
		   Leaflet-тема, без связи с остальным дизайном. Переопределяем
		   под ту же карточку/палитру. */
		.leaflet-bar{
			border: 1px solid var(--line-strong) !important;
			border-radius: var(--radius-sm) !important;
			box-shadow: var(--shadow-sm) !important;
			overflow: hidden;
		}
		.leaflet-bar a{
			background: var(--surface) !important;
			color: var(--ink-soft) !important;
			border-bottom: 1px solid var(--line) !important;
			width: 32px !important;
			height: 32px !important;
			line-height: 32px !important;
			font-family: var(--font-body);
			transition: background-color var(--transition), color var(--transition);
		}
		.leaflet-bar a:last-child{ border-bottom: none !important; }
		.leaflet-bar a:hover{ background: var(--primary-soft) !important; color: var(--primary) !important; }

		#filter_block {
			background: var(--surface);
			width: 100%;
			max-width: var(--container-width);
			margin: 22px auto 0;
			padding: var(--space-md) var(--space-lg);
			border-radius: var(--radius-lg);
			border: 1px solid var(--line);
			border-top: 4px solid var(--primary);
			box-shadow: var(--shadow-sm);
		}
		.allfilters{
			background: transparent;
			width: 100%;
			margin: 6px 0 0;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
			gap: 15px;
			align-items: end;
			color: var(--ink);
			font-weight: 600;
			font-size: 13px;
		}
		.allfilters p{ margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
		.allfilters .filter_btn_col{ display: flex; align-items: end; }
		.allfilters .filter_btn_col button{
			width: 100%;
			border-radius: var(--radius-sm);
			background: var(--ink);
			color: var(--surface);
			border: none;
			padding: 13px;
			font-weight: 700;
			cursor: pointer;
			transition: opacity var(--transition);
		}
		.allfilters .filter_btn_col button:hover{ opacity: .88; }
		.filter_select{
			outline: 0;
			width: 100%;
			max-width: 320px;
			padding: 10px 12px;
			border: 1px solid var(--line-strong);
			border-radius: var(--radius-sm);
			background: var(--surface-tint);
			color: var(--ink);
			font-family: inherit;
		}
		.filter_select:focus{ outline: 2px solid var(--primary); outline-offset: 1px; }

		.typology_filter_grid{
			list-style-type: none;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: var(--space-lg);
			padding: 0;
			margin: var(--space-lg) 0 0;
		}

		#slider_block{
			background: transparent;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			min-height: 347px;
			padding-bottom: var(--space-xl);
		}
		.slider_card{
			width: 100%;
			display: grid;
			grid-template-columns: 1fr 450px;
			color: var(--surface);
			border-radius: var(--radius-md);
			overflow: hidden;
			box-shadow: var(--shadow-md);
		}
		.slider_card img{ width: 100%; height: 100%; object-fit: cover; }

		.project_intro_card{
			background: var(--surface);
			border: 1px solid var(--line);
			border-radius: var(--radius-lg);
			box-shadow: var(--shadow-sm);
			padding: var(--space-lg);
			margin-top: var(--space-lg);
		}
		.project_desc_header{ display: grid; grid-template-columns: 222px 1fr; grid-gap: var(--space-lg); align-items: center; }
		.project_desc_header img{ max-width: 100%; border-radius: var(--radius-md); }

		/* ==========================================================
		   ПОДВАЛ
		   ========================================================== */
		#footer_devider{
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
			gap: var(--space-lg);
			width: 100%;
			background: var(--ink);
			color: rgba(246,248,252,.6);
			border-radius: var(--radius-lg);
			padding: 40px 30px;
		}
		#footer_devider ul{ list-style-type: none; margin: 0; padding: 0; }
		#footer_devider ul li a{ font-size: 14px; color: rgba(246,248,252,.88); text-decoration: none; word-break: break-word; transition: color var(--transition); }
		#footer_devider ul li a:hover{ color: var(--accent); text-decoration: none; cursor: pointer; }
		#footer_devider ul li{ padding-top: 14px; }
		#footer_devider h2{ font-family: var(--font-mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: rgba(246,248,252,.9); margin: 0; }
		#footer_bottom{ display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: var(--container-width); background: transparent; margin: 0 auto; align-items: center; }

		/* bottom:22px раньше сажал кнопку "наверх" ровно в тот же угол,
		   куда Google reCAPTCHA v3 (см. api.js в <head>) сама вставляет
		   свой бейдж — они накладывались друг на друга. Поднял кнопку
		   выше бейджа. */
		#scrollDiv {
			width: 48px; height: 48px; text-align: center; font-size: 11px; color: var(--surface); font-weight: bold;
			border-radius: var(--radius-pill); background-color: var(--ink); border: none;
			box-shadow: var(--shadow-md); position: fixed; right: 26px; bottom: 92px; cursor: pointer;
			transition: transform var(--transition);
			z-index: 400;
		}
		#scrollDiv:hover{ transform: translateY(-3px); }
		.scrollDiv1{ width: 28px; margin: 9px 0 0 0; }
		#partners_block{ width: 100%; max-width: var(--container-width); background: transparent; margin: 0 auto; padding: var(--space-lg); }

		.two_projects_block{
			display: grid;
			grid-template-columns: 1fr 1px 1fr;
			width: 100%;
			max-width: var(--container-width);
			background: transparent;
			margin: 22px auto;
			grid-gap: 15px;
		}
		.horiz_line{ height: 100%; width: 1px; background: var(--line-strong); }

		input[type=checkbox] { display: none; }
		.label { display: inline-block; margin-top: 5px; padding: 3px; font-weight: 500; }
		input[type=checkbox]:checked + .label {
			color: var(--surface);
			background: var(--primary);
			font-weight: bold;
			padding: 4px 10px;
			border-radius: 20px;
			text-align: center;
		}

		/* ==========================================================
		   АДАПТИВНОСТЬ
		   ========================================================== */
		@media only screen and (max-width: 1200px) {
			#nav_menu_container{ padding: 0 var(--space-md); }
			.logo{ width: auto; }
			#footer_devider{ padding: var(--space-lg) var(--space-md); }
		}

		@media only screen and (max-width: 900px) {
			.typology_filter_grid{ grid-template-columns: repeat(2, 1fr); }
			#filter_block{ padding: var(--space-md) var(--space-sm); }
			.slider_card{ grid-template-columns: 1fr !important; height: auto !important; }
			.slider_card img{ width: 100%; height: 220px; object-fit: cover; }

			.two_projects_block{ grid-template-columns: 1fr; }
			.horiz_line{ width: 100%; height: 1px; }
			.project_desc_header{
				grid-template-columns: 1fr !important;
				justify-items: center;
				text-align: center;
			}
			.project_desc_header img{ width: 160px !important; }

			.hero__map{ max-width: 480px; margin: 0 auto; }
		}

		@media only screen and (max-width: 600px) {
			.menu_btn_icon{ display: block; }
			.menu_items{ display: none; }
			.menu_btns{ display: none; }
			#nav_menu_container{ display: none; }

			#nav_menu_container_mobile{
				display: grid;
				grid-template-columns: 1fr 33px;
				align-items: center;
			}

			.projects_bnts { grid-template-columns: 1fr; }

			.contacts_block{ width: 100%; }
			#footer_devider{ grid-template-columns: 1fr; }
			#footer_bottom{ grid-template-columns: 1fr; text-align: center; }

			.leaflet-popup{ width: 90vw !important; max-width: 350px; }
			.leaflet-popup-content{ width: auto !important; }

			.typology_filter_grid{ grid-template-columns: 1fr 1fr !important; }

			.project_desc_header img{ width: 140px !important; }
		}