/* =========================================================
   Dienstenlandingspagina's voor Google Ads
   Ingeladen op /diensten/laadpalen/ en /diensten/groepenkasten/.
   Gebruikt de bestaande design tokens uit houtman.webflow.css.
   Prefix .lp- = landing page.
   ========================================================= */

:root {
  --lp-sand: var(--_🎨-color---background--quarry-sand);
  --lp-dark: var(--_🎨-color---neutral--dark-100);
  --lp-accent: var(--_🎨-color---accent--accent-bright);
  --lp-white: var(--_🎨-color---background--foundation-white);
  --lp-charcoal: var(--_🎨-color---background--charcoal-ledger);
}

/* ---------------------------------------------------------
   Hero: foto zichtbaar houden i.p.v. 88% dichtdekken.
   Donker verloop alleen onderin, waar de tekst staat.
   --------------------------------------------------------- */
.section.hero-service-b-section.lp-hero {
  background-image:
    linear-gradient(to bottom, rgba(25, 25, 25, .30) 0%, rgba(25, 25, 25, .42) 35%, rgba(25, 25, 25, .78) 62%, rgba(25, 25, 25, .94) 100%),
    var(--lp-hero-image);
  background-position: 0 0, 50% 50%;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

.lp-hero .master-hero-service-b {
  gap: var(--spacing--24);
}

/* Zachte schaduw houdt de tekst leesbaar, ook als de foto op een korter
   scherm hoger uitkomt en er licht blad achter de tekst valt. */
.lp-hero .master-hero-service-b h1,
.lp-hero .master-hero-service-b .label-small,
.lp-hero-sub,
.lp-hero-usps li,
.lp-rating {
  text-shadow: 0 1px 12px rgba(25, 25, 25, .55);
}

.lp-hero h1 {
  margin-bottom: 0;
  max-width: 16ch;
}

.lp-hero-sub {
  max-width: 60ch;
}

.lp-hero-price {
  color: var(--lp-accent);
  font-weight: var(--all-weights--semi-bold);
  white-space: nowrap;
}

/* Losse USP-chips onder de subtekst */
.lp-hero-usps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing--8) var(--spacing--24);
  padding: 0;
  margin: 0;
  list-style: none;
}

.lp-hero-usps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}

.lp-hero-usps svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--lp-accent);
}

/* Google-rating regel */
.lp-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}

.lp-rating-stars {
  color: var(--lp-accent);
  letter-spacing: 2px;
  font-size: 14px;
}

/* ---------------------------------------------------------
   Trustbar direct onder de hero
   --------------------------------------------------------- */
.lp-trustbar-section {
  padding-top: var(--spacing--32);
  padding-bottom: var(--spacing--32);
  background-color: var(--lp-dark);
}

.lp-trustbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing--16);
}

.lp-trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--spacing--16);
  border-left: 1px solid rgba(244, 243, 240, .16);
}

.lp-trust-item strong {
  color: var(--lp-white);
  font-family: var(--_🔠-typography---font--heading-serif);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -.5px;
  font-weight: 500;
}

.lp-trust-item span {
  color: rgba(244, 243, 240, .64);
  font-size: 14px;
  line-height: 20px;
}

/* ---------------------------------------------------------
   Sectiekop met knop rechts
   --------------------------------------------------------- */
.lp-headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing--24);
  margin-bottom: var(--spacing--48);
}

.lp-headline-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16);
  max-width: 62ch;
}

.lp-headline h2,
.lp-headline h3 {
  margin: 0;
}

/* ---------------------------------------------------------
   Prijskaarten
   --------------------------------------------------------- */
.lp-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing--24);
}

.lp-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16);
  padding: var(--spacing--32);
  background-color: #fff;
  border: 1px solid var(--_🎨-color---neutral--dark-16);
  border-radius: 5px;
}

.lp-price-card.is-featured {
  border-color: var(--lp-dark);
  box-shadow: 0 0 0 1px var(--lp-dark);
}

.lp-price-badge {
  position: absolute;
  top: -11px;
  left: var(--spacing--32);
  padding: 3px 10px;
  background-color: var(--lp-accent);
  color: var(--lp-dark);
  border-radius: 5px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

.lp-price-card.is-featured .lp-price-badge {
  background-color: var(--lp-dark);
  color: var(--lp-accent);
}

.lp-price-name {
  font-family: var(--_🔠-typography---font--heading-serif);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -.5px;
  color: var(--lp-dark);
  margin: 0;
  font-weight: 500;
}

.lp-price-kicker {
  color: rgba(25, 25, 25, .64);
  font-size: 15px;
  line-height: 22px;
  margin: 0;
}

.lp-price-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: var(--spacing--16);
  border-bottom: 1px solid var(--_🎨-color---neutral--dark-16);
}

.lp-price-amount b {
  font-family: var(--_🔠-typography---font--heading-serif);
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -1px;
  color: var(--lp-dark);
  font-weight: 500;
}

.lp-price-amount span {
  color: rgba(25, 25, 25, .64);
  font-size: 14px;
  line-height: 20px;
}

.lp-spec-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.lp-spec-list li {
  display: flex;
  gap: 10px;
  color: rgba(25, 25, 25, .88);
  font-size: 15px;
  line-height: 22px;
}

.lp-spec-list svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--lp-dark);
}

.lp-price-note {
  margin-top: var(--spacing--24);
  padding: var(--spacing--24);
  background-color: var(--lp-sand);
  border-radius: 5px;
  color: rgba(25, 25, 25, .88);
  font-size: 15px;
  line-height: 24px;
}

.lp-price-note strong {
  font-weight: var(--all-weights--semi-bold);
}

/* ---------------------------------------------------------
   Wat zit er in de prijs
   --------------------------------------------------------- */
.lp-incl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing--24);
}

.lp-incl-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16);
  padding: var(--spacing--32);
  border-radius: 5px;
}

.lp-incl-col.is-in {
  background-color: var(--lp-dark);
  color: var(--lp-white);
}

.lp-incl-col.is-extra {
  background-color: var(--lp-sand);
  color: var(--lp-dark);
}

.lp-incl-col h3 {
  margin: 0;
  font-family: var(--_🔠-typography---font--heading-serif);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -.5px;
  font-weight: 500;
}

.lp-incl-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-incl-col li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 22px;
}

.lp-incl-col.is-in li {
  color: rgba(244, 243, 240, .88);
}

.lp-incl-col.is-extra li {
  color: rgba(25, 25, 25, .88);
}

.lp-incl-col svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.lp-incl-col.is-in svg { color: var(--lp-accent); }
.lp-incl-col.is-extra svg { color: var(--lp-dark); }

.lp-incl-foot {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.lp-incl-col.is-in .lp-incl-foot { color: rgba(244, 243, 240, .64); }
.lp-incl-col.is-extra .lp-incl-foot { color: rgba(25, 25, 25, .64); }

/* ---------------------------------------------------------
   Groepenkast-blok
   --------------------------------------------------------- */
.lp-kast-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing--48);
  align-items: center;
}

.lp-kast-image {
  border-radius: 5px;
  overflow: hidden;
  height: 100%;
  min-height: 380px;
}

/* ---------------------------------------------------------
   Signalenraster ("wanneer moet je kast vervangen")
   --------------------------------------------------------- */
.lp-signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing--16);
}

.lp-signal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--spacing--24);
  background-color: #fff;
  border: 1px solid var(--_🎨-color---neutral--dark-16);
  border-left: 3px solid var(--lp-accent);
  border-radius: 5px;
}

.lp-signal strong {
  color: var(--lp-dark);
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--all-weights--semi-bold);
}

.lp-signal span {
  color: rgba(25, 25, 25, .64);
  font-size: 14px;
  line-height: 21px;
}

/* ---------------------------------------------------------
   Werkwijze in stappen
   --------------------------------------------------------- */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing--24);
  counter-reset: lp-step;
}

.lp-step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--12);
  padding-top: var(--spacing--24);
  border-top: 2px solid var(--lp-dark);
}

.lp-step-num {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(25, 25, 25, .48);
}

.lp-step h3 {
  margin: 0;
  font-family: var(--_🔠-typography---font--heading-serif);
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -.5px;
  color: var(--lp-dark);
  font-weight: 500;
}

.lp-step p {
  margin: 0;
  color: rgba(25, 25, 25, .64);
  font-size: 15px;
  line-height: 22px;
}

/* ---------------------------------------------------------
   FAQ (native details/summary — geen extra JS nodig)
   --------------------------------------------------------- */
.lp-faq {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--12);
}

.lp-faq-item {
  background-color: var(--lp-sand);
  border-radius: 5px;
  overflow: hidden;
}

.lp-faq-item > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing--24);
  padding: var(--spacing--24);
  cursor: pointer;
  list-style: none;
  color: var(--lp-dark);
  font-size: 17px;
  line-height: 24px;
  font-weight: var(--all-weights--semi-bold);
}

.lp-faq-item > summary::-webkit-details-marker { display: none; }

.lp-faq-icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--_🎨-color---neutral--dark-48);
  border-radius: 5px;
}

.lp-faq-icon::before,
.lp-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--lp-dark);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}

.lp-faq-icon::before { width: 10px; height: 1.5px; }
.lp-faq-icon::after  { width: 1.5px; height: 10px; }

.lp-faq-item[open] .lp-faq-icon::after { opacity: 0; }

.lp-faq-answer {
  padding: 0 var(--spacing--24) var(--spacing--24);
  color: rgba(25, 25, 25, .72);
  font-size: 15px;
  line-height: 24px;
  max-width: 78ch;
}

.lp-faq-answer p { margin: 0 0 10px; }
.lp-faq-answer p:last-child { margin-bottom: 0; }
.lp-faq-answer a { color: var(--lp-dark); text-decoration: underline; }

/* ---------------------------------------------------------
   Offerteformulier op de pagina zelf
   --------------------------------------------------------- */
.lp-form-section {
  background-color: var(--lp-dark);
  scroll-margin-top: 96px;
}

.lp-form-halves {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--spacing--48);
  align-items: start;
}

.lp-form-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--24);
}

.lp-form-intro h2 {
  margin: 0;
  color: var(--lp-white);
}

.lp-form-intro p {
  margin: 0;
  color: rgba(244, 243, 240, .72);
  font-size: 17px;
  line-height: 26px;
  max-width: 46ch;
}

.lp-form-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-form-points li {
  display: flex;
  gap: 10px;
  color: rgba(244, 243, 240, .88);
  font-size: 15px;
  line-height: 22px;
}

.lp-form-points svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--lp-accent);
}

.lp-form-person {
  display: flex;
  align-items: center;
  gap: var(--spacing--16);
  padding-top: var(--spacing--24);
  border-top: 1px solid rgba(244, 243, 240, .16);
}

.lp-form-person img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

.lp-form-person-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-form-person-text strong {
  color: var(--lp-white);
  font-size: 15px;
  font-weight: var(--all-weights--semi-bold);
}

.lp-form-person-text a {
  color: var(--lp-accent);
  font-size: 15px;
  text-decoration: none;
}

.lp-form-person-text a:hover { text-decoration: underline; }

.lp-form-card {
  padding: var(--spacing--32);
  background-color: var(--lp-white);
  border-radius: 5px;
}

.lp-form-card .contact-form-inner { width: 100%; }

/* ---------------------------------------------------------
   Vaste CTA-balk op mobiel
   --------------------------------------------------------- */
.lp-sticky-cta {
  display: none;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .lp-trustbar { grid-template-columns: repeat(2, 1fr); }
  .lp-price-grid { grid-template-columns: 1fr; }
  .lp-incl-grid { grid-template-columns: 1fr; }
  .lp-kast-halves { grid-template-columns: 1fr; gap: var(--spacing--32); }
  .lp-kast-image { min-height: 280px; }
  .lp-signals { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { grid-template-columns: repeat(2, 1fr); }
  .lp-form-halves { grid-template-columns: 1fr; gap: var(--spacing--32); }
}

@media screen and (max-width: 767px) {
  .lp-hero h1 { max-width: none; }

  .lp-signals { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr; }

  .lp-price-card,
  .lp-incl-col,
  .lp-form-card { padding: var(--spacing--24); }

  .lp-price-badge { left: var(--spacing--24); }

  .lp-headline { margin-bottom: var(--spacing--32); }

  /* Vaste bel-/offertebalk onderin het scherm */
  .lp-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background-color: rgba(25, 25, 25, .96);
    backdrop-filter: blur(8px);
  }

  .lp-sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: var(--all-weights--semi-bold);
    text-decoration: none;
  }

  .lp-sticky-cta .lp-sticky-call {
    background-color: transparent;
    color: var(--lp-white);
    border: 1px solid rgba(244, 243, 240, .32);
  }

  .lp-sticky-cta .lp-sticky-quote {
    background-color: var(--lp-accent);
    color: var(--lp-dark);
  }

  .lp-sticky-cta svg { width: 16px; height: 16px; }

  /* extra voetruimte in de footer zelf, zodat de balk niets afdekt
     en er geen losse strook onder de footer ontstaat */
  .section.footer { padding-bottom: calc(var(--section-padding--small) + 68px); }

  /* telefoonnummer en dienst onder elkaar: prettiger te typen op mobiel */
  .lp-form-card .input-halves { grid-template-columns: 1fr; }

  /* prijs links uitlijnen zodra de kaart in één kolom valt */

  /* WhatsApp-knop boven de vaste balk houden */
  .whatsapp-block { bottom: 84px; }
}

@media screen and (max-width: 479px) {
  .lp-trustbar { grid-template-columns: 1fr 1fr; }
  .lp-trust-item strong { font-size: 20px; line-height: 24px; }
}

/* ---------------------------------------------------------
   Correcties
   --------------------------------------------------------- */

/* Het formulier staat in een donkere sectie, maar de kaart zelf is licht.
   Labels erven anders de lichte tekstkleur en worden onleesbaar. */
.lp-form-card,
.lp-form-card .label-large,
.lp-form-card .checkbox-text,
.lp-form-card .text-small,
.lp-form-card .w-form-label,
.lp-form-card .success-message,
.lp-form-card .error-message {
  color: var(--lp-dark);
}

.lp-form-card .checkbox-contact {
  border-color: rgba(25, 25, 25, .32);
  background-color: #fff;
}

/* Voorkomt dat langere tekst uit de vaste kaarthoogte loopt. */
.service-c-features-section .card-features.large {
  height: auto;
  min-height: 332px;
}

/* Eyebrow leesbaar houden boven de foto. */
.lp-hero .eyebrow .label-small {
  color: rgba(244, 243, 240, .88);
}

/* =========================================================
   CRO-ronde 25-08-2026
   ========================================================= */

/* Review direct onder de prijskaarten. De Google-reviews stonden ~6.000px
   verderop; op het moment dat iemand naar de prijs kijkt stond er geen
   enkel verhaal naast. */
.lp-proof {
  display: flex;
  gap: var(--spacing--16);
  align-items: flex-start;
  margin-top: var(--spacing--16);
  padding: var(--spacing--24);
  background-color: #fff;
  border: 1px solid var(--_🎨-color---neutral--dark-16);
  border-radius: 5px;
}

.lp-proof-logo {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 2px;
}

.lp-proof-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-proof-quote {
  margin: 0;
  color: var(--lp-dark);
  font-size: 16px;
  line-height: 25px;
  max-width: 78ch;
}

.lp-proof-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: rgba(25, 25, 25, .56);
  font-size: 13px;
  line-height: 18px;
}

.lp-proof-meta strong {
  color: var(--lp-dark);
  font-weight: var(--all-weights--semi-bold);
  font-size: 14px;
}

.lp-proof-stars {
  color: #e8a800;
  letter-spacing: 1px;
}

/* Bewijs in de modal. Zeven CTA's komen hier uit, en er stond geen
   rating, geen review en geen prijs. */
.lp-modal-proof {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--spacing--16);
  padding-bottom: var(--spacing--16);
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  line-height: 21px;
}

.lp-modal-proof-rating,
.lp-modal-proof-belofte { display: block; }
.lp-modal-proof .lp-proof-stars { font-size: 13px; margin-right: 6px; }
.lp-modal-proof strong { font-weight: var(--all-weights--semi-bold); }

/* Passieve akkoordregel in plaats van een verplicht vinkje. */
.lp-consent {
  margin: var(--spacing--12) 0 0;
  color: rgba(25, 25, 25, .56);
  font-size: 13px;
  line-height: 19px;
}

.lp-consent a { color: inherit; text-decoration: underline; }

.label-optioneel {
  color: rgba(25, 25, 25, .48);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  /* Drie keer "Offerte aanvragen" op hetzelfde scherm: in de navigatie, in de
     hero en in de vaste balk onderin. De vaste balk blijft altijd staan en
     doet hetzelfde, dus de knop in de navigatie kan weg. Twee selectors, want
     de statische en de sticky nav gebruiken verschillende klassen. Alleen onder 768px,
     want daarboven bestaat die balk niet. */
  .master-navigation .cta-main.nav.accent-cta,
  .master-navigation .cta-main.header { display: none; }

  /* Verzendknoppen haalden 40px; onder de 44px die je voor een duim wilt. */
  .lp-form-card .submit-wrap .cta-main,
  .modal-book .submit-wrap .cta-main {
    min-height: 48px;
  }

  .lp-proof { padding: var(--spacing--16); gap: var(--spacing--12); }
  .lp-proof-quote { font-size: 15px; line-height: 23px; }
}

/* Het uitgelichte citaat was een <h3> en verscheen daardoor als sectiekop in
   de koppenstructuur, terwijl het geen sectie inleidt. Nu een blockquote met
   dezelfde opmaak. */
.testimonial-top-tile .lp-quote {
  margin: 0;
  font-family: var(--_🔠-typography---font-family--h3);
  font-size: var(--_🔠-typography---size--h3);
  line-height: var(--_🔠-typography---line-height--h3);
  font-weight: var(--_🔠-typography---font-weight--h3);
  letter-spacing: var(--_🔠-typography---letter-spacing--h3);
  color: inherit;
}

/* Ritmiek: acht van de veertien secties hadden exact 80px boven en onder,
   waardoor twee secties over hetzelfde onderwerp net zo ver uit elkaar
   stonden als twee losse onderwerpen. Een vervolgsectie leunt nu tegen zijn
   voorganger aan: 80px ertussen in plaats van 160px. */
.section.lp-vervolg {
  padding-top: 0;
}