/* ============================================
   Landingspagina-bouwstenen (components/lp.njk)
   Gedeeld door de dienstpagina's (landing-b.njk en lp-dienst.njk). Waarden uit
   de Elementor-CSS van pagina's 3545/3499/3508/3482/3262/3143/3064; alle secties
   zijn in het origineel kopieën van dezelfde opzet met kleine verschillen, die
   hier als modifier (--x) of hulpklasse (lp-w45 …) staan.
   ============================================ */

/* --- Sectie: min. 506px hoog, inhoud verticaal gecentreerd, 1140px -------- */
.lp-sec {
  --minh: 506px;
  --justify: center;
  --gap: 30px;
  --pt: 60px; --pb: 60px; --pl: 0px; --pr: 0px;
  --bg: var(--color-white);
  /* niet laten omslaan: in een kolom-flex met wrap lost de %-padding van de
     galerijtegels op tot 0 (het origineel zet die hoogte met JavaScript in px) */
  --wrap-m: nowrap;
}
.lp-sec--dark { --bg: var(--color-primary); }
.lp-sec--mist { --bg: var(--color-mist); }
.lp-sec--gap25 { --gap: 25px; }
.lp-sec--gap50 { --gap: 50px; }
.lp-sec--h400 { --minh: 400px; }
@media (min-width: 768px) {
  .lp-sec { --content: 1140px; }
}
@media (max-width: 1200px) {
  .lp-sec { --pt: 40px; --pb: 40px; --pl: 10px; --pr: 10px; }
}
@media (max-width: 767px) {
  .lp-sec--mgap25 { --gap: 25px; }
  .lp-sec--mgap40 { --gap: 40px; }
  .lp-sec--mh0 { --minh: 0px; }
}

/* --- Koppen en tekst ---------------------------------------------------- */
/* Bovenkop: "accent"-typografie (15px/600, hoofdletters; mobiel 12px) */
.lp-kicker {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-main);
  font-size: var(--fs-accent);
  font-weight: var(--fw-accent);
  line-height: 1;
  letter-spacing: var(--ls-primary);
  text-transform: uppercase;
}
.lp-kicker--accent { color: var(--color-accent); }

/* Sectiekop: "secondary"-typografie (28px/600; mobiel 24px) */
.lp-title {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--fs-secondary);
  font-weight: var(--fw-secondary);
  line-height: 1;
  letter-spacing: var(--ls-primary);
}
.lp-title--38 { font-size: var(--fs-title); font-weight: var(--fw-title); }
.lp-title--light { color: var(--color-white); }

/* Inleiding: 16px/500 */
.lp-lead { width: 100%; max-width: 100%; font-weight: 500; }
.lp-lead--light { color: var(--color-white); }
.lp-pm0 p { margin-bottom: 0; }

/* Breedtes en verschuivingen zoals per widget in het origineel ingesteld */
.lp-w45 { width: 45%; }
.lp-w54 { width: 54%; }
.lp-w55 { width: 55%; }
.lp-w56 { width: 56%; }
.lp-w57 { width: 57%; }
.lp-w60 { width: 60%; }
.lp-w74 { width: 74%; }
.lp-w83 { width: 83%; }
.lp-w99 { width: 99%; }
.lp-up { margin-top: -25px; }
.lp-down { margin-top: 15px; }

@media (max-width: 767px) {
  .lp-kicker { width: 305px; }
  .lp-mw326 { width: 326px; }
  .lp-mw525 { width: 525px; }
  .lp-mw593 { width: 593px; }
  .lp-mw743 { width: 743px; }
  .lp-mw956 { width: 956px; }
  .lp-mw984 { width: 984px; }
  .lp-mw1000 { width: 1000px; }
  .lp-m0 { margin-top: 0; }
  .lp-pm0-m p { margin-bottom: 0; }
  /* Mobiel trekt het origineel de bovenkop 35px op (marge -35px in de widget); de
     widget zelf wordt daardoor 0 hoog, niet negatief. Netto telt de kop dus niet
     mee: een marge van min één regelhoogte. */
  .lp-pull { margin-bottom: -1lh; }
}

/* --- Label bovenaan de hero (Elementor-knop zonder link) ------------------ */
.lp-badge { align-self: flex-start; max-width: 100%; margin: 0; line-height: 0; }
.lp-badge__in > span { display: block; }
.lp-badge__in {
  display: inline-block;
  padding: 12px 23px;
  border: 1px solid var(--color-accent);
  border-radius: 40px;
  background-color: #FEBD1730;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
@media (max-width: 767px) {
  .lp-badge__in { padding: 10px 20px; font-size: 11px; }
}

/* --- Knoppen ------------------------------------------------------------ */
.lp-btn { border-width: 2px; }
.lp-btn__in {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.lp-btn__icon { flex: none; width: 1em; height: 1em; fill: currentColor; }
/* geel vol; hover blijft geel */
.lp-btn--accent { --btn-bg: var(--color-accent); --btn-border: var(--color-accent); --btn-color: var(--color-text); }
/* wit omlijnd op de donkere hero */
.lp-btn--outline { --btn-bg: #FEBD1700; --btn-border: var(--color-white); --btn-color: var(--color-white); }
/* transparant met zwarte rand (tekstkleur per sectie) */
.lp-btn--ghost { --btn-bg: #FEBD1700; --btn-border: var(--color-text); --btn-color: var(--lp-ghost, var(--color-text)); }
/* transparant, zwart; hover zwart vlak met witte tekst */
.lp-btn--line { --btn-bg: #FEBD1700; --btn-border: var(--color-text); --btn-color: var(--color-text); }
@media (hover: hover) {
  .lp-btn--line:hover { background-color: var(--color-text); color: var(--color-white); }
}
.lp-btn--line:focus-visible { background-color: var(--color-text); color: var(--color-white); }
.lp-btn.btn--grow { transition: transform 0.3s, background-color 0.2s, color 0.2s, border-color 0.2s; }
@media (max-width: 767px) {
  .lp-btn { padding: 15px 35px; }
}

/* --- Lijst met vinkjes (Elementor icon-list, onder elkaar) ---------------- */
.lp-list {
  --lp-list-icon: 14px;
  --lp-list-color: var(--color-copper);
  --lp-list-pad: 8px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-list__item { display: flex; align-items: center; }
.lp-list__item:not(:last-child) { padding-bottom: 5px; }
.lp-list__item:not(:first-child) { margin-top: 5px; }
.lp-list__icon {
  flex: none;
  box-sizing: content-box;
  width: var(--lp-list-icon);
  height: var(--lp-list-icon);
  margin-right: calc(var(--lp-list-icon) * 0.25);
  padding-right: var(--lp-list-pad);
  fill: var(--lp-list-color);
}
.lp-list__text {
  align-self: center;
  padding-left: 5px;
  color: var(--color-primary);
  font-family: var(--font-main);
}

/* --- Vinkjes naast elkaar (hero) --------------------------------------- */
/* de lijst zit, zoals de Elementor-widget, in een omhulsel dat overloop afsnijdt */
.lp-checks-wrap { --lp-checks-gap: 10px; max-width: 100%; overflow: hidden; }
.lp-checks {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--lp-checks-gap) * -1);
  padding: 0;
  list-style: none;
}
.lp-checks__item { display: flex; align-items: center; margin: 0 var(--lp-checks-gap); }
.lp-checks__icon { flex: none; width: 14px; height: 14px; margin-right: 3.5px; fill: var(--color-accent); }
.lp-checks__text {
  padding-left: 5px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.5;
}

/* --- Icoonvak (Elementor icon-box) --------------------------------------- */
.lp-ibox { display: flex; }
.lp-ibox__icon { flex: none; line-height: 0; }
.lp-ibox__icon .icon { width: 1em; height: 1em; }
.lp-ibox__content { flex-grow: 1; }
.lp-ibox__title {
  margin: 8px 0 16px;
  font-family: var(--font-main);
  letter-spacing: var(--ls-primary);
}
.lp-ibox__text { margin: 0; color: var(--color-text); font-family: var(--font-main); }

/* gestapeld: icoon in een gekleurd vlak boven de tekst, gecentreerd */
.lp-ibox--stacked { flex-direction: column; gap: 15px; text-align: center; }
.lp-ibox--stacked .lp-ibox__icon .icon {
  display: inline-block;
  box-sizing: content-box;
  padding: 0.5em;
  border-radius: 10%;
  background-color: var(--color-copper);
  fill: var(--color-white);
  font-size: 30px;
}
.lp-ibox--stacked .lp-ibox__title {
  color: var(--color-text);
  font-size: var(--fs-lead);
  font-weight: var(--fw-lead);
  line-height: 1.2;
}

/* --- Vier voordelen op een rij ------------------------------------------ */
.lp-usp { --minh: 300px; --justify: center; }
.lp-usp--mist { --bg: var(--color-mist); }
.lp-usp__row { --dir: row; margin: 0; list-style: none; }
.lp-usp__item { flex: 1 1 auto; max-width: 100%; }
@media (max-width: 767px) {
  .lp-usp { --pt: 50px; --pb: 50px; --pl: 10px; --pr: 10px; }
  .lp-usp__row { --justify: center; --align: center; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; align-self: center; }
}

/* --- Tekst naast foto ----------------------------------------------------- */
.lp-split {
  --dir: row;
  --gap: 0px;
  --pt: 50px; --pb: 50px; --pl: 0px; --pr: 0px;
  --bg: var(--color-mist);
}
.lp-split--white { --bg: var(--color-white); }
.lp-split__media { --justify: center; }
.lp-split .lp-lead { font-weight: 400; }
.lp-split__cta { align-self: flex-start; max-width: 100%; }
.lp-split__note { max-width: 100%; color: var(--color-grey); font-size: 14px; }
.lp-split__note p { margin-bottom: 0; }
.lp-split__img { text-align: center; line-height: 0; }
.lp-split__img img {
  display: inline-block;
  height: 450px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
}
/* lijst met gele vinkjes en 1px ruimte (in plaats van koper en 8px) */
.lp-split--yellow .lp-list { --lp-list-color: var(--color-accent); --lp-list-pad: 1px; }
/* foto links, tekstkolom verticaal gecentreerd, 50px tussenruimte */
.lp-split--rev { --dir: row-reverse; --wrap-m: wrap-reverse; --gap: 50px; }
.lp-split--rev .lp-split__text { --justify: center; }
@media (min-width: 768px) {
  .lp-split__text, .lp-split__media { --w: 50%; }
}
@media (max-width: 767px) {
  .lp-split { --dir: row-reverse; --wrap-m: wrap-reverse; --pt: 20px; --pb: 20px; }
  .lp-split--rev { --gap: 20px; }
  .lp-split--rev .lp-split__text { --gap: 25px; }
  .lp-split__img img { height: 250px; }
  .lp-split--m15 .lp-list { --lp-list-icon: 15px; }
}

/* --- Werkwijze/voordelen: kaarten in een raster ----------------------------- */
.lp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
  padding: 10px;
  list-style: none;
}
.lp-cardsec--3 .lp-cards { grid-template-columns: repeat(3, 1fr); }
.lp-cards__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #DADADAB3;
  border-radius: 10px;
  background-color: var(--lp-card-bg, var(--color-mist));
}
.lp-cardsec--glass { --lp-card-bg: #F3F3F326; }
.lp-cardsec--white { --lp-card-bg: var(--color-white); }

/* icoonvak in de kaart: icoon links (mobiel erboven) of erboven */
.lp-cards .lp-ibox { flex-direction: row; align-items: flex-start; gap: 20px; text-align: start; }
.lp-cardsec--top .lp-cards .lp-ibox { flex-direction: column; align-items: stretch; }
.lp-cards .lp-ibox__icon { font-size: 34px; }
.lp-cards .lp-ibox__icon .icon { fill: var(--lp-card-icon, var(--color-accent)); }
.lp-cardsec--icon-dark { --lp-card-icon: var(--color-text); }
.lp-cardsec--icon-primary { --lp-card-icon: var(--color-primary); }
.lp-cards .lp-ibox__title {
  margin-bottom: 10px;
  color: var(--lp-card-color, var(--color-text));
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.lp-cards .lp-ibox__text { color: var(--lp-card-color, var(--color-text)); }
.lp-cardsec--light-text { --lp-card-color: var(--color-white); }
@media (max-width: 767px) {
  .lp-cards { grid-template-columns: 1fr; padding: 0; }
  .lp-cardsec--3 .lp-cards { grid-template-columns: 1fr; }
  .lp-cardsec--mpad .lp-cards { padding: 10px; }
  .lp-cards .lp-ibox { flex-direction: column; }
}

/* --- Galerij: afgeronde hoeken (10px; landing-b 5px met lichtere laag) ---- */
.lp-projects__more { align-self: center; max-width: 100%; }
.lp-gallery .gallery__item { border-radius: 10px; }
.lp-projects--r5 .lp-gallery .gallery__item { border-radius: 5px; }
.lp-projects--r5 .lp-gallery .gallery__item:hover .gallery__overlay,
.lp-projects--r5 .lp-gallery .gallery__item:focus-visible .gallery__overlay { background-color: #0000004F; }

/* --- Prijskaarten ------------------------------------------------------- */
.lp-prices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 10px;
  list-style: none;
}
.lp-price {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  background-color: var(--color-mist);
  text-align: center;
}
.lp-price p { margin-bottom: 0; }
.lp-price__label {
  font-size: var(--fs-accent);
  font-weight: var(--fw-accent);
  text-transform: uppercase;
}
.lp-price__amount { font-size: 28px; }
.lp-price__amount small { font-size: 80%; }
.lp-price--featured { background-color: var(--color-primary); }
.lp-price--featured .lp-price__label { color: var(--color-accent); }
.lp-price--featured .lp-price__amount,
.lp-price--featured .lp-price__sub { color: var(--color-white); }
/* label "meest voorkomend": 50px opgetrokken, neemt zelf geen ruimte in */
.lp-price__badge { align-self: center; height: 0; max-width: 100%; line-height: 0; }
.lp-price__badge-in {
  display: block;
  margin-top: -50px;
  padding: 8px 20px;
  border: 2px solid var(--color-accent);
  border-radius: 33px;
  background-color: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}
.lp-price__badge-in > span { display: block; }
@media (max-width: 767px) {
  .lp-prices__grid { grid-template-columns: 1fr; }
  .lp-price--featured { order: -99999; }
  .lp-price__badge-in { padding: 8px 25px; }
}

/* --- Reviews ----------------------------------------------------------- */
.lp-reviews { --pt: 15px; --pb: 15px; --pl: 0px; --pr: 0px; }
.lp-reviews--mist { --pt: 40px; --pb: 40px; --bg: var(--color-mist); }
.lp-reviews__title {
  margin-block: 2%;
  color: var(--color-primary);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.lp-reviews .reviews-widget { min-height: 327.90625px; }
@media (max-width: 767px) {
  .lp-reviews { --pt: 30px; --pb: 30px; --pl: 10px; --pr: 10px; }
  .lp-reviews__title { font-size: 30px; }
}

/* --- Veelgestelde vragen (licht; plus/min rechts) ------------------------ */
.lp-faq {
  --acc-space: 0px;
  --acc-pad: 25px;
  --acc-bg: transparent;
  --acc-color: #1F2124;
  --acc-border: 0px;
  --acc-radius: 0px;
  --acc-icon: 15px;
  --acc-gap: 10px;
}
.lp-faq .accordion__title {
  justify-content: space-between;
  border-bottom: 2px solid #E7E7E7FA;
  border-radius: 0;
}
.lp-faq .accordion__item[open] > .accordion__title { border-bottom-width: 2px; }
.lp-faq .accordion__icon { order: 1; }
.lp-faq .accordion__q { flex-grow: 0; font-size: 16px; }
.lp-faq .accordion__panel { padding: 10px; border: 0; border-radius: 0; }
.lp-faq .accordion__a { padding: 25px 0 15px; color: var(--color-text); }
.lp-faq .accordion__a a { color: inherit; }
@media (max-width: 767px) {
  .lp-faq .accordion__q { font-size: 18px; }
}

/* --- Hero zonder formulier (vanaf 881px en tot en met 880px) --------------- */
.lp-hero {
  --justify: center;
  --gap: 50px;
  --pt: 60px; --pb: 60px; --pl: 0px; --pr: 0px;
  background-repeat: repeat;
}
.lp-hero--d {
  --minh: 506px;
  background-image: url("/img/bg/L5gGU3NtLK-1500.webp"); background-image: image-set(url("/img/bg/L5gGU3NtLK-1500.avif") type("image/avif"), url("/img/bg/L5gGU3NtLK-1500.webp") type("image/webp"));
  background-position: 604px 0;
  background-size: 70% auto;
}
.lp-hero--d::before {
  background-image: linear-gradient(279deg, #4E4E4EBA 23%, var(--color-primary) 60%);
  opacity: 0.99;
}
.lp-hero--m {
  background-image: url("/img/bg/h_wdnB0QQT-768.webp"); background-image: image-set(url("/img/bg/h_wdnB0QQT-768.avif") type("image/avif"), url("/img/bg/h_wdnB0QQT-768.webp") type("image/webp"));
  background-position: 568px -470px;
  background-size: 67% auto;
}
.lp-hero--m::before { background-color: var(--color-text); opacity: 0.9; }

.lp-hero__title {
  flex-shrink: 0;
  max-width: 100%;
  margin-bottom: 10px;
  color: var(--color-white);
  text-align: start;
}
.lp-hero__text { max-width: 100%; color: var(--color-white); font-weight: 500; }
.lp-hero__text--shadow { text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
.lp-hero__btns { --dir: row; }
.lp-hero__btn { align-self: flex-start; max-width: 100%; }
.lp-hero--checks8 .lp-checks-wrap { --lp-checks-gap: 8px; }

@media (min-width: 768px) {
  .lp-hero { --content: 1140px; }
}
@media (max-width: 1366px) {
  .lp-hero--d { background-position: 407px 0; }
}
@media (max-width: 1200px) {
  .lp-hero { --pt: 40px; --pb: 40px; --pl: 10px; --pr: 10px; }
  .lp-hero--d { background-position: -322px 0; }
}
@media (max-width: 1024px) {
  .lp-hero--d { background-position: -281px 0; }
  .lp-hero--m { background-position: 0 0; }
}
@media (max-width: 767px) {
  .lp-hero--d { background-position: 0 0; }
  .lp-hero--m {
    --gap: 30px;
    background-image: url("/img/bg/L5gGU3NtLK-1500.webp"); background-image: image-set(url("/img/bg/L5gGU3NtLK-1500.avif") type("image/avif"), url("/img/bg/L5gGU3NtLK-1500.webp") type("image/webp"));
    background-position: 477px 1px;
    background-size: 1000px auto;
  }
  .lp-hero--m::before { opacity: 0.66; }
  .lp-hero__title { font-size: 26px; }
  .lp-hero--m .lp-hero__btns { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; }
}

/* --- Kaarten: icoon boven, gecentreerd; kop 38px met mobiel 26px ------------ */
.lp-cardsec--center .lp-cards .lp-ibox { align-items: stretch; text-align: center; }
.lp-cardsec--center .lp-cards .lp-ibox__icon { text-align: center; }
.lp-cardsec--center .lp-cards .lp-ibox__icon .icon { display: inline-block; }
@media (max-width: 767px) {
  .lp-title--m26 { font-size: 26px; }
}