.tp-native-hero {
	position: relative;
	isolation: isolate;
	min-height: 676px;
	overflow: hidden;
	background: var(--tp-color-background);
	color: var(--tp-color-text);
	font-family: var(--tp-font-body);
}

.tp-native-hero::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(circle at 22% 8%, rgba(255, 255, 255, 0.62), transparent 38%),
		linear-gradient(135deg, #f7eadf 0%, #edd6c4 100%);
	clip-path: polygon(60% 0, 100% 0, 100% 100%, 33% 100%);
	content: "";
}

.tp-native-hero__shell {
	width: min(1060px, calc(100% - 52px));
	min-height: 676px;
	margin-inline: auto;
}

.tp-native-hero__columns {
	display: grid !important;
	grid-template-columns: 44% 56%;
	align-items: center;
	gap: 0;
	margin: 0 !important;
}

.tp-native-hero__columns > .wp-block-column {
	flex-basis: auto !important;
	margin: 0 !important;
}

.tp-native-hero__copy {
	position: relative;
	z-index: 3;
	align-self: stretch;
	min-width: 0;
	padding: 57px 6px 44px 0;
}

.tp-native-hero__eyebrow {
	margin: 0 0 17px !important;
	color: #995839;
	font-size: 11px !important;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1.2 !important;
	text-transform: uppercase;
}

.tp-native-hero__rating {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px !important;
}

.tp-native-hero__rating > .wp-block-column,
.tp-native-hero__rating > .wp-block-group {
	margin: 0 !important;
}

.tp-native-hero__stars {
	margin: 0 !important;
	color: #c37a51;
	font-size: 14px !important;
	font-weight: 800;
	letter-spacing: 0.075em;
	line-height: 1 !important;
	white-space: nowrap;
}

.tp-native-hero__rating-copy {
	margin: 0 !important;
	color: #5a4438;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 1.2 !important;
}

.tp-native-hero__title {
	margin: 0 0 25px !important;
	color: var(--tp-color-text);
	font-family: var(--tp-font-heading) !important;
	font-size: 62px !important;
	font-weight: 700 !important;
	letter-spacing: -0.045em;
	line-height: 0.96 !important;
}

.tp-native-hero__title-accent {
	position: relative;
	display: inline-block;
	color: #a85c3e;
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.04em;
}

.tp-native-hero__title-accent::after {
	position: absolute;
	right: 0;
	bottom: -2px;
	left: 0;
	height: 1px;
	background: #b66b4d;
	content: "";
}

.tp-native-hero__lede {
	max-width: 420px;
	margin: 0 0 20px !important;
	color: var(--tp-color-muted);
	font-size: 16px !important;
	font-weight: 400;
	line-height: 1.55 !important;
}

.tp-native-hero__actions {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 12px;
	margin: 0 0 15px !important;
}

.tp-native-hero__actions .wp-block-button {
	margin: 0 !important;
}

.tp-native-hero__actions .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	min-height: 50px;
	padding: 15px 18px;
	border-radius: 8px;
	font-size: 13px !important;
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
}

.tp-native-hero__primary .wp-block-button__link {
	width: 185px;
	background: var(--tp-color-accent);
	color: #fff;
}

.tp-native-hero__primary .wp-block-button__link:hover,
.tp-native-hero__primary .wp-block-button__link:focus-visible {
	background: var(--tp-color-accent-dark);
	color: #fff;
	transform: translateY(-1px);
}

.tp-native-hero__secondary .wp-block-button__link {
	width: 158px;
	border: 1px solid var(--tp-color-line);
	background: #fffaf5;
	color: #584239;
}

.tp-native-hero__secondary .wp-block-button__link:hover,
.tp-native-hero__secondary .wp-block-button__link:focus-visible {
	border-color: #c9a98e;
	background: #fffaf5;
	color: var(--tp-color-accent);
	transform: translateY(-1px);
}

.tp-native-hero__micro {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 16px;
	margin: 0 !important;
	white-space: nowrap;
}

.tp-native-hero__micro > .wp-block-group,
.tp-native-hero__micro > .wp-block-paragraph {
	margin: 0 !important;
}

.tp-native-hero__benefit {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	color: #6a584d;
	font-size: 10px !important;
	font-weight: 600;
	line-height: 1.25 !important;
}

.tp-native-hero__check {
	display: grid;
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	place-items: center;
	border-radius: 50%;
	background: #efdfcf;
	color: #9d6142;
	font-size: 10px;
}

.tp-native-hero__stage {
	position: relative;
	z-index: 4;
	height: 570px;
	overflow: visible !important;
}

.tp-native-hero__photo {
	position: absolute !important;
	z-index: 3;
	overflow: hidden;
	background: #d9c8b8;
	isolation: isolate;
	transition:
		transform 0.34s cubic-bezier(0.2, 0.75, 0.25, 1),
		box-shadow 0.34s ease;
}

.tp-native-hero__photo .wp-block-image,
.tp-native-hero__photo .wp-block-image img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.tp-native-hero__photo .wp-block-image img {
	display: block;
	object-fit: cover;
}

.tp-native-hero__main-photo {
	top: 8%;
	left: 7%;
	width: 77%;
	height: 84%;
	border: 7px solid #fffaf5;
	border-radius: 5px;
	background: #213249;
	box-shadow: none;
}

.tp-native-hero__top-photo {
	top: 2%;
	right: 1%;
	z-index: 6;
	width: 30%;
	height: 36%;
	border: 7px solid #fffaf5;
	border-radius: 15px;
	transform: rotate(3deg);
}

.tp-native-hero__left-photo {
	bottom: 1%;
	left: 2%;
	z-index: 7;
	width: 28%;
	height: 27%;
	border: 7px solid #fffaf5;
	border-radius: 14px;
	transform: rotate(-5deg);
}

.tp-native-hero__bottom-photo {
	right: 0;
	bottom: 1%;
	z-index: 8;
	width: 35%;
	height: 41%;
	border: 7px solid #fffaf5;
	border-radius: 15px;
	transform: rotate(-3deg);
}

.tp-native-hero__top-photo:hover {
	z-index: 12;
	box-shadow: 0 22px 42px rgba(82, 54, 40, 0.24);
	transform: translateY(-9px) rotate(3deg) scale(1.04);
}

.tp-native-hero__left-photo:hover {
	z-index: 12;
	box-shadow: 0 22px 42px rgba(82, 54, 40, 0.24);
	transform: translateY(-9px) rotate(-5deg) scale(1.04);
}

.tp-native-hero__bottom-photo:hover {
	z-index: 12;
	box-shadow: 0 22px 42px rgba(82, 54, 40, 0.24);
	transform: translateY(-9px) rotate(-3deg) scale(1.04);
}

.tp-native-hero__upload-hint {
	display: none;
	position: absolute !important;
	z-index: 5;
	top: 50%;
	left: 50%;
	width: max-content;
	max-width: 85%;
	margin: 0 !important;
	padding: 7px 9px;
	border-radius: 7px;
	background: rgba(255, 250, 245, 0.92);
	box-shadow: 0 3px 10px rgba(74, 47, 34, 0.08);
	color: #74594b;
	font-size: 9px !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2 !important;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
}

.tp-native-hero__caption {
	position: absolute !important;
	z-index: 6;
	bottom: 8px;
	left: 8px;
	margin: 0 !important;
	padding: 7px 10px;
	border-radius: 999px;
	background: #fffaf5;
	box-shadow: 0 3px 10px rgba(74, 47, 34, 0.1);
	color: #5a4034;
	font-size: 9px !important;
	font-weight: 800;
	line-height: 1 !important;
	white-space: nowrap;
}

.tp-native-hero__bottom-photo .tp-native-hero__caption {
	background: #5a4034;
	color: #fff;
}

.tp-native-hero__quote {
	position: absolute !important;
	z-index: 9;
	top: 4%;
	left: 2%;
	width: 29.5%;
	min-height: 82px;
	margin: 0 !important;
	padding: 15px 16px;
	border: 1px solid #eadbcf;
	border-radius: 10px;
	background: #fffaf5;
	box-shadow: 0 10px 24px rgba(83, 55, 40, 0.12);
	transform: rotate(-2deg);
}

.tp-native-hero__quote-copy {
	margin: 0 0 8px !important;
	color: #5b4438;
	font-family: var(--tp-font-heading);
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.18 !important;
}

.tp-native-hero__quote-tag {
	margin: 0 !important;
	color: #9b5b3f;
	font-size: 8px !important;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1 !important;
	text-transform: uppercase;
}

@media (max-width: 1050px) {
	.tp-native-hero__shell {
		width: min(calc(100% - 36px), 1060px);
	}

	.tp-native-hero__columns {
		grid-template-columns: 47% 53%;
	}

	.tp-native-hero__micro {
		gap: 10px;
	}
}

@media (max-width: 850px) {
	.tp-native-hero::before {
		clip-path: polygon(0 58%, 100% 45%, 100% 100%, 0 100%);
	}

	.tp-native-hero__shell {
		min-height: auto;
		padding-bottom: 45px;
	}

	.tp-native-hero__columns {
		grid-template-columns: 1fr;
	}

	.tp-native-hero__copy {
		max-width: 620px;
		padding: 48px 0 34px;
	}

	.tp-native-hero__title {
		font-size: 48px !important;
	}

	.tp-native-hero__stage {
		width: min(620px, 100%);
		height: 540px;
		margin-inline: auto;
	}
}

@media (max-width: 560px) {
	.tp-native-hero__shell {
		width: calc(100% - 28px);
	}

	.tp-native-hero__copy {
		padding: 28px 0 22px;
	}

	.tp-native-hero__rating {
		gap: 8px;
		margin-bottom: 17px !important;
	}

	.tp-native-hero__stars {
		flex: 0 0 auto;
		font-size: 11px !important;
	}

	.tp-native-hero__rating-copy {
		min-width: 0;
		font-size: 9px !important;
		line-height: 1.2 !important;
		white-space: nowrap;
	}

	.tp-native-hero__title {
		margin-bottom: 17px !important;
		font-size: 36px !important;
		line-height: 0.94 !important;
	}

	.tp-native-hero__lede {
		margin-bottom: 14px !important;
		font-size: 13px !important;
		line-height: 1.42 !important;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
	}

	.tp-native-hero__actions {
		align-items: stretch;
		gap: 7px;
		margin-bottom: 12px !important;
	}

	.tp-native-hero__actions .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}

	.tp-native-hero__actions .wp-block-button__link {
		width: 100%;
		height: 43px;
		min-height: 43px;
		padding: 10px 5px;
		font-size: 9px !important;
		white-space: normal;
	}

	.tp-native-hero__micro {
		width: 100%;
		align-items: flex-start;
		justify-content: space-between;
		gap: 4px;
		white-space: normal;
	}

	.tp-native-hero__benefit {
		flex: 1 1 0;
		min-width: 0;
		gap: 3px;
		font-size: 7px !important;
		line-height: 1.2 !important;
	}

	.tp-native-hero__check {
		flex-basis: 14px;
		width: 14px;
		height: 14px;
	}

	.tp-native-hero__stage {
		height: 350px;
	}

	.tp-native-hero__main-photo {
		top: 14%;
		left: 6%;
		width: 76%;
		height: 68%;
	}

	.tp-native-hero__quote {
		top: 4%;
		left: 0;
		width: 42%;
	}

	.tp-native-hero__top-photo {
		width: 34%;
		height: 34%;
	}

	.tp-native-hero__left-photo {
		width: 32%;
		height: 28%;
	}

	.tp-native-hero__bottom-photo {
		width: 38%;
		height: 39%;
	}
}