﻿/* Installation works: show the existing lead photo as the first page cover. */
.kiddee-installation-cover {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	/* Match the shared cover ratio so the hero does not jump when covers.css loads. */
	aspect-ratio: 16 / 6.25;
}

/* Keep the first-paint geometry identical to the shared responsive cover rules. */
@media (max-width: 63.99rem) {
	.kiddee-installation-cover {
		aspect-ratio: 16 / 7;
	}
}

@media (max-width: 47.99rem) {
	.kiddee-installation-cover {
		aspect-ratio: 4 / 3;
	}
}

.kiddee-installation-cover::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--kv2-color-text) 62%, transparent) 0%,
		color-mix(in srgb, var(--kv2-color-text) 44%, transparent) 48%,
		color-mix(in srgb, var(--kv2-color-text) 18%, transparent) 100%
	);
	content: "";
	pointer-events: none;
}

.kiddee-installation-cover__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}

.kiddee-installation-cover__content {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: clamp(24px, 5vw, 96px);
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	color: var(--kv2-color-surface);
	text-align: left;
}

.kiddee-installation-cover__eyebrow {
	margin: 0 0 var(--kv2-space-4);
	color: var(--kv2-color-surface);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.kiddee-installation-cover__title {
	max-width: 760px;
	margin: 0;
	color: var(--kv2-color-surface);
	font-size: var(--kv2-type-display-xl-size);
	font-weight: var(--kv2-type-display-xl-weight);
	line-height: var(--kv2-type-display-xl-line);
	text-shadow: 0 3px 18px color-mix(in srgb, var(--kv2-color-text) 34%, transparent);
}

.kiddee-installation-stats-intro {
	padding: clamp(24px, 3vw, 40px) var(--kv2-gutter) clamp(12px, 2vw, 24px);

}

.kiddee-installation-stats-intro p {





}

/* Installation data uses the same black information tone as the homepage. */
body.kiddee-page-installation-works .kiddee-installation-stats-intro p,
body.kiddee-page-installation-works #page .kiddee-bind-c3e0549 :is(
    .elementor-heading-title,
    p
) {
    color: var(--kv2-airbnb-ink) ;
}

body.kiddee-page-installation-works #page :is(
    .kiddee-bind-771cec74,
    .kiddee-bind-311e57dc
) :is(
    .elementor-icon-box-title,
    .elementor-icon-box-description
) {
    color: var(--kv2-airbnb-ink) ;
}

/* The page title is now part of the cover; prevent the original block repeating. */
body.kiddee-page-installation-works #page .kiddee-bind-382a7933 {
	display: none;
}

/* Elementor pulled the stats section 26px over the cover, creating a false overflow strip. */
body.kiddee-page-installation-works #page .kiddee-bind-c3e0549 {
	--margin-top: 0;
	margin-top: 0;
}

body.kiddee-page-installation-works #page .kiddee-bind-c3e0549 > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.5vw, 20px);
	align-items: stretch;
}

body.kiddee-page-installation-works #page .kiddee-bind-c3e0549 > .e-con-inner > :is(
	.kiddee-bind-b8fab97,
	.kiddee-bind-3d5a8a6,
	.kiddee-bind-af70b8a,
	.kiddee-bind-15687ab
) {
	--width: 100%;
	--gap: 6px;
	--margin-top: 0;
	--margin-right: 0;
	--margin-bottom: 0;
	--margin-left: 0;
	--justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 112px;
	margin: 0;
}

/* Keep the statistic and its caption visually separate; Elementor used negative margins here. */
body.kiddee-page-installation-works #page :is(
	.kiddee-bind-b15434b,
	.kiddee-bind-59169f5,
	.kiddee-bind-526617a,
	.kiddee-bind-6b88804,
	.kiddee-bind-0721ce4,
	.kiddee-bind-9ac0573,
	.kiddee-bind-4e19adc,
	.kiddee-bind-6601824
) {
	margin: 0;
}

body.kiddee-page-installation-works #page :is(
	.kiddee-bind-b15434b,
	.kiddee-bind-59169f5,
	.kiddee-bind-526617a,
	.kiddee-bind-6b88804
) .elementor-heading-title {
	margin: 0;
	line-height: var(--kv2-type-title-md-line);
}

body.kiddee-page-installation-works #page :is(
	.kiddee-bind-0721ce4,
	.kiddee-bind-9ac0573,
	.kiddee-bind-4e19adc,
	.kiddee-bind-6601824
) :is(p, .elementor-heading-title) {
	margin: 0;
	color: var(--kv2-color-text);
	font-family: var(--font-body);
	font-size: var(--kv2-type-title-md-size);
	font-weight: var(--kv2-type-title-md-weight);
	line-height: var(--kv2-type-title-md-line);
	letter-spacing: 0;
}

@media (max-width: 63.99rem) {
	body.kiddee-page-installation-works #page .kiddee-bind-c3e0549 > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Remove the old copy of the photo; retain the section's text content. */
body.kiddee-page-installation-works #page .kiddee-bind-5e966a54 {
	display: none;
}

body.kiddee-page-installation-works #page .kiddee-bind-32485e67 {
	--min-height: 0;
	--justify-content: center;
	--align-items: center;
	--margin-bottom: 0;
	--padding-bottom: clamp(24px, 3vw, 40px);
	position: relative;
	overflow: hidden;
	min-height: 0;
	margin: 0 ;
	padding: clamp(64px, 8vw, 112px) 0 clamp(72px, 9vw, 128px) ;
	background:
		radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--kv2-color-accent-yellow) 18%, transparent) 0 10%, transparent 29%),
		linear-gradient(180deg, var(--kv2-color-surface) 0%, var(--kv2-color-background) 100%) ;
}

body.kiddee-page-installation-works #page .kiddee-bind-771cec74 {
	--width: min(100%, 760px);
	width: min(100%, 760px);
	align-self: center;
}

