/*
 * Mega menu.
 *
 * The panel is a sibling of the nav, not a descendant of the item that opens
 * it — that is what lets it span the viewport instead of being clipped by an
 * ancestor's overflow. Only opacity, transform and visibility ever change, so
 * opening one costs no layout.
 */

.cq-mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 88;
}
.cq-mega[hidden] { display: none; }

.cq-mega__panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	background: linear-gradient(180deg, var(--mega-bg, #111921) 0%, var(--mega-bg2, #05070A) 100%);
	border-end-start-radius: var(--mega-radius, 0);
	border-end-end-radius: var(--mega-radius, 0);
	border-block: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 34px 70px -22px rgba(0,0,0,.72);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -12px, 0);
	pointer-events: none;
	transition:
		opacity 260ms var(--e-ui),
		transform 420ms cubic-bezier(.16,1,.3,1),
		visibility 420ms;
}
.cq-mega__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* A tint bar across the top identifies which pillar is open. */
.cq-mega__panel::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 0;
	height: 2px;
	background: var(--tint);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 620ms cubic-bezier(.16,1,.3,1);
}
.cq-mega__panel.is-open::before { transform: scaleX(1); }

.cq-mega__in {
	display: grid;
	grid-template-columns: minmax(190px, var(--mega-aside-w, 26%)) minmax(0, 1fr);
	gap: clamp(28px, 3.6vw, 64px);
	padding-block: min(var(--mega-pad, 46px), 8vw);
	align-items: start;
}

/* ------------------------------------------------------------------ Aside */
.cq-mega__aside { position: relative; padding-inline-start: 18px; }
.cq-mega__tint {
	position: absolute;
	inset-block: 2px auto;
	inset-inline-start: 0;
	width: 3px;
	height: 46px;
	background: var(--tint);
	border-radius: 2px;
}
.cq-mega__eyebrow {
	display: block;
	font-family: var(--font-head);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--green-br);
}
.cq-mega__title {
	margin: 10px 0 0;
	font-family: var(--font-head);
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #fff;
	max-width: 16ch;
}
.cq-mega__lede {
	margin: 12px 0 0;
	font-size: 12.8px;
	line-height: 1.6;
	color: var(--muted-dark);
	max-width: 34ch;
}
.cq-mega__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 16px;
	font-family: var(--font-head);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--green-br);
}
.cq-mega__all .cq-arw { transition: transform var(--d-btn) var(--e-ui); }
.cq-mega__all:hover { color: #fff; }
.cq-mega__all:hover .cq-arw { transform: translateX(5px); }

.cq-mega__media {
	margin-block-start: 20px;
	border-radius: var(--r-card);
	overflow: hidden;
	position: relative;
}
.cq-mega__media img,
.cq-mega__media .cq-ph {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	opacity: .62;
	transition: transform 900ms var(--e-card), opacity 420ms var(--e-ui);
}
.cq-mega__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(5,7,10,.72));
}
.cq-mega__panel.is-open .cq-mega__media img,
.cq-mega__panel.is-open .cq-mega__media .cq-ph { opacity: .8; }

/* ------------------------------------------------------------------- Grid */
.cq-mega__grid {
	display: grid;
	grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
	gap: 2px;
}

.cq-mega__i {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 14px;
	align-items: start;
	gap: 12px;
	padding: 13px 14px;
	border-radius: 3px;
	color: inherit;
	/* Each row eases in behind the panel, staggered by its index. */
	opacity: 0;
	transform: translate3d(0, 8px, 0);
	transition:
		background 240ms var(--e-ui),
		opacity 320ms var(--e-ui),
		transform 420ms cubic-bezier(.16,1,.3,1);
}
.cq-mega__panel.is-open .cq-mega__i {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * var(--mega-stagger, 26ms) + 90ms);
}
.cq-mega__i::before {
	content: "";
	position: absolute;
	inset-block: 8px;
	inset-inline-start: 0;
	width: 2px;
	background: var(--tint);
	border-radius: 2px;
	transform: scaleY(0);
	transition: transform 320ms var(--e-card);
}
.cq-mega__i:hover { background: rgba(255,255,255,.05); }
.cq-mega__i:hover::before { transform: scaleY(1); }
.cq-mega__i:focus-visible { outline: 2px solid var(--green-br); outline-offset: -2px; }

.cq-mega__ico {
	color: var(--green-br);
	opacity: .78;
	transition: opacity 300ms var(--e-ui), transform 420ms var(--e-card);
}
.cq-mega__i:hover .cq-mega__ico { opacity: 1; transform: scale(1.1); }

.cq-mega__iBody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cq-mega__iT {
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}
.cq-mega__iD {
	font-size: 11.8px;
	line-height: 1.5;
	color: var(--muted-dark);
}
.cq-mega__iArw {
	color: var(--green-br);
	opacity: 0;
	transform: translateX(-5px);
	transition: opacity 260ms var(--e-ui), transform 320ms var(--e-card);
	margin-block-start: 2px;
}
.cq-mega__i:hover .cq-mega__iArw { opacity: 1; transform: translateX(0); }

/* ------------------------------------------------------------------ Scrim */
/* Dims the page behind an open panel, which makes the menu read as a layer
   rather than something floating over unrelated content. */
.cq-mega__scrim {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(5, 7, 10, var(--mega-scrim, .56));
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 320ms var(--e-ui), visibility 320ms;
}
body.cq-mega-open .cq-mega__scrim { opacity: 1; visibility: visible; }

/* The trigger stays lit while its panel is open. */
.cq-ni--mega.is-active > .cq-ni__link { color: #fff; }
.cq-ni--mega.is-active > .cq-ni__link::after { transform: scaleX(1); }
.cq-ni--mega.is-active .cq-caret { transform: rotate(180deg); }

.cq-mega--notint .cq-mega__panel::before { display: none; }

/* A boxed panel stops at the container instead of spanning the viewport. */
.cq-mega--boxed .cq-mega__panel {
	inset-inline: max(var(--gut), calc((var(--vw, 100vw) - var(--maxw)) / 2));
	border-radius: var(--r-card);
	border: 1px solid rgba(255,255,255,.08);
}
.cq-mega--boxed .cq-mega__in { padding-inline: clamp(20px, 2.6vw, 34px); }

/* With the side column off the links take the whole width. */
.cq-mega--noaside .cq-mega__in { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------ Breakpoints */
@media (max-width: 1240px) {
	.cq-mega__in { grid-template-columns: minmax(200px, .9fr) minmax(0, 2fr); }
	.cq-mega__grid { grid-template-columns: repeat(min(var(--mega-cols, 3), 2), minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	/* Below the desktop nav breakpoint the panels never open — the off-canvas
	   menu carries the same links — so they are removed entirely rather than
	   left in the document as dead markup. */
	.cq-mega,
	.cq-mega__scrim { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.cq-mega__panel,
	.cq-mega__i { transition-duration: .01ms !important; transition-delay: 0ms !important; }
	.cq-mega__panel::before { transition: none; transform: scaleX(1); }
}