/* ============================================================
   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(0, 0, 0, 0.6);
	--rkx-bg:       rgba(0, 0, 0, 0.6);
	--rkx-bg-menu:  rgba(0, 0, 0, 0.6);
	--rkxf-bg:      rgba(0, 0, 0, 0.6);
	--rkxf-bg-menu: rgba(0, 0, 0, 0.6);

	/* Shared brand gradient — loader bar, top progress bar and the
	   vertical scrollbar all use these stops (weighted toward #1D24CA).
	   Angle differs per use (90deg bars, 180deg vertical bar). */
	--rkx-grad-90:  linear-gradient(90deg,  #1D24CA 0%, #1D24CA 48%, #2D35E0 78%, #4D5DFF 100%);
	--rkx-grad-180: linear-gradient(180deg, #1D24CA 0%, #1D24CA 48%, #2D35E0 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(255,255,255,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: blur(14px) saturate(1.25);
	-webkit-backdrop-filter: blur(14px) saturate(1.25);
	background:
		radial-gradient(ellipse 90% 60% at 50% 10%, rgba(3,4,10,0.20) 0%, rgba(5,6,13,0.42) 60%, rgba(5,6,13,0.86) 100%),
		linear-gradient(180deg, rgba(5,6,13,0.28) 0%, rgba(5,6,13,0.58) 35%, rgba(5,6,13,0.80) 70%, #05060d 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(3px);
	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(255,255,255,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(255,255,255,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: #ffffff;
	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(255,255,255,0.04) 0%, rgba(255,255,255,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(29,36,202,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(29,36,202,0.4);
		background: linear-gradient(135deg, rgba(29,36,202,0.08) 0%, rgba(255,255,255,0.03) 100%);
		color: #fff;
	}
	.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(29,36,202,0.22) 0%, rgba(29,36,202,0.05) 100%);
		border-color: rgba(29,36,202,0.45);
		color: #fff;
	}
	.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: #fff; }
.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: #fff; }
.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: #fff; }
/* 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: #fff;
	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: #04050a; }
.rkx-logo-link {
	background-image: url("assets/rankrix-wordmark.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.rkx-logo-svg { visibility: hidden; }
@media (max-width: 767px) {
	.rkx-logo-svg { display: none; }
	.rkx-logo-link { width: 60px; height: 28px; background-image: url("assets/rankrix-mark.png"); }
	.rkx-foot-logo { content: url("assets/rankrix-mark.png"); }
}

/* ===== 3 · BIG-SCREEN SCALING (content zoom; header/footer keep
   their own fluid sizing + JS width math, deliberately unzoomed;
   viewport units are unaffected by zoom, so 100vh stays true) ===== */
@media (min-width: 1536px) { .rkx-main, .rkxl { zoom: 1.02; } }
@media (min-width: 1600px) { .rkx-main, .rkxl { zoom: 1.06; } }
@media (min-width: 1728px) { .rkx-main, .rkxl { zoom: 1.10; } }
@media (min-width: 1920px) { .rkx-main, .rkxl { zoom: 1.20; } }
@media (min-width: 2048px) { .rkx-main, .rkxl { zoom: 1.28; } }
@media (min-width: 2304px) { .rkx-main, .rkxl { zoom: 1.44; } }
@media (min-width: 2560px) { .rkx-main, .rkxl { zoom: 1.60; } }
@media (min-width: 3440px) { .rkx-main, .rkxl { zoom: 2.15; } }
@media (min-width: 3840px) { .rkx-main, .rkxl { zoom: 2.40; } }
@media (min-width: 5120px) { .rkx-main, .rkxl { zoom: 3.20; } }
@media (min-width: 6016px) { .rkx-main, .rkxl { zoom: 3.76; } }
@media (min-width: 7680px) { .rkx-main, .rkxl { zoom: 4.80; } }

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, #1D24CA, #4D5DFF));
	box-shadow: 0 0 10px rgba(29, 36, 202, 0.7), 0 0 22px rgba(45, 53, 224, 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(29, 36, 202, 0.9), 0 0 30px rgba(45, 53, 224, 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; } }

/* Top progress bar — same brand gradient as loader + scrollbar */
.rkx-scroll-bar { background: rgba(0, 0, 0, 0.4) !important; }
.rkx-scroll-bar__fill {
	background: var(--rkx-grad-90, linear-gradient(90deg, #1D24CA, #4D5DFF)) !important;
	box-shadow: 0 0 10px rgba(29, 36, 202, 0.7), 0 0 20px rgba(45, 53, 224, 0.35) !important;
}

/* ============================================================
   19 · BUTTONS — SOLID BRAND INDIGO + GLOW + SHIMMER, NO ARROWS
   Every text button uses #1D24CA, 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: #1D24CA !important;
	border: 1px solid rgba(29, 36, 202, 0.55) !important;
	color: #fff !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: #2D35E0 !important;
	border-color: rgba(29, 36, 202, 0.75) !important;
	box-shadow: 0 0 22px rgba(29, 36, 202, 0.55), 0 8px 30px -10px rgba(29, 36, 202, 0.6) !important;
	color: #fff !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(255, 255, 255, 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;
	}
}

/* ============================================================
   20 · CTA BUTTONS — SLIM, HEADER-MATCHED, EQUAL-WIDTH PAIRS
   Body CTAs adopt the header .rkx-btn proportions exactly
   (34px tall, 13px, padding 0 16px, radius 1px). When two (or
   more) sit in a .rkx-cta-row they share one equal width, sized
   to the wider button, via an inline-grid of equal fr tracks.
   ============================================================ */
.rkx-cta {
	box-sizing: border-box !important;
	height: 34px !important;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	gap: 8px !important;
	border-radius: 1px !important;
	justify-content: center;
}
.rkx-cta--primary { font-weight: 600 !important; }

/* Compact row; rkx-theme-bridge.js equalises paired buttons to one shared
   width (the wider button's), so they stay slim and header-like — never
   stretched across the column. */
.rkx-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
@media (min-width: 1920px) {
	.rkx-cta { height: 38px !important; font-size: 14px !important; padding: 0 20px !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 #1D24CA 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(29, 36, 202, 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(255, 255, 255, 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: #fff;
        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: #fff; }
}


/* ============================================================
   4 · HOME HERO ALIGNED TO THE PILL HEADER
   Starts 25px below the pill and matches its width exactly
   (both read the header's own --rkx-w-def / --rkx-h / --rkx-top
   tokens, so every breakpoint stays in sync automatically).
   --rkx-z mirrors the content zoom so the clearance stays true
   on large screens (header itself is unzoomed).
   ============================================================ */
:root { --rkx-z: 1; }
@media (min-width: 1536px) { :root { --rkx-z: 1.02; } }
@media (min-width: 1600px) { :root { --rkx-z: 1.06; } }
@media (min-width: 1728px) { :root { --rkx-z: 1.10; } }
@media (min-width: 1920px) { :root { --rkx-z: 1.20; } }
@media (min-width: 2048px) { :root { --rkx-z: 1.28; } }
@media (min-width: 2304px) { :root { --rkx-z: 1.44; } }
@media (min-width: 2560px) { :root { --rkx-z: 1.60; } }
@media (min-width: 3440px) { :root { --rkx-z: 2.15; } }
@media (min-width: 3840px) { :root { --rkx-z: 2.40; } }
@media (min-width: 5120px) { :root { --rkx-z: 3.20; } }
@media (min-width: 6016px) { :root { --rkx-z: 3.76; } }
@media (min-width: 7680px) { :root { --rkx-z: 4.80; } }

/* ============================================================
   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(255, 255, 255, 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: #fff;
    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: #FFFFFF; }
.rkx-subpill:hover .rkx-subpill__ic { color: #fff; }
@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; }
}

.rkx-main:has(.rkx-hero--full) {
    padding-top: calc((max(4px, var(--rkx-top, 10px) - 10px) + var(--rkx-h, 50px)) / var(--rkx-z, 1) + 8px) !important;
}
.rkx-section.rkx-hero--full {
    width: var(--rkx-w-def, 100%);
    margin-inline: auto;
    height: calc(100svh - (max(4px, var(--rkx-top, 10px) - 10px) + var(--rkx-h, 50px)) / var(--rkx-z, 1) - 8px) !important;
}
/* Short desktop viewports: release the lock (matches the design's own
   sub-640px-height exception) so content scrolls instead of clipping */
@media (max-height: 640px) and (min-width: 1024px) {
    .rkx-section.rkx-hero--full { height: auto !important; min-height: 0 !important; }
}
/* Stacked mobile/tablet keeps its natural height */
@media (max-width: 1023px) {
    .rkx-section.rkx-hero--full { height: auto !important; }
}
@media (max-width: 1023px) {
    .rkx-section.rkx-hero--full { width: var(--rkx-w-def, 100%); }
}


/* ============================================================
   5 · CONTENT WIDTH = HEADER WIDTH
   Every section container tracks the pill header's width token,
   so content and chrome share the same edges at every breakpoint
   (the header token is 80% on desktop per the theme overrides).
   ============================================================ */
.rkx-main .rkx-container,
.rkx-main .rkx-connect {
    width: var(--rkx-w-def, 100%);
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* ============================================================
   6 · SHARP CORNERS GUARANTEE (brand rule: 1px everywhere)
   Catch-all for anything injected at runtime with a rounded
   style. Circles (dots, rings, orbs, avatars, knobs) keep
   border-radius: 50% via their own rules re-asserted below.
   ============================================================ */

/* ============================================================
   7 · HERO CONTENT FLUSH TO THE PILL EDGES
   The hero box already equals the header width; the lead/widget
   columns carried their own desktop gutters, making the visible
   content read narrower than the pill. Zero the inline gutters
   so text and widget edges sit exactly on the header's edges
   (mobile was already flush).
   ============================================================ */
/* Tighten the gap between the header and the hero content at EVERY screen
   size — the hero section's own top padding (largest on stacked mobile /
   tablet) sat on top of the 8px main gap. */
.rkx-section.rkx-hero--full { padding-top: 6px !important; }
.rkx-hero--full .rkx-hero__lead { padding-inline: 0 !important; }
.rkx-hero--full .rkx-hero__widget { padding-inline: 0 !important; }

/* ============================================================
   8 · HERO CONTENT FULL-WIDTH + JUSTIFIED
   The lede paragraph was capped at 760px; release it to fill the
   lead column and justify its text. The eyebrow strip's items
   spread across the full width.
   ============================================================ */
.rkx-hero--full .rkx-lede {
    max-width: none !important;
    text-align: justify;
    text-wrap: pretty;
}
.rkx-hero--full .rkx-eyebrow-row { justify-content: space-between; }

/* ============================================================
   9 · HERO WIDTH CAPS RELEASED AT EVERY SCREEN SIZE
   .rkx-hero__lead carried max-width:1000px — invisible on narrow
   panes, but on wide monitors it left content ~130px short of
   the pill's right edge. The hero chain is now fully %-driven,
   so content = header width at every viewport.
   ============================================================ */
.rkx-hero--full .rkx-hero__grid { width: 100% !important; max-width: none !important; }
.rkx-hero--full .rkx-hero__lead { max-width: none !important; margin-inline: 0 !important; }
.rkx-hero--full .rkx-hero__widget { max-width: none !important; margin-inline: 0 !important; }

/* ============================================================
   10 · BIG-SCREEN PIXEL-PERFECT ALIGNMENT TO THE PILL
   On zoomed screens (>=1536px) auto-centering happens in layout
   units and renders multiplied by zoom - fractional rounding can
   drift content a few px left of the header pill. The bridge JS
   measures the pill's real rendered rect and publishes it as
   --rkx-pill-cw / --rkx-pill-ml (already divided by the zoom
   factor), so content aligns to the pill exactly. Falls back to
   the proven percentage centering until JS runs.
   ============================================================ */
@media (min-width: 1536px) {
    .rkx-main .rkx-container,
    .rkx-main .rkx-connect,
    .rkx-section.rkx-hero--full {
        width: var(--rkx-pill-cw, var(--rkx-w-def, 75%)) !important;
        margin-left: var(--rkx-pill-ml, auto) !important;
        margin-right: var(--rkx-pill-mr, auto) !important;
    }
}

/* ============================================================
   11 · BRAND BLUE
   All site blues unified on the header Sign-Up blue (#1D24CA
   family; light partner #818cf8 from the header's own palette).
   ============================================================ */


/* ============================================================
   23 · HEADINGS FONT — "Ragick" display face (site-wide)
   New heading typeface applied to every heading; body/labels stay
   on Inter/Poppins. Ragick is inherently bold/rounded so weight is
   pinned to 400 to avoid synthetic bolding.
   ============================================================ */
@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-h1, .rkx-h2, .rkx-h3,
.rkx-main :is(h1, h2, h3),
.rkx-svc__title, .rkx-step__title, .rkx-case__title,
.rkx-quote, .rkx-prose h2, .rkx-prose h3,
.rkx-feat-title, .rkx-svc3__title, .rkx-prin__feat-title,
.rkx-article-head .rkx-h1, .rkx-hero__title,
.rkx-foot-panel :is(h2, h3) {
	font-family: var(--rkx-font-display) !important;
	font-weight: 400 !important;
	letter-spacing: 0.004em;
}

/* ============================================================
   24 · HERO H1 — THREE TYPEWRITER LINES + OUTLINED LEAD WORD
   (comment 49804788af-h1). Each line on its own row, extra line
   spacing, the first word outlined in brand indigo, responsive
   size mobile → 8K, typewriter caret. Sizes are tuned so all 3
   lines + lede + CTAs fit the viewport-height hero.
   ============================================================ */
.rkx-h1--typed {
	font-family: var(--rkx-font-display) !important;
	font-weight: 400 !important;
	line-height: 1.24 !important;
	letter-spacing: 0.004em !important;
	text-wrap: balance;
	margin: 0;
}
.rkx-h1--typed .rkx-h1__line {
	display: block;
	min-height: 1.2em;           /* reserve each line's height — no layout shift while typing */
	margin-bottom: 0.42em;       /* increased spacing between the three lines */
}
.rkx-h1--typed .rkx-h1__line:last-child { margin-bottom: 0; }
.rkx-h1--typed .rkx-h1__lead {
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0.02em #4d5dff;
	text-stroke: 0.02em #4d5dff;
	paint-order: stroke fill;
	text-shadow: 0 0 26px rgba(29, 36, 202, 0.30);
}
.rkx-h1__caret {
	display: inline-block;
	width: 0.5ch;
	max-width: 8px;
	height: 0.86em;
	transform: translateY(0.1em);
	margin-left: 0.06em;
	background: #4d5dff;
	border-radius: 1px;
	box-shadow: 0 0 10px rgba(29, 36, 202, 0.75);
	animation: rkxH1Caret 0.9s steps(1) infinite;
}
@keyframes rkxH1Caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Responsive size ladder — fits 3 lines from smallest mobile to 8K.
   Base uses min(vw, vh) so it also shrinks on short screens; the big-screen
   content-zoom (§ earlier) scales it further up on large displays. */
.rkx-hero--full .rkx-h1.rkx-h1--typed { font-size: clamp(21px, min(3.05vw, 4.3vh), 40px) !important; }
@media (max-width: 1023px) {
	.rkx-hero--full .rkx-h1.rkx-h1--typed { font-size: clamp(23px, 6.2vw, 40px) !important; }
	.rkx-h1--typed .rkx-h1__line { margin-bottom: 0.36em; }
}
@media (max-height: 780px) and (min-width: 1024px) {
	.rkx-hero--full .rkx-h1.rkx-h1--typed { font-size: clamp(19px, min(2.7vw, 4vh), 34px) !important; }
	.rkx-h1--typed .rkx-h1__line { margin-bottom: 0.32em; }
}
@media (prefers-reduced-motion: reduce) {
	.rkx-h1__caret { display: none !important; }
}

/* ============================================================
   25 · OUTLINED WORDS — "Black Fatal Italic" script face, enlarged
   The outlined accent words (hero lead words + every heading accent
   word site-wide) use the script face and render LARGER than the
   rest of the sentence. Em-based so it stays proportional/responsive.
   ============================================================ */
@font-face {
	font-family: 'Black Fatal';
	src: url('assets/fonts/black-fatal-italic.otf') format('opentype');
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}
.rkx-h1--typed .rkx-h1__lead,
.rkx-h1__accent,
.rkx-h2__accent {
	font-family: 'Black Fatal', 'Ragick', cursive !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: 1.34em;                 /* bigger than the rest of the sentence */
	line-height: 0.95;
	display: inline-block;
	vertical-align: -0.05em;
	letter-spacing: 0.005em;
	-webkit-text-stroke: 0.018em #4d5dff;
	text-stroke: 0.018em #4d5dff;
}
/* Give the three typed lines a little more height now the lead word is a
   taller, larger script glyph (prevents descender collisions). */
.rkx-h1--typed .rkx-h1__line { min-height: 1.44em; margin-bottom: 0.5em; }
.rkx-h1--typed .rkx-h1__line:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
	.rkx-h1--typed .rkx-h1__line { margin-bottom: 0.42em; }
}
@media (max-height: 780px) and (min-width: 1024px) {
	.rkx-h1--typed .rkx-h1__line { min-height: 1.36em; margin-bottom: 0.36em; }
}