.hero {
	.container {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-20);

		@media (width > 1000px) {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: var(--spacing-40);
			padding-block-start: var(--spacing-40);
			padding-block-end: var(--spacing-40);
			position: relative;
		}
	}
}

.hero__text {
	color: var(--white);
	text-align: center;
	position: relative;
	gap: var(--spacing-20);
	display: flex;
	justify-content: center;
	flex-direction: column;
	max-width: var(--l);

	@media (width > 1200px) {
		text-align: start;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-20);

		@media (width > 1200px) {
			align-items: start;
		}
	}
}

.hero__title {
	margin: 0;

	@media (width > 1000px) {
		.header--home & {
			padding-right: 45%;
		}
	}
}

.hero__subtitle {
	font-size: var(--step-0);
	margin-block-start: calc(var(--spacing-20) * -1);
	margin-block-end: 0;
	font-weight: 500;
	color: var(--gray-100);
}

.hero__excerpt {
	margin: 0;
	max-width: var(--xl);

	@media (width > 1000px) {
		.header--home & {
			padding-right: 45%;
		}
	}
}

.hero__categories {
	display: flex;
	gap: var(--spacing-5);
	align-items: center;
}

.hero__category {
		border-radius: var(--btn-radius);
	background: var(--purple-50);
	color: var(--purple-500);
	text-align: center;
	font-size: var(--step--1);
	padding: var(--spacing-5) var(--spacing-10);
	text-decoration: none;
	transition: background 0.2s ease-in-out, color 0.2s ease-in-out;

	&:hover,
	&:focus-visible {
		background: var(--purple-100);
		color: var(--purple-600);
	}
}

.hero__ctas {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-20);

	@media (width > 768px) {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	@media (width > 1200px) {
		justify-content: start;
	}

	.header--home & {
		flex-direction: column-reverse;

		@media (width > 768px) {
			flex-direction: row;
		}
	}
}

.hero__phone-number {
	font-size: var(--step-1);
	font-weight: 500;
	color: var(--white);
	text-decoration: none;
}

.hero__video-dialog {
	position: relative;
	overflow: visible;
	border: 0;
	box-shadow: 5px 4px 30px 0 rgba(0, 0, 0, 0.50);

	&::backdrop {
	background-color: var(--black);
  opacity: 0.5;
}
}

.hero__video-close {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--blue-300);
	background-color: var(--blue-50);
		border-radius: var(--btn-radius);
	cursor: pointer;
	line-height: 1;
	position: absolute;
	width: var(--spacing-30);
	height: var(--spacing-30);
	top: calc(var(--spacing-30) / -2);
	right: calc(var(--spacing-30) / -2);
	box-shadow: 5px 4px 30px 0 rgba(0, 0, 0, 0.30);
}

.image.hero__headshot {
	max-width: 400px;
	width: 100%;
	align-self: center;
	position: relative;

	@media (width > 1000px) {
		align-self: end;
		margin-block-end: calc(var(--spacing-40) * -1);
	}

	@media (width > 1280px) {
		/*margin-block-end: 0;*/
		/*position: absolute;
		bottom: 0;
		right: 0;*/
	}
}