/* Motion Kit: shared tokens + resets. Every widget root carries class "mk". */
.mk {
	--mk-navy: #253f52;
	--mk-deep: #1a2e3d;
	--mk-slate: #2e4a5f;
	--mk-steel: #4d6b80;
	--mk-sky: #8da3b2;
	--mk-mist: #c8d6e2;
	--mk-frost: #e3ebf2;
	--mk-ice: #f1f5f9;
	--mk-gold: #c9a15a;
	--mk-red: #bc2026;
	--mk-ink: #16222c;
	--mk-gray: #76838f;
	--mk-r: 20px;
	--mk-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mk-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
	box-sizing: border-box;
	font-family: var(--mk-font);
	color: var(--mk-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }

/* Neutralise theme / Elementor Kit button styling (colour, hover fill, border, radius). */
.mk button {
	font: inherit;
	color: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: inherit;
	line-height: inherit;
	min-height: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.mk button:hover, .mk button:focus, .mk button:active { background: none; color: inherit; box-shadow: none; }
.mk :focus-visible { outline: 2px solid var(--mk-steel); outline-offset: 3px; border-radius: 6px; }
.mk a { text-decoration: none; }
:where(.mk) :where(h1, h2, h3, h4, p) { margin: 0; } /* zero specificity, so widget rules can set their own margins */

.mk-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 500 12px var(--mk-mono);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mk-gray);
}
.mk-label::before { content: ''; width: 28px; height: 1px; background: var(--mk-sky); }

.mk-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 600 14.5px var(--mk-font);
	padding: 13px 24px;
	border-radius: 6px;
	border: 1.5px solid var(--mk-navy);
	color: var(--mk-navy);
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.mk-pill .mk-arr { color: var(--mk-red); display: inline-block; transition: transform 0.3s, color 0.3s; }
.mk-pill:hover { background: var(--mk-navy); color: #fff; }
.mk-pill:hover .mk-arr { transform: translateX(4px); color: #f0505f; }

@media (prefers-reduced-motion: reduce) {
	.mk * { scroll-behavior: auto !important; }
}