/*!
 * Kekeh Moving — Elementor Widgets : Shared base
 * -----------------------------------------------------------------------------
 * ARCHITECTURE NOTES (read before editing)
 *
 * 1. Everything is scoped to `.km-scope`, and every selector doubles the class
 *    (`.km-scope.km-scope`) so the ruleset lands at specificity (0,3,0) for
 *    component rules and (0,2,1) for tag resets. That beats virtually every
 *    theme rule without using `!important`, while still losing cleanly to
 *    Elementor's generated selectors (`{{WRAPPER}} .km-scope.km-scope …`).
 *
 * 2. Every customisable value is read from a CSS custom property. Elementor
 *    style controls write the *variable*, never the property. That means the
 *    optional `!important` hardening layer (`.km-force`) can never break
 *    customisation — `!important` applies to the declaration, not to the
 *    variable lookup.
 *
 * 3. Typography properties are deliberately excluded from the hardening layer
 *    so that Elementor's Typography group controls always win.
 * -----------------------------------------------------------------------------
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
.km-scope.km-scope {
	/* Brand palette */
	--km-navy: #062333;
	--km-navy-deep: #032A3D;
	--km-cyan: #35B7F3;
	--km-cyan-hover: #20A2DE;
	--km-cyan-soft: rgba(53, 183, 243, 0.1);
	--km-pale-blue: #F1FAFE;
	--km-pale-wash: #F7FCFE;
	--km-orange: #F4A16E;
	--km-body: #5F737D;
	--km-border: #DCEAF0;
	--km-white: #FFFFFF;

	/* Typography */
	--km-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--km-base-size: 17px;
	--km-base-leading: 1.7;
	--km-heading-color: var(--km-navy);
	--km-heading-transform: uppercase;
	--km-heading-leading: 1.2;
	--km-heading-tracking: 0.02em;

	/* Eyebrow */
	--km-eyebrow-color: var(--km-orange);
	--km-eyebrow-size: 14px;
	--km-eyebrow-tracking: 0.45em;
	--km-eyebrow-gap: 16px;

	/* Geometry */
	--km-radius-sm: 8px;
	--km-radius-md: 16px;
	--km-radius-lg: 24px;
	--km-radius-pill: 100px;
	--km-container: 1200px;
	--km-gutter: 24px;

	/* Elevation */
	--km-shadow-card: 0 10px 30px rgba(6, 35, 51, 0.04);
	--km-shadow-hover: 0 15px 40px rgba(6, 35, 51, 0.08);

	/* Motion */
	--km-transition: 0.3s ease;
	--km-reveal-duration: 0.8s;
	--km-reveal-distance: 24px;
	--km-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Buttons */
	--km-btn-padding: 16px 32px;
	--km-btn-radius: var(--km-radius-pill);
	--km-btn-border-width: 2px;
	--km-btn-lift: -2px;
	--km-btn-gap: 16px;

	font-family: var(--km-font);
	font-size: var(--km-base-size);
	line-height: var(--km-base-leading);
	color: var(--km-body);
	position: relative;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. SCOPED RESET  — specificity (0,2,1), always beaten by component rules
   ========================================================================== */
.km-scope.km-scope *,
.km-scope.km-scope *::before,
.km-scope.km-scope *::after {
	box-sizing: border-box;
}

.km-scope.km-scope h1,
.km-scope.km-scope h2,
.km-scope.km-scope h3,
.km-scope.km-scope h4,
.km-scope.km-scope h5,
.km-scope.km-scope h6 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-shadow: none;
	font-family: var(--km-font);
	font-weight: 700;
	line-height: var(--km-heading-leading);
	color: var(--km-heading-color);
	text-transform: var(--km-heading-transform);
	letter-spacing: var(--km-heading-tracking);
}

.km-scope.km-scope p,
.km-scope.km-scope figure,
.km-scope.km-scope blockquote,
.km-scope.km-scope dl,
.km-scope.km-scope dd {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-shadow: none;
	font-family: var(--km-font);
	color: var(--km-body);
}

.km-scope.km-scope ul,
.km-scope.km-scope ol,
.km-scope.km-scope li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.km-scope.km-scope a {
	color: inherit;
	background: none;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	transition: var(--km-transition);
}

.km-scope.km-scope a:hover,
.km-scope.km-scope a:focus,
.km-scope.km-scope a:active {
	text-decoration: none;
	box-shadow: none;
}

.km-scope.km-scope img {
	max-width: 100%;
	height: auto;
	border: 0;
	display: block;
}

.km-scope.km-scope svg {
	display: block;
	max-width: 100%;
}

.km-scope.km-scope button {
	font-family: inherit;
	border: 0;
	background: none;
}

.km-scope.km-scope section,
.km-scope.km-scope article,
.km-scope.km-scope aside,
.km-scope.km-scope div {
	float: none;
}

.km-scope.km-scope a:focus-visible,
.km-scope.km-scope button:focus-visible {
	outline: 2px solid var(--km-cyan);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Elementor icon-library output normalisation */
.km-scope.km-scope .km-icon i,
.km-scope.km-scope .km-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	color: inherit;
	fill: currentColor;
}

.km-scope.km-scope .km-icon > svg[stroke] {
	fill: none;
	stroke: currentColor;
}

.km-scope.km-scope .km-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.km-scope.km-scope .km-container {
	width: 100%;
	max-width: var(--km-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--km-gutter);
	padding-right: var(--km-gutter);
}

.km-scope.km-scope .km-section {
	position: relative;
}

.km-scope.km-scope .km-eyebrow {
	display: block;
	color: var(--km-eyebrow-color);
	font-family: var(--km-font);
	font-weight: 700;
	font-size: var(--km-eyebrow-size);
	letter-spacing: var(--km-eyebrow-tracking);
	text-transform: uppercase;
	margin: 0 0 var(--km-eyebrow-gap);
}

.km-scope.km-scope .km-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.km-scope.km-scope .km-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--km-btn-padding);
	border-radius: var(--km-btn-radius);
	border: var(--km-btn-border-width) solid transparent;
	font-family: var(--km-font);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: transparent;
	transition: background-color var(--km-transition), color var(--km-transition), border-color var(--km-transition), box-shadow var(--km-transition), transform 0.2s ease;
}

.km-scope.km-scope .km-btn--primary {
	background-color: var(--km-btn-primary-bg, var(--km-cyan));
	color: var(--km-btn-primary-color, var(--km-white));
	border-color: var(--km-btn-primary-border, var(--km-cyan));
	box-shadow: var(--km-btn-primary-shadow, none);
}

.km-scope.km-scope .km-btn--primary:hover,
.km-scope.km-scope .km-btn--primary:focus {
	background-color: var(--km-btn-primary-bg-h, var(--km-cyan-hover));
	color: var(--km-btn-primary-color-h, var(--km-white));
	border-color: var(--km-btn-primary-border-h, var(--km-cyan-hover));
	box-shadow: var(--km-btn-primary-shadow-h, 0 8px 20px rgba(53, 183, 243, 0.3));
	transform: translateY(var(--km-btn-lift));
}

.km-scope.km-scope .km-btn--outline {
	background-color: var(--km-btn-outline-bg, transparent);
	color: var(--km-btn-outline-color, var(--km-navy));
	border-color: var(--km-btn-outline-border, var(--km-navy));
	box-shadow: var(--km-btn-outline-shadow, none);
}

.km-scope.km-scope .km-btn--outline:hover,
.km-scope.km-scope .km-btn--outline:focus {
	background-color: var(--km-btn-outline-bg-h, var(--km-navy));
	color: var(--km-btn-outline-color-h, var(--km-white));
	border-color: var(--km-btn-outline-border-h, var(--km-navy));
	box-shadow: var(--km-btn-outline-shadow-h, none);
	transform: translateY(var(--km-btn-lift));
}

.km-scope.km-scope .km-btn--outline-white {
	background-color: var(--km-btn-white-bg, transparent);
	color: var(--km-btn-white-color, var(--km-white));
	border-color: var(--km-btn-white-border, rgba(255, 255, 255, 0.45));
	box-shadow: var(--km-btn-white-shadow, none);
}

.km-scope.km-scope .km-btn--outline-white:hover,
.km-scope.km-scope .km-btn--outline-white:focus {
	background-color: var(--km-btn-white-bg-h, var(--km-white));
	color: var(--km-btn-white-color-h, var(--km-navy));
	border-color: var(--km-btn-white-border-h, var(--km-white));
	box-shadow: var(--km-btn-white-shadow-h, none);
	transform: translateY(var(--km-btn-lift));
}

.km-scope.km-scope .km-btn__icon {
	display: inline-flex;
	line-height: 0;
}

.km-scope.km-scope .km-btn__icon svg,
.km-scope.km-scope .km-btn__icon i {
	width: 1em;
	height: 1em;
	font-size: 1.15em;
}

.km-scope.km-scope .km-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--km-btn-gap);
}

/* ==========================================================================
   5. SCROLL REVEAL
   ========================================================================== */
.km-scope.km-scope .km-reveal {
	opacity: 0;
	transform: translateY(var(--km-reveal-distance));
	transition: opacity var(--km-reveal-duration) var(--km-reveal-ease),
		transform var(--km-reveal-duration) var(--km-reveal-ease);
	transition-delay: var(--km-delay, 0s);
	will-change: opacity, transform;
}

.km-scope.km-scope .km-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.km-scope.km-scope .km-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.km-scope.km-scope *,
	.km-scope.km-scope *::before,
	.km-scope.km-scope *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* ==========================================================================
   6. OPTIONAL HARDENING LAYER  (root gets `.km-force`)
   --------------------------------------------------------------------------
   Only structural / colour / decoration properties are forced, and every
   forced value resolves through a CSS variable, so Elementor controls that
   write those variables continue to work. Typography, padding, margin, gap
   and shadows are intentionally NOT forced.
   ========================================================================== */
.km-scope.km-force.km-force,
.km-scope.km-force.km-force *,
.km-scope.km-force.km-force *::before,
.km-scope.km-force.km-force *::after {
	box-sizing: border-box !important;
}

.km-scope.km-force.km-force a,
.km-scope.km-force.km-force a:hover,
.km-scope.km-force.km-force a:focus,
.km-scope.km-force.km-force a:active {
	text-decoration: none !important;
	background-image: none !important;
}

.km-scope.km-force.km-force img {
	max-width: 100% !important;
	border: 0 !important;
}

.km-scope.km-force.km-force ul,
.km-scope.km-force.km-force ol,
.km-scope.km-force.km-force li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.km-scope.km-force.km-force h1,
.km-scope.km-force.km-force h2,
.km-scope.km-force.km-force h3,
.km-scope.km-force.km-force h4,
.km-scope.km-force.km-force h5,
.km-scope.km-force.km-force h6,
.km-scope.km-force.km-force p {
	background: none !important;
	text-shadow: none !important;
	border: 0 !important;
	float: none !important;
	width: auto !important;
	clear: none !important;
}

.km-scope.km-force.km-force h1::before,
.km-scope.km-force.km-force h2::before,
.km-scope.km-force.km-force h3::before,
.km-scope.km-force.km-force h1::after,
.km-scope.km-force.km-force h2::after,
.km-scope.km-force.km-force h3::after {
	content: none !important;
}

.km-scope.km-force.km-force section,
.km-scope.km-force.km-force article,
.km-scope.km-force.km-force aside,
.km-scope.km-force.km-force div {
	float: none !important;
	clear: none !important;
}

.km-scope.km-force.km-force .km-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	float: none !important;
	border-style: solid !important;
	border-radius: var(--km-btn-radius) !important;
}

.km-scope.km-force.km-force .km-btn--primary {
	background-color: var(--km-btn-primary-bg, var(--km-cyan)) !important;
	color: var(--km-btn-primary-color, var(--km-white)) !important;
	border-color: var(--km-btn-primary-border, var(--km-cyan)) !important;
}

.km-scope.km-force.km-force .km-btn--primary:hover,
.km-scope.km-force.km-force .km-btn--primary:focus {
	background-color: var(--km-btn-primary-bg-h, var(--km-cyan-hover)) !important;
	color: var(--km-btn-primary-color-h, var(--km-white)) !important;
	border-color: var(--km-btn-primary-border-h, var(--km-cyan-hover)) !important;
}

.km-scope.km-force.km-force .km-btn--outline {
	background-color: var(--km-btn-outline-bg, transparent) !important;
	color: var(--km-btn-outline-color, var(--km-navy)) !important;
	border-color: var(--km-btn-outline-border, var(--km-navy)) !important;
}

.km-scope.km-force.km-force .km-btn--outline:hover,
.km-scope.km-force.km-force .km-btn--outline:focus {
	background-color: var(--km-btn-outline-bg-h, var(--km-navy)) !important;
	color: var(--km-btn-outline-color-h, var(--km-white)) !important;
	border-color: var(--km-btn-outline-border-h, var(--km-navy)) !important;
}

.km-scope.km-force.km-force .km-btn--outline-white {
	background-color: var(--km-btn-white-bg, transparent) !important;
	color: var(--km-btn-white-color, var(--km-white)) !important;
	border-color: var(--km-btn-white-border, rgba(255, 255, 255, 0.45)) !important;
}

.km-scope.km-force.km-force .km-btn--outline-white:hover,
.km-scope.km-force.km-force .km-btn--outline-white:focus {
	background-color: var(--km-btn-white-bg-h, var(--km-white)) !important;
	color: var(--km-btn-white-color-h, var(--km-navy)) !important;
	border-color: var(--km-btn-white-border-h, var(--km-white)) !important;
}

.km-scope.km-force.km-force .km-eyebrow {
	display: block !important;
	color: var(--km-eyebrow-color) !important;
	background: none !important;
}

.km-scope.km-force.km-force .km-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.km-scope.km-force.km-force .km-container {
	max-width: var(--km-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
	float: none !important;
}