/**
 * Header: frosted sticky bar, logo-blade underline, category-colored dropdowns,
 * "Upload DICOM" call to action and the mobile menu.
 *
 * Menu item CSS classes (Appearance > Menus > CSS Classes):
 *   b3d-menu-cta   — call-to-action button (Upload DICOM)
 *   b3d-menu-bio   — Bioengineering: cyan accents in its dropdown
 *   b3d-menu-rehab — Rehabilitation: pink accents in its dropdown
 */

/* ---------- Sticky state ---------- */

.masthead.sticky-on,
.masthead.sticky-on .header-bar {
	transition: background-color var(--b3d-dur) var(--b3d-ease), box-shadow var(--b3d-dur) var(--b3d-ease);
}

/* Beats The7's ".phantom-sticky .sticky-on.masthead:not(.masthead-mobile)" (white, !important) */
body.phantom-sticky .masthead.sticky-on:not(.masthead-mobile),
.masthead.sticky-on:not(.masthead-mobile) {
	background-color: rgba(255, 255, 255, .86) !important;
	/* thin logo strip along the bottom edge: cyan stem, pink bowl */
	background-image: var(--b3d-strip) !important;
	background-size: 100% 2px !important;
	background-position: left bottom !important;
	background-repeat: no-repeat !important;
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 10px 30px rgba(15, 35, 45, .08) !important;
}

/* ---------- Logo: fixed heights that fit every header state ----------
 * Desktop header 90px, sticky 60px, mobile header 60px (The7 options).
 * Logo image ratio is ~2.34:1, so height drives the size. */

/* position/display are set by The7 with higher specificity; the glint below
 * needs the link itself as its box */
.masthead .branding > a {
	position: relative !important;
	display: inline-block !important;
	max-width: none !important;
	transform-origin: left center;
	transition: transform var(--b3d-dur) var(--b3d-ease);
}

/* Larger at the top of the page, smaller in the sticky bar */
.masthead .branding img {
	width: auto !important;
	max-width: none !important;
	height: 66px !important;
	transition: height var(--b3d-dur) var(--b3d-ease);
}

/* Hover: the logo lifts a little and a light glint sweeps across it.
 * The glint is masked by the logo image itself (--b3d-logo-mask, set by brand.js),
 * so only the logo shape lights up. */
.masthead .branding > a:hover {
	transform: translateY(-1px) scale(1.03);
}

.masthead .branding > a::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
	/* The7 gives the link 48px right padding: pin the mask to the image (left, full height) */
	-webkit-mask: var(--b3d-logo-mask, none) left center / auto 100% no-repeat;
	mask: var(--b3d-logo-mask, none) left center / auto 100% no-repeat;
	opacity: 0;
}

.masthead .branding > a:hover::after {
	animation: b3dLogoGlint .9s var(--b3d-ease) both;
}

@keyframes b3dLogoGlint {
	from { opacity: 1; background-position: 150% 0; }
	to { opacity: 1; background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.masthead .branding > a:hover { transform: none; }
	.masthead .branding > a:hover::after { animation: none; }
}

.masthead.sticky-on .branding img {
	height: 42px !important;
}

.masthead .mobile-branding a,
.masthead .mobile-branding img {
	width: auto !important;
	max-width: none !important;
}

.masthead .mobile-branding img {
	height: 40px !important;
}

/* ---------- Top-level menu ---------- */

/* The nav stretches across the bar; push its items to the right edge */
.masthead .header-bar > .main-nav {
	justify-content: flex-end !important;
	align-items: center;
}

/* Top level in capitals */
.masthead .main-nav > li > a .menu-text {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: color var(--b3d-dur-fast) var(--b3d-ease);
}

.masthead.sticky-on .main-nav > li:not(.b3d-menu-cta) > a .menu-text {
	color: var(--b3d-text) !important;
}

.masthead.sticky-on .main-nav > li:not(.b3d-menu-cta):is(:hover, .act, .current-menu-item) > a .menu-text {
	color: var(--b3d-ink) !important;
}

/* Chevron after items that have a dropdown. Inline-block keeps the text's
 * line box unchanged, so the underline sits at the same height everywhere. */
.masthead .main-nav > li.has-children > a .menu-text::after {
	content: "";
	display: inline-block;
	margin-left: 6px;
	vertical-align: 1px;
	width: 10px;
	height: 10px;
	background: currentColor;
	opacity: .7;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 3.5 3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 3.5 3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--b3d-dur) var(--b3d-ease), opacity var(--b3d-dur-fast);
}

.masthead .main-nav > li.has-children:is(:hover, .dt-hovered) > a .menu-text::after {
	opacity: 1;
	transform: rotate(180deg);
}

/* Underline = the two logo blades (shared --b3d-blades bar, 3px high).
 * The7 animates its width from the left, like every other blade bar. */
.masthead .main-nav > li > a .underline {
	height: 3px !important;
	border-radius: 0 !important;
	background: linear-gradient(90deg,
		var(--b3d-logo-cyan) 0 calc(100% - 15px),
		transparent calc(100% - 15px) calc(100% - 11px),
		var(--b3d-pink) calc(100% - 11px) 100%) !important;
	transform: var(--b3d-blade-skew);
	transform-origin: left bottom;
}

/* ---------- Dropdowns ---------- */

.masthead .main-nav .sub-nav {
	--accent: var(--b3d-logo-cyan);
	--accent-50: var(--b3d-logo-cyan-50);
	padding: 12px 8px 8px !important;
	border-radius: 14px !important;
	border: 1px solid var(--b3d-line);
	/* top strip in the logo colors */
	background:
		linear-gradient(115deg, var(--b3d-logo-cyan) 0 70%, var(--b3d-pink) 70% 100%) top / 100% 3px no-repeat,
		#fff !important;
	box-shadow: 0 18px 44px rgba(15, 35, 45, .14), 0 2px 6px rgba(15, 35, 45, .06) !important;
}

.masthead .main-nav > li.b3d-menu-rehab .sub-nav {
	--accent: var(--b3d-pink);
	--accent-50: var(--b3d-pink-50);
	background:
		linear-gradient(115deg, var(--b3d-pink) 0 70%, var(--b3d-logo-cyan) 70% 100%) top / 100% 3px no-repeat,
		#fff !important;
}

.masthead .main-nav .sub-nav > li > a {
	position: relative;
	border-radius: 9px;
	padding: 10px 14px !important;
	transition: background-color var(--b3d-dur-fast) var(--b3d-ease), padding var(--b3d-dur) var(--b3d-ease);
}

.masthead .main-nav .sub-nav > li > a .menu-text {
	color: var(--b3d-text) !important;
	font-size: 15px;
	font-weight: 500;
}

/* Mini accent blade slides in on hover */
.masthead .main-nav .sub-nav > li > a::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 6px;
	height: 16px;
	background: var(--accent);
	clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%);
	opacity: 0;
	transform: translate(-6px, -50%);
	transition: opacity var(--b3d-dur-fast) var(--b3d-ease), transform var(--b3d-dur) var(--b3d-ease);
}

.masthead .main-nav .sub-nav > li > a:hover,
.masthead .main-nav .sub-nav > li.act > a,
.masthead .main-nav .sub-nav > li.dt-hovered > a {
	background-color: var(--accent-50) !important;
	padding-left: 28px !important;
}

.masthead .main-nav .sub-nav > li > a:hover::before,
.masthead .main-nav .sub-nav > li.act > a::before,
.masthead .main-nav .sub-nav > li.dt-hovered > a::before {
	opacity: 1;
	transform: translate(0, -50%);
}

.masthead .main-nav .sub-nav > li > a:hover .menu-text,
.masthead .main-nav .sub-nav > li.act > a .menu-text,
.masthead .main-nav .sub-nav > li.dt-hovered > a .menu-text {
	color: var(--b3d-ink) !important;
}

/* Chevron on dropdown items that open a 3rd level.
 * The7 draws it as a mask on a::after and paints it with the submenu colour
 * (white here, so it was invisible) — tint it instead: grey, accent on hover. */
.masthead .main-nav .sub-nav > li.has-children {
	position: relative;
}

.masthead .main-nav .sub-nav > li.has-children > a::after {
	background-color: var(--b3d-muted) !important;
	transition: background-color var(--b3d-dur-fast) var(--b3d-ease), transform var(--b3d-dur) var(--b3d-ease);
}

.masthead .main-nav .sub-nav > li.has-children > a:hover::after,
.masthead .main-nav .sub-nav > li.has-children.dt-hovered > a::after {
	background-color: var(--accent) !important;
	transform: translateX(2px);
}

/* Near the right edge The7 opens the 3rd level to the left (.right-overflow):
 * the chevron then points left too */
.masthead .main-nav .sub-nav > li.has-children:has(> .sub-nav.right-overflow) > a::after {
	transform: scaleX(-1);
}

.masthead .main-nav .sub-nav > li.has-children:has(> .sub-nav.right-overflow):is(:hover, .dt-hovered) > a::after {
	transform: translateX(-2px) scaleX(-1);
}

/* Invisible bridge over the gap to the 3rd-level panel, so the pointer never
 * leaves the item on its way there and the panel doesn't close. */
.masthead .main-nav .sub-nav > li.has-children::after {
	content: "";
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: 100%;
	width: 32px;
}

/* ---------- CTA: "Upload DICOM" ---------- */

.masthead .main-nav > li.b3d-menu-cta {
	align-self: center;
}

.masthead .main-nav > li.b3d-menu-cta > a {
	display: inline-flex !important;
	align-items: center;
	box-sizing: border-box;
	height: 44px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 22px 0 18px !important;
	line-height: 1 !important;
	border-radius: 999px;
	background: var(--b3d-gradient) !important;
	box-shadow: 0 6px 16px rgba(10, 169, 180, .3);
	transition: transform var(--b3d-dur) var(--b3d-ease), box-shadow var(--b3d-dur) var(--b3d-ease);
}

.masthead .main-nav > li.b3d-menu-cta > a .menu-item-text {
	display: flex !important;
	align-items: center;
	height: 100%;
	line-height: 1 !important;
}

.masthead .main-nav > li.b3d-menu-cta > a .menu-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1 !important;
	color: #fff !important;
	font-weight: 600 !important;
}

/* Upload icon (desktop and mobile menu) */
.dt-mobile-header .mobile-main-nav > li.b3d-menu-cta > a .menu-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.masthead .main-nav > li.b3d-menu-cta > a .menu-text::before,
.dt-mobile-header .mobile-main-nav > li.b3d-menu-cta > a .menu-text::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 13V3m0 0L6 7m4-4 4 4M4 13v2.5A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5V13' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 13V3m0 0L6 7m4-4 4 4M4 13v2.5A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5V13' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--b3d-dur) var(--b3d-ease);
}

.masthead .main-nav > li.b3d-menu-cta > a:hover .menu-text::before {
	transform: translateY(-2px);
}

.masthead .main-nav > li.b3d-menu-cta > a .underline {
	display: none;
}

.masthead .main-nav > li.b3d-menu-cta > a:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(10, 169, 180, .4);
}

/* Sticky bar is 60px: 38px button, no outer margins */
.masthead.sticky-on .main-nav > li.b3d-menu-cta > a {
	height: 38px;
	padding: 0 18px 0 15px !important;
}

/* ---------- Medium desktops (above the burger switch at 992px) ---------- */

@media (max-width: 1279px) {
	.masthead .main-nav > li:not(.b3d-menu-cta) > a {
		margin-left: 14px !important;
		margin-right: 0 !important;
	}

	.masthead .main-nav > li > a .menu-text {
		font-size: 12.5px !important;
		letter-spacing: .04em;
	}

	.masthead .branding img {
		height: 56px !important;
	}

	.masthead .main-nav > li.b3d-menu-cta > a {
		margin-left: 16px !important;
		padding: 0 16px 0 14px !important;
	}
}

@media (max-width: 1150px) {
	.masthead .main-nav > li:not(.b3d-menu-cta) > a {
		margin-left: 10px !important;
	}

	.masthead .main-nav > li > a .menu-text {
		font-size: 12px !important;
		letter-spacing: .03em;
	}

	.masthead .branding img {
		height: 48px !important;
	}

	/* icon-only width saving */
	.masthead .main-nav > li.b3d-menu-cta > a .menu-text::before {
		display: none;
	}
}

/* Former cyan box behind the header widgets */
.inline-header .header-bar > .mini-widgets {
	background: transparent !important;
}

/* ---------- Mobile header (below 992px) ---------- */

/* Burger: rounded glass button; three lines of different length (the middle
 * one pink, like the bowl of the logo "b") that even out on hover.
 * The7 paints the button and lines with very specific !important rules on
 * pseudo-elements, so those are switched off and everything is drawn on the
 * element itself and on .lines-button, which The7 leaves alone. */
.dt-mobile-menu-icon {
	width: 46px !important;
	height: 46px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .22) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, .08) !important;
	transition: background-color var(--b3d-dur-fast) var(--b3d-ease), border-color var(--b3d-dur-fast) var(--b3d-ease), transform var(--b3d-dur) var(--b3d-ease) !important;
}

.dt-mobile-menu-icon::before,
.dt-mobile-menu-icon::after,
.dt-mobile-menu-icon .menu-line {
	display: none !important;
}

.dt-mobile-menu-icon .lines-button {
	display: block !important;
	width: 22px !important;
	height: 16px !important;
	--l1: #fff;
	--l2: var(--b3d-pink);
	--l3: #fff;
	background:
		linear-gradient(var(--l1), var(--l1)) right top / 22px 2px no-repeat,
		linear-gradient(var(--l2), var(--l2)) right center / 13px 2px no-repeat,
		linear-gradient(var(--l3), var(--l3)) right bottom / 17px 2px no-repeat !important;
	transition: background-size var(--b3d-dur) var(--b3d-ease) !important;
}

.dt-mobile-menu-icon:hover {
	background: rgba(255, 255, 255, .16) !important;
	border-color: var(--b3d-logo-cyan) !important;
}

.dt-mobile-menu-icon:hover .lines-button {
	background-size: 22px 2px, 22px 2px, 22px 2px !important;
}

.dt-mobile-menu-icon:active {
	transform: scale(.94);
}

/* On the white sticky mobile bar */
.sticky-mobile-on .dt-mobile-menu-icon {
	background: var(--b3d-logo-cyan-50) !important;
	border-color: transparent !important;
}

.sticky-mobile-on .dt-mobile-menu-icon .lines-button {
	--l1: var(--b3d-ink);
	--l3: var(--b3d-ink);
}

.sticky-mobile-on .dt-mobile-menu-icon:hover {
	border-color: var(--b3d-logo-cyan) !important;
}

/* ---------- Mobile menu panel ---------- */

/* The7 positions the panel from its own 300px width (left:-300px + translateX(100%)).
 * Anchor it to the right edge instead so any width works. */
.dt-mobile-header {
	left: auto !important;
	right: 0 !important;
	transform: translateX(100%) !important;
	width: min(420px, 100vw) !important;
	max-width: 100vw;
	color: #fff;
	background:
		var(--b3d-strip) top / 100% 4px no-repeat,
		var(--b3d-dark-gradient) !important;
	overflow: hidden;
}

.show-overlay-mobile-header .dt-mobile-header {
	transform: translateX(0) !important;
}

/* White logo "b" watermark */
.dt-mobile-header::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -70px;
	width: 220px;
	aspect-ratio: 249 / 482;
	background: #fff;
	-webkit-mask: var(--b3d-mark) center / contain no-repeat;
	mask: var(--b3d-mark) center / contain no-repeat;
	opacity: .05;
	pointer-events: none;
}

/* The7 fixes this to 287px (its 300px panel); use the full panel width */
.dt-mobile-header .mobile-header-scrollbar-wrap {
	width: 100% !important;
	max-width: none !important;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 20px 28px 28px !important;
	box-sizing: border-box;
}

/* Head: logo (close button sits top right, from The7) */
.b3d-mnav-head {
	display: flex;
	align-items: center;
	min-height: 48px;
	margin-bottom: 26px;
}

.b3d-mnav-logo img {
	display: block;
	width: auto;
	height: 44px;
}

/* Close button */
.dt-mobile-header .dt-close-mobile-menu-icon {
	top: 24px !important;
	right: 24px !important;
	width: 44px !important;
	height: 44px !important;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .06) !important;
	transition: transform var(--b3d-dur) var(--b3d-ease), background-color var(--b3d-dur-fast);
}

.dt-mobile-header .dt-close-mobile-menu-icon::before,
.dt-mobile-header .dt-close-mobile-menu-icon::after {
	display: none !important;
}

.dt-mobile-header .dt-close-mobile-menu-icon .close-line-wrap {
	position: absolute !important;
	inset: 0;
	margin: auto;
	width: 18px !important;
	height: 18px !important;
}

.dt-mobile-header .dt-close-mobile-menu-icon .close-line {
	background: #fff !important;
}

.dt-mobile-header .dt-close-mobile-menu-icon:hover {
	transform: rotate(90deg);
	background: rgba(255, 255, 255, .14) !important;
}

/* Items */
.dt-mobile-header .mobile-main-nav {
	counter-reset: b3dmn;
	margin: 0 !important;
	padding: 0 !important;
}

.dt-mobile-header .mobile-main-nav > li {
	border-color: rgba(255, 255, 255, .08) !important;
}

.dt-mobile-header .mobile-main-nav > li:not(.b3d-menu-cta) {
	counter-increment: b3dmn;
}

.dt-mobile-header .mobile-main-nav > li > a {
	display: flex !important;
	align-items: baseline;
	padding: 16px 48px 16px 0 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
	line-height: 1.2 !important;
}

.dt-mobile-header .mobile-main-nav > li:not(.b3d-menu-cta) > a::before {
	content: counter(b3dmn, decimal-leading-zero);
	flex: 0 0 34px;
	color: var(--b3d-logo-cyan);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
}

.dt-mobile-header .mobile-main-nav > li.b3d-menu-rehab > a::before {
	color: var(--b3d-pink);
}

.dt-mobile-header .mobile-main-nav > li > a,
.dt-mobile-header .mobile-main-nav > li > a * {
	color: #fff !important;
}

.dt-mobile-header .mobile-main-nav > li.current-menu-item > a,
.dt-mobile-header .mobile-main-nav > li.current-menu-item > a * {
	color: var(--b3d-cyan) !important;
}

.dt-mobile-header .mobile-main-nav > li.current-menu-item > a {
	box-shadow: none;
}

/* Sub-menu toggle: round button, turns into × when open */
.dt-mobile-header .mobile-main-nav .next-level-button {
	top: 7px !important;
	right: 0 !important;
	bottom: auto !important;
	box-sizing: border-box !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	transition: transform var(--b3d-dur) var(--b3d-ease), background-color var(--b3d-dur-fast), border-color var(--b3d-dur-fast);
}

.dt-mobile-header .mobile-main-nav .sub-nav .next-level-button {
	top: 4px !important;
	width: 30px !important;
	height: 30px !important;
}

.dt-mobile-header .mobile-main-nav li.open-sub > .next-level-button {
	transform: rotate(45deg);
	background: rgba(255, 255, 255, .08);
	border-color: transparent;
}

/* The7 colors the svg itself gray, so set fills explicitly */
.dt-mobile-header .mobile-main-nav .next-level-button svg,
.dt-mobile-header .mobile-main-nav .next-level-button svg * {
	width: 12px;
	height: 12px;
	fill: var(--b3d-logo-cyan) !important;
}

.dt-mobile-header .mobile-main-nav > li.b3d-menu-rehab .next-level-button svg,
.dt-mobile-header .mobile-main-nav > li.b3d-menu-rehab .next-level-button svg * {
	fill: var(--b3d-pink) !important;
}

/* Sub-menus */
.dt-mobile-header .mobile-main-nav .sub-nav {
	margin: 0 0 14px 34px !important;
	padding: 2px 0 2px 16px !important;
	border-left: 2px solid var(--b3d-logo-cyan);
	background: none !important;
}

.dt-mobile-header .mobile-main-nav > li.b3d-menu-rehab .sub-nav {
	border-left-color: var(--b3d-pink);
}

.dt-mobile-header .mobile-main-nav .sub-nav .sub-nav {
	margin: 4px 0 8px 0 !important;
	border-left-color: rgba(255, 255, 255, .25);
}

.dt-mobile-header .mobile-main-nav .sub-nav > li {
	border: 0 !important;
}

.dt-mobile-header .mobile-main-nav .sub-nav > li > a {
	padding: 9px 40px 9px 0 !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

.dt-mobile-header .mobile-main-nav .sub-nav > li > a,
.dt-mobile-header .mobile-main-nav .sub-nav > li > a * {
	color: rgba(255, 255, 255, .78) !important;
}

.dt-mobile-header .mobile-main-nav .sub-nav > li > a:hover,
.dt-mobile-header .mobile-main-nav .sub-nav > li > a:hover *,
.dt-mobile-header .mobile-main-nav .sub-nav > li.current-menu-item > a * {
	color: #fff !important;
}

/* CTA: full-width button */
.dt-mobile-header .mobile-main-nav > li.b3d-menu-cta {
	margin-top: 24px;
	border: 0 !important;
}

.dt-mobile-header .mobile-main-nav > li.b3d-menu-cta > a {
	justify-content: center;
	align-items: center;
	padding: 16px 20px !important;
	border-radius: 14px;
	background: var(--b3d-gradient) !important;
	box-shadow: 0 10px 26px rgba(16, 222, 236, .28);
	font-size: 17px !important;
}

.dt-mobile-header .mobile-main-nav > li.b3d-menu-cta > a .menu-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Contacts and socials */
.b3d-mnav-foot {
	margin-top: auto;
	padding-top: 32px;
}

.b3d-mnav-label {
	position: relative;
	margin: 0 0 14px !important;
	padding-bottom: 10px;
	color: var(--b3d-cyan) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.b3d-mnav-label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 3px;
	background: linear-gradient(90deg, var(--b3d-logo-cyan) 0 24px, transparent 24px 28px, var(--b3d-pink) 28px 38px);
	transform: var(--b3d-blade-skew);
	transform-origin: left bottom;
}

.b3d-mnav-contact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: #fff !important;
	font-size: 15px;
	text-decoration: none !important;
}

.b3d-mnav-contact svg {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	color: var(--b3d-cyan);
}

.b3d-mnav-contact small {
	margin-left: 6px;
	color: rgba(255, 255, 255, .5);
	font-size: 12px;
}

.b3d-mnav-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.b3d-mnav-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	color: #fff !important;
	transition: background-color var(--b3d-dur-fast), color var(--b3d-dur-fast), border-color var(--b3d-dur-fast);
}

.b3d-mnav-social a:hover {
	background: var(--b3d-logo-cyan);
	border-color: transparent;
	color: var(--b3d-ink) !important;
}

.b3d-mnav-social a:nth-child(even):hover {
	background: var(--b3d-pink);
}

.b3d-mnav-social svg {
	width: 18px;
	height: 18px;
}

/* Staggered entrance when the panel opens */
.show-overlay-mobile-header .dt-mobile-header .mobile-main-nav > li,
.show-overlay-mobile-header .dt-mobile-header .b3d-mnav-foot {
	animation: b3dMnavIn .55s var(--b3d-ease-out) both;
	animation-delay: calc(.08s + var(--i, 0) * .05s);
}

@keyframes b3dMnavIn {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: 1; transform: none; }
}

/* Dimmed, blurred page behind the panel */
.mobile-sticky-header-overlay.active {
	background: rgba(4, 12, 20, .55) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
	.show-overlay-mobile-header .dt-mobile-header .mobile-main-nav > li,
	.show-overlay-mobile-header .dt-mobile-header .b3d-mnav-foot {
		animation: none;
	}
}

/* ---------- Scroll-to-top ---------- */

.scroll-top {
	border-radius: 50% !important;
	background: var(--b3d-gradient) !important;
	box-shadow: 0 8px 20px rgba(10, 169, 180, .35);
	transition: transform var(--b3d-dur) var(--b3d-ease), opacity var(--b3d-dur) var(--b3d-ease), box-shadow var(--b3d-dur) var(--b3d-ease) !important;
}

.scroll-top:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(10, 169, 180, .45);
}

@media (prefers-reduced-motion: reduce) {
	.masthead .main-nav .sub-nav > li > a,
	.masthead .main-nav .sub-nav > li > a::before,
	.masthead .main-nav > li.b3d-menu-cta > a {
		transition: none;
	}
}