/* ============================================================
   RANKRIX — CHROME CSS
   Global base + background/blur layer + header/footer overrides.
   Extracted verbatim from the original rkx-site2.css and
   rkx-theme-bridge.css; page/widget styles were removed.
   Loads after rkx-header.css and rkx-footer.css.
   ============================================================ */

/* ---- from rkx-site2.css: tokens, reset, global background ---- */
:root {
    --rkx-page-text:        rgba(243, 239, 230,0.86);
    --rkx-page-muted:       rgba(243, 239, 230,0.55);
    --rkx-page-dim:         rgba(243, 239, 230,0.32);
    --rkx-page-line:        rgba(243, 239, 230,0.08);
    --rkx-page-line-strong: rgba(243, 239, 230,0.14);
    --rkx-page-surface:     rgba(243, 239, 230,0.025);
    --rkx-page-surface-2:   rgba(243, 239, 230,0.04);

    --rkx-accent-1:         #1F39C2;
    --rkx-accent-2:         #2C48DD;
    --rkx-accent-tx:        #1F39C2;
    --rkx-accent-glow:      rgba(31, 57, 194,0.45);

    --rkx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rkx-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    --rkx-gutter: clamp(20px, 4vw, 56px);
    --rkx-max:    1400px;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }

body {
    margin: 0;
    background: #15161A;
    color: var(--rkx-page-text);
    font-family: var(--rkx-font-sans);
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a {
    color: inherit;
    text-decoration: none;
}

/* selection */
::selection {
    background: rgba(31, 57, 194,0.65);
    color: #F3EFE6;
}

/* ============================================================
   GLOBAL BACKGROUND
   Option A: fixed viewport, behind everything, with veil + grain.
   Sections can override via data-section.
   ============================================================ */
.rkx-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: #15161A;
}
.rkx-bg__image {
    position: absolute;
    inset: -4%;
    background: url('assets/galactic.jpg') center/cover no-repeat;
    background-color: #15161A;
    will-change: transform;
    /* slight slow drift, respects reduced-motion */
    animation: rkx-drift 60s ease-in-out infinite alternate;
}
.rkx-bg__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 60% at 50% 10%, transparent 0%, rgba(21, 22, 26,0.35) 60%, rgba(21, 22, 26,0.85) 100%),
        linear-gradient(180deg, rgba(21, 22, 26,0.20) 0%, rgba(21, 22, 26,0.55) 35%, rgba(21, 22, 26,0.78) 70%, #15161A 100%);
}
.rkx-bg__grain {
    position: absolute;
    inset: 0;
    /* Performance: was mix-blend-mode:overlay at 4.5% — a full-screen blend
       recomputed every frame over the drifting image. Normal blending at a
       touch lower opacity reads the same and costs nothing. */
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes rkx-drift {
    0%   { transform: translate3d(-1.5%,  0.5%, 0) scale(1.02); }
    100% { transform: translate3d( 1.5%, -1%,   0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .rkx-bg__image { animation: none; }
}

/* ---- from rkx-site2.css: Poppins 12px labels (chrome selectors only) ---- */
.rkx-fc-axis-label,
.rkx-fc-metric-num,
.rkx-fc-metric-lbl,
.rkx-feat-label,
.rkx-foot-copy,
.rkx-foot-explore-arrow,
.rkx-pane-label,
.rkx-pane-link span:last-child,
.rkx-drawer-title,
.rkx-drawer-section-label,
.rkx-drawer-link span:last-child {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}

/* ---- from rkx-site2.css: main offset + scrolled header ---- */
.rkx-main {
    /* push first section below the floating pill header */
    padding-top: clamp(70px, 10vh, 130px);
}
/* Scrolled header state — shrinks + extra blur */
.rkx-header-wrap.is-scrolled .rkx-header {
    background: var(--rkx-glass, rgba(21, 22, 26,0.6));   /* same tint as the footer pill — no darkening on scroll */
    box-shadow: 0 8px 36px rgba(0,0,0,0.55), 0 1px 0 rgba(243, 239, 230,0.08) inset;
}

/* ---- from rkx-theme-bridge.css: header/footer override layer ---- */
/* ============================================================
   RANKRIX THEME BRIDGE
   1. Production header/footer override layer (verbatim)
   2. Dynamic theme CSS (logo PNG swap, background)
   3. Big-screen scaling: content zoom steps 1536px -> 8K
   ============================================================ */

/* =====================================================================
   RANKRIX — HEADER & FOOTER USER OVERRIDES
   Integrated verbatim from the production export (was the WPCode
   wp_head @100 snippet). Loaded AFTER the dynamic CSS so it wins the
   cascade: width tokens, glass tint, morphing burger, large-display
   scaling (2K-8K), +/- accordions, animated contact icons, etc.
   ===================================================================== */
/* Translucency of the four glass surfaces. Header/footer chrome sit at the
   post-scroll tint (72% black) by default so the bar reads "solid" from the
   first paint; the connect cards + pill read --rkx-bg too, so they stay
   matched. The blur/saturate stays on each element. */
:root {
	/* One frosted-glass recipe for ALL four chrome surfaces:
	   header pill, header menu panel, footer pill, footer panel.
	   Same tint + same blur => they read as one premium material. */
	--rkx-glass:      rgba(21, 22, 26, 0.6);
	--rkx-bg:       rgba(21, 22, 26, 0.6);
	--rkx-bg-menu:  rgba(21, 22, 26, 0.6);
	--rkxf-bg:      rgba(21, 22, 26, 0.6);
	--rkxf-bg-menu: rgba(21, 22, 26, 0.6);

	/* Shared brand gradient — loader bar, top progress bar and the
	   vertical scrollbar all use these stops (weighted toward #1F39C2).
	   Angle differs per use (90deg bars, 180deg vertical bar). */
	--rkx-grad-90:  linear-gradient(90deg,  #1F39C2 0%, #1F39C2 48%, #2C48DD 78%, #4D5DFF 100%);
	--rkx-grad-180: linear-gradient(180deg, #1F39C2 0%, #1F39C2 48%, #2C48DD 78%, #4D5DFF 100%);
}
/* Unified frosted glass on all four chrome surfaces */
.rkx-header,
.rkx-menu-panel,
.rkx-foot-pill,
.rkx-foot-panel {
	backdrop-filter: blur(28px) saturate(1.7) !important;
	-webkit-backdrop-filter: blur(28px) saturate(1.7) !important;
}
/* Match the scrolled state's stronger shadow by default too, so nothing
   visibly changes when .is-scrolled toggles on. */
.rkx-header {
	box-shadow: 0 8px 36px rgba(0,0,0,0.55), 0 1px 0 rgba(243, 239, 230,0.08) inset;
}

/* Direct-edit persist: menu button alignment/spacing (from index preview).
   Applies to the shared button so every page's header stays consistent. */
.rkx-menu-btn {
	justify-content: flex-start;
	gap: 10px;
	padding: 3px 5px;
}

/* ============================================================
   15 · FOOTER — SYMMETRIC EXPANSION + PANEL BLUR FIX
   The production footer centres the fixed wrap with
   translateX(-50%); GSAP then bakes that into a fixed-pixel x,
   so widening .is-open only extends the RIGHT edge. That same
   transform (plus will-change:transform) also makes the wrap a
   "backdrop root", which neutralises the panel's backdrop blur.
   Fix: centre with auto margins (no transform), and strip the
   wrap's transform / will-change so the panel can blur the page.
   The reveal is switched to opacity-only in rkx-footer.js so no
   transform is ever written back onto the wrap.
   ============================================================ */
.rkx-footer-wrap {
	left: 0 !important;
	right: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	transform: none !important;
	will-change: opacity !important;
}

/* ============================================================
   16 · BACKGROUND FROSTED VEIL
   The loader shows a blurred glass veil over the galactic image;
   mirror that on the live site so the background reads as frosted
   glass behind content. backdrop-filter on the veil samples the
   image sibling below it (both inside .rkx-bg, z-index:-1), so it
   blurs ONLY the background — page content stays crisp.
   ============================================================ */
.rkx-bg__veil {
	/* backdrop-filter removed: the blur + saturation are baked into the
	   bundled galactic.jpg (see rankrix_force_background), so no full-screen
	   backdrop re-blur runs on every frame. */
	background:
		radial-gradient(ellipse 90% 60% at 50% 10%, rgba(21, 22, 26,0.20) 0%, rgba(21, 22, 26,0.42) 60%, rgba(21, 22, 26,0.86) 100%),
		linear-gradient(180deg, rgba(21, 22, 26,0.28) 0%, rgba(21, 22, 26,0.58) 35%, rgba(21, 22, 26,0.80) 70%, #15161A 100%) !important;
}
/* The galactic image already drifts; give it a touch of base blur too so the
   frost reads even where the veil gradient is lightest (top centre). */
.rkx-bg__image {
	/* filter: blur() removed — pre-blurred image (performance) */
	transform: scale(1.06);
}

/* ============================================================
   USER OVERRIDE — responsive width, equal bars + large-display
   scaling. Header & footer share identical width tokens at every
   breakpoint, so the two bars are always the same width and (both
   being centred) line up edge to edge.
   ============================================================ */

/* Phones + tablets (≤1024px): both bars 85% at rest, growing to
   full width (100%) when the menu opens. No menu label here. */
@media (max-width: 1024px) {
	:root {
		--rkx-w-def: 85%;  --rkx-w-exp: 100%;
		--rkxf-w-def: 85%; --rkxf-w-exp: 100%;
	}
	.rkx-menu-label { display: none !important; }

	/* Equalise the left/right header columns so the centre logo is
	   truly centred with equal spacing on small screens. */
	.rkx-col--left,
	.rkx-col--right { min-width: 0; }
}

/* Laptop / desktop and up — same as mobile/tablet: 85% at rest,
   full width (100%) when the menu opens. Constant across every
   breakpoint to 8K, so the bars keep widening in pixels as the
   screen grows while staying 85% / 100%. */
@media (min-width: 1025px) {
	:root {
		--rkx-w-def: 85%;  --rkx-w-exp: 100%;
		--rkxf-w-def: 85%; --rkxf-w-exp: 100%;
	}
}

/* Footer may reach the same full width as the header when expanded. */
.rkx-footer-wrap { max-width: 100%; }

/* Smoother, silkier easing for the footer bar's width expand/collapse
   (matches the header's GSAP expo-out feel). */
.rkx-footer-wrap { transition: width 580ms cubic-bezier(0.16, 1, 0.3, 1) !important; }

/* Tighten the floating gaps by 10px: the header sits 10px closer to the top
   and the footer 10px closer to the bottom, at every breakpoint. Each rule
   reads that breakpoint's own offset token and subtracts 10px (floored at
   4px so the pills never kiss the viewport edge on the smallest screens).
   The dropdown panel follows automatically — its top is derived from the
   header's live rect.bottom in JS. */
.rkx-header-wrap { top: max(4px, calc(var(--rkx-top) - 10px)); }
.rkx-footer-wrap { bottom: max(4px, calc(var(--rkxf-bot) - 10px)); }

/* Auth buttons (Login / Sign Up) equal width at every size. */
.rkx-btn { min-width: 96px; }

/* Shimmer sweep on the Login (ghost) button too — mirrors the Sign-Up button
   so both auth buttons get the same hover shine. */
.rkx-btn--ghost::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(115deg,
		transparent 0%,
		transparent 35%,
		rgba(243, 239, 230,0.28) 50%,
		transparent 65%,
		transparent 100%);
	transition: left 700ms var(--rkx-ease);
	pointer-events: none;
}
.rkx-btn--ghost:hover::before { left: 100%; }
@media (prefers-reduced-motion: reduce) {
	.rkx-btn--ghost::before { transition: none !important; }
}

/* Shimmer sweep on the remaining footer buttons — the CTA and the
   social icons already shimmer; this adds the same effect to the nav
   items and the mobile Explore button so ALL footer buttons match. */
.rkx-foot-item,
.rkx-foot-explore { position: relative; overflow: hidden; }
.rkx-foot-item::before,
.rkx-foot-explore::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(115deg,
		transparent 0%, transparent 35%,
		rgba(243, 239, 230,0.28) 50%,
		transparent 65%, transparent 100%);
	transition: left 700ms var(--rkxf-ease);
	pointer-events: none;
}
.rkx-foot-item:hover::before,
.rkx-foot-explore:hover::before { left: 100%; }

/* ---- Hamburger icon swap (Uiverse · JulanDeAlb) — morphing arrow, driven by the
   header's aria-expanded state instead of a checkbox so the GSAP controller is untouched ---- */
.rkx-col--left  { justify-content: flex-start; }
.rkx-menu-btn   { justify-content: flex-start; gap: 10px; }
/* Slim the menu-button hover + active (open) highlight: trim the vertical
   padding so the background pill hugs the icon instead of running the full
   button height. Horizontal padding is kept so left alignment is unchanged. */
.rkx-menu-btn { padding-top: 3px; padding-bottom: 3px; border-radius: 1px; }
.rkx-burger {
	height: 2.1em;
	width: auto;
	display: block;
	flex: 0 0 auto;
}
.rkx-burger-line {
	fill: none;
	stroke: #F3EFE6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3.4;
}
.rkx-burger-line-top-bottom { stroke-dasharray: 12 63; }
.rkx-menu-btn[aria-expanded="true"] .rkx-burger { transform: rotate(-45deg); }
.rkx-menu-btn[aria-expanded="true"] .rkx-burger-line-top-bottom {
	stroke-dasharray: 20 300;
	stroke-dashoffset: -32.42;
}

/* ============================================================
   LARGE-DISPLAY SCALING LADDER (2K → 8K)
   Width stays 85% / 100% (set above); these steps enlarge the pill
   heights, logos, buttons and menu icon so the UI stays proportional
   and legible as the screen grows. Header & footer pill heights are
   kept identical at every step.
   ============================================================ */

/* 1920–2559  (FHD / 2K) */
@media (min-width: 1920px) and (max-width: 2559px) {
	:root { --rkx-h: 64px; --rkxf-h: 64px; }
	.rkx-logo-svg  { height: 44px; }
	.rkx-foot-logo { height: 28px; }
	.rkx-btn       { height: 40px; font-size: 14px; padding: 0 18px; min-width: 112px; }
	.rkx-burger    { height: 30px; }
	.rkx-menu-btn  { font-size: 15px; }
	.rkx-foot-cta  { height: 40px; font-size: 14px; padding: 0 18px; }
	.rkx-foot-item { font-size: 14px; padding: 8px 14px; }
}

/* 2560–3839  (QHD / 1440p) */
@media (min-width: 2560px) and (max-width: 3839px) {
	:root { --rkx-h: 76px; --rkxf-h: 76px; }
	.rkx-logo-svg  { height: 54px; }
	.rkx-foot-logo { height: 34px; }
	.rkx-btn       { height: 48px; font-size: 16px; padding: 0 24px; min-width: 140px; }
	.rkx-burger    { height: 36px; }
	.rkx-menu-btn  { font-size: 17px; }
	.rkx-foot-cta  { height: 48px; font-size: 16px; padding: 0 24px; }
	.rkx-foot-item { font-size: 16px; padding: 10px 18px; }
}

/* 3840–5119  (4K UHD) */
@media (min-width: 3840px) and (max-width: 5119px) {
	:root { --rkx-h: 92px; --rkxf-h: 92px; }
	.rkx-logo-svg  { height: 68px; }
	.rkx-foot-logo { height: 42px; }
	.rkx-btn       { height: 58px; font-size: 19px; padding: 0 30px; min-width: 172px; }
	.rkx-burger    { height: 44px; }
	.rkx-menu-btn  { font-size: 20px; }
	.rkx-foot-cta  { height: 58px; font-size: 19px; padding: 0 30px; }
	.rkx-foot-item { font-size: 19px; padding: 12px 22px; }
}

/* 5120–7679  (5K) */
@media (min-width: 5120px) and (max-width: 7679px) {
	:root { --rkx-h: 116px; --rkxf-h: 116px; --rkx-top: 52px; --rkxf-bot: 52px; }
	.rkx-logo-svg  { height: 86px; }
	.rkx-foot-logo { height: 54px; }
	.rkx-btn       { height: 74px; font-size: 24px; padding: 0 38px; min-width: 220px; }
	.rkx-burger    { height: 56px; }
	.rkx-menu-btn  { font-size: 25px; }
	.rkx-foot-cta  { height: 74px; font-size: 24px; padding: 0 38px; }
	.rkx-foot-item { font-size: 24px; padding: 15px 28px; }
}

/* 7680+  (8K) */
@media (min-width: 7680px) {
	:root { --rkx-h: 150px; --rkxf-h: 150px; --rkx-top: 64px; --rkxf-bot: 64px; }
	.rkx-logo-svg  { height: 112px; }
	.rkx-foot-logo { height: 70px; }
	.rkx-btn       { height: 96px; font-size: 31px; padding: 0 50px; min-width: 288px; }
	.rkx-burger    { height: 72px; }
	.rkx-menu-btn  { font-size: 32px; }
	.rkx-foot-cta  { height: 96px; font-size: 31px; padding: 0 50px; }
	.rkx-foot-item { font-size: 31px; padding: 19px 36px; }
}

/* ============================================================
   MENU EDITS — prominent headings, divider+contact strip,
   slim Contact button, brand-animated call/email icons
   ============================================================ */

/* 1. The featured widget must sit flush to the menu's right edge with NO
   divider line or gap. (#rkxMenuFoot is the grid's last child now, which had
   pushed the :not(:last-child) right border + 72px spacing onto the widget.) */
.rkx-menu-col--feat {
	border-right: none !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
}

/* Align the menu content with the header controls: its LEFT edge lines up with
   the Menu button and its RIGHT edge with the Sign-Up button. The pill has a
   constant 20px side padding and both bars are full-width when the menu is
   open, so matching the menu-inner side padding to 20px aligns them at every
   breakpoint (col0 left → menu-button left; last col right → Sign-Up right). */
.rkx-menu-inner { padding-left: 20px; padding-right: 20px; }

/* Smaller inner link text — still readable on every screen. Scales with the
   viewport, floored at 13px / capped at 22px. (Headings stay prominent.) */
.rkx-menu-panel .rkx-nav-link { font-size: clamp(13px, calc(0.6vw + 7.5px), 22px); }

/* 3,4,5. COLUMN HEADINGS — wear the mobile/tablet accordion look on desktop
   too (card chrome + accent left-bar + chevron), while the open/closed
   BEHAVIOUR stays exactly as it already is on big screens (existing JS).
   The ≤1023 mobile styling is left untouched. */
@media (min-width: 1024px) {
	.rkx-menu-panel .rkx-accordion-trigger {
		position: relative;
		overflow: hidden;
		font-size: clamp(16px, 1.05vw, 30px);
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: none;
		color: var(--rkx-text);
		padding: 8px 44px 8px 18px;
		min-height: 40px;
		background: linear-gradient(135deg, rgba(243, 239, 230,0.04) 0%, rgba(243, 239, 230,0.02) 100%);
		border: 1px solid var(--rkx-border);
		border-radius: 1px;
		margin: 4px 0 3px;
		transition: background 320ms var(--rkx-ease), border-color 320ms var(--rkx-ease),
		            color 320ms var(--rkx-ease), transform 140ms var(--rkx-ease);
	}
	.rkx-menu-panel .rkx-accordion-trigger::before {
		content: '';
		position: absolute;
		left: 0; top: 8px; bottom: 8px;
		width: 3px;
		background: var(--rkx-accent);
		border-radius: 1px;
		box-shadow: 0 0 10px var(--rkx-accent-glow);
		transform: scaleY(0);
		transform-origin: center;
		transition: transform 420ms var(--rkx-ease);
	}
	.rkx-menu-panel .rkx-accordion-trigger::after {
		content: '';
		position: absolute;
		top: 0; left: -100%;
		width: 100%; height: 100%;
		background: linear-gradient(90deg, transparent 0%, rgba(31, 57, 194,0.18) 50%, transparent 100%);
		transition: left 700ms var(--rkx-ease);
		pointer-events: none;
	}
	.rkx-menu-panel .rkx-accordion-trigger:hover::after,
	.rkx-menu-panel .rkx-accordion-trigger:focus-visible::after { left: 100%; }
	.rkx-menu-panel .rkx-accordion-trigger:hover {
		border-color: rgba(31, 57, 194,0.4);
		background: linear-gradient(135deg, rgba(31, 57, 194,0.08) 0%, rgba(243, 239, 230,0.03) 100%);
		color: #F3EFE6;
	}
	.rkx-menu-panel .rkx-accordion-trigger:active { transform: scale(0.99); }
	.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-trigger {
		background: linear-gradient(135deg, rgba(31, 57, 194,0.22) 0%, rgba(31, 57, 194,0.05) 100%);
		border-color: rgba(31, 57, 194,0.45);
		color: #F3EFE6;
	}
	.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-trigger::before { transform: scaleY(1); }

	.rkx-menu-panel .rkx-accordion-trigger-inner { gap: 12px; }

	.rkx-menu-panel .rkx-nav-list { padding-left: 12px; padding-top: 8px; padding-bottom: 4px; }
}

/* Menu accordion indicator — applies at ALL breakpoints (desktop, tablet,
   mobile): no leading title icon, and a +/- toggle in place of the chevron
   arrow (the plus spins and folds into a minus on open). Sharp bars (1px).
   Footer-drawer accordion icons are unaffected — scoped to the menu panel. */
.rkx-menu-panel .rkx-acc-icon { display: none; }
.rkx-menu-panel .rkx-accordion-chevron {
	position: relative;
	width: 15px; height: 15px;
	border: 0;
	margin-right: 3px;
	flex: 0 0 auto;
	color: #aab;
	transform: none;
	transition: color 300ms var(--rkx-ease), transform 460ms var(--rkx-ease);
}
.rkx-menu-panel .rkx-accordion-chevron::before,
.rkx-menu-panel .rkx-accordion-chevron::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 13px; height: 2px;
	background: currentColor;
	border-radius: 1px;
	transform: translate(-50%, -50%);
	transition: transform 460ms var(--rkx-ease), opacity 300ms var(--rkx-ease);
}
.rkx-menu-panel .rkx-accordion-chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
.rkx-menu-panel .rkx-accordion-trigger:hover .rkx-accordion-chevron { color: #F3EFE6; }
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-chevron {
	color: var(--rkx-accent-tx);
	transform: rotate(180deg);
}
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-chevron::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* Footer drawer accordions (mobile/tablet: Company / Resources / Legal) — same
   treatment as the menu: no leading icon, +/- toggle instead of the chevron. */
.rkx-drawer .rkx-acc-icon { display: none; }
.rkx-drawer .rkx-accordion-chevron {
	position: relative;
	width: 15px; height: 15px;
	border: 0;
	margin-right: 3px;
	flex: 0 0 auto;
	color: #aab;
	transform: none;
	transition: color 300ms var(--rkxf-ease), transform 460ms var(--rkxf-ease);
}
.rkx-drawer .rkx-accordion-chevron::before,
.rkx-drawer .rkx-accordion-chevron::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 13px; height: 2px;
	background: currentColor;
	border-radius: 1px;
	transform: translate(-50%, -50%);
	transition: transform 460ms var(--rkxf-ease), opacity 300ms var(--rkxf-ease);
}
.rkx-drawer .rkx-accordion-chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
.rkx-drawer .rkx-accordion-trigger:hover .rkx-accordion-chevron { color: #F3EFE6; }
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-chevron {
	color: var(--rkxf-accent-tx);
	transform: rotate(180deg);
}
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-chevron::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* 2. Bottom strip — phone | email | address, each sitting below its own
   column (left / centre / right). The top border is the divider line. */
.rkx-menu-foot {
	grid-column: 1 / -1;
	border-top: 1px solid var(--rkx-border);
	margin-top: 12px;
	padding-top: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
	align-items: start;
}
.rkx-menu-foot:empty { display: none; }

/* Contact item — sharp & minimal to match the theme (no rounded boxes): the
   animated icon sits beside its value, anchored by a thin vertical accent bar
   that echoes the accordion's active-state accent. Corners stay ≤ 1px. */
.rkx-menu-foot .rkx-contact-row {
	width: fit-content;
	max-width: 100%;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 2px 0 2px 13px;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--rkx-muted);
}
.rkx-menu-foot .rkx-contact-row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 16px;
	border-radius: 1px;
	background: rgba(120, 130, 255, 0.35);
	transition: background 300ms var(--rkx-ease), height 300ms var(--rkx-ease), box-shadow 300ms var(--rkx-ease);
}
.rkx-menu-foot .rkx-contact-row:hover::before {
	background: var(--rkx-accent);
	height: 26px;
	box-shadow: 0 0 9px var(--rkx-accent-glow);
}
.rkx-menu-foot .rkx-contact-val {
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #c7cbe0;
	transition: color 280ms var(--rkx-ease);
}
.rkx-menu-foot .rkx-contact-row:hover .rkx-contact-val { color: #F3EFE6; }
/* plain icon holder — no tile, just the white glyph */
.rkx-menu-foot .rkx-contact-ico {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	border-radius: 0;
	color: #F3EFE6;
	overflow: visible;
	transition: filter 300ms var(--rkx-ease);
}
.rkx-menu-foot .rkx-contact-row:hover .rkx-contact-ico { filter: drop-shadow(0 0 7px var(--rkx-accent-glow)); }
/* Phones/tablets: columns stack, so the contact items stack too. */
@media (max-width: 1023px) {
	.rkx-menu-foot { grid-template-columns: 1fr; gap: 14px; }
}

/* 3b. Slim Contact button (arrow removed in markup) */
.rkx-feat-cta--slim {
	padding: 7px 22px;
	font-size: 12.5px;
	letter-spacing: 0.01em;
	gap: 0;
}
.rkx-feat-cta--slim:hover { gap: 0; }

/* 4. Lordicon-style animated CONTACT icons (chunky filled glyphs whose parts
   animate on hover): the phone wiggles while two signal waves sweep in, the
   envelope flap flutters open, the location pin drops with a ripple.
   The glyph is sized ~20px and animates in place. */
.rkx-contact-row .rkx-contact-ico svg { width: 20px; height: 20px; overflow: visible; display: block; }
.rkx-contact-row .rkx-contact-ico svg * { transform-box: fill-box; }

/* phone */
.rkx-ic-phone-body { transform-origin: 62% 62%; }
.rkx-ic-wave { opacity: 0; transform-origin: 0% 100%; transform: scale(.45); }
.rkx-contact-row:hover .rkx-ic-phone-body { animation: rkx-ic-ring 720ms var(--rkx-ease); }
.rkx-contact-row:hover .rkx-ic-wave   { animation: rkx-ic-wave 720ms var(--rkx-ease) forwards; }
.rkx-contact-row:hover .rkx-ic-wave-2 { animation-delay: 95ms; }
@keyframes rkx-ic-ring {
	0%, 100% { transform: rotate(0); }
	18% { transform: rotate(-15deg); }
	38% { transform: rotate(12deg); }
	58% { transform: rotate(-8deg); }
	78% { transform: rotate(4deg); }
}
@keyframes rkx-ic-wave {
	0%   { opacity: 0; transform: scale(.4); }
	38%  { opacity: 1; transform: scale(1); }
	78%  { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.08); }
}

/* mail — flap flutters open, body gives a little pop */
.rkx-ic-mail-flap { transform-origin: 50% 0%; }
.rkx-ic-mail-body { transform-origin: 50% 100%; }
.rkx-contact-row:hover .rkx-ic-mail-flap { animation: rkx-ic-flap 600ms var(--rkx-ease); }
.rkx-contact-row:hover .rkx-ic-mail-body { animation: rkx-ic-pop 600ms var(--rkx-ease); }
@keyframes rkx-ic-flap {
	0%, 100% { transform: scaleY(1); }
	40%, 60% { transform: scaleY(.08); }
}
@keyframes rkx-ic-pop {
	0%, 100% { transform: translateY(0); }
	45% { transform: translateY(-1.5px); }
}

/* pin — drops in with a bounce + ground ripple */
.rkx-ic-pin-body { transform-origin: 50% 100%; }
.rkx-ic-pin-ripple { opacity: 0; transform-origin: 50% 50%; }
.rkx-contact-row:hover .rkx-ic-pin-body   { animation: rkx-ic-drop 640ms var(--rkx-ease); }
.rkx-contact-row:hover .rkx-ic-pin-ripple { animation: rkx-ic-ripple 640ms var(--rkx-ease); }
@keyframes rkx-ic-drop {
	0% { transform: translateY(-3.5px); }
	40% { transform: translateY(0); }
	58% { transform: translateY(-1.5px); }
	100% { transform: translateY(0); }
}
@keyframes rkx-ic-ripple {
	0% { opacity: 0; transform: scale(.3); }
	45% { opacity: .65; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.35); }
}


/* ============================================================
   Shared "deep navy + vivid blue border" surface — applied to the
   menu + footer-drawer accordion triggers on hover AND when
   active/open. Only the background and border change; text, accent
   bar, etc. are untouched.
   ============================================================ */
.rkx-menu-panel .rkx-accordion-trigger:hover,
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-trigger,
.rkx-drawer .rkx-accordion-trigger:hover,
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-trigger {
	background: linear-gradient(135deg, rgba(6, 30, 76, 0.92) 0%, rgba(3, 18, 48, 0.92) 100%) !important;
	border: 1px solid #1f5bff !important;
	border-color: #1f5bff !important;
}

@media (prefers-reduced-motion: reduce) {
	.rkx-contact-row:hover .rkx-contact-ico svg,
	.rkx-contact-row:hover .rkx-contact-ico svg *,
	.rkx-menu-panel .rkx-accordion-trigger:hover .rkx-acc-icon { animation: none; transform: none; }
}


/* ===== 2 · DYNAMIC THEME CSS (functions.php defaults) ===== */
html { background-color: #15161A; }
/* ---- Logo: real <img> inside <picture> (wordmark from the breakpoint up,
   RKX mark below it), dead-centred in the pill at every screen size.
   The centre column is lifted out of the flex row and stretched over the
   whole pill, so the logo's centre is the pill's centre no matter how
   wide the Menu button or the Login / Sign Up buttons are. The image's
   height comes from the "LOGO SIZE" ladder at the end of this file. ---- */
.rkx-header { position: relative; }
.rkx-col--center {
	position: absolute;
	inset: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.rkx-col--center .rkx-logo-link { pointer-events: auto; }
.rkx-logo-pic { display: block; line-height: 0; }
.rkx-logo-svg { width: auto; }
@media (max-width: 767px) {
	.rkx-logo-svg { height: 28px; }   /* compact mark: same 28px as before */
}
@media (max-width: 399px) {
	.rkx-logo-svg { height: 24px; }   /* keeps clear of the Sign Up button on the narrowest phones */
}
@media (max-width: 339px) {
	.rkx-logo-svg { height: 22px; }
}

html, body { overflow-x: hidden; }

/* ============================================================
   17 · NATIVE SCROLL, NO SCROLLBAR
   Smooth-scroll hijacking is disabled (see rkx-scroll.js), so the
   browser handles wheel / trackpad / keyboard / touch natively.
   Hide the scrollbar chrome but KEEP the ability to scroll, and
   make sure no leftover lock (Lenis or a stalled loader) can ever
   freeze the page.
   ============================================================ */
html {
	overflow-y: auto;
	scrollbar-width: none;          /* Firefox: hide bar, keep scroll */
	-ms-overflow-style: none;       /* legacy Edge/IE */
	scroll-padding-top: 96px;       /* anchor targets clear the fixed header */
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* WebKit/Blink */

/* ============================================================
   18 · MODERN VERTICAL SCROLLBAR (custom, gradient thumb)
   Injected by rkx-theme-bridge.js on pointer-fine devices. The
   native bar stays hidden (§17); this floats on the right with a
   short gradient thumb (capped < half the screen), matching the
   loader + top progress-bar gradient. Draggable, auto-fading.
   ============================================================ */
.rkx-vbar {
	position: fixed;
	top: 10px;
	bottom: 10px;
	right: 5px;
	width: 8px;
	z-index: 2147483000;
	pointer-events: none;         /* track ignores clicks; thumb re-enables */
	opacity: 0;
	transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rkx-vbar.is-visible { opacity: 1; }
.rkx-vbar.is-idle    { opacity: 0.32; }
.rkx-vbar__thumb {
	position: absolute;
	left: 1px;
	right: 1px;
	top: 0;
	height: 40px;
	min-height: 28px;
	max-height: 44vh;             /* "not even half the screen" */
	border-radius: 3px;
	background: var(--rkx-grad-180, linear-gradient(180deg, #1F39C2, #4D5DFF));
	box-shadow: 0 0 10px rgba(31, 57, 194, 0.7), 0 0 22px rgba(44, 72, 221, 0.4);
	pointer-events: auto;
	cursor: grab;
	transition: box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1), filter 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rkx-vbar__thumb:hover { box-shadow: 0 0 14px rgba(31, 57, 194, 0.9), 0 0 30px rgba(44, 72, 221, 0.55); filter: brightness(1.12); }
.rkx-vbar.is-dragging .rkx-vbar__thumb { cursor: grabbing; filter: brightness(1.15); }
@media (pointer: coarse) { .rkx-vbar { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .rkx-vbar { transition: none; } }
/* ============================================================
   19 · BUTTONS — SOLID BRAND INDIGO + GLOW + SHIMMER, NO ARROWS
   Every text button uses #1F39C2, glows on hover and sweeps a
   shimmer streak. Trailing arrow glyphs are removed. Icon-only
   controls (social, forward tiles, menu toggle) are untouched —
   they don't use these text-button classes.
   ============================================================ */
.rkx-cta--primary,
.rkx-btn--primary,
.rkx-foot-cta,
.rkx-pane-cta-btn,
.rkx-drawer-cta-btn,
.rkx-feat-cta {
	position: relative;
	overflow: hidden;
	background: #1F39C2 !important;
	border: 1px solid rgba(31, 57, 194, 0.55) !important;
	color: #F3EFE6 !important;
}
/* Secondary (--ghost) buttons keep their theme ghost background — just
   ensure they clip a shimmer streak. */
.rkx-cta--ghost,
.rkx-btn--ghost,
.rkx-foot-explore {
	position: relative;
	overflow: hidden;
}
.rkx-cta--primary:hover,
.rkx-btn--primary:hover,
.rkx-foot-cta:hover,
.rkx-pane-cta-btn:hover,
.rkx-drawer-cta-btn:hover,
.rkx-feat-cta:hover {
	background: #2C48DD !important;
	border-color: rgba(31, 57, 194, 0.75) !important;
	box-shadow: 0 0 22px rgba(31, 57, 194, 0.55), 0 8px 30px -10px rgba(31, 57, 194, 0.6) !important;
	color: #F3EFE6 !important;
}
/* Shimmer sweep for buttons whose base style has no ::before streak
   (ghost + explore). The primary variants already ship their own. */
.rkx-cta--ghost::before,
.rkx-btn--ghost::before,
.rkx-foot-explore::before {
	content: '';
	position: absolute;
	inset: 0;
	left: -100%;
	background: linear-gradient(115deg, transparent 0%, transparent 35%, rgba(243, 239, 230, 0.28) 50%, transparent 65%, transparent 100%);
	transition: left 700ms cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 1;
}
.rkx-cta--ghost:hover::before,
.rkx-btn--ghost:hover::before,
.rkx-foot-explore:hover::before { left: 100%; }
.rkx-cta--ghost > *,
.rkx-btn--ghost > *,
.rkx-foot-explore > * { position: relative; z-index: 2; }

/* Remove trailing arrow glyphs from every text button */
.rkx-cta > svg,
.rkx-btn > svg,
.rkx-foot-cta > svg,
.rkx-foot-explore > svg,
.rkx-pane-cta-btn > svg,
.rkx-drawer-cta-btn > svg,
.rkx-feat-cta > svg { display: none !important; }

/* Unified SMOOTH shimmer timing — every button that sweeps a light streak
   glides on ONE gentle ease-out curve instead of a linear/abrupt slide.
   Wrapped in no-preference so reduced-motion users keep it disabled. */
@media (prefers-reduced-motion: no-preference) {
	.rkx-cta--primary::before,
	.rkx-cta--ghost::before,
	.rkx-btn--primary::before,
	.rkx-btn--ghost::before,
	.rkx-foot-cta::before,
	.rkx-foot-explore::before,
	.rkx-pane-cta-btn::before,
	.rkx-drawer-cta-btn::before,
	.rkx-feat-cta::before {
		transition: left 820ms cubic-bezier(0.33, 1, 0.68, 1) !important;
	}
}

/* ============================================================
   21 · HEADING ACCENT WORDS — OUTLINED (was solid blue)
   The blue accent word inside H1/H2 headings now renders as
   outlined type: transparent fill + a bright brand-indigo stroke
   (deep #1F39C2 would vanish on the near-black bg, so the stroke
   uses a lighter same-hue indigo) plus a soft glow.
   ============================================================ */
.rkx-h1__accent,
.rkx-h2__accent {
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0.028em #4d5dff;
	text-stroke: 0.028em #4d5dff;
	font-weight: 600 !important;
	font-style: normal !important;
	text-shadow: 0 0 26px rgba(31, 57, 194, 0.32);
	paint-order: stroke fill;
}

/* ============================================================
   22 · PREMIUM MOTION — smoother easing everywhere
   The header + footer route almost every transition through the
   shared --rkx-ease / --rkx-fast (and --rkxf-*) tokens. Redefining
   them to a soft ease-out with a slightly longer glide makes every
   hover, border, colour, box-shadow and radius transition across
   the chrome feel smooth and premium at once. Body CTAs (which use
   hardcoded 160/200ms) get the same unified curve. Reduced-motion
   collapses it back to instant.
   ============================================================ */
:root {
	--rkx-ease:  cubic-bezier(0.22, 1, 0.36, 1) !important;
	--rkx-fast:  280ms !important;
	--rkxf-ease: cubic-bezier(0.22, 1, 0.36, 1) !important;
	--rkxf-fast: 280ms !important;
}
.rkx-cta,
.rkx-cta--primary,
.rkx-cta--ghost {
	transition: background 320ms cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
	            color 320ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Header auth + footer buttons: add a gentle transform lift on hover for a
   tactile, premium response (kept tiny so layout never shifts). */
.rkx-btn:hover,
.rkx-foot-cta:hover,
.rkx-foot-explore:hover { transform: translateY(-1px); }
.rkx-btn:active,
.rkx-foot-cta:active,
.rkx-foot-explore:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	:root { --rkx-fast: 0.01ms !important; --rkxf-fast: 0.01ms !important; }
	.rkx-cta, .rkx-cta--primary, .rkx-cta--ghost { transition: none !important; }
	.rkx-btn:hover, .rkx-foot-cta:hover, .rkx-foot-explore:hover { transform: none; }
}
/* Failsafes: a stalled Lenis or loader must never leave the page unscrollable */
html.lenis, html.lenis body { height: auto; }
html.lenis-stopped { overflow: auto !important; }
/* ============================================================
   12 · UNIFIED WIDTH SYSTEM (LOCKED)
   One set of steps for the header pill, the footer pill AND every
   section container. Declared last so it wins over the theme's
   own per-breakpoint token steps. Base rule first, media rules
   after, so the correct value wins at every viewport.
     <= 1365px  : 95% default, 100% when the menu/panel is open
     1366-1920px: 85% default, 100% open
     >= 1921px  : 75% default,  95% open   (through 8K)
   ============================================================ */
:root {
    --rkx-w-def: 95%;  --rkx-w-exp: 100%;
    --rkxf-w-def: 95%; --rkxf-w-exp: 100%;
}
@media (min-width: 1366px) and (max-width: 1920px) {
    :root {
        --rkx-w-def: 85%;  --rkx-w-exp: 100%;
        --rkxf-w-def: 85%; --rkxf-w-exp: 100%;
    }
}
@media (min-width: 1921px) {
    :root {
        --rkx-w-def: 75%;  --rkx-w-exp: 95%;
        --rkxf-w-def: 75%; --rkxf-w-exp: 95%;
    }
}

/* ============================================================
   13 · MOBILE / TABLET MENU PANEL (< 1024px)
   One column, fills the viewport under the header (scrollable),
   the featured "Results That Compound" widget + the contact
   block (phone / email / address) are shown — not hidden.
   Accordions start closed (handled by the header controller).
   ============================================================ */
@media (max-width: 1023px) {
    .rkx-menu-panel {
        bottom: 0 !important;          /* inline top (header bottom) + bottom:0 => full height */
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;         /* Firefox: hide bar, keep scroll */
        -ms-overflow-style: none;      /* legacy Edge/IE */
        border-radius: 0 !important;
    }
    /* WebKit/Blink: hide the scrollbar but keep wheel/touch/keyboard scrolling */
    .rkx-menu-panel::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
    .rkx-menu-inner {
        grid-template-columns: 1fr !important;
        align-content: start;
        min-height: 100%;
        gap: 0;
    }
    /* every stacked column separated by a hairline, feat widget shown */
    .rkx-menu-col:not(:last-child) {
        border-right: none !important;
        border-bottom: 1px solid var(--rkx-border) !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 22px;
        margin-bottom: 22px;
    }
    .rkx-menu-col--feat {
        display: flex !important;      /* un-hide the widget (was display:none 640-1023) */
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    /* contact rows: icon + value on one line, comfortably tappable */
    .rkx-menu-col--feat .rkx-contact {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 18px;
    }
    .rkx-menu-col--feat .rkx-contact-row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 6px 0 6px 14px;
        position: relative;
        color: var(--rkx-muted);
        text-decoration: none;
    }
    .rkx-menu-col--feat .rkx-contact-row::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 16px;
        background: rgba(243, 239, 230, 0.14);
        border-radius: 1px;
        transition: background 300ms var(--rkx-ease), height 300ms var(--rkx-ease), box-shadow 300ms var(--rkx-ease);
    }
    .rkx-menu-col--feat .rkx-contact-row:hover::before,
    .rkx-menu-col--feat .rkx-contact-row:active::before {
        background: var(--rkx-accent);
        height: 24px;
        box-shadow: 0 0 9px var(--rkx-accent-glow);
    }
    .rkx-menu-col--feat .rkx-contact-ico {
        width: 22px; height: 22px; flex-shrink: 0;
        color: #F3EFE6;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .rkx-menu-col--feat .rkx-contact-val {
        font-size: 14px; font-weight: 500;
        color: var(--rkx-muted);
    }
    .rkx-menu-col--feat .rkx-contact-row:hover .rkx-contact-val { color: #F3EFE6; }
}
/* ============================================================
   14 · MENU-PANEL CONTACT SUB-BAR
   Three slim eyebrow pills — Email / Phone / Offices — on one
   straight line at the bottom of the mega-menu panel. (The old
   phone/email/address rows in the featured widget are removed.)
   ============================================================ */
.rkx-subbar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rkx-border, rgba(243, 239, 230, 0.10));
}
.rkx-subpill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 7px 16px;
    border-radius: 1px;
    background: #03163E;
    border: 1px solid #0057FF;
    box-shadow: 0 0 0.7rem rgba(0, 87, 255, 0.30), inset 0 0 0.5rem rgba(0, 87, 255, 0.14);
    color: #F3EFE6;
    font-family: var(--rkx-font, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 200ms var(--rkx-ease, cubic-bezier(.4,0,.2,1)),
                box-shadow 200ms var(--rkx-ease, cubic-bezier(.4,0,.2,1)),
                background 200ms var(--rkx-ease, cubic-bezier(.4,0,.2,1)),
                transform 200ms var(--rkx-ease, cubic-bezier(.4,0,.2,1));
}
.rkx-subpill:hover {
    background: #06215a;
    border-color: #2E63FF;
    box-shadow: 0 0 1rem rgba(0, 87, 255, 0.5), inset 0 0 0.5rem rgba(0, 87, 255, 0.2);
    transform: translateY(-1px);
}
.rkx-subpill:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.rkx-subpill__ic {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: #818cf8;
    display: inline-flex;
    transition: color 200ms var(--rkx-ease, cubic-bezier(.4,0,.2,1));
}
.rkx-subpill__ic svg { width: 100%; height: 100%; display: block; stroke: #F3EFE6; }
.rkx-subpill:hover .rkx-subpill__ic { color: #F3EFE6; }
@media (max-width: 480px) {
    .rkx-subbar { gap: 7px; }
    .rkx-subpill { padding: 7px 11px; letter-spacing: 0.06em; font-size: 10px; gap: 5px; }
    .rkx-subpill__ic { width: 12px; height: 12px; }
}

/* ---- from rkx-theme-bridge.css §23: Ragick display face (chrome headings) ---- */
@font-face {
	font-family: 'Ragick';
	src: url('assets/fonts/ragick.otf') format('opentype');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
:root { --rkx-font-display: 'Ragick', 'Poppins', var(--rkx-font-sans); }
.rkx-feat-title,
.rkx-foot-panel :is(h2, h3) {
	font-family: var(--rkx-font-display) !important;
	font-weight: 400 !important;
	letter-spacing: 0.004em;
}

/* ---- Footer panel panes: always fully visible ----
   On the original site rkx-scroll.js tagged every .rkx-pane with a
   scroll-reveal (data-scroll-fx="rise") and its "is-revealed" state won
   over the footer controller's GSAP dim/offset (opacity .32, y 4px). The
   scroll-reveal system is not part of the chrome, so this rule reproduces
   the exact rendered result: panes sit at full opacity with no offset. */
.rkx-foot-panel .rkx-pane {
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================================
   LOGO SIZE — header (.rkx-logo-svg) and footer (.rkx-foot-logo)
   ladders, ~35% below the production sizes; declared here so they
   win over the per-breakpoint rules earlier in the cascade.
   ============================================================ */
.rkx-logo-svg { height: 22px; }
@media (max-width: 767px)  { .rkx-logo-svg { height: 19px; } }
@media (max-width: 399px)  { .rkx-logo-svg { height: 17px; } }
@media (min-width: 1280px) and (max-width: 1535px) { .rkx-logo-svg { height: 24px; } }
@media (min-width: 1536px) and (max-width: 1919px) { .rkx-logo-svg { height: 26px; } }
@media (min-width: 1920px) and (max-width: 2559px) { .rkx-logo-svg { height: 29px; } }
@media (min-width: 2560px) and (max-width: 3839px) { .rkx-logo-svg { height: 36px; } }
@media (min-width: 3840px) and (max-width: 5119px) { .rkx-logo-svg { height: 44px; } }
@media (min-width: 5120px) and (max-width: 7679px) { .rkx-logo-svg { height: 56px; } }
@media (min-width: 7680px) { .rkx-logo-svg { height: 73px; } }
.rkx-foot-logo { height: 18px; }
@media (max-width: 767px)  { .rkx-foot-logo { height: 17px; } }
@media (min-width: 1920px) and (max-width: 2559px) { .rkx-foot-logo { height: 24px; } }
@media (min-width: 2560px) and (max-width: 3839px) { .rkx-foot-logo { height: 29px; } }
@media (min-width: 3840px) and (max-width: 5119px) { .rkx-foot-logo { height: 36px; } }
@media (min-width: 5120px) and (max-width: 7679px) { .rkx-foot-logo { height: 46px; } }
@media (min-width: 7680px) { .rkx-foot-logo { height: 60px; } }

/* ============================================================
   MENU BUTTON — ghost-button surface (same recipe as the Login
   button: transparent fill, hairline border, 1px radius, same
   height ladder), turning translucent brand-blue while the menu
   is open (aria-expanded="true").
   ============================================================ */
.rkx-menu-btn {
	box-sizing: border-box;
	height: 34px;
	padding: 0 14px 0 10px;
	gap: 10px;
	background: transparent;
	border: 1px solid var(--rkx-ghost-b);
	border-radius: 1px;
	transition: background   var(--rkx-fast) var(--rkx-ease),
	            border-color var(--rkx-fast) var(--rkx-ease),
	            box-shadow   var(--rkx-fast) var(--rkx-ease),
	            transform    var(--rkx-fast) var(--rkx-ease);
}
.rkx-menu-btn:hover {
	background: var(--rkx-ghost-bg);
	border-color: rgba(243, 239, 230,0.28);
	transform: translateY(-1px);
}
.rkx-menu-btn:active { transform: translateY(0); }
.rkx-menu-btn[aria-expanded="true"],
.rkx-menu-btn[aria-expanded="true"]:hover {
	background: rgba(31, 57, 194, 0.32);          /* transparent brand blue */
	border-color: rgba(31, 57, 194, 0.65);
	box-shadow: 0 0 16px rgba(31, 57, 194, 0.35), 0 1px 0 rgba(243, 239, 230,0.06) inset;
	transform: none;
}
.rkx-burger { height: 1.6em; }                     /* sits comfortably inside the bordered box */
@media (max-width: 639px) {
	.rkx-menu-btn { height: 32px; padding: 0 9px; gap: 0; }
}
/* keep the box the same height as the Login / Sign Up buttons on big screens */
@media (min-width: 1920px) and (max-width: 2559px) { .rkx-menu-btn { height: 40px; padding: 0 18px 0 14px; } }
@media (min-width: 2560px) and (max-width: 3839px) { .rkx-menu-btn { height: 48px; padding: 0 22px 0 16px; } }
@media (min-width: 3840px) and (max-width: 5119px) { .rkx-menu-btn { height: 58px; padding: 0 28px 0 20px; } }
@media (min-width: 5120px) and (max-width: 7679px) { .rkx-menu-btn { height: 74px; padding: 0 36px 0 26px; } }
@media (min-width: 7680px) { .rkx-menu-btn { height: 96px; padding: 0 48px 0 34px; } }
@media (prefers-reduced-motion: reduce) {
	.rkx-menu-btn, .rkx-menu-btn:hover { transition: none; transform: none; }
}

/* ============================================================
   MENU BUTTON — hover shimmer (same light streak as the Login
   button). Children sit above the streak.
   ============================================================ */
.rkx-menu-btn { position: relative; overflow: hidden; }
.rkx-menu-btn > * { position: relative; z-index: 2; }
.rkx-menu-btn::before {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(115deg,
		transparent 0%, transparent 35%,
		rgba(243, 239, 230,0.28) 50%,
		transparent 65%, transparent 100%);
	transition: left 820ms cubic-bezier(0.33, 1, 0.68, 1);
	pointer-events: none;
	z-index: 1;
}
.rkx-menu-btn:hover::before { left: 100%; }
@media (prefers-reduced-motion: reduce) { .rkx-menu-btn::before { transition: none !important; } }

/* ============================================================
   SIGN UP — icon-only wherever the Menu / Close label is hidden
   (≤1024px), so both ends of the pill read as matching icon
   buttons (1.3:1, a touch wider than square). The user-plus icon animates on hover (the plus
   spins + pops, the figure bobs). Text label above 1024px.
   ============================================================ */
.rkx-btn--signup .rkx-btn__ico {
	width: 18px;
	height: 18px;
	position: relative;
	z-index: 2;
}
.rkx-btn--signup .rkx-ico-signup__plus,
.rkx-btn--signup .rkx-ico-signup__body { transform-box: fill-box; transform-origin: center; }
@media (max-width: 1024px) {
	.rkx-btn--signup {
		min-width: 0 !important;
		width: auto;
		aspect-ratio: 1.3 / 1;   /* a little wider than square on icon-only sizes */
		padding: 0 !important;
	}
	.rkx-btn--signup .rkx-btn__label { display: none; }
	.rkx-btn--signup > .rkx-btn__ico { display: block !important; }   /* beats the "no trailing arrows" rule */
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.rkx-btn--signup:hover .rkx-ico-signup__plus { animation: rkxSignupPlus 720ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
	.rkx-btn--signup:hover .rkx-ico-signup__body { animation: rkxSignupBob  600ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}
@keyframes rkxSignupPlus {
	0%   { transform: rotate(0deg)   scale(1); }
	55%  { transform: rotate(180deg) scale(1.3); }
	100% { transform: rotate(180deg) scale(1); }
}
@keyframes rkxSignupBob {
	0%   { transform: translateY(0); }
	40%  { transform: translateY(-1.6px); }
	100% { transform: translateY(0); }
}

/* ============================================================
   ACTIVE ACCORDIONS + FOOTER — the same translucent brand-blue
   surface as the open Menu button. Hover stays a light ghost.
   (Overrides the earlier "deep navy + vivid blue border" rules,
   which are !important, so these are too.)
   ============================================================ */
.rkx-menu-panel .rkx-accordion-trigger:hover,
.rkx-drawer .rkx-accordion-trigger:hover {
	background: rgba(243, 239, 230,0.06) !important;
	border: 1px solid rgba(243, 239, 230,0.28) !important;
	box-shadow: none;
}
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-trigger,
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-trigger,
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-trigger:hover,
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-trigger:hover {
	background: rgba(31, 57, 194, 0.32) !important;
	border: 1px solid rgba(31, 57, 194, 0.65) !important;
	box-shadow: 0 0 16px rgba(31, 57, 194, 0.35), 0 1px 0 rgba(243, 239, 230,0.06) inset;
}
.rkx-foot-item.is-active,
.rkx-foot-item.is-active:hover,
.rkx-foot-explore.is-open,
.rkx-foot-explore.is-open:hover {
	color: #F3EFE6;
	background: rgba(31, 57, 194, 0.32) !important;
	border-color: rgba(31, 57, 194, 0.65) !important;
	box-shadow: 0 0 16px rgba(31, 57, 194, 0.35), 0 1px 0 rgba(243, 239, 230,0.06) inset;
}

/* ============================================================
   EQUAL-WIDTH HEADER BUTTONS
   Menu · Login · Sign Up share one width (--rkx-auth-w) above
   1024px, content centred. In icon mode (≤1024px) Menu and
   Sign Up are the same 1.3:1 box (a little wider than square).
   ============================================================ */
:root { --rkx-auth-w: 100px; }
@media (min-width: 1920px) and (max-width: 2559px) { :root { --rkx-auth-w: 116px; } }
@media (min-width: 2560px) and (max-width: 3839px) { :root { --rkx-auth-w: 144px; } }
@media (min-width: 3840px) and (max-width: 5119px) { :root { --rkx-auth-w: 176px; } }
@media (min-width: 5120px) and (max-width: 7679px) { :root { --rkx-auth-w: 224px; } }
@media (min-width: 7680px) { :root { --rkx-auth-w: 292px; } }
@media (min-width: 1025px) {
	.rkx-btn,
	.rkx-menu-btn { box-sizing: border-box; width: var(--rkx-auth-w); min-width: 0 !important; }
	.rkx-menu-btn { justify-content: center; padding: 0 10px; }
}
@media (max-width: 1024px) {
	.rkx-menu-btn {
		width: auto;
		min-width: 0;
		aspect-ratio: 1.3 / 1;   /* a little wider than square on icon-only sizes */
		padding: 0 !important;
		gap: 0;
		justify-content: center;
	}
}

/* ============================================================
   BLUE SURFACES → the Menu button's translucent brand blue
   Every solid-blue chrome surface now uses the same
   rgba(31, 57, 194,.32) fill + rgba(31, 57, 194,.65) hairline + soft
   glow as the open Menu button; hover deepens the fill. Covers
   the header Sign Up, featured-card Contact, contact sub-pills,
   "Case Data" badge, active chart bar, footer Contact, both
   "Book a call" buttons and the social-icon hovers. Accent bars,
   text colours and the scrollbar thumb are untouched.
   ============================================================ */
.rkx-btn--primary,
.rkx-feat-cta,
.rkx-subpill,
.rkx-badge--blue,
.rkx-foot-cta,
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-btn,
.rkx-drawer .rkx-drawer-cta-btn {
	background: rgba(31, 57, 194, 0.32) !important;
	border: 1px solid rgba(31, 57, 194, 0.65) !important;
	box-shadow: 0 0 16px rgba(31, 57, 194, 0.35), 0 1px 0 rgba(243, 239, 230,0.06) inset !important;
	color: #F3EFE6 !important;
}
.rkx-btn--primary:hover,
.rkx-feat-cta:hover,
.rkx-subpill:hover,
.rkx-foot-cta:hover,
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-btn:hover,
.rkx-drawer .rkx-drawer-cta-btn:hover {
	background: rgba(31, 57, 194, 0.48) !important;
	border-color: rgba(31, 57, 194, 0.85) !important;
	box-shadow: 0 0 22px rgba(31, 57, 194, 0.5), 0 1px 0 rgba(243, 239, 230,0.08) inset !important;
}
.rkx-chart-bar--active,
.rkx-feat-card:hover .rkx-chart-bar--active {
	background: rgba(31, 57, 194, 0.32) !important;
	box-shadow: inset 0 0 0 1px rgba(31, 57, 194, 0.65), 0 0 12px rgba(31, 57, 194, 0.35);
}
.rkx-foot-social:hover,
.rkx-drawer-social:hover {
	background: rgba(31, 57, 194, 0.32) !important;
	border-color: rgba(31, 57, 194, 0.65) !important;
}

/* ============================================================
   ONE TYPE SYSTEM FOR HEADER + FOOTER
   UI text is Inter in both (already). This aligns the rest:
   small eyebrow labels are Poppins 12px/600 uppercase everywhere
   (header "Proven Impact" = footer "Featured" / drawer titles),
   and feature titles use the Ragick display face in both
   ("Results That Compound" = "Ready to start?").
   ============================================================ */
.rkx-feat-label,
.rkx-pane-label,
.rkx-pane-cta-eyebrow,
.rkx-drawer-title,
.rkx-drawer-section-label {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase;
}
/* The footer's own feature-card rules are !important at 0,4,0 specificity,
   so these mirror those selectors exactly. */
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-eyebrow {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
}
.rkx-pane-cta-title,
.rkx-drawer-cta-title,
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-title,
.rkx-drawer .rkx-drawer-cta-title {
	font-family: var(--rkx-font-display) !important;
	font-weight: 400 !important;
	letter-spacing: 0.004em !important;
}
.rkx-pane-cta-desc,
.rkx-drawer-cta-desc,
.rkx-pane-link,
.rkx-foot-item,
.rkx-foot-explore,
.rkx-foot-cta,
.rkx-pane-cta-btn,
.rkx-drawer-cta-btn,
.rkx-drawer .rkx-nav-link,
.rkx-drawer .rkx-accordion-trigger { font-family: var(--rkx-font, 'Inter', sans-serif); }

/* ============================================================
   LIVE FEATURED WIDGET (mega-menu "Results That Compound")
   Reads like a real dashboard receiving data: while the panel is
   open, rkx-chrome.js nudges every bar to a new nearby value each
   2.4s (smooth eased height changes with the existing stagger —
   the bars never collapse) and drifts the two metrics a little,
   flashing them softly when they update. The active bar keeps a
   gentle glow pulse, a slow sheen crosses the chart and the live
   dot breathes. Calm, continuous, no jumps. Stops on close and
   under reduced-motion.
   ============================================================ */
.rkx-chart-bar {
	transition: height 1100ms cubic-bezier(0.22, 1, 0.36, 1),
	            background 500ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: var(--d, 0ms);
}
.rkx-menu-panel.is-open .rkx-chart-bar--active {
	animation: rkxBarGlow 2.4s ease-in-out infinite;
}
@keyframes rkxBarGlow {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba(31, 57, 194,0.65), 0 0 12px rgba(31, 57, 194,0.35); }
	50%      { box-shadow: inset 0 0 0 1px rgba(129,140,248,0.9), 0 0 22px rgba(31, 57, 194,0.65); }
}
.rkx-chart-bars { position: relative; overflow: hidden; }
.rkx-chart-bars::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(243, 239, 230,0.12) 50%, transparent 60%, transparent 100%);
	transform: translateX(-100%);
	pointer-events: none;
}
.rkx-menu-panel.is-open .rkx-chart-bars::after { animation: rkxChartSheen 6s cubic-bezier(0.33, 1, 0.68, 1) 1.5s infinite; }
@keyframes rkxChartSheen {
	0%   { transform: translateX(-100%); }
	40%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}
.rkx-feat-meta::after {
	content: '';
	width: 6px;
	height: 6px;
	margin-left: auto;
	border-radius: 50%;
	background: #3BD682;
	box-shadow: 0 0 8px #3BD682;
	flex-shrink: 0;
}
.rkx-menu-panel.is-open .rkx-feat-meta::after { animation: rkxLiveDot 1.6s ease-in-out infinite; }
@keyframes rkxLiveDot {
	0%, 100% { opacity: 1;   box-shadow: 0 0 8px #3BD682; }
	50%      { opacity: 0.45; box-shadow: 0 0 2px #3BD682; }
}
/* soft flash on a metric when its value updates (class from rkx-chrome.js) */
.rkx-fc-metric-num { transition: color 400ms ease, text-shadow 400ms ease; }
.rkx-fc-metric-num.is-tick { color: #c7ccff; text-shadow: 0 0 12px rgba(129,140,248,0.75); }
.rkx-fc-metric-num--accent.is-tick { color: #a5adff; }
@media (prefers-reduced-motion: reduce) {
	.rkx-menu-panel.is-open .rkx-chart-bar--active,
	.rkx-menu-panel.is-open .rkx-chart-bars::after,
	.rkx-menu-panel.is-open .rkx-feat-meta::after { animation: none !important; }
	.rkx-chart-bar { transition-duration: 0.01ms !important; }
}

/* ============================================================
   CONTACT SUB-PILLS (Email / Phone / Offices) — same hover as
   the other buttons: shimmer sweep + deeper blue + 1px lift.
   (Fill/border/deepen already come from the blue-surface rules.)
   ============================================================ */
.rkx-subpill { position: relative; overflow: hidden; }
.rkx-subpill > * { position: relative; z-index: 2; }
.rkx-subpill::before {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(115deg,
		transparent 0%, transparent 35%,
		rgba(243, 239, 230,0.28) 50%,
		transparent 65%, transparent 100%);
	transition: left 820ms cubic-bezier(0.33, 1, 0.68, 1);
	pointer-events: none;
	z-index: 1;
}
.rkx-subpill:hover::before { left: 100%; }
.rkx-subpill:hover { transform: translateY(-1px); }
.rkx-subpill:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.rkx-subpill::before { transition: none !important; }
	.rkx-subpill:hover { transform: none; }
}

/* ============================================================
   NEON BLUE — one luminous recipe for every blue surface
   (palette shifted a step darker / bluer: #4453FF line, #5B6BFF hover)
   Same brand hue as before, but the hairline becomes a bright
   electric line and the translucent fill is wrapped in layered
   outer + inner glow, so buttons, pills, badges and every active
   state read as neon tubing on the dark glass. Hover = brighter
   tube. Labels and icons get a soft light bloom.
   ============================================================ */
:root {
	--rkx-neon:        #4453FF;
	--rkx-neon-fill:   rgba(31, 57, 194, 0.34);
	--rkx-neon-fill-h: rgba(31, 57, 194, 0.52);
	--rkx-neon-glow:   0 0 4px rgba(68, 83, 255, 0.75),
	                   0 0 14px rgba(31, 57, 194, 0.65),
	                   0 0 32px rgba(31, 57, 194, 0.40),
	                   inset 0 0 10px rgba(68, 83, 255, 0.22);
	--rkx-neon-glow-h: 0 0 6px rgba(91, 107, 255, 0.95),
	                   0 0 20px rgba(31, 57, 194, 0.85),
	                   0 0 48px rgba(31, 57, 194, 0.55),
	                   inset 0 0 14px rgba(68, 83, 255, 0.35);
	--rkx-neon-text:   0 0 8px rgba(243, 239, 230, 0.55);   /* white bloom — text stays white */
	--rkx-neon-icon:   drop-shadow(0 0 4px rgba(108, 122, 255, 0.9));
}

/* surfaces + active states */
.rkx-btn--primary,
.rkx-feat-cta,
.rkx-subpill,
.rkx-badge--blue,
.rkx-foot-cta,
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-btn,
.rkx-drawer .rkx-drawer-cta-btn,
.rkx-menu-btn[aria-expanded="true"],
.rkx-menu-btn[aria-expanded="true"]:hover,
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-trigger,
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-trigger:hover,
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-trigger,
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-trigger:hover,
.rkx-foot-item.is-active,
.rkx-foot-item.is-active:hover,
.rkx-foot-explore.is-open,
.rkx-foot-explore.is-open:hover {
	background: var(--rkx-neon-fill) !important;
	border-color: var(--rkx-neon) !important;
	box-shadow: var(--rkx-neon-glow) !important;
	color: #F3EFE6 !important;
	text-shadow: var(--rkx-neon-text);
}
/* hover on the buttons = brighter tube */
.rkx-btn--primary:hover,
.rkx-feat-cta:hover,
.rkx-subpill:hover,
.rkx-foot-cta:hover,
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-btn:hover,
.rkx-drawer .rkx-drawer-cta-btn:hover {
	background: var(--rkx-neon-fill-h) !important;
	border-color: #5B6BFF !important;
	box-shadow: var(--rkx-neon-glow-h) !important;
}
.rkx-foot-social:hover,
.rkx-drawer-social:hover {
	background: var(--rkx-neon-fill) !important;
	border-color: var(--rkx-neon) !important;
	box-shadow: var(--rkx-neon-glow) !important;
}
/* the tiny badge keeps a smaller bloom */
.rkx-badge--blue {
	box-shadow: 0 0 3px rgba(68,83,255,0.7), 0 0 10px rgba(31, 57, 194,0.55) !important;
	text-shadow: 0 0 6px rgba(243, 239, 230,0.5);
}
/* icons inside neon surfaces bloom too */
.rkx-btn--signup .rkx-btn__ico,
.rkx-subpill__ic,
.rkx-foot-cta svg,
.rkx-menu-btn[aria-expanded="true"] .rkx-burger { filter: var(--rkx-neon-icon); }
/* active chart bar = neon tube as well (static + its glow pulse) */
.rkx-chart-bar--active,
.rkx-feat-card:hover .rkx-chart-bar--active {
	background: var(--rkx-neon-fill) !important;
	box-shadow: inset 0 0 0 1px var(--rkx-neon), 0 0 6px rgba(68,83,255,0.7), 0 0 16px rgba(31, 57, 194,0.6);
}
@keyframes rkxBarGlow {
	0%, 100% { box-shadow: inset 0 0 0 1px var(--rkx-neon), 0 0 6px rgba(68,83,255,0.7), 0 0 16px rgba(31, 57, 194,0.6); }
	50%      { box-shadow: inset 0 0 0 1px #6B78FF, 0 0 10px rgba(108,122,255,0.95), 0 0 30px rgba(31, 57, 194,0.9); }
}

/* ============================================================
   WHITE TEXT + ICONS in buttons and accordions, in every state
   (rest / hover / open / active). Dim or periwinkle glyphs — the
   "Close" label, contact-pill icons, +/- accordion indicators,
   nav links, footer items, panel links + arrows, drawer close —
   are all pinned to white.
   ============================================================ */
.rkx-menu-label__on,
.rkx-menu-label__off,
.rkx-btn--ghost, .rkx-btn--ghost:hover,
.rkx-btn--primary, .rkx-btn--primary:hover,
.rkx-subpill, .rkx-subpill:hover,
.rkx-subpill__ic, .rkx-subpill:hover .rkx-subpill__ic,
.rkx-feat-cta, .rkx-feat-cta:hover,
.rkx-badge--blue,
.rkx-menu-panel .rkx-accordion-trigger,
.rkx-menu-panel .rkx-accordion-trigger:hover,
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-trigger,
.rkx-drawer .rkx-accordion-trigger,
.rkx-drawer .rkx-accordion-trigger:hover,
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-trigger,
.rkx-menu-panel .rkx-accordion-chevron,
.rkx-menu-panel .rkx-accordion-trigger:hover .rkx-accordion-chevron,
.rkx-menu-panel .rkx-accordion-item.is-open .rkx-accordion-chevron,
.rkx-drawer .rkx-accordion-chevron,
.rkx-drawer .rkx-accordion-trigger:hover .rkx-accordion-chevron,
.rkx-drawer .rkx-accordion-item.is-open .rkx-accordion-chevron,
.rkx-nav-link, .rkx-nav-link:hover,
.rkx-drawer .rkx-nav-link, .rkx-drawer .rkx-nav-link:hover,
.rkx-foot-item, .rkx-foot-item:hover, .rkx-foot-item.is-active,
.rkx-foot-explore, .rkx-foot-explore:hover, .rkx-foot-explore.is-open,
.rkx-foot-cta, .rkx-foot-cta:hover,
.rkx-foot-social, .rkx-foot-social:hover,
.rkx-pane-link, .rkx-pane-link:hover,
.rkx-pane-link span, .rkx-pane-link:hover span,
.rkx-pane-cta-btn, .rkx-pane-cta-btn:hover,
.rkx-drawer-link, .rkx-drawer-link:hover,
.rkx-drawer-link span,
.rkx-drawer-cta-btn, .rkx-drawer-cta-btn:hover,
.rkx-drawer-social, .rkx-drawer-social:hover,
.rkx-drawer-close, .rkx-drawer-close:hover {
	color: #F3EFE6 !important;
}
/* the +/- indicator bars are drawn with backgrounds, not text */
.rkx-menu-panel .rkx-accordion-chevron::before,
.rkx-menu-panel .rkx-accordion-chevron::after,
.rkx-drawer .rkx-accordion-chevron::before,
.rkx-drawer .rkx-accordion-chevron::after { background: #F3EFE6 !important; }
.rkx-subpill__ic svg { stroke: #F3EFE6 !important; }
.rkx-pane-link span:last-child,
.rkx-drawer-link span:last-child { opacity: 0.85; }

/* ============================================================
   NO SCROLLBAR WHILE THE MENU / FOOTER IS OPEN
   The floating page scrollbar hides whenever the mega-menu, the
   footer panel or the mobile footer drawer is open; the panels'
   own overflow areas scroll without a visible bar.
   ============================================================ */
body:has(.rkx-menu-panel.is-open) .rkx-vbar,
body:has(.rkx-foot-panel.is-open) .rkx-vbar,
body.rkx-drawer-active .rkx-vbar {
	opacity: 0 !important;
	pointer-events: none !important;
}
.rkx-menu-panel,
.rkx-foot-panel,
.rkx-drawer,
.rkx-drawer-body {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.rkx-menu-panel::-webkit-scrollbar,
.rkx-foot-panel::-webkit-scrollbar,
.rkx-drawer::-webkit-scrollbar,
.rkx-drawer-body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ============================================================
   MOBILE FOOTER PANEL (<1024px)
   Mirrors the header: the footer pill stays visible (and widens to
   the panel width, like the header pill does) and the panel opens
   ABOVE it, filling the space from the top of the viewport down to
   the pill's top edge. No visible scrollbar inside, still scrolls.
   Full Rankrix wordmark in the head, neon-blue close button.
   ============================================================ */
@media (max-width: 1023px) {
	body.rkx-drawer-active .rkx-footer-wrap {
		z-index: 1002;                       /* above the backdrop (999) and the panel (1001) */
		width: var(--rkxf-w-exp) !important; /* 100% — same as the open header pill */
	}
	.rkx-drawer {
		top: 0 !important;
		/* sit on the pill: wrap bottom offset + pill height, overlapping its top hairline */
		bottom: calc(max(4px, var(--rkxf-bot) - 10px) + var(--rkxf-h) - 1px) !important;
		height: auto !important;
		max-height: none !important;
		left: 0 !important;
		right: 0 !important;
		width: var(--rkxf-w-exp);
		margin-inline: auto;
		border: 1px solid var(--rkxf-border) !important;
		border-bottom: none !important;
		border-radius: 0 !important;
	}
	.rkx-drawer-handle { display: none; }   /* no bottom-sheet drag handle — it is a panel now */
	/* Closed, the controller parks the panel at translateY(100%). Now that its
	   bottom edge sits on the pill, that would leave the panel head hanging
	   over the pill — so keep it fully hidden until the controller flags the
	   body as drawer-active (set before the open tween, cleared after close). */
	body:not(.rkx-drawer-active) .rkx-drawer { visibility: hidden; }
	.rkx-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
.rkx-drawer-brand { display: inline-flex; align-items: center; line-height: 0; }
.rkx-drawer-logo { height: 18px; width: auto; display: block; }
@media (max-width: 767px) { .rkx-drawer-logo { height: 17px; } }
.rkx-drawer-close,
.rkx-drawer-close:hover {
	background: var(--rkx-neon-fill) !important;
	border-color: var(--rkx-neon) !important;
	box-shadow: var(--rkx-neon-glow) !important;
}
.rkx-drawer-close:hover {
	background: var(--rkx-neon-fill-h) !important;
	border-color: #5B6BFF !important;
	box-shadow: var(--rkx-neon-glow-h) !important;
}
.rkx-drawer-close svg { filter: var(--rkx-neon-icon); }

/* ============================================================
   FOOTER PANEL CLOSE ICON — animated like the header's burger
   When the panel opens the × spins in from a small "+" while its
   two strokes draw themselves; on hover it spins a quarter turn
   and pops; while the panel is open the neon button breathes.
   (box-shadow on the button is !important from the neon rules,
   so the breathing uses filter instead.)
   ============================================================ */
.rkx-drawer-close svg {
	transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-origin: center;
}
.rkx-drawer-close svg path { stroke-dasharray: 32; stroke-dashoffset: 0; }
body.rkx-drawer-active .rkx-drawer-close svg      { animation: rkxCloseSpinIn 560ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
body.rkx-drawer-active .rkx-drawer-close svg path { animation: rkxCloseDraw   520ms cubic-bezier(0.22, 1, 0.36, 1) 140ms backwards; }
body.rkx-drawer-active .rkx-drawer-close          { animation: rkxCloseBreath 2.4s ease-in-out 800ms infinite; }
.rkx-drawer-close:hover svg  { transform: rotate(90deg) scale(1.18); }
.rkx-drawer-close:active svg { transform: rotate(90deg) scale(0.92); }
@keyframes rkxCloseSpinIn {
	0%   { transform: rotate(-135deg) scale(0.3); opacity: 0; }
	60%  { opacity: 1; }
	100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
@keyframes rkxCloseDraw {
	0%   { stroke-dashoffset: 32; }
	100% { stroke-dashoffset: 0; }
}
@keyframes rkxCloseBreath {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.28) drop-shadow(0 0 8px rgba(91, 107, 255, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
	body.rkx-drawer-active .rkx-drawer-close,
	body.rkx-drawer-active .rkx-drawer-close svg,
	body.rkx-drawer-active .rkx-drawer-close svg path { animation: none !important; }
	.rkx-drawer-close:hover svg { transform: none; }
}

/* ============================================================
   GLASS PARITY — header vs footer, measured and matched
   Pills and panels already share rgba(0,0,0,.6) + blur(28px)
   saturate(1.7). This closes the remaining gaps: the mobile
   footer panel had saturate(1.8); the layer behind the footer
   panel was a blurred 70% black backdrop while the mega-menu sits
   on a plain 55% overlay (that made the footer glass read darker);
   and the two pills carried slightly different shadows.
   ============================================================ */
.rkx-drawer {
	background: var(--rkx-glass, rgba(21, 22, 26,0.6)) !important;
	backdrop-filter: blur(28px) saturate(1.7) !important;
	-webkit-backdrop-filter: blur(28px) saturate(1.7) !important;
}
.rkx-drawer-backdrop {
	background: rgba(0, 0, 0, 0.55) !important;   /* = .rkx-overlay behind the mega-menu */
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.rkx-foot-pill {
	box-shadow: 0 -8px 36px rgba(0,0,0,0.55), 0 1px 0 rgba(243, 239, 230,0.08) inset !important;   /* mirror of the header pill */
}

/* ============================================================
   GLASS PANELS — more see-through than the pills
   The mega-menu panel, the footer panel and the mobile footer
   panel drop to 42% black (pills stay at 60%), so the 28px blur
   shows the frosted page through them. One token, also driven by
   the "Panel tint" slider (Header tab) via dynamic-css.
   ============================================================ */
:root {
	--rkx-glass-panel: rgba(21, 22, 26, 0.42);
	--rkx-bg-menu:     var(--rkx-glass-panel);
	--rkxf-bg-menu:    var(--rkx-glass-panel);
}
.rkx-menu-panel,
.rkx-foot-panel,
.rkx-drawer { background: var(--rkx-glass-panel) !important; }

/* ============================================================
   UNIFIED SHIMMER — one sweep for everything, GPU-smooth
   Every hover streak in the chrome (Sign Up, Login, Menu button,
   Email/Phone/Offices, featured-card Contact, mega-menu + drawer
   accordion titles, footer items, Explore, footer Contact, both
   "Book a call" buttons) now uses the identical white streak,
   the same 820ms ease-out, and moves with transform (composited)
   instead of animating `left` (which re-lays-out every frame and
   is what made the old sweeps stutter).
   ============================================================ */
.rkx-btn--primary::before,
.rkx-btn--ghost::before,
.rkx-menu-btn::before,
.rkx-subpill::before,
.rkx-feat-cta::before,
.rkx-accordion-trigger::after,
.rkx-menu-panel .rkx-accordion-trigger::after,
.rkx-drawer .rkx-accordion-trigger::after,
.rkx-foot-item::before,
.rkx-foot-explore::before,
.rkx-foot-cta::before,
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-btn::before,
.rkx-drawer .rkx-drawer-cta-btn::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(115deg,
		transparent 0%, transparent 35%,
		rgba(243, 239, 230,0.30) 50%,
		transparent 65%, transparent 100%) !important;
	transform: translate3d(-100%, 0, 0);
	transition: transform 820ms cubic-bezier(0.33, 1, 0.68, 1) !important;
	will-change: transform;
	backface-visibility: hidden;
	pointer-events: none !important;
	z-index: 1;
}
.rkx-btn--primary:hover::before,
.rkx-btn--ghost:hover::before,
.rkx-menu-btn:hover::before,
.rkx-subpill:hover::before,
.rkx-feat-cta:hover::before,
.rkx-accordion-trigger:hover::after,
.rkx-accordion-trigger:focus-visible::after,
.rkx-menu-panel .rkx-accordion-trigger:hover::after,
.rkx-menu-panel .rkx-accordion-trigger:focus-visible::after,
.rkx-drawer .rkx-accordion-trigger:hover::after,
.rkx-foot-item:hover::before,
.rkx-foot-explore:hover::before,
.rkx-foot-cta:hover::before,
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-btn:hover::before,
.rkx-drawer .rkx-drawer-cta-btn:hover::before {
	left: 0 !important;
	transform: translate3d(100%, 0, 0);
}
/* the drawer "Book a call" had no streak before — give it the same one */
.rkx-drawer .rkx-drawer-cta-btn { position: relative; overflow: hidden; }
.rkx-drawer .rkx-drawer-cta-btn > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
	.rkx-btn--primary::before, .rkx-btn--ghost::before, .rkx-menu-btn::before, .rkx-subpill::before,
	.rkx-feat-cta::before, .rkx-accordion-trigger::after, .rkx-foot-item::before, .rkx-foot-explore::before,
	.rkx-foot-cta::before, .rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-btn::before,
	.rkx-drawer .rkx-drawer-cta-btn::before { transition: none !important; }
}

/* ============================================================
   SUB-BAR VERTICAL CENTRING
   The Email / Phone / Offices pills sit exactly midway between
   the sub-bar's top hairline and the panel's bottom border
   (18px + 1px border on each side). Measured before: 19px above,
   1px below.
   ============================================================ */
.rkx-subbar {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
	margin-bottom: 0 !important;
}

/* ============================================================
   CONTACT PILL ICON ANIMATIONS (hover)
   Email: the envelope pops and its flap flips open.
   Phone: the handset rings (rocks side to side).
   Offices: the pin drops with a bounce and its dot pulses.
   Hover-capable pointers only; off under reduced-motion.
   ============================================================ */
.rkx-subpill__ic svg,
.rkx-subpill__ic svg * { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.rkx-subpill--mail:hover .rkx-subpill__ic svg        { animation: rkxIconPop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
	.rkx-subpill--mail:hover .rkx-subpill__ic svg path   { transform-origin: 50% 0%; animation: rkxMailFlap 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms both; }
	.rkx-subpill--phone:hover .rkx-subpill__ic svg       { transform-origin: 50% 85%; animation: rkxPhoneRing 760ms ease-in-out both; }
	.rkx-subpill--pin:hover .rkx-subpill__ic svg         { animation: rkxPinDrop 720ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
	.rkx-subpill--pin:hover .rkx-subpill__ic svg circle  { animation: rkxPinDot 720ms ease-out 180ms both; }
}
@keyframes rkxIconPop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.22); }
	100% { transform: scale(1); }
}
@keyframes rkxMailFlap {
	0%   { transform: scaleY(1); }
	50%  { transform: scaleY(-1) translateY(1px); }   /* flap lifts open */
	100% { transform: scaleY(1); }
}
@keyframes rkxPhoneRing {
	0%, 100% { transform: rotate(0deg); }
	15%      { transform: rotate(-16deg); }
	30%      { transform: rotate(14deg); }
	45%      { transform: rotate(-11deg); }
	60%      { transform: rotate(8deg); }
	75%      { transform: rotate(-4deg); }
}
@keyframes rkxPinDrop {
	0%   { transform: translateY(0) scaleY(1); }
	30%  { transform: translateY(-4px) scaleY(1.08); }
	60%  { transform: translateY(0) scaleY(0.92); }
	80%  { transform: translateY(-1.5px) scaleY(1.02); }
	100% { transform: translateY(0) scaleY(1); }
}
@keyframes rkxPinDot {
	0%   { transform: scale(1);   opacity: 1; }
	50%  { transform: scale(1.7); opacity: 0.55; }
	100% { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   NEON SCROLLBAR — replaces the floating gradient thumb
   A short track pinned to the vertical centre of the right edge
   (38vh tall, centred at 50%), 1px-radius corners on track and
   thumb, neon-blue thumb with the shared glow, always visible
   while the page can scroll (hides while a panel is open, and on
   touch devices where the JS never builds it). Same JS drives it
   (drag + scroll sync).
   ============================================================ */
.rkx-vbar {
	top: 50% !important;
	bottom: auto !important;
	height: 38vh !important;
	right: 10px !important;
	width: 4px !important;
	transform: translateY(-50%);
	border-radius: 1px;
	background: rgba(68, 83, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(68, 83, 255, 0.22);
	transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rkx-vbar.is-visible,
.rkx-vbar.is-idle { opacity: 1; }                 /* stays put — no idle fade */
.rkx-vbar__thumb {
	left: 0 !important;
	right: 0 !important;
	min-height: 24px !important;
	max-height: 40% !important;
	border-radius: 1px !important;
	background: var(--rkx-neon, #4453FF) !important;
	box-shadow: 0 0 4px rgba(68, 83, 255, 0.9),
	            0 0 12px rgba(31, 57, 194, 0.75),
	            0 0 24px rgba(31, 57, 194, 0.45) !important;
	transition: box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1), filter 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rkx-vbar__thumb:hover,
.rkx-vbar.is-dragging .rkx-vbar__thumb {
	filter: brightness(1.25);
	box-shadow: 0 0 6px rgba(91, 107, 255, 1),
	            0 0 16px rgba(31, 57, 194, 0.9),
	            0 0 32px rgba(31, 57, 194, 0.6) !important;
}

/* ============================================================
   BIG-SCREEN PANEL TYPE (2K → 8K)
   The pills, buttons and logos already climb a ladder on large
   displays, but the text INSIDE the panels stayed at phone sizes
   (11–12px contact pills, 12px widget labels, 9px badge, 22px
   nav-link cap) — tiny next to 58–96px buttons on 4K/8K. One
   multiplier (--rkx-big, 1 below 1920px so nothing changes on
   laptops/phones) scales those to the same steps the buttons use.
   ============================================================ */
:root { --rkx-big: 1; }
@media (min-width: 1920px) and (max-width: 2559px) { :root { --rkx-big: 1.18; } }
@media (min-width: 2560px) and (max-width: 3839px) { :root { --rkx-big: 1.41; } }
@media (min-width: 3840px) and (max-width: 5119px) { :root { --rkx-big: 1.7; } }
@media (min-width: 5120px) and (max-width: 7679px) { :root { --rkx-big: 2.18; } }
@media (min-width: 7680px) { :root { --rkx-big: 2.82; } }

/* mega-menu */
.rkx-menu-panel .rkx-nav-link            { font-size: calc(clamp(13px, 0.6vw + 7.5px, 22px) * var(--rkx-big)) !important; }
.rkx-menu-panel .rkx-accordion-trigger   { font-size: calc(clamp(16px, 1.05vw, 30px) * var(--rkx-big)) !important; min-height: calc(40px * var(--rkx-big)); }
.rkx-subpill                             { font-size: calc(11px * var(--rkx-big)) !important; padding: calc(7px * var(--rkx-big)) calc(16px * var(--rkx-big)) !important; gap: calc(7px * var(--rkx-big)) !important; }
.rkx-subpill__ic                         { width: calc(13px * var(--rkx-big)) !important; height: calc(13px * var(--rkx-big)) !important; }
.rkx-subbar                              { gap: calc(10px * var(--rkx-big)) !important; }
/* featured widget */
.rkx-feat-title                          { font-size: calc(19px * var(--rkx-big)) !important; }
.rkx-feat-label, .rkx-fc-metric-lbl,
.rkx-fc-axis-label, .rkx-fc-metric-num   { font-size: calc(12px * var(--rkx-big)) !important; }
.rkx-badge                               { font-size: calc(9px * var(--rkx-big)) !important; padding: calc(3px * var(--rkx-big)) calc(6px * var(--rkx-big)) !important; }
.rkx-chart-bars                          { height: calc(60px * var(--rkx-big)) !important; }
.rkx-feat-cta                            { font-size: calc(12.5px * var(--rkx-big)) !important; }
.rkx-feat-meta::after                    { width: calc(6px * var(--rkx-big)); height: calc(6px * var(--rkx-big)); }
/* header / footer buttons' icons */
.rkx-btn--signup .rkx-btn__ico           { width: calc(18px * var(--rkx-big)) !important; height: calc(18px * var(--rkx-big)) !important; }
.rkx-foot-social                         { width: calc(34px * var(--rkx-big)) !important; height: calc(34px * var(--rkx-big)) !important; }
.rkx-foot-social svg                     { width: calc(14px * var(--rkx-big)) !important; height: calc(14px * var(--rkx-big)) !important; }
/* footer panel */
.rkx-pane-label, .rkx-foot-copy,
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-eyebrow { font-size: calc(12px * var(--rkx-big)) !important; }
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-title   { font-size: calc(19px * var(--rkx-big)) !important; }
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-desc    { font-size: calc(12.5px * var(--rkx-big)) !important; }
.rkx-foot-panel .rkx-pane.rkx-pane-cta-v2 .rkx-pane-cta-btn     { font-size: calc(12.5px * var(--rkx-big)) !important; padding: calc(10px * var(--rkx-big)) calc(16px * var(--rkx-big)) !important; }
.rkx-foot-copy                           { font-size: calc(9px * var(--rkx-big)) !important; }