/* ==========================================================================
   Divi Scroll Toolkit — VD concept modules (shared stylesheet)

   Six modules, one file:
     .vd-kin    VD Kinetic Headline   — words light up as you scroll (pinned)
     .vd-chat   VD Chat Story         — chat conversation plays on scroll (pinned)
     .vd-stats  VD Stat Wall          — numbers scrub with the scrollbar
     .vd-spine  VD Process Spine      — journey line draws itself, steps light up
     .vd-orbit  VD Orbit Hub          — nodes orbit a hub; hover expands
     .vd-xp     VD Expanding Panels   — accordion gallery

   Rules shared with the rest of the toolkit:
   - No-JS / Visual Builder safety: everything is readable BEFORE the engine
     runs. Hiding/dimming is gated on the .vd-js class the engine adds.
   - Surface defaults sit at :where() zero specificity so the Divi Design tab
     always wins; per-child overrides ride Divi's own wrapper classes.
   - Motion is transform/opacity only; reduced-motion visitors get static
     layouts (the engine never starts).
   ========================================================================== */


/* ==========================================================================
   VD KINETIC HEADLINE
   ========================================================================== */
.vd-kin {
	--vdk-dim: rgba(255, 255, 255, .13);
	--vdk-lit: #ffffff;
	--vdk-accent: #2eb67d;
	position: relative;
}
.vd-kin-sticky {
	position: sticky;
	top: var(--vdk-offset, 0px);
	height: calc(100vh - var(--vdk-offset, 0px));
	height: calc(100svh - var(--vdk-offset, 0px));
	display: grid;
	/* pack the headline + CTA as ONE centered cluster — place-items would
	   stretch each child's row across the viewport and strand the CTA far
	   below the headline */
	align-content: center;
	justify-items: center;
	overflow: hidden;
}

/* ---------- scrolling gradient (Content → Scrolling Gradient) ----------
   SHARED by Kinetic Headline and Chat Story (section layout). One soft radial
   blob per chosen color, parked in a corner each. The pin scrub drifts every
   blob along its own slow path (transform-only, so it is pure compositor
   work). Enter/static/no-JS render the same arrangement, just parked.
   Intensity drives the layer opacity. */
.vd-grad {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	opacity: calc(var(--vdg-int, 35) / 100);
	pointer-events: none;
	/* fade the wash out toward the section's top/bottom edges so it blends
	   into the neighbouring sections instead of cutting off in a hard line */
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.vd-grad-blob {
	position: absolute;
	width: 70vmax;
	height: 70vmax;
	border-radius: 50%;
	background: radial-gradient(circle, var(--b, #2eb67d) 0%, transparent 58%);
	will-change: transform;
}
.vd-grad-blob:nth-of-type(1) { top: -34%; left: -20%; }
.vd-grad-blob:nth-of-type(2) { top: -26%; right: -24%; }
.vd-grad-blob:nth-of-type(3) { bottom: -36%; left: -12%; }
.vd-grad-blob:nth-of-type(4) { bottom: -28%; right: -16%; }
/* content paints above the wash (the hints/rail are already positioned) */
.vd-kin-line, .vd-kin-cta-wrap, .vd-chat-copy { position: relative; }
.vd-kin-line, .vd-kin-cta-wrap, .vd-kin-hint,
.vd-chat-copy, .vd-chat-wrap,
.vd-spine-rail, .vd-spine-step { z-index: 1; }

/* tall flow sections (spine): spread the middle blobs down the height so a
   long timeline gets coverage beyond its corners */
.vd-spine .vd-grad-blob:nth-of-type(2) { top: 30%; }
.vd-spine .vd-grad-blob:nth-of-type(3) { top: auto; bottom: 30%; }

.vd-kin-line {
	max-width: 16ch;
	text-align: center;
	font-size: clamp(34px, 6vw, 84px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0;
	padding: 0 20px;
}
/* readable before JS: full lit color, accents in accent color */
.vd-kin-w { color: var(--vdk-lit); }
.vd-kin .vd-kin-w.vd-kin-accent { color: var(--vdk-accent); }

/* pinned scrub — each word carries --w (0..1). Where color-mix is available
   the color blends continuously dim→lit; otherwise words step via .lit. */
.vd-kin.vd-js .vd-kin-w { color: var(--vdk-dim); transition: color .35s ease; }
.vd-kin.vd-js .vd-kin-w.lit { color: var(--vdk-lit); }
.vd-kin.vd-js .vd-kin-w.vd-kin-accent.lit { color: var(--vdk-accent); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.vd-kin.vd-js .vd-kin-w {
		transition: none;
		color: color-mix(in srgb, var(--vdk-lit) calc(var(--w, 0) * 100%), var(--vdk-dim));
	}
	.vd-kin.vd-js .vd-kin-w.vd-kin-accent {
		color: color-mix(in srgb, var(--vdk-accent) calc(var(--w, 0) * 100%), var(--vdk-dim));
	}
}

/* on-enter mode — words transition once, staggered via inline delays */
.vd-kin.vd-enter .vd-kin-w { color: var(--vdk-dim); transition: color .55s ease, text-shadow .55s ease; }
.vd-kin.vd-enter .vd-kin-w.lit { color: var(--vdk-lit); }
.vd-kin.vd-enter .vd-kin-w.vd-kin-accent.lit { color: var(--vdk-accent); }

.vd-kin-glow .vd-kin-w.vd-kin-accent.lit { text-shadow: 0 0 34px color-mix(in srgb, var(--vdk-accent) 45%, transparent); }
/* optional CTA — reserved in layout, revealed when the headline completes */
.vd-kin-cta-wrap {
	margin-top: 34px;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity .55s ease, transform .55s cubic-bezier(.22,.75,.25,1);
}
.vd-kin.vd-done .vd-kin-cta-wrap,
.vd-kin.vd-static .vd-kin-cta-wrap {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
:where(.vd-kin) .vd-kin-cta {
	display: inline-block;
	padding: 14px 34px;
	border-radius: 10px;
	background: var(--vdk-accent);
	color: #ffffff;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .01em;
	text-decoration: none;
	box-shadow: 0 12px 34px -12px color-mix(in srgb, var(--vdk-accent) 70%, transparent);
	transition: transform .2s ease, box-shadow .2s ease;
}
.vd-kin-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--vdk-accent) 80%, transparent); }
.vd-kin-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vdk-accent) 60%, transparent); }

.vd-kin-hint {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .4s ease;
}
.vd-kin.vd-js .vd-kin-hint { opacity: .35; }
.vd-kin.vd-js.vd-done .vd-kin-hint { opacity: 0; }
/* enter mode + static fallback: normal flow, no pin, no tall track */
.vd-kin.vd-static .vd-kin-outer,
.vd-kin.vd-enter .vd-kin-outer { height: auto !important; }
.vd-kin.vd-static .vd-kin-sticky,
.vd-kin.vd-enter .vd-kin-sticky { position: static; height: auto; padding: 90px 0; }
.vd-kin.vd-static .vd-kin-w { color: var(--vdk-lit) !important; text-shadow: none; }
.vd-kin.vd-static .vd-kin-w.vd-kin-accent { color: var(--vdk-accent) !important; }
/* belt & suspenders: reduced motion restores full color even if a class slips through */
@media (prefers-reduced-motion: reduce) {
	.vd-kin .vd-kin-w { color: var(--vdk-lit) !important; transition: none !important; }
	.vd-kin .vd-kin-w.vd-kin-accent { color: var(--vdk-accent) !important; }
}


/* ==========================================================================
   VD HIGHLIGHT LIST — one line at a time emphasized; rest at inactive opacity
   ========================================================================== */
.vd-hl {
	--vdh-base: #0A1A2E;
	--vdh-active: #4A9961;
	--vdh-inactive: 0.3;
	color: var(--vdh-base);
	position: relative;
}
.vd-hl-items { margin: 0 auto; max-width: 1080px; text-align: center; }
.vd-hl-item { margin: 0 0 .35em; font-weight: 700; }
.vd-hl-ico { margin-right: .45em; font-size: .8em; vertical-align: baseline; color: var(--vdh-active); }

/* pinned mode: viewport sticks; the engine sets the tall track height */
.vd-hl.vd-js .vd-hl-viewport {
	position: sticky;
	top: var(--vdh-offset, 0px);
	height: calc(100vh - var(--vdh-offset, 0px));
	height: calc(100svh - var(--vdh-offset, 0px));
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 0 5vw;
	box-sizing: border-box;
}
.vd-hl.vd-js .vd-hl-item {
	opacity: var(--vdh-inactive);
	transition: opacity .45s ease, color .45s ease;
	will-change: opacity;
}
.vd-hl.vd-js .vd-hl-item.is-active { opacity: 1; color: var(--vdh-active); }

/* on-enter mode: lines rise in once as they become visible */
.vd-hl.vd-enter .vd-hl-viewport { padding: 40px 5vw; }
.vd-hl.vd-enter .vd-hl-item {
	opacity: var(--vdh-inactive);
	transform: translateY(14px);
	transition: opacity .55s ease, transform .55s ease, color .55s ease;
}
.vd-hl.vd-enter .vd-hl-item.is-active { opacity: 1; transform: none; color: var(--vdh-active); }

/* belt & suspenders */
@media (prefers-reduced-motion: reduce) {
	.vd-hl .vd-hl-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ==========================================================================
   VD CHAT STORY
   ========================================================================== */
.vd-chat {
	--vdc-header: #0d9159;
	--vdc-user-bg: #2f6ae0;
	--vdc-user-text: #ffffff;
	--vdc-ai-bg: #eef0f3;
	--vdc-ai-text: #202a35;
	--vdc-win-bg: #ffffff;
	--vdc-accent: #7df0b8;
	position: relative;
}
.vd-chat-sticky {
	position: sticky;
	top: var(--vdc-offset, 0px);
	height: calc(100vh - var(--vdc-offset, 0px));
	height: calc(100svh - var(--vdc-offset, 0px));
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 44px;
	overflow: hidden;
	/* content sits in the middle ~80% of the viewport — full-width rows on
	   large monitors otherwise strand the copy at the far left edge */
	padding-left: 10vw;
	padding-right: 10vw;
}
.vd-chat.vd-copy-right .vd-chat-copy { order: 2; }
.vd-chat.vd-copy-right .vd-chat-wrap { order: 1; }
.vd-chat-copy h3 { font-size: clamp(26px, 3vw, 40px); margin: 0 0 14px; letter-spacing: -.02em; }
.vd-chat-copytext { opacity: .75; line-height: 1.65; max-width: 30em; }
.vd-chat-copylink {
	display: inline-block;
	margin-top: 1.3rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 3px;
	color: var(--vdc-link, inherit);
}

.vd-chat-wrap { width: min(400px, 92%); justify-self: center; position: relative; }
/* widget layout: just the chat box, filling whatever column it sits in */
.vd-chat.vd-widget { position: static; }
.vd-chat.vd-widget .vd-chat-wrap { width: 100%; max-width: none; }
:where(.vd-chat) .vd-chat-widget {
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(13,27,42,.10), 0 40px 90px -30px rgba(13,27,42,.4);
}
.vd-chat-widget { width: 100%; background: var(--vdc-win-bg); overflow: hidden; }

.vd-chat-ava {
	width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
	border: 2px solid rgba(255,255,255,.85);
	background-color: #0fa382;
	background-image: var(--vdc-ava, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='32' fill='%230fa382'/><circle cx='32' cy='24' r='11' fill='%23ffffff' opacity='.92'/><path d='M9 58c3.5-13 13-19 23-19s19.5 6 23 19' fill='%23ffffff' opacity='.92'/></svg>"));
	background-size: cover;
	background-position: center;
}
.vd-chat-head {
	position: relative;
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px 15px;
	background: var(--vdc-header); color: #fff;
}
.vd-chat-head b { font-size: 15.5px; display: block; letter-spacing: -.01em; }
.vd-chat-head small { font-size: 12px; opacity: .95; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.vd-chat-head small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vdc-accent); }
.vd-chat-x { margin-left: auto; font-size: 20px; line-height: 1; opacity: .9; }
.vd-chat-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255,255,255,.65); transition: width .3s ease; }

.vd-chat-body { height: var(--vdc-win-h, 400px); position: relative; background: var(--vdc-win-bg); overflow: hidden; }
.vd-chat:not(.vd-js) .vd-chat-body { overflow-y: auto; }  /* VB / no-JS: browse the whole script */
.vd-chat-list { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.vd-chat:not(.vd-js) .vd-chat-list { position: static; }
.vd-chat-list > * { display: contents; } /* flatten Divi's child wrappers into the flex column */
.vd-chat-list > * > .et_pb_module_inner { display: contents; }

.vd-chat-row { display: block; }
.vd-chat.vd-js .vd-chat-row { display: none; }
@keyframes vdChatIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.vd-chat.vd-js .vd-chat-row.show { display: block; animation: vdChatIn .35s cubic-bezier(.2,.8,.25,1.1) both; }
.vd-chat-name { font-size: 12px; color: #8a94a0; margin: 0 0 5px 48px; }
.vd-chat-row.vd-from-user .vd-chat-name { text-align: right; margin: 0 4px 5px 0; }
.vd-chat-msgline { display: flex; align-items: flex-end; gap: 8px; }
.vd-chat-msgline .vd-chat-ava { width: 34px; height: 34px; border: 0; }
.vd-chat-bubble {
	max-width: 76%;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	background: var(--vdc-ai-bg);
	color: var(--vdc-ai-text);
}
.vd-chat-row.vd-from-user .vd-chat-msgline { justify-content: flex-end; }
.vd-chat-row.vd-from-user .vd-chat-bubble { background: var(--vdc-user-bg); color: var(--vdc-user-text); border-radius: 14px; }
.vd-chat-row.vd-is-card .vd-chat-bubble {
	background: color-mix(in srgb, var(--vdc-header) 10%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--vdc-header) 40%, transparent);
	color: color-mix(in srgb, var(--vdc-header) 78%, #000000);
	font-weight: 600;
	display: flex; align-items: center; gap: 10px;
}
.vd-chat-row.vd-is-card .vd-chat-bubble::before {
	content: '✓';
	display: grid; place-items: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--vdc-header); color: #fff; font-size: 12px; flex: 0 0 auto;
}

.vd-chat-typing { display: none; }
.vd-chat-typing.show { display: block; animation: vdChatIn .3s ease both; }
.vd-chat-typing .vd-chat-bubble { display: inline-flex; gap: 4px; padding: 13px 16px; }
.vd-chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5b1; animation: vdTping 1s infinite; }
.vd-chat-typing i:nth-child(2) { animation-delay: .15s; }
.vd-chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vdTping { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.vd-chat-inputbar { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(13,27,42,.12); background: var(--vdc-win-bg); }
.vd-chat-field {
	flex: 1; min-width: 0;
	border: 1.5px solid #d7dde4; border-radius: 10px;
	padding: 11px 14px; font-size: 14px; color: var(--vdc-ai-text);
	white-space: nowrap; overflow: hidden;
}
.vd-chat-field.empty { color: #98a2ae; }
.vd-chat-field .caret { display: inline-block; width: 1px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: vdCaret 1s steps(1) infinite; }
@keyframes vdCaret { 50% { opacity: 0; } }
.vd-chat-send { border: 0; border-radius: 10px; background: var(--vdc-user-bg); color: var(--vdc-user-text); font-size: 14px; font-weight: 600; padding: 0 20px; }

.vd-chat-hint {
	position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%);
	display: none; align-items: center; gap: 8px; white-space: nowrap;
	font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: #5b6673;
	background: #fff; border: 1px solid rgba(13,27,42,.12); border-radius: 999px; padding: 8px 16px;
	box-shadow: 0 8px 24px -10px rgba(13,27,42,.25);
	transition: opacity .5s ease, transform .5s ease;
}
.vd-chat.vd-js .vd-chat-hint { display: flex; }
.vd-chat-hint::after { content: '↓'; font-size: 14px; animation: vdHintBob 1.4s ease-in-out infinite; }
@keyframes vdHintBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.vd-chat.vd-done .vd-chat-hint { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }

/* stacked fallback */
.vd-chat.vd-static .vd-chat-outer { height: auto !important; }
.vd-chat.vd-static .vd-chat-sticky { position: static; height: auto; grid-template-columns: 1fr; gap: 22px; padding: 40px 10vw; }
.vd-chat.vd-static .vd-chat-row { display: block !important; animation: none !important; }
.vd-chat.vd-static .vd-chat-hint { display: none !important; }

/* auto-play mode: unpinned two-column layout; the timer reveals the rows */
.vd-chat.vd-enter .vd-chat-outer { height: auto !important; }
.vd-chat.vd-enter .vd-chat-sticky { position: static; height: auto; overflow: visible; padding: 40px 10vw; }
.vd-chat.vd-enter .vd-chat-hint { display: none !important; }
@media (max-width: 900px) {
	.vd-chat.vd-enter .vd-chat-sticky { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	/* one column, and the desktop's 10vw side inset would crush the widget on
	   a phone — pull it back to a small gutter so the chat fills the width */
	.vd-chat .vd-chat-sticky,
	.vd-chat.vd-static .vd-chat-sticky,
	.vd-chat.vd-enter .vd-chat-sticky {
		grid-template-columns: 1fr;
		gap: 18px;
		align-items: start;
		padding: 30px clamp(16px, 4vw, 28px);
	}
	.vd-chat .vd-chat-wrap { width: 100%; max-width: 460px; }
	.vd-chat .vd-chat-body { height: min(var(--vdc-win-h, 400px), 46vh); }
}


/* ==========================================================================
   VD STAT WALL
   ========================================================================== */
.vd-stats {
	--vds-accent: #2eb67d;
	--vds-track: rgba(127, 127, 127, .18);
}
.vd-stats-grid {
	display: grid;
	grid-template-columns: repeat(var(--vds-cols, 4), 1fr);
	gap: 18px;
}
.vd-stats-grid > * { min-width: 0; display: flex; margin: 0 !important; } /* Divi wrapper margins skew grid-stretch heights */
.vd-stats-grid > * > .et_pb_module_inner { display: flex; width: 100%; min-width: 0; }
.vd-stat {
	width: 100%;
	display: flex;
	flex-direction: column;
}
:where(.vd-stats) .vd-stat {
	border: 1px solid rgba(127, 127, 127, .22);
	border-radius: 18px;
	padding: 30px 26px;
	background: linear-gradient(180deg, rgba(127,127,127,.08), rgba(127,127,127,.02));
}
.vd-stat-num {
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 800;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
}
.vd-stat-num em { font-style: normal; color: var(--vds-accent); }
.vd-stat-lbl { margin: 8px 0 18px; font-size: 14px; opacity: .65; line-height: 1.45; }
.vd-stat-bar { height: 6px; border-radius: 3px; background: var(--vds-track); margin-top: auto; overflow: hidden; }
.vd-stat-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--vds-accent) 55%, #2f6bff), var(--vds-accent)); }

.vd-stat-gauge { align-items: center; justify-content: center; position: relative; text-align: center; }
.vd-stat-gauge svg { transform: rotate(-90deg); display: block; margin: 0 auto; }
.vd-gauge-bg { fill: none; stroke: var(--vds-track); stroke-width: 10; }
.vd-gauge-fg { fill: none; stroke: var(--vds-accent); stroke-width: 10; stroke-linecap: round; }
.vd-stat-gval {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	max-width: 92px;              /* keeps the label inside the ring */
}
.vd-stat-gval b { font-size: 30px; letter-spacing: -.02em; }
.vd-stat-gval b em { font-style: normal; color: var(--vds-accent); }
.vd-stat-gval small { display: block; font-size: 11px; line-height: 1.35; opacity: .6; margin-top: 2px; }

@media (max-width: 980px) { .vd-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vd-stats-grid { grid-template-columns: 1fr; } }


/* ==========================================================================
   VD PROCESS SPINE
   ========================================================================== */
.vd-spine {
	--vdp-rail: rgba(13, 27, 42, .12);
	--vdp-start: #2f6bff;
	--vdp-end: #2eb67d;
	--vdp-node: #2eb67d;
	--vdp-media: 104px;
	position: relative;
	padding: 10px 0 30px;
}
.vd-spine-rail {
	position: absolute;
	left: 50%; top: 0; bottom: 0;
	width: 2px;
	background: var(--vdp-rail);
	transform: translateX(-50%);
}
.vd-spine-fill {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--vdp-start), var(--vdp-end));
	transform-origin: top;
	transform: scaleY(1);          /* full line before JS; the engine drives it */
}
.vd-js .vd-spine-fill { transform: scaleY(0); }
/* on-enter mode: the line eases down to each newly lit node */
.vd-spine.vd-enter .vd-spine-fill { transition: transform .7s cubic-bezier(.25,.8,.25,1); }

.vd-spine-steps > * { margin: 0 !important; } /* Divi wrapper margins — the step's own padding sets the rhythm */
.vd-spine-step {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	padding: 44px 0;
}
.vd-spine-node {
	position: absolute;
	left: 50%; top: 56px;
	transform: translate(-50%, 0);
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--vdp-rail);
	transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
	z-index: 2;
}
.vd-spine-step.on .vd-spine-node {
	background: var(--vdp-node);
	border-color: var(--vdp-node);
	box-shadow: 0 0 0 7px color-mix(in srgb, var(--vdp-node) 16%, transparent);
}
:where(.vd-spine) .vd-spine-card {
	border: 1px solid rgba(13, 27, 42, .12);
	border-radius: 16px;
	padding: 26px 28px;
	background: #fff;
	box-shadow: 0 16px 44px -20px rgba(13,27,42,.18);
}
.vd-spine-card {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 560px;
}
.vd-js .vd-spine-card { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.75,.25,1); }
.vd-js .vd-spine-step.on .vd-spine-card { opacity: 1; transform: none; }

/* alternation — step 1 card on the RIGHT (reference layout), then swap.
   The direct children here are Divi's child-module wrappers. */
.vd-spine-steps > *:nth-child(odd)  .vd-spine-step .vd-spine-card { grid-column: 2; justify-self: start; }
.vd-spine-steps > *:nth-child(even) .vd-spine-step .vd-spine-card { grid-column: 1; justify-self: end; text-align: right; flex-direction: row-reverse; }

/* optional round image on the INSIDE edge (facing the line) */
.vd-spine-media {
	flex: 0 0 auto;
	width: var(--vdp-media);
	height: var(--vdp-media);
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: 0 8px 22px -8px rgba(13,27,42,.3);
}
.vd-spine-body { min-width: 0; }
.vd-spine-k { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--vdp-start); text-transform: uppercase; }
/* mobile: the kicker becomes a sticky chip that holds at the top while its
   card scrolls — you always know where you are in the timeline */
@media (max-width: 900px) {
	.vd-spine-k {
		position: sticky;
		top: calc(10px + env(safe-area-inset-top));
		z-index: 2;
		display: inline-block;
		padding: 6px 12px;
		border-radius: 999px;
		background: rgba(255, 255, 255, .92);
		border: 1px solid rgba(127, 127, 127, .28);
		box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
	}
}
.vd-spine-card h4 { margin: 8px 0 8px; font-size: 21px; letter-spacing: -.01em; }
.vd-spine-p { margin: 0; font-size: 14.5px; line-height: 1.6; opacity: .72; }
.vd-spine-p :last-child { margin-bottom: 0; }
.vd-spine-link {
	display: inline-block;
	margin-top: .9rem;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 2px solid var(--vdp-end);
	padding-bottom: 2px;
	color: inherit;
}

@media (max-width: 900px) {
	/* nothing inside the timeline may push the page sideways */
	.vd-spine { overflow-x: clip; }
	.vd-spine-rail { left: 12px; }
	/* right gutter so the card isn't flush against the screen edge (read as
	   "overflowing right"); left keeps room for the rail + node */
	.vd-spine-step { grid-template-columns: 1fr; padding: 26px clamp(16px, 5vw, 24px) 26px 44px; }
	.vd-spine-node { left: 12px; }
	.vd-spine-steps > * .vd-spine-step .vd-spine-card {
		grid-column: 1 !important;
		justify-self: stretch !important;
		text-align: left !important;
		flex-direction: row !important;
		max-width: 100%;
	}
	/* the card is a flex ROW here (image | text): without min-width:0 the
	   text block's intrinsic width forces the card past the right edge */
	.vd-spine-card > * { min-width: 0; }
	.vd-spine-media { width: 72px; height: 72px; }
}


/* ==========================================================================
   VD ORBIT HUB
   ========================================================================== */
.vd-orbit { --vdo-accent: #2eb67d; }
.vd-orbit-stage {
	position: relative;
	width: 100%;
	max-width: var(--vdo-stage, 620px);
	margin: 0 auto;
}
.vd-js .vd-orbit-stage { aspect-ratio: 1; }
.vd-orbit-ring { display: none; }
.vd-js .vd-orbit-ring {
	display: block;
	position: absolute;
	inset: 9%;
	border: 1.5px dashed rgba(127, 127, 127, .35);
	border-radius: 50%;
}
:where(.vd-orbit) .vd-orbit-hub {
	background: radial-gradient(circle at 32% 28%, #2a4a74, #12233a 70%);
	border: 1px solid rgba(255,255,255,.16);
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
	color: #fff;
}
.vd-orbit-hub {
	width: 172px; height: 172px;
	border-radius: 50%;
	display: grid; place-items: center;
	text-align: center;
	margin: 0 auto 26px;
	position: relative;
	z-index: 2;
}
.vd-js .vd-orbit-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0; }
.vd-orbit-hub b { font-size: 17px; letter-spacing: -.01em; }
.vd-orbit-hub span { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--vdo-accent); margin-top: 4px; }

/* static fallback: chips in a centered wrap; engine positions them on the ring */
.vd-orbit-nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vd-orbit-nodes > * { margin: 0 !important; } /* Divi wrapper margins */
.vd-js .vd-orbit-nodes { display: block; }
.vd-js .vd-orbit-nodes > * { position: absolute; left: 50%; top: 50%; z-index: 3; }

:where(.vd-orbit) .vd-orbit-chip {
	background: #12233a;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 14px;
	box-shadow: 0 14px 34px -12px rgba(0,0,0,.55);
	color: #fff;
}
.vd-orbit-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 16px;
	min-width: 108px;
	max-width: 190px;
	text-align: center;
	text-decoration: none;
	transition: transform .3s cubic-bezier(.2,.8,.25,1.1), border-color .3s ease, background .3s ease;
}
.vd-js .vd-orbit-nodes > * .vd-orbit-chip { transform: translate(-50%, -50%); }
.vd-orbit-ico { font-size: 19px; line-height: 1; margin-bottom: 6px; color: var(--vdo-accent); }
.vd-orbit-chip b { font-size: 13.5px; white-space: nowrap; }
.vd-orbit-chip small { font-size: 11.5px; line-height: 1.45; opacity: .75; margin-top: 5px; }
.vd-js .vd-orbit-chip small { opacity: 0; max-height: 0; overflow: hidden; margin-top: 0; transition: opacity .3s ease, max-height .3s ease, margin .3s ease; }
.vd-js .vd-orbit-nodes > *:hover .vd-orbit-chip,
.vd-js .vd-orbit-nodes > *:focus-visible .vd-orbit-chip,
.vd-js .vd-orbit-nodes > *.open .vd-orbit-chip {
	transform: translate(-50%, -50%) scale(1.12);
	border-color: var(--vdo-accent);
}
.vd-js .vd-orbit-nodes > *:hover .vd-orbit-chip small,
.vd-js .vd-orbit-nodes > *:focus-visible .vd-orbit-chip small,
.vd-js .vd-orbit-nodes > *.open .vd-orbit-chip small { opacity: .85; max-height: 64px; margin-top: 6px; }
.vd-orbit-nodes > * { outline: none; }
.vd-orbit-nodes > *:focus-visible .vd-orbit-chip { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vdo-accent) 55%, transparent); }
.vd-orbit-dot { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: rgba(127,127,127,.4); }


/* ==========================================================================
   VD EXPANDING PANELS
   ========================================================================== */
.vd-xp {
	--vdx-h: 480px;
	--vdx-gap: 12px;
	--vdx-ratio: 3.4;
	--vdx-radius: 18px;
}
.vd-xp-track { display: flex; gap: var(--vdx-gap); height: var(--vdx-h); }
.vd-xp-track > * {
	flex: 1;
	min-width: 0;
	display: flex;
	/* Divi adds margin-bottom to .et_pb_module wrappers (with a :last-child
	   reset) — flex-stretch subtracts margins, so without this the LAST panel
	   renders taller than its siblings. */
	margin: 0 !important;
	transition: flex .6s cubic-bezier(.3,.75,.25,1);
}
/* Some Divi versions insert .et_pb_module_inner inside each child wrapper.
   The panel's content is fully absolute, so this layer must be forced to
   fill — otherwise it shrink-wraps to zero width and the panel vanishes. */
.vd-xp-track > * > .et_pb_module_inner { display: flex; flex: 1; min-width: 0; }
.vd-xp-track > .vd-xp-on { flex: var(--vdx-ratio); }
.vd-xp-panel {
	position: relative;
	width: 100%;
	border-radius: var(--vdx-radius);
	overflow: hidden;
	cursor: pointer;
	border: 1px solid rgba(13, 27, 42, .12);
}
.vd-xp-panel:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vdx-accent, #2eb67d) 65%, transparent);
}
.vd-xp-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* per-panel background blur — the bg is oversized so blurred edges never
   reveal a gap inside the panel's clipped box */
.vd-xp-blurred .vd-xp-bg { inset: -40px; filter: blur(var(--xp-blur, 0)); }
.vd-xp-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 30%, rgba(8,19,32,.78)); }
/* per-panel color overlay (tint / darken), above the image + scrim, below text */
.vd-xp-overlay { position: absolute; inset: 0; z-index: 1; background: var(--xp-ov, transparent); pointer-events: none; }
.vd-xp-vlabel {
	position: absolute;
	left: 50%; bottom: 22px;
	transform: translateX(-50%);
	writing-mode: vertical-rl;
	rotate: 180deg;
	font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #fff;
	transition: opacity .3s ease;
	z-index: 2;
	white-space: nowrap;
}
.vd-xp-on .vd-xp-vlabel { opacity: 0; }
.vd-xp-reveal {
	position: absolute;
	left: 26px; right: 26px; bottom: 24px;
	color: #fff;
	z-index: 2;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .45s ease .18s, transform .45s ease .18s;
}
.vd-xp-on .vd-xp-reveal { opacity: 1; transform: none; }
.vd-xp-reveal h4 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
.vd-xp-reveal p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; opacity: .85; }
.vd-xp-reveal a { color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--vdx-accent, #2eb67d); padding-bottom: 2px; }

@media (max-width: 900px) {
	.vd-xp-track { flex-direction: column; height: auto; }
	.vd-xp-track > * { min-height: 84px; }
	.vd-xp-track > .vd-xp-on { min-height: 320px; flex: 1; }
	.vd-xp-vlabel { writing-mode: horizontal-tb; rotate: none; left: 22px; transform: none; bottom: 18px; }
}

/* ==========================================================================
   VD CARD STACK
   A pinned deck: each card is tossed off on scroll to reveal the next. Before
   the engine runs — and in no-JS, mobile-stack and reduced-motion — the cards
   render as a plain vertical stack (no .vd-js), nothing hidden.
   ========================================================================== */
.vd-cs {
	--vdcs-card-w: 620px;
	--vdcs-card-h: 62vh;
	--vdcs-gap: 28px;
	--vdcs-radius: 28px;
	--vdcs-offset: 0px;
	position: relative;
}

/* deck: a centered column — the section background shows past its max-width */
.vd-cs-deck {
	position: relative;
	width: min(var(--vdcs-card-w, 620px), 92vw);
	margin: 0 auto;
}

/* card surface defaults at :where() zero specificity so the Divi Design tab
   (and each card's own Background field) always win */
:where(.vd-cs) .vd-cs-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--vdcs-radius, 28px);
	background: #ece7fb;
	color: var(--vdcs-card-text, #3b1e87);
	padding: clamp(28px, 5vw, 64px);
	box-shadow: 0 30px 60px -34px rgba(15, 12, 40, .5);
}
:where(.vd-cs) .vd-cs-heading {
	margin: 0 0 .5em;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--vdcs-card-text, inherit);
}
.vd-cs-figure {
	display: flex;
	gap: clamp(14px, 2.6vw, 36px);
	align-items: baseline;
	flex-wrap: wrap;
}
:where(.vd-cs) .vd-cs-stat {
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.03em;
	color: var(--vdcs-card-text, inherit);
	flex: 0 0 auto;
}
.vd-cs-copy { flex: 1 1 260px; min-width: 0; color: var(--vdcs-card-text, inherit); }
.vd-cs-copy > :first-child { margin-top: 0; }
.vd-cs-copy > :last-child { margin-bottom: 0; }
.vd-cs-cta {
	display: inline-block;
	margin-top: clamp(16px, 3vw, 28px);
	font-weight: 700;
	color: var(--vdcs-card-text, inherit);
	text-decoration: underline;
	text-underline-offset: .22em;
}
/* decorative watermark: behind the copy, never intercepts clicks */
.vd-cs-mark {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}
.vd-cs-body { position: relative; z-index: 1; }

/* static / no-JS / mobile-stack: readable vertical stack. Reset Divi's 31.67px
   wrapper margin and use our own gap instead. */
.vd-cs-deck > * { margin: 0 0 var(--vdcs-gap, 28px) !important; }
.vd-cs-deck > *:last-child { margin-bottom: 0 !important; }

/* ---------- pinned engine ---------- */
.vd-cs.vd-js .vd-cs-stage {
	position: sticky;
	top: var(--vdcs-offset, 0px);
	height: calc(100vh - var(--vdcs-offset, 0px));
	height: calc(100svh - var(--vdcs-offset, 0px));
	height: calc(100dvh - var(--vdcs-offset, 0px));
	display: grid;
	align-content: center;
	justify-items: center;
	overflow: hidden;
}
.vd-cs.vd-js .vd-cs-deck { height: var(--vdcs-card-h, 62vh); }
/* stack every card in the same box. Absolute positioning sidesteps the Divi
   wrapper margin entirely; the pass-through keeps the wrapper's inner element
   from shrink-wrapping the card. */
.vd-cs.vd-js .vd-cs-deck > * {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	will-change: transform, opacity;
}
.vd-cs.vd-js .vd-cs-deck > .et_pb_module_inner,
.vd-cs.vd-js .vd-cs-deck > * > .et_pb_module_inner {
	display: flex;
	width: 100%;
	height: 100%;
	flex: 1;
	min-width: 0;
}
.vd-cs.vd-js .vd-cs-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* reduced-motion backstop: force the plain stack even if .vd-js slipped on
   (matching specificity + !important + later order beats the engine rules) */
@media (prefers-reduced-motion: reduce) {
	.vd-cs.vd-js .vd-cs-stage { position: static; height: auto; display: block; overflow: visible; }
	.vd-cs.vd-js .vd-cs-deck { height: auto; }
	.vd-cs.vd-js .vd-cs-deck > * {
		position: relative !important;
		inset: auto;
		transform: none !important;
		opacity: 1 !important;
		margin: 0 0 var(--vdcs-gap, 28px) !important;
	}
}

/* ==========================================================================
   Section overlap (Overlap Previous Section setting → --vd-overlap)
   Pulls a module up over the tail of the section above it. Every fallback
   layout cancels the pull so stacked content never buries itself under the
   previous section. The cancels sit after the base rules on purpose: they
   win at equal specificity by order.
   ========================================================================== */

/* the Visual Builder canvas edits at natural position — the pull is front-end only */
.et-fb .vd-kin, .et-fb .vd-chat, .et-fb .vd-hl,
.et-fb .vd-stats, .et-fb .vd-spine, .et-fb .vd-orbit, .et-fb .vd-xp, .et-fb .vd-cs, .et-fb .vd-marq { margin-top: 0; }

/* pinned modules: the pull rides with the pin. Enter/static fallbacks sit at
   their natural position; [data-trigger="enter"] also covers the pre-boot
   frame and stale values after switching trigger mode. */
.vd-kin, .vd-chat, .vd-hl, .vd-cs { margin-top: calc(var(--vd-overlap, 0px) * -1); }
.vd-kin[data-trigger="enter"], .vd-kin.vd-enter, .vd-kin.vd-static,
.vd-chat[data-trigger="enter"], .vd-chat.vd-enter, .vd-chat.vd-static, .vd-chat.vd-widget,
.vd-hl[data-trigger="enter"], .vd-hl.vd-enter, .vd-hl.vd-static,
.vd-cs.vd-static { margin-top: 0; }

/* flow modules (never pinned): desktop/tablet pull. position:relative makes
   the pulled-up section paint over the previous section's text — overlapping
   static boxes would let that text bleed through. */
.vd-stats, .vd-spine, .vd-orbit, .vd-xp, .vd-marq {
	position: relative;
	margin-top: calc(var(--vd-overlap, 0px) * -1);
}

@media (max-width: 900px) {
	/* the breakpoint where the spine goes single-side and the gallery stacks */
	.vd-spine, .vd-xp { margin-top: 0; }
}
@media (max-width: 782px) {
	.vd-kin:not(.vd-js), .vd-chat:not(.vd-js), .vd-hl:not(.vd-js), .vd-cs:not(.vd-js),
	.vd-stats, .vd-orbit, .vd-marq { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	/* pinned modules fall back to static/enter; orbit drops to its static wrap */
	.vd-kin, .vd-chat, .vd-hl, .vd-orbit, .vd-cs, .vd-marq { margin-top: 0; }
	/* expanding panels still open on hover/tap — just instantly */
	.vd-xp-track > *, .vd-xp-reveal { transition: none !important; }
}

/* ==========================================================================
   VD HERO GRAPHIC (--vhg-)
   600 x 480 artboard scaled by the `zoom` property: one width knob (--vhg-w,
   unitless px) with breakpoint fit multipliers. Beats are WAAPI-driven from
   vd-modules.js; the CSS ships the parked state (dashboard + floats + FIRST
   message visible) so zero-JS / reduced-motion / pre-boot are all readable.
   ========================================================================== */
.vd-hg {
	position: relative;
	width: 600px;
	height: 480px;
	margin: 0 auto;
	--vhg-w: 800;
	--vhg-fit: 1;
	zoom: calc(var(--vhg-w) * var(--vhg-fit) / 600);
	font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
}
@media (max-width: 1023px) { .vd-hg { --vhg-fit: 0.8; } }
@media (max-width: 767px)  { .vd-hg { --vhg-fit: 0.55; } }
@media (max-width: 479px)  { .vd-hg { --vhg-fit: 0.4; } }

.vd-hg-glow {
	position: absolute;
	left: 60px;
	top: 40px;
	width: 480px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(63,155,99,.32), rgba(25,118,210,.14) 55%, transparent 72%);
	filter: blur(30px);
}
.vd-hg-dash {
	position: absolute;
	left: 0;
	top: 40px;
	width: 600px;
}
.vd-hg-dash img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	filter: drop-shadow(0 20px 48px rgba(7,35,55,.45));
}
.vd-hg-float { position: absolute; width: 56px; height: 56px; }
.vd-hg-float img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	box-shadow: 0 4px 8px rgba(7,35,55,.10);
	animation-name: vhgFloat;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 7s;
}
@keyframes vhgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ----- beats (children; Divi wraps each in .et_pb_module — the wrappers
   stay in flow but only contain absolutely-positioned content) ----- */
.vd-hg-beats { position: absolute; inset: 0; }
.vd-hg-beats > * { margin: 0 !important; }
.vd-hg-beat { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
/* parked state: the first message is visible so the server HTML reads */
.vd-hg-beats > :first-child .vd-hg-beat { opacity: 1; }
/* once the engine arms, WAAPI owns every beat's opacity */
.vhg-js .vd-hg-beats .vd-hg-beat { opacity: 0; }

.vd-hg-ava { position: absolute; width: 88px; height: 88px; }
.vd-hg-ava img {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	box-shadow: 0 12px 24px rgba(7,35,55,.12);
}
.vd-hg-bubble {
	position: absolute;
	width: 250px;
	background: var(--vhg-bubble, #ffffff);
	color: var(--vhg-text, #212121);
	border-radius: 10px;
	box-shadow: 0 12px 24px rgba(7,35,55,.12);
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.45;
}
.vd-hg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vd-hg-name {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vhg-baccent, var(--vhg-accent, #1976D2));
}
.vd-hg-stars { font-size: 13px; line-height: 1; color: #FFC107; letter-spacing: 1px; }
.vd-hg-msg { margin-top: 8px; }
.vd-hg-status {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: #666666;
}
.vd-hg-check {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ECF5EF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 16px;
}
.vd-hg-barwrap {
	margin-top: 10px;
	height: 5px;
	border-radius: 999px;
	background: #EEEEEE;
	overflow: hidden;
}
.vd-hg-bar {
	display: block;
	height: 5px;
	width: 100%;
	border-radius: 999px;
	background: var(--vhg-baccent, #3F9B63);
	transform-origin: left center;
}

/* ----- position slots (avatar + bubble coordinates on the artboard).
   "auto" defaults to top-left for the parked first beat; the engine
   re-slots autos through tl -> mr -> bl in DOM order. ----- */
.vd-hg-beat[data-pos="auto"] .vd-hg-ava,
.vd-hg-beat[data-pos="tl"] .vd-hg-ava { left: 6px; top: 8px; }
.vd-hg-beat[data-pos="auto"] .vd-hg-bubble,
.vd-hg-beat[data-pos="tl"] .vd-hg-bubble { left: 104px; top: 14px; width: 246px; }
.vd-hg-beat[data-pos="mr"] .vd-hg-ava { left: 504px; top: 186px; }
.vd-hg-beat[data-pos="mr"] .vd-hg-bubble { left: 196px; top: 192px; width: 252px; }
.vd-hg-beat[data-pos="bl"] .vd-hg-ava { left: 36px; top: 352px; }
.vd-hg-beat[data-pos="bl"] .vd-hg-bubble { left: 134px; top: 358px; width: 252px; }
.vd-hg-beat[data-pos="tr"] .vd-hg-ava { left: 506px; top: 8px; }
.vd-hg-beat[data-pos="tr"] .vd-hg-bubble { left: 248px; top: 14px; width: 250px; }
.vd-hg-beat[data-pos="ml"] .vd-hg-ava { left: 6px; top: 186px; }
.vd-hg-beat[data-pos="ml"] .vd-hg-bubble { left: 104px; top: 192px; width: 246px; }
.vd-hg-beat[data-pos="br"] .vd-hg-ava { left: 490px; top: 346px; }
.vd-hg-beat[data-pos="br"] .vd-hg-bubble { left: 232px; top: 352px; width: 250px; }

/* ----- reduced motion: parked graphic, no drift (JS engine never arms) ----- */
@media (prefers-reduced-motion: reduce) {
	.vd-hg-float img { animation: none !important; }
}

/* ----- Visual Builder: park everything and lay the beats out in flow
   under the dashboard so they are all visible and editable ----- */
.et-fb .vd-hg { height: auto; }
.et-fb .vd-hg-glow { display: none; }
.et-fb .vd-hg-dash { position: relative; top: 0; }
.et-fb .vd-hg-float { display: none; }
.et-fb .vd-hg-float img { animation: none !important; }
.et-fb .vd-hg-beats { position: relative; inset: auto; margin-top: 16px; }
.et-fb .vd-hg-beats > * { margin: 0 0 12px !important; }
.et-fb .vd-hg-beat {
	position: relative;
	inset: auto;
	opacity: 1 !important;
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.et-fb .vd-hg-ava, .et-fb .vd-hg-bubble { position: relative; left: auto !important; top: auto !important; }
.et-fb .vd-hg-ava { width: 56px; height: 56px; flex: 0 0 56px; }
.et-fb .vd-hg-ava img { width: 56px; height: 56px; }

/* ==========================================================================
   VD CTA MARQUEE (--vdm-)
   Headline / copy / buttons beside a vertical text marquee. The loop is pure
   CSS (two stacked copies of the list translating -100%); the center-focus
   fade is a gradient MASK on the column — no per-frame JS, works over any
   section background. JS only arms the staggered entrance (.vd-js/.vd-in);
   zero-JS and reduced-motion show everything parked and readable.
   ========================================================================== */
.vd-marq { position: relative; }
.vd-marq--full {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
}
.vd-marq-grid { display: grid; gap: 40px; align-items: center; width: 100%; }
@media (min-width: 981px) {
	.vd-marq-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
	.vd-marq-side-left .vd-marq-copy { order: 2; }
	.vd-marq-side-left .vd-marq-col { order: 1; }
}

:where(.vd-marq-h) {
	margin: 0 0 24px;
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
:where(.vd-marq-p) {
	margin: 0 0 30px;
	font-size: 19px;
	line-height: 1.6;
	opacity: 0.75;
	max-width: 34em;
}
.vd-marq-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.vd-marq-btn {
	position: relative;
	display: inline-block;
	padding: 13px 26px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vd-marq-btn--fill { background: var(--vdm-btn-bg, #111827); color: var(--vdm-btn-txt, #ffffff); }
.vd-marq-btn--ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.vd-marq-btn:hover { transform: scale(1.05); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.vd-marq-btn-label { position: relative; z-index: 1; }
/* shine sweep: parked off-canvas left, crosses on hover */
.vd-marq-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
	transform: translateX(-160%);
	transition: transform 0.7s ease;
}
.vd-marq-btn:hover .vd-marq-shine { transform: translateX(160%); }

/* ----- marquee column ----- */
.vd-marq-col { min-width: 0; }
.vd-marq-mask {
	height: var(--vdm-h, 600px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
/* center-focus fade: replaces the reference implementation's per-frame rAF
   opacity loop — the mask fades the TEXT itself, so no background needed */
.vd-marq[data-fade="on"] .vd-marq-mask {
	-webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.18) 12%, #000 42%, #000 58%, rgba(0, 0, 0, 0.18) 88%, transparent);
	mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.18) 12%, #000 42%, #000 58%, rgba(0, 0, 0, 0.18) 88%, transparent);
}
.vd-marq-track {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	animation: vdmScroll var(--vdm-dur, 20s) linear infinite;
}
.vd-marq[data-dir="down"] .vd-marq-track { animation-direction: reverse; }
.vd-marq[data-hover="on"] .vd-marq-mask:hover .vd-marq-track { animation-play-state: paused; }
@keyframes vdmScroll { to { transform: translateY(-100%); } }
/* wrapper survival kit: each line is a Divi-wrapped child */
.vd-marq-track > * { margin: 0 !important; }
:where(.vd-marq-item) {
	font-size: clamp(34px, 4.6vw, 60px);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.1;
	padding: 28px 0;
	color: var(--vdm-color, inherit);
}

/* ----- staggered entrance: hidden ONLY once JS arms (.vd-js) ----- */
.vd-marq.vd-js .vd-marq-fade {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--vdm-d, 0ms);
}
.vd-marq.vd-js.vd-in .vd-marq-fade { opacity: 1; transform: none; }

@media (max-width: 782px) {
	.vd-marq { --vdm-h: 340px; }
}

/* ----- reduced motion: static readable list, no loop, no fades ----- */
@media (prefers-reduced-motion: reduce) {
	.vd-marq-track { animation: none !important; }
	.vd-marq-track[aria-hidden="true"] { display: none; }
	.vd-marq-mask {
		height: auto;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
	.vd-marq-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
	.vd-marq-btn { transition: none !important; }
	.vd-marq-btn:hover { transform: none; }
	.vd-marq-shine { display: none; }
}

/* ----- Visual Builder: parked, static, browsable ----- */
.et-fb .vd-marq-track { animation: none !important; }
.et-fb .vd-marq-track[aria-hidden="true"] { display: none; }
.et-fb .vd-marq-mask {
	height: auto;
	max-height: 480px;
	overflow: auto;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}
.et-fb .vd-marq-fade { opacity: 1 !important; transform: none !important; }
.et-fb .vd-marq--full { min-height: 0; }

/* ----- CTA Marquee: Vendasta brand presets (Design → Colors → Style Preset).
   Eucalyptus #3F9B63 filled CTA per the brand accent rule; heading/body per
   the brand type colors (white on dark navy sections, #555/#666 on light).
   Plain-class specificity so the Divi Design tab still wins every field. ----- */
.vd-marq--vdark {
	color: #ffffff;
	--vdm-btn-bg: #3F9B63;
	--vdm-btn-txt: #ffffff;
	--vdm-color: #ffffff;
}
.vd-marq--vdark .vd-marq-h { color: #ffffff; }
.vd-marq--vdark .vd-marq-p { color: rgba(255, 255, 255, 0.8); opacity: 1; }
.vd-marq--vlight {
	color: #212121;
	--vdm-btn-bg: #3F9B63;
	--vdm-btn-txt: #ffffff;
	--vdm-color: #072337;
}
.vd-marq--vlight .vd-marq-h { color: #555555; }
.vd-marq--vlight .vd-marq-p { color: #666666; opacity: 1; }

/* ==========================================================================
   VD BIZ STATS (--vbs-)
   660 x 565 artboard scaled by the `zoom` property: one width knob (--vbs-w,
   unitless px) with breakpoint fit multipliers (0.8 tablet / 0.5 phone, per
   the LP source). Scroll-triggered, plays ONCE: the server HTML is the
   FINISHED graphic (counters at target, arc drawn, bars filled) so zero-JS /
   reduced-motion / Visual Builder are all readable; JS arms .vd-js (rewinds
   to the pre state) and .vd-in (plays the CSS keyframe timeline + count-ups).
   ========================================================================== */
.vd-bs {
	position: relative;
	width: 660px;
	height: 565px;
	margin: 0 auto;
	--vbs-w: 660;
	--vbs-fit: 1;
	zoom: calc(var(--vbs-w) * var(--vbs-fit) / 660);
	font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
	color: #212121;
}
@media (max-width: 1023px) { .vd-bs { --vbs-fit: 0.8; } }
@media (max-width: 767px)  { .vd-bs { --vbs-fit: 0.5; } }

.vd-bs-dash { position: absolute; left: 0; top: 56px; width: 590px; }
.vd-bs-dash img { width: 100%; height: auto; display: block; }

/* ----- card slots: position + design-scale wrapper ----- */
.vd-bs-slot { position: absolute; }
.vd-bs-slot--lst { left: 245px; top: 14px;  width: 206px; z-index: 3; }
.vd-bs-slot--rep { left: 430px; top: 132px; width: 286px; z-index: 2; }
.vd-bs-slot--adv { left: 348px; top: 344px; width: 346px; z-index: 4; }
.vd-bs-zoom { transform-origin: top left; }
.vd-bs-slot--lst .vd-bs-zoom { transform: scale(0.79); }
.vd-bs-slot--rep .vd-bs-zoom { transform: scale(0.75); }
.vd-bs-slot--adv .vd-bs-zoom { transform: scale(0.77); }

.vd-bs-card {
	width: 100%;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 24px rgba(7, 35, 55, 0.12);
}
.vd-bs-head {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
}
.vd-bs-card--lst .vd-bs-head { background: var(--vbs-lst, #4CAF50); }
.vd-bs-card--rep .vd-bs-head { background: var(--vbs-rep, #F5C400); }
.vd-bs-card--adv .vd-bs-head { background: var(--vbs-adv, #1976D2); }
.vd-bs-body { padding: 12px 16px 14px; }

/* ----- shared bits ----- */
.vd-bs-badge { font-size: 12px; font-weight: 500; margin-left: 6px; }
.vd-bs-badge--up   { color: #2E7D32; }
.vd-bs-badge--down { color: #D32F2F; }
.vd-bs-desc { margin-top: 4px; font-size: 10.5px; color: #9E9E9E; line-height: 1.45; }
.vd-bs-note { font-size: 10.5px; color: #9E9E9E; font-style: italic; margin-top: 4px; }
.vd-bs-big { font-weight: 500; line-height: 1.1; }

/* ----- Listings card ----- */
.vd-bs-period { text-align: center; font-size: 14px; margin: 2px 0 8px; }
.vd-bs-arcwrap { position: relative; width: 112px; height: 112px; margin: 0 auto; }
.vd-bs-arcwrap svg { display: block; }
.vd-bs-arcfg { stroke-dasharray: 100; stroke-dashoffset: 11; }
.vd-bs-grade {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 42px;
	font-weight: 700;
	color: #43A047;
}
.vd-bs-big--lst { text-align: center; margin-top: 8px; font-size: 26px; }
.vd-bs-big--lst .vd-bs-badge { font-size: 12px; }
.vd-bs-label { margin-top: 12px; font-size: 14px; font-weight: 500; }
.vd-bs-sub { margin-top: 10px; font-size: 11px; font-weight: 700; }
.vd-bs-acc { margin-top: 2px; font-size: 20px; font-weight: 500; }
.vd-bs-acc .vd-bs-badge { font-size: 11px; }
.vd-bs-card--lst .vd-bs-note { font-size: 10px; margin-top: 1px; }
.vd-bs-bar {
	display: flex;
	height: 16px;
	border-radius: 8px;
	overflow: hidden;
	margin-top: 8px;
	transform: scaleX(1);
	transform-origin: left center;
}
.vd-bs-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: #ffffff;
}
.vd-bs-seg--1 { background: #43A047; }
.vd-bs-seg--2 { background: #9CCC9E; }
.vd-bs-seg--3 { background: #BDBDBD; }
.vd-bs-legend { display: flex; margin-top: 4px; font-size: 8.5px; color: #9E9E9E; }
.vd-bs-legend span { flex: 1; text-align: center; }
.vd-bs-foot { margin-top: 7px; font-size: 9px; color: #9E9E9E; }

/* ----- Reputation card ----- */
.vd-bs-heading { font-size: 17px; font-weight: 500; margin-top: 4px; }
.vd-bs-bigrow { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 14px; }
.vd-bs-big--rep { font-size: 32px; }
.vd-bs-avg { font-size: 10.5px; color: #9E9E9E; padding-bottom: 4px; }
.vd-bs-avg-label { border-bottom: 1.5px dotted #BDBDBD; padding-bottom: 2px; }
.vd-bs-avg b { color: #212121; font-size: 12px; margin-left: 8px; }
.vd-bs-stars { margin-top: 12px; display: flex; gap: 12px; }
.vd-bs-star { font-size: 34px; line-height: 1; color: #FFC107; opacity: 1; }
.vd-bs-star--part {
	background: linear-gradient(90deg, #FFC107 var(--vbs-star5, 78%), #E3E3E3 var(--vbs-star5, 78%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.vd-bs-card--rep .vd-bs-note { margin-top: 12px; }

/* ----- Advertising card ----- */
.vd-bs-heading--adv { font-size: 15px; margin-top: 2px; }
.vd-bs-adrow { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 10px; }
.vd-bs-big--adv { font-size: 28px; }
.vd-bs-legrows { font-size: 10.5px; color: #424242; padding-top: 2px; }
.vd-bs-legrow { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.vd-bs-legrow i { width: 12px; height: 12px; border-radius: 2px; display: block; }
.vd-bs-legrow:nth-child(1) i { background: #2196F3; }
.vd-bs-legrow:nth-child(2) i { background: #80DEEA; }
.vd-bs-legval { margin-left: 8px; min-width: 30px; text-align: right; }
.vd-bs-legrow .vd-bs-badge { font-size: 10px; margin-left: 6px; }
.vd-bs-trend { margin-top: 8px; font-size: 9.5px; color: #9E9E9E; font-style: italic; }
.vd-bs-chart { width: 100%; height: auto; display: block; margin-top: 4px; }
.vd-bs-line { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ----- pre state: hidden ONLY once JS arms (.vd-js) ----- */
.vd-bs.vd-js .vd-bs-dash,
.vd-bs.vd-js .vd-bs-card,
.vd-bs.vd-js .vd-bs-star,
.vd-bs.vd-js .vd-bs-f41,
.vd-bs.vd-js .vd-bs-f59,
.vd-bs.vd-js .vd-bs-f61 { opacity: 0; }
.vd-bs.vd-js .vd-bs-dash { transform: translateY(26px); }
.vd-bs.vd-js .vd-bs-card--lst { transform: translateY(46px) scale(0.96); }
.vd-bs.vd-js .vd-bs-card--rep { transform: translateX(64px); }
.vd-bs.vd-js .vd-bs-card--adv { transform: translate(36px, 64px); }
.vd-bs.vd-js .vd-bs-star { transform: scale(0.4); }
.vd-bs.vd-js .vd-bs-arcfg { stroke-dashoffset: 100; }
.vd-bs.vd-js .vd-bs-bar { transform: scaleX(0); }
.vd-bs.vd-js .vd-bs-line { stroke-dashoffset: 1; }

/* ----- the play-once timeline (delays from the LP source) ----- */
.vd-bs.vd-js.vd-in .vd-bs-dash { animation: vbsIn 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-card--lst { animation: vbsRise 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 700ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-card--rep { animation: vbsSlideL 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 2500ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-card--adv { animation: vbsRiseUp 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 4300ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-arcfg { animation: vbsArc 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 1300ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-bar { animation: vbsBar 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 2100ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-star { animation: vbsStar 500ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.vd-bs.vd-js.vd-in .vd-bs-stars .vd-bs-star:nth-child(1) { animation-delay: 3150ms; }
.vd-bs.vd-js.vd-in .vd-bs-stars .vd-bs-star:nth-child(2) { animation-delay: 3300ms; }
.vd-bs.vd-js.vd-in .vd-bs-stars .vd-bs-star:nth-child(3) { animation-delay: 3450ms; }
.vd-bs.vd-js.vd-in .vd-bs-stars .vd-bs-star:nth-child(4) { animation-delay: 3600ms; }
.vd-bs.vd-js.vd-in .vd-bs-stars .vd-bs-star:nth-child(5) { animation-delay: 3750ms; }
.vd-bs.vd-js.vd-in .vd-bs-f41 { animation: vbsFade 600ms ease 4100ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-f59 { animation: vbsFade 600ms ease 5900ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-f61 { animation: vbsFade 700ms ease 6100ms forwards; }
.vd-bs.vd-js.vd-in .vd-bs-line { animation: vbsLine 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) 4900ms forwards; }

@keyframes vbsIn     { from { opacity: 0; transform: translateY(26px); }             to { opacity: 1; transform: translateY(0); } }
@keyframes vbsRise   { from { opacity: 0; transform: translateY(46px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes vbsSlideL { from { opacity: 0; transform: translateX(64px); }             to { opacity: 1; transform: translateX(0); } }
@keyframes vbsRiseUp { from { opacity: 0; transform: translate(36px, 64px); }        to { opacity: 1; transform: translate(0, 0); } }
@keyframes vbsFade   { to { opacity: 1; } }
@keyframes vbsArc    { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 11; } }
@keyframes vbsBar    { to { transform: scaleX(1); } }
@keyframes vbsStar   { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes vbsLine   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ----- reduced motion: CSS backstop on top of the JS never arming ----- */
@media (prefers-reduced-motion: reduce) {
	.vd-bs .vd-bs-dash,
	.vd-bs .vd-bs-card,
	.vd-bs .vd-bs-star,
	.vd-bs .vd-bs-f41,
	.vd-bs .vd-bs-f59,
	.vd-bs .vd-bs-f61 { opacity: 1 !important; transform: none !important; animation: none !important; }
	.vd-bs .vd-bs-arcfg { stroke-dashoffset: 11 !important; animation: none !important; }
	.vd-bs .vd-bs-bar { transform: scaleX(1) !important; animation: none !important; }
	.vd-bs .vd-bs-line { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ----- Visual Builder: parked finished graphic (JS never arms in FB) ----- */
.et-fb .vd-bs * { animation: none !important; }