/* Homepage hero (prototype: Home.dc.html, section "Hero") */
.eba-hh { position: relative; display: flex; align-items: center; background: var(--eba-donker); overflow: hidden; }
.eba-hh__media { position: absolute; inset: 0; background: var(--eba-donker); }
.eba-hh__media .eba-foto img, .eba-hh__video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.eba-hh__video { background: transparent; }

/* While no video plays (phones, reduced data, or the video failed): the photo moves slowly. */
@keyframes eba-kenburns {
	from { transform: scale(1.02) translate(0, 0); }
	to { transform: scale(1.14) translate(-2.5%, -2%); }
}
.eba-hh:not(.eba-hh--speelt) .eba-hh__media .eba-foto img { animation: eba-kenburns 22s ease-in-out infinite alternate; }
.eba-stil .eba-hh__media .eba-foto img { animation-play-state: paused; }


.eba-hh__pauze {
	position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .35);
	background: color-mix(in srgb, var(--eba-zwart) 55%, transparent); color: #fff; font: 600 0.8125rem var(--eba-font-tekst); cursor: pointer;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.eba-hh__pauze:hover { background: color-mix(in srgb, var(--eba-zwart) 80%, transparent); }
/* Desktop: dark navy on the left 3/5 of the screen, fully transparent from 3/5 on (user request) */
.eba-hh__verloop {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--eba-donker) 92%, transparent) 0%, color-mix(in srgb, var(--eba-donker) 82%, transparent) 35%, color-mix(in srgb, var(--eba-donker) 45%, transparent) 50%, transparent 60%, transparent 100%);
}
/* Text that runs over the bright part of the photo keeps a soft shadow */
.eba-hh__titel, .eba-hh__intro, .eba-hh__voordeel-tekst, .eba-hh__realaantal { text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.eba-hh__titel span { text-shadow: none; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35)); }
.eba-hh__binnen {
	position: relative; max-width: var(--eba-max); width: 100%; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--eba-goot);
	box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22.5rem), 1fr));
	gap: 40px 56px; align-items: center;
}
.eba-hh__tekst { display: grid; gap: 24px; color: #fff; max-width: 640px; }
@media (min-width: 64em) {
	.eba-hh__binnen { grid-template-columns: minmax(0, 1fr) minmax(0, 27.5rem); gap: 40px 48px; }
}

/* Scores: Google and Trustlocal side by side in one glass pill */
.eba-hh__scores {
	display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; width: fit-content;
	padding: 10px 22px 10px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.eba-hh__score { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.eba-hh .eba-hh__score:hover { color: #fff; }
.eba-hh__score:hover .eba-hh__score-sub { color: #fff; }
.eba-hh__score-logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.eba-hh__score-logo--google { border-radius: 50%; background: #fff; }
.eba-hh__score-logo img { display: block; }
.eba-hh__score-tekst { display: grid; gap: 1px; }
.eba-hh__score-cijfer { font: 700 1.0625rem/1.2 var(--eba-font-kop); white-space: nowrap; }
.eba-hh__score-cijfer small { font-size: .78em; font-weight: 600; }
.eba-hh__score-cijfer .eba-sterren { margin-left: 4px; font-size: 0.875rem; }
.eba-hh__score-sub { font-size: 0.8125rem; color: var(--eba-op-donker-zacht); white-space: nowrap; }
.eba-hh__score-streep { width: 1px; align-self: stretch; margin: 4px 0; background: rgba(255, 255, 255, .2); }
/* Phones: both scores side by side in one rounded box (sub line may wrap) */
@media (max-width: 29.999em) {
	.eba-hh__scores { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 12px 8px 8px; border-radius: 18px; }
	.eba-hh__score { gap: 8px; min-width: 0; }
	.eba-hh__score-logo { width: 32px; height: 32px; }
	.eba-hh__score-logo img { width: 19px; height: 19px; }
	.eba-hh__score-logo:not(.eba-hh__score-logo--google) img { width: 30px; height: 30px; }
	.eba-hh__score-cijfer { font-size: 1rem; }
	.eba-hh__score-cijfer .eba-sterren { display: none; }
	.eba-hh__score-sub { font-size: 0.75rem; white-space: normal; line-height: 1.3; }
}

.eba-hh__titel {
	margin: 0; font-family: var(--eba-font-kop); font-weight: 800; font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.02; letter-spacing: -.025em; text-wrap: balance;
}
.eba-hh__titel span {
	display: block; color: var(--eba-lichtblauw);
	background: linear-gradient(95deg, color-mix(in srgb, var(--eba-primair) 72%, #fff) 0%, var(--eba-lichtblauw) 60%, color-mix(in srgb, var(--eba-lichtblauw) 70%, #fff) 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.eba-hh__intro {
	margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; color: var(--eba-op-donker);
	max-width: 520px; text-wrap: pretty;
}
.eba-hh__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.eba-hh__chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 20px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.875rem; font-weight: 500; color: #fff;
}
.eba-hh__chip span { color: var(--eba-lichtblauw); font-weight: 700; }

/* Benefits with a round line icon */
.eba-hh__voordelen { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 22px; }
.eba-hh__voordeel { display: flex; align-items: center; gap: 12px; }
.eba-hh__voordeel-icoon {
	width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .32); background: color-mix(in srgb, var(--eba-primair) 16%, transparent);
}
.eba-hh__voordeel-tekst { display: grid; font-size: 0.875rem; line-height: 1.35; color: var(--eba-op-donker); white-space: nowrap; }
.eba-hh__voordeel-tekst strong { font-weight: 600; color: #fff; }
@media (max-width: 39.999em) {
	.eba-hh__voordelen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.eba-hh__voordeel { flex-direction: column; text-align: center; gap: 8px; }
	.eba-hh__voordeel-icoon { width: 46px; height: 46px; }
	.eba-hh__voordeel-tekst { font-size: 0.8125rem; white-space: normal; }
}

/* "Bekijk onze realisaties" + project photos + number */
.eba-hh__realisaties { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 8px; }
.eba-hh__realbewijs { display: flex; align-items: center; gap: 14px; }
.eba-hh__realknop {
	display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: 999px;
	border: 1.5px solid color-mix(in srgb, var(--eba-primair) 85%, #fff); background: color-mix(in srgb, var(--eba-primair) 18%, transparent);
	color: #fff; text-decoration: none; font: 600 1rem var(--eba-font-tekst); transition: background-color .2s ease;
}
.eba-hh .eba-hh__realknop:hover { background: var(--eba-primair); color: #fff; }
.eba-hh__realfotos { display: flex; }
.eba-hh__realfoto {
	width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block;
	border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.eba-hh__realfoto + .eba-hh__realfoto { margin-left: -13px; }
.eba-hh__realaantal { margin: 0; display: grid; font-size: 0.875rem; line-height: 1.3; color: var(--eba-op-donker); }
.eba-hh__realaantal strong { font: 700 1.25rem var(--eba-font-kop); color: #fff; }
@media (max-width: 29.999em) {
	.eba-hh__realknop { width: 100%; justify-content: center; }
}
.eba-hh__bel {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.eba-hh__belknop {
	display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px 0 8px; border-radius: 28px;
	background: #fff; color: var(--eba-tekst); text-decoration: none; font-weight: 700; font-size: 1rem;
}
.eba-hh .eba-hh__belknop:hover { background: var(--eba-tint); color: var(--eba-tekst); }
.eba-hh__belicoon {
	width: 40px; height: 40px; border-radius: 50%; background: var(--eba-primair); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
}
.eba-hh__reactie { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--eba-op-donker); }
.eba-hh__groen {
	width: 10px; height: 10px; border-radius: 50%; background: var(--eba-groen);
	box-shadow: 0 0 0 4px rgba(52, 199, 123, .2); display: inline-block;
}
.eba-hh__formulier { justify-self: end; max-width: 460px; width: 100%; }

/* Fallback form card (prototype hero form, step 1) */
.eba-hf {
	background: #fff; color: var(--eba-tekst); border-radius: 10px; padding: clamp(1.375rem, 2.6vw, 2rem);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35); display: grid; gap: 18px; width: 100%; box-sizing: border-box;
}
.eba-hf__stap { display: grid; gap: 16px; }
.eba-hf__kop { display: grid; gap: 4px; }
.eba-hf__titel { margin: 0; font: 700 1.375rem/1.25 var(--eba-font-kop); }
.eba-hf__uitleg { margin: 0; font-size: 0.9375rem; color: var(--eba-gedempt); }
.eba-hf__voortgang { display: grid; gap: 8px; }
.eba-hf__stapinfo { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; color: var(--eba-gedempt); }
.eba-hf__balk { height: 4px; border-radius: 2px; background: var(--eba-tint); overflow: hidden; }
.eba-hf__vulling { height: 100%; width: 50%; background: var(--eba-primair); border-radius: 2px; }
.eba-hf__form { display: grid; gap: 16px; }
.eba-hf__veld { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; min-width: 0; }
.eba-hf__veld input, .eba-hf__veld select {
	width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 12px; border: 1px solid var(--eba-invoer-rand);
	border-radius: 6px; font-size: 1rem; background: #fff; color: var(--eba-tekst); font-weight: 400;
}
.eba-hf__rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; }
.eba-hf__knop {
	min-height: 52px; background: var(--eba-primair); color: #fff; border: 0; border-radius: 6px;
	font: 600 1rem var(--eba-font-tekst); cursor: pointer;
}
.eba-hf__knop:hover { background: var(--eba-primair-hover); }
.eba-hf__privacy { margin: 0; font-size: 0.8125rem; color: var(--eba-gedempt); }
.eba-hf__privacy a, .eba-hf__privacy a:hover { color: var(--eba-link); }

/* Novax compact form in the hero (3 steps): the postcode is alone in step 1 and
   takes the full width; phone sits next to e-mail in step 3. Novax styles
   inline, hence the !important. */
.eba-hh__formulier div:has(> #nxb-offerte-postcode) { grid-column: 1 / -1 !important; }
.eba-hh__formulier div:has(> #nxb-offerte-phone) { grid-column: auto !important; }
.eba-hh__formulier #nxb-offerte-postcode, .eba-hh__formulier #nxb-offerte-phone { width: 100% !important; max-width: none !important; box-sizing: border-box; }

/* Phones and small tablets (form under the text): the video (or moving photo)
   fills the first screen behind the text and fades into the dark background;
   the gradient keeps the text readable on any frame. */
@media (max-width: 51.999em) {
	.eba-hh__media, .eba-hh__verloop { bottom: auto; height: calc(100vh - 4.5rem); height: calc(100svh - 4.5rem); max-height: 100%; }
	.eba-hh__verloop {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--eba-donker) 25%, transparent) 0%,
			color-mix(in srgb, var(--eba-donker) 45%, transparent) 14%,
			color-mix(in srgb, var(--eba-donker) 72%, transparent) 32%,
			color-mix(in srgb, var(--eba-donker) 80%, transparent) 60%,
			color-mix(in srgb, var(--eba-donker) 90%, transparent) 85%,
			var(--eba-donker) 100%);
	}
	/* Scores close under the header (user request); pause button at the bottom of the hero, below the form */
	.eba-hh__binnen { padding-top: 1.5rem; padding-bottom: 5.5rem; }
	/* The form follows right after the text, so its title is readable on the first screen (user request) */
	.eba-hh__binnen { row-gap: 64px; }
	.eba-hh__tekst { gap: 16px; }
	/* Short phones (iPhone SE and the like): a smaller title so the form title still makes the first screen */
	@media (max-height: 43.75em) {
		.eba-hh__titel { font-size: 2.125rem; }
		.eba-hh__intro { font-size: 1rem; }
	}
	.eba-hh__titel, .eba-hh__intro, .eba-hh__reactie { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
}

/* Postcode and phone fields with an icon */
.eba-hh__formulier #nxb-offerte-postcode, .eba-hh__formulier #nxb-offerte-phone {
	padding-left: 42px !important; background-repeat: no-repeat !important; background-position: 14px center !important; background-size: 18px !important;
}
.eba-hh__formulier #nxb-offerte-postcode { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") !important; }
.eba-hh__formulier #nxb-offerte-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") !important; }
/* Privacy line with a lock */
.eba-hh__formulier form > p:has(a[href*="privacy"]) {
	position: relative; padding-left: 26px !important;
	background: no-repeat left 2px / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

@media (max-width: 51.999em) { .eba-hh__titel span { text-shadow: none; } }

/* Phones and small tablets: everything in the hero text column centred (user request) */
@media (max-width: 51.999em) {
	.eba-hh__tekst { justify-items: center; text-align: center; margin-inline: auto; }
	.eba-hh__intro { margin-inline: auto; }
	.eba-hh__chips, .eba-hh__voordelen, .eba-hh__realisaties, .eba-hh__bel { justify-content: center; }
	.eba-hh__voordelen, .eba-hh__realisaties { justify-self: stretch; }
	.eba-hh__realbewijs { justify-content: center; }
	.eba-hh__score-tekst { text-align: left; }
}