/* Caps Cases mobile navigation */
.ccm {
	--ccm-navy-1: #1f2468;
	--ccm-navy-2: #131849;
	--ccm-navy-3: #0d1133;
	--ccm-purple: #7b62df;
	--ccm-purple-2: #5f49ca;
	--ccm-lilac: #b7a6ff;
	--ccm-line: rgba(255, 255, 255, .10);
	--ccm-card: rgba(255, 255, 255, .045);
	--ccm-card-line: rgba(255, 255, 255, .12);
	--ccm-muted: rgba(235, 238, 255, .68);
	--ccm-ease: cubic-bezier(.2, .8, .2, 1);
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: inherit;
}
.ccm[hidden] { display: none; }
html.ccm-locked, html.ccm-locked body { overflow: hidden; }

.ccm-overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 10, 30, .55);
	opacity: 0;
	transition: opacity .3s var(--ccm-ease);
}
.ccm.is-open .ccm-overlay { opacity: 1; }

.ccm-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(86vw, 380px);
	display: flex;
	flex-direction: column;
	color: #fff;
	background: linear-gradient(180deg, var(--ccm-navy-1) 0%, var(--ccm-navy-2) 45%, var(--ccm-navy-3) 100%);
	box-shadow: -12px 0 40px rgba(0, 0, 0, .35);
	transform: translateX(100%);
	transition: transform .36s var(--ccm-ease);
	padding-top: env(safe-area-inset-top, 0);
}
.ccm.is-open .ccm-nav { transform: none; }
/* side="left" */
.ccm[data-side="left"] .ccm-nav { right: auto; left: 0; box-shadow: 12px 0 40px rgba(0, 0, 0, .35); transform: translateX(-100%); }
.ccm[data-side="left"].is-open .ccm-nav { transform: none; }

.ccm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ccm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ccm a { text-decoration: none; }
:where(.ccm) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: inherit; min-height: 0; box-shadow: none; }
.ccm :focus-visible { outline: 2px solid var(--ccm-lilac); outline-offset: 3px; border-radius: 10px; }

/* Header: close, logo, login */
.ccm-top { padding: 14px 18px 12px 20px; }
.ccm-close { display: flex; margin-left: auto; width: 36px; height: 36px; align-items: center; justify-content: center; }
.ccm-close svg { width: 22px; height: 22px; }
.ccm-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.ccm-logo { color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.ccm-logo-img { display: block; height: 22px; width: auto; } /* supply a white or transparent logo; the panel is dark */
.ccm-login { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 600; }
.ccm-login svg { width: 16px; height: 16px; }

/* Screens slide within the viewport */
.ccm-viewport { position: relative; flex: 1; overflow: hidden; }
.ccm-screen {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 18px 28px 20px;
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .34s var(--ccm-ease), opacity .25s var(--ccm-ease), visibility 0s linear .34s;
}
#ccm-main:not(.is-active) { transform: translateX(-24%); }
.ccm-screen.is-active { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }

/* Main list */
.ccm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccm-line); }
.ccm-list li { margin: 0; border-bottom: 1px solid var(--ccm-line); }
.ccm-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 0; color: #fff; font-size: 17px; font-weight: 600; text-align: left; }
.ccm-label { flex: 1; }
.ccm-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(123, 98, 223, .22); color: var(--ccm-lilac); font-size: 15px; }
.ccm-go { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ccm-lilac); }
.ccm-go--plus { border: 1px solid rgba(183, 166, 255, .45); border-radius: 50%; }
.ccm-go--plus svg { width: 16px; height: 16px; }
.ccm-row[aria-current="page"] .ccm-label { color: var(--ccm-lilac); }

/* Calls to action */
.ccm-ctas { display: grid; gap: 12px; margin-top: 30px; }
.ccm-btn { display: flex; align-items: stretch; min-height: 52px; border-radius: 12px; overflow: hidden; color: #fff; font-weight: 700; font-size: 15px; }
.ccm-btn > span:first-child { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.ccm-btn-ico { display: flex; align-items: center; justify-content: center; width: 52px; }
.ccm-btn--quote { background: linear-gradient(135deg, var(--ccm-purple) 0%, #6d5ad5 100%); }
.ccm-btn--quote .ccm-btn-ico { border-left: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .08); }
.ccm-btn--ghost { border: 1px solid rgba(255, 255, 255, .7); }

/* Sub-screen heading */
.ccm-screen-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; }
.ccm-back { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(123, 98, 223, .3); color: #fff; }
.ccm-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ccm-muted); }
.ccm-title { margin: 0; padding: 0; color: #fff; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }

/* Accordion cards (Product) */
.ccm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ccm-card { margin: 0; border: 1px solid var(--ccm-card-line); border-radius: 12px; background: var(--ccm-card); overflow: hidden; }
.ccm-card.is-open { border-color: rgba(183, 166, 255, .45); }
.ccm-card-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; }
.ccm-card .ccm-ico { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
.ccm-card-link { flex: 1; color: #fff; font-size: 14px; font-weight: 700; }
.ccm-arrow { color: var(--ccm-lilac); font-weight: 400; }
.ccm-chev { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(183, 166, 255, .45); color: #fff; }
.ccm-chev svg { width: 16px; height: 16px; transition: transform .25s var(--ccm-ease); }
.ccm-chev[aria-expanded="true"] { background: var(--ccm-purple); border-color: var(--ccm-purple); }
.ccm-chev[aria-expanded="true"] svg { transform: rotate(180deg); }
.ccm-sub { list-style: none; margin: 0; padding: 0 0 4px; border-top: 1px solid var(--ccm-line); }
.ccm-sub li { margin: 0; border-bottom: 1px solid var(--ccm-line); }
.ccm-sub li:last-child { border-bottom: 0; }
.ccm-sub-link { display: block; padding: 11px 14px 11px 28px; position: relative; color: rgba(255, 255, 255, .88); font-size: 13px; }
.ccm-sub-link::before { content: "\203A"; position: absolute; left: 14px; color: var(--ccm-lilac); }
.ccm-sub-link[aria-current="page"] { color: var(--ccm-lilac); }

/* Tile grid (Services) */
.ccm-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ccm-tiles li { margin: 0; }
.ccm-tile { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px; border: 1px solid var(--ccm-card-line); border-radius: 12px; background: var(--ccm-card); color: #fff; }
.ccm-tile .ccm-ico { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
.ccm-tile-t { font-size: 13px; font-weight: 700; line-height: 1.25; }
.ccm-tile-d { font-size: 11.5px; line-height: 1.4; color: var(--ccm-muted); }
.ccm-tile[aria-current="page"] { border-color: rgba(183, 166, 255, .6); }

/* Hamburger (shown below the breakpoint; hidden on desktop) */
.ccm-toggle { display: none; width: 44px; height: 44px; padding: 11px 9px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: space-between; }
.ccm-toggle span { display: block; height: 2.5px; border-radius: 2px; background: #111430; }
@media (max-width: 900px) {
	.ccm-toggle { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
	.ccm-nav, .ccm-overlay, .ccm-screen, .ccm-chev svg { transition: none; }
}