/* =========================================================
   HERO: DESKTOP
   ========================================================= */

.hero-row {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	min-height: clamp(
		560px,
		calc(100svh - 112px),
		720px
	);

	border-radius: 16px;

	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: 55% 58% center !important;
}




/* Внутренняя область Kadence */

.hero-row > .kt-row-column-wrap {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;

	width: 100%;
	min-height: inherit;

	padding:
		clamp(48px, 5vw, 72px)
		clamp(48px, 4vw, 64px) !important;
}


/*
 * Убираем возможные ограничения внутренней Section.
 */

.hero-row .kt-inside-inner-col {
	width: 100%;
}


/* Основная текстовая область */

.morefx-hero-content {
	width: 100%;
	max-width: 720px;

	color: #ffffff;

	text-shadow:
		0 1px 5px rgba(0, 0, 0, 0.16);
}


/* Маленькая подпись сверху */

.morefx-hero-eyebrow {
	margin: 0;

	color: rgba(255, 255, 255, 0.86);

	font-size: clamp(13px, 1.1vw, 15px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}


/* Короткая оранжевая линия */

.morefx-hero-line {
	width: 36px;
	height: 2px;

	margin: 13px 0 25px;

	border-radius: 10px;
	background: #FA4B05;

	box-shadow: none;
}


/* Главный заголовок */

.morefx-hero-title {
	margin: 0;

	color: #ffffff;

	font-size: clamp(42px, 3.7vw, 58px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;

	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;

	text-shadow:
		0 2px 8px rgba(0, 0, 0, 0.12);
}


.morefx-hero-title span {
	display: block;
	white-space: nowrap;
}


/* Описание */

.morefx-hero-description {
	margin: 21px 0 0;

	color: rgba(255, 255, 255, 0.94);

	font-size: clamp(17px, 1.55vw, 20px);
	font-weight: 400;
	line-height: 1.42;

	text-shadow:
		0 1px 6px rgba(0, 0, 0, 0.18);
}


/* Кнопки */

.morefx-hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 22px 30px;

	margin-top: 34px;
}


/* Общие параметры ссылок */

.morefx-hero-primary,
.morefx-hero-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;

	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		color 0.25s ease,
		opacity 0.25s ease,
		box-shadow 0.25s ease;
}


/* Оранжевая кнопка */

.morefx-hero-primary {
	min-height: 48px;
	padding: 13px 26px;

	border-radius: 16px;
	background: #FA4B05;
	color: #ffffff;

	text-shadow: none;

	box-shadow:
		0 8px 22px rgba(250, 75, 5, 0.16);
}


.morefx-hero-primary:hover {
	color: #ffffff;
	background: #e94604;

	transform: translateY(-2px);

	box-shadow:
		0 12px 28px rgba(250, 75, 5, 0.24);
}


/* Ссылка "Смотреть работы" */

.morefx-hero-secondary {
	gap: 9px;

	padding: 10px 0;

	color: #ffffff;

	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;

	text-shadow:
		0 1px 5px rgba(0, 0, 0, 0.22);
}


.morefx-hero-secondary:hover {
	color: #ffffff;
	opacity: 0.72;
	transform: translateX(3px);
}


/* Направления работы */

.morefx-hero-directions {
	margin-top: 31px;

	color: rgba(255, 255, 255, 0.78);

	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;

	text-shadow:
		0 1px 5px rgba(0, 0, 0, 0.22);
}


/* Фокус с клавиатуры */

.morefx-hero-primary:focus-visible,
.morefx-hero-secondary:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.92);
	outline-offset: 4px;
}


/* =========================================================
   TABLET: 784–1024 px
   ========================================================= */

@media (min-width: 784px) and (max-width: 1024px) {

	.hero-row {
		min-height: 550px;

		background-position: 60% center !important;
	}




	.hero-row > .kt-row-column-wrap {
		padding: 44px 38px !important;
	}


	.morefx-hero-content {
		max-width: 600px;
	}


	.morefx-hero-title {
		font-size: clamp(38px, 4.8vw, 48px);
	}


	.morefx-hero-description {
		font-size: 17px;
	}


	.morefx-hero-actions {
		gap: 18px 25px;
		margin-top: 29px;
	}


	.morefx-hero-primary,
	.morefx-hero-secondary {
		font-size: 15px;
	}


	.morefx-hero-directions {
		margin-top: 27px;
		font-size: 14px;
	}

}


/* =========================================================
   MOBILE: до 783 px
   ========================================================= */

@media (max-width: 783px) {

	.hero-row {
		min-height: 610px;

		border-radius: 14px;

		background-position: 61% center !important;
	}



	.hero-row > .kt-row-column-wrap {
		align-items: stretch;

		padding: 34px 21px 25px !important;
	}


	.hero-row .kt-inside-inner-col,
	.hero-row .wp-block-html {
		width: 100%;
		min-height: 100%;
	}


	.morefx-hero-content {
		display: flex;
		flex-direction: column;

		min-height: calc(610px - 59px);
		max-width: none;
	}


	.morefx-hero-eyebrow {
		font-size: 12px;
		line-height: 1.35;
	}


	.morefx-hero-line {
		width: 34px;

		margin-top: 12px;
		margin-bottom: 22px;
	}


	.morefx-hero-title {
		font-size: clamp(29px, 8vw, 36px);
		line-height: 1.1;
	}


	.morefx-hero-title span {
		white-space: normal;
	}


	.morefx-hero-description {
		margin-top: 22px;

		font-size: 16px;
		line-height: 1.48;
	}


	.morefx-hero-description br {
		display: none;
	}


	.morefx-hero-actions {
		flex-direction: column;
		align-items: stretch;

		gap: 10px;

		width: 100%;
		margin-top: auto;
	}


	.morefx-hero-primary,
	.morefx-hero-secondary {
		width: 100%;
		font-size: 15px;
	}


	.morefx-hero-primary {
		min-height: 50px;
		padding: 13px 18px;
	}


	.morefx-hero-secondary {
		min-height: 42px;
		padding: 10px;
	}


	.morefx-hero-directions {
		display: none;
	}

}


/* Узкие телефоны */

@media (max-width: 390px) {

	.hero-row {
		min-height: 580px;
	}


	.morefx-hero-content {
		min-height: calc(580px - 59px);
	}


	.hero-row > .kt-row-column-wrap {
		padding-right: 18px !important;
		padding-left: 18px !important;
	}


	.morefx-hero-title {
		font-size: 33px;
	}


	.morefx-hero-description {
		font-size: 15px;
	}

}


/* Убираем анимации при соответствующей системной настройке */

@media (prefers-reduced-motion: reduce) {

	.morefx-hero-primary,
	.morefx-hero-secondary {
		transition: none;
	}

}

.morefx-hero-secondary,
.morefx-hero-secondary:hover,
.morefx-hero-secondary:focus,
.morefx-hero-secondary:visited {
	text-decoration: none !important;
}

.morefx-hero-secondary::before,
.morefx-hero-secondary::after {
	content: none !important;
	display: none !important;
}