/*
Theme Name: Hello Elementor Child
Theme URI: https://tandix.sdlab.ee
Description: Дочерняя тема Tandix. Вёрстка главной собрана по прототипу project-tandix-hub.lovable.app (генерируется td-home-build.py + td-home.css + build-style.py).
Author: SDLab
Author URI: https://sdlab.ee
Template: hello-elementor
Version: 1.0.3
Text Domain: hello-elementor-child
*/

/* ============================================================
   TANDIX — главная страница. Вёрстка по прототипу
   https://project-tandix-hub.lovable.app
   Замеры (CDP, 1440): boxed-контент 1336 (max-w-1400 + px-32),
   секции py-96, hero-карточка 1393x623 r20, h1 72/1.03/800,
   h2 48/1.08/800/-1.2px, карточки r16, тёмные карточки #1b2432.
   ============================================================ */

:root {
	--td-bg: #f5f7fa;
	--td-fg: #1b2432;
	--td-card: #ffffff;
	--td-primary: #1b2432;
	--td-primary-fg: #f5f7fa;
	--td-secondary: #e7ebf1;
	--td-muted: #edf0f5;
	--td-muted-fg: #4c566b;
	--td-accent: #ff6a28;
	--td-accent-fg: #131a24;
	--td-accent-on-light: #b8420e;
	--td-border: #d6dce5;
	--td-font: 'Pliant', ui-sans-serif, system-ui, sans-serif;
	--td-font-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--td-font-mono: 'Alumni Sans Pinstripe', ui-monospace, monospace;
	--td-metal: linear-gradient(135deg, #f1f2f2 0%, #cecfce 26%, #9a9a9a 46%, #767677 58%, #e0e1e0 78%, #b8b9b8 100%);
	--td-chip-metal: conic-gradient(from 145deg, #f1f2f2 0%, #dbdcdb 24%, #b8b9b8 46%, #fff 60%, #cecfce 82%, #e0e1e0 100%);
}

body {
	font-family: var(--td-font) !important;
	color: var(--td-fg) !important;
	background-color: var(--td-bg) !important;
}

/* Базовый слой прототипа задаёт ВСЕМ заголовкам `word-spacing: .06em`
   (`h1,h2,h3,h4,h5,h6 {
	...word-spacing: .06em !important;
}`) и
   `text-rendering: optimizeLegibility`. Без этого h1 на /materials на 375
   переносился на строку иначе (97px вместо 130). Правило проверено инъекцией
   на всех страницах: высоты не меняются нигде, кроме нужных переносов.
   Исключения ниже — элементы, которые в прототипе НЕ заголовки, а div/button
   (заголовки карточек там `div.font-display`, вопрос FAQ — `button`), поэтому
   .06em у них не должно применяться. */
h1, h2, h3, h4, h5, h6 {
	word-spacing: .06em !important;
}

body {
	text-rendering: optimizeLegibility !important;
}

.td-icard-title .elementor-heading-title,
.td-ccard-title .elementor-heading-title,
.td-abq-title .elementor-heading-title,
.td-ab-faq .elementor-tab-title {
	word-spacing: normal !important;
}

/* ---------- общие элементы ---------- */

.td-accent-serif {
	font-family: var(--td-font-accent) !important;
	font-style: italic !important;
	font-weight: 400 !important;
}

/* label-плашка: уголки + mono-капс (прототип .inline-flex.items-center) */
.td-label {
	display: inline-flex !important;
	align-items: center !important;
}

.td-label-mark {
	display: flex !important;
	height: 20px !important;
	flex-direction: column !important;
	justify-content: space-between !important;
}

.td-label-mark--end {
	align-items: flex-end !important;
}

/* Уголки-скобки. В прототипе линии 1.5px, но при dpr=1 дробная толщина
   раскладывается по-разному в зависимости от субпиксельной фазы: левая
   вертикаль рисовалась в 2 колонки по ~75%, правая — в 1 колонку на 100%
   (и горизонтали ~1.31px из-за flex-shrink от `height:100%`), поэтому скобки
   выглядели разной толщины. Рисуем ровно 1px и не даём flex'у их сжимать:
   горизонтали фиксированные 1px, средняя растягивается на остаток (20 - 1 - 1). */
.td-label-mark i {
	display: block !important;
	background: var(--td-accent-on-light) !important;
	flex: 0 0 auto !important;
}
.td-label-mark i:first-child,
.td-label-mark i:last-child {
	height: 1px !important;
	width: 8px !important;
}
.td-label-mark i:nth-child(2) {
	height: auto !important;
	width: 1px !important;
	flex: 1 1 auto !important;
}

.td-label-text {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 0 12px !important;
	font-family: var(--td-font-mono) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .25em !important;
	color: inherit !important;
}

.td-label--light .td-label-mark i {
	background: var(--td-accent) !important;
}

/* заголовки секций */
.td-h2 .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	/* tracking-tight прототипа = -0.025em (30px -> -0.75px), но на 30px наш рендер на волосок шире прототипа: с -0.8px переносы совпадают с макетом («Your CAD file becomes the finished part» на 375: 2 строки, как в прототипе, с -0.75 — три). На 36px (с 640) берём точное -0.9px — там совпадает. */ letter-spacing: -.8px !important;
	color: var(--td-fg) !important;
}

.td-h2--light .elementor-heading-title {
	color: var(--td-primary-fg) !important;
}
.td-h2 .td-accent-serif {
	color: var(--td-accent-on-light) !important;
}

.td-head-center {
	max-width: 768px !important;
	margin: 0 auto !important;
	text-align: center !important;
	align-items: center !important;
}

.td-head-center .td-h2 {
	margin-top: 20px !important;
}
.td-head-center .td-label {
	align-self: center !important;
}

/* ---------- кнопки ---------- */
.td-btn .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	font-family: var(--td-font) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -.02em !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

.td-btn .elementor-button-content-wrapper {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.td-btn .elementor-button-icon {
	display: inline-flex !important;
	align-items: center !important;
}
.td-btn .elementor-button-icon svg {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: currentColor !important;
}
.td-btn .elementor-button-text {
	display: inline-block !important;
}

.td-btn--lg .elementor-button {
	height: 48px !important;
	padding: 0 28px !important;
	font-size: 16px !important;
}
.td-btn--md .elementor-button {
	height: 44px !important;
	padding: 0 20px !important;
	font-size: 14px !important;
}
.td-btn--sm .elementor-button {
	height: 40px !important;
	padding: 0 20px !important;
	font-size: 14px !important;
}

.td-btn--accent .elementor-button {
	background-color: var(--td-accent) !important;
	color: var(--td-accent-fg) !important;
}
.td-btn--accent .elementor-button:hover {
	background-color: rgba(255, 106, 40, .9) !important;
	color: var(--td-accent-fg) !important;
}

.td-btn--ghost .elementor-button {
	background-color: transparent !important;
	color: var(--td-primary-fg) !important;
	border: 1px solid rgba(245, 247, 250, .4) !important;
}

.td-btn--ghost .elementor-button:hover {
	border-color: rgba(245, 247, 250, .75) !important;
	color: var(--td-primary-fg) !important;
}

.td-btn--outline .elementor-button {
	background-color: var(--td-bg) !important;
	color: var(--td-fg) !important;
	border: 1px solid rgba(27, 36, 50, .2) !important;
}

.td-btn--outline .elementor-button:hover {
	border-color: rgba(27, 36, 50, .45) !important;
	color: var(--td-fg) !important;
}

.td-btn--dark .elementor-button {
	background-color: var(--td-primary) !important;
	color: var(--td-primary-fg) !important;
}
.td-btn--dark .elementor-button:hover {
	background-color: #2a3444 !important;
	color: var(--td-primary-fg) !important;
}

.td-btn--link .elementor-button {
	height: auto !important;
	padding: 0 !important;
	background-color: transparent !important;
	color: var(--td-fg) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

.td-btn--link .elementor-button-icon svg {
	color: var(--td-accent-on-light) !important;
}
.td-btn--link .elementor-button:hover {
	color: var(--td-accent-on-light) !important;
}

/* ============================================================
   HERO
   ============================================================ */
.td-hero {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 20px !important;
}

/* металлический водяной знак TANDIX */
.td-hero::after {
	content: 'TANDIX' !important;
	position: absolute !important;
	left: 16px !important;
	bottom: -48px !important;
	z-index: 1 !important;
	font-family: var(--td-font) !important;
	font-size: 208px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -.05em !important;
	opacity: .12 !important;
	background-image: var(--td-metal) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	pointer-events: none !important;
	user-select: none !important;
}

.td-hero-inner {
	position: relative !important;
	z-index: 2 !important;
}

.td-hero-title {
	margin-top: 24px !important;
}

.td-hero-title .elementor-heading-title {
	margin: 0 !important;
	max-width: 896px !important;
	font-family: var(--td-font) !important;
	font-size: 36px !important;
	font-weight: 800 !important;
	line-height: 1.03 !important;
	letter-spacing: -.9px !important;
	color: var(--td-primary-fg) !important;
}

.td-hero-title .td-accent-serif {
	color: var(--td-accent) !important;
}

.td-hero-sub {
	margin-top: 24px !important;
}

.td-hero-sub p {
	margin: 0 !important;
	max-width: 576px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: rgba(245, 247, 250, .85) !important;
}

.td-hero-actions {
	margin-top: 36px !important;
	gap: 12px !important;
}

/* ============================================================
   СТАТИСТИКА (перекрывает hero снизу на 32px)
   ============================================================ */
.td-stats {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	/* в прототипе `grid-cols-2 gap-3 sm: gap-4` */ gap: 12px !important;
}

.td-stat {
	background-color: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 16px !important;
	/* в прототипе `p-5 sm: p-6` */ padding: 20px !important;
}

.td-stat-num .elementor-heading-title {
	margin: 0 !important;
	/* в прототипе число — div с `text-3xl sm: text-4xl tracking-tight`: 30/36 и -0.75px до 640, 36/40 и -0.9px дальше */ font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 36px !important;
	letter-spacing: -.75px !important;
	word-spacing: normal !important;
	color: var(--td-fg) !important;
}

.td-dot {
	color: var(--td-accent-on-light) !important;
}

.td-stat-label {
	margin-top: 4px !important;
}

.td-stat-label p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

/* ============================================================
   СЕТКИ КАРТОЧЕК
   ============================================================ */
.td-cards-3,
.td-cards-3 > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 20px !important;
}

.td-cards-4,
.td-cards-4 > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 20px !important;
}

/* --- секция Industries --- */
.td-head,
.td-head > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-end !important;
	gap: 24px !important;
}

.td-head-action {
	flex: 0 0 auto !important;
}

.td-ind-sec .td-cards-3 {
	margin-top: 48px !important;
}

.td-card {
	position: relative !important;
	background-color: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 16px !important;
	padding: 40px 24px 24px !important;
}

.td-chip {
	position: absolute !important;
	top: -20px !important;
	right: 24px !important;
	z-index: 2 !important;
	margin: 0 !important;
}

.td-chip .elementor-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 9999px !important;
	background-image: var(--td-chip-metal) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(27, 36, 50, .25), 0 4px 10px rgba(27, 36, 50, .18) !important;
	color: var(--td-fg) !important;
}

.td-chip .elementor-icon svg {
	width: 24px !important;
	height: 24px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
}

.td-card-title .elementor-heading-title {
	margin: 0 !important;
	max-width: 80% !important;
	font-family: var(--td-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 28px !important;
	letter-spacing: -.5px !important;
	color: var(--td-fg) !important;
}

.td-card-text {
	margin-top: 12px !important;
}

.td-card-text p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-card .td-btn--link {
	margin-top: 24px !important;
}

/* ============================================================
   CAPABILITIES (светлая карточка с текстурой 8%)
   ============================================================ */
.td-cap {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 20px !important;
}
.td-cap-body {
	position: relative !important;
	z-index: 2 !important;
}

.td-cap-intro {
	margin-top: 16px !important;
}

/* `text-base sm:text-lg`: 16/24 до 640, 18/28 дальше */
.td-cap-intro p {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--td-muted-fg) !important;
}

.td-cap-body .td-cards-4 {
	margin-top: 48px !important;
}

.td-cap-card {
	background-color: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 16px !important;
	padding: 24px !important;
}

.td-cap-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 28px !important;
	letter-spacing: -.45px !important;
	color: var(--td-fg) !important;
}

.td-cap-text {
	margin-top: 12px !important;
}

.td-cap-text p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-checks {
	margin-top: 20px !important;
}

.td-checks .elementor-icon-list-items {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.td-checks .elementor-icon-list-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

.td-checks .elementor-icon-list-icon {
	line-height: 1 !important;
}
.td-checks .elementor-icon-list-icon svg {
	width: 12px !important;
	height: 12px !important;
	margin-top: 4px !important;
	fill: none !important;
	stroke: var(--td-accent-on-light) !important;
}
.td-checks .elementor-icon-list-text {
	padding-left: 0 !important;
	color: var(--td-fg) !important;
}

.td-cap-action {
	margin-top: 48px !important;
	justify-content: center !important;
}

/* ============================================================
   COMPARE (слайдер CAD ↔ готовая деталь)
   ============================================================ */
.td-compare-grid,
.td-compare-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 40px !important;
	align-items: center !important;
}

/* заголовок блока Compare: у прототипа `mt-5` (20px) от label-плашки — как в
   .td-head-center, но этот блок не центрированный, поэтому правило отдельное */
.td-compare-text .td-h2 {
	margin-top: 20px !important;
}

.td-compare-sub {
	margin-top: 16px !important;
}

/* абзац в прототипе — `text-base sm:text-lg`: 16/24 до 640 и 18/28 дальше
   (у нас было 16/26 на всех ширинах: колонка текста на 26px ниже макета на 768) */
.td-compare-sub p {
	margin: 0 !important;
	max-width: 672px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--td-muted-fg) !important;
}

.td-compare-action {
	margin-top: 32px !important;
}

.td-compare-media {
	border: 1px solid var(--td-border) !important;
	border-radius: 20px !important;
	overflow: hidden !important;
}

/* Слайдер сравнения — виджет плагина Comparimager for Elementor.
   Разметка плагина:
     .mdp-comparimager-elementor-box.position-vertical
       > .mdp-comparimager-elementor-comparison-slider
          > .mdp-comparimager-elementor-img-before > img
          > .mdp-comparimager-elementor-img-after  > img   (клипается по линии)
          > .mdp-comparimager-elementor-compare-handle > ...-compare-line > ...-compare-line-button
          > .mdp-comparimager-elementor-label-before / -after
   Из контролов приходит фиксированный `height` (slider_height, дефолт 390px) —
   перебиваем на aspect-ratio 4/3 от ширины колонки, как в прототипе (648x487 на 1440).
   Ширину картинок JS плагина ставит inline (width = ширина слайдера), поэтому
   здесь только object-fit. */
.td-compare-media .mdp-comparimager-elementor-comparison-slider {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	cursor: default !important;
}

/* двигается только сама ручка (move_handle=swipe), поэтому affordance — на ней */
.td-compare-media .mdp-comparimager-elementor-compare-handle {
	cursor: ew-resize !important;
	touch-action: none !important;
}

.td-compare-media .mdp-comparimager-elementor-comparison-slider img {
	display: block !important;
	object-fit: cover !important;
}

.td-compare-media .mdp-comparimager-elementor-compare-line {
	width: 2px !important;
	background: var(--td-accent) !important;
}

.td-compare-media .mdp-comparimager-elementor-compare-line-button {
	width: 40px !important;
	height: 40px !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: var(--td-accent) !important;
	color: var(--td-accent-fg) !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .2) !important;
}

.td-compare-media .mdp-comparimager-elementor-compare-line-button svg {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	stroke: currentColor !important;
}

/* у плагина две иконки (‹ ›) — в прототипе одна ↔, вторую прячем */
.td-compare-media .mdp-comparimager-elementor-icon-after {
	display: none !important;
}

.td-compare-media .mdp-comparimager-elementor-label {
	top: 12px !important;
	padding: 4px 8px !important;
	border-radius: 6px !important;
	background: rgba(245, 247, 250, .8) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	backdrop-filter: blur(4px) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	color: var(--td-fg) !important;
}

.td-compare-media .mdp-comparimager-elementor-position-vertical .mdp-comparimager-elementor-label-before {
	left: 12px !important;
}
.td-compare-media .mdp-comparimager-elementor-position-vertical .mdp-comparimager-elementor-label-after {
	right: 12px !important;
}

/* ============================================================
   HOW IT WORKS (тёмная карточка)
   ============================================================ */
.td-steps {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 20px !important;
	color: var(--td-primary-fg) !important;
}

.td-steps::after {
	content: 'TANDIX' !important;
	position: absolute !important;
	left: 50% !important;
	bottom: -40px !important;
	z-index: 1 !important;
	transform: translateX(-50%) !important;
	font-family: var(--td-font) !important;
	font-size: 160px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -.05em !important;
	opacity: .1 !important;
	background-image: var(--td-metal) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	pointer-events: none !important;
	user-select: none !important;
}

.td-steps-body {
	position: relative !important;
	z-index: 2 !important;
}

.td-steps-grid,
.td-steps-grid > .e-con-inner {
	gap: 40px !important;
	margin-top: 56px !important;
}

.td-step {
	text-align: center !important;
}

.td-step-num .elementor-heading-title {
	display: block !important;
	width: 56px !important;
	height: 56px !important;
	margin: 0 auto !important;
	border-radius: 9999px !important;
	background: var(--td-accent) !important;
	color: var(--td-accent-fg) !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	line-height: 56px !important;
	text-align: center !important;
}

.td-step-title {
	margin-top: 20px !important;
}

.td-step-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 28px !important;
	letter-spacing: -.18px !important;
	color: var(--td-primary-fg) !important;
}

.td-step-text {
	margin-top: 8px !important;
}

.td-step-text p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: rgba(245, 247, 250, .75) !important;
}

/* ============================================================
   ABOUT
   ============================================================ */
.td-about-grid,
.td-about-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 48px !important;
	align-items: center !important;
}

.td-about-media {
	position: relative !important;
}

.td-about-img img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 15px -3px rgba(27, 36, 50, .1) !important;
}

/* Бейдж «18+ / years machining in Tallinn» — штатный виджет Counter: класс
   td-about-badge висит на обёртке виджета (.elementor-element), внутри
   .elementor-counter > .elementor-counter-number-wrapper + .elementor-counter-title.
   Размеры из прототипа: число 30/36 w800 ls -.75 (замер бейджа 208x90),
   подпись 14/20 muted. */
.td-about-badge {
	position: absolute !important;
	right: 16px !important;
	bottom: -24px !important;
	width: auto !important;
	padding: 16px 24px !important;
	background: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 15px -3px rgba(27, 36, 50, .1) !important;
}

/* В разметке Counter подпись идёт ДО числа, а дефолт `.elementor-counter` —
   `column-reverse` (число сверху, подпись снизу) с `align-items: stretch`, из-за
   чего число и подпись центрируются. Нам нужен тот же порядок, но по левому краю. */
.td-about-badge .elementor-counter {
	display: flex !important;
	flex-direction: column-reverse !important;
	align-items: stretch !important;
	text-align: left !important;
}

/* wrapper — именно flex (а не block): между inline-спанами числа и суффикса в
   разметке есть переводы строк, и в block-контексте они дают пробел («18 +»).
   В flex whitespace-узлы не рендерятся; суффикс прижимаем к числу. */
.td-about-badge .elementor-counter-number-wrapper {
	display: flex !important;
	flex: 0 1 auto !important;
	justify-content: flex-start !important;
	width: 100% !important;
	font-family: var(--td-font) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 36px !important;
	letter-spacing: -.75px !important;
	color: var(--td-fg) !important;
	text-align: left !important;
}

.td-about-badge .elementor-counter-number,
.td-about-badge .elementor-counter-number-prefix,
.td-about-badge .elementor-counter-number-suffix {
	flex-grow: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 36px !important;
	letter-spacing: -.75px !important;
	color: var(--td-fg) !important;
	text-align: left !important;
}

.td-about-badge .elementor-counter-title {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
	text-align: left !important;
}

.td-about-text .td-h2 {
	margin-top: 20px !important;
}

.td-about-sub {
	margin-top: 16px !important;
}

.td-about-sub p {
	margin: 0 !important;
	max-width: 672px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--td-muted-fg) !important;
}

.td-about-action {
	margin-top: 32px !important;
}

/* ============================================================
   CTA
   ============================================================ */
.td-cta {
	border-radius: 20px !important;
}

.td-cta-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 32px !important;
	letter-spacing: -.6px !important;
	color: var(--td-primary-fg) !important;
}

.td-cta-text {
	margin-top: 12px !important;
}

.td-cta-text p {
	margin: 0 !important;
	max-width: 720px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: rgba(245, 247, 250, .85) !important;
}

.td-cta-action {
	flex: 0 0 auto !important;
}

/* ============================================================
   АДАПТИВ (брейкпоинты прототипа: sm=640, lg=1024)
   ============================================================ */
@media (min-width: 640px) {
	.td-h2 .elementor-heading-title {
	font-size: 36px !important;
	letter-spacing: -.9px !important;
}
	.td-compare-sub p {
	font-size: 18px !important;
	line-height: 28px !important;
}
	.td-cap-intro p {
	font-size: 18px !important;
	line-height: 28px !important;
}
	.td-about-sub p {
	font-size: 18px !important;
	line-height: 28px !important;
}
	.td-stats {
	gap: 16px !important;
}
	.td-stat {
	padding: 24px !important;
}
	/* `sm:text-4xl` у чисел статистики и счётчика */
	.td-stat-num .elementor-heading-title,
	.td-stat-num .elementor-counter-number-wrapper,
	.td-stat-num .elementor-counter-number,
	.td-stat-num .elementor-counter-number-prefix,
	.td-stat-num .elementor-counter-number-suffix {
	font-size: 36px !important;
	line-height: 40px !important;
	letter-spacing: -.9px !important;
}
	.td-hero-title .elementor-heading-title {
	font-size: 60px !important;
	letter-spacing: -1.5px !important;
}
	.td-hero-sub p {
	font-size: 18px !important;
	line-height: 28px !important;
}
	.td-cards-3, .td-cards-3 > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-cards-4, .td-cards-4 > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-about-badge {
	display: block !important;
}
	/* шапка секции: в прототипе flex-col sm:flex-row sm:items-end — строка уже с 640 */
	.td-head,
	.td-head > .e-con-inner {
	flex-direction: row !important;
	align-items: flex-end !important;
}
}

@media (min-width: 1024px) {
	.td-h2 .elementor-heading-title {
	font-size: 48px !important;
	letter-spacing: -1.2px !important;
}
	.td-hero-title .elementor-heading-title {
	font-size: 72px !important;
	letter-spacing: -1.8px !important;
}
	.td-cards-3, .td-cards-3 > .e-con-inner {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
	.td-cards-4, .td-cards-4 > .e-con-inner {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
	.td-compare-grid, .td-compare-grid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-about-grid, .td-about-grid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-cta-title .elementor-heading-title {
	font-size: 36px !important;
	line-height: 40px !important;
	letter-spacing: -.9px !important;
}
	/* статистика: 4 колонки только с lg (в прототипе grid-cols-2 lg:grid-cols-4) */
	.td-stats {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}

/* До sm (<640) — как в прототипе: шапка секции в столбик, кнопки на всю ширину,
   водяные знаки мельче. ВАЖНО: именно 640, а не 1024 — на планшете прототип
   уже переходит на sm-вариант (иначе hero +58, about +111, industries +44). */
@media (max-width: 639px) {
	.td-head,
	.td-head > .e-con-inner {
	flex-direction: column !important;
	align-items: flex-start !important;
}
	.td-hero::after {
	bottom: -24px !important;
	font-size: 96px !important;
}
	.td-steps::after {
	bottom: -24px !important;
	font-size: 80px !important;
}
	.td-btn .elementor-button {
	width: 100% !important;
}
	.td-hero-actions .td-btn,
	.td-hero-actions .td-btn .elementor-button {
	width: 100% !important;
}
	.td-head-action, .td-head-action .td-btn, .td-head-action .td-btn .elementor-button {
	width: 100% !important;
}
	.td-cta .td-cta-action .td-btn,
	.td-cta .td-cta-action .td-btn .elementor-button {
	width: 100% !important;
}
	.td-card .td-btn .elementor-button,
	.td-compare-action .td-btn .elementor-button,
	.td-cap-action .td-btn .elementor-button,
	.td-about-action .td-btn .elementor-button {
	width: auto !important;
}
}

/* CTA до lg — в столбик (в прототипе flex-col lg:flex-row) */
@media (max-width: 1023px) {
	.td-cta {
	flex-direction: column !important;
	align-items: center !important;
}
	.td-cta .td-cta-action, .td-cta .td-cta-body {
	width: 100% !important;
}
	.td-cta .td-cta-action .td-btn {
	width: auto !important;
}
}

/* ============================================================
   ГЕОМЕТРИЯ СЕКЦИЙ
   Boxed-секция прототипа = `mx-auto max-w-[1400px] px-8`:
   контент 1336 при вьюпорте 1425. Elementor кладёт max-width на .e-con-inner,
   а padding — на внешний .e-con, из-за чего контент выходил 1361.
   Поэтому геометрию секций задаём здесь целиком.
   ============================================================ */
.td-sec > .e-con-inner {
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 96px 32px !important;
}

.td-stats-sec > .e-con-inner {
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 32px !important;
}

/* верхний отступ 0: контент вплотную к шапке (просьба заказчика 18.09), как и в
   данных секции (td-home-build.py). Правило сейчас не матчится (у full-width
   контейнеров .e-con-inner не создаётся) — держим синхронно на будущее. */
.td-hero-sec > .e-con-inner {
	max-width: none !important;
	padding: 0 16px 0 !important;
}
.td-cap-sec > .e-con-inner,
.td-steps-sec > .e-con-inner {
	max-width: none !important;
	padding: 0 16px !important;
}
.td-cta-sec > .e-con-inner {
	max-width: none !important;
	padding: 0 16px 12px !important;
}

/* CTA: текст слева (растягивается), кнопка справа */
.td-cta > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 32px !important;
}

.td-cta-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

/* шапка hello-elementor не нужна — контент страницы начинается с hero */
.page-header {
	display: none !important;
}

/* ============================================================
   SVG-иконки (грабля #10): Elementor красит SVG через fill, из-за чего
   контурные Lucide-иконки превращаются в монолитную заливку.
   ============================================================ */
.elementor-widget-icon svg[fill="none"],
.elementor-icon-list-icon svg[fill="none"],
.elementor-button-icon svg[fill="none"] {
	fill: none !important;
}

@media (max-width: 1023px) {
	.td-sec > .e-con-inner {
	padding: 64px 24px !important;
}
	.td-stats-sec > .e-con-inner {
	padding: 0 24px !important;
}
	.td-cta > .e-con-inner {
	flex-direction: column !important;
	align-items: flex-start !important;
}
}

/* ============================================================
   Базовый шрифт проекта. Elementor в своём kit-CSS жёстко ставит Roboto на
   .elementor-heading-title / .elementor-button / text-editor, поэтому одной
   настройки body недостаточно. Акцентный курсив (.td-accent-serif) и mono-плашка
   (.td-label-text) — другие элементы со своими правилами, наследование их не ломает.
   ============================================================ */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-button .elementor-button,
.elementor-widget-icon-list .elementor-icon-list-text {
	font-family: var(--td-font) !important;
}

/* ============================================================
   ФИКСЫ ПО ЗАМЕРАМ (1440)
   ============================================================ */

/* boxed-секция: padding живёт на .e-con-inner (max-w-1400 + px-32 = контент 1336).
   У внешнего .e-con padding должен быть 0, иначе он складывался с внутренним
   и контент выходил 1297 вместо 1336. */
.td-sec,
.td-stats-sec {
	padding: 0 !important;
}

/* CTA: Elementor вешает на контейнеры .e-con-full {
	width: 100% !important;
}, из-за чего
   в flex-строке кнопка забирала всю ширину, а текст схлопывался в 0. */
.td-cta {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 32px !important;
}

.td-cta-body {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
}
.td-cta-action {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* h2: у левых шапок прототипа ограничение max-w-2xl (672px), у центрированных — нет */
.td-h2 {
	max-width: 672px !important;
}
.td-head-center .td-h2 {
	max-width: none !important;
}

/* акцентный курсив на тёмном фоне — яркий accent, на светлом — accent-on-light */
.td-h2--light .td-accent-serif {
	color: var(--td-accent) !important;
}
.td-cta-title .td-accent-serif {
	color: var(--td-accent) !important;
}

/* CTA-текст в прототипе — primary-foreground/80 */
.td-cta-text p {
	color: rgba(245, 247, 250, .8) !important;
}

@media (max-width: 1023px) {
	.td-cta {
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}
	.td-cta-body, .td-cta-action {
	width: 100% !important;
}
}

/* ============================================================
   ФИКСЫ №2 (замеры): колонки внутри flex-строк Elementor получают
   .e-con-full {
	width: 100% !important;
} и переносятся на новую строку (flex-wrap),
   поэтому шапка Industries «пухла» на 70px.
   ============================================================ */
.td-head {
	flex-wrap: nowrap !important;
}
.td-head-text {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}
.td-head-action {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* чек-листы: Elementor добавляет отступы/высоту строки, из-за чего
   3 пункта занимали 104px вместо 76 (3×20 + 2×8). */
.td-checks .elementor-icon-list-items {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.td-checks .elementor-icon-list-item,
.td-checks .elementor-icon-list-item > a,
.td-checks .elementor-icon-list-item > span {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

.td-checks .elementor-icon-list-icon {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: flex-start !important;
	height: 20px !important;
	padding: 0 !important;
}

.td-checks .elementor-icon-list-text {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

/* кнопка под карточками capabilities: в прототипе отступ 40, не 48 */
.td-cap-action {
	margin-top: 40px !important;
}

/* ============================================================
   HERO-оверлей: Elementor рисует свой 2-стоповый градиент на ::before,
   из-за чего картинка просвечивала сильнее прототипа. В макете — три стопа:
   `bg-gradient-to-r from-primary via-primary/92 to-primary/50`
   (на мобильном — плоский bg-primary/85).
   ============================================================ */
/* content/positioning задаём явно: без `content` псевдоэлемент не создаётся,
   и градиент молча не рисуется (проверено замером яркости области hero). */
.td-hero::before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	display: block !important;
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #1b2432 0%, rgba(27, 36, 50, .92) 50%, rgba(27, 36, 50, .5) 100%) !important;
}

@media (max-width: 639px) {
	.td-hero::before {
	background-color: rgba(27, 36, 50, .85) !important;
	background-image: none !important;
}
}

/* ============================================================
   АДАПТИВ: паддинги и типографика по брейкпоинтам ПРОТОТИПА
   (Tailwind: base / sm 640 / lg 1024). Раньше были упрощённые значения —
   на 375 страница выходила на ~1000px выше макета.
   ============================================================ */

/* boxed-секции: px-4 py-16 / sm:px-6 / lg:px-8 lg:py-24 */
@media (max-width: 639px) {
	.td-sec > .e-con-inner {
	padding: 64px 16px !important;
}
	.td-stats-sec > .e-con-inner {
	padding: 0 16px !important;
}

	/* hero-карточка: px-6 py-16, минимальная высота не задаётся (в макете её нет) */
	.td-hero {
	min-height: 0 !important;
	padding: 64px 24px !important;
}
	.td-hero-sec > .e-con-inner {
	padding: 0 12px 0 !important;
}

	/* тёмные/светлые карточки: px-6 py-16 */
	.td-cap, .td-steps {
	padding: 64px 24px !important;
}
	.td-cap-sec > .e-con-inner, .td-steps-sec > .e-con-inner {
	padding: 0 12px !important;
}
	.td-cta-sec > .e-con-inner {
	padding: 0 12px 12px !important;
}
	.td-cta {
	padding: 56px 24px !important;
}

	/* футер: px-6 py-14 */
	.td-footer-sec {
	padding: 0 12px 12px !important;
}
	.td-footer-card {
	padding: 56px 24px !important;
}

	/* бейдж «18+» в прототипе скрыт до sm */
	.td-about-badge {
	display: none !important;
}

	/* заголовок CTA: text-2xl (24) до sm */
	.td-cta-title .elementor-heading-title {
	font-size: 24px !important;
	line-height: 32px !important;
	letter-spacing: -.6px !important;
}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.td-sec > .e-con-inner {
	padding: 64px 24px !important;
}
	.td-stats-sec > .e-con-inner {
	padding: 0 24px !important;
}

	/* hero: sm:px-10 sm:py-24 */
	.td-hero {
	min-height: 0 !important;
	padding: 96px 40px !important;
}
	.td-hero-sec > .e-con-inner {
	padding: 0 16px 0 !important;
}

	/* карточки: sm:px-10 lg:py-24 */
	.td-cap, .td-steps {
	padding: 64px 40px !important;
}
	.td-cta {
	padding: 56px 40px !important;
}

	.td-footer-card {
	padding: 56px 40px !important;
}

	/* заголовок CTA: sm:text-4xl (36) */
	.td-cta-title .elementor-heading-title {
	font-size: 36px !important;
	line-height: 40px !important;
	letter-spacing: -.9px !important;
}
}

/* ============================================================
   Ряд статистики лежит ПОВЕРХ нижней кромки hero-баннера
   (в прототипе `relative z-10`, наложение 32px создаётся -mt-8).
   Без положительного z-index карточки уходят ПОД баннер: у hero
   оверлей и контент имеют z-index 1 и 2 и, поскольку сам .td-hero
   стекинг-контекст не создаёт, они перекрывали статистику.
   ============================================================ */
.td-stats {
	position: relative !important;
	z-index: 10 !important;
}

/* ============================================================
   Анимированный счётчик (штатный виджет Counter ядра Elementor)
   вместо заголовка у «16+» и «4,500+». Типографика — как у остальных
   чисел статистики (36/40, w800, ls -0.9px), плюс акцентная точка после
   суффикса, которая в прототипе набрана отдельным span'ом.
   ============================================================ */
.td-stat-num .elementor-counter,
.td-stat-num .elementor-counter-number-wrapper {
	width: 100% !important;
}

.td-stat-num .elementor-counter-number-wrapper {
	display: flex !important;
	align-items: baseline !important;
	font-family: var(--td-font) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 36px !important;
	letter-spacing: -.75px !important;
	word-spacing: normal !important;
	color: var(--td-fg) !important;
}

.td-stat-num .elementor-counter-number,
.td-stat-num .elementor-counter-number-prefix,
.td-stat-num .elementor-counter-number-suffix {
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 36px !important;
	letter-spacing: -.75px !important;
	word-spacing: normal !important;
	color: var(--td-fg) !important;
}

/* акцентная точка после «+» (в прототипе — <span class="text-accent-on-light">.</span>) */
.td-stat-num .elementor-counter-number-wrapper::after {
	content: '.' !important;
	color: var(--td-accent-on-light) !important;
}

/* Elementor-овский .elementor-counter-number-wrapper — flex с flex:1, а у префикса
   и суффикса flex-grow:1: число уезжает в центр, а акцентная точка — к правому краю.
   В макете число, «+» и точка идут слитно слева. */
.td-stat-num .elementor-counter-number-wrapper {
	flex: 0 1 auto !important;
	justify-content: flex-start !important;
}

.td-stat-num .elementor-counter-number,
.td-stat-num .elementor-counter-number-prefix,
.td-stat-num .elementor-counter-number-suffix {
	flex: 0 0 auto !important;
	text-align: left !important;
	white-space: pre-wrap !important;
}

/* ============================================================
   ХОВЕР КАРТОЧЕК INDUSTRIES — как в оригинале.
   Замер прототипа (CDP, реальное наведение мыши):
     карточка:  transition box-shadow .15s cubic-bezier(.4,0,.2,1);
                hover -> box-shadow 0 10px 15px -3px rgba(0,0,0,.1),
                                    0 4px 6px -4px rgba(0,0,0,.1)
     стрелка:   group-hover:translate-x-0.5 -translate-y-0.5 -> translate(2px,-2px)
   Tailwind оборачивает hover-варианты в @media (hover:hover) — повторяем,
   чтобы на тач-устройствах не было «залипшей» тени.
   Карточка в прототипе целиком является ссылкой (<a> вокруг всего содержимого),
   поэтому Explore растянут на всю карточку — клик и курсор работают как в макете.
   ============================================================ */
@media (hover: hover) {
	.td-card {
	transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1) !important;
}

	.td-card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1) !important;
}

	.td-card:hover {
	cursor: pointer !important;
}

	.td-card .td-btn--link .elementor-button-icon {
	transition: transform .15s cubic-bezier(.4, 0, .2, 1) !important;
}

	.td-card:hover .td-btn--link .elementor-button-icon {
	transform: translate(2px, -2px) !important;
}
}

/* «Растянутая ссылка»: в прототипе вся карточка — это <a href="/industries/...">,
   у нас ссылкой является кнопка Explore, поэтому растягиваем её на карточку. */
.td-card {
	position: relative !important;
}

.td-card .td-btn--link .elementor-button {
	position: static !important;
}

.td-card .td-btn--link .elementor-button::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
}

/* ============================================================
   Карточка Industries — ссылка целиком (как в прототипе), «Explore» — span.
   Ссылку даёт сам контейнер Elementor (html_tag=a + link), поэтому
   вложенных <a> нет, а курсор и клик работают по всей площади карточки.
   ============================================================ */
.td-card {
	text-decoration: none !important;
	color: var(--td-fg) !important;
}

/* html-виджет «Explore»: его обёртка — блок, и inline-flex-плашка (20px) сидит
   в строчном боксе с line-height 24, из-за чего каждая карточка индустрии была
   на 4px выше макета (6 карточек = +19px секции на 375). Гасим line-height. */
.td-explore-wrap {
	margin-top: 24px !important;
	line-height: 0 !important;
}

.td-explore {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 20px !important;
	color: var(--td-fg) !important;
}

.td-explore-arrow {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: var(--td-accent-on-light) !important;
	transition: transform .15s cubic-bezier(.4, 0, .2, 1) !important;
}

@media (hover: hover) {
	.td-card:hover .td-explore-arrow {
	transform: translate(2px, -2px) !important;
}
}

/* ============================================================
   Ширина тёмных/светлых карточек = как у футера.
   В прототипе steps, cta, capabilities и footer — все `mx-auto max-w-[1400px]`,
   поэтому на широких экранах они 1400px по центру (замер на 1920: x=253, w=1400).
   У нас max-width был только у футера, и три карточки растягивались на всю
   ширину (1873 при 1920). Hero — исключение: в макете он без max-w (во всю ширину).
   ============================================================ */
.td-steps,
.td-cta,
.td-cap {
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Full-bleed секциям Elementor НЕ создаёт .e-con-inner, поэтому правило
   `.td-x-sec > .e-con-inner {
	padding: 0 12px !important;
}` для них не матчится, и на
   мобильном оставался padding 16 из данных — блоки выходили на 8px уже макета
   (328 вместо 336 на 375). Задаём padding самой секции (px-3 -> sm:px-4). */
@media (max-width: 639px) {
	.td-hero-sec,
	.td-cap-sec,
	.td-steps-sec,
	.td-cta-sec,
	.td-footer-sec {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
}

/* ============================================================
   TANDIX — Site Header и Site Footer (Theme Builder).
   Замеры прототипа (1440):
   шапка — 1425x112 sticky, bg #f5f7fa/70 + blur 8px, контент max-w 1400 px-40,
   лого 101x80, ссылки 14/20 w600 ls .7px uppercase паддинг 8/12 radius 6,
   разделители 1x20 #b8420e, кнопка 149x44, EN-чип 80x44;
   футер — секция px-16 pb-12, тёмная карточка r20 padding 56/64,
   сетка 4 равных колонки gap 40, лого 121x96, заголовки 12/16 w700 ls 2.16px,
   ссылки min-h 32 (14/20 /75), металлическая линия (mt 48), нижняя строка 12/16 /70.
   ============================================================ */

/* ============================== HEADER ============================== */
/* ЛИПКОСТЬ: sticky должен стоять на ОБЁРТКЕ темы
   (`header.elementor-location-header` — прямой потомок body). На внутреннем
   .td-header он не работал: sticky не выходит за пределы родителя, а родитель
   здесь ровно высотой шапки (замер: после scrollY 800 шапка уезжала на -800). */
header.elementor-location-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 50 !important;
}

/* Ширина полосы шапки — как в прототипе: во всю ширину вьюпорта на всех
   страницах; ограничение 1400px живёт на контентной строке .td-header-inner. */
.td-header {
	position: static !important;
	width: 100% !important;
	background-color: rgba(245, 247, 250, .7) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	backdrop-filter: blur(8px) !important;
}

.td-header-inner,
.td-header-inner > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	max-width: 1400px !important;
	height: 112px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
}

/* .td-logo — обёртка виджета: делаем flex, иначе inline-flex-ссылка внутри
   блочного контейнера даёт строковый вынос (~7px), коробка логотипа становится
   87px вместо 80 и при центрировании в полосе 112px логотип уезжает на 3px вверх
   (замер: y=13 против 16 в прототипе). */
.td-logo {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
}

.td-logo > .elementor-widget-container {
	display: flex !important;
	align-items: center !important;
}

.td-logo-link {
	display: inline-flex !important;
	align-items: center !important;
}

/* Логотип: 80 -> 95px по высоте (+15px, просьба заказчика 18.09), ширина
   пропорционально ~120px (исходник 260x206). В прототипе было 80px. */
.td-logo-img {
	display: block !important;
	width: auto !important;
	height: 95px !important;
	filter: drop-shadow(0 4px 10px rgba(27, 36, 50, .18)) !important;
}

/* --- меню --- */
/* .e-con-full {
	width: 100% !important;
} у Elementor: без width:auto блок действий раздувался
   до ширины контента (1320) и выдавливал меню за вьюпорт (scrollWidth 1473). */
.td-nav {
	flex: 0 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

.td-nav .elementor-nav-menu--main .elementor-nav-menu {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.td-nav .elementor-nav-menu--main .elementor-nav-menu > li {
	position: relative !important;
}

/* разделитель между пунктами — 1x20 accent-on-light (в прототипе отдельный span) */
/* Разделитель только между видимыми пунктами. Пункт «EN» (td-menu-lang) в десктопном
   меню скрыт, но остаётся соседом — из-за этого слева от Industries рисовалась «|». */
.td-nav .elementor-nav-menu--main .elementor-nav-menu > li:not(.td-menu-lang) + li:not(.td-menu-lang)::before {
	content: '' !important;
	position: absolute !important;
	left: -2px !important;
	top: 50% !important;
	width: 1px !important;
	height: 20px !important;
	transform: translateY(-50%) !important;
	background: var(--td-accent-on-light) !important;
}

.td-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	color: var(--td-fg) !important;
	text-decoration: none !important;
}

.td-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
.td-nav .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a.elementor-item {
	color: var(--td-accent-on-light) !important;
}

/* Elementor вешает на .sub-arrow padding:10px (padding-inline-end:0) и
   margin-block:-10px — из-за этого пункт «Industries» шире прототипа на 10px
   (143 против 133) и разъезжается всё меню. В прототипе просто gap 4px + svg 14px. */
.td-nav .sub-arrow {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 1 !important;
}

.td-nav .sub-arrow svg,
.td-nav .sub-arrow i {
	width: 14px !important;
	height: 14px !important;
}

/* выпадающий список Industries */
/* Выпадающее подменю Industries на десктопе — 1:1 с прототипом
   (разметка React: `absolute left-0 top-full w-72 rounded-lg border border-border
   bg-popover p-2 shadow-lg`, пункт `block rounded-md px-3 py-2 text-sm
   hover:bg-secondary`, заголовок `font-medium`, описание `mt-0.5 block text-xs
   text-muted-foreground`). Замеры: панель 288x390, пункт 270x70, радиусы 8/6). */
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	z-index: 100 !important;
	display: none !important;
	min-width: 288px !important;
	margin: 0 !important;
	padding: 8px !important;
	list-style: none !important;
	background: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1) !important;
}

.td-nav .elementor-nav-menu--main .elementor-nav-menu > li:hover > .sub-menu,
.td-nav .elementor-nav-menu--main .elementor-nav-menu > li:focus-within > .sub-menu {
	display: block !important;
}

/* ВАЖНО: у подпунктов класс `elementor-sub-item` (а не elementor-item) —
   на этом сначала потеряли стили: пункты оставались дефолтными
   (display:flex, padding 13px 20px) и панель выходила 294px вместо 390px. */
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-item,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item {
	display: block !important;
	padding: 8px 12px !important;
	/* Elementor рисует подпунктам левую рамку 8px (отступ-направляющая) — она съедала ширину контента: описание 238 вместо 246 и лишняя строка. */ border: 0 !important;
	border-radius: 6px !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	/* Заголовок пункта — это голый текст внутри <a> (см. tandix_menu_item_description), а Elementor пунктам меню ставит white-space: nowrap. Из-за этого длинные названия не переносились и вылезали из панели: RU «Приспособления и инструментальное оснащение» (43 символа) переполняло пункт на 80px при ширине контента 246px. Разрешаем перенос — панель остаётся 288px, заголовок уходит на вторую строку. overflow-wrap — страховка от одного очень длинного слова. */ white-space: normal !important;
	overflow-wrap: break-word !important;
	color: var(--td-fg) !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease !important;
}

/* описание пункта (tagline индустрии) — 12/16, muted; в мобильной панели скрыто */
.td-mi-desc {
	display: block !important;
	/* Elementor у пунктов меню ставит white-space: nowrap — описание не переносилось на вторую строку и вылезало из панели (высота 342 вместо 390 у прототипа). */ white-space: normal !important;
	margin-top: 2px !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 16px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--td-muted-fg) !important;
}

/* Active = hover в дропдауне (десктоп).
   Elementor СВОИМ css красит подпункты в любом «активном» состоянии тёмной
   подложкой: `.elementor-sub-item:hover|:focus|.elementor-item-active|.highlighted {
	background-color: #3f444b !important;
	color: #fff !important;
}`. Наш hover перебивал только `:hover`,
   поэтому у пункта под курсором была светлая подложка, а после клика (фокус)
   и у текущей страницы — тёмная. Описываем ВСЕ состояния одним правилом.
   В прототипе у пункта есть только `hover:bg-secondary` (никакой отдельной
   подсветки активного), поэтому активный = ховер. */
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-item:hover,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-item:focus,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-item.highlighted,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-item.elementor-item-active,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.current-menu-item > a.elementor-item,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:hover,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:focus,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item.highlighted,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item.elementor-item-active,
.td-nav .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.current-menu-item > a.elementor-sub-item {
	color: var(--td-fg) !important;
	background: var(--td-secondary) !important;
}

/* --- правая группа: EN-чип + кнопка --- */
.td-header-actions {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	flex: 0 0 auto !important;
	width: auto !important;
}

.td-lang-chip {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 44px !important;
	padding: 0 12px !important;
	border-radius: 6px !important;
	background-image: var(--td-chip-metal) !important;
	font-family: var(--td-font) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	color: var(--td-fg) !important;
	cursor: pointer !important;
	user-select: none !important;
}

.td-lang-globe,
.td-lang-chev {
	width: 14px !important;
	height: 14px !important;
	fill: none !important;
	stroke: currentColor !important;
}

.td-header-cta {
	flex: 0 0 auto !important;
}

/* --- мобильная версия шапки --- */
/* h-24 -> sm:h-28: полоса 96px только до 640, лого 79 -> sm:95 (+15px к прежним 64/80) */
@media (max-width: 639px) {
	.td-header-inner,
	.td-header-inner > .e-con-inner {
	height: 96px !important;
	padding: 0 24px !important;
}
	.td-logo-img {
	height: 79px !important;
}
}

@media (max-width: 639px) {
	.td-lang,
	.td-header-cta {
	display: none !important;
}
}

/* ============================== FOOTER ============================== */
.td-footer-sec {
	padding: 0 16px 12px !important;
}

.td-footer-card {
	position: relative !important;
	overflow: hidden !important;
	max-width: 1400px !important;
	margin: 0 auto !important;
	border-radius: 20px !important;
	color: var(--td-primary-fg) !important;
}

/* металлический водяной знак TANDIX (справа снизу) */
.td-footer-card::after {
	content: 'TANDIX' !important;
	position: absolute !important;
	right: 32px !important;
	bottom: -64px !important;
	z-index: 1 !important;
	font-family: var(--td-font) !important;
	font-size: 256px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -.05em !important;
	opacity: .12 !important;
	background-image: var(--td-metal) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	pointer-events: none !important;
	user-select: none !important;
}

.td-footer-grid,
.td-footer-grid > .e-con-inner {
	position: relative !important;
	z-index: 2 !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 40px !important;
	width: 100% !important;
}

.td-f-logo {
	display: block !important;
	width: auto !important;
	height: 96px !important;
}

.td-f-tagline {
	margin-top: 16px !important;
}

.td-f-tagline p {
	margin: 0 !important;
	max-width: 320px !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: rgba(245, 247, 250, .75) !important;
}

.td-f-cta {
	margin-top: 24px !important;
}

.td-f-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 16px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--td-primary-fg) !important;
}

.td-f-list {
	margin-top: 8px !important;
}

.td-f-list ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.td-f-list li a {
	display: flex !important;
	align-items: center !important;
	min-height: 32px !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: rgba(245, 247, 250, .75) !important;
	text-decoration: none !important;
	transition: color .15s ease !important;
}

.td-f-list li a:hover {
	color: var(--td-accent) !important;
}

.td-f-contact-wrap {
	margin-top: 12px !important;
}

.td-f-contact {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.td-f-contact li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin-bottom: 8px !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: rgba(245, 247, 250, .8) !important;
}

.td-f-contact a {
	color: inherit !important;
	text-decoration: none !important;
}
.td-f-contact a:hover {
	color: var(--td-accent) !important;
}
.td-f-contact .td-ci {
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	margin-top: 2px !important;
	fill: none !important;
	stroke: var(--td-accent) !important;
}

.td-footer-bottom,
.td-footer-bottom > .e-con-inner {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
}

.td-metal-line-wrap {
	margin-top: 48px !important;
}

.td-metal-line {
	height: 1px !important;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #9a9a9a 20%, #e0e1e0 50%, #767677 80%, rgba(0, 0, 0, 0)) !important;
}

.td-f-bottom-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding-top: 24px !important;
	font-size: 12px !important;
	line-height: 16px !important;
	color: rgba(245, 247, 250, .7) !important;
}

.td-f-bottom-inner p {
	margin: 0 !important;
}
.td-f-bottom-inner a {
	color: inherit !important;
	text-decoration: none !important;
}
.td-f-bottom-inner a:hover {
	color: var(--td-accent) !important;
}

@media (min-width: 640px) {
	.td-f-bottom-inner {
	flex-direction: row !important;
}
}

@media (min-width: 768px) {
	.td-footer-grid,
	.td-footer-grid > .e-con-inner {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}

/* ============================================================
   МОБИЛЬНОЕ МЕНЮ (≤1023): бургер -> X и мягкое раскрытие панели.

   Что было: панель Elementor стоит В ПОТОКЕ внутри flex-строки шапки
   (align-items:center), поэтому высокая панель центрировалась и уезжала
   вверх (замер: box y=-30, ширина 128) — «Industries» обрезался, панель
   была узкой белой колонкой. Анимация Elementor — только scaleY
   (matrix(1,0,0,0.22) -> 1), из-за чего пункты «сплющивались».

   Что стало (по замеру прототипа: панель во всю ширину под шапкой,
   пункты 14/600/uppercase ls .7px #1b2432, подпункты 14/400 #4c566b
   с отступом 24px и высотой строки 44px, иконка бургера 24x24 штрих 2):
   панель вынесена из потока (absolute под шапку), раскрывается
   max-height + opacity с мягким изингом, подменю всегда раскрыто.
   ============================================================ */
@media (max-width: 1023px) {
	/* --- бургер: три линии превращаются в X --- */
	.td-nav .elementor-menu-toggle {
	position: relative !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--td-fg) !important;
	cursor: pointer !important;
}

	/* лого и бургер — поверх раскрытой панели */
	.td-logo,
	.td-nav .elementor-menu-toggle {
	position: relative !important;
	z-index: 2 !important;
}

	.td-nav .elementor-menu-toggle svg {
	display: none !important;
}

	.td-nav .elementor-menu-toggle::before,
	.td-nav .elementor-menu-toggle::after {
	content: '' !important;
	position: absolute !important;
	left: 10px !important;
	width: 24px !important;
	height: 2px !important;
	border-radius: 1px !important;
	background: currentColor !important;
	transition: top .3s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease !important;
}

	.td-nav .elementor-menu-toggle::before {
	top: 15px !important;
	box-shadow: 0 7px 0 currentColor !important;
}
	.td-nav .elementor-menu-toggle::after {
	top: 29px !important;
}

	.td-nav .elementor-menu-toggle[aria-expanded="true"]::before,
	.td-nav .elementor-menu-toggle.elementor-active::before {
	top: 21px !important;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
	transform: rotate(45deg) !important;
}

	.td-nav .elementor-menu-toggle[aria-expanded="true"]::after,
	.td-nav .elementor-menu-toggle.elementor-active::after {
	top: 21px !important;
	transform: rotate(-45deg) !important;
}

	/* --- панель: вне потока шапки, во всю ширину ---
	   Elementor вешает position:relative на сам .td-nav, из-за чего absolute-панель
	   привязывалась к нему (замер: ширина 48px вместо 360). Гасим — тогда containing
	   block = .td-header-inner (padding box во всю ширину) и панель full-bleed. */
	.td-nav {
	position: static !important;
}

	/* Языковой чип ушёл в панель меню, и блок действий на телефоне опустел —
	   из-за `justify-content: space-between` бургер уезжал в ЦЕНТР шапки.
	   Прижимаем меню (и всё, что за ним) к правому краю. */
	.td-nav {
	margin-left: auto !important;
}

	/* Панель идёт ОТ САМОГО ВЕРХА экрана (top:0 относительно шапки), но её контент
	   начинается ниже шапки — лого и крестик остаются видимыми поверх панели
	   (у них z-index 2, у панели 1). */
	.td-nav nav.elementor-nav-menu--dropdown {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 108px 24px 20px !important;
	z-index: 1 !important;
	background: var(--td-bg) !important;
	border-bottom: 1px solid var(--td-border) !important;
	/* нижние углы скруглены — панель читается как «шторка» */ border-bottom-left-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
	box-shadow: 0 16px 30px rgba(27, 36, 50, .08) !important;
	overflow: hidden auto !important;
	transform: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	max-height: 0 !important;
	transition: max-height .34s cubic-bezier(.22, .61, .36, 1), opacity .22s ease, transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s !important;
}

	.td-nav .elementor-menu-toggle[aria-expanded="true"] ~ nav.elementor-nav-menu--dropdown {
	opacity: 1 !important;
	visibility: visible !important;
	max-height: 100vh !important;
	transition: max-height .34s cubic-bezier(.22, .61, .36, 1), opacity .26s ease .04s, visibility 0s !important;
}

	/* --- пункты --- */
	.td-nav nav.elementor-nav-menu--dropdown ul.elementor-nav-menu,
	.td-nav nav.elementor-nav-menu--dropdown li.menu-item {
	display: block !important;
}

	.td-nav nav.elementor-nav-menu--dropdown a.elementor-item,
	.td-nav nav.elementor-nav-menu--dropdown a.elementor-sub-item {
	display: flex !important;
	align-items: center !important;
	min-height: 44px !important;
	padding: 0 12px !important;
	border-radius: 6px !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	text-decoration: none !important;
}

	.td-nav nav.elementor-nav-menu--dropdown a.elementor-item {
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	color: var(--td-fg) !important;
}

	.td-nav nav.elementor-nav-menu--dropdown a.elementor-sub-item {
	padding-left: 24px !important;
	font-weight: 400 !important;
	color: var(--td-muted-fg) !important;
}

	/* подменю в мобильном меню раскрыто всегда (как в прототипе) */
	.td-nav nav.elementor-nav-menu--dropdown ul.sub-menu {
	position: static !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

	.td-nav nav.elementor-nav-menu--dropdown .sub-arrow {
	display: none !important;
}
}

@media (hover: hover) and (max-width: 1023px) {
	.td-nav .elementor-menu-toggle:hover {
	background: var(--td-secondary) !important;
}
}

/* Active/hover в мобильном меню — как на десктопе: акцентный цвет текста,
   без тёмной подложки Elementor (#3f444b + белый текст).
   Правило ВНЕ @media (hover:hover): на тач-устройствах hover не срабатывает,
   а состояние после тапа приходит как :focus и .elementor-item-active. */
@media (max-width: 1023px) {
	.td-nav nav.elementor-nav-menu--dropdown li:not(.td-menu-lang) > a.elementor-item:hover,
	.td-nav nav.elementor-nav-menu--dropdown li:not(.td-menu-lang) > a.elementor-item:focus,
	.td-nav nav.elementor-nav-menu--dropdown li:not(.td-menu-lang) > a.elementor-item.elementor-item-active,
	.td-nav nav.elementor-nav-menu--dropdown li.current-menu-item:not(.td-menu-lang) > a.elementor-item,
	.td-nav nav.elementor-nav-menu--dropdown li:not(.td-menu-lang) a.elementor-sub-item:hover,
	.td-nav nav.elementor-nav-menu--dropdown li:not(.td-menu-lang) a.elementor-sub-item:focus,
	.td-nav nav.elementor-nav-menu--dropdown li:not(.td-menu-lang) a.elementor-sub-item.elementor-item-active,
	.td-nav nav.elementor-nav-menu--dropdown li.current-menu-item:not(.td-menu-lang) > a.elementor-sub-item {
	background-color: transparent !important;
	color: var(--td-accent-on-light) !important;
}

	/* чип языка сохраняет металлический фон, меняется только цвет текста */
	.td-nav nav.elementor-nav-menu--dropdown li.td-menu-lang > a.elementor-item:hover,
	.td-nav nav.elementor-nav-menu--dropdown li.td-menu-lang > a.elementor-item:focus {
	color: var(--td-fg) !important;
}
}

/* ============================================================
   ЯЗЫКОВОЙ ПЕРЕКЛЮЧАТЕЛЬ В МОБИЛЬНОМ МЕНЮ.
   Пункт меню «EN» (класс td-menu-lang, первым в меню) в десктопном меню
   скрыт, а в мобильной панели показывается НАД пунктами — чипом из макета
   (глобус + EN + шеврон). Чип в шапке на мобильном убираем, чтобы не дублировать.
   Иконки — те же Lucide-SVG из медиатеки, покрашенные через CSS-маску в currentColor.
   ============================================================ */
@media (max-width: 1023px) {
	.td-lang {
	display: none !important;
}

	.td-nav nav.elementor-nav-menu--dropdown li.menu-item.td-menu-lang {
	margin: 0 0 12px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--td-border) !important;
}

	.td-nav nav.elementor-nav-menu--dropdown li.td-menu-lang > a.elementor-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 44px !important;
	padding: 0 12px !important;
	border-radius: 6px !important;
	background-image: var(--td-chip-metal) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--td-fg) !important;
}

	.td-nav nav.elementor-nav-menu--dropdown li.td-menu-lang > a.elementor-item::before,
	.td-nav nav.elementor-nav-menu--dropdown li.td-menu-lang > a.elementor-item::after {
	content: '' !important;
	/* Elementor ставит своим: :before/::after у пунктов position:absolute — без сброса иконки выпадают из потока и не занимают места */ position: static !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: 14px !important;
	height: 14px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	/* Elementor держит: :before/::after пунктов меню с opacity:0 (эффекты указателя) — без этого иконки чипа не рисуются вовсе. */ opacity: 1 !important;
}

	/* Иконки — файлами темы с ЯВНЫМ цветом штриха: SVG со stroke="currentColor",
	   подключённый как CSS-маска/фон, не наследует цвет и не отрисовывается
	   (в чипе оставался только текст «EN»). */
	.td-nav nav.elementor-nav-menu--dropdown li.td-menu-lang > a.elementor-item::before {
	background-image: url("assets/globe-dark.svg") !important;
}

	.td-nav nav.elementor-nav-menu--dropdown li.td-menu-lang > a.elementor-item::after {
	background-image: url("assets/chevron-down-dark.svg") !important;
}
}

/* в десктопном меню переключатель не нужен — он в шапке */
@media (min-width: 1024px) {
	.td-nav .elementor-nav-menu--main .menu-item.td-menu-lang {
	display: none !important;
}
}

/* в мобильной панели описания пунктов не показываем (в прототипе их там нет) */
@media (max-width: 1023px) {
	.td-nav nav.elementor-nav-menu--dropdown .td-mi-desc {
	display: none !important;
}
}

/* Фокус-кольцо пунктов мобильного меню: дефолтная чёрная обводка браузера выбивалась
   из дизайна (на тач-устройствах :focus-visible не срабатывает, видно только
   при навигации с клавиатуры). Красим в акцентный цвет. */
.td-nav nav.elementor-nav-menu--dropdown a.elementor-item:focus-visible,
.td-nav nav.elementor-nav-menu--dropdown a.elementor-sub-item:focus-visible {
	outline: 2px solid var(--td-accent-on-light) !important;
	outline-offset: -2px !important;
	border-radius: 6px !important;
}

/* ============================================================
   Кнопка «back to top» — оранжевый круг в правом нижнем углу.
   Новый элемент (в прототипе его нет), сделан в стиле акцентных кнопок:
   #ff6a28, иконка accent-fg, hover — темнее и чуть выше.
   Появляется после прокрутки (класс .is-visible ставит td-ui.js).
   ============================================================ */
.td-totop-wrap {
	display: contents !important;
}

.td-totop {
	position: fixed !important;
	right: 24px !important;
	bottom: 24px !important;
	z-index: 60 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 9999px !important;
	background-color: var(--td-accent) !important;
	color: var(--td-accent-fg) !important;
	box-shadow: 0 10px 20px rgba(255, 106, 40, .28), 0 2px 6px rgba(27, 36, 50, .18) !important;
	text-decoration: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(10px) !important;
	transition: opacity .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1), background-color .15s ease, visibility 0s linear .25s !important;
}

.td-totop svg {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
}

.td-totop.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	transition: opacity .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1), background-color .15s ease, visibility 0s !important;
}

@media (hover: hover) {
	.td-totop:hover {
	background-color: #e85c1c !important;
	transform: translateY(-2px) !important;
}
}

.td-totop:focus-visible {
	outline: 2px solid var(--td-accent-on-light) !important;
	outline-offset: 3px !important;
}

@media (max-width: 639px) {
	.td-totop {
	right: 16px !important;
	bottom: 16px !important;
	width: 44px !important;
	height: 44px !important;
}
	.td-totop svg {
	width: 20px !important;
	height: 20px !important;
}
}

/* ============ Живой переключатель языков (WPML), добавлено 29.09.2026 ============
   Десктоп: чип .td-lang теперь содержит выпадающий список языков (шорткод
   [td_lang_switcher] из functions.php). Работает без JS — на :hover/:focus-within.
   Мобильный: пункт .td-menu-lang развёрнут в ссылки .td-lang-m (по одной на язык). */
.td-lang-chip.td-lang-drop {
	position: relative !important;
}
.td-lang-menu {
	position: absolute !important;
	/* без промежутка: панель вплотную к плашке (и ховер не рвётся на стыке) */ top: 100% !important;
	/* панель шире плашки: самое длинное название — «Английский», при 13px это 88px. Ширина = 88 + отступы пункта (2×10) + паддинг панели (2×6) + рамки (2) ≈ 122, берём 128 с запасом, чтобы текст не лип к краям. Прижата вправо — под плашку. */ right: 0 !important;
	left: auto !important;
	min-width: 128px !important;
	padding: 6px !important;
	border-radius: 8px !important;
	/* металлик как у чипа языка: та же переменная, что и у .td-lang-chip */ background-image: var(--td-chip-metal) !important;
	border: 1px solid rgba(15, 23, 42, .10) !important;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .16) !important;
	display: none !important;
	flex-direction: column !important;
	gap: 2px !important;
	z-index: 60 !important;
}
.td-lang-chip.td-lang-drop:hover .td-lang-menu,
.td-lang-chip.td-lang-drop:focus-within .td-lang-menu {
	display: flex !important;
}
.td-lang-item {
	display: block !important;
	/* панель 128px: влезает «Английский» (88px) с воздухом по краям */ padding: 8px 10px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 18px !important;
	text-align: left !important;
	color: var(--td-fg) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
.td-lang-item:hover,
.td-lang-item:focus {
	background: rgba(15, 23, 42, .06) !important;
}
.td-lang-item.is-current {
	color: var(--td-accent) !important;
}

@media (max-width: 1023px) {
	.td-nav nav.elementor-nav-menu--dropdown li.td-lang-m {
	display: inline-block !important;
	margin: 0 6px 12px 0 !important;
	padding: 0 !important;
}
	.td-nav nav.elementor-nav-menu--dropdown li.td-lang-m > a.elementor-item {
	min-height: 36px !important;
	padding: 0 10px !important;
}
	.td-nav nav.elementor-nav-menu--dropdown li.td-lang-m > a.elementor-item::before,
	.td-nav nav.elementor-nav-menu--dropdown li.td-lang-m > a.elementor-item::after {
	content: none !important;
}
}

/* ============ Блик по логотипу при каждой загрузке страницы (29.09.2026) ============
   Световая полоса проходит по логотипу слева-направо один раз при загрузке.
   Ключевое: полоса маскируется САМИМ логотипом (mask-image = тот же PNG),
   поэтому блик виден только на «металле», а не прямоугольником по прозрачному
   фону. Путь к картинке относительный — переживёт перенос на прод-домен.
   Анимация CSS запускается заново на каждой загрузке страницы (сайт многостраничный).
   При prefers-reduced-motion блик отключается. */
.td-logo-link {
	position: relative !important;
	overflow: hidden !important;
	/* МАСКА — на самой ссылке, а НЕ на: :after. Блик вращается (transform: rotate), и если маску повесить на него, она повернётся вместе с ним и свет вылезет за форму логотипа. На родителе маска неподвижна и режет всё, что внутри. Побочно режется и drop-shadow картинки — поэтому тень перенесена на обёртку .td-logo (см. ниже), там она считается уже от обрезанной формы. */ -webkit-mask-image: url("/wp-content/uploads/2026/09/logo-130.png") !important;
	mask-image: url("/wp-content/uploads/2026/09/logo-130.png") !important;
	-webkit-mask-size: 100% 100% !important;
	mask-size: 100% 100% !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
}
.td-logo-link::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	/* конический перелив: светлое «ребро» едет по кругу вокруг центра логотипа */ background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 28deg, rgba(255, 255, 255, .35) 68deg, rgba(255, 255, 255, .95) 92deg, rgba(255, 255, 255, .35) 116deg, rgba(255, 255, 255, 0) 156deg, rgba(255, 255, 255, 0) 360deg) !important;
	/* ВАЖНО: статичный transform здесь задавать нельзя — он уйдёт с !important (build-style.py помечает все декларации) и перебьёт кадры анимации. Стартовое состояние даёт кадр `from` при fill-mode: both. */ animation: td-logo-sheen 2.6s cubic-bezier(.45, .05, .35, 1) .2s 1 both;
}
@keyframes td-logo-sheen {
	/* полный оборот: 0deg и 360deg — одно и то же положение, поэтому без затухания
	   луч после анимации остался бы висеть на логотипе. Гасим его в конце, а
	   fill-mode: both держит конечное состояние (opacity: 0) — луча нет. */
	0%   { transform: rotate(0deg);   opacity: 1; }
	80%  { opacity: 1; }
	100% { transform: rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.td-logo-link::after {
	animation: none !important;
	opacity: 0 !important;
}
}
/* тень логотипа: перенесена с картинки на обёртку — маска на ссылке обрезала бы
   drop-shadow картинки (он лежит вне контура логотипа) */
.td-logo {
	filter: drop-shadow(0 4px 10px rgba(27, 36, 50, .18)) !important;
}
.td-logo-img {
	filter: none !important;
}

/* ============================================================
   TANDIX — внутренние страницы.
   Компоненты прототипа: page-hero (тёмная карточка с водяным знаком),
   карточка индустрии (фото 16/9, иконка-чип, пилюли материалов),
   полоса «Also producing parts for:».
   Замеры /industries (1440): hero 1393x473 r20, паддинг lg 80/64,
   водяной знак 176px справа снизу оп. .10; список boxed 1280 py-64/32,
   сетка 2x596 gap 24, карточка r8 shadow-sm -> hover shadow-md,
   фото 16/9 (hover scale 1.05), иконка-чип 40x40, заголовок 18/600,
   описание 14, пилюли 12/600 на #edf0f5, «View industry» 14/500.
   ============================================================ */

/* ---------- page-hero внутренних страниц ---------- */
/* max-width 1400 как в прототипе (`mx-auto max-w-[1400px]`): без него карточка
   на широких экранах растягивалась шире карточки футера (замер 1920: 1873 против
   1400 в прототипе; на 1440 разницы не видно — обе упираются во вьюпорт 1393). */
.td-phero {
	position: relative !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: hidden !important;
	border-radius: 20px !important;
}

/* водяной знак TANDIX справа снизу (в макете -right-10 bottom-[-2.5rem]) */
.td-phero::after {
	content: 'TANDIX' !important;
	position: absolute !important;
	right: -40px !important;
	bottom: -40px !important;
	z-index: 1 !important;
	font-family: var(--td-font) !important;
	font-size: 112px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -.05em !important;
	opacity: .1 !important;
	background-image: var(--td-metal) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	pointer-events: none !important;
	user-select: none !important;
}

.td-phero-inner,
.td-phero-inner > .e-con-inner {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
	padding: 56px 24px !important;
}

.td-phero-title {
	margin-top: 20px !important;
}

.td-phero-title .elementor-heading-title {
	margin: 0 !important;
	max-width: 768px !important;
	font-family: var(--td-font) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -.8px !important;
	color: var(--td-primary-fg) !important;
}

.td-phero-sub {
	margin-top: 16px !important;
}

.td-phero-sub p {
	margin: 0 !important;
	max-width: 672px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: rgba(245, 247, 250, .8) !important;
}

.td-phero-actions {
	margin-top: 32px !important;
	gap: 12px !important;
}

/* в прототипе кнопка page-hero — `w-full sm:w-auto`: на мобильном во всю ширину.
   Ширину задаём И обёртке виджета (.td-btn), иначе она остаётся flex-элементом
   по контенту и 100% у самой <a> считается от её 206px. */
.td-phero-actions .td-btn,
.td-phero-actions .td-btn .elementor-button,
.td-iphero-actions .td-btn,
.td-iphero-actions .td-btn .elementor-button,
.td-icta-action .td-btn,
.td-icta-action .td-btn .elementor-button {
	width: 100% !important;
}

/* ---------- список индустрий ---------- */
.td-list-sec {
	padding: 0 !important;
}

.td-list-sec > .e-con-inner {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 64px 16px !important;
	/* у контейнера Elementor дефолтный gap 20px: на /materials он добавлялся к `mt-12` (48) CTA-карточки и страница вырастала на 20px */ gap: 0 !important;
}

.td-indgrid,
.td-indgrid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 24px !important;
	width: 100% !important;
}

/* ---------- карточка индустрии ---------- */
.td-icard {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	background: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
	text-decoration: none !important;
	color: inherit !important;
	transition: box-shadow .15s ease !important;
}

.td-icard-media {
	width: 100% !important;
}

.td-icard-img img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
	transition: transform .3s ease !important;
}

.td-icard-body,
.td-icard-body > .e-con-inner,
.td-icard-foot,
.td-icard-foot > .e-con-inner,
.td-icard-head,
.td-icard-head > .e-con-inner {
	width: 100% !important;
}

.td-icard-body {
	padding: 24px !important;
}

.td-icard-head,
.td-icard-head > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px !important;
}

.td-ichip {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.td-ichip .elementor-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 9999px !important;
	background-image: var(--td-chip-metal) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(27, 36, 50, .25), 0 4px 10px rgba(27, 36, 50, .18) !important;
	color: var(--td-fg) !important;
}

.td-ichip .elementor-icon svg {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
}

.td-icard-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: -.45px !important;
	color: var(--td-fg) !important;
}

.td-icard-desc {
	margin-top: 8px !important;
}

.td-icard-desc p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-icard-foot {
	padding: 0 24px 24px !important;
}

.td-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

.td-pill {
	display: inline-flex !important;
	align-items: center !important;
	padding: 2px 10px !important;
	border: 1px solid transparent !important;
	border-radius: 9999px !important;
	background: var(--td-muted) !important;
	font-family: var(--td-font) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	color: var(--td-muted-fg) !important;
}

.td-viewind-wrap {
	margin-top: 16px !important;
}

.td-viewind {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: var(--td-fg) !important;
}

.td-viewind-arrow {
	width: 14px !important;
	height: 14px !important;
	fill: none !important;
	stroke: currentColor !important;
	transition: transform .3s ease !important;
}

@media (hover: hover) {
	.td-icard:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) !important;
}
	.td-icard:hover .td-icard-img img {
	transform: scale(1.05) !important;
}
	.td-icard:hover .td-viewind-arrow {
	transform: translateX(4px) !important;
}
	.td-icard:hover .td-icard-title .elementor-heading-title {
	color: var(--td-primary) !important;
}
}

/* ---------- полоса «Also producing parts for:» ---------- */
.td-band-sec {
	border-top: 1px solid var(--td-border) !important;
	background-color: rgba(231, 235, 241, .3) !important;
}

.td-band,
.td-band > .e-con-inner {
	width: 100% !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 40px 16px !important;
}

.td-band-text {
	margin: 0 !important;
	text-align: center !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-band-strong {
	font-weight: 600 !important;
	color: var(--td-fg) !important;
}

/* ---------- адаптив (брейкпоинты прототипа: sm 640, md 768, lg 1024) ---------- */
@media (min-width: 640px) {
	.td-phero-inner,
	.td-phero-inner > .e-con-inner {
	padding: 56px 40px !important;
}
	.td-phero-title .elementor-heading-title {
	font-size: 36px !important;
}
	.td-phero-sub p {
	font-size: 18px !important;
	line-height: 28px !important;
}
	.td-phero::after {
	font-size: 176px !important;
}
	.td-list-sec > .e-con-inner {
	padding: 64px 24px !important;
}
}

@media (min-width: 768px) {
	.td-indgrid,
	.td-indgrid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (min-width: 1024px) {
	.td-phero-inner,
	.td-phero-inner > .e-con-inner {
	padding: 80px 64px !important;
}
	.td-phero-title .elementor-heading-title {
	font-size: 48px !important;
	letter-spacing: -1.2px !important;
}
	.td-list-sec > .e-con-inner {
	padding: 64px 32px !important;
}
}

/* Полоса «Also producing»: Elementor добавляет контейнеру дефолтный padding 10px,
   из-за чего секция выходила 121px вместо 101 (паддинг живёт на .td-band). */
.td-band-sec {
	padding: 0 !important;
}

/* Плашка на тёмном фоне: .td-label--light задавала только цвет уголков,
   а текст наследовал тёмный цвет body — на тёмной карточке он был невидим
   (в hero внутренних страниц «INDUSTRIES» пропадал). */
.td-label--light {
	color: var(--td-primary-fg) !important;
}

/* ============================================================
   СТРАНИЦА /contact
   Прототип: page-hero → секция max-w-7xl (1280) px-4/6/8 py-16 →
   сетка 4 инфо-карточек (gap 24) → блок mt-10 grid gap-8 lg:2col:
   карта OpenStreetMap (rounded-xl border) + карточка с формой.
   Замеры 1440: карточка 286x192 r8 shadow-sm (шапка p-24: чип 40x40 +
   заголовок 16/600 mt-8, тело p-24 pt-0 14/20); карта 592x546;
   карточка формы 592x546 (шапка p-24: 18/28 + 14/20, форма 542x398:
   label 14/500, input h44 r6 border #d6dce5, textarea 118, note 12/16,
   кнопка h40 r6 accent).
   ============================================================ */

.td-contact-sec {
	padding: 0 !important;
}

.td-contact-sec > .e-con-inner {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 64px 16px !important;
	/* Elementor даёт flex-контейнеру дефолтный gap 20px — в прототипе его нет (отступ между сеткой карточек и блоком карта/форма — только mt-10 = 40px) */ gap: 0 !important;
}

/* ---------- сетка инфо-карточек ---------- */
.td-cinfo-grid,
.td-cinfo-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 24px !important;
	width: 100% !important;
}

.td-ccard {
	display: flex !important;
	flex-direction: column !important;
	background: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

.td-ccard-head,
.td-ccard-head > .e-con-inner {
	width: 100% !important;
	padding: 24px !important;
}

.td-ccard-title {
	margin-top: 8px !important;
}

.td-ccard-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: -.4px !important;
	color: var(--td-fg) !important;
}

.td-ccard-body {
	padding: 0 24px 24px !important;
}

.td-ccard-body p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-ccard-body a {
	color: inherit !important;
}
.td-ccard-body a:hover {
	color: var(--td-primary) !important;
}

/* Ховер инфо-карточек — тот же, что у карточек Industries на главной
   (transition box-shadow .15s + тень 0 10px 15px / 0 4px 6px). Курсор
   не меняем: в отличие от главной, карточка целиком не является ссылкой.
   Обёрнуто в @media (hover: hover) — чтобы на тач-устройствах тень не «залипала». */
@media (hover: hover) {
	.td-ccard {
	transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1) !important;
}
	.td-ccard:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1) !important;
}
}

/* ---------- карта + карточка формы ---------- */
.td-clower,
.td-clower > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 32px !important;
	width: 100% !important;
	margin-top: 40px !important;
	align-items: stretch !important;
}

.td-cmap {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 12px !important;
}

/* Виджет Google Maps: .td-cmap-frame > [.elementor-widget-container]
   > .elementor-custom-embed > iframe — растягиваем всю цепочку на высоту строки. */
.td-cmap > .td-cmap-frame {
	display: flex !important;
	flex: 1 1 auto !important;
	width: 100% !important;
}

.td-cmap .elementor-widget-container,
.td-cmap .elementor-custom-embed {
	display: flex !important;
	flex: 1 1 auto !important;
	width: 100% !important;
}

.td-cmap iframe {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 320px !important;
	border: 0 !important;
}

.td-cform-card {
	display: flex !important;
	flex-direction: column !important;
	background: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

.td-cform-head,
.td-cform-head > .e-con-inner {
	width: 100% !important;
	padding: 24px !important;
}

.td-cform-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 28px !important;
	letter-spacing: -.45px !important;
	color: var(--td-fg) !important;
}

.td-cform-sub {
	margin-top: 6px !important;
}

.td-cform-sub p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-cform-sub a {
	color: var(--td-fg) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px !important;
}

/* ---------- форма (штатный виджет Form) ---------- */
.td-cform {
	padding: 0 24px 24px !important;
}

.td-cform .elementor-form-fields-wrapper {
	display: block !important;
	margin: 0 !important;
}

/* Отступы полей сверены с прототипом по замерам: label → input 20px
   (за счёт 3px к высоте строки label), input → следующий label 20px,
   а вокруг html-примечания — 16px. Хвостового margin у формы нет
   (в прототипе space-y даёт margin только последующим, а не последнему). */
.td-cform .elementor-field-group {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.td-cform .elementor-field-group + .elementor-field-group {
	margin-top: 20px !important;
}
.td-cform .elementor-field-group.elementor-field-type-html {
	margin-top: 16px !important;
}
.td-cform .elementor-field-type-html + .elementor-field-group {
	margin-top: 16px !important;
}

/* в прототипе label — inline, и над его контент-боксом есть 4px строкового
   интерлиньяжа; у нас label блочный, поэтому компенсируем отступом сверху */
.td-cform .elementor-field-group:first-child {
	margin-top: 4px !important;
}

.td-cform .elementor-field-label {
	display: block !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 17px !important;
	color: var(--td-fg) !important;
}

.td-cform .elementor-field-textual {
	width: 100% !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 8px 12px !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 6px !important;
	background-color: var(--td-bg) !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-fg) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

.td-cform textarea.elementor-field-textual {
	height: 118px !important;
	min-height: 100px !important;
	resize: vertical !important;
}

.td-cform .elementor-field-textual:focus {
	outline: none !important;
	border-color: var(--td-fg) !important;
	box-shadow: 0 0 0 2px rgba(27, 36, 50, .18) !important;
}

.td-cform .elementor-field-type-html p {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 16px !important;
	color: var(--td-muted-fg) !important;
}

.td-cform .elementor-field-type-html a {
	color: var(--td-fg) !important;
	text-decoration: none !important;
	text-underline-offset: 4px !important;
}
.td-cform .elementor-field-type-html a:hover {
	text-decoration: underline !important;
}

.td-cform .e-form__buttons {
	width: 100% !important;
}

.td-cform .elementor-button {
	width: 100% !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 8px 20px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background-color: var(--td-accent) !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	color: var(--td-accent-fg) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

.td-cform .elementor-button:hover {
	background-color: rgba(255, 106, 40, .9) !important;
}

/* ---------- адаптив /contact ---------- */
@media (min-width: 640px) {
	.td-contact-sec > .e-con-inner {
	padding: 64px 24px !important;
}
	.td-cinfo-grid,
	.td-cinfo-grid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (min-width: 1024px) {
	.td-contact-sec > .e-con-inner {
	padding: 64px 32px !important;
}
	.td-cinfo-grid,
	.td-cinfo-grid > .e-con-inner {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
	.td-clower,
	.td-clower > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

/* ============================================================
   СТРАНИЦА /rfq
   Прототип: page-hero БЕЗ кнопки → секция max-w-3xl (768) px-4/6/8 py-16 →
   баннер-подсказка (rounded-lg border bg-secondary/40 p-16, иконка clock 20px) →
   форма space-y-8: дропзона файлов (2px dashed, padding 40/24, h 164), сетка
   2 колонки (person/company, email/phone) + Country на всю ширину, затем
   description, Material, Required volume (радио-карточки 227x62), Comments,
   группа из трёх чекбоксов (один бокс r8 p16 bg-secondary/30, ряды через 12px)
   и ряд submit (кнопка h48 + бейджи расширений справа).
   Замеры 1440: секция 768x1460, баннер 704x74, форма 704x1226, поля 704
   (в паре 344), input h44, select h40, textarea 120/100, кнопка 170x48.
   ============================================================ */

.td-rfq-sec {
	padding: 0 !important;
}

.td-rfq-sec > .e-con-inner {
	max-width: 768px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 64px 16px !important;
	gap: 0 !important;
}

/* ---------- баннер-подсказка ---------- */
.td-rfq-banner,
.td-rfq-banner > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 16px !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	background-color: rgba(231, 235, 241, .4) !important;
}

.td-rfq-banner {
	margin-bottom: 32px !important;
}

.td-rfq-bicon {
	flex: 0 0 auto !important;
	margin-top: 2px !important;
}

.td-rfq-bicon .elementor-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	color: var(--td-fg) !important;
}

.td-rfq-bicon .elementor-icon svg {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
}

.td-rfq-btext p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

/* ---------- каркас формы ---------- */
.td-rfq-form .elementor-form-fields-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	column-gap: 16px !important;
	row-gap: 16px !important;
	margin: 0 !important;
}

.td-rfq-form .elementor-field-group {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.td-rfq-form .elementor-field-group.elementor-col-50 {
	width: calc(50% - 8px) !important;
}

/* 32px-разрывы прототипа (space-y-8) = row-gap 16 + 16. В паре отступ нужен
   ОБОИМ элементам, иначе второй уезжает вверх на 16px. */
.td-rfq-form .elementor-field-group-person,
.td-rfq-form .elementor-field-group-company,
.td-rfq-form .elementor-field-group-description,
.td-rfq-form .elementor-field-group-nda,
.td-rfq-form .e-form__buttons,
.td-rfq-form .elementor-field-group-ext {
	margin-top: 16px !important;
}

/* три чекбокса — один общий бокс: flex-зазор между рядами гасим полностью
   (иначе видны щели и блок рассыпается на три полоски), а 12px отступа между
   строками даёт padding 6+6 внутри рядов (см. блок чекбоксов ниже) */
.td-rfq-form .elementor-field-group-dfm,
.td-rfq-form .elementor-field-group-gdpr {
	margin-top: -16px !important;
}

/* ---------- подписи и поля ---------- */
/* Подпись: в прототипе label — inline в блоке с line-height 24 (контент-бокс
   17px центрируется, +4px сверху), а контрол обёрнут в `mt-1.5` (6px), т.е.
   контрол стоит на +30 от верха блока. Отсюда `margin: 4px 0 9px` (4+17+9 = 30):
   при этом высоты блоков совпадают с макетом — поле 74, select 70, textarea 150. */
.td-rfq-form .elementor-field-label {
	display: block !important;
	margin: 4px 0 9px !important;
	padding: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 17px !important;
	color: var(--td-fg) !important;
}

.td-rfq-form .elementor-field-label:empty {
	display: none !important;
}

.td-rfq-form .elementor-field-textual {
	width: 100% !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 8px 12px !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 6px !important;
	background-color: var(--td-bg) !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-fg) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

.td-rfq-form textarea.elementor-field-textual {
	height: 120px !important;
	min-height: 120px !important;
	resize: vertical !important;
}
.td-rfq-form .elementor-field-group-comments textarea.elementor-field-textual {
	height: 100px !important;
	min-height: 100px !important;
}

/* placeholder в прототипе — muted (placeholder:text-muted-foreground) */
.td-rfq-form .elementor-field-textual::placeholder {
	color: var(--td-muted-fg) !important;
	opacity: 1 !important;
}

.td-rfq-form .elementor-field-textual:focus {
	outline: none !important;
	border-color: var(--td-fg) !important;
	box-shadow: 0 0 0 2px rgba(27, 36, 50, .18) !important;
}

/* native-select вместо shadcn-триггера прототипа: h-10 (40px), px-5 (20px),
   иконка lucide chevrons-up-down (ДВОЙНАЯ стрелка, 16px, opacity .5) справа
   через 20px, hover — bg-secondary, плейсхолдер приглушённый. */
.td-rfq-form select.elementor-field-textual {
	height: 40px !important;
	padding: 8px 44px 8px 20px !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b2432' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 20px center !important;
	background-size: 16px 16px !important;
	cursor: pointer !important;
	transition: background-color .15s ease !important;
}

.td-rfq-form select.elementor-field-textual:hover {
	background-color: var(--td-secondary) !important;
}

/* «Select country…» / «Select material…» — muted, пока выбрана пустая опция */
.td-rfq-form select.elementor-field-textual:has(option[value=""]:checked) {
	color: var(--td-muted-fg) !important;
}

/* Группы материала: браузерный дефолт для <optgroup> — 16px/700, из-за чего
   список Material выглядел крупнее, чем Country. Приравниваем размер к селекту
   (14/20), жирность метки группы оставляем — так группы читаются. */
.td-rfq-form select.elementor-field-textual optgroup,
.td-rfq-form select.elementor-field-textual optgroup option {
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

.td-rfq-form select.elementor-field-textual optgroup {
	font-weight: 700 !important;
}

/* Elementor Pro дорисовывает собственную стрелку (span.select-caret-down-wrapper
   с eicon-caret-down) поверх нашей — получалось две иконки. Прячем её. */
.td-rfq-form .elementor-select-wrapper .select-caret-down-wrapper {
	display: none !important;
}
.td-rfq-form .elementor-select-wrapper::before {
	content: none !important;
}

/* ---------- дропзона файлов ----------
   Штатный input type=file прячем (sr-only): он остаётся функциональным, а клик
   по <label for="form-field-files"> внутри .td-rfq-drop открывает системный
   выбор файлов. Визуал — точная копия прототипа: иконка upload 32px, заголовок
   14/500, подсказка 12/16, hover border-primary + bg-secondary. */
.td-rfq-form .elementor-field-group-files {
	/* flow-root — чтобы margin-bottom подписи не «вылезал» из группы и следующий блок вставал ровно на +30 от её верха (как в макете) */ display: flow-root !important;
}

.td-rfq-form .elementor-field-group-files .elementor-upload-field {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
}

/* визуальный бокс идёт сразу за подписью: гасим row-gap 16 */
.td-rfq-form .elementor-field-group-dropvis {
	margin-top: -16px !important;
}

.td-rfq-form .td-rfq-drop {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 164px !important;
	padding: 40px 24px !important;
	border: 2px dashed var(--td-border) !important;
	border-radius: 8px !important;
	background-color: rgba(231, 235, 241, .4) !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: border-color .15s ease, background-color .15s ease !important;
}

.td-rfq-form .td-rfq-drop:hover {
	border-color: var(--td-primary) !important;
	background-color: var(--td-secondary) !important;
}

.td-rfq-form .td-rfq-drop.is-drag {
	border-color: var(--td-primary) !important;
	background-color: var(--td-secondary) !important;
}

.td-rfq-form .td-rfq-drop-icon {
	width: 32px !important;
	height: 32px !important;
	fill: none !important;
	stroke: var(--td-primary) !important;
}

.td-rfq-form .td-rfq-drop-title {
	margin-top: 8px !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: var(--td-fg) !important;
}

.td-rfq-form .td-rfq-drop-hint {
	margin-top: 4px !important;
	font-family: var(--td-font) !important;
	font-size: 12px !important;
	line-height: 16px !important;
	color: var(--td-muted-fg) !important;
}

/* список выбранных файлов (заполняет td-rfq.js) */
.td-rfq-form .td-rfq-drop-list {
	margin-top: 8px !important;
	font-family: var(--td-font) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	color: var(--td-fg) !important;
	word-break: break-word !important;
}

.td-rfq-form .td-rfq-drop.is-filled {
	border-color: var(--td-primary) !important;
}

/* Служебное html-поле с картой групп материала (data-td-rfq-groups):
   в разметке нужно, в вёрстке — нет, иначе даёт лишний row-gap 16px. */
.td-rfq-form .elementor-field-group-mgroups {
	display: none !important;
}

/* ---------- Required volume: радио-карточки ---------- */
.td-rfq-form .elementor-field-type-radio .elementor-field-subgroup {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 12px !important;
	width: 100% !important;
}

.td-rfq-form .elementor-field-type-radio .elementor-field-option {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 12px !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 6px !important;
	background-color: var(--td-card) !important;
	cursor: pointer !important;
}

.td-rfq-form .elementor-field-type-radio .elementor-field-option input[type="radio"] {
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	margin: 3px 0 0 !important;
	accent-color: var(--td-primary) !important;
}

.td-rfq-form .elementor-field-type-radio .elementor-field-option label {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	color: var(--td-fg) !important;
	cursor: pointer !important;
}

.td-rfq-form .td-rfq-card-hint {
	display: block !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 16px !important;
	color: var(--td-muted-fg) !important;
}

/* ---------- чекбоксы: три acceptance визуально одним боксом ----------
   Обёртки у группы нет, поэтому «один бокс» собираем из трёх полей:
    • flex-зазор между рядами = 0 (margin-top: -16px гасит row-gap), иначе между
      полосками просвечивает фон страницы;
    • 12px между строками — это padding 6px сверху/снизу внутри каждого ряда;
    • 16px паддинга бокса живут на первом (сверху) и последнем (снизу) ряду;
    • рамку рисуют только внешние стороны: left/right у всех, top у первого,
      bottom у последнего. Внутренние горизонтальные линии не рисуем. */
.td-rfq-form .elementor-field-type-acceptance {
	padding: 6px 16px !important;
	border: 0 !important;
	border-left: 1px solid var(--td-border) !important;
	border-right: 1px solid var(--td-border) !important;
	background-color: rgba(231, 235, 241, .3) !important;
}

.td-rfq-form .elementor-field-group-nda {
	padding-top: 16px !important;
	border-top: 1px solid var(--td-border) !important;
	border-radius: 8px 8px 0 0 !important;
}

.td-rfq-form .elementor-field-group-gdpr {
	padding-bottom: 16px !important;
	border-bottom: 1px solid var(--td-border) !important;
	border-radius: 0 0 8px 8px !important;
}

.td-rfq-form .elementor-field-type-acceptance .elementor-field-subgroup {
	width: 100% !important;
}

.td-rfq-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
}

.td-rfq-form .elementor-field-type-acceptance input[type="checkbox"] {
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	margin: 2px 0 0 !important;
	border-radius: 4px !important;
	accent-color: var(--td-primary) !important;
}

.td-rfq-form .elementor-field-type-acceptance label {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 19.25px !important;
	color: var(--td-muted-fg) !important;
	cursor: pointer !important;
}

.td-rfq-form .elementor-field-type-acceptance label a {
	color: var(--td-fg) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

/* ---------- ряд submit: кнопка + бейджи расширений ---------- */
.td-rfq-form .e-form__buttons {
	order: 1 !important;
	width: auto !important;
}

.td-rfq-form .elementor-field-group-ext {
	order: 2 !important;
	width: auto !important;
	margin-left: auto !important;
	align-self: center !important;
}

.td-rfq-form .td-rfq-ext-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

.td-rfq-form .elementor-button {
	width: auto !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background-color: var(--td-accent) !important;
	font-family: var(--td-font) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	color: var(--td-accent-fg) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

.td-rfq-form .elementor-button:hover {
	background-color: rgba(255, 106, 40, .9) !important;
}

.td-rfq-form .elementor-button-text {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* стрелка arrow-right в кнопке (в Form-виджете иконки нет — рисуем маской,
   чтобы цвет наследовался от текста) */
.td-rfq-form .elementor-button-text::after {
	content: "" !important;
	width: 16px !important;
	height: 16px !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* ---------- адаптив /rfq ---------- */
@media (min-width: 640px) {
	.td-rfq-sec > .e-con-inner {
	padding: 64px 24px !important;
}
	.td-rfq-form .elementor-field-type-radio .elementor-field-subgroup {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}

@media (min-width: 1024px) {
	.td-rfq-sec > .e-con-inner {
	padding: 64px 32px !important;
}
}

@media (max-width: 639px) {
	/* пары схлопываются в одну колонку — «правый» элемент становится отдельной
	   строкой, и его margin-top (нужный на десктопе для 32px-разрыва) даёт лишние 16 */
	.td-rfq-form .elementor-field-group.elementor-col-50 {
	width: 100% !important;
}
	.td-rfq-form .elementor-field-group-company,
	.td-rfq-form .elementor-field-group-phone {
	margin-top: 0 !important;
}
}

/* Full-bleed секциям Elementor НЕ создаёт .e-con-inner (грабля №4), поэтому
   мобильный отступ должен жить на самой секции: в прототипе hero — `px-3`
   (12px) до 640 и `sm:px-4` (16px) дальше. В td-home.css такое правило есть
   для главной (.td-hero-sec), для внутренних страниц забыли — карточка
   выходила 328 вместо 336 на 375. */
@media (max-width: 639px) {
	.td-phero-sec {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
}

/* На узком экране подсказка о форматах переносится на 2 строки — в прототипе
   дропзона от этого растёт до 200px. Повторяем: бокс выше, подсказка остаётся
   внутри (абсолютом у нижнего края), а не наезжает на кнопку выбора файла. */
@media (max-width: 639px) {
	/* подсказка переносится на 2 строки — в прототипе бокс растёт до 200px */
	.td-rfq-form .td-rfq-drop {
	min-height: 200px !important;
}
}

/* ============================================================
   СТРАНИЦА /about
   Прототип: page-hero → Our story (max-w-3xl, pt-16 pb-8) → 3 тёмные карточки
   (max-w-7xl, pt-8 pb-16) → полоса «One contact» (border-top + bg-secondary/30,
   внутри max-w-7xl py-16: текст + фото 4/3 r12) → Quality (max-w-7xl py-16:
   4 карточки в 2 колонки, блок «What you get» bg-secondary/40, FAQ-аккордеон,
   тёмная CTA-карточка).
   Замеры 1440: story 768x428 (h2 30/36, абзацы 16/24 + 16), карточки 389x254
   (p32 r8 #1b2432 border #3A4456, чип 56, h3 20/28, текст 14/22.75 white/70),
   One contact 1425x574 (фото 592x445), quality-карточки 596 (чип 40, h3 18/18,
   тело 14/20), get-бокс 1216x142, FAQ-строка 57, CTA 1216x118.
   ============================================================ */

/* --- заголовки секций (text-2xl -> sm:text-3xl) --- */
.td-ab-h2 .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 32px !important;
	letter-spacing: -.6px !important;
	color: var(--td-fg) !important;
}

/* ---------- 1) Our story ---------- */
.td-ab-story-sec {
	padding: 0 !important;
}

/* Ширина как у остальных секций страницы (max-w-7xl = 1280): просьба заказчика
   18.09 — блок «Our story» должен идти по ширине внутреннего контента, а не
   узкой колонкой 768 из прототипа. */
.td-ab-story-sec > .e-con-inner {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 64px 16px 32px !important;
	gap: 0 !important;
}

.td-ab-story {
	margin-top: 24px !important;
}

.td-ab-story p {
	margin: 0 0 16px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--td-muted-fg) !important;
}

.td-ab-story p:last-child {
	margin-bottom: 0 !important;
}

/* ---------- 2) три тёмные карточки ---------- */
.td-ab-cards-sec {
	padding: 0 !important;
}

.td-ab-cards-sec > .e-con-inner {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 32px 16px 64px !important;
	gap: 0 !important;
}

.td-ab-cards,
.td-ab-cards > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 24px !important;
	width: 100% !important;
}

.td-abcard {
	position: relative !important;
	overflow: hidden !important;
	padding: 32px !important;
	border: 1px solid #3a4456 !important;
	border-radius: 8px !important;
	background-color: #1b2432 !important;
	transition: border-color .3s ease, box-shadow .3s ease !important;
}

.td-abchip {
	flex: 0 0 auto !important;
	margin: 0 0 24px !important;
}

.td-abchip .elementor-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 9999px !important;
	background-image: var(--td-chip-metal) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(27, 36, 50, .25), 0 4px 10px rgba(27, 36, 50, .18) !important;
	color: var(--td-fg) !important;
}

.td-abchip .elementor-icon svg {
	width: 28px !important;
	height: 28px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.5 !important;
}

.td-abcard-title .elementor-heading-title {
	margin: 0 0 12px !important;
	font-family: var(--td-font) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 28px !important;
	letter-spacing: -.5px !important;
	color: #fff !important;
}

.td-abcard-text p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 22.75px !important;
	color: rgba(255, 255, 255, .7) !important;
}

@media (hover: hover) {
	.td-abcard:hover {
	border-color: var(--td-accent) !important;
	box-shadow: 0 25px 50px -12px rgba(124, 45, 18, .1) !important;
}
}

/* ---------- 3) One contact, start to finish ---------- */
/* full-bleed полоса: рамка и фон на внешнем .e-con, контент — boxed 1280 */
.td-ab-one-sec {
	padding: 0 !important;
	border-top: 1px solid var(--td-border) !important;
	background-color: rgba(231, 235, 241, .3) !important;
}

.td-ab-one-sec > .e-con-inner {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 64px 16px !important;
	gap: 0 !important;
}

.td-ab-one-grid,
.td-ab-one-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 32px !important;
	width: 100% !important;
	align-items: center !important;
}

.td-ab-one-text,
.td-ab-one-text > .e-con-inner {
	width: 100% !important;
}

.td-ab-one-sub {
	margin-top: 16px !important;
}

.td-ab-one-sub p {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--td-muted-fg) !important;
}

.td-ab-list {
	margin-top: 24px !important;
}

.td-ab-list .elementor-icon-list-items {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.td-ab-list .elementor-icon-list-item {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

.td-ab-list .elementor-icon-list-icon {
	flex: 0 0 16px !important;
	width: 16px !important;
}

.td-ab-list .elementor-icon-list-icon svg {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: var(--td-primary) !important;
}

/* текст пункта: Elementor ставит глобальную типографику 16/24 — приводим к 14/20 */
.td-ab-list .elementor-icon-list-text {
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-fg) !important;
}

.td-ab-list a {
	color: inherit !important;
}
.td-ab-list a:hover {
	color: var(--td-primary) !important;
}

.td-ab-one-img img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1) !important;
}

/* ---------- 4) Quality & certificates ---------- */
.td-ab-q-sec {
	padding: 0 !important;
}

.td-ab-q-sec > .e-con-inner {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 64px 16px !important;
	gap: 0 !important;
}

.td-ab-q-sub {
	margin-top: 12px !important;
}

.td-ab-q-sub p {
	margin: 0 !important;
	max-width: 672px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--td-muted-fg) !important;
}

.td-ab-qgrid,
.td-ab-qgrid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 24px !important;
	width: 100% !important;
	margin-top: 32px !important;
}

.td-abqcard {
	background-color: var(--td-card) !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

.td-abq-top,
.td-abq-top > .e-con-inner {
	width: 100% !important;
	padding: 24px !important;
}

.td-abq-head,
.td-abq-head > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
}

.td-abqchip {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.td-abqchip .elementor-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 9999px !important;
	background-image: var(--td-chip-metal) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(27, 36, 50, .25), 0 4px 10px rgba(27, 36, 50, .18) !important;
	color: var(--td-fg) !important;
}

.td-abqchip .elementor-icon svg {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
}

.td-abq-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 18px !important;
	letter-spacing: -.45px !important;
	color: var(--td-fg) !important;
}

.td-abq-body {
	padding: 0 24px 24px !important;
}

.td-abq-body p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

/* блок «What you get with every delivery» */
.td-ab-get {
	margin-top: 40px !important;
	padding: 24px !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	background-color: rgba(231, 235, 241, .4) !important;
}

.td-ab-get-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 28px !important;
	letter-spacing: -.18px !important;
	color: var(--td-fg) !important;
}

.td-ab-get-list {
	margin-top: 16px !important;
}

.td-ab-get-list .elementor-icon-list-items,
.td-cap-list .elementor-icon-list-items {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 8px !important;
}

.td-ab-get-list .elementor-icon-list-item,
.td-cap-list .elementor-icon-list-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

.td-ab-get-list .elementor-icon-list-icon,
.td-cap-list .elementor-icon-list-icon {
	flex: 0 0 16px !important;
	width: 16px !important;
}

.td-ab-get-list .elementor-icon-list-icon svg,
.td-cap-list .elementor-icon-list-icon svg {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: var(--td-primary) !important;
}

.td-ab-get-list .elementor-icon-list-text,
.td-cap-list .elementor-icon-list-text {
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-fg) !important;
}

/* FAQ — штатный Accordion: строка с border-bottom, chevron справа */
.td-ab-faq-wrap {
	margin-top: 56px !important;
}

.td-ab-faq-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 28px !important;
	letter-spacing: -.5px !important;
	color: var(--td-fg) !important;
}

.td-ab-faq {
	margin-top: 16px !important;
}

.td-ab-faq .elementor-accordion-item {
	border: 0 !important;
	border-bottom: 1px solid var(--td-border) !important;
}

.td-ab-faq .elementor-tab-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: 0 !important;
	padding: 16px 0 !important;
	border: 0 !important;
	background: transparent !important;
	cursor: pointer !important;
	font-family: var(--td-font) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: -.16px !important;
	color: var(--td-fg) !important;
}

.td-ab-faq .elementor-tab-title:hover {
	text-decoration: underline !important;
}

.td-ab-faq .elementor-accordion-icon {
	order: 2 !important;
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	color: var(--td-muted-fg) !important;
}

.td-ab-faq .elementor-accordion-icon-closed,
.td-ab-faq .elementor-accordion-icon-opened {
	display: flex !important;
	align-items: center !important;
}

.td-ab-faq .elementor-accordion-icon-opened {
	display: none !important;
}

.td-ab-faq .elementor-tab-title.elementor-active .elementor-accordion-icon-closed {
	display: none !important;
}
.td-ab-faq .elementor-tab-title.elementor-active .elementor-accordion-icon-opened {
	display: flex !important;
}

.td-ab-faq .elementor-accordion-icon svg {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: currentColor !important;
	transition: transform .2s ease !important;
}

.td-ab-faq .elementor-tab-title.elementor-active .elementor-accordion-icon-opened svg {
	transform: rotate(180deg) !important;
}

/* Плавное раскрытие. Elementor переключает контент через jQuery show()/hide() —
   это мгновенно и выглядит рывком; в прототипе Radix анимирует высоту за .2s.
   Анимируем строку грида 0fr → 1fr: высота едет до натуральной. `display: grid`
   обязателен с !important — JS ставит inline `display: none`, который обрывал бы
   анимацию; закрытое состояние теперь задаёт grid-template-rows: 0fr.
   Нижний отступ 16px живёт на внутреннем <p>, чтобы тоже сворачивался. */
.td-ab-faq .elementor-tab-content {
	display: grid !important;
	grid-template-rows: 0fr !important;
	/* нижний отступ 16px анимируем отдельно: если оставить его на внутреннем <p>, в закрытом состоянии остаётся «хвост» 16px (padding не сворачивается вместе со строкой грида) и пункт в покое 73px вместо 57 */ padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
	transition: grid-template-rows .2s cubic-bezier(.4, 0, .2, 1), padding-bottom .2s cubic-bezier(.4, 0, .2, 1) !important;
}

.td-ab-faq .elementor-tab-title.elementor-active + .elementor-tab-content {
	grid-template-rows: 1fr !important;
	padding-bottom: 16px !important;
}

.td-ab-faq .elementor-tab-content > p {
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* CTA-карточка */
.td-ab-cta {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-top: 48px !important;
	padding: 32px !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	background-color: var(--td-primary) !important;
	color: var(--td-primary-fg) !important;
}

.td-ab-cta-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 28px !important;
	letter-spacing: -.2px !important;
	color: var(--td-primary-fg) !important;
}

.td-ab-cta-sub {
	margin-top: 4px !important;
}

.td-ab-cta-sub p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: rgba(245, 247, 250, .8) !important;
}

.td-ab-cta-text {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

.td-ab-cta-action {
	flex: 0 0 auto !important;
	width: 100% !important;
}

/* `w-full sm:w-auto` у кнопки CTA: обёртка виджета тоже должна тянуться */
.td-ab-cta-action .td-btn {
	width: 100% !important;
}

/* ---------- адаптив /about ---------- */
@media (min-width: 640px) {
	.td-ab-h2 .elementor-heading-title {
	font-size: 30px !important;
	line-height: 36px !important;
	letter-spacing: -.75px !important;
}
	.td-ab-story-sec > .e-con-inner {
	padding: 64px 24px 32px !important;
}
	.td-ab-cards-sec > .e-con-inner {
	padding: 32px 24px 64px !important;
}
	.td-ab-one-sec > .e-con-inner {
	padding: 64px 24px !important;
}
	.td-ab-q-sec > .e-con-inner {
	padding: 64px 24px !important;
}
	.td-ab-qgrid,
	.td-ab-qgrid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-ab-get-list .elementor-icon-list-items,
	.td-cap-list .elementor-icon-list-items {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	/* nowrap как в прототипе (Tailwind `flex` = nowrap): при wrap кнопка
	   переносилась на вторую строку и карточка вырастала на 44px */
	.td-ab-cta {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
}
	/* `w-full sm:w-auto` у кнопки CTA */
	.td-ab-cta-action {
	width: auto !important;
}
	.td-ab-cta-action .td-btn {
	width: auto !important;
}
	.td-phero-actions .td-btn,
	.td-phero-actions .td-btn .elementor-button,
	.td-iphero-actions .td-btn,
	.td-iphero-actions .td-btn .elementor-button {
	width: auto !important;
}
}

@media (min-width: 1024px) {
	.td-ab-story-sec > .e-con-inner {
	padding: 64px 32px 32px !important;
}
	.td-ab-cards-sec > .e-con-inner {
	padding: 32px 32px 64px !important;
}
	.td-ab-cards,
	.td-ab-cards > .e-con-inner {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
	.td-ab-one-sec > .e-con-inner {
	padding: 64px 32px !important;
}
	.td-ab-one-grid,
	.td-ab-one-grid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-ab-q-sec > .e-con-inner {
	padding: 64px 32px !important;
}
}

/* ============================================================
   СТРАНИЦА /capabilities
   Прототип: page-hero → секция max-w-7xl (1280) py-16 → полоса-переключатель
   (металл: p-2, r16, тёмный градиент, ring white/10) + карточка активного таба
   (r8, border, shadow; chip 40 + заголовок 18/600, описание 14/20 muted,
   список спецификаций 2×N с check 16) → полоса «How it works» (4 шага 36/40,
   чипы расширений, кнопка справа) → футер.
   Замеры 1440: hero 1393x501, секция табов 1280x388 (бар 1216x56, активный таб
   135x40, карточка 1216x196), steps 1425x446 (сетка 4×280 gap 32, шаг 120,
   кнопка 178x44 @x1142), docH 1920.
   Штатный `nested-tabs` (Tabs с вложенными контейнерами): панели — обычные
   контейнеры и редактируются в редакторе, переключение — JS элемента.
   Стили элемента идут переменными (--n-tabs-*), поэтому перебиваем КОНКРЕТНЫЕ
   свойства с !important, а не переменные.
   ============================================================ */

.td-cap-tabs,
.td-cap-tabs > .elementor-widget-container {
	width: 100% !important;
}

/* ---------- полоса табов (heading элемента) ---------- */
.td-cap-tabs .e-n-tabs {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	width: 100% !important;
}

.td-cap-tabs .e-n-tabs-heading {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	width: 100% !important;
	padding: 8px !important;
	overflow-x: auto !important;
	border-radius: 16px !important;
	background-image: linear-gradient(to bottom right, #1b2432 0%, #232b38 50%, #1b2432 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .25) !important;
}

/* В прототипе полоса имеет ШТАТНЫЙ горизонтальный скроллбар (`overflow-x-auto`),
   поэтому на 375 она 71px (56 + 15px скроллбара). Элемент Elementor по умолчанию
   скроллбар прячет (`scrollbar-width:none` + `::-webkit-scrollbar {
	display: none !important;
}`) —
   возвращаем, иначе полоса 56 и вся страница на 15px короче прототипа. */
.td-cap-tabs .e-n-tabs-heading {
	scrollbar-width: auto !important;
	-ms-overflow-style: auto !important;
}
.td-cap-tabs .e-n-tabs-heading::-webkit-scrollbar {
	display: block !important;
}

.td-cap-tabs .e-n-tab-title {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 16px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background-color: transparent !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	white-space: nowrap !important;
	color: rgba(255, 255, 255, .6) !important;
	cursor: pointer !important;
	transition: color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

/* Подпись таба: у элемента размер задан ПЕРЕМЕННОЙ на .e-n-tab-title-text,
   поэтому font-size на кнопке её не перебивает — задаём и подписи тоже
   (иначе 16px из глобальной типографики Elementor и таб 146 вместо 135). */
.td-cap-tabs .e-n-tab-title-text {
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
}

/* Иконка таба: элемент печатает ДВЕ (обычную и активную) в одном
   .e-n-tab-icon и перекрёстно скрывает их height:0 по aria-selected.
   Наш `height:16px` на svg перебивал это скрытие (обе иконки 16 -> полоса
   68 вместо 56), поэтому: фиксируем высоту самого .e-n-tab-icon и повторяем
   скрытие невидимой иконки. */
.td-cap-tabs .e-n-tab-icon {
	flex: 0 0 auto !important;
	height: 16px !important;
	overflow: hidden !important;
}
.td-cap-tabs .e-n-tab-icon svg {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: currentColor !important;
}
.td-cap-tabs .e-n-tab-title[aria-selected="false"] .e-n-tab-icon svg:last-child,
.td-cap-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg:first-child {
	height: 0 !important;
	opacity: 0 !important;
}

/* hover-состояния: у тач-устройств их нет, поэтому только (hover:hover) */
@media (hover: hover) {
	.td-cap-tabs .e-n-tab-title[aria-selected="false"]:hover {
	color: #fff !important;
	background-color: rgba(255, 255, 255, .06) !important;
}
}

/* активный таб: металлическая заливка + акцентная риска снизу (в прототипе :after) */
.td-cap-tabs .e-n-tab-title[aria-selected="true"] {
	position: relative !important;
	color: var(--td-fg) !important;
	background-color: transparent !important;
	background-image: var(--td-chip-metal) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(27, 36, 50, .25), 0 4px 12px rgba(0, 0, 0, .28) !important;
}

.td-cap-tabs .e-n-tab-title[aria-selected="true"]::after {
	content: '' !important;
	position: absolute !important;
	left: 20% !important;
	right: 20% !important;
	bottom: 3px !important;
	height: 2px !important;
	border-radius: 2px !important;
	background: var(--td-accent) !important;
}

/* ---------- панель таба = карточка ---------- */
.td-cap-tabs .e-n-tabs-content {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
}

.td-cap-tabs .e-n-tabs-content > .e-con {
	width: 100% !important;
}

.td-cap-panel,
.td-cap-panel > .e-con-inner {
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	background: var(--td-card) !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
}

.td-cap-head,
.td-cap-head > .e-con-inner,
.td-cap-titlerow,
.td-cap-titlerow > .e-con-inner,
.td-cappanel-body,
.td-cappanel-body > .e-con-inner {
	width: 100% !important;
}

/* строка «чип + заголовок»: выравнивание задаём в CSS, а не настройкой
   контейнера (та же история, что у .td-icard-head) */
.td-cap-titlerow,
.td-cap-titlerow > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px !important;
}

/* p-6 (шапка) + p-6 pt-0 (тело списка) */
.td-cap-head,
.td-cap-head > .e-con-inner {
	padding: 24px !important;
}

.td-cappanel-body,
.td-cappanel-body > .e-con-inner {
	padding: 0 24px 24px !important;
}

/* desc: `space-y-1.5` (gap 6) + `mt-2` (8) = 14px от низа строки chip/заголовок */
.td-cap-desc {
	margin-top: 8px !important;
}

.td-cap-desc p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-cap-list {
	margin: 0 !important;
}

/* ---------- полоса «How it works» ---------- */
.td-hiw-sec {
	padding: 0 !important;
	border-top: 1px solid var(--td-border) !important;
	border-bottom: 1px solid var(--td-border) !important;
	background-color: rgba(231, 235, 241, .3) !important;
}

.td-hiw-sec > .e-con-inner {
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 64px 16px !important;
	/* дефолтный gap контейнера Elementor (20) + наш margin-top 40 давали 60 вместо 40 — секция вырастала на 40px */ gap: 0 !important;
}

.td-hiw-head {
	max-width: 672px !important;
}

.td-hiw-eyebrow {
	display: block !important;
	font-family: var(--td-font) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	letter-spacing: .6px !important;
	text-transform: uppercase !important;
	color: var(--td-primary) !important;
}

.td-hiw-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 36px !important;
	letter-spacing: -.75px !important;
	color: var(--td-fg) !important;
}

.td-hiw-grid,
.td-hiw-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 32px !important;
	width: 100% !important;
	margin-top: 40px !important;
}

.td-hiw-num {
	font-family: var(--td-font) !important;
	font-size: 36px !important;
	font-weight: 700 !important;
	line-height: 40px !important;
	color: rgba(27, 36, 50, .2) !important;
}

.td-hiw-steptitle {
	margin-top: 8px !important;
}

.td-hiw-steptitle .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 28px !important;
	color: var(--td-fg) !important;
}

.td-hiw-steptext {
	margin-top: 4px !important;
}

.td-hiw-steptext p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-hiw-foot,
.td-hiw-foot > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	width: 100% !important;
	margin-top: 40px !important;
}

.td-hiw-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

/* в прототипе кнопка `w-full sm:w-auto` */
.td-hiw-btn .elementor-button {
	width: 100% !important;
}

/* ============================================================
   СТРАНИЦА /materials
   Прототип: page-hero → секция max-w-7xl (1280) py-16 → сетка 2×596 gap 24
   (карточка r8 border shadow: chip 40 + заголовок 18/600, описание 14/20,
   пилюли марок 12/500 r6 с рамкой) → тёмная CTA-карточка 1216x118 (та же,
   что на /about — классы td-ab-cta). Замеры 1440: hero 1393x501,
   секция 1280x690, карточка 596x196, CTA 1216x118, docH 1776.
   ============================================================ */

.td-matgrid,
.td-matgrid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 24px !important;
	width: 100% !important;
}

.td-matcard,
.td-matcard > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 8px !important;
	background: var(--td-card) !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
}

.td-mat-head,
.td-mat-head > .e-con-inner,
.td-mat-body,
.td-mat-body > .e-con-inner {
	width: 100% !important;
}

/* шапка карточки: чип + заголовок по центру строки (как .td-icard-head) */
.td-mat-head,
.td-mat-head > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px !important;
}

.td-mat-head,
.td-mat-head > .e-con-inner {
	padding: 24px !important;
}

.td-mat-body,
.td-mat-body > .e-con-inner {
	padding: 0 24px 24px !important;
}

.td-mat-desc p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-mpills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

/* пилюли марок: не как у индустрий (там pill 12/600) — рамка, r6, 12/500 */
.td-mpill {
	display: inline-flex !important;
	align-items: center !important;
	padding: 4px 10px !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 6px !important;
	background-color: rgba(231, 235, 241, .5) !important;
	font-family: var(--td-font) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 16px !important;
	color: var(--td-fg) !important;
}

.td-mat-cta .td-btn .elementor-button {
	width: 100% !important;
}

/* ---------- адаптив /capabilities и /materials ---------- */
@media (min-width: 640px) {
	.td-cap-tabs .e-n-tabs-heading {
	flex-wrap: wrap !important;
	overflow-x: visible !important;
}
	.td-hiw-sec > .e-con-inner {
	padding: 64px 24px !important;
}
	.td-hiw-title .elementor-heading-title {
	font-size: 36px !important;
	line-height: 40px !important;
	letter-spacing: -.9px !important;
}
	.td-hiw-grid,
	.td-hiw-grid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-hiw-foot,
	.td-hiw-foot > .e-con-inner {
	flex-direction: row !important;
	align-items: center !important;
}
	.td-hiw-chips-wrap {
	flex: 0 0 auto !important;
	width: auto !important;
}
	.td-hiw-btn {
	flex: 0 0 auto !important;
	width: auto !important;
	margin-left: auto !important;
}
	.td-hiw-btn .elementor-button {
	width: auto !important;
}
	.td-matgrid,
	.td-matgrid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-mat-cta .td-btn .elementor-button {
	width: auto !important;
}
}

@media (min-width: 1024px) {
	.td-hiw-sec > .e-con-inner {
	padding: 64px 32px !important;
}
	.td-hiw-grid,
	.td-hiw-grid > .e-con-inner {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}

/* ============================================================
   ПОДСТРАНИЦЫ /industries/<slug> (6 шт.)
   Прототип: hero в две колонки (чип 48 + label, h1, tagline-курсив, описание,
   кнопка | фото 4/3 в рамке) → «What we make» (6 карточек 16/7) → полоса
   Materials (карточка 1400 bg secondary/60, пилюли 14/600, примечание) →
   Specifications (3 карточки с чипом 56, выступающим на 20px) →
   «From the workshop» (фото 4/3 + кейс) → тёмная CTA-карточка.
   Замеры 1440: hero-карточка 1393x620, parts 1400x838 (карточки 432x254,
   gap 20), materials 1393x383, specs 1400x487 (карточки 432x126),
   case 1393x620, CTA 1393x184, docH 3877.
   ============================================================ */

/* ---------- hero ---------- */
/* Ширина как у .td-phero и карточки футера: без max-width карточка на широких
   экранах растягивалась до 1873 (замер 1920) против 1400 у футера — на 1440
   разницы не видно, обе упираются во вьюпорт (грабля №32). Главная — исключение,
   у неё hero во всю ширину. */
.td-iphero {
	position: relative !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: hidden !important;
}

/* водяной знак как у page-hero, но в прототипе он меньше и прижат иначе
   (`-right-6 bottom-[-2rem] text-[6rem] sm:text-[11rem]`) */
.td-iphero::after {
	content: 'TANDIX' !important;
	position: absolute !important;
	right: -24px !important;
	bottom: -32px !important;
	z-index: 1 !important;
	font-family: var(--td-font) !important;
	font-size: 96px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -.05em !important;
	opacity: .1 !important;
	background-image: var(--td-metal) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	pointer-events: none !important;
	user-select: none !important;
}

.td-iphero-grid,
.td-iphero-grid > .e-con-inner {
	position: relative !important;
	z-index: 2 !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 40px !important;
	width: 100% !important;
	padding: 56px 24px !important;
}

.td-iphero-left,
.td-iphero-left > .e-con-inner,
.td-iphero-media,
.td-iphero-media > .e-con-inner,
.td-iphero-head,
.td-iphero-head > .e-con-inner {
	width: 100% !important;
}

.td-iphero-head,
.td-iphero-head > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px !important;
}

/* label — html-виджет: его обёртка выше самой плашки (строчный бокс), из-за чего
   в flex-строке плашка уезжала на 7px вниз. Центрируем содержимое обёртки. */
.td-iphero-head .elementor-widget-html {
	display: flex !important;
	align-items: center !important;
}

/* чип 48 (в hero индустрии он крупнее, чем 40 у карточек) */
.td-iphero-chip {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.td-iphero-chip .elementor-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 9999px !important;
	background-image: var(--td-chip-metal) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(27, 36, 50, .25), 0 4px 10px rgba(27, 36, 50, .18) !important;
	color: var(--td-fg) !important;
}

.td-iphero-chip .elementor-icon svg {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
}

.td-iphero-title {
	margin-top: 24px !important;
}

.td-iphero-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -.75px !important;
	color: var(--td-primary-fg) !important;
}

/* tagline — курсив Instrument Serif акцентным цветом */
.td-iphero-tagline {
	margin-top: 12px !important;
}

.td-iphero-tagline p {
	margin: 0 !important;
	font-family: var(--td-font-accent) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: 20px !important;
	line-height: 28px !important;
	color: var(--td-accent) !important;
}

.td-iphero-desc {
	margin-top: 20px !important;
}

.td-iphero-desc p {
	margin: 0 !important;
	max-width: 576px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: rgba(245, 247, 250, .8) !important;
}

.td-iphero-actions {
	margin-top: 32px !important;
	gap: 12px !important;
}

/* фото hero: рамка primary-fg/15, r16, shadow-lg, 4/3 */
.td-iphero-media {
	border: 1px solid rgba(245, 247, 250, .15) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1) !important;
}

.td-iphero-img img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
}

/* ---------- светлые секции max-w-1400 px-4 py-16 lg:py-20 ---------- */
.td-isec {
	padding: 0 !important;
}

.td-isec > .e-con-inner {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 64px 16px !important;
	gap: 0 !important;
}

/* h2 секций: `mt-5` (20px) от label-плашки */
.td-ih2 {
	margin-top: 20px !important;
}

/* ---------- «What we make»: 6 карточек деталей ---------- */
.td-ipartgrid,
.td-ipartgrid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 20px !important;
	width: 100% !important;
	margin-top: 40px !important;
}

.td-ipart {
	border: 1px solid var(--td-border) !important;
	border-radius: 16px !important;
	background: var(--td-card) !important;
	overflow: hidden !important;
}

.td-ipart-img img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 7 !important;
	object-fit: cover !important;
}

.td-ipart-body,
.td-ipart-body > .e-con-inner {
	width: 100% !important;
	padding: 20px !important;
}

.td-ipart-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	color: var(--td-fg) !important;
}

/* ---------- полоса «Materials» ---------- */
.td-imat {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 56px 24px !important;
	border-radius: 20px !important;
	background-color: rgba(231, 235, 241, .6) !important;
}

.td-ipills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-top: 32px !important;
}

/* пилюли марок: крупнее, чем .td-pill (padding 6/16, 14/600) */
.td-ipill {
	display: inline-flex !important;
	align-items: center !important;
	padding: 6px 16px !important;
	border: 1px solid transparent !important;
	border-radius: 9999px !important;
	background: var(--td-muted) !important;
	font-family: var(--td-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

.td-imat-note {
	margin-top: 24px !important;
}

.td-imat-note p {
	margin: 0 !important;
	max-width: 672px !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

/* ---------- «Specifications»: карточки с чипом 56 ---------- */
.td-ispecgrid,
.td-ispecgrid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 20px !important;
	width: 100% !important;
	margin-top: 40px !important;
}

.td-ispec {
	position: relative !important;
	padding: 40px 24px 24px !important;
	border: 1px solid var(--td-border) !important;
	border-radius: 16px !important;
	background: var(--td-card) !important;
}

/* чип выступает над карточкой (`absolute -top-5 right-5`, 56x56) */
.td-ispec-chip {
	position: absolute !important;
	top: -20px !important;
	right: 20px !important;
	margin: 0 !important;
}

.td-ispec-chip .elementor-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 9999px !important;
	background-image: var(--td-chip-metal) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(27, 36, 50, .25), 0 4px 10px rgba(27, 36, 50, .18) !important;
	color: var(--td-fg) !important;
}

.td-ispec-chip .elementor-icon svg {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
}

.td-ispec-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 28px !important;
	color: var(--td-fg) !important;
}

.td-ispec-text {
	margin-top: 12px !important;
}

.td-ispec-text p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--td-muted-fg) !important;
}

/* ---------- «From the workshop» ---------- */
.td-icase {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 56px 24px !important;
	border-radius: 20px !important;
	background-color: rgba(231, 235, 241, .6) !important;
}

.td-icase-grid,
.td-icase-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 40px !important;
	width: 100% !important;
	align-items: center !important;
}

.td-icase-media {
	border: 1px solid var(--td-border) !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1) !important;
}

.td-icase-img img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
}

.td-icase-right,
.td-icase-right > .e-con-inner {
	width: 100% !important;
}

.td-icase-text {
	margin-top: 16px !important;
}

.td-icase-text p {
	margin: 0 !important;
	max-width: 672px !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--td-muted-fg) !important;
}

.td-icase-note {
	margin-top: 16px !important;
}

.td-icase-note p {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 16px !important;
	color: var(--td-muted-fg) !important;
}

/* ---------- CTA индустрии ---------- */
.td-icta {
	max-width: 1400px !important;
	margin: 0 auto !important;
	/* до 1024 — колонка с центрированием (в данных стоит row, но прототип раскладывает в строку только с lg: flex-row) */ flex-direction: column !important;
	align-items: center !important;
	padding: 56px 24px !important;
	gap: 32px !important;
	border-radius: 20px !important;
	background-color: var(--td-primary) !important;
	color: var(--td-primary-fg) !important;
	text-align: center !important;
}

.td-icta-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 32px !important;
	letter-spacing: -.6px !important;
	color: var(--td-primary-fg) !important;
}

.td-icta-title .td-accent-serif {
	color: var(--td-accent) !important;
}

.td-icta-sub {
	margin-top: 12px !important;
}

.td-icta-sub p {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: rgba(245, 247, 250, .8) !important;
}

.td-icta-action {
	width: 100% !important;
}

/* текст слева по контенту (в прототипе div без flex-grow), кнопка справа;
   иначе 1265px текст выдавливает кнопку на вторую строку */
.td-icta-text {
	flex: 0 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

/* ---------- адаптив подстраниц индустрий ---------- */
@media (min-width: 640px) {
	.td-iphero-grid,
	.td-iphero-grid > .e-con-inner {
	padding: 56px 40px !important;
}
	.td-iphero-title .elementor-heading-title {
	font-size: 36px !important;
	line-height: 1.05 !important;
	letter-spacing: -.9px !important;
}
	.td-iphero-tagline p {
	font-size: 24px !important;
	line-height: 32px !important;
}
	/* `text-base sm:text-lg` у текста кейса */
	.td-icase-text p {
	font-size: 18px !important;
	line-height: 28px !important;
}
	.td-iphero::after {
	font-size: 176px !important;
}
	.td-isec > .e-con-inner {
	padding: 64px 24px !important;
}
	.td-ipartgrid,
	.td-ipartgrid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-ispecgrid,
	.td-ispecgrid > .e-con-inner {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
	.td-imat {
	padding: 56px 40px !important;
}
	.td-icase {
	padding: 56px 40px !important;
}
	.td-icta {
	padding: 56px 40px !important;
}
	/* кнопка CTA — `w-full sm:w-auto`: с 640 обёртка и кнопка по контенту */
	.td-icta-action {
	width: auto !important;
}
	.td-icta-action .td-btn,
	.td-icta-action .td-btn .elementor-button {
	width: auto !important;
}
	.td-icta-title .elementor-heading-title {
	font-size: 30px !important;
	line-height: 36px !important;
	letter-spacing: -.75px !important;
}
}

@media (min-width: 1024px) {
	.td-iphero-grid,
	.td-iphero-grid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	align-items: center !important;
	padding: 80px 64px !important;
}
	.td-iphero-title .elementor-heading-title {
	font-size: 48px !important;
	line-height: 1.05 !important;
	letter-spacing: -1.2px !important;
}
	.td-isec > .e-con-inner {
	padding: 80px 32px !important;
}
	.td-ipartgrid,
	.td-ipartgrid > .e-con-inner {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
	.td-imat {
	padding: 56px 64px !important;
}
	.td-icase {
	padding: 80px 64px !important;
}
	.td-icase-grid,
	.td-icase-grid > .e-con-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
	.td-icta-sec {
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}
	.td-icta {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 56px 64px !important;
	text-align: left !important;
}
	.td-icta-action {
	width: auto !important;
}
}

/* ============================================================
   СТРАНИЦА /privacy
   Прототип: page-hero без кнопки → узкая колонка 768 (px-4 py-16 sm:px-6 lg:px-8):
   плашка-черновик (r8, bg secondary/40, p-4) и 6 блоков `space-y-8`
   (h2 18/600 + текст 14/1.625), в последнем — адрес и mailto-ссылка.
   ============================================================ */
.td-pp-sec {
	padding: 0 !important;
}

.td-pp-sec > .e-con-inner {
	max-width: 768px !important;
	margin: 0 auto !important;
	padding: 64px 16px !important;
	gap: 0 !important;
}

/* первый ребёнок списка — интро-абзац (без заголовка), тот же ритм текста */
.td-pp-intro p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 22.75px !important;
	color: var(--td-muted-fg) !important;
}

.td-pp-list {
	margin-top: 40px !important;
}

.td-pp-title .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--td-font) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 28px !important;
	color: var(--td-fg) !important;
}

.td-pp-text {
	margin-top: 8px !important;
}

.td-pp-text p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 22.75px !important;
	color: var(--td-muted-fg) !important;
}

.td-pp-text a {
	color: var(--td-primary) !important;
	text-decoration: none !important;
}
.td-pp-text a:hover {
	text-decoration: underline !important;
}

@media (min-width: 640px) {
	.td-pp-sec > .e-con-inner {
	padding: 64px 24px !important;
}
}

@media (min-width: 1024px) {
	.td-pp-sec > .e-con-inner {
	padding: 64px 32px !important;
}
}

/* Full-bleed секциям Elementor не создаёт .e-con-inner, поэтому на мобильном
   (px-3) отступ задаём самой секции — как для hero/cap/steps/cta главной. */
@media (max-width: 639px) {
	.td-iphero-sec,
	.td-imat-sec,
	.td-icase-sec {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
	.td-icta-sec {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
}