/**
 * Clarity Mega Menu — navigation bar + mega menu panels
 *
 * Figma: Clarity Website / Menu Bar Mega Menus (node 2114:8181)
 * https://www.figma.com/design/NASQYg3cRr27vG8q81Q59F/Clarity-Website?node-id=2114-8181
 *
 * Reference geometry is the 1240px artboard. Every measurement below is taken
 * from the Figma frames, so the desktop breakpoint is a 1:1 reproduction:
 *
 *   Bar      1240 x 78, padding 20/30, radius 20
 *   Panel    1240 x 495, radius 20, offset 12px below the bar
 *   Sidebar  331 wide, navy, rows 310 x 72 on an 80px pitch
 *   Icon     62 x 62 tile, radius 12, glyph centred at its natural size
 *   Content  hero text inset 58 left / 30 right, card grid inset 25 / 15
 *
 * Scoped under .cbs-nav and written with !important so an Elementor kit or a
 * theme's own header rules cannot bleed in — same approach as clarity-footer.
 */

/* ---------------------------------------------------------------------------
 * 0. Tokens
 *
 * Colours and type come from the Clarity Type Scale Reference. The surface
 * tokens are the one place this cannot copy Figma literally: the artboards sit
 * on a dark canvas, so the panel and the cards are both rgba(255,255,255,.75)
 * and still read as two distinct greys, with the card the lighter of the two.
 * Over a real white page that pair collapses into one invisible sheet, so the
 * values are pinned to opaque equivalents that keep the same relationship —
 * panel a light ground, cards white on top of it.
 * ------------------------------------------------------------------------ */

.cbs-nav {
	--cbs-nav-blue: #23498A;
	--cbs-nav-blue-tint: #F3F8FF;
	--cbs-nav-navy: #00315A;
	--cbs-nav-navy-dark: #001B33;
	--cbs-nav-green: #679C5B;
	--cbs-nav-green-dark: #4F7D45;
	--cbs-nav-gray: #4A4A4A;
	--cbs-nav-black: #000000;
	--cbs-nav-white: #FFFFFF;

	/* Straight off the artboard — the bar is the one surface whose translucency
	   survives contact with a real page, because what shows through it is page
	   content rather than another panel. */
	--cbs-nav-bar-bg: #FFFFFF;
	/*
	 * Glass. The artboards fill the panel and the cards with translucent white
	 * so the page shows through; the blur is what stops that reading as mush.
	 * It is applied once, on the panel, and the cards are simply translucent
	 * over it — a backdrop-filter per card would mean 65 blurred surfaces on
	 * one open menu, which is a lot of GPU work for an identical result.
	 */
	--cbs-nav-panel-bg: rgba(255, 255, 255, 0.62);
	--cbs-nav-sheet: #F4F7FB;
	--cbs-nav-card-bg: rgba(255, 255, 255, 0.48);
	--cbs-nav-card-bg-hover: rgba(255, 255, 255, 0.82);
	--cbs-nav-hairline: rgba(186, 203, 218, 0.55);
	--cbs-nav-rule: #E3E3E3;

	/* Type — Menus 14/600, H3 30/700, Body Large 18/400 */
	--cbs-nav-fs-menu: 14px;
	--cbs-nav-fs-h3: 30px;
	--cbs-nav-fs-body: 18px;
	--cbs-nav-fs-body-sm: 16px;

	--cbs-nav-radius: 20px;
	--cbs-nav-radius-md: 16px;
	--cbs-nav-radius-sm: 12px;
	--cbs-nav-radius-xs: 8px;

	/* Panel shadow, straight off the Figma frame */
	--cbs-nav-shadow: 0 4px 23.3px rgba(0, 0, 0, 0.22);

	--cbs-nav-max: 1240px;
	--cbs-nav-bar-h: 78px;
	--cbs-nav-side-w: 331px;
	--cbs-nav-row-h: 72px;
	--cbs-nav-tile: 62px;
	--cbs-nav-gap: 12px;
	--cbs-nav-aside-w: 280px;

	/* Stacking order. Raise it from a theme or Additional CSS when a page
	   builder puts a sticky element above the nav:
	   .cbs-nav { --cbs-nav-z: 9999; } */
	--cbs-nav-z: 900;

	position: relative !important;
	z-index: var(--cbs-nav-z) !important;
	display: block !important;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased;
}

/*
 * Glass needs the blur. Without it the translucent fills are just the page
 * showing through the menu — the card labels end up sitting on whatever
 * happens to be behind them, which is worse than an opaque panel, not merely
 * plainer. So where backdrop-filter is unsupported, fall back to the opaque
 * surfaces this shipped with. Delete this block if you would rather the glass
 * apply unconditionally.
 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.cbs-nav {
		--cbs-nav-panel-bg: #EBEFF4 !important;
		--cbs-nav-card-bg: #FFFFFF !important;
		--cbs-nav-card-bg-hover: #FFFFFF !important;
	}
}

.cbs-nav *,
.cbs-nav *::before,
.cbs-nav *::after {
	box-sizing: border-box !important;
}

/*
 * No `color` here. `.cbs-nav a` is (0,1,1) and out-specifies every (0,1,0) class
 * rule, so `color: inherit` silently beat .cbs-nav__btn--solid and painted both
 * header buttons in the page's text colour instead of white and Primary Blue.
 * The wrapper links that genuinely want to inherit ask for it by class below.
 */
.cbs-nav a {
	text-decoration: none !important;
}

.cbs-nav__logo,
.cbs-nav__side-item,
.cbs-nav__card,
.cbs-nav__aside {
	color: inherit !important;
}

/*
 * Deliberately minimal. `.cbs-nav button` is (0,1,1) and out-specifies every
 * (0,1,0) class rule, so anything set here silently wins over .cbs-nav__top —
 * which is how `font: inherit` swallowed the 14/600 menu type, `color: inherit`
 * turned the rows the page's text colour, and `margin: 0` flattened the 25px
 * inset on mobile. Each button class sets its own box, colour and type.
 */
.cbs-nav button {
	font-family: inherit !important;
	background: none !important;
	border: 0 !important;
	cursor: pointer !important;
}

.cbs-nav ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Most themes define this, but the nav must not depend on that being true */
.cbs-nav .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

.cbs-nav :focus-visible {
	outline: 3px solid rgba(35, 73, 138, 0.45) !important;
	outline-offset: 2px !important;
	border-radius: var(--cbs-nav-radius-xs) !important;
}

/*
 * Fixed, not sticky. position:sticky is constrained by its parent's box, and a
 * page builder drops the nav into wrappers that are exactly as tall as it is —
 * an Elementor shortcode widget gives widget-container / widget / widget-wrap
 * all at 78px — so there is no room to stick and nothing happens. Fixed does
 * not care how deep it is nested. The spacer below keeps the header section's
 * height once the nav leaves the flow.
 */
.cbs-nav--sticky {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
}

/*
 * WordPress pins a 32px admin bar above everything for logged-in users. It
 * pushes the document down with html{margin-top}, which a fixed element does not
 * see — so without this the admin bar sits on top of the nav and clips the logo.
 * Below 783px the admin bar is absolute and scrolls away, so no offset there.
 */
@media screen and (min-width: 783px) {
	body.admin-bar .cbs-nav--sticky {
		top: 32px !important;
	}
}

/* Bar 78 + the 12px top gutter the wrap adds above it */
.cbs-nav__spacer {
	height: 90px !important;
}

@media (max-width: 1023px) {
	/* the wrap drops its gutter at this width */
	.cbs-nav__spacer {
		height: 78px !important;
	}
}

/* ---------------------------------------------------------------------------
 * 1. Bar — 1240 x 78, padding 20/30, radius 20
 * ------------------------------------------------------------------------ */

.cbs-nav__wrap {
	padding: 12px 24px 0 !important;
}

.cbs-nav__inner {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	max-width: var(--cbs-nav-max) !important;
	min-height: var(--cbs-nav-bar-h) !important;
	margin: 0 auto !important;
	padding: 20px 30px !important;
	background: var(--cbs-nav-bar-bg) !important;
	border-radius: var(--cbs-nav-radius) !important;
}

.cbs-nav__logo {
	display: block !important;
	flex: 0 0 auto !important;
}

.cbs-nav__logo img {
	display: block !important;
	width: auto !important;
	height: 37.81px !important;
	max-width: 186px !important;
}

/* ---------------------------------------------------------------------------
 * 2. Top-level menu — Menus 14/600, pill 5/10, radius 8
 * ------------------------------------------------------------------------ */

.cbs-nav__collapse {
	display: contents !important;
}

.cbs-nav__list {
	display: flex !important;
	align-items: center !important;
}

.cbs-nav__item {
	position: static !important;
}

.cbs-nav__top {
	display: flex !important;
	margin: 0 !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 5px 10px !important;
	border-radius: var(--cbs-nav-radius-xs) !important;
	background: transparent !important;
	font-size: var(--cbs-nav-fs-menu) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--cbs-nav-black) !important;
	white-space: nowrap !important;
	transition: background-color 0.18s ease, color 0.18s ease !important;
}

.cbs-nav__top:hover {
	color: var(--cbs-nav-blue) !important;
}

.cbs-nav__item.is-open > .cbs-nav__top,
.cbs-nav__top[aria-current="page"] {
	background: var(--cbs-nav-blue-tint) !important;
	color: var(--cbs-nav-blue) !important;
}

.cbs-nav__chev {
	display: block !important;
	flex: 0 0 auto !important;
	width: 13px !important;
	height: 13px !important;
	background-color: currentColor !important;
	-webkit-mask: var(--cbs-nav-chevron) center / 13px 13px no-repeat !important;
	mask: var(--cbs-nav-chevron) center / 13px 13px no-repeat !important;
	transition: transform 0.22s ease !important;
}

.cbs-nav__item.is-open > .cbs-nav__top .cbs-nav__chev {
	transform: rotate(90deg) !important;
}

/* ---------------------------------------------------------------------------
 * 3. Actions — Log in (outline) / Schedule a Demo (green), 38px tall
 * ------------------------------------------------------------------------ */

.cbs-nav__actions {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex: 0 0 auto !important;
}

.cbs-nav__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 38px !important;
	padding: 10px 20px !important;
	border-radius: var(--cbs-nav-radius-xs) !important;
	border: 1px solid transparent !important;
	font-size: var(--cbs-nav-fs-menu) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	white-space: nowrap !important;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.cbs-nav__btn:hover {
	transform: translateY(-1px) !important;
}

.cbs-nav__btn--outline {
	background: rgba(255, 255, 255, 0.51) !important;
	border-color: var(--cbs-nav-blue) !important;
	color: var(--cbs-nav-blue) !important;
}

.cbs-nav__btn--outline:hover {
	background: var(--cbs-nav-blue) !important;
	color: var(--cbs-nav-white) !important;
}

.cbs-nav__btn--solid {
	background: var(--cbs-nav-green) !important;
	color: var(--cbs-nav-white) !important;
}

.cbs-nav__btn--solid:hover {
	background: var(--cbs-nav-green-dark) !important;
}

/* ---------------------------------------------------------------------------
 * 4. Burger — mobile only
 * ------------------------------------------------------------------------ */

.cbs-nav__burger {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	width: 44px !important;
	height: 44px !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var(--cbs-nav-radius-xs) !important;
	color: var(--cbs-nav-blue) !important;
}

/* The two glyphs are exported from the mobile artboard; see section 11 */
.cbs-nav__burger-open,
.cbs-nav__burger-close {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 5. Panel — 1240 x 495, 12px below the bar
 * ------------------------------------------------------------------------ */

.cbs-nav__panel {
	position: absolute !important;
	top: calc(100% + 12px) !important;
	left: 0 !important;
	right: 0 !important;
	display: grid !important;
	grid-template-columns: var(--cbs-nav-side-w) minmax(0, 1fr) !important;
	/*
	 * No fixed height: the sidebar sets it, and the 80px row pitch lands on the
	 * artboard values on its own — 6 rows give the 495px Solutions panel, 4 rows
	 * give the 331px Who We Serve panel.
	 */
	border-radius: var(--cbs-nav-radius) !important;
	background: var(--cbs-nav-panel-bg) !important;
	-webkit-backdrop-filter: blur(24px) !important;
	backdrop-filter: blur(24px) !important;
	box-shadow: var(--cbs-nav-shadow) !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(-6px) !important;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
	content-visibility: hidden !important;
}

.cbs-nav__item.is-open > .cbs-nav__panel {
	opacity: 1 !important;
	content-visibility: visible !important;
	visibility: visible !important;
	transform: none !important;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s !important;
}

/* Sidebar — navy, rows on an 80px pitch (72 + 8) */
.cbs-nav__side {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 10px 11px 13px !important;
	background: var(--cbs-nav-blue) !important;
}

.cbs-nav__side-row {
	display: flex !important;
	align-items: center !important;
}

.cbs-nav__side-item {
	display: flex !important;
	flex: 1 1 auto !important;
	align-items: center !important;
	min-height: var(--cbs-nav-row-h) !important;
	padding: 5px !important;
	border-radius: var(--cbs-nav-radius-md) !important;
	background: transparent !important;
	transition: background-color 0.18s ease !important;
}

.cbs-nav__tile {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--cbs-nav-tile) !important;
	height: var(--cbs-nav-tile) !important;
	margin-right: var(--cbs-nav-gap) !important;
	border-radius: var(--cbs-nav-radius-sm) !important;
	background: transparent !important;
	transition: background-color 0.18s ease !important;
}

/*
 * Icons are rendered as a mask so one uploaded glyph works in both places it
 * appears in the design: white on the navy sidebar, Primary Blue on a light
 * content card, and white again when that card is hovered. mask-size stays at
 * `auto` so each glyph keeps its own natural size inside the 62px tile —
 * that is what the Figma frames do (31.9x33, 40.5x33, 62x62 all coexist).
 */
.cbs-nav__icon {
	display: block !important;
	width: var(--cbs-nav-tile) !important;
	height: var(--cbs-nav-tile) !important;
	background-color: currentColor !important;
	-webkit-mask-position: center !important;
	mask-position: center !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: auto !important;
	mask-size: auto !important;
}

/* Escape hatch for full-colour artwork — set Icon rendering to "Original colours" */
.cbs-nav__icon--img {
	width: auto !important;
	height: auto !important;
	max-width: var(--cbs-nav-tile) !important;
	max-height: var(--cbs-nav-tile) !important;
	background: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	object-fit: contain !important;
}

.cbs-nav__arrow {
	display: block !important;
	flex: 0 0 auto !important;
	width: 0 !important;
	height: 14.73px !important;
	margin-right: 0 !important;
	background-color: currentColor !important;
	-webkit-mask: var(--cbs-nav-arrow) left center / 14px 14.73px no-repeat !important;
	mask: var(--cbs-nav-arrow) left center / 14px 14.73px no-repeat !important;
	opacity: 0 !important;
	transition: width 0.18s ease, margin-right 0.18s ease, opacity 0.18s ease !important;
}

/*
 * 149px is the label box in the Figma sidebar component, and it is what makes
 * "Ready For Life / Benefits Solutions" break onto two lines there. Rows keep
 * their 72px height either way.
 */
.cbs-nav__side-label {
	max-width: 149px !important;
	font-size: var(--cbs-nav-fs-menu) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--cbs-nav-white) !important;
	transition: color 0.18s ease !important;
}

.cbs-nav__side-item.is-active,
.cbs-nav__side-item:hover {
	background: var(--cbs-nav-white) !important;
}

.cbs-nav__side-item.is-active .cbs-nav__tile,
.cbs-nav__side-item:hover .cbs-nav__tile {
	background: var(--cbs-nav-blue) !important;
}

.cbs-nav__side-item.is-active .cbs-nav__side-label,
.cbs-nav__side-item:hover .cbs-nav__side-label {
	color: var(--cbs-nav-blue) !important;
}

.cbs-nav__side-item.is-active .cbs-nav__arrow,
.cbs-nav__side-item:hover .cbs-nav__arrow {
	width: 14px !important;
	margin-right: var(--cbs-nav-gap) !important;
	opacity: 1 !important;
	color: var(--cbs-nav-blue) !important;
}

/* Sidebar glyphs are white in both states — the active tile is navy */
.cbs-nav__side .cbs-nav__icon {
	color: var(--cbs-nav-white) !important;
}

/* Drill-down toggle, mobile only */
.cbs-nav__side-toggle {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	width: 44px !important;
	height: 44px !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--cbs-nav-white) !important;
}

.cbs-nav__side-toggle .cbs-nav__chev {
	transition: transform 0.22s ease !important;
}

.cbs-nav__side-toggle[aria-expanded="true"] .cbs-nav__chev {
	transform: rotate(90deg) !important;
}

/* ---------------------------------------------------------------------------
 * 6. Views — one per sidebar row
 * ------------------------------------------------------------------------ */

.cbs-nav__views {
	position: relative !important;
	display: flex !important;
	min-width: 0 !important;
}

.cbs-nav__view {
	display: none !important;
	flex-direction: column !important;
	width: 100% !important;
	min-width: 0 !important;
}

.cbs-nav__view.is-active {
	display: flex !important;
}

.cbs-nav__intro {
	padding: 41px 30px 0 58px !important;
}

.cbs-nav__heading {
	margin: 0 !important;
	font-size: var(--cbs-nav-fs-h3) !important;
	font-weight: 700 !important;
	line-height: 1.22 !important;
	color: var(--cbs-nav-blue) !important;
}

.cbs-nav__desc {
	max-width: 801px !important;
	margin: 14px 0 0 !important;
	font-size: var(--cbs-nav-fs-body) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--cbs-nav-gray) !important;
}

.cbs-nav__cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 26px !important;
	font-size: var(--cbs-nav-fs-menu) !important;
	font-weight: 600 !important;
	color: var(--cbs-nav-blue) !important;
}

.cbs-nav__cta::after {
	content: "" !important;
	display: block !important;
	width: 24px !important;
	height: 14.73px !important;
	background-color: currentColor !important;
	-webkit-mask: var(--cbs-nav-arrow-lg) center / 24px 14.73px no-repeat !important;
	mask: var(--cbs-nav-arrow-lg) center / 24px 14.73px no-repeat !important;
	transition: transform 0.18s ease !important;
}

.cbs-nav__cta:hover::after {
	transform: translateX(4px) !important;
}

/* Hero — text, then a full-width 821 x 275 image */
.cbs-nav__view--hero .cbs-nav__media {
	margin: 36px 30px 27px 58px !important;
	border-radius: var(--cbs-nav-radius-md) !important;
	overflow: hidden !important;
}

.cbs-nav__view--hero .cbs-nav__media img {
	display: block !important;
	width: 100% !important;
	height: 275px !important;
	object-fit: cover !important;
}

/* Split — text left, 365 x 296 image right */
.cbs-nav__view--split {
	flex-direction: row !important;
	align-items: flex-start !important;
	padding: 0 17px 0 0 !important;
}

.cbs-nav__view--split .cbs-nav__intro {
	flex: 1 1 auto !important;
	padding-right: 40px !important;
}

.cbs-nav__view--split .cbs-nav__desc {
	max-width: 432px !important;
}

.cbs-nav__view--split .cbs-nav__media {
	flex: 0 0 auto !important;
	width: 365px !important;
	margin: 18px 0 !important;
	border-radius: var(--cbs-nav-radius-md) !important;
	overflow: hidden !important;
}

.cbs-nav__view--split .cbs-nav__media img {
	display: block !important;
	width: 100% !important;
	height: 296px !important;
	object-fit: cover !important;
}

/* ---------------------------------------------------------------------------
 * 7. Card grid — inset 25 left / 15 right, 15px gutters
 * ------------------------------------------------------------------------ */

.cbs-nav__body {
	display: flex !important;
	flex: 1 1 auto !important;
	gap: 15px !important;
	min-height: 0 !important;
	padding: 10px 15px 13px 25px !important;
}

.cbs-nav__intro + .cbs-nav__body {
	padding: 44px 15px 13px 30px !important;
}

.cbs-nav__grid {
	display: grid !important;
	flex: 1 1 auto !important;
	grid-template-columns: repeat(var(--cbs-nav-cols, 3), minmax(0, 1fr)) !important;
	grid-auto-rows: minmax(150px, 1fr) !important;
	align-content: stretch !important;
	gap: 15px !important;
	min-width: 0 !important;
}

.cbs-nav__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 20px !important;
	min-width: 0 !important;
	padding: 25px !important;
	border-radius: var(--cbs-nav-radius-md) !important;
	background: var(--cbs-nav-card-bg) !important;
	transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* The tall first card in Guides & Support / Strategic Partners */
.cbs-nav__card--tall {
	grid-row: span 2 !important;
}

.cbs-nav__card .cbs-nav__tile {
	margin-right: 0 !important;
}

.cbs-nav__card .cbs-nav__icon {
	color: var(--cbs-nav-blue) !important;
}

.cbs-nav__card-label {
	display: flex !important;
	align-items: center !important;
	font-size: var(--cbs-nav-fs-menu) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--cbs-nav-gray) !important;
	transition: color 0.18s ease !important;
}

.cbs-nav__card:hover {
	background: var(--cbs-nav-card-bg-hover) !important;
	box-shadow: 0 10px 30px rgba(35, 73, 138, 0.08) !important;
}

.cbs-nav__card:hover .cbs-nav__tile {
	background: var(--cbs-nav-blue) !important;
}

.cbs-nav__card:hover .cbs-nav__icon {
	color: var(--cbs-nav-white) !important;
}

.cbs-nav__card:hover .cbs-nav__card-label {
	color: var(--cbs-nav-blue) !important;
}

.cbs-nav__card:hover .cbs-nav__arrow {
	width: 14px !important;
	margin-right: 11px !important;
	opacity: 1 !important;
	color: var(--cbs-nav-blue) !important;
}

/* ---------------------------------------------------------------------------
 * 8. Aside — the tall media / promo rail beside a card grid
 * ------------------------------------------------------------------------ */

.cbs-nav__aside {
	position: relative !important;
	flex: 0 0 auto !important;
	width: var(--cbs-nav-aside-w) !important;
	border-radius: var(--cbs-nav-radius-md) !important;
	background: var(--cbs-nav-blue) !important;
	overflow: hidden !important;
}

.cbs-nav__aside img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.cbs-nav__aside-body {
	position: absolute !important;
	inset: auto 0 0 0 !important;
	padding: 25px !important;
	color: var(--cbs-nav-white) !important;
}

/*
 * Figma frosts the caption panel rather than fading the photograph behind it:
 * a rounded card inset 3px from the rail, blurring what it covers under a
 * light wash, with the picture continuing at full strength above it. The
 * gradient this replaced dimmed the whole lower half of the image, which read
 * as a far heavier treatment than the artboard. Traced off the 5500 rail
 * (2639:47336), the only overlay aside in the file.
 */
.cbs-nav__aside--overlay .cbs-nav__aside-body {
	z-index: 1 !important;
	left: 3px !important;
	right: 3px !important;
	/* 48px gutter, not the 25px the plain rails use: it is what wraps the
	   artboard's copy to four lines instead of three. */
	padding: 26px 48px 40px !important;
	border-radius: 13px 13px 0 0 !important;
	/* Sampled off the artboard against the bare photograph: a neutral black
	   at ~0.44, not a white frost — it darkens what it covers. */
	background: rgba(0, 0, 0, 0.42) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	backdrop-filter: blur(14px) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.cbs-nav__aside-eyebrow {
	margin: 0 0 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.85) !important;
}

.cbs-nav__aside-title {
	margin: 0 !important;
	font-size: var(--cbs-nav-fs-h3) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	color: var(--cbs-nav-white) !important;
}

.cbs-nav__aside-text {
	margin: 12px 0 0 !important;
	font-size: var(--cbs-nav-fs-body-sm) !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var(--cbs-nav-white) !important;
}

/* ---------------------------------------------------------------------------
 * 9. Backdrop
 * ------------------------------------------------------------------------ */

.cbs-nav__scrim {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0, 27, 51, 0.35) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;
	z-index: -1 !important;
}

.cbs-nav.is-active .cbs-nav__scrim {
	opacity: 1 !important;
	visibility: visible !important;
	transition: opacity 0.2s ease, visibility 0s !important;
}

/* ---------------------------------------------------------------------------
 * 10. Laptop — keep the desktop mega menu, tighten the fixed columns
 * ------------------------------------------------------------------------ */

@media (max-width: 1239px) {
	.cbs-nav {
		--cbs-nav-side-w: 300px;
		--cbs-nav-aside-w: 240px;
	}

	.cbs-nav__inner {
		padding: 16px 22px !important;
	}

	.cbs-nav__intro {
		padding: 32px 24px 0 34px !important;
	}

	.cbs-nav__view--hero .cbs-nav__media {
		margin: 28px 24px 22px 34px !important;
	}

	.cbs-nav__view--hero .cbs-nav__media img {
		height: 240px !important;
	}

	.cbs-nav__view--split .cbs-nav__media {
		width: 300px !important;
	}

	.cbs-nav__body {
		padding: 10px 14px 13px 20px !important;
	}

	.cbs-nav__intro + .cbs-nav__body {
		padding: 32px 14px 13px 24px !important;
	}

	.cbs-nav__grid {
		grid-template-columns: repeat(min(var(--cbs-nav-cols, 3), 3), minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1099px) {
	.cbs-nav {
		--cbs-nav-fs-h3: 26px;
		--cbs-nav-fs-body: 16px;
	}

	.cbs-nav__logo img {
		height: 32px !important;
	}

	.cbs-nav__top {
		padding: 5px 7px !important;
	}

	.cbs-nav__btn {
		padding: 10px 14px !important;
	}
}

/* ---------------------------------------------------------------------------
 * 11. Tablet and mobile
 *
 * Figma: Menu Bar Responsive Ipad/Tablet (2239:14054, 768px artboard)
 *        Menu Bar Responsive Mobile      (2239:16297, 390px artboard)
 *
 * Below the desktop breakpoint the mega menu is replaced, not reflowed. The
 * bar keeps its 78px height and full-size 186px logo and swaps the menu for a
 * hamburger. The panel drops full-bleed 4px underneath it and holds a
 * three-level accordion:
 *
 *   1  top-level rows   inset 25, 41px pitch, Menus 14/600 black + 13px chevron
 *   2  sub menu cards   white, radius 16, 72px tall on an 84px pitch, navy
 *                       62px tile, label 14/600 #23498A, chevron right
 *   3  the card grows   1px rule inset 5, then 14/600 #4A4A4A rows, 39px pitch
 *
 * Tablet keeps Log in / Schedule a Demo in the bar, so there the *list* is the
 * panel. Mobile drops them to the foot of the panel as two equal columns, so
 * there the whole collapse is the panel. That is the only structural
 * difference between the two artboards.
 * ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.cbs-nav {
		--cbs-nav-panel-top: calc(var(--cbs-nav-bar-h) + 4px);

		/*
		 * Opaque here, unlike desktop. The blur is switched off a few rules
		 * down (it would trap the fixed panel), and 75% white with nothing
		 * blurring behind it is just the page text showing through the bar.
		 * The artboard gets away with translucency because Figma sits it on a
		 * flat canvas; a real article scrolls underneath. Override with
		 * .cbs-nav { --cbs-nav-bar-bg: ... } to go back to the artboard value.
		 */
		--cbs-nav-bar-bg: #FFFFFF;

		/*
		 * And the panel and cards go opaque again. The drawer is position:fixed
		 * here, so it cannot carry a backdrop-filter without trapping itself in
		 * the 78px bar — and translucency with no blur behind it is just the
		 * article showing through the menu.
		 */
		--cbs-nav-panel-bg: #EBEFF4;
		--cbs-nav-card-bg: #FFFFFF;
		--cbs-nav-card-bg-hover: #FFFFFF;
	}

	/*
	 * The panel is position:fixed and lives inside the bar, so the bar must not
	 * become its containing block — backdrop-filter would do exactly that and
	 * pin the panel inside the 78px bar.
	 */
	.cbs-nav__wrap {
		position: relative !important;
		z-index: 3 !important;
		padding: 0 !important;
	}

	/*
	 * height, not min-height. The 44px hamburger plus the artboard's 20px
	 * padding comes to 84, which pushed the bar past its 78px and left the
	 * panel — pinned at bar + 4 — overlapping it by 2px, eating the gap and
	 * covering the bar's bottom corners. Fixing the height keeps the tap target
	 * at 44px; the button simply overflows the padding box, still centred.
	 */
	.cbs-nav__panel {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.cbs-nav__inner {
		max-width: none !important;
		height: var(--cbs-nav-bar-h) !important;
		margin: 0 !important;
		padding: 20px 30px !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.cbs-nav__burger {
		display: flex !important;
	}

	/* Hamburger swaps to the close cross — both exported from the artboard */
	.cbs-nav__burger-open,
	.cbs-nav__burger-close {
		display: block !important;
		background-color: var(--cbs-nav-blue) !important;
		-webkit-mask-position: center !important;
		mask-position: center !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
	}

	.cbs-nav__burger-open {
		width: 18px !important;
		height: 14px !important;
		-webkit-mask-image: var(--cbs-nav-burger) !important;
		mask-image: var(--cbs-nav-burger) !important;
	}

	.cbs-nav__burger-close {
		display: none !important;
		width: 14px !important;
		height: 14px !important;
		/* The artboard draws a plus and rotates it, so the export is a plus */
		transform: rotate(45deg) !important;
		-webkit-mask-image: var(--cbs-nav-close) !important;
		mask-image: var(--cbs-nav-close) !important;
	}

	.cbs-nav__burger[aria-expanded="true"] .cbs-nav__burger-open {
		display: none !important;
	}

	.cbs-nav__burger[aria-expanded="true"] .cbs-nav__burger-close {
		display: block !important;
	}

	/* ---- the panel ------------------------------------------------------ */

	/*
	 * The artboard draws the panel at its full content height, with no scroll
	 * chrome. A real phone is shorter than that, so the panel has to scroll —
	 * but the scrollbar itself is desktop-emulator furniture (iOS and Android
	 * overlay theirs and take no width). Hiding it makes the panel read as the
	 * artboard does without giving up scrollability.
	 */
	.cbs-nav__collapse,
	.cbs-nav__list {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.cbs-nav__collapse::-webkit-scrollbar,
	.cbs-nav__list::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
	}

	/* ---- level 1: top-level rows ---------------------------------------- */

	.cbs-nav__list {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	.cbs-nav__top {
		justify-content: flex-start !important;
		width: auto !important;
		margin: 0 25px !important;
		padding: 5px 10px !important;
		border-radius: var(--cbs-nav-radius-xs) !important;
		border-bottom: 0 !important;
		font-size: var(--cbs-nav-fs-menu) !important;
	}

	/* No tinted pill on the open row here — the artboard lifts the whole item
	   into a container instead, which is the .is-open rule below. */
	.cbs-nav__item.is-open > .cbs-nav__top {
		background: transparent !important;
		color: var(--cbs-nav-black) !important;
	}

	/* ---- level 2: the open item becomes a card container ----------------- */

	/*
	 * The artboard insets the panel content 10px, but when nothing is expanded
	 * the first row sits 21px down. Only the first closed row needs the extra
	 * 11px; once it opens, its container takes over at the artboard's 10px.
	 */
	.cbs-nav__item:first-child:not(.is-open) > .cbs-nav__top {
		margin-top: 11px !important;
	}

	.cbs-nav__item.is-open {
		margin: 0 10px !important;
		padding: 10px !important;
		border-radius: var(--cbs-nav-radius-md) !important;
		background: var(--cbs-nav-sheet) !important;
	}

	.cbs-nav__item.is-open > .cbs-nav__top {
		margin: 0 0 12px 10px !important;
	}

	.cbs-nav__panel {
		position: static !important;
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: 0 !important;
		overflow: hidden !important;
		transition: none !important;
	}

	.cbs-nav__item.is-open > .cbs-nav__panel {
		height: auto !important;
		overflow: visible !important;
	}

	/*
	 * A sub menu's own list has to sit directly beneath its card, but in the
	 * DOM every row lives in .cbs-nav__side and every view in .cbs-nav__views
	 * (which is what the desktop two-column layout needs). Dissolving both
	 * wrappers and ordering the children interleaves them without a second
	 * copy of the markup.
	 */
	.cbs-nav__side,
	.cbs-nav__views {
		display: contents !important;
	}

	.cbs-nav__side-row:nth-of-type(1) { order: 1 !important; }
	.cbs-nav__view:nth-of-type(1)     { order: 2 !important; }
	.cbs-nav__side-row:nth-of-type(2) { order: 3 !important; }
	.cbs-nav__view:nth-of-type(2)     { order: 4 !important; }
	.cbs-nav__side-row:nth-of-type(3) { order: 5 !important; }
	.cbs-nav__view:nth-of-type(3)     { order: 6 !important; }
	.cbs-nav__side-row:nth-of-type(4) { order: 7 !important; }
	.cbs-nav__view:nth-of-type(4)     { order: 8 !important; }
	.cbs-nav__side-row:nth-of-type(5) { order: 9 !important; }
	.cbs-nav__view:nth-of-type(5)     { order: 10 !important; }
	.cbs-nav__side-row:nth-of-type(6) { order: 11 !important; }
	.cbs-nav__view:nth-of-type(6)     { order: 12 !important; }
	.cbs-nav__side-row:nth-of-type(7) { order: 13 !important; }
	.cbs-nav__view:nth-of-type(7)     { order: 14 !important; }
	.cbs-nav__side-row:nth-of-type(8) { order: 15 !important; }
	.cbs-nav__view:nth-of-type(8)     { order: 16 !important; }

	.cbs-nav__side-row {
		display: flex !important;
		align-items: center !important;
		min-height: var(--cbs-nav-row-h) !important;
		margin-bottom: 12px !important;
		padding: 5px !important;
		border-radius: var(--cbs-nav-radius-md) !important;
		border-bottom: 0 !important;
		background: var(--cbs-nav-card-bg) !important;
	}

	.cbs-nav__side-row:last-of-type {
		margin-bottom: 0 !important;
	}

	/* Expanded: the card and its list read as one block */
	.cbs-nav__side-row.is-expanded {
		margin-bottom: 0 !important;
		border-radius: var(--cbs-nav-radius-md) var(--cbs-nav-radius-md) 0 0 !important;
	}

	.cbs-nav__side-item {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background: none !important;
	}

	.cbs-nav__side-item.is-active,
	.cbs-nav__side-item:hover {
		background: none !important;
	}

	/* The tile is always filled navy here — there is no navy rail to sit on */
	.cbs-nav__side .cbs-nav__tile,
	.cbs-nav__side-item.is-active .cbs-nav__tile,
	.cbs-nav__side-item:hover .cbs-nav__tile,
	.cbs-nav__side-row .cbs-nav__tile {
		background: var(--cbs-nav-blue) !important;
		margin-right: var(--cbs-nav-gap) !important;
	}

	.cbs-nav__side-row .cbs-nav__icon {
		color: var(--cbs-nav-white) !important;
	}

	.cbs-nav__side-label,
	.cbs-nav__side-item.is-active .cbs-nav__side-label,
	.cbs-nav__side-item:hover .cbs-nav__side-label {
		max-width: none !important;
		color: var(--cbs-nav-blue) !important;
	}

	/* The desktop leading arrow is replaced by a trailing chevron */
	.cbs-nav__side-row .cbs-nav__arrow,
	.cbs-nav__side-item.is-active .cbs-nav__arrow,
	.cbs-nav__side-item:hover .cbs-nav__arrow {
		display: none !important;
		width: 0 !important;
		margin-right: 0 !important;
		opacity: 0 !important;
	}

	.cbs-nav__go {
		display: block !important;
		flex: 0 0 auto !important;
		width: 8.36px !important;
		height: 14.73px !important;
		margin-left: auto !important;
		background-color: var(--cbs-nav-blue) !important;
		-webkit-mask: var(--cbs-nav-chev-lg) center / 8.36px 14.73px no-repeat !important;
		mask: var(--cbs-nav-chev-lg) center / 8.36px 14.73px no-repeat !important;
		transition: transform 0.22s ease !important;
	}

	.cbs-nav__side-toggle {
		display: flex !important;
		flex: 0 0 auto !important;
		width: 44px !important;
		height: 44px !important;
		margin-right: 0 !important;
		color: var(--cbs-nav-blue) !important;
	}

	.cbs-nav__side-toggle[aria-expanded="true"] .cbs-nav__go {
		transform: rotate(90deg) !important;
	}

	/* ---- level 3: the card's own list ----------------------------------- */

	.cbs-nav__view,
	.cbs-nav__view.is-active {
		display: none !important;
	}

	.cbs-nav__view.is-open {
		display: block !important;
		margin-bottom: 12px !important;
		padding: 0 5px 10px !important;
		border-radius: 0 0 var(--cbs-nav-radius-md) var(--cbs-nav-radius-md) !important;
		background: var(--cbs-nav-card-bg) !important;
	}

	/* Everything the artboard drops on small screens */
	.cbs-nav__view .cbs-nav__intro,
	.cbs-nav__view .cbs-nav__media,
	.cbs-nav__view .cbs-nav__aside {
		display: none !important;
	}

	.cbs-nav__view.is-open .cbs-nav__body,
	.cbs-nav__view.is-open .cbs-nav__intro + .cbs-nav__body {
		display: block !important;
		padding: 12px 0 0 !important;
		border-top: 1px solid var(--cbs-nav-rule) !important;
	}

	.cbs-nav__view.is-open .cbs-nav__grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 20px !important;
		padding: 0 10px !important;
	}

	.cbs-nav__view.is-open .cbs-nav__card,
	.cbs-nav__view.is-open .cbs-nav__card--tall {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		grid-row: auto !important;
		gap: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	.cbs-nav__view.is-open .cbs-nav__card .cbs-nav__tile,
	.cbs-nav__view.is-open .cbs-nav__card .cbs-nav__arrow {
		display: none !important;
	}

	.cbs-nav__view.is-open .cbs-nav__card-label,
	.cbs-nav__view.is-open .cbs-nav__card:hover .cbs-nav__card-label {
		color: var(--cbs-nav-gray) !important;
	}

	.cbs-nav__view.is-open .cbs-nav__card:hover .cbs-nav__card-label {
		color: var(--cbs-nav-blue) !important;
	}
}

/* ---------------------------------------------------------------------------
 * 11a. Tablet — buttons stay in the bar, so the list alone is the panel
 * ------------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {
	.cbs-nav__collapse {
		display: contents !important;
	}

	.cbs-nav__actions {
		order: 0 !important;
		margin-left: auto !important;
		margin-right: 20px !important;
	}

	.cbs-nav__btn {
		min-height: 33px !important;
		padding: 10px 20px !important;
	}

	.cbs-nav__list {
		position: fixed !important;
		top: var(--cbs-nav-panel-top) !important;
		left: 0 !important;
		right: 0 !important;
		max-height: calc(100vh - var(--cbs-nav-panel-top) - 12px) !important;
		padding: 10px 0 26px !important;
		border-radius: var(--cbs-nav-radius) !important;
		background: var(--cbs-nav-panel-bg) !important;
		box-shadow: var(--cbs-nav-shadow) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateY(-8px) !important;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
		z-index: 2 !important;
	}

	.cbs-nav.is-drawer-open .cbs-nav__list {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s !important;
	}
}

/* ---------------------------------------------------------------------------
 * 11b. Mobile — buttons move into the panel, so the whole collapse is the panel
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.cbs-nav__collapse {
		position: fixed !important;
		top: var(--cbs-nav-panel-top) !important;
		left: 0 !important;
		right: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		max-height: calc(100vh - var(--cbs-nav-panel-top) - 12px) !important;
		padding: 10px 0 26px !important;
		border-radius: var(--cbs-nav-radius) !important;
		background: var(--cbs-nav-panel-bg) !important;
		box-shadow: var(--cbs-nav-shadow) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateY(-8px) !important;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
		z-index: 2 !important;
	}

	.cbs-nav.is-drawer-open .cbs-nav__collapse {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s !important;
	}

	/*
	 * Square, not rounded. The two artboards genuinely differ here: the tablet
	 * frame keeps the 20px radius, but the mobile frame runs the bar and the
	 * panel full-bleed with square corners — traced off the artboard, where the
	 * fill reaches x=0 on every row instead of curving in. The 4px gap between
	 * them stays either way.
	 */
	.cbs-nav__inner,
	.cbs-nav__collapse {
		border-radius: 0 !important;
	}

	/* Two equal columns, 175 + 12 + 175 inside a 390 panel */
	.cbs-nav__actions {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
		margin-top: 25px !important;
		padding: 0 14px !important;
	}

	.cbs-nav__btn {
		min-height: 33px !important;
		padding: 10px 20px !important;
		font-size: var(--cbs-nav-fs-menu) !important;
	}
}

/* ---------------------------------------------------------------------------
 * 12. Preferences
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.cbs-nav *,
	.cbs-nav *::before,
	.cbs-nav *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/*
 * Progressive enhancement lives in a <noscript> block in the markup, not here
 * — see Clarity_Nav_Render::render(). A class the JS has to remove would show
 * every panel expanded until the script ran.
 */