/*!
 * Ster Kozijn Landingspagina — frontend styles
 * Gebouwd door Online Actief (https://online-actief.nl)
 *
 * Alle waardes staan als CSS-variabele op .sklp. Elementor schrijft daar
 * overheen zodra de klant iets aanpast; blijft een control leeg, dan geldt de
 * waarde uit het ontwerp die hieronder staat.
 */

/* ───────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
.sklp  {
	/* Kleuren */
	--sklp-primary:       #086afe;
	--sklp-primary-h:     #257af8;
	--sklp-navy:          #031530;
	--sklp-body:          #374c6c;
	--sklp-tint:          #ebf5ff;
	--sklp-white:         #ffffff;
	--sklp-border:        #e2e8f0;
	--sklp-muted:         #94a3b8;
	--sklp-green:         #2fb566;
	--sklp-green-h:       #279e57;
	--sklp-hero-sub:      #c6d8f2;
	--sklp-input-border:  #dbe4ee;
	--sklp-input-text:    #0f2a4d;
	--sklp-check-bg:      #2fb566;
	--sklp-check-mark:    #ffffff;

	/* Typografie */
	--sklp-font-head:     Epilogue, sans-serif;
	--sklp-font-body:     Inter, system-ui, sans-serif;
	--sklp-h1:            clamp(34px, 4.6vw, 54px);
	--sklp-h2:            clamp(28px, 3.6vw, 40px);
	--sklp-h2-cta:        clamp(26px, 3.2vw, 36px);
	--sklp-h2-card:       23px;
	--sklp-h3:            22px;
	--sklp-lead:          17px;
	--sklp-intro:         16.5px;
	--sklp-text:          15.5px;
	--sklp-text-sm:       15px;
	--sklp-text-xs:       14.5px;
	--sklp-label:         13px;
	--sklp-fine:          12.5px;
	--sklp-btn:           16px;

	/* Layout */
	--sklp-max:           1160px;
	--sklp-gutter:        20px;
	--sklp-sec-pad:       clamp(60px, 9vw, 104px);
	--sklp-hero-pad-t:    clamp(44px, 7vw, 84px);
	--sklp-hero-pad-b:    clamp(52px, 8vw, 92px);
	--sklp-marks-pad:     clamp(56px, 8vw, 88px);
	--sklp-col-gap:       clamp(36px, 5vw, 64px);
	--sklp-col-min:       310px;

	/* Vorm */
	--sklp-r-pill:        999px;
	--sklp-r-card:        20px;
	--sklp-r-product:     18px;
	--sklp-r-mark:        16px;
	--sklp-r-img:         16px;
	--sklp-r-input:       10px;
	--sklp-shadow-card:   0 28px 70px rgba(2, 12, 28, 0.45);
	--sklp-shadow-green:  0 12px 28px rgba(47, 181, 102, 0.35);

	/* Hero-achtergrond */
	--sklp-hero-ov-1:     rgba(2, 14, 34, 0.95);
	--sklp-hero-ov-2:     rgba(3, 21, 48, 0.87);
	--sklp-hero-ov-3:     rgba(3, 21, 48, 0.55);
	--sklp-hero-angle:    105deg;

	/* Deze vijf zetten de basis terug naar wat het ontwerp aanneemt. Zonder
	   deze regels erft het blok het gewicht, de regelhoogte en de letterspatie
	   van het actieve thema — bij Astra of Twenty Twenty-Five levert dat
	   zichtbaar andere tekst op dan de handoff. */
	font-family: var(--sklp-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	color: var(--sklp-body);
	-webkit-font-smoothing: antialiased;
}

/* ───────────────────────────────────────────────────────────────────────────
   SCOPED RESET — houdt het ontwerp overeind in elk thema
   ─────────────────────────────────────────────────────────────────────────── */
.sklp,
.sklp *,
.sklp *::before,
.sklp *::after  {
	box-sizing: border-box;
}

.sklp h1,
.sklp h2,
.sklp h3,
.sklp p,
.sklp figure  {
	margin: 0;
	padding: 0;
}

.sklp h1,
.sklp h2,
.sklp h3  {
	font-family: var(--sklp-font-head);
	font-weight: 500;
	/* Thema's zetten regelhoogte en letterspatie rechtstreeks op h1-h3; dat erft
	   niet over van .sklp en moet hier dus expliciet terug naar de basis. De
	   blokken die het ontwerp wél voorschrijft, overschrijven dit hieronder. */
	line-height: normal;
	letter-spacing: normal;
	text-wrap: pretty;
}

.sklp img  {
	max-width: 100%;
	height: auto;
	display: block;
}

.sklp a  {
	text-decoration: none;
	color: var(--sklp-primary);
	transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.sklp a:hover  {
	color: var(--sklp-primary-h);
}

.sklp ul,
.sklp ol  {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sklp button,
.sklp input,
.sklp select,
.sklp textarea  {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.sklp ::selection  {
	background: var(--sklp-primary);
	color: #fff;
}

.sklp .sklp-container  {
	/* content-box, net als in het ontwerp: de 1160px is de contentkolom, de
	   horizontale padding komt daar bovenop. Met border-box zou de kolom
	   1120px worden en schuift de hele pagina 40px in. */
	box-sizing: content-box;
	max-width: var(--sklp-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sklp-gutter);
	padding-right: var(--sklp-gutter);
}

.sklp .sklp-sr-only  {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   ICONEN
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-check  {
	flex: none;
}

.sklp .sklp-check__bg  {
	fill: var(--sklp-check-bg);
}

.sklp .sklp-check__mark  {
	stroke: var(--sklp-check-mark);
}

.sklp .sklp-arrow  {
	flex: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   KNOPPEN

   Let op de dubbele class (.sklp .sklp-btn…): knoppen zijn vaak een <a>, en
   zonder die extra specificiteit wint de algemene linkregel hierboven — of een
   linkregel uit het thema. Vandaar overal .sklp ervoor.
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-btn  {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	border-radius: var(--sklp-r-pill);
	padding: 16px 28px;
	font-size: var(--sklp-btn);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.sklp .sklp-btn--green  {
	background: var(--sklp-green);
	color: var(--sklp-white);
	box-shadow: var(--sklp-shadow-green);
}

.sklp .sklp-btn--green:hover,
.sklp .sklp-btn--green:focus-visible  {
	background: var(--sklp-green-h);
	color: var(--sklp-white);
}

.sklp .sklp-btn--flat  {
	box-shadow: none;
}

.sklp .sklp-btn--blue  {
	background: var(--sklp-primary);
	color: var(--sklp-white);
}

.sklp .sklp-btn--blue:hover,
.sklp .sklp-btn--blue:focus-visible  {
	background: var(--sklp-primary-h);
	color: var(--sklp-white);
}

.sklp .sklp-btn--outline  {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .4);
	color: var(--sklp-white);
	padding: 15px 26px;
}

.sklp .sklp-btn--outline:hover,
.sklp .sklp-btn--outline:focus-visible  {
	border-color: var(--sklp-white);
	color: var(--sklp-white);
}

.sklp .sklp-btn--block  {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.sklp .sklp-btn[disabled],
.sklp .sklp-btn[aria-busy="true"]  {
	opacity: .72;
	cursor: progress;
}

.sklp .sklp-textlink  {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--sklp-btn);
	font-weight: 600;
	color: var(--sklp-primary);
}

.sklp .sklp-textlink:hover  {
	color: var(--sklp-primary-h);
}

/* Vinkjeslijst */
.sklp .sklp-list  {
	display: grid;
	gap: 8px;
}

.sklp .sklp-list__item  {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--sklp-text-xs);
	color: var(--sklp-navy);
}

/* Beeldkader met vaste hoogte */
.sklp .sklp-img  {
	position: relative;
	overflow: hidden;
	background: var(--sklp-tint);
}

.sklp .sklp-img > img  {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. HERO + FORMULIER
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-hero  {
	padding-top: var(--sklp-hero-pad-t);
	padding-bottom: var(--sklp-hero-pad-b);
	background-color: var(--sklp-navy);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	/* Navy verloop over de foto heen, precies zoals in het ontwerp. */
	background-image:
		linear-gradient(
			var(--sklp-hero-angle),
			var(--sklp-hero-ov-1) 0%,
			var(--sklp-hero-ov-2) var(--sklp-hero-stop-2, 45%),
			var(--sklp-hero-ov-3) 100%
		),
		var(--sklp-hero-image, none);
}

.sklp .sklp-hero__inner  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--sklp-col-min), 100%), 1fr));
	gap: var(--sklp-col-gap);
	align-items: center;
}

.sklp .sklp-hero__title  {
	font-size: var(--sklp-h1);
	line-height: 1.08;
	letter-spacing: -1px;
	color: var(--sklp-white);
	margin: 0 0 18px;
}

.sklp .sklp-hero__text  {
	font-size: var(--sklp-lead);
	line-height: 1.7;
	color: var(--sklp-hero-sub);
	margin: 0 0 24px;
	max-width: 54ch;
}

.sklp .sklp-hero__usps  {
	display: grid;
	gap: 12px;
	margin: 0 0 30px;
}

.sklp .sklp-hero__usp  {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--sklp-white);
	font-size: var(--sklp-text);
	font-weight: 500;
}

.sklp .sklp-hero__buttons  {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* Formulierkaart */
.sklp .sklp-card  {
	/* Ook hier content-box: in het ontwerp is 470px de breedte van het
	   formulier zelf, de kaartpadding komt daarbuiten.
	   Bewust géén width:100% — dat zou bij content-box de padding erbóvenop
	   leggen en de kaart buiten de kolom duwen (dat gebeurt in het prototype).
	   Met auto-breedte plus auto-marges vult de kaart de kolom, stopt hij bij
	   470px content en blijft hij netjes gecentreerd. */
	box-sizing: content-box;
	max-width: 470px;
	margin-left: auto;
	margin-right: auto;
	background: var(--sklp-white);
	border-radius: var(--sklp-r-card);
	padding: clamp(24px, 3vw, 32px);
	box-shadow: var(--sklp-shadow-card);
	scroll-margin-top: 84px;
}

.sklp .sklp-card__title  {
	font-size: var(--sklp-h2-card);
	line-height: 1.25;
	color: var(--sklp-navy);
	margin: 0 0 8px;
}

.sklp .sklp-card__sub  {
	font-size: var(--sklp-text-xs);
	line-height: 1.6;
	margin: 0 0 20px;
}

/* Formulier */
.sklp .sklp-form  {
	display: grid;
	gap: 14px;
}

.sklp .sklp-form__hp  {
	position: absolute !important;
	left: -5000px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sklp .sklp-form__row  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--sklp-form-col-min, 165px), 100%), 1fr));
	gap: 14px;
}

.sklp .sklp-field  {
	display: grid;
	gap: 6px;
	align-content: start;
}

.sklp .sklp-field__label  {
	font-size: var(--sklp-label);
	font-weight: 600;
	color: var(--sklp-navy);
}

.sklp .sklp-field__req  {
	color: var(--sklp-navy);
}

.sklp .sklp-field input[type="text"],
.sklp .sklp-field input[type="email"],
.sklp .sklp-field input[type="tel"],
.sklp .sklp-field input[type="number"],
.sklp .sklp-field input[type="url"],
.sklp .sklp-field select,
.sklp .sklp-field textarea  {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--sklp-input-border);
	border-radius: var(--sklp-r-input);
	font-size: var(--sklp-text-sm);
	line-height: normal;
	color: var(--sklp-input-text);
	background: var(--sklp-white);
	box-shadow: none;
	margin: 0;
	max-width: none;
}

.sklp .sklp-field textarea  {
	resize: vertical;
}

.sklp .sklp-field select  {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 38px;
	cursor: pointer;
}

.sklp .sklp-field ::placeholder  {
	color: var(--sklp-muted);
	opacity: 1;
}

.sklp .sklp-field input:focus,
.sklp .sklp-field select:focus,
.sklp .sklp-field textarea:focus  {
	outline: none;
	border-color: var(--sklp-primary);
	box-shadow: 0 0 0 3px rgba(8, 106, 254, .14);
}

.sklp .sklp-field--invalid input,
.sklp .sklp-field--invalid select,
.sklp .sklp-field--invalid textarea  {
	border-color: #e04f5f;
}

.sklp .sklp-field__error  {
	font-size: 12.5px;
	line-height: 1.4;
	color: #d33a4b;
}

/* Leeg foutvak telt anders mee als grid-rij en maakt elk veld 6px hoger dan
   in het ontwerp. */
.sklp .sklp-field__error:empty  {
	display: none;
}

.sklp .sklp-select  {
	position: relative;
}

.sklp .sklp-select__chevron  {
	position: absolute;
	right: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-left: 2px solid var(--sklp-body);
	border-bottom: 2px solid var(--sklp-body);
	transform: translateY(-70%) rotate(-45deg);
	pointer-events: none;
}

.sklp .sklp-form__fine  {
	font-size: var(--sklp-fine);
	line-height: 1.5;
	color: var(--sklp-muted);
	text-align: center;
	margin: 0;
}

.sklp .sklp-form__notice  {
	font-size: 13.5px;
	line-height: 1.5;
	padding: 10px 14px;
	border-radius: var(--sklp-r-input);
	background: #fdecee;
	color: #a3283a;
}

.sklp .sklp-form__notice[hidden]  {
	display: none;
}

.sklp .sklp-form__captcha  {
	display: flex;
	justify-content: center;
}

/* Bedankscherm — vervangt het formulier pas ná een geslaagde verzending */
.sklp .sklp-thanks  {
	text-align: center;
	padding: 32px 8px;
}

.sklp .sklp-thanks[hidden],
.sklp .sklp-formwrap[hidden]  {
	display: none;
}

.sklp .sklp-thanks__icon  {
	margin: 0 auto 18px;
	display: block;
}

.sklp .sklp-thanks__title  {
	font-size: 24px;
	color: var(--sklp-navy);
	margin: 0 0 10px;
}

.sklp .sklp-thanks__text  {
	font-size: var(--sklp-text);
	line-height: 1.7;
	margin: 0;
}

.sklp .sklp-thanks__text a  {
	font-weight: 600;
	color: var(--sklp-primary);
}

.sklp .sklp-thanks__text a:hover  {
	color: var(--sklp-primary-h);
}

/* ───────────────────────────────────────────────────────────────────────────
   ELEMENTOR PRO FORMS — zelfde jasje als het ingebouwde formulier
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-card .elementor-form-fields-wrapper  {
	margin: 0 -7px;
}

.sklp .sklp-card .elementor-field-group  {
	padding: 0 7px;
	margin-bottom: 14px;
}

.sklp .sklp-card .elementor-field-group > label.elementor-field-label  {
	font-size: var(--sklp-label);
	font-weight: 600;
	color: var(--sklp-navy);
	margin-bottom: 6px;
	padding: 0;
}

.sklp .sklp-card .elementor-field-group .elementor-field,
.sklp .sklp-card .elementor-field-group .elementor-field-textual  {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sklp-input-border);
	border-radius: var(--sklp-r-input);
	font-size: var(--sklp-text-sm);
	line-height: 1.4;
	color: var(--sklp-input-text);
	background: var(--sklp-white);
	box-shadow: none;
}

.sklp .sklp-card .elementor-field-group .elementor-field-textual:focus  {
	outline: none;
	border-color: var(--sklp-primary);
	box-shadow: 0 0 0 3px rgba(8, 106, 254, .14);
}

.sklp .sklp-card .elementor-field-group select.elementor-field-textual  {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--sklp-body) 50%), linear-gradient(135deg, var(--sklp-body) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 38px;
}

.sklp .sklp-card .elementor-field-group textarea.elementor-field-textual  {
	resize: vertical;
	min-height: 92px;
}

.sklp .sklp-card .elementor-field-group .elementor-field::placeholder  {
	color: var(--sklp-muted);
	opacity: 1;
}

.sklp .sklp-card .elementor-button[type="submit"],
.sklp .sklp-card .elementor-field-type-submit .elementor-button  {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--sklp-green);
	color: var(--sklp-white);
	border: none;
	border-radius: var(--sklp-r-pill);
	padding: 16px 28px;
	font-size: var(--sklp-btn);
	font-weight: 600;
	line-height: 1.2;
	min-height: 0;
}

.sklp .sklp-card .elementor-button[type="submit"]:hover,
.sklp .sklp-card .elementor-field-type-submit .elementor-button:hover  {
	background: var(--sklp-green-h);
	color: var(--sklp-white);
}

.sklp .sklp-card .elementor-message  {
	font-size: 13.5px;
	line-height: 1.5;
	margin-top: 10px;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. EIGEN FABRIEK
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-factory  {
	padding-top: var(--sklp-sec-pad);
	padding-bottom: var(--sklp-sec-pad);
	background: var(--sklp-white);
}

.sklp .sklp-factory__inner  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--sklp-col-min), 100%), 1fr));
	gap: var(--sklp-col-gap);
	align-items: center;
}

.sklp .sklp-factory__title  {
	font-size: var(--sklp-h2);
	line-height: 1.15;
	letter-spacing: -.5px;
	color: var(--sklp-navy);
	margin: 0 0 16px;
}

.sklp .sklp-factory__intro  {
	font-size: var(--sklp-intro);
	line-height: 1.7;
	margin: 0 0 30px;
	max-width: 56ch;
}

.sklp .sklp-factory__steps  {
	display: grid;
	gap: 22px;
	margin: 0 0 30px;
}

.sklp .sklp-factory__step  {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.sklp .sklp-factory__num  {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--sklp-r-pill);
	background: var(--sklp-tint);
	color: var(--sklp-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sklp-font-head);
	font-weight: 600;
	font-size: 15px;
}

.sklp .sklp-factory__steptitle  {
	font-size: 17px;
	font-weight: 600;
	color: var(--sklp-navy);
	margin: 0 0 4px;
	font-family: var(--sklp-font-body);
}

.sklp .sklp-factory__steptext  {
	font-size: var(--sklp-text);
	line-height: 1.65;
}

.sklp .sklp-factory__grid  {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.sklp .sklp-factory__img  {
	border-radius: var(--sklp-r-img);
	height: clamp(140px, 17vw, 190px);
}

.sklp .sklp-factory__img--wide  {
	grid-column: 1 / -1;
	height: clamp(220px, 26vw, 300px);
}

/* ───────────────────────────────────────────────────────────────────────────
   4. KEURMERKEN
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-marks  {
	background: var(--sklp-tint);
	padding-top: var(--sklp-marks-pad);
	padding-bottom: var(--sklp-marks-pad);
}

.sklp .sklp-marks__head  {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.sklp .sklp-marks__title,
.sklp .sklp-products__title  {
	font-size: var(--sklp-h2);
	line-height: 1.15;
	letter-spacing: -.5px;
	color: var(--sklp-navy);
	margin: 0;
}

.sklp .sklp-marks__grid  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: 20px;
}

.sklp .sklp-mark  {
	background: var(--sklp-white);
	border-radius: var(--sklp-r-mark);
	padding: 28px;
}

.sklp .sklp-mark__icon  {
	height: 56px;
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.sklp .sklp-mark__icon img  {
	max-height: 56px;
	width: auto;
	object-fit: contain;
}

.sklp .sklp-mark__title  {
	font-size: 17px;
	font-weight: 600;
	color: var(--sklp-navy);
	margin: 0 0 6px;
	font-family: var(--sklp-font-body);
}

.sklp .sklp-mark__text  {
	font-size: var(--sklp-text-sm);
	line-height: 1.65;
	margin: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   5. PRODUCTEN
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-products  {
	padding-top: var(--sklp-sec-pad);
	padding-bottom: var(--sklp-sec-pad);
	background: var(--sklp-white);
}

.sklp .sklp-products__head  {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.sklp .sklp-products__grid  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--sklp-prod-gap, 24px);
}

.sklp .sklp-product  {
	border: 1px solid var(--sklp-border);
	border-radius: var(--sklp-r-product);
	overflow: hidden;
	background: var(--sklp-white);
}

.sklp .sklp-product__media  {
	height: 230px;
}

.sklp .sklp-product__body  {
	padding: 26px;
}

.sklp .sklp-product__title  {
	font-size: var(--sklp-h3);
	color: var(--sklp-navy);
	margin: 0 0 8px;
}

.sklp .sklp-product__text  {
	font-size: var(--sklp-text);
	line-height: 1.65;
	margin: 0 0 16px;
}

.sklp .sklp-product__list  {
	margin: 0 0 20px;
}

.sklp .sklp-product__link  {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--sklp-text);
	font-weight: 600;
	color: var(--sklp-primary);
}

/* Brede kaart met de extra diensten, onder de productkaarten. */
.sklp .sklp-product--wide  {
	margin-top: var(--sklp-prod-gap, 24px);
}

.sklp .sklp-extra__heading  {
	font-family: var(--sklp-font-head);
	font-weight: 500;
	font-size: var(--sklp-h3);
	color: var(--sklp-navy);
	margin: 0 0 22px;
}

.sklp .sklp-extra__grid  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--sklp-extra-col-min, 220px), 100%), 1fr));
	gap: 26px;
}

.sklp .sklp-extra__media  {
	height: var(--sklp-extra-img-h, 160px);
	border-radius: var(--sklp-r-img);
	margin: 0 0 16px;
}

.sklp .sklp-extra__title  {
	font-family: var(--sklp-font-body);
	font-size: 17px;
	font-weight: 600;
	color: var(--sklp-navy);
	margin: 0 0 6px;
}

.sklp .sklp-extra__text  {
	font-size: var(--sklp-text-sm);
	line-height: 1.65;
	margin: 0 0 12px;
}

.sklp .sklp-extra__link  {
	font-size: var(--sklp-text-xs);
}

.sklp .sklp-product__link:hover  {
	color: var(--sklp-primary-h);
}

/* ───────────────────────────────────────────────────────────────────────────
   6. ADVIESGESPREK CTA
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-cta  {
	padding-bottom: var(--sklp-sec-pad);
	background: var(--sklp-white);
}

.sklp .sklp-cta__box  {
	background: var(--sklp-navy);
	border-radius: var(--sklp-r-card);
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.sklp .sklp-cta__media  {
	min-height: 280px;
}

.sklp .sklp-cta__body  {
	padding: clamp(32px, 5vw, 56px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.sklp .sklp-cta__title  {
	font-size: var(--sklp-h2-cta);
	line-height: 1.15;
	letter-spacing: -.5px;
	color: var(--sklp-white);
	margin: 0 0 14px;
}

.sklp .sklp-cta__text  {
	font-size: var(--sklp-btn);
	line-height: 1.7;
	color: var(--sklp-hero-sub);
	margin: 0 0 26px;
	max-width: 48ch;
}

.sklp .sklp-cta__second  {
	margin-top: 14px;
}

/* ───────────────────────────────────────────────────────────────────────────
   REFERENTIES UIT DE BUURT
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-refs  {
	padding-top: var(--sklp-sec-pad);
	padding-bottom: var(--sklp-sec-pad);
	background: var(--sklp-tint);
}

.sklp .sklp-refs__head,
.sklp .sklp-faq__head  {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.sklp .sklp-refs__title,
.sklp .sklp-faq__title  {
	font-size: var(--sklp-h2);
	line-height: 1.15;
	letter-spacing: -.5px;
	color: var(--sklp-navy);
	margin: 0;
}

.sklp .sklp-refs__intro,
.sklp .sklp-faq__intro  {
	font-size: var(--sklp-intro);
	line-height: 1.65;
	margin: 14px 0 0;
}

.sklp .sklp-refs__grid  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}

.sklp .sklp-ref  {
	background: var(--sklp-white);
	border-radius: var(--sklp-r-product);
	overflow: hidden;
}

.sklp .sklp-ref__media  {
	height: 210px;
}

.sklp .sklp-ref__body  {
	padding: 26px;
}

.sklp .sklp-ref__title  {
	font-size: var(--sklp-h3);
	color: var(--sklp-navy);
	margin: 0 0 8px;
}

.sklp .sklp-ref__text  {
	font-size: var(--sklp-text);
	line-height: 1.65;
	margin: 0 0 16px;
}

.sklp .sklp-ref__link  {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--sklp-text);
	font-weight: 600;
	color: var(--sklp-primary);
}

/* ───────────────────────────────────────────────────────────────────────────
   VEELGESTELDE VRAGEN
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-faq  {
	padding-top: var(--sklp-sec-pad);
	padding-bottom: var(--sklp-sec-pad);
	background: var(--sklp-white);
}

.sklp .sklp-faq__list  {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.sklp .sklp-faq__item  {
	border: 1px solid var(--sklp-border);
	border-radius: var(--sklp-r-mark);
	background: var(--sklp-white);
}

.sklp .sklp-faq__q  {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-size: 17px;
	font-weight: 600;
	color: var(--sklp-navy);
}

.sklp .sklp-faq__q::-webkit-details-marker  {
	display: none;
}

.sklp .sklp-faq__icon  {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

.sklp .sklp-faq__icon::before,
.sklp .sklp-faq__icon::after  {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--sklp-primary);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform .2s ease;
}

.sklp .sklp-faq__icon::after  {
	transform: translate(-50%, -50%) rotate(90deg);
}

.sklp .sklp-faq__item[open] .sklp-faq__icon::after  {
	transform: translate(-50%, -50%) rotate(0deg);
}

.sklp .sklp-faq__a  {
	padding: 0 24px 20px;
	font-size: var(--sklp-text);
	line-height: 1.65;
}

.sklp .sklp-faq__a p  {
	margin: 0 0 10px;
}

.sklp .sklp-faq__a p:last-child  {
	margin-bottom: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   VOLLEDIGE PAGINA — geen witte rand van de container eromheen
   Elementor geeft een container standaard binnenmarge en een maximale breedte.
   Bij de complete landingspagina hoort de sectie van rand tot rand te lopen.
   ─────────────────────────────────────────────────────────────────────────── */
.elementor-widget-sklp_landing > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

@supports selector(:has(*)) {

	.e-con:has(> .elementor-widget-sklp_landing),
	.e-con:has(> .e-con-inner > .elementor-widget-sklp_landing),
	.elementor-section:has(.elementor-widget-sklp_landing) {
		padding: 0;
		max-width: none;
		width: 100%;
	}

	.e-con:has(> .e-con-inner > .elementor-widget-sklp_landing) > .e-con-inner {
		padding: 0;
		max-width: none;
		width: 100%;
	}

	.e-con:has(> .elementor-widget-sklp_landing) > .elementor-widget-sklp_landing {
		width: 100%;
		max-width: none;
	}
}

/* ───────────────────────────────────────────────────────────────────────────
   EDITOR-HULP — alleen zichtbaar in de Elementor-editor
   ─────────────────────────────────────────────────────────────────────────── */
.sklp .sklp-editor-note  {
	background: #fff8e5;
	border: 1px dashed #e0b64d;
	color: #7a5a12;
	font-size: 13px;
	line-height: 1.5;
	padding: 12px 16px;
	border-radius: 8px;
	margin: 0 0 14px;
	font-family: -apple-system, "Segoe UI", sans-serif;
}

/* ───────────────────────────────────────────────────────────────────────────
   RESPONSIVE — één breakpoint, exact zoals in het ontwerp
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

	/* Hero eindigt precies onder de formulierkaart: geen doorlopende foto. */
	.sklp .sklp-hero  {
		padding-bottom: 0;
	}

	.sklp  {
		--sklp-gutter-mobile: 14px;
	}

	.sklp .sklp-hero > .sklp-container  {
		padding-left: var(--sklp-gutter-mobile);
		padding-right: var(--sklp-gutter-mobile);
	}

	.sklp .sklp-hero__content  {
		padding-left: 6px;
		padding-right: 6px;
	}

	.sklp .sklp-card  {
		/* Van rand tot rand. Dat hoort zo: de kaart heeft onderaan geen
		   ronding en geen schaduw, zodat hij naadloos overgaat in de witte
		   sectie eronder. Met een marge ernaast zouden er twee donkere
		   stroken hero overblijven die onderaan hard afgesneden worden.
		   Het prototype bereikt hetzelfde, maar dan door 10px buiten het
		   scherm te steken; dit blijft er netjes binnen. */
		box-sizing: border-box;
		max-width: none;
		margin-left: calc(-1 * var(--sklp-gutter-mobile));
		margin-right: calc(-1 * var(--sklp-gutter-mobile));
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		box-shadow: 0 -18px 50px rgba(2, 12, 28, .35);
	}

	/* E-mail en telefoon horen ook op mobiel naast elkaar te staan, zoals in
	   het ontwerp. Binnen de kaart is dan minder dan 165px per kolom
	   beschikbaar, dus zakt de drempel hier naar 140px. */
	.sklp  {
		--sklp-form-col-min: 140px;
	}

	/* De CTA-knop moet op één regel blijven.
	   De handoff-tekst noemt hier ook padding 20px en 15px font, maar in het
	   prototype halen die het niet van de inline stijl van de knop; daar staat
	   hij dus op 28px/16px. We volgen wat je in het prototype ziet — de knop
	   past ruim op één regel. Wil je toch de geschreven waardes, dan zijn dat
	   twee regels erbij. */
	.sklp .sklp-cta__body .sklp-btn  {
		white-space: nowrap;
	}
}

/* Respecteer de systeemvoorkeur voor minder beweging */
@media (prefers-reduced-motion: reduce) {
	.sklp a,
	.sklp .sklp-btn  {
		transition: none;
	}
}