/* ==========================================================================
   Section navigator - the dot rail on the right edge of every page.
   Built by home.js on the home page (sections with a CSS ID) and by
   secnav.js everywhere else (the page's top-level Elementor sections).
   Hover a dot for the section name; the active dot stretches; the rail
   turns dark over navy sections; hidden under 1280px.
   ========================================================================== */

.cgx-secnav {
	position: fixed;
	right: 22px;
	top: 50%;
	z-index: 90;
	padding: 12px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	border: 1px solid rgba(12, 24, 37, .08);
	box-shadow: 0 12px 32px -16px rgba(12, 24, 37, .35);
	transform: translate(12px, -50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s, background-color .4s ease, border-color .4s ease;
}
.cgx-secnav.is-visible { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.cgx-secnav ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cgx-secnav a { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; outline-offset: 2px; }
.cgx-secnav a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #B7C0CC;
	transition: height .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease;
}
.cgx-secnav a:hover::before { background: #0C1825; }
.cgx-secnav a[aria-current="true"]::before { height: 18px; background: #1B3FA0; }
.cgx-secnav a span {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	padding: 6px 10px;
	border-radius: 8px;
	background: #0C1825;
	color: #fff;
	font: 600 12px/1 Inter, sans-serif;
	letter-spacing: .02em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(6px, -50%);
	transition: opacity .2s ease, transform .2s ease;
}
.cgx-secnav a:hover span,
.cgx-secnav a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
/* Over navy sections the rail turns to glass-dark. */
.cgx-secnav.is-dark { background: rgba(7, 17, 31, .6); border-color: rgba(157, 184, 255, .2); }
.cgx-secnav.is-dark a::before { background: rgba(157, 184, 255, .45); }
.cgx-secnav.is-dark a:hover::before { background: #fff; }
.cgx-secnav.is-dark a[aria-current="true"]::before { background: #9DB8FF; }
@media (max-width: 1279px) { .cgx-secnav { display: none; } }

/* Keep jumped-to sections clear of the sticky header */
.cgx-secnav-target { scroll-margin-top: 120px; }

/* The rail sits over scrolling content: a live backdrop blur re-renders on
   every scroll step, so use a solid glass tint instead. */
.cgx-secnav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 255, 255, .96) !important; }
.cgx-secnav.is-dark { background: rgba(7, 17, 31, .9) !important; }