/* ==========================================================================
   CoolSys Mega Menu
   Tokens: panel bg #fff · accent #005eff · strip bg #f1f1f1 · type Poppins
   ========================================================================== */

   .cmm-nav {
	--cmm-nav-height: 100px;
}

@media (max-width: 900px) {
	.cmm-nav {
		/* 20px pad + 24px logo + 20px pad = 64px bar (Figma 1597:981) */
		--cmm-nav-height: 64px;
	}
}

.cmm-nav,
.cmm-nav * {
	box-sizing: border-box;
}

/* ---------- Reset to neutralize theme / Elementor bleed ---------- */

.cmm-nav button,
.cmm-nav a {
	background: transparent;
	border: 0;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	border-radius: 0;
	font-family: inherit;
	letter-spacing: normal;
	min-height: 0;
}

.cmm-nav button {
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

.cmm-nav ul,
.cmm-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmm-nav a:hover,
.cmm-nav button:hover,
.cmm-nav a:focus,
.cmm-nav button:focus,
.cmm-nav a:active,
.cmm-nav button:active {
	text-decoration: none !important;
	outline: none;
	/* NOTE: don't blanket-reset background, box-shadow, or border here —
	   those properties carry meaning on individual elements (cards, buttons,
	   etc.) and the per-element rules below set them intentionally. */
}

.cmm-nav a:focus-visible,
.cmm-nav button:focus-visible {
	outline: 2px solid #005eff;
	outline-offset: 2px;
}

.cmm-nav {
	font-family: "Poppins", system-ui, sans-serif;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #fff;
	padding: 32px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--cmm-nav-height);
	box-sizing: border-box;
	/* NOTE: do not add backdrop-filter, transform, filter, perspective, or contain
	   on .cmm-nav itself — any of those create a containing block for the
	   position: fixed panel inside, which breaks its full-viewport sizing.
	   For Figma's blurred mobile bar we apply backdrop-filter to a ::before
	   pseudo-element instead (see the mobile media query). */
}

/* ---------- Nav inner (logo + mobile toggle) ---------- */

.cmm-nav-inner {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 48px;
}

/* ---------- Logo ---------- */

.cmm-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.cmm-logo-img {
	height: 35px !important;
	width: auto !important;
	max-width: 200px !important;
	display: block;
	object-fit: contain;
}

/* Page content needs ~115px of top breathing room so it isn't hidden behind
   the fixed nav. Apply on the page wrapper or via Elementor's Site Settings. */

.cmm-admin-notice {
	padding: 12px 16px;
	background: #fff3cd;
	border: 1px solid #ffeeba;
	color: #856404;
	font-family: inherit;
}

/* ---------- Top-level row ---------- */

.cmm-top-level {
	display: flex;
	align-items: center;
	gap: 48px;
}

.cmm-top-item {
	position: static; /* panel anchors to .cmm-nav, not the item */
}

.cmm-nav .cmm-top-link {
	font-family: "Poppins", system-ui, sans-serif !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	color: #000 !important;
	background: transparent !important;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none !important;
	text-transform: none !important;
	display: inline-block;
	line-height: normal;
	letter-spacing: normal;
	white-space: nowrap;
}

.cmm-nav .cmm-top-link:hover,
.cmm-nav .cmm-top-link[aria-expanded="true"],
.cmm-nav .cmm-top-item.cmm-active > .cmm-top-link {
	color: #005eff !important;
	background: transparent !important;
}

/* ---------- Panel (fullscreen below the nav, white) ---------- */

.cmm-panel {
	position: fixed;
	top: var(--cmm-nav-height);
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	padding: 0;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	pointer-events: none;
	transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 320ms;
	z-index: 99; /* below the nav (100) so the nav stays clickable */
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 44px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile-only back button at the top of the panel.
   Hidden on desktop and at depth 2+ on mobile (the grid-view's own
   header shows the parent-name back link instead).
   NOTE: needs !important because .cmm-mobile-back also carries .cmm-back,
   which gets display:inline-flex from `.cmm-nav .cmm-back` (specificity 0,2,0). */
.cmm-nav .cmm-mobile-back {
	display: none !important;
}

.cmm-top-item.cmm-active > .cmm-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* When switching directly from one open panel to another, JS adds .cmm-switching
   to the nav for a single frame. Disabling transitions for that window makes the
   swap instant — visually it reads as the same panel's content changing rather
   than two panels cross-fading and revealing the page behind. Also kill the
   grid-view's slide-in animation in that window so the new panel doesn't pop. */
.cmm-nav.cmm-switching .cmm-panel,
.cmm-nav.cmm-switching .cmm-grid-view {
	transition: none !important;
	animation: none !important;
}

/* Inner panel layout — body stays content-sized; strip pins to panel bottom.
   NOTE: .cmm-bottom-strip is a direct child of .cmm-panel (sibling of
   .cmm-panel-inner), not nested inside .cmm-panel-inner — see class-renderer.php */
.cmm-panel > .cmm-panel-inner {
	/* Grow when content is short (strip pins to bottom via margin-top:auto on
	   the strip), but never shrink below content — avoids cards painting over
	   the bottom strip when a grid has 3+ rows. */
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

.cmm-panel .cmm-panel-body {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 10px;
	padding: 40px;
}

.cmm-panel > .cmm-bottom-strip {
	flex: 0 0 auto;
	margin-top: auto;
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Intro card (left, swaps per drill level) ---------- */

.cmm-intro-stack {
	grid-column: 1 / span 4;
	position: relative;
	align-self: start;
	min-height: min-content;
}

.cmm-intro-card {
	background: #f1f1f1;
	border-radius: 24px;
	padding: 24px;
}

.cmm-intro-card[hidden] {
	display: none;
}

.cmm-intro-card.cmm-intro-card--active {
	animation: cmm-grid-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cmm-nav.cmm-switching .cmm-intro-card {
	animation: none !important;
}

.cmm-nav .cmm-intro-learn-more {
	display: inline-block;
	margin-top: 16px;
	color: #005eff !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.cmm-nav .cmm-intro-learn-more:hover,
.cmm-nav .cmm-intro-learn-more:focus {
	text-decoration: underline !important;
}

.cmm-nav .cmm-intro-title {
	color: #000 !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 32px !important;
	font-weight: 600 !important;
	margin: 0 0 16px !important;
	line-height: 1.05 !important;
	letter-spacing: 0 !important;
}

.cmm-nav .cmm-intro-desc p {
	color: #000 !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	margin: 0 0 16px !important;
}

.cmm-nav .cmm-intro-desc p:last-child {
	margin-bottom: 0 !important;
}

/* ---------- Grid stack (right, swaps as user drills) ---------- */

.cmm-grid-stack {
	grid-column: 5 / span 8;
	position: relative;
	/* Let the stack size to its active grid-view (don't collapse in the panel grid). */
	min-height: min-content;
}

.cmm-grid-view {
	display: none;
}

.cmm-grid-view.cmm-grid-view--active {
	display: block;
	animation: cmm-grid-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cmm-grid-in {
	from {
		opacity: 0;
		transform: translateX(10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ---------- Card grid (inside each grid-view) ---------- */

.cmm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 24px;
	align-content: start;
}

/* Back header spans both columns at the top of the grid */
.cmm-grid-header {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: 12px 0;
}

.cmm-nav .cmm-back {
	background: transparent !important;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	color: #005eff !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: color 160ms ease, transform 160ms ease;
}

.cmm-nav .cmm-back:hover {
	transform: translateX(-2px);
}

.cmm-nav .cmm-back-arrow,
.cmm-nav .cmm-back-label {
	text-transform: none !important;
	letter-spacing: normal !important;
}

.cmm-back-arrow {
	color: #000;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}

/* ---------- Cards ---------- */

.cmm-nav .cmm-card {
	background: #fff !important;
	border-radius: 24px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 24px !important;
	cursor: pointer;
	text-align: left;
	text-decoration: none !important;
	text-transform: none !important;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	font-family: "Poppins", system-ui, sans-serif !important;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.cmm-nav .cmm-card:hover,
.cmm-nav .cmm-card:focus-visible {
	border: 1px solid #005eff !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
	outline: none;
}

.cmm-card-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.cmm-card-title {
	color: #000;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	white-space: normal;
}

.cmm-card-desc {
	color: #6c6c6c;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.cmm-card-arrow {
	color: #000;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	flex: 0 0 auto;
	align-self: center;
	transition: transform 180ms ease, color 180ms ease;
}

.cmm-nav .cmm-card:hover .cmm-card-arrow {
	color: #005eff;
	transform: translateX(3px);
}

/* Leaf cards: "View Page" is stacked below the description, no arrow */
.cmm-card-view-page {
	color: #176cfb;
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
}

/* ---------- Bottom strip (desktop): #f1f1f1 gray section ----------
   Markup: .cmm-bottom-strip > .cmm-bottom-strip-inner > (.cmm-spotlights + .cmm-utility)
   Flex row must live on -inner; the outer strip is only the gray shell. */

.cmm-bottom-strip {
	background: #f1f1f1;
	padding: 40px;
}

.cmm-bottom-strip-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.cmm-spotlights {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* The "SPOTLIGHTS" header no longer appears in the Figma design — hide it but
   keep the markup in case we re-introduce a section label later. */
.cmm-spotlights-title {
	display: none !important;
}

.cmm-spotlight-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	flex: 1 1 auto;
}

.cmm-spotlight-card {
	background-color: #fff;
	background-size: cover;
	background-position: center;
	border-radius: 24px;
	height: 260px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 24px;
	box-sizing: border-box;
	transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 240ms ease;
}

.cmm-spotlight-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.18);
}

.cmm-nav .cmm-spotlight-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 24px !important;
	background: #005eff !important;
	color: #fff !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	text-decoration: none !important;
	text-transform: none !important;
	border-radius: 1000px !important;
	transition: background 160ms ease;
}

.cmm-nav .cmm-spotlight-button:hover {
	background: #0048cc !important;
}

.cmm-spotlight-empty {
	background-color: #fff;
}

/* Vertical divider between spotlights and utility column */
.cmm-bottom-strip::after {
	content: none;
}

.cmm-utility {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-left: 48px;
	border-left: 1px solid #d9d9d9;
}

.cmm-utility-links {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cmm-nav .cmm-utility-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: #000 !important;
	text-decoration: none !important;
	text-transform: none !important;
	padding: 0 !important;
	transition: color 160ms ease;
}

.cmm-nav .cmm-utility-link:hover {
	color: #005eff !important;
}

.cmm-utility-link::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex: 0 0 auto;
}

.cmm-utility-careers::before   { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23005eff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>'); }
.cmm-utility-resources::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23005eff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/><path d="M18 14h-8"/><path d="M15 18h-5"/><path d="M10 6h8v4h-8z"/></svg>'); }
.cmm-utility-locations::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23005eff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>'); }
.cmm-utility-contact::before   { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23005eff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>'); }

/* Search: pill container with a 42px circular blue button inset on the right */
.cmm-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 326px;
	max-width: 100%;
	padding: 4px 4px 4px 24px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 1000px;
	box-sizing: border-box;
}

.cmm-nav .cmm-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: #000 !important;
	border-radius: 0 !important;
	outline: none;
	-webkit-appearance: none;
}

.cmm-nav .cmm-search input[type="search"]::placeholder {
	color: #000;
	opacity: 1;
}

.cmm-nav .cmm-search button {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	background: #005eff !important;
	color: #fff !important;
	border: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: background 160ms ease;
}

.cmm-nav .cmm-search button > span {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-size: 0;
}

.cmm-nav .cmm-search button:hover {
	background: #0048cc !important;
}

/* ---------- Mobile ---------- */

.cmm-nav .cmm-mobile-toggle,
.cmm-nav .cmm-mobile-toggle:hover,
.cmm-nav .cmm-mobile-toggle:focus,
.cmm-nav .cmm-mobile-toggle:active,
.cmm-nav .cmm-mobile-toggle[aria-expanded="true"] {
	display: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 12px;
	cursor: pointer;
	margin-left: auto;
}

.cmm-hamburger,
.cmm-hamburger::before,
.cmm-hamburger::after {
	display: block;
	width: 28px;
	height: 3px;
	background: #005eff;
	border-radius: 2px;
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cmm-hamburger::before,
.cmm-hamburger::after {
	content: "";
	position: absolute;
	left: 0;
}

.cmm-hamburger::before { top: -9px; }
.cmm-hamburger::after  { top: 9px; }

.cmm-mobile-footer {
	display: none;
}

@media (max-width: 900px) {

	/* Mobile bar: .cmm-nav-inner holds only logo + toggle; drawer <ul> is a
	   sibling so theme flex rules can't trap the hamburger beside the logo. */
	.cmm-nav {
		display: block !important;
		padding: 0 !important;
		background: transparent;
		min-height: var(--cmm-nav-height);
		width: 100%;
	}

	.cmm-nav-inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		min-height: var(--cmm-nav-height);
		padding: 20px 16px !important;
		box-sizing: border-box;
		position: relative;
		z-index: 101;
		gap: 16px;
	}

	.cmm-nav .cmm-mobile-toggle,
	.cmm-nav .cmm-mobile-toggle:hover,
	.cmm-nav .cmm-mobile-toggle:focus,
	.cmm-nav .cmm-mobile-toggle:active,
	.cmm-nav .cmm-mobile-toggle[aria-expanded="true"] {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		margin-left: 0 !important;
		padding: 4px !important;
		min-height: 24px;
		min-width: 30px;
	}

	/* backdrop-filter cannot live on .cmm-nav itself (it would create a containing
	   block for the position:fixed panel/drawer inside). Apply it to a pseudo
	   instead so the blur effect is decoupled from layout. */
	.cmm-nav::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		z-index: -1;
		pointer-events: none;
	}

	.cmm-logo-img {
		height: 24px !important;
		max-width: 120px !important;
	}

	/* Hamburger: black, thin. Morphs into an X when drawer is open. */
	.cmm-hamburger,
	.cmm-hamburger::before,
	.cmm-hamburger::after {
		background: #000;
		width: 22px;
		height: 2px;
		transition: transform 200ms ease, opacity 200ms ease, top 200ms ease;
	}

	.cmm-hamburger::before { top: -7px; }
	.cmm-hamburger::after  { top: 7px; }

	.cmm-mobile-toggle[aria-expanded="true"] .cmm-hamburger {
		background: transparent;
	}

	.cmm-mobile-toggle[aria-expanded="true"] .cmm-hamburger::before {
		top: 0;
		transform: rotate(45deg);
	}

	.cmm-mobile-toggle[aria-expanded="true"] .cmm-hamburger::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* Drawer: full-screen list, opens on hamburger tap.
	   Background is white so any empty space inside (e.g. when a drilled panel
	   has only one card) reads as the panel extending, not as a gray gap.
	   position:fixed keeps it out of the header grid. */
	.cmm-nav > .cmm-top-level {
		display: none !important;
		position: fixed;
		top: var(--cmm-nav-height);
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
		z-index: 99;
		overflow-y: auto;
	}

	.cmm-nav.cmm-mobile-open > .cmm-top-level {
		display: flex !important;
	}

	.cmm-top-item {
		border-bottom: 1px solid rgba(15, 23, 42, 0.08);
		background: #fff;
	}

	.cmm-nav .cmm-top-link {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100%;
		padding: 22px 24px !important;
		font-size: 22px !important;
		font-weight: 600 !important;
		color: #0f172a !important;
	}

	.cmm-has-panel > .cmm-top-link::after {
		content: "›";
		color: inherit;
		font-size: 24px;
		font-weight: 400;
	}

	/* Hide siblings when one top-level is drilled into (push-nav feel). */
	.cmm-top-level:has(.cmm-top-item.cmm-mobile-open) .cmm-top-item:not(.cmm-mobile-open) {
		display: none;
	}

	/* Hide the top-link of the active item — the panel header takes its place. */
	.cmm-top-item.cmm-mobile-open > .cmm-top-link {
		display: none !important;
	}

	/* Open top-item: keep flex column for layout of .cmm-panel inside,
	   but DON'T flex-grow it. The panel sizes to its content, the drawer
	   scrolls if total content exceeds the viewport, and the footer pins
	   to the bottom only when there's extra room. */
	.cmm-top-item.cmm-mobile-open {
		border-bottom: 0;
		display: flex;
		flex-direction: column;
	}

	/* Push the footer to the bottom of the drawer when content doesn't fill
	   the viewport. If content overflows, the drawer scrolls and this auto
	   margin collapses to 0 naturally. */
	.cmm-nav .cmm-mobile-footer {
		margin-top: auto;
	}

	/* Panel: occupies the drawer below the nav.
	   overflow: visible (not the desktop overflow-y: auto) so card content
	   grows the panel naturally — the parent drawer scrolls when total
	   content exceeds the viewport, rather than the panel scrolling internally.
	   Horizontal padding lives on the panel so the back link, intro card, and
	   cards share one gutter (avoids each child fighting theme resets). */
	.cmm-top-item.cmm-mobile-open > .cmm-panel > .cmm-panel-inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
		padding-bottom: 24px !important;
		box-sizing: border-box;
	}

	.cmm-panel {
		position: static;
		padding-top: 0;
		padding-bottom: 0;
		box-shadow: none;
		background: transparent;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto !important;
		display: flex;
		flex-direction: column;
		overflow: visible;
	}

	.cmm-top-item:not(.cmm-mobile-open) > .cmm-panel {
		display: none !important;
	}

	/* Override the desktop 12-col grid — children stack vertically on mobile */
	.cmm-panel .cmm-panel-body {
		display: block;
		padding: 16px 0 32px !important;
	}

	.cmm-intro-stack {
		grid-column: auto;
	}

	.cmm-intro-card {
		padding: 16px;
		border-radius: 12px;
		margin-bottom: 16px;
	}

	.cmm-nav .cmm-intro-title {
		font-size: 24px !important;
		margin-bottom: 16px !important;
	}

	.cmm-nav .cmm-intro-desc p {
		font-size: 16px !important;
	}

	.cmm-grid-stack {
		grid-column: auto;
	}

	/* Mobile-only back button at panel top — visible only at depth 1 (root view active).
	   Uses a JS-managed class on .cmm-panel rather than :has() for reliability across
	   older mobile browsers. */
	.cmm-nav .cmm-panel.cmm-panel--at-root .cmm-mobile-back {
		display: inline-flex !important;
		padding: 16px 0 0 !important;
	}

	/* Deeper grid-views: the back link sits above the cards. The section title
	   now lives in the swapping intro card above, so the header holds only Back. */
	.cmm-grid-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px 0 4px;
	}

	.cmm-nav .cmm-intro-title {
		font-size: 28px !important;
		margin-bottom: 12px !important;
	}

	/* Cards stack 1-col on mobile */
	.cmm-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.cmm-nav .cmm-card {
		padding: 16px 20px !important;
		border-radius: 12px;
	}

	.cmm-card-desc {
		display: none;
	}

	/* Show the desktop bottom strip on mobile too, stacked; hide the legacy mobile-footer */
	.cmm-bottom-strip {
		display: none;
	}

	/* NOTE: needs the .cmm-nav prefix to beat the `.cmm-nav li { padding: 0 }`
	   reset (specificity 0,2,0) — otherwise "Careers/Resources" text sits flush
	   against the viewport edge. Background is #f1f1f1 to match the desktop
	   bottom strip per client direction. */
	.cmm-nav .cmm-mobile-footer {
		display: block;
		background: #f1f1f1;
		padding: 28px 24px 32px !important;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	/* .cmm-nav prefix beats the `.cmm-nav ul { margin: 0 }` reset
	   (specificity 0,2,0) — without it, my margin-bottom drops to 0 and the
	   utility list sits flush against the search pill. */
	.cmm-nav .cmm-mobile-utility {
		list-style: none;
		margin: 0 0 24px;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.cmm-mobile-utility li {
		display: block;
	}

	/* Override the desktop .cmm-utility-link rule for mobile sizing/weight.
	   The ::before pseudo-element from the desktop rule still supplies the
	   SVG icon (search / newspaper / pin / phone) — we only adjust the
	   typography to match Figma (Poppins 500 / 18px / black). */
	.cmm-nav .cmm-mobile-utility .cmm-utility-link {
		display: inline-flex !important;
		align-items: center !important;
		gap: 12px !important;
		color: #000 !important;
		font-size: 18px !important;
		font-weight: 500 !important;
		text-decoration: none !important;
		padding: 0 !important;
	}

	.cmm-nav .cmm-mobile-utility .cmm-utility-link:hover,
	.cmm-nav .cmm-mobile-utility .cmm-utility-link:focus {
		color: #005eff !important;
	}

	.cmm-mobile-footer .cmm-search {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.cmm-mobile-footer .cmm-search input[type="search"] {
		min-width: 0;
		width: 100%;
	}

	/* Belt-and-suspenders: keep the drawer from causing horizontal scroll
	   when a child (e.g. the search pill) tries to overflow. */
	.cmm-top-level {
		overflow-x: hidden;
	}

	.cmm-mobile-footer {
		box-sizing: border-box;
		width: 100%;
	}
}