.flex-layout.hero_404 {
	--bg-color: var(--neutral-90);
	--text-color: var(--primary-100);
	--layout-spacing-top: max(1rem, calc(1.5 * var(--su)));
	--layout-spacing-bottom: 0px;
	position: relative;
	overflow: visible !important;
}

.flex-layout.hero_404 .nova-cursor {
	--cursor-line: var(--accent-100);
    --cursor-dot: var(--accent-100);
    --cursor-text: var(--accent-100);
}

body:has(.flex-layout.hero_404[data-overlay-layout]) {
	--overlay-height: max(4.5rem, calc(4.5 * var(--su)));
}

body:has(.flex-layout.hero_404[data-overlay-layout]) .pk-footer {
	padding-top: var(--overlay-height);
}

.flex-layout.hero_404 .breadcrumbs-col {
	margin-bottom: max(1.5rem, calc(5 * var(--su)));
}

.flex-layout.hero_404 .content-col {
	position: relative;
	z-index: 2;
	padding-bottom: max(2.5rem, calc(5 * var(--su)));
}

.flex-layout.hero_404 .cursor-anchor {
	display: flex;
	margin-block: max(1rem, calc(1.25 * var(--su)));
}

.flex-layout.hero_404 .pk-heading {
	color: var(--text-color);
}

.flex-layout.hero_404 h1.pk-heading {
	font-size: var(--scaling-h2);
}

.flex-layout.hero_404 .pk-text {
	color: var(--text-color);
	font-size: var(--body-s-regular) !important;
}

.flex-layout.hero_404 .submenu-col {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: end;
	margin-bottom: calc(-1 * var(--overlay-height));
	margin-top: max(1rem, calc(1.5 * var(--su)));
}

.flex-layout.hero_404 .submenu-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: max(1rem, calc(1.5 * var(--su)));
	background-color: var(--white-100);
}

.flex-layout.hero_404 .submenu-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--body-xs-regular);
	gap: max(1rem, calc(1 * var(--su)));
	padding-block: max(.75rem, calc(.75 * var(--su))) max(1rem, calc(1 * var(--su)));
	color: var(--primary-100);
	text-decoration: none;
	transition: background-color 200ms ease;
	border-bottom: 1px solid var(--primary-10);
}

.flex-layout.hero_404 .submenu-list a:last-child {
	border-bottom: unset;
}

.flex-layout.hero_404 .submenu-list a:hover {
	background-color: var(--neutral-20);
}

.flex-layout.hero_404 .submenu-list a::after {
	order: 1;
	width: 1rem;
	height: auto;
	aspect-ratio: 1;
	background-color: var(--primary-50);
	mask: var(--mask-url) center / contain no-repeat;
}

@media screen and (max-width: 992px) {

	.flex-layout.hero_404 .content-col {
		padding-bottom: 0;
	}

	.flex-layout.hero_404 .submenu-col .submenu-list {
		width: 100%;
	}

}