/* ============================
   SITE.CSS – WILMAX AIRCO LANDER
   FWRD © 2025
============================ */

/* ---- Local helpers ---- */
:root {
	--radius-card: 16px;
	--radius-pill: 999px;
	--shadow-soft: 0 0 12px rgba(0, 0, 0, .05);
	--shadow-float: 0 10px 30px rgba(0, 0, 0, .08);
}

/* ============================
   UTILITIES & WRAPPERS
============================ */
.img--box {
	border-radius: var(--radius-card);
	overflow: hidden
}

.img--box img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.logo--box img {
	height: 100%;
	width: auto;
	object-fit: contain
}

.wrapper--card {
	background: var(--COLOR-WHITE);
	border: 1px solid var(--COLOR-LIGHTGRAY);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	padding: 1.25rem;
	transition: var(--TRANSITION)
}

.wrapper--card:hover {
	box-shadow: var(--shadow-float);
	transform: translateY(-2px)
}

.divider--soft {
	border-top: 1px solid var(--COLOR-LIGHTGRAY);
	margin: 1rem 0
}


/* ============================
   TYPOGRAFIE (Inter/Eina)
============================ */
h1,
.hero--h1 {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: calc(3.5 * var(--font-size));
	font-weight: 900;
	letter-spacing: -.005rem;
	line-height: 1;
	margin-bottom: .75rem;
}

h2,
.why--h2,
.final--h2 {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: calc(1.95 * var(--font-size));
	font-weight: 800;
	letter-spacing: -.005rem;
	line-height: 1.12;
	margin-bottom: .5rem
}

p,
.hero--subline,
.hero--intro {
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(1.05 * var(--font-size));
	line-height: var(--line-height);
	margin-bottom: .75rem
}


/* ============================
   NAVIGATION
============================ */
.section--nav {
	background-color: var(--COLOR-WHITE);
	border-bottom: 1px solid var(--COLOR-LIGHTGRAY);
	transition: var(--TRANSITION);
}

.section--nav .logo--box {
	align-items: center;
	display: flex;
	line-height: 0;
}

.section--nav .nav--brand {
	align-items: center;
	display: inline-flex;
}

.section--nav .nav--brand img {
	display: block;
	height: 40px;
	width: auto;
}

.section--nav .nav--menu {
	gap: .75rem;
}

.section--nav .nav--menu--link {
	border-radius: 8px;
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: .01rem;
	padding: .4rem .75rem !important;
	transition: var(--TRANSITION);
}

.section--nav .nav--menu--link:focus,
.section--nav .nav--menu--link:hover {
	background: var(--COLOR-SECONDARY-100);
	color: var(--COLOR-SECONDARY);
	text-decoration: none;
}

.section--nav .nav--wrapper {
	min-height: 50px;
}

.nav--menu--cta {
	background: var(--COLOR-LIGHTGRAY);
	border-color: var(--COLOR-LIGHTGRAY);
	color: var(--COLOR-BLACK);
}

.navbar-toggler {
	border: 1px solid var(--COLOR-LIGHTGRAY);
}

.navbar-toggler:focus {
	box-shadow: var(--PL-FOCUS-SECONDARY);
}

.navbar.scrolled,
.section--nav.scrolled {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}


/* ============================
   HERO
============================ */
.section--hero--airco {
	padding: 9rem 0 2.5rem;
}

.hero--eyebrow {
	color: var(--COLOR-SECONDARY);
	font-family: var(--FONT-FAMILY);
	text-transform: uppercase;
	font-size: 1.45rem;
	font-weight: 900;
	letter-spacing: .05em;
	margin-bottom: .5rem;
}

.hero--subline {
	color: var(--COLOR-BLACK);
	font-size: calc(1.45 * var(--font-size));
	margin-bottom: .5rem;
}

.hero--intro {
	color: var(--COLOR-BLACK);
	font-size: calc(1.1 * var(--font-size));
	margin-bottom: 1.5rem;
}

.hero--trust ul.logo--box--wrapper {
	justify-content: space-around;
}

.hero--trust .logo--box {
	height: 50px;
	opacity: .9;
	transition: var(--TRANSITION)
}

.hero--trust .logo--box:hover {
	opacity: 1
}


/* ============================
   BUTTONS
============================ */
.button {
	align-items: center;
	border-radius: .5rem;
	display: inline-flex;
	font-family: var(--FONT-FAMILY);
	font-size: 1.15rem;
	font-weight: 700;
	gap: .4rem;
	letter-spacing: .01rem;
	line-height: 1;
	padding: .8rem 1rem .8rem;
	transition: var(--TRANSITION);
}

.button span {
	display: inline-flex;
	align-items: center
}

.button--primary {
	background-color: var(--COLOR-PRIMARY);
	border: 1.5px solid var(--COLOR-PRIMARY);
	color: var(--COLOR-WHITE)
}

.button--primary:hover,
.button--primary:focus {
	background-color: var(--COLOR-PRIMARY-HOVER);
	border-color: var(--COLOR-PRIMARY-HOVER);
	color: var(--COLOR-WHITE)
}

.button--secondary {
	background-color: var(--COLOR-SECONDARY);
	border: 1.5px solid var(--COLOR-SECONDARY);
	color: var(--COLOR-WHITE)
}

.button--secondary:hover,
.button--secondary:focus {
	background-color: var(--COLOR-SECONDARY-HOVER);
	border-color: var(--COLOR-SECONDARY-HOVER);
	color: var(--COLOR-WHITE)
}

/* Tertiary (brandcolor-3) */
.button--tertiary {
	background-color: var(--brandcolor-3);
	border: 1.5px solid var(--brandcolor-3);
	color: var(--COLOR-BLACK)
}

.button--tertiary:hover,
.button--tertiary:focus {
	color: var(--COLOR-WHITE);
	filter: saturate(1.1) brightness(.95);
	text-decoration: none;
}

/* Link-stijl in CTA-band */
.button--link {
	background: transparent;
	border: 1.5px solid var(--COLOR-LIGHTGRAY);
	color: var(--COLOR-BLACK)
}

.button--link:hover {
	border-color: var(--COLOR-BLACK);
	background: var(--COLOR-BLACK);
	color: var(--COLOR-WHITE)
}


/* ============================
   WHY (kop+intro, grid, USP-CTA)
============================ */
.section--why {
	background: var(--COLOR-LIGHTESTGRAY);
	padding: 8rem 0;
}

.why--head .why--title {
	font-size: calc(3.25 * var(--font-size));
	line-height: 1;
	margin-bottom: 1.5rem;
}

.why--head .why--intro {
	color: var(--COLOR-DARKGRAY);
	font-size: calc(1.25 * var(--font-size));
	margin-bottom: 1rem;
}

.why--content .wrapper--lead {
	border-left: 4px solid var(--COLOR-PRIMARY);
	padding-left: .85rem
}

.usps--grid .usps--card {
	height: 100%
}

.usps--card {
	background: var(--COLOR-WHITE);
	border: 1px solid var(--COLOR-LIGHTGRAY);
	border-radius: var(--radius-card);
	padding: 1.5rem 1.75rem;
	transition: var(--TRANSITION);
}

.usps--card:hover {
	box-shadow: var(--shadow-float);
	transform: translateY(-2px)
}

.usps--icon {
	align-items: center;
	color: var(--COLOR-SECONDARY);
	display: inline-flex;
	font-size: 1.35rem;
	height: 2rem;
	justify-content: center;
	width: 2rem
}

.usps--title {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: calc(1.45 * var(--font-size));
	font-weight: 800;
	letter-spacing: 0;
	margin: .25rem 0 .25rem;
}

.usps--text {
	margin: 0
}

/* Oranje USP-CTA (nr.6) */
.usp--cta {
	background: var(--COLOR-PRIMARY);
	border: 1px solid var(--COLOR-PRIMARY);
	color: var(--COLOR-BLACK)
}

.usp--cta .usps--icon,
.usp--cta .usps--title {
	color: var(--COLOR-WHITE)
}

.usp--cta .usps--text {
	color: var(--COLOR-BLACK)
}

.usp--cta .button {
	background: var(--COLOR-BLACK);
	border-color: var(--COLOR-BLACK);
	color: var(--COLOR-WHITE)
}

.usp--cta .button:hover {
	opacity: .9
}

/* ============================
   B2B (donkerblauw inverse)
============================ */
.section--b2b {
	background: var(--COLOR-SECONDARY);
	padding: 3.25rem 0;
	color: var(--COLOR-WHITE)
}

.b2b--title {
	color: var(--COLOR-WHITE);
	font-size: calc(2.25 * var(--font-size));
	font-weight: 800;
	margin-bottom: .25rem
}

.section--b2b .wrapper--card {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .18);
	color: var(--COLOR-WHITE)
}

.section--b2b .wrapper--card p {
	color: var(--COLOR-WHITE);
	opacity: .95
}

.section--b2b .button--primary {
	background: var(--brandcolor-3);
	border-color: var(--brandcolor-3);
	color: var(--COLOR-BLACK)
}

.section--b2b .button--primary:hover {
	filter: saturate(1.1) brightness(.95)
}

/* ============================
   MID-CTA (oranje band)
============================ */
.section--cta {
	background: var(--COLOR-PRIMARY);
	padding: 2.75rem 0;
	color: var(--COLOR-BLACK)
}

.section--cta .cta--line h3 {
	color: var(--COLOR-BLACK);
	font-size: calc(2.125 * var(--font-size));
	font-weight: 800;
	letter-spacing: -.005rem;
	line-height: 1;
	margin-bottom: .75rem;
}

.section--cta .cta--line p {
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(1.25 * var(--font-size));
	line-height: var(--line-height);
	margin-bottom: 0;
}

.section--cta .button--box {
	display: flex;
	gap: 1rem;
}

.section--cta .button--secondary {
	background: var(--COLOR-WHITE);
	border-color: var(--COLOR-WHITE);
	color: var(--COLOR-BLACK)
}

.section--cta .button--secondary:hover {
	opacity: .9
}

.section--cta .button--link {
	background: transparent;
	border-color: var(--COLOR-BLACK);
	color: var(--COLOR-BLACK)
}

.section--cta .button--link:hover {
	background: var(--COLOR-BLACK);
	color: var(--COLOR-WHITE)
}


/* ============================
   FAQ + FORM (combi)
============================ */
.section--faq {
	background: var(--COLOR-WHITE);
	padding: 8rem 0;
}

.section--faq .row.faq--row {
	align-items: center
}

.section--faq.faq--withform .form--inner .intro--wrapper>p {
	margin-bottom: .5rem;
	line-height: 1.4;
	color: var(--COLOR-BLACK);
}

.faq--block--title {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: 2.75rem;
	font-weight: 800;
	letter-spacing: .01rem;
	line-height: 1.15;
	margin: 0;
}

.faq--item {
	border-bottom: 1.5px solid var(--COLOR-LIGHTGRAY);
	cursor: pointer;
	padding: 1.05rem 0;
	transition: var(--TRANSITION);
}

.faq--item:last-child {
	border-bottom: none
}

.faq--question h3 {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .01rem;
	margin: 0;
	padding-right: 2rem;
}

.faq--icon {
	color: var(--COLOR-MIDGRAY);
	font-size: 1.5rem;
	transition: var(--TRANSITION)
}

.faq--item.open .faq--icon {
	color: var(--COLOR-BLACK);
	transform: rotate(180deg)
}

.faq--answer {
	display: none;
	margin-top: .75rem
}

.faq--answer p {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0
}

.faq--item.open .faq--answer {
	display: block;
	padding-right: 3rem;
}

/* Form-kaart naast FAQ */
.form--outer {
	border: 1px solid var(--COLOR-LIGHTGRAY);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft)
}

.form--inner {
	padding: 1.25rem
}

/* Kolom-spacing (wat extra lucht tussen form en faq) */
.faq--col {
	padding-left: 1rem;
	padding-right: 1rem
}

@media (min-width:1200px) {
	.faq--col {
		padding-left: 2.5rem
	}

	.form--col {
		padding-right: 2.5rem
	}
}


/* ============================
   FINAL CTA
============================ */
.section--final--cta {
	background: var(--COLOR-WHITE);
	padding: 4rem 0
}

.final--text p {
	margin-bottom: 1rem
}


/* ============================
   FEEDBACK (testimonials)
============================ */
.section--feedback {
	background: var(--COLOR-LIGHTESTGRAY);
	border: 1px solid var(--COLOR-LIGHTGRAY);
	padding: 4.5rem 0 5rem;
}

.feedback--title {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: calc(2.5 * var(--font-size));
	font-weight: 800;
	letter-spacing: -.005rem;
	line-height: 1.12;
	margin-bottom: .5rem;
}

.feedback--intro {
	color: var(--COLOR-DARKGRAY);
	font-size: calc(1.25 * var(--font-size));
	margin-bottom: .5rem;
}

.feedback--bubble {
	background: var(--COLOR-WHITE);
	border: 1px solid var(--COLOR-LIGHTGRAY);
	border-radius: 16px;
	box-shadow: 0 0 12px rgba(0, 0, 0, .05);
	padding: 1.3rem 1.65rem 1.4rem;
	transition: var(--TRANSITION);
	height: 100%;
}

.feedback--bubble:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.avatar--box {
	height: 44px;
	width: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--COLOR-PRIMARY);
}

.avatar--box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar--box i {
	color: var(--COLOR-WHITE);
	font-size: 1.5rem;
}

.feedback--name {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .01rem;
	margin: 0 0 .05rem 0;
}

.feedback--tag {
	font-family: var(--FONT-FAMILY-ALT);
	font-size: .95rem;
	color: var(--COLOR-DARKGRAY);
}

.feedback--quote {
	color: var(--COLOR-SECONDARY);
	font-size: 1.5rem;
	opacity: 1;
}

.feedback--text {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: 1.025rem;
	line-height: 1.65;
	margin: 0;
}

.gsap--fade-in {
	opacity: 0;
	transform: translateY(12px);
	will-change: opacity, transform;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
	.feedback--title {
		font-size: calc(1.8 * var(--font-size));
	}
}


/* ============================
   CAR BRAND LOGOS
============================ */

.section--carbrands {
	background: var(--COLOR-BLACK);
}

.section--carbrands .logo--box {
	height: 50px;
	opacity: 1;
	transition: var(--TRANSITION)
}



/* ============================
   FOOTER
============================ */
.section--footer {
	background: var(--COLOR-WHITE);
	/*border-top: 1px solid var(--COLOR-LIGHTGRAY);*/
	padding: 2rem 0
}

.footer--legal {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: flex-end
}

.footer--link {
	color: var(--COLOR-DARKGRAY);
	text-decoration: none;
	transition: var(--TRANSITION)
}

.footer--link:hover {
	color: var(--COLOR-BLACK);
	text-decoration: underline
}

.footer--badges {
	align-items: center;
	display: flex;
	gap: 1rem
}

.footer--badge {
	display: block;
	height: 30px;
	width: auto
}

.footer--left {
	gap: .75rem;
}

.footer--left .logo--box {
	height: 40px;
}

.footer--left .logo--box img {
	display: inline-block;
	height: 42px;
	width: auto;
	object-fit: contain;
}

.footer--label {
	color: var(--COLOR-DARKGRAY);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(.95 * var(--font-size));
	font-weight: 400;
}

.footer--link {
	color: var(--COLOR-DARKGRAY);
	text-decoration: none;
	transition: var(--TRANSITION);
}

.footer--link:hover {
	color: var(--COLOR-BLACK);
	text-decoration: underline;
}

/* Badges (RDW/BOVAG) */
.footer--badges {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
}

.footer--badge {
	height: 30px;
	width: auto;
	display: block;
}

/* Stacking op kleinere schermen */
@media (max-width: 576px) {
	.footer--legal {
		justify-content: center;
		gap: 1rem;
	}

	.footer--left {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer--badges {
		gap: .75rem;
	}

	.footer--brand--img {
		height: 36px;
	}
}



/* ============================
   RESPONSIVE
============================ */
@media (max-width: 991.98px) {
	.section--hero--airco {
		padding-top: 7rem
	}

	.hero--h1 {
		font-size: calc(2.2 * var(--font-size))
	}

	.faq--block--title {
		font-size: 2rem
	}
}

@media (min-width: 2000px) {
	.container {
		max-width: 1500px
	}
}