@charset "UTF-8";
/* Plus Jakarta Sans en Nunito, zelf gehost.
   Zet de woff2-bestanden in css/fonts/ en haal de Google-link uit de <head>. */
*, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* overflow-x hoort hier niet: dat maakt van de body een scroll-container
     en dan werkt de sticky header niet meer. Secties die zelf te breed
     kunnen worden vangen we per stuk op. */
  body { overflow-x: clip; }
  body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #1A2B3C;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: inherit; }
  button { font-family: inherit; }
  ::selection { background: #FF6600; color: #fff; }
  html { scroll-behavior: smooth; }

  /* ── Responsive layout classes (override inline styles at breakpoints) ── */
  .r-hero        { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
  .r-hero-title  { font-size: 80px; }
  .r-header-nav  { display: flex; gap: 28px; }
  .r-header-cta  { display: flex; align-items: center; gap: 14px; }
  .r-4col        { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .r-2col-lg     { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
  .r-4step       { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .r-3col        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: minmax(280px, auto); }
  .r-2col        { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .r-brochure    { display: grid; grid-template-columns: 1fr 1.2fr; }
  .r-footer      { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
  .r-hero-bg     { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; }

  @media (max-width: 1080px) {
    .r-hero-title { font-size: 60px !important; line-height: 1.05 !important; }
    .r-footer     { grid-template-columns: 1fr 1fr !important; }
  }

  @media (max-width: 900px) {
    .r-hero       { grid-template-columns: 1fr !important; }
    .r-hero-bg    { display: none !important; }
    .r-4col       { grid-template-columns: 1fr 1fr !important; }
    .r-4step      { grid-template-columns: 1fr 1fr !important; }
    .r-brochure   { grid-template-columns: 1fr !important; }
    .r-2col-lg    { grid-template-columns: 1fr !important; gap: 32px !important; }
    .r-header-nav { display: none !important; }
  }

  @media (max-width: 640px) {
    .r-hero-title { font-size: 42px !important; }
    .r-4col       { grid-template-columns: 1fr !important; }
    .r-4step      { grid-template-columns: 1fr !important; }
    .r-3col       { grid-template-columns: 1fr !important; }
    .r-2col       { grid-template-columns: 1fr !important; }
    .r-footer     { grid-template-columns: 1fr !important; }
    .r-header-cta a { display: none !important; }
  }

  /* Proces connecting line: only visible on full 4-col desktop layout */
  .r-proc-line {
    position: absolute; left: 8%; right: 8%; top: 56px; height: 2px;
  }
  @media (max-width: 900px) {
    .r-proc-line { display: none !important; }
  }

  /* Brochure right column: fix padding when stacked */
  .r-brochure-right { padding: 48px 48px 48px 0; color: #fff; display: flex; flex-direction: column; justify-content: center; }
  @media (max-width: 900px) {
    .r-brochure-right { padding: 0 32px 40px 32px !important; }
  }

/* ── uitklapvragen ── */
.faq-knop { cursor: pointer; }
.faq-antwoord { display: none; }
.faq-antwoord.open { display: block; }
.faq-knop[aria-expanded="true"] .faq-teken { transform: rotate(45deg); }
.faq-teken { display: inline-block; transition: transform .2s ease; }

/* ── afbeeldingen ── */
img { max-width: 100%; }

/* ── lettertypen komen van onze eigen server, niet van Google ── */


/* ══ processectie, opnieuw opgebouwd ══════════════════════ */
.psec-head { max-width: 40ch; margin-bottom: 44px; }
.ppill { display: inline-block; background: #FF6600; color: #fff; font-size: 12px;
         font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
         padding: 6px 14px; border-radius: 999px; }
.psec-head h2 { margin: 16px 0 0; font-family: 'Nunito', sans-serif; font-weight: 800;
                font-size: clamp(28px, 4vw, 42px); line-height: 1.12; color: #1A2B3C; }
.psec-head p { margin: 14px 0 0; color: #5A6B7B; font-size: 17px; line-height: 1.6; }

.psteps { display: grid; gap: 20px; }
.pstep { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0;
         background: #fff; border: 1px solid #E1E8EE; border-radius: 20px;
         overflow: hidden; box-shadow: 0 4px 14px rgba(26,43,60,.06); }
.pstep:nth-child(even) .pstep-beeld { order: 2; }
.pstep-beeld { position: relative; min-height: 260px; }
.pstep-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pstep-beeld figcaption {
  position: absolute; left: 16px; bottom: 16px; background: rgba(255,255,255,.95);
  color: #1A2B3C; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
}
.pstep-tekst { padding: 34px 36px; align-self: center; }
.pstep-n { font-family: 'Nunito', sans-serif; font-size: 34px; font-weight: 800;
           line-height: 1; color: #FF6600; }
.pstep-tekst h3 { margin: 10px 0 0; font-family: 'Nunito', sans-serif; font-weight: 800;
                  font-size: 23px; line-height: 1.2; color: #1A2B3C; }
.pstep-tekst p { margin: 12px 0 0; color: #5A6B7B; font-size: 15.5px; line-height: 1.65; }




.pcta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.btn-proces { display: inline-flex; align-items: center; gap: 10px; background: #FF6600;
              color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
              padding: 15px 26px; border-radius: 12px; transition: background .15s; }
.btn-proces:hover { background: #E55C00; }
.pcta span { color: #5A6B7B; font-size: 14.5px; }

@media (max-width: 860px) {
  .pstep { grid-template-columns: 1fr; }
  .pstep:nth-child(even) .pstep-beeld { order: 0; }
  .pstep-beeld { min-height: 210px; aspect-ratio: 16 / 10; }
  .pstep-tekst { padding: 26px 24px; }
}




/* ══ de agenda binnen de ontworpen kaart ══════════════════ */
.boekvak { min-height: 560px; margin: 4px 0 2px; }
/* tekst zolang de agenda nog aan het laden is */
.boekvak > p { padding: 48px 6px; text-align: center; color: #5A6B7B;
               font-size: 14px; line-height: 1.6; margin: 0; }
.boekvak > p b { color: #1A2B3C; }
.boekvak iframe { border: 0; width: 100%; }


/* ══ echte Google-reviews ══════════════════════════════════ */
.grev-head { max-width: 46ch; margin-bottom: 40px; }
.grev-score { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.grev-cijfer { font-family: 'Nunito', sans-serif; font-size: 46px; font-weight: 800;
               line-height: 1; color: #1A2B3C; }
.grev-score > span:last-child { display: block; }
.grev-aantal { display: block; margin-top: 2px; font-size: 14px; color: #5A6B7B; }
.grev-head h2 { margin: 0; font-family: 'Nunito', sans-serif; font-weight: 800;
                font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; color: #1A2B3C; }
.grev-head p { margin: 12px 0 0; color: #5A6B7B; font-size: 16px; line-height: 1.6; }

.grevs { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); align-items: start; }
.grev { margin: 0; background: #fff; border: 1px solid #E1E8EE; border-radius: 16px;
        padding: 24px; box-shadow: 0 4px 14px rgba(26,43,60,.06); }
.grev-sterren { display: inline-flex; gap: 2px; line-height: 0; }
.grev p { margin: 14px 0 0; color: #1A2B3C; font-size: 15px; line-height: 1.65; }
.grev footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid #EEF3F7;
               display: flex; align-items: center; gap: 11px; }
.grev-bol { width: 38px; height: 38px; border-radius: 50%; flex: none;
            background: #FF6600; color: #fff; display: grid; place-items: center;
            font-weight: 800; font-size: 16px; }
.grev-wie { font-size: 13px; color: #5A6B7B; line-height: 1.35; }
.grev-wie b { display: block; color: #1A2B3C; font-size: 14.5px; }

@media (max-width: 980px) { .grevs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grevs { grid-template-columns: 1fr; } }


/* ══ gerealiseerd werk ═════════════════════════════════════ */
.pkaarten { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.pk { display: block; text-align: left; padding: 0; border: 1px solid #E1E8EE;
      background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer;
      font: inherit; color: inherit; transition: box-shadow .18s, transform .18s; }
.pk:hover { box-shadow: 0 14px 34px rgba(26,43,60,.14); transform: translateY(-3px); }
.pk:focus-visible { outline: 3px solid #FF6600; outline-offset: 3px; }
.pk-beeld { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.pk-beeld img { width: 100%; height: 100%; object-fit: cover; display: block;
                transition: transform .4s ease; }
.pk:hover .pk-beeld img { transform: scale(1.05); }
.pk-aantal { position: absolute; right: 12px; bottom: 12px; background: rgba(12,34,49,.86);
             color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.pk-tekst { display: block; padding: 20px 22px 24px; }
.pk-meta { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em;
           text-transform: uppercase; color: #038FE3; }
.pk-titel { display: block; margin-top: 7px; font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 19px; color: #1A2B3C; line-height: 1.2; }
.pk-kort { display: block; margin-top: 9px; color: #5A6B7B; font-size: 14.5px; line-height: 1.55; }
.pk-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
           color: #FF6600; font-weight: 700; font-size: 14.5px; }
@media (max-width: 980px) { .pkaarten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pkaarten { grid-template-columns: 1fr; } }

/* ══ eerlijk over de showroom ══════════════════════════════ */
.eerlijk { max-width: 1180px; margin: 0 auto; display: grid;
           grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.eerlijk-beeld { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.eerlijk-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eerlijk h2 { margin: 16px 0 0; font-family: 'Nunito', sans-serif; font-weight: 800;
              font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; }
.eerlijk p { margin: 16px 0 0; color: #C6D8E3; font-size: 16px; line-height: 1.7; }
.eerlijk-slot { color: #fff !important; font-weight: 700; }
@media (max-width: 860px) { .eerlijk { grid-template-columns: 1fr; gap: 28px; } }

/* ══ lichtbak ══════════════════════════════════════════════ */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(8,20,30,.94);
      display: grid; place-items: center; padding: 40px 70px; }
.lb[hidden] { display: none; }
.lb-inhoud { margin: 0; max-width: 100%; max-height: 100%; }
.lb-inhoud img { max-width: 100%; max-height: 78vh; border-radius: 10px; display: block;
                 margin: 0 auto; }
.lb-inhoud figcaption { margin-top: 14px; text-align: center; color: #fff;
                        font-size: 14.5px; display: flex; gap: 14px; justify-content: center; }
.lb-inhoud figcaption span:last-child { color: #9FB8C7; }
.lb button { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff;
             cursor: pointer; border-radius: 50%; width: 46px; height: 46px; font-size: 26px;
             line-height: 1; display: grid; place-items: center; transition: background .15s; }
.lb button:hover { background: rgba(255,255,255,.24); }
.lb button:focus-visible { outline: 3px solid #FF6600; outline-offset: 2px; }
.lb-sluit { top: 22px; right: 22px; }
.lb-vorige { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-volgende { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
  .lb { padding: 60px 12px; }
  .lb-vorige { left: 8px; } .lb-volgende { right: 8px; }
}


/* ══ reviewbalk onder de hero ══════════════════════════════ */
.revbalk { background: #fff; border-bottom: 1px solid #E1E8EE; padding: 22px 32px; }
.revbalk-in { max-width: 1180px; margin: 0 auto; display: grid;
              grid-template-columns: auto 1fr 1fr auto; gap: 30px; align-items: center; }
.revbalk-score { display: flex; align-items: center; gap: 12px; }
.revbalk-cijfer { font-family: 'Nunito', sans-serif; font-size: 38px; font-weight: 800;
                  line-height: 1; color: #1A2B3C; }
.revbalk-sterren { display: inline-flex; gap: 1px; line-height: 0; }
.revbalk-sub { display: block; margin-top: 3px; font-size: 12.5px; color: #5A6B7B; }
.revbalk-quote { margin: 0; font-size: 14px; color: #1A2B3C; line-height: 1.5; font-style: italic; }
.revbalk-quote span { display: block; margin-top: 5px; font-style: normal;
                      font-size: 12.5px; font-weight: 700; color: #5A6B7B; }
.revbalk-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
                color: #FF6600; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.revbalk-link:hover { text-decoration: underline; }
@media (max-width: 1040px) {
  .revbalk-in { grid-template-columns: auto 1fr auto; }
  .revbalk-quote:nth-of-type(2) { display: none; }
}
@media (max-width: 720px) {
  .revbalk-in { grid-template-columns: 1fr; gap: 14px; text-align: center; justify-items: center; }
  .revbalk-quote { display: none; }
}

/* de reviewsectie wat zwaarder aanzetten */
.grev-cijfer { font-size: 58px; }
.grev { border-width: 2px; }




/* video in de lichtbak */
.lb-video { width: min(90vw, 1100px); aspect-ratio: 16 / 9; }
.lb-video[hidden] { display: none; }
.lb-video iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; }
.pk-meta:empty { display: none; }

/* staande video netjes in beeld houden */
.lb-video.staand { width: auto; height: min(78vh, 900px); aspect-ratio: 9 / 16; }


/* ══ één badeendje dat meezakt langs de stappen ════════════ */
.pspoor { display: grid; grid-template-columns: 54px 1fr; gap: 0; align-items: start; }
.pspoor-lijn { position: relative; align-self: stretch; }
/* gestippeld spoor dat de drie stappen verbindt */
.pspoor-lijn::before {
  content: ""; position: absolute; left: 50%; top: 26px; bottom: 26px; width: 3px;
  transform: translateX(-50%); border-radius: 3px;
  background: repeating-linear-gradient(180deg, #FFC61E 0 7px, transparent 7px 15px);
  opacity: .55;
}
/* het eendje blijft midden in beeld hangen terwijl je scrolt, dus
   het lijkt alsof hij met je mee van stap naar stap zakt */
.pspoor-eend { position: sticky; top: 45vh; display: block; width: 52px; height: 55px;
               margin: 0 auto; z-index: 2; filter: drop-shadow(0 4px 8px rgba(26,43,60,.22));
               animation: dobber 3.4s ease-in-out infinite; }
.pspoor-eend svg { width: 100%; height: 100%; display: block; }
@keyframes dobber {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-5px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .pspoor-eend { animation: none; } }

/* op een smal scherm is er geen ruimte voor het spoor */
@media (max-width: 860px) {
  .pspoor { grid-template-columns: 1fr; }
  .pspoor-lijn { display: none; }
}


/* ══ offerte-weergave bij stap 3 ═══════════════════════════ */
.pstep-beeld:has(.offerte) { background: #F5F9FC; display: grid; place-items: center;
                             padding: 20px; min-height: 320px; }
.offerte { width: 100%; max-width: 330px; background: #fff; border: 1px solid #E1E8EE;
           border-radius: 12px; padding: 15px 17px 13px;
           box-shadow: 0 10px 26px rgba(26,43,60,.13); transform: rotate(-1.1deg); }
.off-kop { display: flex; align-items: baseline; justify-content: space-between;
           padding-bottom: 11px; border-bottom: 1px solid #EEF3F7; }
.off-merk { font-size: 15px; font-weight: 800; color: #FF6600; letter-spacing: -.02em; }
.off-merk b { color: #FF6600; }
.off-merk i { font-style: normal; font-size: 11px; font-weight: 700; color: #038FE3; }
.off-soort { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
             text-transform: uppercase; color: #8A9BAA; }

.off-regels { list-style: none; margin: 0; padding: 10px 0 0; }
.off-regels li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
                 align-items: baseline; padding: 3.5px 0; font-size: 11px;
                 border-bottom: 1px dashed #EEF3F7; }
.off-naam { color: #1A2B3C; line-height: 1.35; }
.off-aantal { color: #8A9BAA; font-size: 10.5px; white-space: nowrap; }
.off-bedrag { color: #1A2B3C; font-weight: 700; font-variant-numeric: tabular-nums;
              white-space: nowrap; }

.off-totaal { display: flex; justify-content: space-between; align-items: baseline;
              margin-top: 9px; padding-top: 9px; border-top: 2px solid #1A2B3C;
              font-size: 12px; color: #1A2B3C; }
.off-totaal b { font-size: 16px; font-variant-numeric: tabular-nums; }
.off-voet { margin: 9px 0 0; font-size: 9.5px; color: #8A9BAA; line-height: 1.4; }

@media (max-width: 860px) {
  .pstep-beeld:has(.offerte) { aspect-ratio: auto; padding: 22px; min-height: 0; }
  .offerte { transform: none; max-width: 100%; }
}

/* bij de offerte staat het label bovenaan, anders dekt het de voetregel af */
.pstep-beeld:has(.offerte) figcaption { top: 14px; bottom: auto; }


/* ══ wie je treft, bij de boekkaart ════════════════════════ */
.wie-helpt { display: flex; align-items: center; gap: 12px; padding: 14px 20px 4px; }
.wie-fotos { display: inline-flex; }
.wie-fotos img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
                 object-position: top center; border: 2px solid #fff; background: #E6F4FD;
                 margin-left: -10px; }
.wie-fotos img:first-child { margin-left: 0; }
.wie-tekst { font-size: 13px; color: #5A6B7B; line-height: 1.4; }
.wie-tekst b { color: #1A2B3C; }

/* ══ teamsectie ═══════════════════════════════════════════ */
.tms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tm { margin: 0; }
.tm-foto { display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
           background: linear-gradient(165deg, #E6F4FD, #fff); border: 1px solid #E1E8EE; }
.tm-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
               display: block; }
.tm figcaption { margin-top: 12px; }
.tm figcaption b { display: block; font-family: 'Nunito', sans-serif; font-weight: 800;
                   font-size: 17px; color: #1A2B3C; }
.tm figcaption span { display: block; margin-top: 2px; font-size: 13.5px; color: #038FE3;
                      font-weight: 600; }
@media (max-width: 780px) { .tms { grid-template-columns: repeat(2, 1fr); } }


/* ══ knoppen in de hero ════════════════════════════════════ */
.hero-acties { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }

/* de knop waar we mensen naartoe willen, dus zwaarder aangezet */
.knop-hoofd {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #00B900; color: #fff; border: 0; border-radius: 14px;
  padding: 18px 30px; font: inherit; font-weight: 800; font-size: 17px;
  letter-spacing: -.2px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(0,185,0,.75);
  transition: background .16s, transform .16s, box-shadow .16s;
}
.knop-hoofd:hover { background: #00A400; transform: translateY(-2px);
                    box-shadow: 0 16px 30px -10px rgba(0,185,0,.85); }
.knop-hoofd:active { transform: translateY(0); }
.knop-hoofd svg { transition: transform .16s; }
.knop-hoofd:hover svg { transform: translateX(3px); }

/* bellen is de tweede keus, dus rustiger en smaller */
.knop-bellen {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: rgba(255,255,255,.06); color: #fff;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 14px;
  padding: 18px 24px; font: inherit; font-weight: 700; font-size: 16px;
  text-decoration: none; white-space: nowrap;
  transition: background .16s, border-color .16s;
}
.knop-bellen:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

/* drempelregel, staat nu op een eigen regel eronder */
.hero-drempel { margin: 14px 0 22px; font-size: 13.5px; color: #9FB8C7; }

@media (max-width: 520px) {
  .hero-acties { flex-direction: column; }
  .knop-hoofd, .knop-bellen { width: 100%; }
}


/* ══ afspraakkaart in de hero ══════════════════════════════ */
.boek-lijst { list-style: none; margin: 0; padding: 18px 20px 4px; display: grid; gap: 11px; }
.boek-lijst li { display: flex; gap: 10px; align-items: flex-start;
                 font-size: 14.5px; color: #1A2B3C; line-height: 1.45; }
.boek-lijst svg { color: #00B900; flex: none; margin-top: 2px; }

.boek-knop { display: flex; align-items: center; justify-content: center; gap: 10px;
             width: calc(100% - 40px); margin: 16px 20px 0; padding: 16px 22px;
             font: inherit; font-weight: 700; font-size: 16.5px; cursor: pointer;
             background: #00B900; color: #fff; border: 0; border-radius: 12px;
             transition: background .15s; }
.boek-knop:hover { background: #009E00; }
.boek-knop:focus-visible { outline: 3px solid #FF6600; outline-offset: 3px; }
.boek-drempel { margin: 10px 20px 0; text-align: center; font-size: 12.5px; color: #5A6B7B; }

/* ══ venster met de agenda ═════════════════════════════════ */
.boekvenster { position: fixed; inset: 0; z-index: 300; background: rgba(8,20,30,.72);
               display: grid; place-items: center; padding: 24px; }
.boekvenster[hidden] { display: none; }
.boekvenster-kaart { background: #fff; border-radius: 18px; overflow: hidden;
                     width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column;
                     box-shadow: 0 30px 70px rgba(8,20,30,.4); }
.boekvenster-kop { display: flex; align-items: center; justify-content: space-between;
                   padding: 16px 20px; border-bottom: 1px solid #E1E8EE;
                   font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 18px; color: #1A2B3C; }
.boekvenster-sluit { background: #F5F9FC; border: 0; width: 36px; height: 36px; border-radius: 50%;
                     font-size: 24px; line-height: 1; color: #5A6B7B; cursor: pointer; }
.boekvenster-sluit:hover { background: #E6F4FD; color: #1A2B3C; }
.boekvenster-vak { flex: 1; min-height: 620px; }
.boekvenster-vak iframe { width: 100%; height: 100%; min-height: 620px; border: 0; display: block; }
@media (max-width: 620px) {
  .boekvenster { padding: 0; }
  .boekvenster-kaart { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

/* valt het insluiten weg, dan blijft er een uitweg staan */
.boekvenster-uitweg { margin: 0; padding: 12px 20px 16px; border-top: 1px solid #E1E8EE;
                      font-size: 13.5px; color: #5A6B7B; text-align: center; }
.boekvenster-uitweg[hidden] { display: none; }
.boekvenster-uitweg a { color: #FF6600; font-weight: 700; }


/* ══ agenda in de afspraakkaart ════════════════════════════ */
.boekvak { margin: 4px 0 0; min-height: 560px; }
.boekvak iframe { width: 100%; height: 560px; border: 0; display: block; }
.boek-uitweg { margin: 0; padding: 12px 20px 4px; font-size: 13px; color: #5A6B7B; text-align: center; }
.boek-uitweg[hidden] { display: none; }
.boek-uitweg a { color: #FF6600; font-weight: 700; }
@media (max-width: 620px) {
  .boekvak, .boekvak iframe { min-height: 620px; height: 620px; }
}


/* ══ eigen afspraakkaart ═══════════════════════════════════ */
.ak { padding: 0 20px 20px; }
.ak-balk { display: flex; gap: 6px; margin: 14px 0 18px; }
.ak-balk span { flex: 1; height: 4px; border-radius: 3px; background: #E1E8EE; transition: background .25s; }
.ak-balk span.aan { background: #00B900; }

.ak-kop { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
          color: #1A2B3C; margin: 0 0 10px; }
.ak-laden { margin: 0; padding: 20px 0; color: #5A6B7B; font-size: 14px; }

.ak-dagen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ak-dag { text-align: left; background: #fff; border: 1.5px solid #E1E8EE; border-radius: 12px;
          padding: 12px 14px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.ak-dag:hover { border-color: #00B900; }
.ak-dag.gekozen { border-color: #00B900; box-shadow: 0 0 0 3px rgba(0,185,0,.13); background: #F4FCF4; }
.ak-dag b { display: block; font-size: 15.5px; color: #1A2B3C; }
.ak-datum { display: block; font-size: 12.5px; color: #5A6B7B; margin-top: 1px; }
.ak-vrij { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: #00B900; }
.ak-vrij.krap { color: #FF6600; }
.ak-dag.vol { background: #F5F7F9; cursor: not-allowed; opacity: .75; }
.ak-dag.vol:hover { border-color: #E1E8EE; }
.ak-vrij.vol { color: #8A9AA8; }
/* ziet eruit als een gewone link, want dat leest als aanklikbaar */
.ak-meer { margin-top: 10px; background: none; border: 0; color: #5A6B7B; font: inherit;
           font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 4px 0;
           text-decoration: underline; text-underline-offset: 3px;
           text-decoration-thickness: 1.5px; }
.ak-meer:hover { color: #1A2B3C; text-decoration-thickness: 2px; }

.ak-tijden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ak-tijd { background: #fff; border: 1.5px solid #E1E8EE; border-radius: 10px; padding: 11px 6px;
           font: inherit; font-size: 14.5px; font-weight: 600; color: #1A2B3C; cursor: pointer;
           transition: border-color .15s; }
.ak-tijd:hover { border-color: #00B900; }
.ak-tijd.gekozen { background: #00B900; border-color: #00B900; color: #fff; }

[data-vak="tijden"], [data-vak="gegevens"] { margin-top: 18px; }
.ak-form { display: grid; gap: 12px; }
.ak-form label { display: block; font-size: 12.5px; font-weight: 700; color: #1A2B3C; }
.ak-optioneel { font-weight: 500; color: #8A9BAA; }
.ak-form input, .ak-form textarea {
  width: 100%; margin-top: 5px; font: inherit; font-size: 14.5px; color: #1A2B3C;
  background: #fff; border: 1.5px solid #E1E8EE; border-radius: 10px; padding: 11px 13px;
  box-sizing: border-box; resize: vertical;
}
.ak-form input:focus, .ak-form textarea:focus { outline: 2px solid #00B900; outline-offset: 1px; border-color: #00B900; }
.ak-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ak-verstuur { margin-top: 2px; background: #00B900; color: #fff; border: 0; border-radius: 12px;
               padding: 15px 22px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.ak-verstuur:hover { background: #009E00; }
.ak-verstuur:disabled { opacity: .6; cursor: default; }

.ak-status { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: #5A6B7B; }
.ak-status.fout { color: #C0492F; font-weight: 600; }

.ak-klaar { text-align: center; padding: 26px 6px 10px; }
.ak-klaar svg { color: #00B900; }
.ak-klaar h3 { margin: 12px 0 0; font-family: 'Nunito', sans-serif; font-weight: 800;
               font-size: 22px; color: #1A2B3C; }
.ak-klaar p { margin: 10px 0 0; font-size: 14.5px; color: #5A6B7B; line-height: 1.55; }
.ak-klaar b { color: #1A2B3C; }
.ak-adres { font-size: 13px !important; }

@media (max-width: 420px) {
  .ak-dagen, .ak-rij { grid-template-columns: 1fr; }
  .ak-tijden { grid-template-columns: repeat(2, 1fr); }
}

/* maandag kun je niet inplannen, maar de deur is open */
.ak-maandag { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0;
              background: #FFF6EC; border: 1px solid #FFD9B8; border-radius: 10px;
              padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: #7A4A18; }
.ak-maandag svg { flex: none; margin-top: 1px; color: #FF6600; }
.ak-maandag b { color: #7A4A18; }

/* tegels die alvast de vorm aangeven terwijl de agenda laadt */
.ak-skelet { display: block; height: 78px; border-radius: 12px;
             background: linear-gradient(100deg, #F2F6F9 30%, #E8EFF4 50%, #F2F6F9 70%);
             background-size: 220% 100%; animation: skelet 1.1s ease-in-out infinite; }
@keyframes skelet { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .ak-skelet { animation: none; } }

/* melding die alleen bij een bepaalde dag hoort */
.ak-dagmelding { margin: 4px 0 22px; background: #FFF6EC; border: 1px solid #FFD9B8;
                 border-radius: 10px; padding: 10px 12px; font-size: 12.5px;
                 line-height: 1.45; color: #7A4A18; }
.ak-dagmelding[hidden] { display: none; }
.ak-dagmelding b { color: #7A4A18; }

.ak-meer:disabled { color: #8A9BAA; cursor: default; text-decoration: none; }

/* zonder afspraak langskomen mag ook */
.ak-inloop { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #EEF3F7;
             font-size: 12.5px; line-height: 1.5; color: #8A9BAA; }

/* een lange dagenlijst scrollt, anders rekt de hele kaart uit */
.ak-dagen.uitgeklapt { max-height: 300px; overflow-y: auto; padding-right: 4px;
                       scrollbar-width: thin; scrollbar-color: #C9D6DF transparent; }
.ak-dagen.uitgeklapt::-webkit-scrollbar { width: 7px; }
.ak-dagen.uitgeklapt::-webkit-scrollbar-thumb { background: #C9D6DF; border-radius: 4px; }
.ak-dagen.uitgeklapt::-webkit-scrollbar-track { background: transparent; }


/* ══ stap voor stap: terugknop en wat je gekozen hebt ══════ */
.ak-gekozen { display: flex; align-items: center; justify-content: space-between;
              gap: 12px; margin: 0 0 14px; padding-bottom: 12px;
              border-bottom: 1px solid #EEF3F7; font-size: 13.5px; color: #5A6B7B; }
.ak-gekozen b { color: #1A2B3C; font-weight: 700; }
.ak-terug { order: -1; background: none; border: 0; padding: 4px 0; cursor: pointer;
            font: inherit; font-size: 13.5px; font-weight: 600; color: #5A6B7B;
            text-decoration: underline; text-underline-offset: 3px;
            text-decoration-thickness: 1.5px; white-space: nowrap; }
.ak-terug:hover { color: #1A2B3C; }
.ak-terug::before { content: '\2039 '; margin-right: 6px; font-size: 18px; line-height: 1; }
.ak-gekozen span { text-align: right; }


/* ══ doorklikken naar de ontwerpen bij stap 2 ═════════════ */
.pstep-beeld { cursor: pointer; }
.pstep-beeld[data-project] { outline-offset: -3px; }
.pstep-beeld[data-project]:hover img { transform: scale(1.03); }
.pstep-beeld img { transition: transform .3s ease; }
.pstep-open {
  position: absolute; right: 16px; top: 16px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.95); color: #1A2B3C; border: 0;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(8,20,30,.18);
  transition: background .15s, transform .15s;
}
.pstep-beeld[data-project]:hover .pstep-open { background: #fff; transform: translateY(-1px); }
.pstep-open svg { color: #FF6600; }

@media (max-width: 520px) {
  .pstep-open { right: 12px; top: 12px; padding: 8px 12px; font-size: 12px; }
}


/* ══ beoordeling in de meelopende balk ════════════════════ */
.kop-score { display: inline-flex; align-items: center; gap: 3px; text-decoration: none;
             white-space: nowrap; }
.kop-score b { margin-left: 6px; font-size: 15px; font-weight: 800; color: #1A2B3C; }
.kop-score span { margin-left: 5px; font-size: 13px; color: #5A6B7B; }
.kop-score:hover b, .kop-score:hover span { color: #038FE3; }
@media (max-width: 1100px) { .kop-score span { display: none; } }
@media (max-width: 900px)  { .kop-score { display: none; } }

/* ══ beoordeling in de afspraakkaart ══════════════════════
   Geen citaat en geen link. Dit staat vlak bij de knop, dus alles
   wat je hier kan aanklikken leidt weg van het doel. */
.ak-score { display: flex; align-items: center; justify-content: center; gap: 8px;
            margin: 16px 0 0; padding-top: 15px; border-top: 1px solid #EEF3F7; }
.ak-score-sterren { display: inline-flex; gap: 1px; line-height: 0; }
.ak-score b { font-size: 15.5px; font-weight: 800; color: #1A2B3C; }
.ak-score-tekst { font-size: 13.5px; color: #5A6B7B; }



/* ══ merkenstrip onder de hero ════════════════════════════ */
.merken { background: #fff; border-bottom: 1px solid #EEF3F7; }
.merken-in { max-width: 1280px; margin: 0 auto; padding: 30px 32px 26px; text-align: center; }
.merken-kop { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em;
              text-transform: uppercase; color: #8A9BAA; }
.merken-rij { list-style: none; margin: 18px 0 0; padding: 0;
              display: flex; flex-wrap: wrap; justify-content: center;
              align-items: center; gap: 14px 44px; }
.merken-rij li { font-family: 'Nunito', sans-serif; font-size: 21px; font-weight: 800;
                 letter-spacing: -.3px; color: #A9B7C3; white-space: nowrap;
                 transition: color .15s; }
.merken-rij li:hover { color: #1A2B3C; }
.merken-na { margin: 16px 0 0; font-size: 13.5px; color: #5A6B7B; }

@media (max-width: 640px) {
  .merken-in { padding: 24px 20px 22px; }
  .merken-rij { gap: 10px 26px; }
  .merken-rij li { font-size: 17px; }
}


/* ============================================================
   Mobiel: niets mag buiten het scherm steken.

   Veel blokken komen uit het oorspronkelijke ontwerp met vaste
   opmaak in de html zelf. Een raster neemt standaard de breedte
   van zijn breedste inhoud aan, en een kop van 48 pixels of een
   foto met een minimale hoogte duwt de kolom dan breder dan de
   telefoon. Daardoor schoof de hele pagina zijwaarts en viel
   tekst rechts weg.
   ============================================================ */
/* clip en niet hidden: hidden maakt van de body een scroll-container,
   en dan blijven het eendje en de kop niet meer hangen (sticky) */
html, body { overflow-x: clip; }
.r-2col-lg > *, .pstep > *, .psteps > *, .pkaarten > *, .grevs > * { min-width: 0; }

@media (max-width: 720px) {
  /* de ruimte tussen de blokken was op mobiel even groot als op
     een groot scherm; dat leest als lege witregels */
  section[style*="padding: 88px"] { padding-top: 48px !important; padding-bottom: 48px !important;
    padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding: 72px"], section[style*="padding: 96px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  #showroom img { min-height: 0 !important; }
  #showroom div[style*="min-height: 480px"] { min-height: 0 !important; aspect-ratio: 4 / 3 !important; padding: 0 !important; }
  h2[style*="font-size: 48px"] { font-size: 32px !important; line-height: 1.1 !important; }
  .pstep-tekst { padding: 22px 20px; }

  /* de teamfoto's schoven over de tekst ernaast */
  .wie-helpt { flex-wrap: wrap; row-gap: 8px; }
  .wie-tekst { min-width: 0; flex: 1 1 160px; }
}

/* ============================================================
   De blauwe balk bovenaan als slider.

   Op een groot scherm staan de drie punten naast elkaar. Op een
   telefoon passen ze niet op één regel en stapelden ze tot een
   blok van drie regels hoog. Nu staat er steeds één, en schuift
   hij elke paar seconden door (vegen kan ook).
   ============================================================ */
@media (max-width: 900px) {
  .lp-usps { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 0 !important; }
  .lp-usps::-webkit-scrollbar { display: none; }
  .lp-usps > span { flex: 0 0 100%; justify-content: center; scroll-snap-align: center; }
}

/* een figuur krijgt van de browser marge aan de zijkanten, en lange
   knoppen breken op een telefoon niet af: allebei te breed */
.pstep-beeld { margin: 0; }
@media (max-width: 720px) {
  a[style*="display: inline-flex"], button[style*="display: inline-flex"] { max-width: 100%; white-space: normal; text-align: center; }
}

/* ============================================================
   Mobiel: eerst de badkamer, dan het verhaal.

   Op een telefoon viel de grote foto rechts weg en begon de pagina
   met tekst en de afspraakkaart. Wie via een advertentie binnenkomt
   moet in één oogopslag zien waar het om gaat: een mooie badkamer.
   Dus staat de foto nu bovenaan, schermvullend, en loopt hij onderaan
   over in het donkere blok met de kop.
   ============================================================ */
@media (max-width: 900px) {
  .r-hero-bg { display: block !important; position: relative !important; width: 100% !important;
    height: min(62vh, 560px); border-left: 0 !important; }
  .r-hero-bg img { border-radius: 0 !important; }
  .r-hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
    background: linear-gradient(to bottom, rgba(26, 43, 60, 0), rgb(26, 43, 60)); pointer-events: none; }
  .r-hero { padding-top: 0 !important; margin-top: -56px !important; }
}

/* op een telefoon een foto die meteen pakt: de travertin met bronzen
   kranen, de stijl waar nu het meest naar gevraagd wordt */
@media (max-width: 900px) {
  .r-hero-bg { background: #1A2B3C url("/workspace/lp/img/showroom/winkel-09.jpg") 62% center / cover no-repeat; }
  .r-hero-bg img { display: none !important; }
}

/* ============================================================
   Hamburgermenu op een telefoon. Op een groot scherm staat het
   menu gewoon in de kop; op mobiel viel het weg en kon je nergens
   meer naartoe springen.
   ============================================================ */
.lp-menuknop { display: none; }
@media (max-width: 900px) {
  .lp-menuknop { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-left: auto; background: transparent; border: 0; cursor: pointer; }
  .lp-menuknop span { display: block; height: 2.5px; background: #1A2B3C; border-radius: 2px; transition: transform .2s, opacity .2s; }
  .lp-kop.open .lp-menuknop span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .lp-kop.open .lp-menuknop span:nth-child(2) { opacity: 0; }
  .lp-kop.open .lp-menuknop span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .lp-kop.open .r-header-nav { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: 4px 20px 14px; box-shadow: 0 14px 30px rgba(26, 43, 60, .14); border-top: 1px solid #E1E8EE; gap: 0; }
  .lp-kop.open .r-header-nav a { padding: 15px 2px; border-bottom: 1px solid #EEF2F5; font-size: 16px; }
}

/* ============================================================
   Een knop die altijd binnen bereik is op een telefoon. Verschijnt
   zodra je voorbij de kop bent, en verdwijnt weer als de
   afspraakkaart zelf in beeld is.
   ============================================================ */
.lp-plakbalk { display: none; }
@media (max-width: 900px) {
  .lp-plakbalk { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 24px rgba(26, 43, 60, .12); transform: translateY(110%); transition: transform .25s ease; }
  .lp-plakbalk.zicht { transform: translateY(0); }
  .lp-plak-hoofd { flex: 1; display: flex; align-items: center; justify-content: center; background: #00B900; color: #fff;
    font-weight: 800; font-size: 16px; border-radius: 12px; padding: 14px 12px; text-decoration: none; }
  .lp-plak-bel { width: 52px; display: flex; align-items: center; justify-content: center; border: 2px solid #038FE3;
    color: #038FE3; border-radius: 12px; }
  .lp-whatsapp { transition: transform .25s ease; }
  body.plakbalk-aan .lp-whatsapp { transform: translateY(-74px); }
}

/* ============================================================
   Het afspraakblok, na de reviews.

   Eerst overtuigen, dan pas kiezen. In de kop stond de agenda je
   meteen in het gezicht; wie via een advertentie binnenkomt kent ons
   dan nog niet. Nu staat hij als eigen blok na het bewijs, en brengt
   elke groene knop op de pagina je erheen.
   ============================================================ */
.lp-plannen { background: #1A2B3C; color: #fff; padding: 88px 32px; scroll-margin-top: 70px; }
.lp-plannen-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.lp-plannen-in > * { min-width: 0; }
.lp-plannen-pil { display: inline-block; background: #FF6600; color: #fff; padding: 7px 14px; border-radius: 999px;
  font-weight: 700; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; }
.lp-plannen h2 { font-family: 'Nunito', 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.05;
  letter-spacing: -1px; margin: 16px 0 14px; text-wrap: balance; }
.lp-plannen p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .85); margin: 0 0 18px; }
.lp-plannen ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.lp-plannen li { padding-left: 30px; position: relative; font-weight: 600; }
.lp-plannen li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #00B900 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lp-plannen-bel { font-size: 15px !important; }
.lp-plannen-bel a { color: #6FC3F5; font-weight: 700; text-decoration: none; }
#afspraak { scroll-margin-top: 80px; }
@media (max-width: 900px) {
  .lp-plannen { padding: 48px 16px; }
  .lp-plannen-in { grid-template-columns: 1fr; gap: 26px; }
  .lp-plannen h2 { font-size: 30px; }
}

/* zonder de kaart in de kop werd de tekstkolom te breed en liep de kop
   over de foto; hij blijft nu op de linkerhelft */
@media (min-width: 901px) {
  .r-hero { grid-template-columns: minmax(0, 560px) 1fr !important; }
  .r-hero-title { font-size: 62px !important; line-height: 1.02 !important; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .r-hero { grid-template-columns: minmax(0, 46%) 1fr !important; }
  .r-hero-title { font-size: 48px !important; }
}

/* ============================================================
   Overtuigen met beeld.

   De projecten stonden halverwege, als kaartjes met veel tekst. Wie
   binnenkomt moet meteen zien wat we maken. Dus staan ze nu direct na
   de kop, groot, met alleen een plaats en een naam over de foto. De
   eerste is extra groot. Op een telefoon veeg je er van links naar
   rechts doorheen, zo zie je er veel zonder eindeloos te scrollen.
   ============================================================ */
.werk-beeld .pk { position: relative; border: 0; border-radius: 20px; background: #1A2B3C; }
.werk-beeld .pk-beeld { aspect-ratio: 4 / 5; }
.werk-beeld .pk-tekst { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px;
  background: linear-gradient(to bottom, rgba(12, 34, 49, 0), rgba(12, 34, 49, .88)); pointer-events: none; }
.werk-beeld .pk-meta { color: #FFB27A; }
.werk-beeld .pk-titel { color: #fff; font-size: 20px; }
.werk-beeld .pk-kort { display: none; }
.werk-beeld .pk-aantal { top: 12px; bottom: auto; }
@media (min-width: 981px) {
  .werk-beeld .pkaarten { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  .werk-beeld .pk:first-child { grid-column: span 2; grid-row: span 2; }
  .werk-beeld .pk:first-child .pk-beeld { aspect-ratio: auto; height: 100%; }
  .werk-beeld .pk:first-child .pk-titel { font-size: 28px; }
}
@media (max-width: 980px) {
  .werk-beeld .pkaarten { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none; }
  .werk-beeld .pkaarten::-webkit-scrollbar { display: none; }
  .werk-beeld .pk { flex: 0 0 82%; scroll-snap-align: center; }
  .werk-beeld .pk:hover { transform: none; }
}

/* ============================================================
   Telefoon: beeld, belofte, bewijs. In die volgorde, zonder omweg.

   Na de foto en de kop kwam eerst een alinea, vier vinkjes en twee
   knoppen. Dat is veel lezen voordat je iets moois ziet. Op een
   telefoon gaat dat eruit: na de kop komen meteen de reviews, compact,
   en daarna de projecten. De vaste knop onderin doet het werk van de
   knoppen. De vier punten met icoontjes gaan op mobiel ook weg; ze
   staan in de blauwe balk bovenaan al.
   ============================================================ */
@media (max-width: 900px) {
  .hero-intro, .hero-lijst, .hero-acties, .hero-drempel, .hero-score, .lp-uspblok { display: none !important; }
  .r-hero { padding-bottom: 28px !important; }
  .r-hero-title { margin-bottom: 0 !important; }

  .revbalk { padding: 18px 16px !important; }
  .revbalk-in { display: grid !important; grid-template-columns: auto 1fr; gap: 6px 14px !important; align-items: center; }
  .revbalk-score { grid-row: span 2; }
  .revbalk-quote { margin: 0 !important; font-size: 14px !important; line-height: 1.45 !important; }
  .revbalk-quote ~ .revbalk-quote { display: none !important; }
  .revbalk-in > a { font-size: 13.5px !important; justify-self: start; }
  #werk { padding-top: 28px !important; }
}

/* De vaste knop staat er vanaf het begin, ook op een groot scherm. */
@media (min-width: 901px) {
  .lp-plakbalk { display: flex; gap: 10px; position: fixed; left: 50%; bottom: 18px; z-index: 45;
    width: min(520px, calc(100% - 40px)); padding: 10px; border-radius: 18px;
    background: rgba(255, 255, 255, .97); box-shadow: 0 16px 40px rgba(26, 43, 60, .22);
    transform: translate(-50%, 140%); transition: transform .25s ease; }
  .lp-plakbalk.zicht { transform: translate(-50%, 0); }
  .lp-plak-hoofd { flex: 1; display: flex; align-items: center; justify-content: center; background: #00B900; color: #fff;
    font-weight: 800; font-size: 16px; border-radius: 12px; padding: 14px 12px; text-decoration: none; }
  .lp-plak-bel { width: 52px; display: flex; align-items: center; justify-content: center; border: 2px solid #038FE3;
    color: #038FE3; border-radius: 12px; }
}

/* op mobiel wel één review laten lezen, over de volle breedte */
@media (max-width: 900px) {
  .revbalk-in > .revbalk-quote:first-of-type { display: block !important; grid-column: 1 / -1; order: 3;
    font-style: italic; color: #3F505F; }
  .revbalk-in > .revbalk-quote:first-of-type span { display: block; font-style: normal; font-weight: 700; font-size: 12.5px; margin-top: 4px; color: #5A6B7B; }
  #werk .psec-head p { display: none; }
}


/* ==================================================================
   OKTOBER WOONMAAND. Alles met class "woonmaand" verdwijnt na de einddatum
   (js zet dan .geen-woonmaand op de pagina).
   ================================================================== */
/* één bestand, twee pagina's: de brug zet .is-woonmaand op <html> voor
   /showroom-afspraak-woonmaand */
html:not(.is-woonmaand) .woonmaand, .geen-woonmaand .woonmaand { display: none !important; }
html.is-woonmaand .alleen-normaal { display: none !important; }
.wm-groot { color: #FF6600; white-space: nowrap; }
html.is-woonmaand .wm-heldpil { font-size: 14px; padding: 9px 16px; background: #fff; color: #c2410c; }
.woonmaand-balk { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, #7a2e0b, #c2410c 45%, #FF6600); color: #fff; padding: 10px 18px; font-size: 15px; text-align: center; }
.wm-label { background: #fff; color: #c2410c; font-weight: 800; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; font-family: Nunito, sans-serif; }
.wm-tekst b { font-weight: 800; }
.wm-nog { opacity: .85; margin-left: 6px; }
.wm-knop { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-decoration: none;
  border: 2px solid rgba(255,255,255,.7); padding: 6px 14px; border-radius: 999px; }
.wm-knop:hover { background: rgba(255,255,255,.15); }
.wm-heldpil { display: inline-flex; margin-left: 8px; background: #c2410c; color: #fff; padding: 8px 14px; border-radius: 999px;
  font-weight: 800; font-size: 13px; letter-spacing: .2px; }

/* ---------- binnenlopen of een 3D-afspraak ---------- */
.tweeweg { background: #F5F9FC; padding: 72px 32px; }
.tweeweg-in { max-width: 1180px; margin: 0 auto; }
.tweeweg-kop { text-align: center; margin-bottom: 32px; }
.tweeweg-kop h2, .locatie h2 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 44px; line-height: 1.08; letter-spacing: -.8px;
  color: #1A2B3C; margin: 14px auto 0; max-width: 760px; text-wrap: balance; }
.tw-pil { display: inline-flex; background: #E6F4FD; color: #038FE3; padding: 8px 14px; border-radius: 999px; font-weight: 700;
  font-size: 13px; letter-spacing: .3px; text-transform: uppercase; }
.tweeweg-rij { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 24px; }
.tw-kaart { background: #fff; border: 1px solid #E3ECF3; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(26,43,60,.06); }
.tw-kaart > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.tw-hoofd { border: 2px solid #FF6600; position: relative; }
.tw-team { display: flex; justify-content: center; align-items: flex-end; gap: 0; background: linear-gradient(180deg,#FFF3EA,#FFE2CC);
  aspect-ratio: 16/9; overflow: hidden; }
.tw-team img { height: 100%; width: auto; object-fit: contain; margin: 0 -18px; }
.tw-in { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tw-soort { font-size: 13px; font-weight: 700; color: #038FE3; text-transform: uppercase; letter-spacing: .3px; }
.tw-hoofd .tw-soort { color: #FF6600; }
.tw-in h3 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 26px; color: #1A2B3C; margin: 0; }
.tw-in p { font-size: 16px; line-height: 1.6; color: #3F505F; margin: 0; }
.tw-feiten { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; font-size: 15px; color: #1A2B3C; font-weight: 600; }
.tw-feiten li::before { content: "✓"; color: #00B900; font-weight: 800; margin-right: 8px; }
.tw-knop { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #FF6600; color: #fff;
  border: 2px solid #FF6600; padding: 15px 24px; border-radius: 16px; font-weight: 700; font-size: 16px; text-decoration: none;
  transition: transform 160ms, box-shadow 160ms; }
.tw-knop:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,102,0,.25); }
.tw-licht { background: #fff; color: #1A2B3C; border-color: #D6E2EB; }
.tw-licht:hover { box-shadow: 0 8px 20px rgba(26,43,60,.08); }

/* ---------- merken ---------- */
.merken .merken-kop { font-family: Nunito, sans-serif; font-weight: 800; font-size: 26px; color: #1A2B3C; }
.merken .merken-rij { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; list-style: none; padding: 0; }
.merken .merken-rij li { background: #fff; border: 1px solid #E3ECF3; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column;
  gap: 2px; text-align: left; opacity: 1; filter: none; }
.merken .merken-rij li b { font-family: Nunito, sans-serif; font-weight: 900; font-size: 22px; color: #1A2B3C; letter-spacing: -.2px; }
.merken .merken-rij li span { font-size: 13px; color: #5A6B7B; }
.merken .merken-na b { color: #c2410c; }

/* ---------- goed om te weten (bij de planner) ---------- */
.goedom { margin-top: 26px; background: #fff; border: 1px solid #E3ECF3; border-radius: 18px; padding: 18px 20px; }
.goedom h3 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 19px; color: #1A2B3C; margin: 0 0 8px; }
.goedom dl { margin: 0; display: grid; gap: 10px; }
.goedom dt { font-weight: 700; color: #1A2B3C; font-size: 15px; }
.goedom dd { margin: 2px 0 0; color: #3F505F; font-size: 14.5px; line-height: 1.55; }
.goedom a { color: #038FE3; font-weight: 600; }

/* ---------- zo vind je ons ---------- */
.locatie { padding: 80px 32px; background: #fff; }
.locatie-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: center; }
.locatie-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 24px; display: block; }
.locatie h2 { margin: 14px 0 22px; }
.locatie-raster { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 24px; margin-bottom: 26px; }
.locatie-raster h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: #038FE3; margin: 0 0 6px; }
.locatie-raster p { margin: 0; font-size: 16px; line-height: 1.6; color: #1A2B3C; }
.locatie-raster a { color: #1A2B3C; font-weight: 600; }
.locatie-klein { font-size: 14px !important; color: #5A6B7B !important; margin-top: 4px !important; }
.locatie-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.locatie-knoppen .tw-knop { margin-top: 0; }

/* ---------- WhatsApp rechtsonder ---------- */
.wa-zweef { position: fixed; right: 22px; bottom: 96px; z-index: 46; display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; padding: 13px 18px 13px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.wa-zweef:hover { transform: translateY(-1px); }
.lp-plak-wa { background: #25D366 !important; color: #fff !important; border-color: #25D366 !important; }

/* ---------- de planner als venster ---------- */
.plan-venster { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.plan-venster[hidden] { display: none; }
.pv-sluier { position: absolute; inset: 0; background: rgba(15,30,45,.55); }
.pv-kader { position: relative; background: #fff; border-radius: 24px; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.pv-dicht { position: absolute; top: 10px; right: 12px; z-index: 2; border: 0; background: #F1F5F9; width: 38px; height: 38px; border-radius: 50%;
  font-size: 24px; line-height: 1; color: #1A2B3C; cursor: pointer; }
.pv-plek > * { margin: 0 !important; max-width: none !important; box-shadow: none !important; }
body.pv-open { overflow: hidden; }

@media (max-width: 900px) {
  .tweeweg, .locatie { padding: 52px 18px; }
  .tweeweg-kop h2, .locatie h2 { font-size: 32px; }
  .tweeweg-rij, .locatie-in { grid-template-columns: minmax(0,1fr); }
  .merken .merken-rij { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .locatie-raster { grid-template-columns: minmax(0,1fr); }
  .wm-heldpil { margin: 8px 0 0; }
  /* op de telefoon zit WhatsApp in de balk onderin */
  .wa-zweef { display: none; }
  .pv-kader { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .tw-knop, .wa-zweef { transition: none; } }

/* merklogo's: de naam blijft voor schermlezers, het logo is wat je ziet */
.merken .merken-rij li img { height: 34px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; margin-bottom: 8px; }
.merken .merken-rij li .merk-naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.merken .merken-rij li img[src*="grohe"], .merken .merken-rij li img[src*="ink"] { height: 42px; margin-top: -4px; margin-bottom: 4px; }
.merken .merken-rij li img[src*="mondiaz"] { height: 18px; margin: 8px 0 16px; }

/* renders bovenin het planvenster: laat zien wat je krijgt */
.pv-renders { padding: 16px 16px 0; }
.pv-beelden { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; border-radius: 16px; overflow: hidden; }
.pv-beelden img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pv-renders p { margin: 10px 4px 0; font-size: 14px; line-height: 1.45; color: #3F505F; }
.pv-renders p b { color: #1A2B3C; }
@media (max-width: 520px) {
  .pv-beelden { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pv-beelden img:nth-child(4) { display: none; }
}

/* ============================================================
   Kop op een laptop of half scherm (901 tot 1280 breed): alles
   moest op één regel en paste niet, het telefoonnummer brak in
   vier stukken en de knop viel van het scherm. Tot 1180 krijg je
   daarom het hamburgermenu, daarboven alles wat compacter.
   ============================================================ */
.r-header-nav a, .r-header-cta a { white-space: nowrap; }
@media (min-width: 1281px) and (max-width: 1600px) {
  .r-header-nav { gap: 18px; font-size: 14.5px !important; }
  .kop-score { display: none; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .r-header-nav { display: none !important; }
  .kop-score { display: none; }
  .lp-menuknop { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; order: 9;
    width: 44px; height: 44px; padding: 10px; margin-left: 4px; background: transparent; border: 0; cursor: pointer; }
  .lp-menuknop span { display: block; height: 2.5px; background: #1A2B3C; border-radius: 2px; transition: transform .2s, opacity .2s; }
  .lp-kop.open .lp-menuknop span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .lp-kop.open .lp-menuknop span:nth-child(2) { opacity: 0; }
  .lp-kop.open .lp-menuknop span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .lp-kop.open .r-header-nav { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: 4px 32px 14px; box-shadow: 0 14px 30px rgba(26, 43, 60, .14); border-top: 1px solid #E1E8EE; gap: 0; }
  .lp-kop.open .r-header-nav a { padding: 15px 2px; border-bottom: 1px solid #EEF2F5; font-size: 16px; }
}

/* de 3D-kaart: twee knoppen naast elkaar */
.tw-knoppen { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.tw-knoppen .tw-knop { margin-top: 0; }
button.tw-knop { font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }

/* renders in het planvenster: één groot beeld, vegen of pijltjes */
.pv-schuif { position: relative; }
.pv-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 14px; scrollbar-width: none; scroll-behavior: smooth; }
.pv-slider::-webkit-scrollbar { display: none; }
.pv-slider img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; scroll-snap-align: start; display: block; }
.pv-slider:focus-visible { outline: 3px solid #038FE3; outline-offset: 2px; }
.pv-pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: #1A2B3C; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.pv-pijl.links { left: 10px; } .pv-pijl.rechts { right: 10px; }
.pv-stipjes { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.pv-stipjes i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); }
.pv-stipjes i.aan { background: #fff; width: 18px; border-radius: 4px; }
@media (max-width: 520px) { .pv-pijl { width: 30px; height: 30px; font-size: 20px; } }

/* lichtbak: schuifvak, veegtip en de claimknop */
.lb-schuif { max-width: 100%; }
.lb.pannen { padding: 56px 0 24px; }
.lb.pannen .lb-inhoud { width: 100vw; max-width: 100vw; min-width: 0; }
.lb.pannen .lb-schuif { width: 100vw; }
.lb { overflow-y: auto; }
.lb.pannen .lb-schuif { overflow: hidden; }
.lb.pannen .lb-schuif::-webkit-scrollbar { display: none; }
.lb.pannen .lb-inhoud img { max-width: 100vw; width: 100vw; height: auto; max-height: none; border-radius: 0; }
.lb.pannen { place-items: start center; padding-top: 22vh; }
.lb.pannen .lb-vorige, .lb.pannen .lb-volgende { top: calc(22vh + 28vw); bottom: auto; transform: translateY(-50%); z-index: 2;
  background: rgba(255,255,255,.88); color: #1A2B3C; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.lb.pannen .lb-vorige { left: 10px; } .lb.pannen .lb-volgende { right: 10px; }
.lb-hint { margin: 10px 16px 0; text-align: center; color: #cfe0ea; font-size: 13px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lb-hint[hidden] { display: none; }
.lb .lb-draai-knop { position: static; transform: none; width: auto; height: auto; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 13px;
  font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.lb-gedraaid { position: fixed; top: 0; left: 100vw; width: 100vh; height: 100vw; transform-origin: top left; transform: rotate(90deg);
  background: #081420; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; }
.lb-gedraaid[hidden] { display: none; }
.lb-gedraaid img { max-width: 100%; max-height: calc(100% - 64px); object-fit: contain; border-radius: 8px; }
.lb-gedraaid .lb-claim { margin: 0; }
.lb .lb-gedraaid-dicht { top: 12px; right: 12px; }
.lb-claim { display: flex; width: max-content; max-width: calc(100% - 32px); margin: 16px auto 0; align-items: center; gap: 8px;
  background: #FF6600; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 12px; }
.lb-claim[hidden] { display: none; }
.lb-claim:hover { filter: brightness(.95); }
.lb-claim:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* liggende telefoon: foto iets lager, zodat de claimknop er nog onder past */
@media (max-height: 520px) {
  .lb { padding: 14px 70px; }
  .lb-inhoud img { max-height: 64vh; }
  .lb-inhoud figcaption { margin-top: 8px; }
  .lb-claim { margin-top: 8px; padding: 8px 14px; font-size: 13.5px; }
}

.lb-draai-knop { background: #fff !important; color: #1A2B3C !important; }

/* ---------- zo ziet jouw 3D-ontwerp eruit ---------- */
.held-oud, .tw-oud { opacity: .75; font-weight: 600; margin-left: 4px; }
.ontwerpen { background: #fff; padding: 80px 32px; }
.ontw-in { max-width: 1180px; margin: 0 auto; }
.ontw-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.ontw-kop h2 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 44px; line-height: 1.08; letter-spacing: -.8px; color: #1A2B3C; margin: 14px 0 10px; text-wrap: balance; }
.ontw-kop p { margin: 0; font-size: 17px; line-height: 1.6; color: #3F505F; max-width: 560px; }
.ontw-prijs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; background: #FFF3EA; border: 2px dashed #FF6600; border-radius: 16px; padding: 14px 20px; }
.ontw-prijs .oud { font-size: 15px; color: #5A6B7B; text-decoration: line-through; }
.ontw-prijs .nu { font-family: Nunito, sans-serif; font-weight: 900; font-size: 26px; color: #FF6600; line-height: 1.1; }
.ontw-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ontw-tegel { all: unset; cursor: zoom-in; border-radius: 14px; overflow: hidden; display: block; background: #F5F9FC; position: relative; }
.ontw-tegel img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform .35s; }
.ontw-tegel:first-child { grid-column: span 2; grid-row: span 2; }
.ontw-tegel:hover img { transform: scale(1.04); }
.ontw-tegel:focus-visible { outline: 3px solid #038FE3; outline-offset: 3px; }
.ontw-voet { margin-top: 24px; display: flex; justify-content: center; }
.ontw-voet .tw-knop { margin: 0; align-self: auto; }
@media (max-width: 900px) {
  .ontwerpen { padding: 52px 18px; }
  .ontw-kop h2 { font-size: 32px; }
  .ontw-prijs { align-items: flex-start; }
  .ontw-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ontw-tegel img { transition: none; } }

/* de sticker op de grote render, zoals op de omslag van het magazine */
.ontw-sticker { position: absolute; top: 16px; right: 16px; z-index: 1; width: 112px; height: 112px; border-radius: 50%;
  background: #FF6600; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(255,102,0,.25), 0 8px 20px rgba(0,0,0,.18); transform: rotate(-8deg); text-align: center; line-height: 1; }
.ontw-sticker small { font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; opacity: .9; }
.ontw-sticker b { font-family: Nunito, sans-serif; font-weight: 900; font-size: 27px; margin: 3px 0 4px; }
.ontw-sticker s { font-size: 12.5px; font-weight: 700; opacity: .85; }
@media (max-width: 900px) {
  .ontw-sticker { width: 86px; height: 86px; top: 10px; right: 10px; box-shadow: 0 0 0 4px rgba(255,102,0,.25), 0 6px 14px rgba(0,0,0,.18); }
  .ontw-sticker small { font-size: 8.5px; letter-spacing: 1px; } .ontw-sticker b { font-size: 21px; } .ontw-sticker s { font-size: 10.5px; }
}

.tw-oud { white-space: nowrap; }