/*!
 * Kekeh Moving — "Contact" 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-con {
	--km-body: #5F737D;
	--km-cyan-hover: #43B9F6;
	--km-cyan-soft: rgba(53, 183, 243, 0.1);
	--km-navy-deep: #032A3D;
	--km-radius-sm: 12px;
	--km-radius-md: 20px;
	--km-radius-lg: 26px;
	--km-base-leading: 1.75;
	--km-heading-leading: 1.1;
	--km-heading-tracking: normal;
	--km-eyebrow-tracking: 0.5em;
	--km-eyebrow-gap: 24px;

	/* Section rhythm */
	--km-hero-pad: 96px 24px 64px;
	--km-cards-pad: 0 24px 64px;
	--km-reassure-pad: 0 24px;
	--km-reassure-mb: 96px;
	--km-areas-pad: 96px 24px;
	--km-cta-pad: 96px 24px;

	/* Contact cards */
	--km-ccard-cols: 2;
	--km-ccard-gap: 32px;
	--km-ccard-bg: var(--km-white);
	--km-ccard-border: var(--km-border);
	--km-ccard-border-h: var(--km-cyan-soft);
	--km-ccard-border-w: 1px;
	--km-ccard-radius: var(--km-radius-lg);
	--km-ccard-pad: 48px 40px;
	--km-ccard-shadow: 0 4px 24px rgba(6, 35, 51, 0.04);
	--km-ccard-shadow-h: 0 12px 32px rgba(6, 35, 51, 0.08);
	--km-ccard-lift: -6px;
	--km-ccard-icon-size: 72px;
	--km-ccard-icon-radius: 50%;
	--km-ccard-icon-bg: var(--km-pale-blue);
	--km-ccard-icon-bg-h: var(--km-cyan-soft);
	--km-ccard-icon-color: var(--km-cyan);
	--km-ccard-icon-color-h: var(--km-cyan);
	--km-ccard-icon-glyph: 32px;
	--km-ccard-icon-gap: 32px;
	--km-ccard-label-color: var(--km-orange);
	--km-ccard-title-color: var(--km-navy);
	--km-ccard-title-color-h: var(--km-cyan);

	/* Reassurance strip */
	--km-strip-gap-y: 16px;
	--km-strip-gap-x: 40px;
	--km-strip-lead-color: var(--km-navy);
	--km-strip-color: var(--km-body);
	--km-strip-icon-color: var(--km-cyan);
	--km-strip-icon-size: 20px;

	/* Areas */
	--km-areas-bg: var(--km-pale-blue);
	--km-areas-map-opacity: 0.15;
	--km-loc-cols: 3;
	--km-loc-gap: 20px;
	--km-loc-bg: var(--km-white);
	--km-loc-bg-h: var(--km-white);
	--km-loc-border: var(--km-border);
	--km-loc-border-h: var(--km-cyan);
	--km-loc-radius: var(--km-radius-sm);
	--km-loc-pad: 20px 24px;
	--km-loc-color: var(--km-navy);
	--km-loc-color-h: var(--km-cyan);
	--km-loc-icon-color: var(--km-cyan);
	--km-loc-icon-size: 24px;
	--km-loc-arrow-color: var(--km-border);
	--km-loc-arrow-color-h: var(--km-cyan);
	--km-loc-shadow-h: 0 4px 16px rgba(53, 183, 243, 0.15);
	--km-loc-lift: -2px;

	/* Closing CTA */
	--km-cta-bg: var(--km-navy-deep);
	--km-cta-radius: var(--km-radius-lg);
	--km-cta-box-pad: 80px 40px;
	--km-cta-shadow: 0 4px 24px rgba(6, 35, 51, 0.04);
	--km-cta-glow-1: rgba(53, 183, 243, 0.15);
	--km-cta-glow-2: rgba(53, 183, 243, 0.1);

	/* Section surfaces */
	--km-con-bg: var(--km-white);
	--km-cta-sec-bg: transparent;

	--km-btn-primary-bg: var(--km-cyan);
	--km-btn-primary-bg-h: var(--km-cyan-hover);
	--km-btn-primary-border: var(--km-cyan);
	--km-btn-primary-border-h: var(--km-cyan-hover);
	--km-btn-primary-shadow-h: none;
	--km-btn-white-border: rgba(255, 255, 255, 0.4);

	background-color: var(--km-con-bg, transparent);
	overflow: hidden;
}

.km-scope.km-scope.km-w-con .km-btn {
	letter-spacing: 0.05em;
}

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

.km-scope.km-scope .km-con-h2 {
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.1;
	margin: 0 0 20px;
}

/* ==========================================================================
   A. HERO
   ========================================================================== */
.km-scope.km-scope .km-con-hero {
	position: relative;
	max-width: var(--km-hero-max, 800px);
	margin: 0 auto;
	padding: var(--km-hero-pad);
	text-align: center;
}

.km-scope.km-scope .km-con-hero__desc {
	margin: 0 auto;
	max-width: var(--km-hero-desc-max, 650px);
	font-size: clamp(16px, 2vw, 18px);
	line-height: 1.75;
	color: var(--km-hero-desc-color, var(--km-body));
}

/* ==========================================================================
   B. DIRECT CONTACT CARDS
   ========================================================================== */
.km-scope.km-scope .km-con-cards {
	position: relative;
	z-index: 2;
	max-width: var(--km-container);
	margin: 0 auto;
	padding: var(--km-cards-pad);
	display: grid;
	grid-template-columns: repeat(var(--km-ccard-cols), minmax(0, 1fr));
	gap: var(--km-ccard-gap);
}

.km-scope.km-scope .km-con-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--km-ccard-pad);
	background-color: var(--km-ccard-bg);
	border: var(--km-ccard-border-w) solid var(--km-ccard-border);
	border-radius: var(--km-ccard-radius);
	box-shadow: var(--km-ccard-shadow);
	transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}

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

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

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

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

.km-scope.km-scope .km-con-card__label {
	display: block;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--km-ccard-label-color);
}

.km-scope.km-scope .km-con-card__title {
	display: block;
	margin: 0 0 16px;
	font-size: clamp(24px, 3vw, 32px);
	color: var(--km-ccard-title-color);
}

.km-scope.km-scope a.km-con-card__title:hover,
.km-scope.km-scope a.km-con-card__title:focus {
	color: var(--km-ccard-title-color-h);
}

.km-scope.km-scope .km-con-card__desc {
	margin: 0 0 32px;
	flex-grow: 1;
	color: var(--km-ccard-desc-color, var(--km-body));
}

.km-scope.km-scope .km-con-card > .km-btn {
	margin-top: auto;
}

/* ==========================================================================
   C. REASSURANCE STRIP
   ========================================================================== */
.km-scope.km-scope .km-con-strip {
	max-width: var(--km-container);
	margin: 0 auto var(--km-reassure-mb);
	padding: var(--km-reassure-pad);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--km-strip-align, center);
	gap: var(--km-strip-gap-y) var(--km-strip-gap-x);
}

.km-scope.km-scope .km-con-strip__lead {
	font-weight: 700;
	font-style: italic;
	color: var(--km-strip-lead-color);
}

.km-scope.km-scope .km-con-strip__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--km-strip-color);
}

.km-scope.km-scope .km-con-strip__item .km-icon {
	width: var(--km-strip-icon-size);
	height: var(--km-strip-icon-size);
	font-size: var(--km-strip-icon-size);
	color: var(--km-strip-icon-color);
}

/* ==========================================================================
   D. AREAS WE SERVE
   --------------------------------------------------------------------------
   Lives in kekeh-areas.css, shared with the standalone "Kekeh Service Areas"
   widget. This stylesheet declares it as a dependency, so the rules load with
   it. Only the tokens above (--km-areas-*, --km-loc-*) are set here.
   ========================================================================== */

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

.km-scope.km-scope .km-con-cta__box {
	position: relative;
	overflow: hidden;
	max-width: var(--km-container);
	margin: 0 auto;
	padding: var(--km-cta-box-pad);
	text-align: var(--km-con-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-con-cta__glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.km-scope.km-scope .km-con-cta__glow--a {
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--km-cta-glow-1) 0%, rgba(53, 183, 243, 0) 70%);
}

.km-scope.km-scope .km-con-cta__glow--b {
	bottom: -50%;
	left: -10%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, var(--km-cta-glow-2) 0%, rgba(53, 183, 243, 0) 70%);
}

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

.km-scope.km-scope .km-con-cta__title {
	margin: 0 0 24px;
	font-size: clamp(32px, 4vw, 42px);
	line-height: 1.1;
	color: var(--km-cta-title-color, var(--km-white));
}

.km-scope.km-scope .km-con-cta__desc {
	margin: 0 0 40px;
	font-size: 18px;
	line-height: 1.75;
	color: var(--km-cta-desc-color, var(--km-pale-blue));
}

.km-scope.km-scope .km-con-cta__actions {
	justify-content: var(--km-con-cta-justify, center);
	align-items: center;
	gap: var(--km-cta-actions-gap, 20px);
}

/* ==========================================================================
   RESPONSIVE FALLBACKS  (Elementor responsive controls override these)
   ========================================================================== */
@media (max-width: 1024px) {
	.km-scope.km-scope.km-w-con {
		--km-loc-cols: 2;
	}
}

@media (max-width: 767px) {
	.km-scope.km-scope.km-w-con {
		--km-ccard-cols: 1;
		--km-hero-pad: 64px 20px 40px;
		--km-cards-pad: 0 20px 48px;
		--km-ccard-pad: 40px 32px;
		--km-reassure-mb: 64px;
		--km-reassure-pad: 0 20px;
		--km-areas-pad: 64px 20px;
		--km-cta-pad: 64px 20px;
		--km-cta-box-pad: 56px 24px;
		--km-cta-radius: var(--km-radius-md);
		--km-strip-gap-x: 16px;
	}

	.km-scope.km-scope .km-con-strip {
		flex-direction: column;
		align-items: var(--km-strip-items, flex-start);
		justify-content: flex-start;
	}
}

@media (max-width: 575px) {
	.km-scope.km-scope.km-w-con {
		--km-loc-cols: 1;
	}

	.km-scope.km-scope .km-con-cta__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.km-scope.km-scope .km-con-cta__actions .km-btn {
		width: 100%;
	}
}