/* ==========================================================================
   Full-width Services menu

   Fixed to the window rather than positioned inside the header, because the
   header is sticky on some pages and transparent on others and neither one
   can contain a panel this wide. The top edge is set by the script from the
   header's real position, so it follows the header when it shrinks on scroll.
   ========================================================================== */

.bs-mega {
	--bs-mega-top: 80px;
	--ink:        #060B24;
	--ink-2:      #0C1436;
	--brand:      #2872FA;
	--brand-lift: #5B9BFF;
	--cyan:       #5FD6D2;
	--on-dark:    #FFFFFF;
	--on-dark-2:  #A8B4D8;
	--edge:       rgba(255, 255, 255, .10);

	position: fixed;
	top: var(--bs-mega-top);
	left: 0;
	right: 0;
	z-index: 999;
	background: var(--ink-2);
	border-top: 1px solid var(--edge);
	border-bottom: 1px solid var(--edge);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease;
}

.bs-mega.is-open { opacity: 1; transform: none; }

.bs-mega[hidden] { display: none; }

.bs-mega__inner {
	max-width: 78rem;
	margin-inline: auto;
	padding: 2.2rem clamp(1.25rem, 5vw, 3rem) 2.4rem;
	display: grid;
	grid-template-columns: 16rem 1fr;
	gap: 2.6rem;
	align-items: start;
}

/* --------------------------------------------------------------- the rail */
.bs-mega__rail {
	list-style: none;
	margin: 0;
	padding: 0;
	border-right: 1px solid var(--edge);
}

.bs-mega__tab {
	display: block;
	width: 100%;
	text-align: left;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--on-dark-2);
	background: none;
	border: 0;
	border-left: 2px solid transparent;
	padding: .8rem 1rem .8rem .95rem;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.bs-mega__tab:hover { color: var(--on-dark); }

.bs-mega__tab[aria-selected="true"] {
	color: var(--on-dark);
	border-left-color: var(--cyan);
	background: rgba(95, 214, 210, .06);
}

.bs-mega__tab:focus-visible {
	outline: 2px solid var(--brand-lift);
	outline-offset: -2px;
}

/* ------------------------------------------------------------- the detail */
.bs-mega__pane { min-width: 0; }
.bs-mega__pane[hidden] { display: none; }

.bs-mega__title {
	display: inline-block;
	margin: 0 0 .55rem;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--on-dark);
	text-decoration: none;
}

.bs-mega__title:hover { color: var(--brand-lift); }

.bs-mega__desc {
	margin: 0 0 1.5rem;
	max-width: 42rem;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--on-dark-2);
}

.bs-mega__subs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
	gap: .5rem;
}

.bs-mega__sub {
	display: block;
	padding: .7rem .9rem;
	border-radius: 10px;
	border: 1px solid var(--edge);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--on-dark-2);
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.bs-mega__sub:hover,
.bs-mega__sub:focus-visible {
	border-color: rgba(95, 214, 210, .45);
	background: rgba(95, 214, 210, .06);
	color: var(--on-dark);
}

/* For the services with no sub-pages: what the page covers, as plain text. */
.bs-mega__notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
	max-width: 34rem;
}

.bs-mega__notes li {
	position: relative;
	padding-left: 1.2rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--on-dark-2);
}

.bs-mega__notes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--cyan);
}

.bs-mega__cta {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.6rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--cyan);
	text-decoration: none;
}

.bs-mega__cta:hover { color: var(--on-dark); }
.bs-mega__cta span { transition: transform .18s ease; }
.bs-mega__cta:hover span { transform: translateX(3px); }

/* ------------------------------------------------- the item it replaces */

/* Blocksy's own dropdown for Services only, and only where ours is running. */
@media (min-width: 1000px) {
	.bs-mega-open > .sub-menu,
	.bs-mega-open > .ct-sub-menu,
	.bs-mega-open .sub-menu { display: none !important; }
}

/* Below the breakpoint the offcanvas menu does this job already. */
@media (max-width: 999px) {
	.bs-mega { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.bs-mega,
	.bs-mega__tab,
	.bs-mega__sub,
	.bs-mega__cta span { transition: none; }
	.bs-mega { transform: none; }
}