/* Fonts */

@font-face {
	font-family: 'Geologica';
	src: url('../fonts/Geologica-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geologica';
	src: url('../fonts/Geologica-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geologica';
	src: url('../fonts/Geologica-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}





/* Reset */

* {padding: 0;	margin: 0; -webkit-tap-highlight-color: transparent;}
*, *::before, *::after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
:focus, :active {outline: none;}

header, footer, nav, section, article, aside {display: block;}

html, body {
	width: 100%;
	min-height: 100%;
	font-size: 100%;
	line-height: normal;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
}

input, button, textarea, select {
	font: inherit;
	background: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
input::placeholder, textarea::placeholder {opacity: 1;}
input::-ms-clear {display: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
button, input[type="button"], input[type=submit] {cursor: pointer;}
button[disabled], input[disabled] {cursor: default; opacity: 0.5; pointer-events: none;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display: none;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type="number"] {-moz-appearance: textfield;}

a, a:hover, a:visited {text-decoration: none;}
img {display: block; max-width: 100%;}

h1,h2,h3,h4,h5,h6 {font-size: inherit; font-weight: normal;}

ol, ul {list-style: none;}

table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: inherit;}

.scroll-disable {overflow: hidden; touch-action: none;}
.scroll-disable.safari {height: 100vh; position: fixed;}




/* Global */

:root {
	--font-family: 'Geologica', sans-serif;
	--second-family: 'Roboto', sans-serif;
	--third-family: 'Inter', sans-serif;

	--accent-color: #fcc40f;
	--accent-color-hover: #fddc6f;
	--black: #171817;
	--black-hover: #454645;
	--white: #ffffff;
	--lightgray: #ececec;
	--gray: #d9d9d9;
	--red: #ff2348;

	--max-width: 1440px;
	--min-width: 360px;
	--adaptive: ((100vw - 768px) / (1440 - 768));
	--desktop: ((100vw - 1200px) / (1440 - 1200));


	--section-padding: clamp(16px, 16px + (40 - 16) * var(--adaptive), 40px);
	--section-margin: clamp(80px, 80px + (100 - 80) * var(--adaptive), 100px);

	--background-color: #f4f4f4;
	--text-color: var(--black);
	--text-size: clamp(16px, 16px + (20 - 16) * var(--adaptive), 20px);
	--caption-size: clamp(20px, 20px + (24 - 20) * var(--adaptive), 24px);
	--title-size: clamp(24px, 24px + (36 - 24) * var(--adaptive), 36px);
	--title-size-l: clamp(28px, 28px + (48 - 28) * var(--adaptive), 48px);

	--radius: 12px;
	--gap: 20px;
	--transition: 0.3s;
	--border: 1px solid var(--gray);

	--logo-size: clamp(113px, 113px + (131 - 113) * var(--adaptive), 131px)
}

html, body {
	min-width: var(--min-width);
}

body {
	flex-direction: column;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: var(--text-size);
	color: var(--text-color);
	background: var(--background-color); 
	position: relative;
}

.main {
	overflow: hidden;
}
.main > section {
	position: relative;
	margin-bottom: var(--section-margin);
}

.container {
	width: 100%;
	max-width: var(--max-width);
	padding-inline: var(--section-padding);
	margin-inline: auto;
}

.title {
	font-weight: 500;
	font-size: var(--title-size);
	line-height: 1.2;
	text-align: center;
	display: block;
	margin-bottom: 0.9em;
}
.title_big {
	font-size: var(--title-size-l);
}

a, button {
	transition: var(--transition);
}

.cover {
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.contain {
	object-fit: contain;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.button {
	--button-width: fit-content;
	--button-padding: 16px 24px;
	--button-radius: 4px;
	--button-color: var(--black);
	--button-text-color: var(--white);
	--button-text-size: clamp(16px, 16px + (18 - 16) * var(--adaptive), 18px);
	--button-text-line-height: 1.2;
	--button-text-font-weight: 500;
	--button-hover-color: var(--black-hover);
	--button-hover-text-color: var(--white);
	--button-icon-display: none;
	--button-icon-image: url(../img/search-icon.svg);
	--button-icon-size: 1.333em;
	--button-icon-gap: 0.444em;
	--button-icon-color: currentColor;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--button-icon-gap);
	width: var(--button-width);
	padding: var(--button-padding);
	border: none;
	border-radius: var(--button-radius);
	background: var(--button-color);
	color: var(--button-text-color);
	font-size: var(--button-text-size);
	line-height: var(--button-text-line-height);
	font-weight: var(--button-text-font-weight);
}
.button::before {
	content: '';
	display: var(--button-icon-display);
	width: var(--button-icon-size);
	aspect-ratio: 1;
	background-color: var(--button-icon-color);
	mask: var(--button-icon-image) center / contain no-repeat;
	-webkit-mask: var(--button-icon-image) center / contain no-repeat;
}
.button_accent {
	--button-color: var(--accent-color);
	--button-text-color: var(--black);
	--button-hover-color: var(--accent-color-hover);
	--button-hover-text-color: var(--black);
}
@media (hover: hover) {
	.button:hover {
		background: var(--button-hover-color);
		color: var(--button-hover-text-color);
	}
}
.button:active {
	transform: scale(0.97);
}
@media (max-width: 540px) {
	.button {
		--button-width: 100%;
	}
}






/* Slider */

.slider-arrow {
	--arrow-size: 32px;
	--arrow-radius: 100%;
	--arrow-border: var(--border);
	--arrow-button-color: var(--white);
	--arrow-icon-color: var(--black);
	--arrow-border-hover-color: var(--gray);
	--arrow-button-hover-color: var(--lightgray);
	--arrow-icon-hover-color: var(--black);
	--arrow-disabled-border-color: var(--gray);
	--arrow-disabled-button-color: var(--lightgray);
	--arrow-disabled-icon-color: var(--gray);
	--arrow-disabled-opacity: 0.7;

	width: var(--arrow-size);
	aspect-ratio: 1;
	background-color: var(--arrow-button-color);
	border-radius: var(--arrow-radius);
	border: var(--arrow-border);
	font-size: 0;
	position: absolute;
	top: calc(50% - var(--arrow-size) / 2);
	z-index: 2;
}
.slider-arrow_next {
	right: calc(var(--arrow-size) / -2);
}
.slider-arrow_prev {
	left: calc(var(--arrow-size) / -2);
}
.slider-arrow::before {
	content:'';
	position: absolute;
	inset: 0;
	mask: url(../img/slider-arrow.svg) center / 62% no-repeat;
	-webkit-mask: url(../img/slider-arrow.svg) center / 62% no-repeat;
	background-color: var(--arrow-icon-color);
	transition: var(--transition);
}
.slider-arrow_prev::before {
	transform: scaleX(-1);
}
.slider-arrow[disabled] {
	border-color: var(--arrow-disabled-border-color);
	background-color: var(--arrow-disabled-button-color);
	opacity: var(--arrow-disabled-opacity);
	pointer-events: all;
}
.slider-arrow[disabled]::before {
	background-color: var(--arrow-disabled-icon-color);
}
@media (hover: hover) {
	.slider-arrow:not([disabled]):hover {
		background-color: var(--arrow-button-hover-color);
		border-color: var(--arrow-border-hover-color);
	}
	.slider-arrow:not([disabled]):hover::before {
		background-color: var(--arrow-icon-hover-color);
	}
}






/* Selects */

.select {
	--select-input-background: var(--white);
	--select-input-radius: 4px;
	--select-input-height: 48px;
	--select-input-padding: 12px;
	--select-input-font-size: 16px;
	--select-input-font-weight: 400;
	--select-arrow-image: url(../img/arrow-down.svg);
	--select-arrow-size: 24px;
	--select-dropdown-margin: 8px;
	--select-dropdown-min-width: 100%;
	--select-dropdown-max-height: 200px;
	--select-scrollbar-width: 4px;
	--select-scrollbar-radius: 5px;
	--select-scrollbar-color: transparent;
	--select-scrollbar-thumb-color: var(--gray);

	position: relative;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.select::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: var(--select-input-padding);
	width: var(--select-arrow-size);
	background: var(--select-arrow-image) center / contain no-repeat;
	pointer-events: none;
	transition: 0.2s;
}
.select__input {
	width: 100%;
	height: var(--select-input-height);
	background: var(--select-input-background);
	padding: var(--select-input-padding);
	padding-right: calc(var(--select-arrow-size) + var(--select-input-padding) * 2);
	border: none;
	border-radius: var(--select-input-radius);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	caret-color: transparent;
	font-size: var(--select-input-font-size);
	font-weight: var(--select-input-font-weight);
	pointer-events: none;
}
/*.select__input:not(:placeholder-shown) {*/
/*    text-align: left;*/
/*.select_open::after {*/
/*	transform: scaleY(-1);*/
/*}*/

.select__options {
	background: var(--white);
	border: 4px solid var(--white);
	border-radius: var(--select-input-radius);
	position: absolute;
	top: calc(100% + var(--select-dropdown-margin));
	left: 0;
	z-index: 10;
	width: 100%;
	min-width: var(--select-dropdown-min-width);
	opacity: 0;
	pointer-events: none;
	transform: scaleY(0.8);
	transform-origin: top;
	transition: opacity 0.2s, transform 0.2s;
	max-height: var(--select-dropdown-max-height);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0;
	overscroll-behavior: contain;
}
.select__options::-webkit-scrollbar {
	width: var(--select-scrollbar-width); 
	height: 0;
	border-radius: var(--select-scrollbar-radius);
	background: var(--select-scrollbar-color);
}
.select__options::-webkit-scrollbar-thumb {
	background: var(--select-scrollbar-thumb-color);
	border-radius: var(--select-scrollbar-radius);
}
.select__options::-webkit-scrollbar-button:vertical:start:decrement,
.select__options::-webkit-scrollbar-button:vertical:end:increment {
	display: none;
}
@-moz-document url-prefix() {
	.select__options {
		scrollbar-color: var(--select-scrollbar-thumb-color) var(--select-scrollbar-color);
		scrollbar-width: thin;
	}
}
.select_up > .select__options {
	top: unset;
	bottom: calc(100% + var(--select-dropdown-margin));
	transform-origin: bottom;
}
.select_open > .select__options {
	opacity: 1;
	pointer-events: all;
	transform: scaleY(1);
}
.select__item {
	font-size: 16px;
	line-height: 1.2;
	padding: 6.5px 8px;
	padding-left: 36px;
	color: var(--black);
	border-radius: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
}
.select__item::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 20px;
	aspect-ratio: 1;
	background: var(--white);
	border: var(--border);
	border-radius: 100%;
	flex-shrink: 0;
}
.select__item_active::before {
	background: radial-gradient(circle 2px at center, var(--black) 0% 100%, var(--accent-color) 0%);
	border-color: var(--accent-color);
}
@media (hover: hover) {
	.select__item:hover {
		background: var(--lightgray);
	}
}
.select__input_multi {
	padding-right: 76px;
}
.select__button {
	display: block;
	font-size: 0;
	width: 24px;
	aspect-ratio: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 40px;
	background: url(../img/pencil-icon.svg) center / contain no-repeat;
	border: none;
}

.select__multiitem {
	display: block;
	position: relative;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.2;
	color: var(--black);
	border-radius: 4px;
	cursor: pointer;
}
@media (hover: hover) {
	.select__multiitem:hover {
		background: var(--lightgray);
	}
}
.select__checkbox {
	display: none;
}
.select__checklabel {
	display: block;
	padding: 6.5px 8px;
	padding-left: 36px;
	color: var(--black);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
}
.select__checklabel::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 20px;
	aspect-ratio: 1;
	border: var(--border);
	border-radius: 2px;
	flex-shrink: 0;
	transition: 0.1s;
	background: var(--white);
	background-position: center;
}
.select__checkbox:checked + .select__checklabel::before {
	background: var(--accent-color) url(../img/checkmark.svg) center no-repeat;
	border-color: var(--accent-color);
}

.select_border {
	--select-input-background: none;
	--select-input-height: auto;
	--select-input-padding: 4px;
	--select-input-font-size: var(--title-size);
	--select-input-font-weight: 500;
	--select-dropdown-margin: 2px;
	border-bottom: 2px solid var(--black);
}




/* Header */

.header {
	background: var(--background-color);
	border-bottom: var(--border);
	position: relative;
	z-index: 100;
}
.header__top {
	background: var(--black);
	padding-block: 8px;
}
.header__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 14px;
	line-height: 1.2;
}
.header__ctatext {
	font-weight: 300;
	color: var(--white);
	display: flex;
	align-items: center;
	gap: 4px;
}
.header__ctatext::before {
	content: '';
	display: block;
	width: 16px;
	aspect-ratio: 1;
	background: url(../img/blink.svg) center / contain no-repeat;
	flex-shrink: 0;
}
.header__ctalink {
	font-weight: 500;
	color: var(--white);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}
.header__ctalink:hover {
	color: var(--accent-color-hover);
	text-decoration: underline;
}

.header__body {
	height: 64px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
.header__logo {
	width: var(--logo-size);
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}
.header__menu {
	margin-right: auto;
}

.menu__links {
	display: flex;
	align-items: center;
	gap: 16px;
}
.menu__link {
	font-size: 16px;
	color: var(--black);
	padding-block: 4px;
	position: relative;
}
.menu__link::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent-color);
	transform: scaleX(0);
	transition: var(--transition);
}
@media (hover: hover) {
	.menu__link:hover::after {
		transform: none;
	}
}

.header__action {
	display: flex;
	align-items: center;
	gap: 12px;
}
.header__user,
.login__button {
	border: none;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.header__user::before,
.login__button::before {
	content: '';
	display: block;
	width: 32px;
	aspect-ratio: 1;
	background: url(../img/login-icon.svg) center / contain no-repeat;
}
.header__user::before {
	background: url(../img/user-icon.svg) center / contain no-repeat;
}
.login {
	position: relative;
	padding-block: 6px;
}
.login__menu {
	position: absolute;
	top: 100%;
	right: 0;
	display: grid;
	grid-gap: 6px;
	padding: 10px 12px;
	background: var(--white);
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}
.login__menu_open {
	opacity: 1;
	pointer-events: all;
}
.login__menu::before {
	content: '';
	display: block;
	width: 8px;
	aspect-ratio: 1;
	background: var(--white);
	position: absolute;
	top: 0;
	right: 24px;
	transform: translateY(-50%) rotate(45deg);
}
.login__link {
	font-size: 16px;
	color: var(--black);
}
@media (hover: hover) {
	.login__button:hover,
	.login__link:hover {
		opacity: 0.7;
	}
}

@media (max-width: 820px) {
	.header__cta {
		justify-content: space-between;
	}
	.header__user,
	.login__button {
		font-size: 0;
	}
	.header__user::before,
	.login__button::before {
		width: 24px;
	}
	.login__menu {
		right: -34px;
	}
	.login__menu::before {
		right: 46px;
	}
}





/* Burger */

.burger {
	--burger-button-color: none;
	--burger-button-padding: 2px;
	--burger-icon-width: 20px;
	--burger-icon-height: 14px;
	--burger-icon-color: var(--black);
	--burger-icon-line-width: 2px;
	--burger-icon-line-radius: 50px;

	padding: var(--burger-button-padding);
	margin: calc(var(--burger-button-padding) * -1);
	background: var(--burger-button-color);
	border: none;
	position: relative;
	z-index: 2;
	display: none;
}
.burger__icon {
	display: block;
	width: var(--burger-icon-width);
	height: var(--burger-icon-height);
	position: relative;
}
.burger__line {
	display: block;
	background: var(--burger-icon-color);
	height: var(--burger-icon-line-width);
	border-radius: var(--burger-icon-line-radius);
	position: absolute;
	width: 100%;
}
.burger__line_1 {top: 0;}
.burger__line_2 {top: 50%; transform: translateY(-50%);}
.burger__line_3 {bottom: 0;}

.burger__line {
	transition-duration: 0.2s;
	transition-property: transform, top, bottom, opacity;
	transition-delay: 0s, 0.1s, 0.1s, 0s;
}
.burger_close .burger__line {
	transition-duration: 0.2s;
	transition-property: transform, top, bottom, opacity, width, margin;
	transition-delay: 0.1s, 0s, 0s, 0s, 0.1s, 0.1s;
}
.burger_close .burger__line_1 {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 100%;
	margin: 0;
}
.burger_close .burger__line_2 {
	opacity: 0;
}
.burger_close .burger__line_3 {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
	width: 100%;
	margin: 0;
}




/* Mobile menu */

@media (max-width: 820px) {
	.burger {
		display: block;
	}
	.menu {
		position: fixed;
		top: var(--header-height);
		right: 0;
		width: 100%;
		width: 300px;
		height: calc(100vh - var(--header-height));
		padding: 16px;
		padding-bottom: calc(100vh - 100dvh + 30px);
		background: var(--background-color);
		overflow-x: hidden;
		overflow-y: auto;
		display: flex;
		transform: translateX(100%);
		pointer-events: none;
		transition: transform 0.4s;
	}
	.menu__links {
		display: block;
		width: 100%;
		margin-bottom: auto;
	}
	.menu__link {
		display: block;
		padding-block: 10px;
		border-bottom: var(--border);
		background: url(../img/arrow-right.svg) right center no-repeat;
	}
	.menu_open {
		transform: none;
		pointer-events: all;
	}

	.header::before {
		content: '';
		position: absolute;
		top: calc(100% + 1px);
		right: 0;
		left: 0;
		height: 100vh;
		background: var(--black);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s;
	}
	.header:has(.menu_open)::before {
		opacity: 0.2;
	}
}





/* Hero */

.hero {
	padding-top: clamp(80px, 80px + (138 - 80) * var(--adaptive), 138px);
	background: url(../img/hero-bg.svg) top center / min(1920px, 150%) no-repeat;
}
.hero__title {
	max-width: 18em;
	margin-inline: auto;
	margin-bottom: 0.7em;
}
.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px var(--gap);
	margin-bottom: clamp(56px, 56px + (76 - 56) * var(--adaptive), 76px);
}
.hero__button {
	--button-icon-display: block;
}
.hero__button_job {
	--button-icon-image: url(../img/search-icon.svg);
}
.hero__button_vacancy {
	--button-icon-image: url(../img/camera-icon.svg);
}
.hero__content {
	height: 656px;
	display: grid;
	grid-template-rows: 1fr auto;
}
.hero__map {
	grid-row: 1;
	grid-column: 1;
	position: relative;
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
}
.hero__form {
	--hero-form-margin: clamp(8px, 8px + (24 - 8) * var(--adaptive), 24px);
	grid-row: 1;
	grid-column: 1;
	align-self: center;
	justify-self: center;
	width: calc(100% - var(--hero-form-margin) * 2);
	max-width: 1080px;
	background: var(--black);
	border-radius: var(--radius);
	padding: 8px;
	display: grid;
	grid-template-columns: 1fr 0.6fr 0.7fr auto;
	grid-gap: 8px;
	position: relative;
	z-index: 2;
}
.hero__submit {
	--button-text-size: 16px;
	--button-padding: 14px 24px;
	height: 48px;
}
.hero__note {
	background: var(--black);
	padding: 0.4em 1em;
	font-weight: 300;
	font-size: var(--caption-size);
	line-height: 1.2;
	color: var(--white);
	text-align: center;
	border-radius: 0 0 var(--radius) var(--radius);
}

@media (max-width: 1023px) {
	.hero__form {
		max-width: 312px;
		grid-template-columns: 1fr;
	}
	.hero__submit {
		width: 100%;
	}
}
@media (max-width: 540px) {
	.hero {
		background-size: min(1200px, 300%);
	}
}





/* Vacancy */

.vacancy__content {
	position: relative;
}
.vacancy__card {
	height: auto;
	background: var(--white);
	border: var(--border);
	border-radius: var(--radius);
	padding: 24px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr auto;
	grid-gap: 16px;
}
.vacancy__position {
	font-size: 20px;
	line-height: 1.2;
	color: var(--black);
	background: var(--accent-color);
	width: fit-content;
	border-radius: 4px;
	padding: 4px 12px;
}
.vacancy__desc {
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	min-height: 60px;
}
.vacancy__icon {
	grid-column: 2;
	grid-row: 1 / span 2;
}
.vacancy__tags {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
}
.vacancy__tag {
	font-weight: 300;
	font-size: 16px;
	background: var(--lightgray);
	padding: 4px 8px;
	border-radius: 4px;
}





/* Jobs */

.jobs__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3em 0.5em;
	margin-bottom: calc(var(--title-size) * 0.9);
}
.jobs__title {
	margin-bottom: 0;
}
.jobs__select {
	--select-input-padding: 0;
	--select-dropdown-min-width: fit-content;
	width: fit-content;
}
.jobs__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	grid-gap: 16px var(--gap);
	margin-bottom: 32px;
}
.jobs__card {
	--jobs-card-padding: 24px; 
	background: var(--lightgray);
	border: var(--border);
	border-radius: var(--radius);
	padding: var(--jobs-card-padding);
	display: grid;
	grid-template-rows: repeat(2, auto) 1fr;
	grid-gap: 12px;
}
.jobs__caption {
	font-weight: 500;
	font-size: var(--caption-size);
	line-height: 1.2;
}
.jobs__desc {
	margin-bottom: 5px;
}
.jobs__image {
	position: relative;
	align-self: end;
}
.jobs__image img {
	object-position: right bottom;
}
.jobs__image_photo {
	justify-self: end;
	width: 78.5%;
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: calc(var(--jobs-card-padding) * -1);
	margin-right: calc(var(--jobs-card-padding) * -1);
}
.jobs__image_logo {
	height: 64px;
}
.jobs__button {
	margin-inline: auto;
}

@media (max-width: 1023px) {
	.jobs__list {
		grid-template-columns: 1fr;
	}
	.jobs__image_photo {
		width: 200px;
	}
}
@media (max-width: 540px) {
	.jobs__head {
		justify-content: flex-start;
	}
	.jobs__select {
		width: 100%!important;
	}
}




/* Benefits */

.benefits__body {
	background: linear-gradient(90deg, #f2f2f2 0%, #dadada 100%);
	border-radius: var(--radius);
	padding-block: clamp(64px, 64px + (100 - 64) * var(--adaptive), 100px);
	padding-inline: clamp(8px, 8px + (50 - 8) * var(--adaptive), 50px);
}
.benefits__title {
	max-width: 15em;
	margin-inline: auto;
	margin-bottom: max(40px, 1.167em);
}
.benefits__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 40px var(--gap);
	justify-content: space-between;
}
.benefits__item {
	width: 100%;
	max-width: 325px;
	justify-self: center;
}
.benefits__icon {
	margin: 0 auto 20px;
}
.benefits__caption {
	font-weight: 500;
	font-size: var(--caption-size);
	color: var(--white);
	text-align: center;
	background: var(--black);
	border-radius: 4px;
	padding: 4px 10px;
	margin-bottom: 15px;
}
.benefits__desc {
	font-weight: 300;
	text-align: center;
	max-width: 15.8em;
	margin-inline: auto;
}

@media (max-width: 1023px) {
	.benefits__list {
		grid-template-columns: 1fr;
	}
}




/* Tabs */

.tabs__nav {
	--tabs-link-text-size: var(--caption-size);
	--tabs-link-text-color: var(--black);
	--tabs-link-button-color: none;
	--tabs-link-padding: 4px;
	--tabs-link-border: 2px solid transparent;
	--tabs-link-gap: 16px;
	--tabs-active-link-border: 2px solid var(--black);
	--tabs-nav-margin: 32px;

	display: flex;
	justify-content: center;
	gap: var(--tabs-link-gap);
	margin-bottom: var(--tabs-nav-margin);
}
.tabs__link {
	font-size: var(--tabs-link-text-size);
	padding: var(--tabs-link-padding);
	color: var(--tabs-link-text-color);
	background: var(--tabs-link-button-color);
	border-bottom: var(--tabs-link-border);
	white-space: nowrap;
	transition: 0.1s;
}
.tabs__link_active {
	border-bottom: var(--tabs-active-link-border);
	pointer-events: none;
}
@media (hover: hover) {
	.tabs__link:hover {
		opacity: 0.7;
	}
}
.tabs__content:not(.tabs__content_active),
.tabs__select {
	display: none;
}

@media (max-width: 540px) {
	.tabs__nav {
		display: none;
	}
	.tabs__select {
		display: block;
		margin-bottom: 32px;
	}
}






/* FAQ */

.faq {
	--faq-item-padding: 12px 0;
	--faq-item-border: var(--border);
	--faq-button-size: 40px;
	--faq-button-radius: 4px;
	--faq-button-color: var(--accent-color);
	--faq-button-icon: url(../img/plus-icon.svg);
	--faq-button-gap: 16px;
	--faq-button-hover-color: var(--accent-color-hover);
	--faq-button-hover-icon: url(../img/minus-icon.svg);
	--faq-summary-size: 20px;
	--faq-summary-margin: 12px;
	--faq-summary-color: var(--black);
	--faq-text-size: 16px;
	--faq-text-font-weight: 300;
	--faq-text-padding-bottom: 12px;
}
.faq__body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 80px var(--gap);
}

.faq__person {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1;
	padding: 24px;
	display: grid;
	align-content: end;
}
.faq__name {
	background: var(--white);
	border-radius: 4px;
	padding: 4px 20px;
	width: fit-content;
	position: relative;
	z-index: 2;
}
.faq__quote {
	background: var(--black);
	border-radius: 4px;
	padding: 10px 20px;
	max-width: 560px;
	font-size: var(--caption-size);
	letter-spacing: -0.01em;
	color: var(--white);
	position: relative;
	z-index: 2;
}

.faq__list {
	border-top: var(--faq-item-border);
}
.faq__item {
	border-bottom: var(--faq-item-border);
	padding: var(--faq-item-padding);
	position: relative;
}
.faq__summary {
	font-weight: 800;
	font-size: var(--faq-summary-size);
	color: var(--faq-summary-color);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: var(--faq-button-gap);
	align-items: center;
	cursor: pointer;
	position: relative;
	transition: var(--transition);
}
.faq__summary::marker {
	display: none;
}
.faq__summary::-webkit-details-marker {
	display: none
}
.faq__summary::before {
	content: '';
	position: absolute;
	inset: calc(var(--faq-summary-margin) * -1) 0;
}
.faq__summary::after {
	content: '';
	display: block;
	width: var(--faq-button-size);
	aspect-ratio: 1;
	background: var(--faq-button-icon) center / contain no-repeat;
	background-color: var(--faq-button-color);
	border-radius: var(--faq-button-radius);
	transition: var(--transition);
}
@media (hover: hover) {
	.faq__summary:hover::after {
		background-color: var(--faq-button-hover-color);
	}
}
.faq__content {
	align-self: center;
	display: grid;
	grid-template-rows: 0fr;
	transition-duration: 0.5s;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}
.faq__text {
	font-weight: var(--faq-text-font-weight);
	font-size: var(--faq-text-size);
	overflow: hidden;
}
.faq__details[open] .faq__summary::after {
	background-image: var(--faq-button-hover-icon);
}
.faq__details[open] + .faq__content {
	grid-template-rows: 1fr;
	opacity: 1;
	padding-top: var(--faq-summary-margin);
	padding-bottom: var(--faq-text-padding-bottom);
	pointer-events: all;
}

@media (max-width: 1023px) {
	.faq__body {
		grid-template-columns: 1fr;
	}
	.faq__list {
		grid-row: 1;
	}
}
@media (max-width: 540px) {
	.faq__body {
		grid-gap: 40px;
	}
	.faq__person {
		padding: 0;
		border-radius: var(--radius) var(--radius) 4px 4px;
	}
	.faq__name,
	.faq__quote {
		padding-inline: 12px;
	}
	.faq__name {
		font-size: 14px;
	}
	.faq__quote {
		font-size: 16px;
	}
}




/* CTA */

.cta__body {
	background: var(--accent-color);
	border-radius: var(--radius);
	padding: clamp(24px, 24px + (40 - 24) * var(--adaptive), 40px);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 40px;
	align-items: center;
}
.cta__title {
	text-align: left;
	margin-bottom: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 16px;
	align-items: center;
}
.cta__title::before {
	content: '';
	display: block;
	width: 48px;
	aspect-ratio: 1;
	background: url(../img/blink_black.svg) center / contain no-repeat;
}

@media (max-width: 1200px) {
	.cta__title {
		max-width: 20em;
	}
}
@media (max-width: 820px) {
	.cta__body,
	.cta__title {
		grid-template-columns: 1fr;
		max-width: unset;
	}
	.cta__button {
		width: 100%;
	}
}




/* Footer */

.footer {
	background: var(--black);
	border-radius: 20px 20px 0 0;
	color: var(--white);
	padding-top: 48px;
}
.footer__main {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 18px 40px;
}
.footer__text {
	justify-self: end;
	font-weight: 500;
	font-size: clamp(20px, 20px + (24 - 20) * var(--desktop), 24px);
	line-height: 1.2;
	text-align: right;
	max-width: 32em;
}
.footer__menu {
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	justify-content: start;
	grid-gap: 16px 90px;
}
.footer__link {
	font-size: 16px;
	color: var(--white);
	white-space: nowrap;
}
.footer__contacts {
	align-self: end;
	display: grid;
	grid-gap: 12px;
	text-align: right;
}
.footer__email {
	font-size: 16px;
	color: var(--white);
}
.footer__phone {
	font-size: 20px;
	color: var(--white);
}
.footer__bottom {
	margin-top: 56px;
	padding-block: 20px;
	border-top: 1px solid rgba(255,255,255,0.7);
}
.footer__info {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-gap: 16px;
	align-items: center;
}
.footer__buttons {
	display: flex;
	gap: 10px;
}
@media (hover: hover) {
	.footer__link:hover,
	.footer__email:hover,
	.footer__phone:hover {
		opacity: 0.7;
	}
	.footer__button:hover {
		transform: scale(1.05);
	}
}
.footer__copyright {
	text-align: center;
	font-size: 14px;
	opacity: 0.7;
}
.footer__socials {
	justify-self: end;
	display: flex;
	gap: 8px;
}

@media (max-width: 1023px) {
	.footer__main {
		grid-template-columns: 1fr;
		grid-gap: 32px;
	}
	.footer__logo {
		margin-bottom: -8px;
	}
	.footer__text {
		font-size: 18px;
		justify-self: start;
		text-align: left;
	}
	.footer__contacts {
		text-align: left;
		grid-row: 3;
	}
	.footer__info {
		grid-template-columns: repeat(2, auto);
		justify-content: space-between;
	}
	.footer__copyright {
		grid-row: 2;
		grid-column: 1 / -1;
	}
}
@media (max-width: 820px) {
	.footer__menu {
		grid-template-columns: 1fr;
		grid-template-rows: unset;
		grid-auto-flow: row;
	}
	.footer__bottom {
		margin-top: 70px;
	}
}
@media (max-width: 540px) {
	.footer__info {
		grid-template-columns: 1fr;
		grid-gap: 12px;
	}
	.footer__copyright {
		text-align: left;
		grid-row: 3;
	}
	.footer__socials {
		justify-self: start;
	}
}