/* Nav layouts — toggled via web.config appSettings NavLayout (VideoHero | ImageHero) */

/* ========== VideoHero: keep prior submenu behavior (do not inherit ImageHero nav experiments) ========== */
body.nav-layout-videhero {
	--nav-layout-mode: videhero;
}

/* Match NavBar.ascx: flex column so .sub-nav + .custom-submenu-bar stack (block was collapsing layout) */
body.nav-layout-videhero .main-menu.have-children:hover .submenu-hover-wrapper {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	-ms-flex-direction: column !important;
	flex-direction: column !important;
	-webkit-box-align: stretch !important;
	-ms-flex-align: stretch !important;
	align-items: stretch !important;
}

/* Full-width mega under nav row — top: 100% like ascx (80% caused overlap into menu text) */
body.nav-layout-videhero .nav-wrappper .submenu-hover-wrapper {
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
	width: 100% !important;
	max-width: none !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	-webkit-transform: none !important;
	transform: none !important;
}

/* Pull mega content out of absolute-overlap: dark bar sits below cream panel */
body.nav-layout-videhero header nav .have-children:hover .sub-nav,
body.nav-layout-videhero .nav-wrappper nav .have-children:hover .sub-nav {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	width: 100% !important;
}

body.nav-layout-videhero .nav-wrappper .submenu-hover-wrapper .custom-submenu-bar {
	position: relative !important;
	width: 100% !important;
	-ms-flex-negative: 0 !important;
	flex-shrink: 0 !important;
}

/*
 * Tablet / small laptop: inline mega + logo row overflows (overlap). style.css only switches to
 * the drawer at ≤768px — bridge 769–1199.98px so burger + #mobile-nav behave like mobile.
 */
@media screen and (min-width: 769px) and (max-width: 1199.98px) {
	/* Same as ImageHero: style.css only hides the menu checkbox inside @media (max-width:768px). */
	body.nav-layout-videhero #menyAvPaa {
		display: none !important;
	}

	body.nav-layout-videhero header .nav-row,
	body.nav-layout-videhero .nav-wrappper .nav-row {
		display: none !important;
	}

	body.nav-layout-videhero .nav-wrappper > .container {
		position: relative;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		min-height: 4.25rem;
	}

	body.nav-layout-videhero .nav-wrappper .row.tr-logo {
		width: 100%;
		max-width: 100%;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding-left: 3.25rem;
		padding-right: 3.25rem;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	body.nav-layout-videhero .mobile-nav-wrapper {
		display: block !important;
		position: absolute;
		left: max(4px, env(safe-area-inset-left));
		top: 50%;
		margin-top: -0.75rem;
		-webkit-transform: none !important;
		transform: none !important;
		width: auto;
		z-index: 2101;
	}

	body.nav-layout-videhero #burger {
		position: relative;
		left: 0;
		top: 0;
		margin: 0;
		width: 2rem;
		height: 1.5rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	body.nav-layout-videhero #burger > div {
		height: 2px;
		background-color: #726965;
	}

	body.nav-layout-videhero #mobile-nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		max-width: 100vw;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: #f5efec;
		z-index: -1;
		opacity: 0;
		display: none;
		-webkit-transition: opacity 0.5s linear;
		transition: opacity 0.5s linear;
	}

	body.nav-layout-videhero #menyAvPaa:checked ~ #mobile-nav {
		z-index: 10050 !important;
		opacity: 1 !important;
		display: block !important;
	}

	body.nav-layout-videhero #menyAvPaa:checked ~ #burger {
		z-index: 10051 !important;
		position: fixed !important;
		left: max(12px, env(safe-area-inset-left)) !important;
		top: max(1rem, env(safe-area-inset-top)) !important;
	}

	body.nav-layout-videhero #mobile-nav > ul {
		padding-top: max(4.5rem, calc(env(safe-area-inset-top) + 3rem));
		padding-left: max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		height: 100%;
		display: block;
	}
}

/* ========== ImageHero: single bar — logo left, nav right (reference layout), Biohacker palette ========== */
body.nav-layout-imagehero {
	--nav-layout-mode: imagehero;
	/* Fallback until JS sets exact .nav-wrappper height (extra-tall bar + 78px logo) */
	--nav-fixed-offset: 7.85rem;
	/* Biomarkers pill: taupe → charcoal (service category chips) */
	--nav-bio-taupe: #a19389;
	--nav-bio-charcoal: #5e5752;
	--nav-bio-taupe-hover: #b0a396;
	--nav-bio-charcoal-hover: #6d6560;
	--nav-link: #2a2426;
	--nav-link-hover-bg: rgba(94, 87, 82, 0.08);
	/* was hidden — clips pill hover / shadows on first nav items at the inner edge */
	overflow-x: visible;
}

/* style.css header.home { overflow: hidden } clips wide megas + hover glows — all breakpoints */
body.nav-layout-imagehero header.home {
	overflow: visible !important;
}

body.nav-layout-imagehero .nav-wrappper {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	width: 100%;
	z-index: 2000;
	background: #ffffff;
	border-bottom: 1px solid rgba(45, 40, 42, 0.1);
	-webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	/* Enough horizontal inset so rounded hovers (e.g. Test) are not clipped at the viewport */
	padding: clamp(0.75rem, 1.35vw, 1.25rem) clamp(16px, 2vw, 36px);
	opacity: 1 !important;
}

/*
 * Desktop-only (ImageHero): do NOT apply this flex row to <1200px — same “drawer in flow” risk as VideoHero <1200.
 */
body.nav-layout-imagehero .nav-wrappper .tr-logo > [class*="col-"] {
	-webkit-box-flex: 0 !important;
	-ms-flex: 0 0 auto !important;
	flex: 0 0 auto !important;
	max-width: none !important;
	width: auto !important;
	/* col-md-10 left ~17% dead space in the logo row — col-auto + this keeps wordmark tight */
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: left;
}

body.nav-layout-imagehero .nav-wrappper .row.tr-logo,
body.nav-layout-imagehero .nav-wrappper .row.nav-row {
	--bs-gutter-x: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.nav-layout-imagehero .nav-wrappper .row.tr-logo {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: min(340px, 38vw);
	/* ascx inline padding-top:15px — remove on ImageHero desktop bar */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	position: relative;
	z-index: 2;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: left;
}

body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo {
	max-width: min(300px, 42vw);
	width: auto;
	margin: 0;
	text-align: left;
}

body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: auto;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

/*
 * style.css centers the mark with position:absolute; left:50%; transform on header .tr-logo —
 * that positions relative to the full .tr-logo row and clips “THE” at the viewport edge. ImageHero
 * uses a flex bar; keep the asset in normal flow inside .header-logo.
 */
body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo img,
body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo svg {
	max-height: min(72px, 11vw);
	height: auto;
	width: auto;
	display: block;
	margin: 0;
	-o-object-fit: contain;
	object-fit: contain;
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	-webkit-transform: none !important;
	transform: none !important;
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	overflow: visible;
	width: auto !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	/* ascx inline margin-top + cream panel — flat bar for ImageHero */
	margin-top: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	border: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

body.nav-layout-imagehero .nav-wrappper .nav-row .col-md-12 {
	text-align: right;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.12rem clamp(0.25rem, 0.9vw, 0.85rem);
	margin: 0;
	margin-left: auto;
	/* Tiny inline breathing room so pill backgrounds / shadows don’t hit the flex edge */
	padding: 2px clamp(3px, 0.5vw, 8px);
	list-style: none;
	width: auto;
	max-width: 100%;
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta {
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu > a {
	font-family: "Montserrat", system-ui, sans-serif !important;
	font-size: clamp(0.58rem, 0.2vw + 0.52rem, 0.8rem) !important;
	font-weight: 600 !important;
	letter-spacing: clamp(0.05em, 0.1vw + 0.04em, 0.11em) !important;
	text-transform: uppercase !important;
	color: var(--nav-link) !important;
	padding: clamp(0.48em, 0.45vw + 0.38em, 0.75em) clamp(0.52em, 0.75vw + 0.35em, 1.08em) !important;
	border-radius: 999px;
	text-decoration: none !important;
	will-change: transform;
	-webkit-transition: background 0.28s ease, color 0.28s ease, -webkit-box-shadow 0.28s ease, -webkit-transform 0.28s ease;
	transition: background 0.28s ease, color 0.28s ease, -webkit-box-shadow 0.28s ease, -webkit-transform 0.28s ease;
	transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
	transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease, -webkit-box-shadow 0.28s ease, -webkit-transform 0.28s ease;
	line-height: 1.25;
	white-space: nowrap;
	background: transparent;
}

@media screen and (min-width: 1600px) {
	/* .tr-logo max-width removed — was clipping wordmark; wide slot set in ≥1200 block */
	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo img,
	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo svg {
		max-height: min(78px, 12vw);
	}
}

/* Tight desktop ImageHero (single bar; hamburger + drawer <1200px — iPad Pro uses drawer) */
@media screen and (min-width: 1200px) and (max-width: 1580px) {
	body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu > a {
		font-size: clamp(0.56rem, 0.14vw + 0.48rem, 0.72rem) !important;
		padding: clamp(0.42em, 0.35vw + 0.32em, 0.62em) clamp(0.45em, 0.55vw + 0.28em, 0.88em) !important;
	}

	body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul {
		gap: 0.08rem clamp(0.15rem, 0.65vw, 0.55rem);
	}
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu > a.nav-link-active,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu > a[aria-current="page"] {
	background: -webkit-gradient(linear, left top, right top, from(var(--nav-bio-taupe)), to(var(--nav-bio-charcoal))) !important;
	background: linear-gradient(90deg, var(--nav-bio-taupe) 0%, var(--nav-bio-charcoal) 100%) !important;
	-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(94, 87, 82, 0.28);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(94, 87, 82, 0.28);
	color: #ffffff !important;
}

/* Biomarkers-tint hover + lift (exclude Book CTA) */
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu:not(.nav-book-cta) > a:hover,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu:not(.nav-book-cta) > a:focus-visible {
	color: #1a1618 !important;
	background: -webkit-gradient(linear, right top, left top, from(rgba(94, 87, 82, 0.18)), to(rgba(161, 147, 137, 0.2))) !important;
	background: linear-gradient(270deg, rgba(94, 87, 82, 0.18) 0%, rgba(161, 147, 137, 0.2) 100%) !important;
	-webkit-box-shadow: 0 6px 18px rgba(94, 87, 82, 0.14), 0 2px 8px rgba(161, 147, 137, 0.12);
	box-shadow: 0 6px 18px rgba(94, 87, 82, 0.14), 0 2px 8px rgba(161, 147, 137, 0.12);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	outline: none;
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu > a.nav-link-active:hover,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu > a[aria-current="page"]:hover {
	background: -webkit-gradient(linear, left top, right top, from(var(--nav-bio-taupe-hover)), to(var(--nav-bio-charcoal-hover))) !important;
	background: linear-gradient(90deg, var(--nav-bio-taupe-hover) 0%, var(--nav-bio-charcoal-hover) 100%) !important;
	color: #ffffff !important;
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}

/* Book Now — same biomarkers gradient as chips */
/* Book CTA: extra `header` + !important so production / .nav-fixed color rules never flatten the pill */
body.nav-layout-imagehero header .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta > a.nav-book-link,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta > a.nav-book-link {
	display: -webkit-inline-box !important;
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
	min-width: -webkit-max-content !important;
	min-width: max-content !important;
	font-weight: 700 !important;
	letter-spacing: clamp(0.07em, 0.1vw + 0.05em, 0.12em) !important;
	padding: clamp(0.55em, 0.5vw + 0.42em, 0.78em) clamp(0.75em, 1vw + 0.45em, 1.42em) !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	border: none !important;
	background-color: var(--nav-bio-charcoal) !important;
	background: -webkit-gradient(linear, left top, right top, from(var(--nav-bio-taupe)), to(var(--nav-bio-charcoal))) !important;
	background: linear-gradient(90deg, var(--nav-bio-taupe) 0%, var(--nav-bio-charcoal) 100%) !important;
	-webkit-box-shadow: 0 6px 22px rgba(94, 87, 82, 0.32), 0 2px 8px rgba(161, 147, 137, 0.2) !important;
	box-shadow: 0 6px 22px rgba(94, 87, 82, 0.32), 0 2px 8px rgba(161, 147, 137, 0.2) !important;
}

body.nav-layout-imagehero header .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta > a.nav-book-link:hover,
body.nav-layout-imagehero header .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta > a.nav-book-link:focus-visible,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta > a.nav-book-link:hover,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta > a.nav-book-link:focus-visible {
	color: #ffffff !important;
	background: -webkit-gradient(linear, left top, right top, from(var(--nav-bio-taupe-hover)), to(var(--nav-bio-charcoal-hover))) !important;
	background: linear-gradient(90deg, var(--nav-bio-taupe-hover) 0%, var(--nav-bio-charcoal-hover) 100%) !important;
	-webkit-box-shadow: 0 10px 28px rgba(94, 87, 82, 0.38), 0 4px 12px rgba(161, 147, 137, 0.22) !important;
	box-shadow: 0 10px 28px rgba(94, 87, 82, 0.38), 0 4px 12px rgba(161, 147, 137, 0.22) !important;
	-webkit-transform: translateY(-3px) scale(1.02);
	transform: translateY(-3px) scale(1.02);
	outline: none;
}

body.nav-layout-imagehero header .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta > a.nav-book-link:active,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.nav-book-cta > a.nav-book-link:active {
	-webkit-transform: translateY(0) scale(0.99);
	transform: translateY(0) scale(0.99);
}

/* Mobile drawer — same Book treatment (ImageHero); <1200px uses drawer (tablets + iPad Pro) */
@media screen and (max-width: 1199.98px) {
	body.nav-layout-imagehero #mobile-nav li.nav-book-mobile > a.nav-book-link {
		display: inline-block;
		margin-top: 0.35rem;
		padding: 0.65rem 1.35rem !important;
		border-radius: 999px !important;
		font-family: "Montserrat", system-ui, sans-serif !important;
		font-weight: 700 !important;
		letter-spacing: 0.1em !important;
		text-transform: uppercase !important;
		color: #fff !important;
		background: -webkit-gradient(linear, left top, right top, from(var(--nav-bio-taupe)), to(var(--nav-bio-charcoal))) !important;
		background: linear-gradient(90deg, var(--nav-bio-taupe) 0%, var(--nav-bio-charcoal) 100%) !important;
		-webkit-box-shadow: 0 6px 18px rgba(94, 87, 82, 0.28);
		box-shadow: 0 6px 18px rgba(94, 87, 82, 0.28);
		-webkit-transition: -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
		transition: -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		transition: transform 0.25s ease, box-shadow 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
	}

	body.nav-layout-imagehero #mobile-nav li.nav-book-mobile > a.nav-book-link:hover,
	body.nav-layout-imagehero #mobile-nav li.nav-book-mobile > a.nav-book-link:focus-visible {
		-webkit-transform: translateY(-2px) scale(1.02);
		transform: translateY(-2px) scale(1.02);
		-webkit-box-shadow: 0 10px 24px rgba(94, 87, 82, 0.36);
		box-shadow: 0 10px 24px rgba(94, 87, 82, 0.36);
	}
}

/* Mega dropdown: centered panel + stacked utility bar (fixes old 315px gap hack) */
body.nav-layout-imagehero .nav-wrappper li.main-menu.have-children {
	position: relative;
}

/*
 * padding-top = hover bridge; center wide mega under each trigger (avoids viewport clip).
 * IMPORTANT: only apply display:flex when the parent li is :hover — an unqualified
 * display:flex !important here overrides NavBar.ascx display:none and leaves every
 * .custom-submenu-bar from all megas visible (stacked / “duplicate” black strip).
 */
body.nav-layout-imagehero .nav-wrappper li.main-menu.have-children:hover .submenu-hover-wrapper {
	top: 100%;
	left: 50% !important;
	right: auto !important;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	/* Extra horizontal margin so panel + shadow stay inside body (overflow-x: hidden) */
	width: min(1024px, calc(100vw - 40px)) !important;
	max-width: calc(100vw - 40px);
	margin-top: 0 !important;
	/* Tight to nav (was 18px gap); keep a few px for hover bridge */
	padding-top: 5px !important;
	padding-bottom: 0 !important;
	z-index: 2200;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	-ms-flex-direction: column !important;
	flex-direction: column !important;
	-webkit-box-align: stretch !important;
	-ms-flex-align: stretch !important;
	align-items: stretch !important;
	position: absolute;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	isolation: isolate;
}

/*
 * Mega horizontal position: desktop uses JS (custom.js) fixed + viewport clamp so wide panels
 * are not clipped by header/body — CSS fallbacks below when JS off.
 * DOM order: 1 About, 2 Test, 3 Invasive, 4 Non-invasive, … Book.
 */
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.have-children:nth-child(2):hover .submenu-hover-wrapper {
	left: 0 !important;
	right: auto !important;
	-webkit-transform: none !important;
	transform: none !important;
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.have-children:nth-child(4):hover .submenu-hover-wrapper {
	left: auto !important;
	right: 0 !important;
	-webkit-transform: none !important;
	transform: none !important;
}

@media screen and (max-width: 1280px) {
	body.nav-layout-imagehero .nav-wrappper li.main-menu.have-children:hover .submenu-hover-wrapper {
		width: min(960px, calc(100vw - 40px)) !important;
	}
}

@media screen and (max-width: 1100px) {
	body.nav-layout-imagehero .nav-wrappper li.main-menu.have-children:hover .submenu-hover-wrapper {
		width: calc(100vw - 40px) !important;
		max-width: calc(100vw - 40px) !important;
	}
}

/*
 * Dropdown chevrons: li.main-menu > a uses padding shorthand with !important, which was
 * overriding the weaker header nav li.have-children padding-right — icon merged into text.
 */
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.have-children > a,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.has-child > a {
	position: relative !important;
	padding-right: clamp(2rem, 0.85vw + 1.65rem, 3.05rem) !important;
}

body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.have-children > a::after,
body.nav-layout-imagehero .nav-wrappper .row.nav-row nav > ul > li.main-menu.has-child > a::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	right: clamp(0.55rem, 0.8vw + 0.35rem, 0.95rem) !important;
	top: 50% !important;
	-webkit-transform: translateY(-50%) !important;
	transform: translateY(-50%) !important;
	width: 14px !important;
	height: 14px !important;
	background-image: url("../image/svg/down-arrow-colord.svg") !important;
	background-size: 14px !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	pointer-events: none;
}

body.nav-layout-imagehero header nav .have-children:hover .sub-nav {
	/* style.css uses position:absolute — pulls panel out of flex so .custom-submenu-bar stacks wrong */
	position: relative !important;
	left: auto !important;
	top: auto !important;
	width: 100% !important;
	-ms-flex-negative: 0 !important;
	flex-shrink: 0 !important;
	z-index: 1;
	height: auto !important;
	max-height: min(68vh, 580px) !important;
	min-height: 260px;
	padding: 26px 28px 22px !important;
	border-radius: 16px 16px 0 0 !important;
	background: #fdfcfa !important;
	border: 1px solid rgba(0, 0, 0, 0.07) !important;
	-webkit-box-shadow: 0 28px 56px rgba(0, 0, 0, 0.16);
	box-shadow: 0 28px 56px rgba(0, 0, 0, 0.16);
	overflow-y: auto;
	overflow-x: hidden;
}

body.nav-layout-imagehero header nav .have-children .sub-nav .sub-nav-child-wrapper {
	height: auto !important;
	max-height: min(60vh, 500px) !important;
	padding: 6px 2px !important;
}

body.nav-layout-imagehero header nav .have-children .sub-nav .sub-nav-hav-children > a {
	-webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* Mega menu columns — breathing room + readability (ImageHero only) */
body.nav-layout-imagehero header nav .have-children .sub-nav .sub-nav-hav-children .sub-nav-child ul {
	padding-top: 14px !important;
	padding-left: 2.5rem !important;
	-webkit-column-gap: 2.5rem;
	-moz-column-gap: 2.5rem;
	column-gap: 2.5rem;
}

body.nav-layout-imagehero header nav .have-children .sub-nav .sub-nav-hav-children .sub-nav-child ul li {
	padding-bottom: 0.85rem !important;
	line-height: 1.55 !important;
}

body.nav-layout-imagehero header nav .have-children .sub-nav .sub-nav-hav-children .sub-nav-child a {
	line-height: 1.55 !important;
	font-size: 13px !important;
	letter-spacing: 0.1em !important;
	padding: 0.25em 0 !important;
	display: inline-block;
}

/* Absolute columns were painting over the dark utility bar — clip to mega panel */
body.nav-layout-imagehero header nav .have-children .sub-nav .sub-nav-hav-children .sub-nav-child {
	max-height: min(52vh, 440px) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

body.nav-layout-imagehero .nav-wrappper .custom-submenu-bar {
	position: relative !important;
	z-index: 2 !important;
	-ms-flex-negative: 0 !important;
	flex-shrink: 0 !important;
	-webkit-box-ordinal-group: 3 !important;
	-ms-flex-order: 2 !important;
	order: 2 !important;
	border-radius: 0 0 16px 16px !important;
	/* Inner .container uses Bootstrap py-3 — zero that below so strip isn’t oversized */
	padding: 8px 16px !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

body.nav-layout-imagehero .nav-wrappper .custom-submenu-bar .container {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.nav-layout-imagehero .nav-wrappper .custom-submenu-bar .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-webkit-box-pack: justify !important;
	-ms-flex-pack: justify !important;
	justify-content: space-between !important;
	width: 100%;
}

body.nav-layout-imagehero .nav-wrappper .custom-submenu-bar .btn-custom {
	padding: 6px 18px !important;
}

body.nav-layout-imagehero .nav-wrappper .custom-submenu-bar .custom-submenu-input {
	padding: 6px 16px !important;
	max-width: min(220px, calc(100vw - 200px)) !important;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* “FOR YOU” flyout — shrink-wrap outer wrapper (avoids empty “ghost” box + shadow), wide enough for one-line labels */
body.nav-layout-imagehero header nav li.has-child {
	position: relative;
}

body.nav-layout-imagehero header nav .has-child .sub-menu-container-2 {
	top: 100% !important;
	left: auto !important;
	right: 0 !important;
	-webkit-transform: none;
	transform: none;
	padding-top: 10px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	width: -webkit-max-content !important;
	width: -moz-max-content !important;
	width: max-content !important;
	max-width: min(360px, calc(100vw - 24px)) !important;
	min-width: 0 !important;
	overflow: visible !important;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body.nav-layout-imagehero header nav .has-child:hover .sub-menu-container-2 {
	z-index: 2250 !important;
}

body.nav-layout-imagehero header nav .has-child .sub-menu-container-2 .sub-menu-2 {
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	min-width: 220px !important;
	max-width: none !important;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 14px !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	-webkit-box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
	background: #fdfcfa !important;
	padding: 14px 20px !important;
}

body.nav-layout-imagehero header nav .has-child .sub-menu-container-2 .sub-menu-2 li a {
	white-space: nowrap !important;
}

body.nav-layout-imagehero header.home {
	/* Hero clears the fixed bar via .home-hero-image-wrap top/margin — header padding would double the band on <1200 (relative hero). */
	padding-top: 0;
	/* Do not use overflow:hidden on header: it clips the scroll mouse animation; clip media on .home-hero-image-wrap. */
	overflow: visible;
	background-color: #ffffff;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Tablet / iPad: header height follows hero art — drop forced full viewport (was huge letterboxing) */
@media screen and (max-width: 1199.98px) {
	body.nav-layout-imagehero header.home {
		min-height: 0 !important;
		padding-bottom: clamp(1.75rem, 5vw, 2.75rem);
	}
}

body.nav-layout-imagehero header.inner-page {
	padding-top: var(--nav-fixed-offset);
}

/*
 * Inner pages: nav is fixed + header already uses padding-top for offset. Legacy style.css adds
 * margin-top: 42px on .banner-content-wrapper — reads as a white gap under the bar in prod.
 */
body.nav-layout-imagehero header.inner-page .banner-content-wrapper {
	margin-top: 0 !important;
}

body.nav-layout-imagehero header.specialist-single-header .banner-content-wrapper {
	margin-top: 0 !important;
}

/* Blog/Gallery: inline .category-buttons { padding-top: 100px } was for old layout — flush under hero */
body.nav-layout-imagehero .category-buttons {
	padding-top: 1rem !important;
}

/*
 * Legacy VideoHero mega: header.wrapper-nav-mega adds ::before (550px #f4efec) + ::after.
 * On ImageHero that reads as a huge beige band under the white bar when a mega is open.
 */
body.nav-layout-imagehero header.wrapper-nav-mega::before,
body.nav-layout-imagehero header.wrapper-nav-mega::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

body.nav-layout-imagehero header.wrapper-nav-mega .nav-fixed::before,
body.nav-layout-imagehero header.wrapper-nav-mega .nav-fixed::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

@media screen and (min-width: 1200px) {
	body.nav-layout-imagehero .nav-wrappper {
		padding-top: clamp(0.62rem, 1.15vw, 1.2rem);
		padding-bottom: clamp(0.62rem, 1.15vw, 1.2rem);
		padding-left: clamp(18px, 2.4vw, 44px);
		padding-right: clamp(18px, 2.4vw, 44px);
	}

	body.nav-layout-imagehero .mobile-nav-wrapper {
		display: none !important;
	}

	body.nav-layout-imagehero header .nav-row {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
	}

	/* Full-width bar: logo flush left, menu flush right — beat global .container max-width caps */
	body.nav-layout-imagehero .nav-wrappper > .container.nav-inner-pro {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		column-gap: clamp(0.75rem, 2vw, 2.25rem);
		row-gap: 0;
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: visible !important;
	}

	/*
	 * Desktop logo: style.css gives header.home { overflow:hidden } — clips the fixed bar / row edges.
	 * Wide wordmark also hit max-width caps on .tr-logo / .header-logo.
	 */
	body.nav-layout-imagehero header.home {
		overflow: visible !important;
	}

	body.nav-layout-imagehero .nav-wrappper {
		overflow: visible !important;
		overflow-x: visible !important;
	}

	body.nav-layout-imagehero .nav-wrappper .row.tr-logo {
		z-index: 2;
		pointer-events: auto;
		max-width: none !important;
		-webkit-box-flex: 0 !important;
		-ms-flex: 0 0 auto !important;
		flex: 0 0 auto !important;
		-ms-flex-negative: 0 !important;
		flex-shrink: 0 !important;
		min-width: auto !important;
		width: auto !important;
	}

	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo {
		max-width: min(440px, 40vw) !important;
		min-width: min-content !important;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo a {
		min-width: min-content !important;
	}

	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo img,
	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo svg {
		max-width: min(440px, 40vw) !important;
		max-height: min(72px, 11vw) !important;
		width: auto !important;
		height: auto !important;
		display: block;
		-o-object-fit: contain;
		object-fit: contain;
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		-webkit-transform: none !important;
		transform: none !important;
	}

	body.nav-layout-imagehero .nav-wrappper .row.nav-row {
		min-width: 0;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}
}

@media screen and (min-width: 1600px) {
	body.nav-layout-imagehero .nav-wrappper {
		padding-left: clamp(20px, 2.6vw, 56px);
		padding-right: clamp(20px, 2.6vw, 56px);
	}

	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo {
		max-width: min(500px, 38vw) !important;
	}
}

@media screen and (max-width: 1199.98px) {
	/*
	 * Checkbox toggle: style.css sets #menyAvPaa { display:none } only inside @media (max-width:768px).
	 * ImageHero drawer runs below 1200px — without this, the native box shows on tablet when the drawer breakpoint is <1200.
	 */
	body.nav-layout-imagehero #menyAvPaa {
		display: none !important;
	}

	/* Mobile / tablet bar: equal vertical padding, logo optically centred (not stuck to top) */
	body.nav-layout-imagehero .nav-wrappper {
		padding: clamp(0.65rem, 2.2vw, 1rem) max(14px, env(safe-area-inset-left)) clamp(0.65rem, 2.2vw, 1rem) max(14px, env(safe-area-inset-right)) !important;
	}

	body.nav-layout-imagehero .nav-wrappper .row.nav-row {
		display: none !important;
	}

	/*
	 * Flex centres the logo row vertically; beats NavBar.ascx inline padding-top on .tr-logo.
	 * Burger stays position:absolute — vertical centre matches this box.
	 */
	body.nav-layout-imagehero .nav-wrappper > .container.nav-inner-pro {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		min-height: clamp(3.35rem, 11vw + 2rem, 4.35rem);
	}

	/*
	 * True center: logo row spans full bar; burger stays absolute left (higher z-index).
	 * No left padding hack — wordmark sits in optical center of viewport.
	 */
	body.nav-layout-imagehero .nav-wrappper .row.tr-logo {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
		padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin: 0 !important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		z-index: 0 !important;
		pointer-events: none;
	}

	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo {
		margin: 0 auto !important;
		text-align: center;
		pointer-events: auto;
	}

	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo a {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		pointer-events: auto;
	}

	/* Smaller wordmark on narrow phones; scales up through tablet */
	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo img {
		max-height: clamp(34px, 9.5vw, 52px);
		height: auto;
		width: auto;
		max-width: min(240px, calc(100vw - 5.5rem));
	}

	body.nav-layout-imagehero header .tr-logo {
		padding: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		background-color: transparent !important;
	}

	/*
	 * Do not use transform on this wrapper: it makes #mobile-nav (position:fixed) resolve against
	 * a tiny box. Pin burger to the left like VideoHero (#burger { left: 1rem } pattern).
	 */
	body.nav-layout-imagehero .mobile-nav-wrapper {
		display: block !important;
		position: absolute;
		left: max(4px, env(safe-area-inset-left));
		right: auto;
		top: 50%;
		margin-top: -0.75rem;
		-webkit-transform: none !important;
		transform: none !important;
		width: auto;
		z-index: 10025 !important;
		pointer-events: auto;
	}

	body.nav-layout-imagehero #burger,
	body.nav-layout-imagehero label#burger {
		position: relative;
		left: 0;
		top: 0;
		margin: 0;
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 2.25rem;
		min-width: 2.25rem;
		height: 1.65rem;
		min-height: 1.65rem;
		cursor: pointer;
		z-index: 10026 !important;
		opacity: 1 !important;
		visibility: visible !important;
		-webkit-tap-highlight-color: transparent;
		-webkit-filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
		filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
	}

	body.nav-layout-imagehero #burger > div {
		background-color: #2a2426 !important;
		height: 3px !important;
		min-height: 3px !important;
		border-radius: 2px !important;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	/*
	 * Global mobile menu uses z-index: 3 when open; ImageHero .nav-wrappper is z-index: 2000,
	 * so the drawer sits behind the fixed bar and looks “cut off”. Pin overlay + burger above nav.
	 */
	/*
	 * Critical: style.css only sets #mobile-nav { position:fixed; display:none; opacity:0 } inside @media (max-width:768px).
	 * ImageHero: between 769–1199px the drawer must stay fixed (same class of bug as wider tablets).
	 */
	body.nav-layout-imagehero #mobile-nav {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		height: 100vh !important;
		min-height: 100dvh !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		-webkit-box-sizing: border-box !important;
		box-sizing: border-box !important;
		background: #f5efec;
		z-index: -1 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		display: none !important;
		-webkit-transition: opacity 0.35s ease;
		transition: opacity 0.35s ease;
	}

	body.nav-layout-imagehero #menyAvPaa:checked ~ #mobile-nav {
		z-index: 10050 !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		display: block !important;
	}

	body.nav-layout-imagehero #menyAvPaa:checked ~ #burger {
		z-index: 10060 !important;
		position: fixed !important;
		left: max(12px, env(safe-area-inset-left)) !important;
		right: auto !important;
		top: max(1rem, env(safe-area-inset-top)) !important;
		background: rgba(255, 255, 255, 0.97) !important;
		border-radius: 12px !important;
		padding: 0.65rem 0.55rem !important;
		height: auto !important;
		min-height: 2.5rem !important;
		-webkit-box-sizing: border-box !important;
		box-sizing: border-box !important;
		-webkit-filter: none !important;
		filter: none !important;
		-webkit-box-shadow: 0 6px 24px rgba(42, 36, 38, 0.18) !important;
		box-shadow: 0 6px 24px rgba(42, 36, 38, 0.18) !important;
	}

	body.nav-layout-imagehero #menyAvPaa:checked ~ #burger > div {
		background-color: #2a2426 !important;
	}

	body.nav-layout-imagehero #mobile-nav > ul {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding-top: max(4.5rem, calc(env(safe-area-inset-top) + 3rem));
		padding-left: max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		height: 100%;
		list-style: none;
		-webkit-box-orient: vertical !important;
		-webkit-box-direction: normal !important;
		-ms-flex-direction: column !important;
		flex-direction: column !important;
		-webkit-box-align: stretch !important;
		-ms-flex-align: stretch !important;
		align-items: stretch !important;
		-webkit-box-pack: start !important;
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		-ms-flex-wrap: nowrap !important;
		flex-wrap: nowrap !important;
	}

	/* Hero: no forced 100vh shell — offset lives on .home-hero-image-wrap (margin-top) so no strip under the bar */
	body.nav-layout-imagehero header.home {
		padding-top: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible;
	}
}

/* XS: tighter wordmark cap (centering comes from absolute .tr-logo block above) */
@media screen and (max-width: 575.98px) {
	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo img {
		max-width: min(220px, calc(100vw - 4.5rem));
	}
}

@media screen and (min-width: 576px) and (max-width: 1199.98px) {
	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo img {
		max-height: clamp(40px, 7vw, 58px);
		max-width: min(280px, calc(100vw - 6rem));
	}
}

@media screen and (min-width: 768px) and (max-width: 1199.98px) {
	body.nav-layout-imagehero .nav-wrappper .tr-logo .header-logo img {
		max-height: clamp(44px, 6.5vw, 64px);
		max-width: min(300px, 68vw);
	}
}

/* ========== ImageHero: campaign hero — contrast, CTA placement, less clutter ========== */
/* Start hero media below fixed nav — padding on header does not move absolute children */
body.nav-layout-imagehero header.home .home-hero-image-wrap {
	position: absolute;
	left: 0;
	top: var(--nav-fixed-offset);
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;
	/* Letterboxing when full artwork is fit with object-fit: contain */
	background-color: #f4f1ec;
}

/*
 * Campaign art: slight rightward focal shift so the main block sits under the right-hand nav
 * (FOR YOU / Book) and doesn’t hug the viewport left; keeps book / list art from clipping right.
 */
body.nav-layout-imagehero header.home .home-hero-image-wrap #myVideo {
	position: absolute;
	left: clamp(10px, 3.5vw, 48px);
	right: clamp(10px, 3.5vw, 48px);
	top: 0;
	bottom: 0;
	width: auto;
	max-width: 100%;
	height: 100%;
	margin: 0 auto;
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: 52% 50%;
	object-position: 52% 50%;
	z-index: 0;
	display: block;
}

/* Base veil: soft lift on the left for type; center stays mostly clear (0.94 center was washing the whole hero) */
body.nav-layout-imagehero header.home .home-hero-image-wrap::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: -webkit-radial-gradient(28% 48%, ellipse 55% 65%, rgba(252, 250, 247, 0.38) 0%, rgba(252, 250, 247, 0.16) 42%, rgba(252, 250, 247, 0.05) 62%, transparent 78%),
		-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(45%, rgba(0, 0, 0, 0.04)), to(rgba(0, 0, 0, 0.26)));
	background: radial-gradient(ellipse 55% 65% at 28% 48%, rgba(252, 250, 247, 0.38) 0%, rgba(252, 250, 247, 0.16) 42%, rgba(252, 250, 247, 0.05) 62%, transparent 78%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.04) 45%, rgba(0, 0, 0, 0.26) 100%);
}

/*
 * Bottom “black strip” / vignette — matches video hero foot (darker band at banner base).
 * Sits above ::after so the lower third reads clearly even on light artwork.
 */
body.nav-layout-imagehero header.home .home-hero-image-wrap::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: min(42vh, 320px);
	z-index: 2;
	pointer-events: none;
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.62)), color-stop(35%, rgba(0, 0, 0, 0.28)), to(rgba(0, 0, 0, 0)));
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 35%, rgba(0, 0, 0, 0) 100%);
}

/*
 * ImageHero home: hide video-style banner (typing + Book) only — keep scroll mouse like VideoHero.
 */
body.nav-layout-imagehero header.home > .container {
	display: none !important;
}

/*
 * Scroll mouse: desktop par hero wrap absolute hai, isliye sirf <a> flow me reh kar collapse ho jata tha.
 * Header ke bottom se anchor absolute karo — mobile + desktop + tablet sab par same spot.
 */
body.nav-layout-imagehero header.home {
	position: relative;
}

body.nav-layout-imagehero header.home > a[href="#about-us"] {
	display: block !important;
	position: absolute !important;
	left: 0;
	right: 0;
	/* Clear mega .custom-submenu-bar (~72px) + safe area; was too low and read as “cut off” on deploy */
	bottom: calc(clamp(52px, 10vh, 120px) + env(safe-area-inset-bottom, 0px));
	z-index: 15;
	/* Room for .scroll-down (taller) + ::after (-20px) + translate animation */
	min-height: 78px;
	height: 78px;
	text-align: center;
	text-decoration: none;
	pointer-events: auto;
}

body.nav-layout-imagehero header.home .scroll-down {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 34px !important;
	height: 54px !important;
	border-width: 2px !important;
	border-radius: 22px !important;
	border-color: rgba(255, 255, 255, 0.92);
}

body.nav-layout-imagehero header.home .scroll-down::before {
	background-color: rgba(255, 255, 255, 0.95);
	top: 12px !important;
	height: 9px !important;
	width: 3px !important;
}

body.nav-layout-imagehero header.home .scroll-down::after {
	bottom: -18px !important;
}

/*
 * ImageHero <1200 — hero height tracks intrinsic image aspect ratio (no tall min-height / letterbox bands).
 */
@media screen and (max-width: 1199.98px) {
	body.nav-layout-imagehero .nav-wrappper {
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
		right: 0 !important;
	}

	body.nav-layout-imagehero header.home {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.nav-layout-imagehero header.home .home-hero-image-wrap {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
		position: relative !important;
		overflow: hidden;
		background-color: #f4f1ec;
		margin-top: var(--nav-fixed-offset) !important;
		margin-bottom: 0 !important;
	}

	body.nav-layout-imagehero header.home .home-hero-image-wrap #myVideo {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
		-o-object-fit: contain !important;
		object-fit: contain !important;
		-o-object-position: center center !important;
		object-position: center center !important;
	}

	/* Lighter foot gradient on tablet so less “grey slab” under the art */
	body.nav-layout-imagehero header.home .home-hero-image-wrap::before {
		height: min(24vh, 160px) !important;
	}

	/* Home About: single column so iPad portrait isn’t squeezed two-up */
	body.nav-layout-imagehero .home-aboutus-section .about-us-row > [class*="col-md-"] {
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}