*,
::before,
::after {
	box-sizing: border-box;
}

/**
  Убираем внутренние отступы слева тегам списков,
  у которых есть атрибут class
 */
:where(ul, ol):where([class]) {
	padding-left: 0;
}

/**
  Убираем внешние отступы body и двум другим тегам,
  у которых есть атрибут class
 */
body,
:where(blockquote, figure):where([class]) {
	margin: 0;
}

/**
  Убираем внешние отступы вертикали нужным тегам,
  у которых есть атрибут class
 */
:where(h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	ul,
	ol,
	dl):where([class]) {
	margin-block: 0;
}

:where(dd[class]) {
	margin-left: 0;
}

:where(fieldset[class]) {
	margin-left: 0;
	padding: 0;
	border: none;
}

/**
  Убираем стандартный маркер маркированному списку,
  у которого есть атрибут class
 */
:where(ul[class]) {
	list-style: none;
}

:where(address[class]) {
	font-style: normal;
}

/**
  Обнуляем вертикальные внешние отступы параграфа,
  объявляем локальную переменную для внешнего отступа вниз,
  чтобы избежать взаимодействие с более сложным селектором
 */
p {
	--paragraphMarginBottom: 24px;

	margin-block: 0;
}

/**
  Внешний отступ вниз для параграфа без атрибута class,
  который расположен не последним среди своих соседних элементов
 */
p:where(:not([class]):not(:last-child)) {
	margin-bottom: var(--paragraphMarginBottom);
}


/**
  Упрощаем работу с изображениями и видео
 */
img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/**
  Наследуем свойства шрифт для полей ввода
 */
input,
textarea,
select,
button {
	font: inherit;
}

html {
	/**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
   */
	height: 100%;
	/**
    Убираем скачок интерфейса по горизонтали
    при появлении / исчезновении скроллбара
   */
	scrollbar-gutter: stable;
}

/**
  Плавный скролл
 */
html,
:has(:target) {
	scroll-behavior: smooth;
}

body {
	/**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
   */
	min-height: 100%;
	/**
    Унифицированный интерлиньяж
   */
	line-height: 1.5;
}

/**
  Нормализация высоты элемента ссылки при его инспектировании в DevTools
 */
a:where([class]) {
	display: inline-block;
	text-decoration: none;
}

/**
  Курсор-рука при наведении на элемент
 */
button,
label {
	cursor: pointer;
}

/**
  Приводим к единому цвету svg-элементы
  (за исключением тех, у которых уже указан
  атрибут fill со значением 'none' или начинается с 'url')
 */
:where([fill]:not([fill="none"],
		[fill^="url"])) {
	fill: currentColor;
}

/**
  Приводим к единому цвету svg-элементы
  (за исключением тех, у которых уже указан
  атрибут stroke со значением 'none')
 */
:where([stroke]:not([stroke="none"],
		[stroke^="url"])) {
	stroke: currentColor;
}

/**
  Чиним баг задержки смены цвета при взаимодействии с svg-элементами
 */
svg * {
	transition-property: fill, stroke;
}

/**
  Приведение рамок таблиц в классический 'collapse' вид
 */
:where(table) {
	border-collapse: collapse;
	border-color: currentColor;
}

/**
  Удаляем все анимации и переходы для людей,
  которые предпочитают их не использовать
 */
@media (prefers-reduced-motion: reduce) {

	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 
 * Start Style
*/
@font-face {
	font-display: swap;
	font-family: "Proba Pro";
	font-style: normal;
	font-weight: 300;
	src: url("../../assets/fonts/ProbaPro/ProbaPro-Light.eot");
	src: local("Proba Pro Light"), local("ProbaPro-Light"), url("../../assets/fonts/ProbaPro/ProbaPro-Light.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/ProbaPro/ProbaPro-Light.woff2") format("woff2"), url("../../assets/fonts/ProbaPro/ProbaPro-Light.woff") format("woff"), url("../../assets/fonts/ProbaPro/ProbaPro-Light.ttf") format("truetype");
}

@font-face {
	font-display: swap;
	font-family: "Proba Pro";
	font-style: normal;
	font-weight: normal;
	src: url("../../assets/fonts/ProbaPro/ProbaPro-Regular.eot");
	src: local("Proba Pro Regular"), local("ProbaPro-Regular"), url("../../assets/fonts/ProbaPro/ProbaPro-Regular.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/ProbaPro/ProbaPro-Regular.woff2") format("woff2"), url("../../assets/fonts/ProbaPro/ProbaPro-Regular.woff") format("woff"), url("../../assets/fonts/ProbaPro/ProbaPro-Regular.ttf") format("truetype");
}

@font-face {
	font-display: swap;
	font-family: "Proba Pro";
	font-style: normal;
	font-weight: 500;
	src: url("../../assets/fonts/ProbaPro/ProbaPro-Medium.eot");
	src: local("Proba Pro Medium"), local("ProbaPro-Medium"), url("../../assets/fonts/ProbaPro/ProbaPro-Medium.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/ProbaPro/ProbaPro-Medium.woff2") format("woff2"), url("../../assets/fonts/ProbaPro/ProbaPro-Medium.woff") format("woff"), url("../../assets/fonts/ProbaPro/ProbaPro-Medium.ttf") format("truetype");
}

@font-face {
	font-display: swap;
	font-family: "Proba Pro";
	font-style: normal;
	font-weight: 600;
	src: url("../../assets/fonts/ProbaPro/ProbaPro-SemiBold.eot");
	src: local("Proba Pro SemiBold"), local("ProbaPro-SemiBold"), url("../../assets/fonts/ProbaPro/ProbaPro-SemiBold.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/ProbaPro/ProbaPro-SemiBold.woff2") format("woff2"), url("../../assets/fonts/ProbaPro/ProbaPro-SemiBold.woff") format("woff"), url("../../assets/fonts/ProbaPro/ProbaPro-SemiBold.ttf") format("truetype");
}

@font-face {
	font-display: swap;
	font-family: "Proba Pro";
	font-style: normal;
	font-weight: 700;
	src: url("../../assets/fonts/ProbaPro/ProbaPro-Bold.eot");
	src: local("Proba Pro Bold"), local("ProbaPro-Bold"), url("../../assets/fonts/ProbaPro/ProbaPro-Bold.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/ProbaPro/ProbaPro-Bold.woff2") format("woff2"), url("../../assets/fonts/ProbaPro/ProbaPro-Bold.woff") format("woff"), url("../../assets/fonts/ProbaPro/ProbaPro-Bold.ttf") format("truetype");
}

:root {
	--color-bg: #fff;
	--color-button-color: #fff;
	--color-text-primary: #191919;
	--shadow-slider: inset 0 1px 1px #ddd, 0 2px 3px #ccc;
	--color-bg-secondary: #d4d8dd;
	--color-accent: #c5a05e;
	--color-text-default: #333;
	--color-text-muted: #a1a1a1;
	--color-white: #fff;

	--font-family-base: 'Proba Pro', sans-serif;
	/* --font-family-accent: 'Cormorant Garamond', sans-serif; */
	/* --wp--preset--color--base: #fff; */
	/* --wp--preset--color--contrast: #333; */

	--container-desktop-width: 1718px;
	--container-laptop-width: 1280px;
	--container-width: clamp(var(--container-laptop-width),
			0rem + 100vw,
			var(--container-desktop-width));
	--container-padding-x: clamp(1rem, -0.8336162988rem + 5.4329371817vw, 5rem);
	--section-padding-y: clamp(2.5rem, 1.4972410866rem + 2.9711375212vw, 4.6875rem);
}

.dark-mode-artech {
	--color-bg: #191919;
	--color-button-color: #191919;
	--color-text-primary: #eee;
	--color-text-default: #eee;
	--wp--preset--color--base: #191919;
	--wp--preset--color--contrast: #eee;
}

body {
	font-family: var(--font-family-base);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	line-height: 1.3;
	color: var(--color-text-primary);
	--wp--style--root--padding-right: 0;
	--wp--style--root--padding-left: 0;
}

.container {
	width: 100%;
	/* max-width: calc(var(--container-width) + var(--container-padding-x) * 2); */
	margin-inline: auto;
	padding-inline: var(--container-padding-x);
	overflow-x: clip;
}

section,
.section {
  padding-block: var(--section-padding-y);
}


/* 
 * Start utils
*/

.d-flex {
	display: flex;
	flex-wrap: wrap;
}

.d-inline-flex {
	display: inline-flex;
	flex-wrap: wrap;
}

.fs-0 {
	flex-shrink: 0;
}

.gap-8 { gap: 8px; }

.fw-nowrap {
	flex-wrap: nowrap;
}

.fd-column {
	flex-direction: column;
}

.ai-c {
	align-items: center;
}

.ai-fs {
	align-items: flex-start;
}

.ai-fe {
	align-items: flex-end;
}

.jc-c {
	justify-content: center;
}

.jc-sb {
	justify-content: space-between;
}

.as-stretch {
	align-self: stretch;
}

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 2;
}

.gap-24 {
	gap: 24px;
}

.wm-vertical-lr {
	writing-mode: vertical-lr;
}

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

.fw-300 {
	font-weight: 300;
}

.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.fw-800 {
	font-weight: 800;
}

.mt-16 {
	margin-top: 16px;
}

.mt-24 {
	margin-top: 24px;
}

.mt-40 {
	margin-top: 40px;
}

.mb-16 {
	margin-bottom: 16px;
}

.mb-24 {
	margin-bottom: 24px;
}

.mb-40 {
	margin-bottom: 40px;
}


@media (width > 120.061rem) {
	html {
		font-size: 0.75vw;
	}
}