#main-header .menu-item.cgi-mega{position:relative}
	/* panel = transparent wrapper; the visible box is .cgi-mega-inner. padding-top bridges the hover gap so the cursor never leaves the :hover area */
	.cgi-mega-panel{display:none;position:absolute;top:100%;z-index:999;padding-top:.6rem}
	.cgi-mega-services .cgi-mega-panel{left:50%;transform:translateX(-50%);width:min(1080px,94vw)}
	/* insights is the rightmost item: right-anchored fallback so the panel never spills off-screen (JS refines to a viewport clamp) */
	.cgi-mega-insights .cgi-mega-panel{right:0;left:auto;transform:none;width:min(760px,92vw)}
	#main-header .menu-item.cgi-mega:hover .cgi-mega-panel,#main-header .menu-item.cgi-mega:focus-within .cgi-mega-panel,#main-header .menu-item.cgi-mega.cgi-open .cgi-mega-panel{display:block}
	.cgi-mega-thumb video{width:100%;height:100%;object-fit:cover;display:block}
	.cgi-mega-inner{display:flex;gap:1.5rem;background:#fff;color:#111;box-shadow:0 20px 50px rgba(0,0,0,.16);border-radius:14px;padding:1.5rem}
	.cgi-mega-panel-services .cgi-mega-inner{justify-content:space-between}
	.cgi-mega-col{flex:1 1 0;min-width:0}
	.cgi-mega-card{flex:1 1 0;text-decoration:none;color:inherit}
	.cgi-mega-group,.cgi-mega-card{display:block;text-decoration:none;color:inherit}
	.cgi-mega-thumb{display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#f3f4f6;margin-bottom:.6rem}
	.cgi-mega-thumb img{width:100%;height:100%;object-fit:cover;display:block}
	.cgi-mega-title{display:block;font-weight:700;font-size:1.02rem;margin-bottom:.5rem;color:#111}
	/* prod hover = underline, color unchanged (no blue) */
	.cgi-mega-group:hover,.cgi-mega-card:hover{text-decoration:underline;color:inherit}
	.cgi-mega-group:hover .cgi-mega-title,.cgi-mega-card:hover .cgi-mega-title{color:inherit}
	.cgi-mega-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
	.cgi-mega-links a{color:#374151;text-decoration:none;font-size:.9rem}
	.cgi-mega-links a:hover{color:#374151;text-decoration:underline}
	/* desktop-only expand toggle (mobile drawer accordion) */
	.cgi-mega-mtoggle{display:none}
	@media(max-width:900px){
		/* mega panel becomes an inline collapsible list inside the dark mobile drawer
		   (override the desktop services/insights left:50%+translateX positioning, which would clip it) */
		.cgi-mega-panel{display:none;position:static!important;width:auto!important;left:auto!important;right:auto!important;transform:none!important;padding:0;z-index:auto}
		.menu-item.cgi-mega.cgi-mobile-open > .cgi-mega-panel{display:block}
		.cgi-mega-panel .cgi-mega-inner{flex-direction:column;background:transparent;color:inherit;box-shadow:none;border-radius:0;padding:.25rem 0 1rem;gap:1.1rem}
		.cgi-mega-panel .cgi-mega-thumb{display:none}
		.cgi-mega-panel .cgi-mega-title{color:inherit;font-size:.95rem;margin-bottom:.35rem;opacity:.95}
		.cgi-mega-panel .cgi-mega-links a,.cgi-mega-panel .cgi-mega-card{color:inherit}
		.cgi-mega-panel .cgi-mega-links a{opacity:.7;font-size:.92rem}
		.cgi-mega-panel .cgi-mega-card{padding:.15rem 0}
		.mobile-navigation .menu-item.cgi-mega,#mobile-menu .menu-item.cgi-mega{display:flex;flex-wrap:wrap;align-items:center}
		.mobile-navigation .menu-item.cgi-mega > a,#mobile-menu .menu-item.cgi-mega > a{flex:1 1 0;min-width:0;width:auto!important}
		.mobile-navigation .menu-item.cgi-mega > .cgi-mega-panel,#mobile-menu .menu-item.cgi-mega > .cgi-mega-panel{flex:1 1 100%;width:100%;order:3}
		.cgi-mega-mtoggle{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;margin-left:auto;background:transparent;border:0;cursor:pointer;color:inherit;flex:0 0 auto}
		/* Kadence button:focus/:active paints the expand arrow as a sky square after a tap */
		.cgi-mega-mtoggle:hover,.cgi-mega-mtoggle:focus,.cgi-mega-mtoggle:active{background:transparent!important;box-shadow:none!important;outline:none!important}
		/* Mobile font boosting made plain rows (block <a>) inflate to ~22px while the mega rows
		   (flex <a> beside the arrow) stayed put — user device showed 22 vs 16. Pin an explicit
		   16px on every top-level drawer link, disable text autosizing, and give ALL rows the
		   same flex layout so every platform treats them identically. */
		.mobile-navigation ul.menu > li{display:flex;flex-wrap:wrap;align-items:center}
		.mobile-navigation ul.menu > li > a{flex:1 1 0;min-width:0;width:auto!important;font-size:16px!important;-webkit-text-size-adjust:100%;text-size-adjust:100%;max-height:999999px}
		/* the drawer divider lives on the <a>; a mega item <a> is flex:1 (arrow beside it) so its
		   border stopped 40px short of the other rows — move the divider to the full-width <li> */
		.mobile-navigation li.menu-item.cgi-mega{border-bottom:1px solid rgba(255,255,255,.1)}
		.mobile-navigation li.menu-item.cgi-mega > a{border-bottom:0!important}
		.cgi-mega-mtoggle::before{content:"";width:.7rem;height:.7rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.15rem);transition:transform .2s}
		.menu-item.cgi-mega.cgi-mobile-open .cgi-mega-mtoggle::before{transform:rotate(-135deg) translateY(-.15rem)}
	}