/* Homepage hero: a row of real-service highlight cards floating over the
   seam between the banner and the next section, similar to the reference
   layout. The 3 rotating banners are flat JPGs (text baked in), so we can't
   crop them taller without cutting off the artwork.

   The card row is taken OUT of normal flow (position:absolute) on purpose —
   an earlier version used negative margins to pull it up/down, but that
   still added net extra height to the hero section, leaving a sliver of the
   page's own background visible beside/around the cards before the next
   section started. With absolute positioning the hero section is exactly
   the image's height, the next section starts immediately after with zero
   gap, and the cards simply float on top of that seam. */

body.home .elementor-2 .elementor-element-a2d3391 {
	position: relative;
	padding-bottom: 0;
	overflow: visible;
}

body.home .elementor-2 .elementor-element-a2d3391 .elementor-widget-image-carousel {
	position: relative;
	z-index: 1;
}

/* The slide dots default to the very bottom of the image, which the
   floating service cards below now sit on top of — lift them clear. */
body.home .elementor-2 .elementor-element-4f3cc90 .swiper-pagination {
	bottom: 130px !important;
}

.kha-hero-services {
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: -46px;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 24px);
	width: min(1240px, calc(100% - 48px));
	transform: translateX(-50%);
}

.kha-hero-services__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px 18px;
	border: 1px solid #eee2cd;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 48px -30px rgba(72, 42, 9, .28);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

.kha-hero-services__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 52px -26px rgba(72, 42, 9, .34);
}

.kha-hero-services__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fbf3df;
	color: #9b6a27;
}

.kha-hero-services__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kha-hero-services__title {
	margin: 0;
	color: #302820;
	font-family: "Manrope", sans-serif;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}

.kha-hero-services__desc {
	margin: 0;
	color: #6d655d;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	line-height: 1.55;
}

/* Below 1100px the grid wraps to 2+ rows, tall enough that floating it over
   the seam would cover the next section's own content (its heading, video
   thumbnail, etc). Normal flow instead — the story section simply gets
   pushed down to start right after the cards, still with no dead gap. */
@media (max-width: 1100px) {
	.kha-hero-services {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: -28px auto 0;
	}
}

@media (max-width: 700px) {
	.kha-hero-services {
		grid-template-columns: minmax(0, 1fr);
		width: calc(100% - 32px);
		margin-top: -14px;
		gap: 12px;
	}
	.kha-hero-services__item { padding: 18px 16px; }
}