.home-hero {
	position: relative;
	width: 100%;
	overflow: hidden;

	.hero-inner {
		max-width: var(--content-width);
		margin: 0 auto;
		display: grid;
		gap: calc(var(--item-gap) * 3);
		align-items: center;
	}

	.hero-content {
		display: flex;
		flex-direction: column;
		gap: var(--item-gap);
		max-width: 800px;
	}

	.hero-bg-image {
		display: none;
	}

	.hero-video-bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hero-video-controls {
		position: absolute;
		right: calc(var(--item-gap) * 1.25);
		bottom: calc(var(--item-gap) * 1.25);
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: calc(var(--item-gap) * 0.5);
	}

	.hero-video-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: calc(var(--item-gap) * 1.75);
		height: calc(var(--item-gap) * 1.75);
		border: none;
		border-radius: 999px;
		background: rgba(var(--dark-rgb), 0.3);
		transition:
			background var(--trans-fast),
			border-color var(--trans-fast),
			transform var(--trans-fast);
		cursor: pointer;

		i {
			font-size: calc(var(--item-gap) * 0.6);
			color: var(--white);
		}

		&:hover {
			background: rgba(var(--dark-rgb), 1);
			transform: translateY(-1px);
		}

		&:focus-visible {
			outline: var(--focus-ring);
			outline-offset: 2px;
		}
	}

	.hero-content > * {
		margin-bottom: 0;
	}

	.hero-reviews {
		display: flex;
		align-items: center;
		gap: calc(var(--item-gap) * 0.38);
		font-size: var(--text-sm);
		font-weight: 700;

		i {
			color: var(--medium);
			font-size: calc(var(--item-gap) * 0.75);
		}
	}

	.bg-medium .hero-reviews i {
		color: var(--white);
	}

	@media (max-width: 1024px) {
		.hero-inner {
			gap: calc(var(--item-gap) * 1.5);
		}
	}

	@media (max-width: 767px) {
		&.hide-image-mobile {
			.hero-inner {
				.hero-image {
					display: none;
				}
			}
		}

		.hero-inner {
			max-width: fit-content;

			grid-template-columns: 1fr;
			gap: calc(var(--item-gap) * 1.33);

			.hero-phone {
				display: none;
			}

			.home-hero {
				padding: calc(var(--item-gap) * 1.33) 0;
			}

			.hero-image {
				order: 1;
			}

			.hero-content {
				order: 2;
			}

			.hero-ctas {
				width: 100%;

				.btn {
					width: 100%;
				}
			}

			.hero-image img {
				max-height: 250px;
			}
		}

		.hero-video-controls {
			right: calc(var(--item-gap) * 0.75);
			bottom: calc(var(--item-gap) * 0.75);
		}
	}
}

@media (max-width: 767px) {
	.home-hero.hh2:not(.hide-image-mobile),
	.home-hero.hh3:not(.hide-image-mobile) {
		padding-top: 0;
		.container {
			padding-inline: 0;
			.hero-image img {
				border-radius: 0;
			}
			.hero-content {
				padding-inline: var(--header-pad-x);
			}
		}
	}
}