/*!
 * Kekeh Moving — "Our Signature Move Package" widget
 * All customisable values resolve through CSS custom properties. See
 * kekeh-base.css for the specificity / hardening architecture.
 */

/* ==========================================================================
   WIDGET-LEVEL TOKEN OVERRIDES
   ========================================================================== */
.km-scope.km-scope.km-w-sig {
	--km-eyebrow-tracking: 0.45em;
	--km-eyebrow-gap: 16px;
	--km-body: #42525A;
	--km-cyan-hover: #20A2DE;
	--km-radius-lg: 24px;
	--km-radius-md: 16px;
	--km-radius-sm: 8px;
	--km-base-size: 16px;
	--km-base-leading: 1.7;

	/* Section rhythm */
	--km-sec-pad: 80px 0;
	--km-hero-pad: 100px 0 80px;
	--km-steps-pad: 100px 0;

	/* Buttons — the source design uses a solid white outline here */
	--km-btn-white-border: var(--km-white);

	/* Section surfaces */
	--km-hero-bg: var(--km-white);
	--km-inc-bg: var(--km-white);
	--km-steps-bg: var(--km-pale-blue);
	--km-cta-sec-bg: var(--km-white);

	/* Hero */
	--km-hero-cols: 1.1fr 0.9fr;
	--km-hero-gap: 80px;
	--km-hero-gap-stack: 60px;
	--km-hero-img-min-h: 500px;
	--km-hero-img-radius: var(--km-radius-lg);
	--km-hero-wave-color: var(--km-pale-blue);
	--km-hero-wave-opacity: 0.4;
	--km-hero-wave-w: 60%;
	--km-hero-wave-h: 120%;
	--km-hero-wave-top: -10%;
	--km-hero-wave-right: -5%;

	/* Cards */
	--km-card-cols: 3;
	--km-card-gap: 32px;
	--km-card-bg: var(--km-pale-wash);
	--km-card-bg-h: var(--km-white);
	--km-card-border: var(--km-border);
	--km-card-border-h: var(--km-cyan);
	--km-card-border-w: 1px;
	--km-card-radius: var(--km-radius-md);
	--km-card-pad: 48px 32px 40px;
	--km-card-lift: -6px;
	--km-card-icon-size: 64px;
	--km-card-icon-radius: var(--km-radius-md);
	--km-card-icon-bg: var(--km-pale-blue);
	--km-card-icon-bg-h: var(--km-cyan);
	--km-card-icon-color: var(--km-cyan);
	--km-card-icon-color-h: var(--km-white);
	--km-card-icon-glyph: 32px;
	--km-card-icon-gap: 24px;
	--km-card-num-size: 80px;
	--km-card-num-color: var(--km-navy);
	--km-card-num-color-h: var(--km-cyan);
	--km-card-num-opacity: 0.03;
	--km-card-num-opacity-h: 0.06;
	--km-card-num-bottom: -10px;
	--km-card-num-right: 16px;

	/* Timeline */
	--km-step-cols: 5;
	--km-step-gap: 24px;
	--km-step-media-max: 280px;
	--km-step-media-radius: var(--km-radius-md);
	--km-step-media-bg: var(--km-white);
	--km-step-badge-size: 44px;
	--km-step-badge-bg: var(--km-cyan);
	--km-step-badge-color: var(--km-white);
	--km-step-badge-ring: var(--km-pale-blue);
	--km-step-badge-ring-w: 4px;
	--km-step-badge-offset: -20px;
	--km-step-line-color: var(--km-border);
	--km-step-line-size: 2px;
	--km-step-line-top: 100px;
	--km-step-line-inset: 10%;
	--km-step-ph-bg: var(--km-white);
	--km-step-ph-border: var(--km-cyan);
	--km-step-ph-color: var(--km-cyan);

	/* CTA */
	--km-cta-bg: var(--km-navy);
	--km-cta-radius: var(--km-radius-lg);
	--km-cta-pad: 80px 24px;
	--km-cta-shadow: 0 20px 40px rgba(6, 35, 51, 0.15);
	--km-cta-deco-color: var(--km-cyan);
	--km-cta-deco-opacity: 0.05;
}

/* ==========================================================================
   SHARED TYPE SCALE
   ========================================================================== */
.km-scope.km-scope .km-h1 {
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	margin: 0 0 16px;
}

.km-scope.km-scope .km-h2 {
	font-size: clamp(30px, 3.5vw, 42px);
	line-height: 1.2;
	letter-spacing: 0.02em;
	margin: 0 0 16px;
}

.km-scope.km-scope .km-h3 {
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0.03em;
	margin: 0 0 12px;
}

.km-scope.km-scope .km-lede {
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.8;
	color: var(--km-body);
	margin: 0;
}

.km-scope.km-scope .km-sec-head {
	max-width: var(--km-sec-head-max, 700px);
	margin: 0 auto var(--km-sec-head-gap, 64px);
	text-align: var(--km-sec-head-align, center);
}

/* ==========================================================================
   A. HERO
   ========================================================================== */
.km-scope.km-scope .km-sig-hero {
	position: relative;
	padding: var(--km-hero-pad);
	background-color: var(--km-hero-bg, transparent);
	overflow: hidden;
}

.km-scope.km-scope .km-sig-hero__wave {
	position: absolute;
	top: var(--km-hero-wave-top);
	right: var(--km-hero-wave-right);
	width: var(--km-hero-wave-w);
	height: var(--km-hero-wave-h);
	z-index: 1;
	opacity: var(--km-hero-wave-opacity);
	color: var(--km-hero-wave-color);
	pointer-events: none;
}

.km-scope.km-scope .km-sig-hero__wave svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.km-scope.km-scope .km-sig-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--km-hero-gap-stack);
	align-items: center;
	position: relative;
	z-index: 2;
}

.km-scope.km-scope .km-sig-hero__content {
	position: relative;
	z-index: 2;
	text-align: var(--km-hero-text-align, left);
}

.km-scope.km-scope .km-sig-hero__desc {
	margin: 0 var(--km-hero-desc-mr, auto) var(--km-hero-desc-gap, 40px) var(--km-hero-desc-ml, 0);
	max-width: var(--km-hero-desc-max, 600px);
}

.km-scope.km-scope .km-sig-hero__actions {
	justify-content: var(--km-hero-justify, flex-start);
	margin-bottom: var(--km-hero-actions-gap, 40px);
}

.km-scope.km-scope .km-sig-hero__reassurance {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--km-hero-justify, flex-start);
	gap: var(--km-reassure-gap, 24px);
	padding-top: var(--km-reassure-pad, 32px);
	border-top: var(--km-reassure-rule-w, 1px) solid var(--km-reassure-rule, var(--km-border));
}

.km-scope.km-scope .km-sig-hero__reassurance-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--km-reassure-size, 14px);
	font-weight: 700;
	color: var(--km-reassure-color, var(--km-navy));
	text-transform: uppercase;
}

.km-scope.km-scope .km-sig-hero__reassurance-item .km-icon {
	font-size: var(--km-reassure-icon-size, 24px);
	width: var(--km-reassure-icon-size, 24px);
	height: var(--km-reassure-icon-size, 24px);
	color: var(--km-reassure-icon-color, var(--km-cyan));
}

.km-scope.km-scope .km-sig-hero__media {
	position: relative;
	z-index: 2;
	border-radius: var(--km-hero-img-radius);
	overflow: hidden;
	box-shadow: var(--km-hero-img-shadow, var(--km-shadow-card));
}

.km-scope.km-scope .km-sig-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--km-hero-img-min-h);
	object-fit: cover;
	object-position: var(--km-hero-img-pos, center center);
}

/* Reversed / stacked hero layouts */
.km-scope.km-scope .km-sig-hero--reverse .km-sig-hero__content { order: 2; }
.km-scope.km-scope .km-sig-hero--reverse .km-sig-hero__media { order: 1; }

.km-scope.km-scope .km-sig-hero--centered .km-sig-hero__grid { grid-template-columns: 1fr; }
.km-scope.km-scope .km-sig-hero--centered .km-sig-hero__content { text-align: center; }
.km-scope.km-scope .km-sig-hero--centered .km-sig-hero__desc { margin-left: auto; margin-right: auto; }
.km-scope.km-scope .km-sig-hero--centered .km-sig-hero__actions,
.km-scope.km-scope .km-sig-hero--centered .km-sig-hero__reassurance { justify-content: center; }

@media (min-width: 1025px) {
	.km-scope.km-scope .km-sig-hero__grid {
		grid-template-columns: var(--km-hero-cols);
		gap: var(--km-hero-gap);
	}

	.km-scope.km-scope .km-sig-hero--centered .km-sig-hero__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   B. WHAT'S INCLUDED
   ========================================================================== */
.km-scope.km-scope .km-sig-inc {
	position: relative;
	padding: var(--km-inc-pad, var(--km-sec-pad));
	background-color: var(--km-inc-bg, transparent);
}

.km-scope.km-scope .km-sig-inc__grid {
	display: grid;
	grid-template-columns: repeat(var(--km-card-cols), minmax(0, 1fr));
	gap: var(--km-card-gap);
}

.km-scope.km-scope .km-sig-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: var(--km-card-pad);
	background-color: var(--km-card-bg);
	border: var(--km-card-border-w) solid var(--km-card-border);
	border-radius: var(--km-card-radius);
	box-shadow: var(--km-card-shadow, none);
	transition: transform var(--km-transition), box-shadow var(--km-transition),
		border-color var(--km-transition), background-color var(--km-transition);
}

.km-scope.km-scope .km-sig-card:hover {
	transform: translateY(var(--km-card-lift));
	background-color: var(--km-card-bg-h);
	border-color: var(--km-card-border-h);
	box-shadow: var(--km-card-shadow-h, var(--km-shadow-hover));
}

.km-scope.km-scope .km-sig-card__icon {
	width: var(--km-card-icon-size);
	height: var(--km-card-icon-size);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--km-card-icon-gap);
	background-color: var(--km-card-icon-bg);
	border-radius: var(--km-card-icon-radius);
	color: var(--km-card-icon-color);
	font-size: var(--km-card-icon-glyph);
	transition: background-color var(--km-transition), color var(--km-transition);
}

.km-scope.km-scope .km-sig-card:hover .km-sig-card__icon {
	background-color: var(--km-card-icon-bg-h);
	color: var(--km-card-icon-color-h);
}

.km-scope.km-scope .km-sig-card__icon .km-icon,
.km-scope.km-scope .km-sig-card__icon svg,
.km-scope.km-scope .km-sig-card__icon i {
	width: var(--km-card-icon-glyph);
	height: var(--km-card-icon-glyph);
	font-size: var(--km-card-icon-glyph);
}

.km-scope.km-scope .km-sig-card__title {
	margin: 0 0 12px;
	color: var(--km-card-title-color, var(--km-navy));
}

.km-scope.km-scope .km-sig-card__desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--km-card-desc-color, var(--km-body));
}

.km-scope.km-scope .km-sig-card__num {
	position: absolute;
	z-index: -1;
	bottom: var(--km-card-num-bottom);
	right: var(--km-card-num-right);
	font-size: var(--km-card-num-size);
	font-weight: 700;
	line-height: 1;
	color: var(--km-card-num-color);
	opacity: var(--km-card-num-opacity);
	pointer-events: none;
	transition: var(--km-transition);
}

.km-scope.km-scope .km-sig-card:hover .km-sig-card__num {
	color: var(--km-card-num-color-h);
	opacity: var(--km-card-num-opacity-h);
	transform: scale(1.05);
}

/* ==========================================================================
   C. TIMELINE — TYPICAL MOVE STEPS
   ========================================================================== */
.km-scope.km-scope .km-sig-steps {
	position: relative;
	padding: var(--km-steps-pad);
	background-color: var(--km-steps-bg, var(--km-pale-blue));
	border-top: var(--km-steps-rule-w, 1px) solid var(--km-steps-rule, var(--km-border));
}

.km-scope.km-scope .km-sig-steps .km-sec-head {
	--km-sec-head-gap: 80px;
}

.km-scope.km-scope .km-sig-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.km-scope.km-scope .km-sig-step {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.km-scope.km-scope .km-sig-step__media {
	position: relative;
	width: 100%;
	max-width: var(--km-step-media-max);
	aspect-ratio: var(--km-step-media-ratio, 1 / 1);
	margin-bottom: 24px;
	background-color: var(--km-step-media-bg);
	border-radius: var(--km-step-media-radius);
	box-shadow: var(--km-step-media-shadow, var(--km-shadow-card));
	overflow: visible;
}

.km-scope.km-scope .km-sig-step__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--km-step-img-pos, center center);
	border-radius: var(--km-step-media-radius);
	display: block;
}

.km-scope.km-scope .km-sig-step__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: var(--km-step-ph-bg);
	border: 1px dashed var(--km-step-ph-border);
	border-radius: var(--km-step-media-radius);
	color: var(--km-step-ph-color);
	text-align: center;
}

.km-scope.km-scope .km-sig-step__placeholder .km-icon {
	width: var(--km-step-ph-icon, 40px);
	height: var(--km-step-ph-icon, 40px);
	font-size: var(--km-step-ph-icon, 40px);
	margin-bottom: 12px;
	opacity: 0.5;
}

.km-scope.km-scope .km-sig-step__placeholder span {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
}

.km-scope.km-scope .km-sig-step__badge {
	position: absolute;
	z-index: 3;
	bottom: var(--km-step-badge-offset);
	left: 50%;
	transform: translateX(-50%);
	width: var(--km-step-badge-size);
	height: var(--km-step-badge-size);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--km-step-badge-bg);
	color: var(--km-step-badge-color);
	border: var(--km-step-badge-ring-w) solid var(--km-step-badge-ring);
	border-radius: 50%;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	box-shadow: var(--km-step-badge-shadow, 0 4px 12px rgba(53, 183, 243, 0.4));
}

.km-scope.km-scope .km-sig-step__content {
	padding-top: 16px;
}

.km-scope.km-scope .km-sig-step__title {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--km-step-title-color, var(--km-navy));
}

.km-scope.km-scope .km-sig-step__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--km-step-desc-color, var(--km-body));
}

@media (min-width: 768px) {
	.km-scope.km-scope .km-sig-timeline {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 32px;
	}

	.km-scope.km-scope .km-sig-step {
		width: calc(50% - 16px);
	}
}

@media (min-width: 1025px) {
	.km-scope.km-scope .km-sig-timeline {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: var(--km-step-gap);
	}

	.km-scope.km-scope .km-sig-step {
		width: 100%;
		flex: 1;
	}

	.km-scope.km-scope .km-sig-timeline--lined::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: var(--km-step-line-top);
		left: var(--km-step-line-inset);
		right: var(--km-step-line-inset);
		height: var(--km-step-line-size);
		background-color: var(--km-step-line-color);
	}
}

/* ==========================================================================
   D. CLOSING CTA
   ========================================================================== */
.km-scope.km-scope .km-sig-cta {
	padding: var(--km-cta-sec-pad, var(--km-sec-pad));
	background-color: var(--km-cta-sec-bg, transparent);
}

.km-scope.km-scope .km-sig-cta__card {
	position: relative;
	overflow: hidden;
	padding: var(--km-cta-pad);
	text-align: var(--km-cta-align, center);
	background-color: var(--km-cta-bg);
	border-radius: var(--km-cta-radius);
	box-shadow: var(--km-cta-shadow);
}

.km-scope.km-scope .km-sig-cta__deco {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: var(--km-cta-deco-opacity);
	color: var(--km-cta-deco-color);
	pointer-events: none;
}

.km-scope.km-scope .km-sig-cta__deco svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.km-scope.km-scope .km-sig-cta__content {
	position: relative;
	z-index: 2;
	max-width: var(--km-cta-content-max, 680px);
	margin: 0 auto;
}

.km-scope.km-scope .km-sig-cta__title {
	margin: 0 0 24px;
	color: var(--km-cta-title-color, var(--km-white));
}

.km-scope.km-scope .km-sig-cta__desc {
	margin: 0 0 40px;
	color: var(--km-cta-desc-color, var(--km-pale-blue));
	opacity: var(--km-cta-desc-opacity, 0.9);
}

.km-scope.km-scope .km-sig-cta__actions {
	justify-content: var(--km-cta-justify, center);
	margin-bottom: var(--km-cta-actions-gap, 24px);
}

.km-scope.km-scope .km-sig-cta__micro {
	display: inline;
	font-size: var(--km-cta-micro-size, 13px);
	color: var(--km-cta-micro-color, var(--km-border));
	opacity: var(--km-cta-micro-opacity, 0.6);
}

/* ==========================================================================
   RESPONSIVE FALLBACKS  (Elementor responsive controls override these)
   ========================================================================== */
@media (max-width: 1024px) {
	.km-scope.km-scope.km-w-sig {
		--km-card-cols: 2;
		--km-sec-pad: 72px 0;
		--km-hero-pad: 72px 0 64px;
		--km-steps-pad: 80px 0;
		--km-cta-pad: 64px 24px;
	}
}

@media (max-width: 767px) {
	.km-scope.km-scope.km-w-sig {
		--km-card-cols: 1;
		--km-sec-pad: 56px 0;
		--km-hero-pad: 56px 0 48px;
		--km-steps-pad: 64px 0;
		--km-cta-pad: 56px 20px;
		--km-card-pad: 40px 28px 32px;
		--km-hero-img-min-h: 320px;
	}

	.km-scope.km-scope .km-sig-hero__reassurance {
		flex-direction: column;
		align-items: var(--km-hero-items, flex-start);
		gap: 14px;
	}

	.km-scope.km-scope .km-sig-hero--centered .km-sig-hero__reassurance {
		align-items: center;
	}

	.km-scope.km-scope .km-sig-steps .km-sec-head {
		--km-sec-head-gap: 56px;
	}
}

@media (max-width: 575px) {
	.km-scope.km-scope .km-sig-hero__actions,
	.km-scope.km-scope .km-sig-cta__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.km-scope.km-scope .km-sig-hero__actions .km-btn,
	.km-scope.km-scope .km-sig-cta__actions .km-btn {
		width: 100%;
	}
}