/* ==========================================================================
   Homepage-secties + footer 1-op-1 naar www.webjongens.nl (YOOtheme).
   Maten gemeten op de live site (1440px): container 1200 + 2×40, kolomgoot 40/70.
   ========================================================================== */

.lv-container { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 640px) { .lv-container { padding: 0 40px; } }

/* Knoppen zoals live (uk-button): hover = omlijnd */
.lv-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 42px;
  padding: 0 20px; border: 2px solid transparent; border-radius: 99px; white-space: nowrap; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(15px, 2vw, 17px); line-height: 38px;
  transition: .1s ease-in-out; transition-property: color, background-color, border-color;
}
.lv-btn--pink { background: #f7148b; border-color: #f7148b; color: #fff; }
.lv-btn--pink:hover { background: transparent; border-color: #fff; color: #fff; }
.lv-btn--violet { background: #8438df; border-color: #8438df; color: #fff; }
.lv-btn--violet:hover { background: transparent; border-color: #fff; color: #2e1352; }
.lv-btn--outline { background: transparent; border-color: #fff; color: #fff; }
.lv-btn--outline:hover { background: #c7fdbb; border-color: #c7fdbb; color: #2e1352; }

/* ---------------- Uitgelicht (live: .uitgelicht) ---------------- */
.lv-uitgelicht { background: #2e1352; padding: 150px 0 0; }
.lv-uitgelicht-card { box-sizing: border-box; background: #8438df; border-radius: 20px; padding: 40px; color: #fff; }
.lv-uitgelicht-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .lv-uitgelicht-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 140px; margin-right: -100px; } }
.lv-uitgelicht-meta { margin: 0 0 20px; font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 17px; }
.lv-uitgelicht h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 4vw, 45px); line-height: 1; color: #fff; }
.lv-uitgelicht-text { margin-top: 20px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-uitgelicht-text p + p { margin-top: 20px; }
.lv-uitgelicht-text strong { font-weight: 700; }
.lv-uitgelicht .lv-btn { margin-top: 20px; }
.lv-uitgelicht-picture { display: block; border: 15px solid #fff; border-right: 0; border-radius: 30px 10px 10px 30px; background: #fff; overflow: hidden; }
.lv-uitgelicht-picture img { display: block; width: 100%; border-radius: 15px 0 0 15px; object-fit: cover; }

/* ---------------- Dit doen we dus / Dit deden we onlangs (live: .casesslider) ---------------- */
.lv-cases { background: #2e1352; padding: 100px 0; color: #fff; overflow: hidden; }
.lv-cases-inner { box-sizing: border-box; padding-left: 15px; }
@media (min-width: 640px) { .lv-cases-inner { padding-left: 40px; } }
@media (min-width: 1280px) { .lv-cases-inner { padding-left: calc((100vw - 1200px) / 2 + 40px); } }
.lv-cases-inner > h3, .lv-cases-inner > h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; }
.lv-cases-inner > h3, .lv-cases-inner > h2.lv-cases-kicker { color: rgba(255, 255, 255, .314); text-decoration: line-through; }
.lv-cases h2 { color: #fff; padding-bottom: 40px; }
.lv-cases-track { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 40px; }
.lv-cases-track::-webkit-scrollbar { display: none; }
.lv-cases-item { flex: 0 0 min(620px, 82vw); scroll-snap-align: start; }
@media (min-width: 960px) { .lv-cases-item { flex-basis: calc((min(100vw, 1440px) - 160px) / 2 - 20px); max-width: 620px; } }
.lv-cases-item a { display: block; color: #fff; text-decoration: none; }
.lv-cases-item img { display: block; width: 100%; aspect-ratio: 620 / 349; object-fit: cover; border-radius: 15px; }
.lv-cases-item h3 { position: relative; display: inline-block; margin: 20px 0 0; padding-right: 40px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1; color: #fff; }
.lv-cases-item h3::after { content: ""; position: absolute; right: 0; top: 50%; width: 25px; height: 25px; transform: translateY(-50%); background: url(../images/system/icons/pijl-donkerpaars.svg) no-repeat 0 0 / 25px auto; transition: transform .2s; }
/* live: pijl beweegt niet bij hover */
.lv-cases-item p { margin: 10px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-cases-foot { position: relative; display: flex; align-items: center; min-height: 100px; margin-top: 100px; }
.lv-cases-foot::after { content: ""; position: absolute; right: 0; top: 50%; width: calc(100% - 416px); height: 100px; transform: translateY(-50%); background: url(../images/system/horizontal-scroll-bg.svg) no-repeat right center / contain; pointer-events: none; }
@media (max-width: 959px) { .lv-cases-foot::after { display: none; } }

/* ---------------- Branding, Content, Design & Code (live: .bloktext) ---------------- */
.lv-bloktext { background: #2e1352; padding: 200px 0 50px; color: #fff; }
.lv-bloktext-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .lv-bloktext-grid { grid-template-columns: 565px 1fr; gap: 0 70px; } }
.lv-bloktext-img img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: 15px; }
@media (min-width: 960px) { .lv-bloktext-img img { height: 680px; } }
.lv-bloktext-body { display: flex; flex-direction: column; justify-content: flex-start; position: relative; }
.lv-bloktext h2 { margin: 0; padding: 0 0 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(56px, 7.6vw, 110px); line-height: .955; color: #fff; position: relative; z-index: 2; }
@media (min-width: 960px) { .lv-bloktext h2 { margin-left: -130px; } }
.lv-bloktext-meta { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(19px, 2vw, 28.8px); line-height: 1.46; }
.lv-bloktext .lv-btn { margin-top: 20px; align-self: flex-start; }

/* ---------------- Onze werkwijze (live: .werkwijzeslider) ---------------- */
.lv-werkwijze { background: #2e1352; padding: 70px 0; color: #fff; }
.lv-werkwijze-card { box-sizing: border-box; background: #8438df; border-radius: 15px; padding: 25px; }
@media (min-width: 960px) { .lv-werkwijze-card { padding: 100px 100px 100px 60px; } }
.lv-werkwijze-grid { display: grid; gap: 30px; }
@media (min-width: 960px) { .lv-werkwijze-grid { grid-template-columns: 2fr 3fr; gap: 0; align-items: center; } .lv-werkwijze-slides { padding-left: 40px; } }
.lv-werkwijze h2 { margin: 0; padding: 0 0 20px 40px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(80px, 7.6vw, 110px); line-height: .955; color: #fff; }
@media (max-width: 959px) { .lv-werkwijze h2 { padding-left: 0; } }
.lv-werkwijze-meta { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 17.6px; line-height: 1.4; }
.lv-werkwijze h3 { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.5vw, 36px); line-height: 1.17; color: #fff; }
.lv-werkwijze-text { margin-top: 10px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-werkwijze-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.lv-werkwijze-next { width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; background: url(../images/system/icons/pijl-roze.svg) no-repeat center / contain; transition: transform .2s; }
.lv-werkwijze-next:hover { transform: translateX(3px); }

/* ---------------- We love … / Webjongens is een internetbureau op Texel (live: .bloktekstduo) ---------------- */
.lv-duo { background: #2e1352; padding: 70px 0; color: #fff; }
.lv-duo-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .lv-duo-grid { grid-template-columns: 565px 1fr; gap: 0 70px; } }
.lv-duo-img img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: 15px; }
.lv-duo-body { display: flex; flex-direction: column; justify-content: center; }
.lv-duo-typed { display: block; min-height: 63px; margin: 40px 0 0; padding: 0 0 20px; white-space: nowrap; overflow: hidden; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 43px; color: #8438df; }
.lv-duo-typed .wj-typed-word { color: #fff; text-decoration: line-through; }
.lv-duo h2 { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; color: #fff; }
.lv-duo h2 .lv-accent { color: #f7148b; }
.lv-duo-text { margin-top: 20px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-duo .lv-btn { margin-top: 20px; align-self: flex-start; }

/* ---------------- Plannen bespreken + Over Webjongens (live: .footer-panel) ---------------- */
.lv-panel { background: linear-gradient(to bottom, #2e1352 50%, #8438df 50%); padding: 70px 0; }
.lv-panel-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .lv-panel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lv-panel-grid > * { min-width: 0; }
.lv-panel-cta { box-sizing: border-box; display: flex; align-items: center; min-height: 360px; padding: 40px; border-radius: 15px; background: #f7148b; color: #fff; }
@media (min-width: 960px) { .lv-panel-cta { min-height: 639px; } }
.lv-panel h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px, 2.2vw, 28px); line-height: 1.4; }
.lv-panel-cta h3 { color: #fff; }
.lv-panel-cta p { margin: 10px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-panel-cta .lv-btn { margin-top: 20px; }
.lv-panel-reviews { box-sizing: border-box; padding: 50px 70px; border-radius: 15px; background: #fff; color: #2e1352; }
@media (max-width: 639px) { .lv-panel-reviews { padding: 40px 50px; } }
.lv-panel-reviews > h3 { text-align: center; color: #2e1352; }
.lv-reviews-wrap { position: relative; margin-top: 20px; }
.lv-reviews { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.lv-reviews::-webkit-scrollbar { display: none; }
.lv-reviews.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.lv-reviews-wrap::before, .lv-reviews-wrap::after { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 700; font-size: 145px; line-height: 0; color: #2e1352; }
.lv-reviews-wrap::before { content: "{"; left: -60px; }
.lv-reviews-wrap::after { content: "}"; right: -60px; }
@media (max-width: 639px) { .lv-reviews-wrap::before, .lv-reviews-wrap::after { font-size: 90px; } .lv-reviews-wrap::before { left: -42px; } .lv-reviews-wrap::after { right: -42px; } }
.lv-review { flex: 0 0 100%; min-height: 480px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 959px) { .lv-review { min-height: 360px; } }
.lv-review h4 { margin: 0; padding: 0 15px; font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.4; }
.lv-review p { margin: 0; padding-left: 15px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-review .lv-review-name { margin: 0; padding-left: 15px; font-family: var(--font-body); font-weight: 700; font-size: 17.6px; line-height: 1.4; }
.lv-review a { align-self: flex-start; margin: 20px 0 0 15px; padding: 0 20px; border: 2px solid #8438df; border-radius: 99px; color: #8438df; text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 23px; transition: .1s ease-in-out; }
.lv-review a:hover { color: #2e1352; border-color: #2e1352; }

/* ---------------- Footer (live: .footer) ---------------- */
.lv-footer { background: #8438df; color: #fff; padding: 70px 0; font-family: var(--font-body); font-weight: 500; }
.lv-footer-top { display: grid; gap: 40px 70px; }
@media (min-width: 960px) { .lv-footer-top { grid-template-columns: 353px 1fr; } }
.lv-footer-logo { display: block; padding-bottom: 35px; }
.lv-footer-logo img { display: block; width: 300px; height: 40px; max-width: 100%; }
.lv-footer-nb { margin: 20px 0 10px; font-size: 18px; line-height: 1.625; }
.lv-footer-form { display: flex; max-width: 373px; margin: 0 -10px; }
.lv-footer-form input { box-sizing: border-box; width: 80%; height: 43px; padding: 12px; border: 1px solid transparent; border-radius: 99px 0 0 99px; background: rgba(46, 19, 82, .3137); color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 16px; outline: none; }
.lv-footer-form input::placeholder { color: rgba(255, 255, 255, .3137); }
.lv-footer-form input:focus { border-color: #2e1352; }
.lv-footer-form button { width: 20%; height: 43px; padding: 10px; border: 0; border-radius: 0 99px 99px 0; cursor: pointer; font-size: 0; background: rgba(46, 19, 82, .3137) url(../images/system/icons/circle-chevron-right-solid-wit.svg) no-repeat 40px 7px / 30px; }
.lv-footer-form button:disabled { opacity: .5; }
.lv-footer-status { margin: 10px 0 0; font-size: 16px; }
.lv-footer-cookie { display: inline-flex; align-items: center; gap: 10px; margin-top: 48px; opacity: .5; color: #2d2e33; text-decoration: none; font-size: 18px; line-height: 20px; cursor: pointer; }
.lv-footer-cookie:hover { opacity: 1; color: #09090a; text-decoration: underline; }
.lv-footer-cookie svg { width: 20px; height: 20px; fill: #2d2e33; }
.lv-footer-contact a { display: inline-flex; align-items: center; gap: 5px; color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 3vw, 28px); line-height: 38px; transition: color .1s; }
/* zoals live: e-mail wordt roze, telefoon donkerpaars; het icoon blijft wit */
.lv-footer-contact a[href^="mailto:"]:hover { color: #f7148b; }
.lv-footer-contact a[href^="tel:"]:hover { color: #2e1352; }
.lv-footer-contact a svg { width: 25px; height: 25px; flex-shrink: 0; border-radius: 100%; background: #8438df; fill: #fff; }
.lv-footer-contact div + div { margin-top: 20px; }
.lv-footer-sub { display: grid; gap: 30px 40px; margin-top: 40px; font-size: clamp(14px, 2vw, 18px); }
@media (min-width: 640px) { .lv-footer-sub { grid-template-columns: 164px 1fr; } }
.lv-footer-sub h3 { margin: 0 0 20px; font-family: var(--font-body); font-weight: 500; font-size: clamp(20px, 2.5vw, 24px); line-height: 1.4; color: #fff; }
.lv-footer-sub p { margin: 0 0 12px; line-height: normal; }
.lv-footer-sub ul { margin: 0; padding: 0; list-style: none; columns: 4; column-gap: 40px; line-height: clamp(20px, 2.5vw, 24px); }

.lv-footer-sub li { break-inside: avoid; margin-bottom: 10px; }
.lv-footer-sub a { color: #fff; text-decoration: none; }
.lv-footer-sub a:hover { text-decoration: underline; }
.lv-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; }
.lv-copy { white-space: nowrap; font-size: clamp(13px, 1.25vw, 18px); line-height: 1.625; }
.lv-copy a { color: #fff; text-decoration: none; }
.lv-copy a:hover { text-decoration: underline; }
.lv-copy svg { display: inline-block; position: relative; top: -2px; width: 20px; height: 20px; vertical-align: middle; fill: #f7148b; }
.lv-copy .lv-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: middle; background: #000; animation: lv-blink 1s infinite; }
@keyframes lv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.lv-socials { display: flex; align-items: center; gap: 10px; }
.lv-socials span { font-size: 24px; line-height: 39px; }
.lv-socials img { display: block; width: 39px; height: 39px; }

/* ---------------- Mobiel (< 960px), gemeten op live bij 390px ---------------- */
.lv-bloktext h2 { text-shadow: rgba(0, 0, 0, .36) 2px 2px 5px; margin-top: -100px; }
@media (max-width: 959px) {
  .lv-uitgelicht-card { padding: 20px; }
  .lv-uitgelicht-grid { gap: 20px; }
  .lv-uitgelicht-picture { order: -1; border-right: 15px solid #fff; border-radius: 15px; }
  .lv-uitgelicht-picture img { border-radius: 0; }
  .lv-uitgelicht-meta { font-size: 15px; line-height: 15px; }

  .lv-cases { padding: 30px 0 100px; }
  .lv-cases-inner { padding-left: 30px; }
  .lv-cases-track { gap: 20px; padding-right: 30px; }
  .lv-cases-item { flex-basis: calc(100vw - 60px); }
  .lv-cases-foot { flex-direction: column-reverse; align-items: flex-start; margin-top: 0; padding-right: 30px; }
  .lv-cases-foot::after { display: block; position: static; align-self: flex-end; width: 234px; height: 100px; transform: none; }

  .lv-bloktext { padding: 50px 0; }
  .lv-bloktext-grid { gap: 20px; }
  .lv-bloktext-img img { height: auto; aspect-ratio: 360 / 433; min-height: 0; }
  .lv-bloktext h2 { font-size: 60px; line-height: 1; }

  .lv-werkwijze { padding: 40px 0; }
  .lv-werkwijze .lv-container { padding: 0; }
  .lv-werkwijze-card { padding: 30px 15px; }
  .lv-werkwijze h2 { padding: 0 30px 20px 45px; font-size: 80px; line-height: 75px; }
  .lv-werkwijze-slides { padding: 0 55px; }
  .lv-werkwijze-meta { font-size: 14.4px; }
  .lv-werkwijze h3 { font-size: 30px; line-height: 36px; }

  .lv-duo { padding: 40px 0; }
  .lv-duo-grid { gap: 20px; }
  .lv-duo-img img { height: auto; min-height: 0; aspect-ratio: 360 / 246; }
  .lv-duo-typed { font-size: 30px; line-height: 35px; min-height: 55px; }
  .lv-duo h2 { font-size: 30px; line-height: 35px; }

  .lv-panel { padding: 40px 0; }
  .lv-panel-grid { gap: 20px; }
  .lv-panel-cta { padding: 20px; min-height: 0; align-items: flex-start; }
  .lv-panel-reviews { padding: 50px 20px; }
}
@media (max-width: 639px) { .lv-reviews-wrap::before, .lv-reviews-wrap::after { display: none; } }

/* ==========================================================================
   Paginakop "intro full mini" (live: projecten, cases, support, blog)
   ========================================================================== */
.lv-mini { background: #8438df; color: #fff; padding: 244px 0 50px; min-height: 45vh; box-sizing: border-box; }
@media (max-width: 959px) { .lv-mini { padding-top: 130px; min-height: 0; } }
.lv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0; padding: 0; list-style: none; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 29.25px; }
.lv-crumbs a { color: rgba(255, 255, 255, .314); text-decoration: none; transition: color .1s; }
.lv-crumbs a:hover { color: #6c6d74; } /* live: grijs */
.lv-crumbs li + li::before { content: ""; display: inline-block; width: 26px; height: 12px; margin-right: 12px; vertical-align: middle; background: url(../images/system/bread-pijl.svg) no-repeat center / contain; }
.lv-mini h1 { margin: 40px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(45px, 6vw, 108px); line-height: .917; color: #fff; overflow-wrap: anywhere; }
.lv-opdracht { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2vw, 28.8px); line-height: 1.5625; color: #fff; }
.lv-opdracht span { color: #2e1352; }
.lv-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 100px 0 0; list-style: none; }
@media (max-width: 959px) { .lv-tags { padding-top: 40px; } }
.lv-tags a, .lv-tags span { display: inline-block; padding: 4px 10px; border-radius: 99px; background: #d1d1e6; color: #2e1352; text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 29.25px; transition: background-color .1s; }
.lv-tags a:hover { text-decoration: underline; } /* live: alleen onderstreept */

/* Grote kopfoto (live: .portfolio.image) */
.lv-pimage { background: #8438df; padding: 70px 0; }
.lv-pimage-inner { box-sizing: border-box; max-width: 1600px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 640px) { .lv-pimage-inner { padding: 0 40px; } }
.lv-pimage img { display: block; width: 100%; border-radius: 15px; }

/* Tekst (live: .portfolio.tekst, 750 breed) */
.lv-ptext { background: #fff; color: #2e1352; padding: 70px 0; }
.lv-ptext-inner { box-sizing: border-box; max-width: 830px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 640px) { .lv-ptext-inner { padding: 0 40px; } }
.lv-ptext .lv-prose { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-ptext .lv-prose > * + * { margin-top: 20px; }
.lv-ptext .lv-prose h2, .lv-ptext .lv-prose h3 { margin-top: 40px; padding-bottom: 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.075; color: #2e1352; }
.lv-ptext .lv-prose a { color: #8438df; text-decoration: underline; }
.lv-ptext .lv-prose ul { list-style: disc; padding-left: 1.4em; }
.lv-ptext .lv-prose img { border-radius: 15px; }
.lv-ptext .lv-btn { margin-top: 20px; }
.lv-btn--green { background: #c7fdbb; border-color: #c7fdbb; color: #2e1352; }
.lv-btn--green:hover { background: transparent; border-color: #2e1352; color: #2e1352; }

/* "Bekijk ander werk" (live: .anderwerkslider) */
.lv-ander { background: #8438df; padding: 70px 0; }
.lv-ander-inner { box-sizing: border-box; max-width: 1480px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 640px) { .lv-ander-inner { padding: 0 40px; } }
.lv-ander-card { position: relative; padding: 100px 0; border-radius: 15px 15px 0 0; background: #f7148b; }
.lv-ander h2 { position: absolute; z-index: 5; top: 70px; left: 90px; margin: 0; padding: 0 0 20px; pointer-events: none; font-family: var(--font-heading); font-weight: 700; font-size: clamp(45px, 6vw, 86.4px); line-height: 1.083; color: #fff; }
.lv-ander-track { display: flex; overflow: hidden; transition: none; }
.lv-ander-track ul { display: flex; width: 100%; margin: 0; padding: 0; list-style: none; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.lv-ander-track li { flex: 0 0 100%; }
.lv-ander-track a { position: relative; display: block; width: 80%; margin: 0 auto; text-decoration: none; }
.lv-ander-track img { display: block; width: 100%; aspect-ratio: 1088 / 525; object-fit: cover; border-radius: 15px; }
.lv-ander-title { position: absolute; z-index: 2; right: -26px; bottom: 0; padding: 0 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 4vw, 40px); line-height: clamp(33px, 4.5vw, 43px); color: #fff; transition: color .1s; }
.lv-ander-title:hover { color: #c7fdbb; }
.lv-ander-title::after { content: ""; position: absolute; right: -30px; top: 5px; width: 35px; height: 35px; background: url(../images/system/icons/pijl-donkerpaars.svg) no-repeat 0 0 / 35px; }
/* live: afbeelding op 70% over zwart */
.lv-ander:not(.lv-ander--kb) .lv-ander-track a { border-radius: 15px; background: #000; }
.lv-ander:not(.lv-ander--kb) .lv-ander-track img { opacity: .7; }

.lv-ander-nav { position: absolute; top: 50%; z-index: 6; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; transform: translateY(-50%); background: url(../images/system/icons/pijl-wit.svg) no-repeat center / contain; }
.lv-ander-prev { left: -20px; }
.lv-ander-next { right: -20px; transform: translateY(-50%) rotate(180deg); }
@media (max-width: 959px) {
  .lv-ander { padding: 40px 0; }
  .lv-ander-card { padding: 100px 0 70px; }
  .lv-ander h2 { top: 30px; left: 20px; font-size: 54px; line-height: 45px; }
  .lv-ander-title { right: 30px; bottom: 0; padding: 0 10px; font-size: 20px; line-height: 30px; }
  .lv-ander-title::after { width: 30px; height: 30px; }
}
@media (max-width: 959px) {
  .lv-mini { padding: 170px 0 50px; }
  .lv-crumbs { font-size: 13px; line-height: 20px; gap: 0 8px; }
  .lv-crumbs li + li::before { width: 20px; margin-right: 8px; }
  .lv-mini h1 { margin-top: 30px; line-height: 1; }
  .lv-opdracht { font-size: 27px; line-height: 32.4px; }
  .lv-tags { padding-top: 30px; }
  .lv-tags a, .lv-tags span { font-size: 13px; line-height: 20px; }
  .lv-pimage { padding: 20px 0; }
}
.lv-tags { margin-top: 20px; }
.lv-ptext .lv-prose > h2:first-child, .lv-ptext .lv-prose > h3:first-child { margin-top: 40px; }
.lv-ptext .lv-prose:first-child > :first-child { margin-top: 0; }
.lv-ander-track { margin: 20px 0; }

/* ==========================================================================
   Support-artikel (live: .portfolio.image.kennisbank + .portfolio.tekst.support + .anderwerkslider.kennisbank)
   ========================================================================== */
.lv-kb-head { display: flex; align-items: flex-end; min-height: 363px; box-sizing: border-box; padding: 70px 0; background: #8438df; }
.lv-kb-head-inner { width: 100%; box-sizing: border-box; padding: 0 40px; }
@media (max-width: 959px) { .lv-kb-head { min-height: 0; padding: 150px 0 40px; } .lv-kb-head-inner { padding: 0 15px; } }
.lv-kb { background: #fff; color: #2e1352; padding: 70px 0; }
.lv-kb-date { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 29.25px; }
.lv-kb h1 { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.2; color: #2e1352; }
.lv-kb-text { margin-top: 71px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
@media (min-width: 960px) { .lv-kb-text { column-count: 2; column-gap: 80px; column-rule: 1px solid #e5e5e7; } }
.lv-kb-text > * { break-inside: avoid-column; }
.lv-kb-text p, .lv-kb-text ul, .lv-kb-text ol, .lv-kb-text figure { margin: 0 0 20px; }
.lv-kb-text h2, .lv-kb-text h3 { margin: 0 0 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; color: #2e1352; break-after: avoid; }
.lv-kb-text h4, .lv-kb-text h5 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.4; }
.lv-kb-text a { color: #8438df; text-decoration: underline; }
.lv-kb-text img { max-width: 100%; height: auto; border-radius: 15px; }
.lv-kb-text ul { list-style: none; padding: 0 0 0 30px; }
.lv-kb-text ul li { position: relative; padding: 0 0 10px 20px; line-height: 30px; }
.lv-kb-text ul li::before { content: ""; position: absolute; left: -35px; top: 0; width: 30px; height: 30px; background: url(../images/system/icons/pijl-donkerpaars.svg) no-repeat center / contain; }
.lv-kb-text ol { padding-left: 1.4em; }
.lv-ander--kb .lv-ander-track a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 15px; background: rgba(46, 19, 82, .35); }
.lv-kb-slide-title { position: absolute; z-index: 2; top: 50px; left: -46px; max-width: 680px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(34px, 5vw, 72px); line-height: 1; color: #fff; }
.lv-ander--kb .lv-ander-title { z-index: 2; }
@media (max-width: 959px) { .lv-kb-slide-title { top: 20px; left: 15px; right: 15px; font-size: 28px; } }

/* ==========================================================================
   Blogbericht (live: .portfolio.image + .portfolio.tekst.support.blog + .blogmeta + .casesslider.blog)
   ========================================================================== */
.lv-bimage { background: #8438df; padding: 264px 0 70px; }
.lv-bimage-img { margin-top: 20px; }
.lv-bimage-img img { display: block; width: 100%; height: 580px; object-fit: cover; border-radius: 15px; }
@media (max-width: 959px) { .lv-bimage { padding: 150px 0 40px; } .lv-bimage-img img { height: auto; aspect-ratio: 1200 / 580; } }
.lv-btext { background: #2e1352; color: #fff; padding: 70px 0; }
.lv-btext .lv-kb-date { color: #fff; }
.lv-tags--blog { padding: 20px 0 0; margin: 0; }
.lv-btext h1 { margin: 21px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.2; color: #fff; }
.lv-btext .lv-prose { margin-top: 20px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-btext .lv-prose > * + * { margin-top: 20px; }
.lv-btext .lv-prose h2, .lv-btext .lv-prose h3 { margin-top: 40px; font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 35px; color: #fff; }
.lv-btext .lv-prose h2 + *, .lv-btext .lv-prose h3 + * { margin-top: 20px; }
.lv-btext .lv-prose a { color: #c7fdbb; text-decoration: underline; }
.lv-btext .lv-prose img { border-radius: 15px; }
.lv-btext .lv-prose ul { list-style: disc; padding-left: 1.4em; }
.lv-btext .lv-prose blockquote { margin: 40px 0; padding: 0 0 0 20px; border-left: 4px solid #f7148b; }
.lv-btext .lv-prose blockquote, .lv-btext .lv-prose blockquote p { font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 30px; line-height: 35px; color: #fff; }
@media (max-width: 959px) { .lv-btext .lv-prose blockquote, .lv-btext .lv-prose blockquote p { font-size: 24px; line-height: 30px; } }
.lv-bmeta { background: #8438df; padding: 70px 0; }
.lv-bmeta-inner { box-sizing: border-box; display: grid; gap: 30px; align-items: center; max-width: 980px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 640px) { .lv-bmeta-inner { grid-template-columns: 343px 1fr; padding: 0 40px; } }
.lv-bmeta-photo { display: flex; justify-content: center; }
.lv-bmeta-photo img { display: block; width: 250px; height: 250px; border-radius: 100%; object-fit: cover; }
.lv-bmeta-card { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 340px; padding: 40px; border-radius: 20px; background: #f7148b; color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-bmeta-card p + p { margin-top: 20px; }
.lv-cases-meta { display: block; margin-top: 20px; font-family: var(--font-heading); font-weight: 700; font-size: 17.6px; line-height: 1.4; color: #fff; }
.lv-cases-meta + h4 { margin-top: 20px; }
.lv-cases--blog .lv-cases-inner { padding-top: 97px; }
@media (min-width: 960px) {
  .lv-cases--blog[data-hscroll-pin] { height: 300vh; padding: 0; overflow: visible; }
  .lv-cases--blog[data-hscroll-pin] .lv-cases-inner { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding-top: 0; overflow: hidden; }
}

/* Case-onderdelen (live: casesalbum, customfields, extras, portfolio quote) */
.lv-ptext--case .lv-ptext-inner, .lv-fields .lv-ptext-inner, .lv-extras .lv-ptext-inner { max-width: 980px; }
.lv-ptext--case { padding: 70px 0 0; }
.lv-album { background: #fff; padding: 20px 0; }
.lv-album-inner { position: relative; box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 639px) { .lv-album-inner { padding: 0 15px; } }
.lv-album-nav { position: absolute; top: 50%; z-index: 3; width: 60px; height: 50px; padding: 0; border: 0; cursor: pointer; background: url(../images/system/icons/pijl-donkerpaars2.svg) no-repeat center / 38px; }
.lv-album-prev { left: 60px; transform: translateY(-50%); }
.lv-album-next { right: 60px; transform: translateY(-50%) rotate(180deg); }
.lv-fields { background: #fff; color: #2e1352; padding: 20px 0; }
.lv-field + .lv-field { margin-top: 50px; }
.lv-field h2 { margin: 0 0 5px; font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 30px; color: #2e1352; }
.lv-field:first-child h2 { font-size: 21.6px; line-height: 21.6px; }
.lv-fields .lv-prose { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-fields .lv-prose > * + * { margin-top: 20px; }
.lv-extras { background: #fff; padding: 40px 0 70px; }
.lv-quote { background: linear-gradient(#fff 33%, #8438df 33%); padding: 70px 0; }
.lv-quote-grid { display: grid; }
@media (min-width: 960px) { .lv-quote-grid { grid-template-columns: 1fr 1fr; } }
.lv-quote-img img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: 15px 15px 0 0; }
@media (min-width: 960px) { .lv-quote-img img { height: 716px; border-radius: 15px 0 0 15px; } }
.lv-quote-card { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 70px; border-radius: 0 0 15px 15px; background: #2e1352; color: #fff; }
@media (min-width: 960px) { .lv-quote-card { border-radius: 0 15px 15px 0; } }
@media (max-width: 639px) { .lv-quote-card { padding: 40px 30px; } }
.lv-quote-icon { width: 60px; height: 60px; color: #f7148b; }
.lv-quote-text { margin-top: 20px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-quote-card h3 { margin: 40px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 24px; color: #fff; }

/* ==========================================================================
   Ons werk / Cases (live: .werkgrid + .werkgrid.filter)
   ========================================================================== */
.lv-mini--small { min-height: 0; padding-bottom: 50px; }
.lv-mini-sub { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3.8vw, 54px); line-height: .833; color: #2e1352; }
@media (max-width: 959px) { .lv-mini-sub { line-height: 1.1; } }
.lv-arrow-title { position: relative; display: block; margin: 20px 0 0; padding-right: 35px; text-align: right; font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: #fff; }
.lv-arrow-title::after { content: ""; position: absolute; right: 0; top: 50%; width: 25px; height: 25px; transform: translateY(-50%); background: url(../images/system/icons/pijl-roze.svg) no-repeat center / contain; transition: transform .2s; }
/* live: geen beweging van de pijl bij hover */
.lv-werkgrid { position: relative; background: #8438df; border-bottom: 400px solid #2e1352; padding: 70px 0 0; }
.lv-werkgrid::after { content: ""; position: absolute; bottom: -230px; left: 0; width: 470px; height: 470px; background: url(../images/system/wj-shape-duo-color.svg) no-repeat top left / 100%; pointer-events: none; }
@media (max-width: 959px) { .lv-werkgrid { border-bottom-width: 150px; } .lv-werkgrid::after { width: 200px; height: 200px; bottom: -120px; } }
.lv-werkgrid-list { position: relative; z-index: 2; display: grid; gap: 70px; margin: 0 0 -400px; padding: 0 0 500px; list-style: none; }
@media (min-width: 960px) { .lv-werkgrid-list { grid-template-columns: 1fr 1fr; } .lv-werkgrid-list li:nth-child(even) { transform: translateY(500px); } .lv-werkgrid-list li:nth-child(odd) { transform: translateY(63px); } }
@media (max-width: 959px) { .lv-werkgrid-list { margin-bottom: -150px; padding-bottom: 150px; gap: 40px; } }
.lv-werkgrid-list a { display: block; text-decoration: none; }
.lv-werkgrid-list img { display: block; width: 100%; aspect-ratio: 565 / 678; object-fit: cover; border-radius: 15px; }
.lv-werkfilter { background: #2e1352; color: #fff; padding: 70px 0; }
.lv-werkfilter-head { display: grid; gap: 30px; margin-bottom: 40px; }
@media (min-width: 960px) { .lv-werkfilter-head { grid-template-columns: 1fr 1fr; align-items: end; } }
.lv-werkfilter-head h2 { margin: 0; padding-bottom: 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(40px, 4vw, 57.6px); line-height: 1.125; color: #fff; }
.lv-werkfilter-tools { display: grid; gap: 20px; }
.lv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.lv-filter-label { margin-right: 4px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 2.7vw, 38.25px); line-height: 1.6; color: #fff; }
.lv-filter-opt, .lv-filter-more { padding: 6px 12px; border: 0; border-radius: 99px; cursor: pointer; font-family: var(--font-heading); font-weight: 700; line-height: 18px; color: #fff; transition: background-color .1s, color .1s; }
.lv-filter-opt { background: rgba(209, 209, 230, .2); font-size: 18px; }
.lv-filter-opt[aria-pressed="true"] { background: #f7148b; }
.lv-filter-opt:hover { background: #fff; color: #7056af; } /* live: .wj-filter-list label:hover */
.lv-filter-more { padding: 10px 12px; background: transparent; font-size: 16px; }
.lv-filter-more:hover { background: rgba(209, 209, 230, .2); }
.lv-werksearch { position: relative; display: block; }
.lv-werksearch input { box-sizing: border-box; width: 100%; height: 62px; padding: 20px 50px 20px 21px; border: 0; border-radius: 99px; background: #7056af; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 18px; outline: none; }
.lv-werksearch input::placeholder { color: rgba(255, 255, 255, .6); }
.lv-werksearch input:focus { box-shadow: 0 0 0 2px #c7fdbb; }
.lv-werksearch svg { position: absolute; right: 22px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #b4b5ba; pointer-events: none; }
.lv-werkfilter-grid { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .lv-werkfilter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lv-werkfilter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-werkfilter-grid a { display: block; text-decoration: none; }
.lv-werkfilter-grid img { display: block; width: 100%; aspect-ratio: 373 / 180; object-fit: cover; border-radius: 15px; }
.lv-werkfilter-grid .lv-arrow-title { margin-top: 22px; line-height: 36.4px; }
.lv-werkfilter-empty { margin-top: 40px; text-align: center; font-size: 20px; }
.lv-werkfilter-more { margin-top: 120px; text-align: center; }
.lv-btn--ghost { background: transparent; border: 1px solid #fff; color: #fff; }
.lv-btn--ghost:hover { border-color: #f7148b; color: #d1d1e6; }

/* ==========================================================================
   Blog- en supportoverzicht (live: .bloggridsection / .werkgrid.filter.kennisbank)
   ========================================================================== */
.lv-narrow { max-width: 750px; margin: 0 auto; }
.lv-mini-text { margin-top: 40px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; color: #fff; }
.lv-mini-text strong { font-weight: 700; }
.lv-mini-btn { margin-top: 20px; }
.lv-bloglist { background: #2e1352; padding: 90px 0 70px; }
.lv-bloglist-tabs { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 20px 20px; }
.lv-bloglist-tabs button { padding: 4px 10px; border: 0; border-radius: 99px; background: #8438df; color: #fff; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 20px; transition: background-color .1s, color .1s; }
.lv-bloglist-tabs button[aria-pressed="true"] { background: #fff; color: #8438df; } /* live: geen hover-effect op de tabs */
.lv-bloglist-grid { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.lv-blogcard { box-sizing: border-box; display: grid; gap: 20px 40px; padding: 30px 20px 20px; border-radius: 15px; background: #fff; color: #2e1352; text-decoration: none; }
@media (min-width: 960px) { .lv-blogcard { grid-template-columns: 440px 1fr; padding: 30px 20px 20px 20px; } }
.lv-blogcard-img img { display: block; width: 100%; height: 338px; object-fit: cover; border-radius: 15px; }
@media (max-width: 959px) { .lv-blogcard-img img { height: auto; aspect-ratio: 440 / 338; } }
.lv-blogcard-body { display: flex; flex-direction: column; align-items: flex-start; padding-top: 20px; }
.lv-blogcard-meta { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 29.25px; color: #6c6d74; }
.lv-blogcard-meta img { display: block; width: 50px; height: 50px; border-radius: 100%; object-fit: cover; }
.lv-blogcard h2 { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; color: #2e1352; }
.lv-blogcard-text { margin: 20px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; color: #2e1352; }
.lv-blogcard .lv-btn { margin-top: 20px; }
.lv-blogcard:hover .lv-btn--green { background: transparent; border-color: #2e1352; }
.lv-kblist { background: #2e1352; color: #fff; padding: 70px 0; }
.lv-kblist-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 20px 40px; padding: 40px 0; }
.lv-kblist-search { position: relative; }
.lv-kblist-search input { box-sizing: border-box; width: 140px; height: 55px; padding: 20px 40px 20px 21px; border: 0; border-radius: 99px; background: #fff; color: #2e1352; font-family: var(--font-heading); font-weight: 700; font-size: 20px; outline: none; transition: width .3s; }
.lv-kblist-search input:focus { width: 260px; }
.lv-kblist-search input::placeholder { color: #b4b5ba; }
.lv-kblist-search svg { position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #b4b5ba; pointer-events: none; }
.lv-kblist-select select { box-sizing: border-box; width: 140px; height: 55px; padding: 0 40px 0 21px; border: 0; border-radius: 99px; appearance: none; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237056af' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center / 12px; color: #7056af; font-family: var(--font-body); font-weight: 500; font-size: 22.5px; }
.lv-kblist-reset { border: 0; background: none; cursor: pointer; color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 22.5px; line-height: 1.625; }
.lv-kblist-reset:hover { text-decoration: underline; }
.lv-kblist-grid { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .lv-kblist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lv-kblist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-kblist-grid a { display: block; padding: 22px 0 40px 40px; color: #fff; text-decoration: none; }
.lv-kblist-grid h2 { margin: 0; padding-right: 35px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2vw, 28.134px); line-height: 1.4; color: #fff; }
.lv-kblist-more { position: relative; display: inline-block; margin-top: 20px; padding-right: 35px; font-family: var(--font-heading); font-weight: 500; font-size: 22.5px; line-height: 36.5625px; color: #d1d1e6; letter-spacing: 1px; }
.lv-kblist-more::after { content: ""; position: absolute; right: 0; top: 50%; width: 25px; height: 25px; transform: translateY(-50%); background: url(../images/system/icons/pijl-roze.svg) no-repeat center / contain; transition: transform .2s; }
/* live (.support-grid-kennisbank): kaart-hover = titel lichtgrijs, 'Meer info' roze bij hover op de link zelf */
.lv-kblist-grid h2 { transition: color .2s ease-in-out; }
.lv-kblist-grid a:hover h2 { color: #d1d1e6; }
.lv-kblist-more { transition: color .2s ease-in-out; }
.lv-kblist-more:hover { color: #f7148b; }
@media (max-width: 959px) { .lv-kblist-grid a { padding-left: 0; } .lv-kblist-tools { justify-content: flex-start; } }

/* ==========================================================================
   Blokken op pagina's buiten het Sketch-ontwerp (live-opmaak)
   ========================================================================== */
/* Paginakop (live: .intro.full) */
.lv-intro { box-sizing: border-box; min-height: 55vh; padding: 294px 0 100px; background: #8438df; color: #fff; }
@media (max-width: 959px) { .lv-intro { min-height: 0; padding: 150px 0 50px; } }
.lv-intro h1 { margin: 40px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(45px, 6vw, 86.4px); line-height: .917; color: #fff; overflow-wrap: anywhere; }
.lv-intro h1 span { color: #2e1352; }

/* Tekst + foto (live: .bloktekstduo / .bloktekstduo.wit) */
.lv-tduo { padding: 70px 0; }
.lv-tduo--paars { background: #8438df; color: #fff; }
.lv-tduo--wit { background: #fff; color: #2e1352; }
.lv-tduo--dark { background: #2e1352; color: #fff; }
.lv-tduo-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .lv-tduo-grid { grid-template-columns: 438px 1fr; gap: 70px; } .lv-tduo--wide .lv-tduo-grid { grid-template-columns: 565px 1fr; } .lv-tduo-grid--imgright { grid-template-columns: 1fr 438px; } .lv-tduo-grid--imgright .lv-tduo-img { order: 2; } }
/* Foto's in tekstblokken zoals live: eigen verhouding, gif's onbewerkt */
.lv-tduo-img img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 15px; }
/* live (YOOtheme uk-flex-1): foto in eigen verhouding op 438 breed; rekt mee (cover) als de tekst hoger is */
@media (min-width: 960px) {
  .lv-tduo-img img:not(.lv-natural) { height: 100%; }
}
@media (max-width: 959px) { .lv-tduo-img img { height: auto; } }
.lv-ti h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; color: inherit; }
.lv-ti h2.lv-ti-h--40 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.075; }
.lv-ti-eyebrow { margin: 0 0 20px; font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.lv-ti-sub { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2.1vw, 30px); line-height: 1; color: #f7148b; }
.lv-ti-text { margin-top: 20px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-ti-text > * + * { margin-top: 20px; }
.lv-ti-text a { color: inherit; text-decoration: underline; }
.lv-ti-text ul { list-style: none; padding-left: 35px; }
.lv-ti-text ul li { position: relative; padding-bottom: 10px; line-height: 30px; }
.lv-ti-text ul li::before { content: ""; position: absolute; left: -35px; top: 0; width: 30px; height: 30px; background: url(../images/system/icons/pijl-tesktbullet.svg) no-repeat center / cover; }
.lv-ti-listtitle { margin: 30px 0 10px; font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.lv-ti-list { margin: 0; padding: 0 0 0 35px; list-style: none; font-family: var(--font-body); font-weight: 500; font-size: 18px; }
.lv-ti-list li { position: relative; padding: 0 0 10px; line-height: 30px; }
.lv-ti-list li::before { content: ""; position: absolute; left: -35px; top: 0; width: 30px; height: 30px; background: url(../images/system/icons/pijl-tesktbullet.svg) no-repeat center / cover; }
.lv-ti-list a { color: inherit; }
.lv-ti .lv-btn { margin-top: 20px; }

/* Donkere kaart met foto (live: .duopannel) */
.lv-panelduo { padding: 70px 0; background: linear-gradient(#8438df 70%, #fff 70%); }
.lv-panelduo-card { display: grid; overflow: hidden; border-radius: 15px; background: #2e1352; color: #fff; }
@media (min-width: 960px) { .lv-panelduo-card { grid-template-columns: 1fr 1fr; min-height: 630px; } .lv-panelduo-card--imgleft .lv-panelduo-img { order: -1; } }
.lv-panelduo-body { display: flex; flex-direction: column; justify-content: center; padding: 70px; }
@media (max-width: 639px) { .lv-panelduo-body { padding: 40px 30px; } }
.lv-panelduo-img img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

/* Voordelen (live: .voordelen) */
.lv-voordelen { padding: 100px 0; }
.lv-voordelen--wit { background: #fff; color: #2e1352; }
.lv-voordelen--paars { background: #8438df; color: #fff; }
.lv-voordelen h2 { margin: 0; padding-bottom: 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.075; color: inherit; }
.lv-accent2 { color: #8438df; }
.lv-voordelen--paars .lv-accent2 { color: #2e1352; }
.lv-voordelen-intro { margin-bottom: 20px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-voordelen-grid { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .lv-voordelen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-voordelen-head { display: flex; align-items: center; gap: 15px; }
.lv-voordelen-num { display: grid; place-items: center; flex-shrink: 0; box-sizing: border-box; width: 28px; height: 28px; padding: 4px; border-radius: 99px; background: #f7148b; color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 22px; line-height: 20px; }
.lv-voordelen-num:empty { background: #f7148b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 70%; }
.lv-voordelen h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: inherit; }
.lv-voordelen li p { margin: 20px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }

/* Meet … (live: .meetme) — donkere afgeronde kaart; links gedraaid accoladepatroon (blur bij binnenscrollen) + foto, rechts quote */
.lv-meet { padding: 70px 0; background: #8438df; color: #fff; }
.lv-meet-grid { display: grid; overflow: hidden; border-radius: 15px; background: #2e1352; }
@media (min-width: 960px) { .lv-meet-grid { grid-template-columns: 1fr 1fr; } }
.lv-meet-card { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 360px; padding: 0 0 0 50px; will-change: filter; }
.lv-meet-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url(../images/system/wj-shape.svg) repeat-y 0 0 / 50%; filter: invert(0%) sepia(140%) saturate(2953%) hue-rotate(232deg) brightness(46%) contrast(102%); transform: rotate(347deg); }
.lv-meet-photo { position: absolute; bottom: 0; left: 170px; z-index: 1; width: 450px; }
.lv-meet-photo img { display: block; width: 100%; height: auto; }
.lv-meet-name { position: relative; z-index: 2; width: 220px; }
.lv-meet-name h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: clamp(35px, 4.5vw, 50px); color: #fff; }
.lv-meet-name p { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: clamp(20px, 2vw, 26px); }
.lv-meet-body { display: flex; flex-direction: column; justify-content: flex-end; padding: 50px 50px 100px; }
.lv-meet-quote { display: block; width: 60px; height: 60px; color: #8438df; }
.lv-meet-quote svg { width: 60px; height: 60px; }
.lv-meet-text { margin-top: 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(19px, 2vw, 22.5px); line-height: clamp(27px, 2.5vw, 31.5px); }
.lv-meet-text p + p { margin-top: 20px; }
.lv-meet-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 10px; }
@media (max-width: 959px) {
  .lv-meet-card { flex-direction: column; align-items: flex-start; gap: 20px; min-height: 0; padding: 20px 0 0; }
  .lv-meet-name { padding: 0 0 0 40px; }
  .lv-meet-photo { position: relative; left: auto; width: 80%; max-width: 450px; margin: 0 auto; }
  .lv-meet-body { padding: 0 30px 30px; border-top: 1px solid #2e1352; }
  .lv-meet-quote { position: relative; top: -30px; margin: 0 auto -50px; }
  .lv-meet-buttons .lv-btn { min-width: 100%; justify-content: center; }
}
.lv-btn--tall { min-height: 46px; line-height: 22px; padding: 10px 20px; }
.lv-meet .lv-btn--green:hover { border-color: #fff; color: #fff; }

/* Kaartenslider (live: .werkwijzesliderduo) */
.lv-cslider { padding: 70px 0; background: #8438df; color: #fff; overflow: hidden; }
.lv-cslider-inner { box-sizing: border-box; display: grid; gap: 40px; padding-left: 15px; }
@media (min-width: 640px) { .lv-cslider-inner { padding-left: 40px; } }
@media (min-width: 960px) { .lv-cslider-inner { grid-template-columns: 526px 1fr; align-items: center; } }
@media (min-width: 1280px) { .lv-cslider-inner { padding-left: calc((100vw - 1200px) / 2 + 5px); } }
.lv-cslider h2 { margin: 0; padding-bottom: 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.075; color: #fff; }
.lv-cslider-list { margin: 0; padding: 0 0 0 8px; list-style: none; }
.lv-cslider-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 35px; }
.lv-cslider-list svg { width: 38px; height: 38px; flex-shrink: 0; }
.lv-cslider-right { min-width: 0; }
.lv-cslider-wrap { position: relative; }
.lv-cslider-track { display: flex; gap: 40px; margin: 0; padding: 0 40px 0 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lv-cslider-track::-webkit-scrollbar { display: none; }
.lv-cslider-track li { flex: 0 0 273px; scroll-snap-align: start; }
.lv-ccard { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; padding: 30px; border-radius: 15px; background: #fff; color: #2e1352; }
.lv-ccard h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.4; color: #8438df; }
.lv-ccard-meta { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.4; color: #8438df; }
.lv-ccard-text { margin: 20px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-ccard-btn { align-self: flex-start; margin-top: auto; padding: 10px; border: 2px solid rgba(46, 19, 82, .73); border-radius: 99px; color: rgba(46, 19, 82, .73); text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 5px; transition: .1s; }
.lv-ccard-btn:hover { background: rgba(46, 19, 82, .73); border-color: rgba(46, 19, 82, .73); color: #fff; } /* leesbaar: witte tekst op de donkere vulling */
.lv-ccard-text + .lv-ccard-btn { margin-top: 22px; }
.lv-cslider-nav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; background: url(../images/system/icons/pijl-roze.svg) no-repeat center / contain; }
.lv-cslider-prev { left: -20px; transform: translateY(-50%) rotate(180deg); }
.lv-cslider-next { right: 35px; transform: translateY(-50%); }
.lv-cslider-wrap::after { content: ""; position: absolute; top: 0; right: -150px; z-index: 2; width: 400px; height: 100%; background-image: linear-gradient(270deg, rgba(132, 56, 223, .45) 0%, rgba(185, 105, 241, 0) 100%); pointer-events: none; }

/* Pinned projectenslider op pagina's buiten het Sketch-ontwerp (live: casesslider met uk-height-viewport) */
@media (min-width: 960px) {
  .lv-cases--pin[data-hscroll-pin] { height: 225vh; padding: 0; overflow: visible; }
  .lv-cases--pin[data-hscroll-pin] .lv-cases-inner { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; overflow: hidden; }
}

/* "Klant Case" (live: .anderwerkslider.v2) */
.lv-ander--dark { background: linear-gradient(#8438df 50%, #fff 50%); }
.lv-ander--dark .lv-ander-card { background: #2e1352; }
.lv-ander--dark .lv-ander-title::after { top: 1px; width: 40px; height: 40px; background-image: url(../images/system/icons/pijl-wit.svg); background-size: cover; transform: rotate(180deg); }
.lv-cslider-wrap { margin-top: 20px; }
.lv-voordelen h2 + .lv-voordelen-grid { margin-top: 20px; }
@media (min-width: 960px) { .lv-cases--pin-long[data-hscroll-pin] { height: 300vh; } }

/* Tussenkoppen in tekstblokken (live: h3 in .tekstblok / .el-content) */
.lv-ti-text h3 { font-family: var(--font-heading); font-weight: 700; font-size: 28px; line-height: 39.2px; color: #2d2e33; }
.lv-tduo--paars .lv-ti-text h3, .lv-tduo--dark .lv-ti-text h3 { color: #fff; }
.lv-ti-text * + h3 { margin-top: 40px; }
.lv-panelduo .lv-ti-text h3 { font-size: 30px; line-height: 30px; color: #f7148b; }
/* live breekt lange woorden in de intro-kop niet af (ze lopen door); op telefoons wel, anders ontstaat horizontaal scrollen */
@media (min-width: 640px) { .lv-intro h1, .lv-mini h1 { overflow-wrap: normal; } }

/* Tarieven (live: .voordelen.paars met fs-teaser-kaarten) */
.lv-pricing { padding: 100px 0; background: #8438df; color: #fff; }
.lv-pricing h2 { margin: 0; padding-bottom: 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.075; color: #fff; }
.lv-pricing-grid { display: grid; gap: 40px; margin-top: 20px; }
@media (min-width: 640px) { .lv-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .lv-pricing-grid { grid-template-columns: repeat(var(--lv-cols, 3), minmax(0, 1fr)); } }
.lv-pricing-grid { row-gap: 15px; }
.lv-pricing-grid--intro { margin-top: 40px; }
.lv-pricing-head { max-width: 1010px; }
.lv-pricing-intro { margin-top: 20px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 29.25px; color: #fff; }
.lv-pricing-intro p + p { margin-top: 20px; }
.lv-pricing-attrs li { display: flex; align-items: center; gap: 10px; }
.lv-pricing-attrs li > span { flex: 1; min-width: 0; }
.lv-pricing-attrs li > svg { flex-shrink: 0; width: 24px; height: 24px; color: #7056af; }
.lv-pricing-attrs li.lv-pa--close > svg { color: #f7148b; }
.lv-pricing-card { display: flex; flex-direction: column; padding: 40px; border-radius: 15px; background: #fff; color: #2e1352; }
.lv-pricing-card h3 { margin: 0 0 5px; font-family: var(--font-heading); font-weight: 700; font-size: 28px; line-height: normal; color: #2e1352; }
.lv-pricing-stars { display: inline-block; align-self: flex-start; margin-top: 6px; font-family: Times, serif; font-size: 32px; line-height: 32px; background: linear-gradient(90deg, #f7148b var(--lv-stars), #e5e5e5 var(--lv-stars)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lv-pricing-attrs { margin: 20px 0 0; padding: 0; list-style: none; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 29.25px; color: #2e1352; }
.lv-pricing-attrs li + li { position: relative; margin-top: 13px; }
.lv-pricing-attrs li + li::before { content: ""; position: absolute; top: -7px; left: 0; right: 0; border-top: 1px solid #e5e5e7; }
.lv-pricing-attrs strong { font-weight: 700; }
.lv-pricing-price { margin: auto 0 0; padding-top: 30px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 30px; color: #7056af; }
.lv-pricing-cur { color: #b4b5ba; }
.lv-pricing-note { margin-top: 20px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 29.25px; color: #fff; }
.lv-pricing-note p + p { margin-top: 20px; }
.lv-pricing-note a { color: inherit; text-decoration: underline; }
.lv-pricing-btn { margin-top: 20px; padding-top: 10px; text-align: center; }
.lv-btn--outline-white { background: transparent; border-color: #fff; color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 38px; padding: 0 20px; }
.lv-btn--outline-white:hover { background: #c7fdbb; border-color: #c7fdbb; color: #2e1352; }
@media (max-width: 959px) { .lv-pricing { padding: 50px 0; } .lv-pricing-card { padding: 30px; } }

/* Domeinnaamcheck (live: .hostfactintegratie; formulier komt uit HostFact whois.php) */
.lv-whois { padding: 70px 0; background: #8438df; color: #fff; font-family: var(--font-body); font-weight: 500; }
.lv-whois h2 { margin: 0; padding-bottom: 20px; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.075; color: #fff; }
.lv-whois .wj-whois { margin-top: 20px; }
.lv-whois .w_form form { display: flex; justify-content: center; width: 100%; margin: 0 auto; }
.lv-whois .w_form input[type=text] { box-sizing: content-box; width: 400px; max-width: calc(100% - 180px); height: 53px; padding: 0 20px; border: 0; border-radius: 99px 0 0 99px; background: rgba(46, 19, 82, .314); color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 18px; outline: 0; }
.lv-whois .w_form .wf_form_submit { height: 53px; padding: 0 20px; border: 2px solid #f7148b; border-radius: 0 99px 99px 0; background: #f7148b; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: clamp(15px, 2vw, 17px); cursor: pointer; }
.lv-whois .w_form .wf_form_submit:hover { background: #fff; border-color: #fff; color: #7056af; }
.lv-whois .w_result table th, .lv-whois .w_result table td { border-bottom: 1px solid #e6e6e659; }
.lv-whois .w_result table th { font-family: var(--font-heading); font-weight: 700; }
.lv-whois .w_result table td.domain_td_checked_available { color: #c7fdbb; font-family: var(--font-heading); font-weight: 700; }
.lv-whois .w_result table td.domain_td_checked_unavailable { color: #f7148b; font-family: var(--font-heading); font-weight: 700; }
.lv-whois .order_link, .lv-whois .goto_orderform, .lv-whois .show_other_tlds { padding: 5px 10px; border: 2px solid #fff; border-radius: 99px; background: transparent; color: #fff; font-size: clamp(15px, 2vw, 17px); text-decoration: none; }
.lv-whois .order_link { font-family: var(--font-heading); font-weight: 700; }
.lv-whois .order_link:hover, .lv-whois .goto_orderform:hover, .lv-whois .show_other_tlds:hover { background: #c7fdbb; border-color: #c7fdbb; color: #2e1352; }

/* Donker tekstblok (live: .bloktext2) — witte ondertitel direct onder de kop, grote foto 565×678 */
.lv-tduo--dark .lv-ti h2 { padding-bottom: 20px; }
.lv-tduo--dark .lv-ti-sub { margin: 0; font-size: 28px; line-height: 1.4; color: #fff; }
.lv-tduo--dark .lv-ti-text { margin-top: 10px; }
.lv-tduo--dark .lv-btn--violet:hover { background: transparent; border-color: #fff; color: #fff; }
/* donker blok: foto in eigen verhouding (live: uk-flex-1 op de YOOtheme-afbeelding); rekt mee als de tekst hoger is */
@media (min-width: 960px) {
  .lv-tduo--dark .lv-tduo-img { min-height: 0; }
  .lv-tduo--dark .lv-tduo-img img:not(.lv-natural) { position: static; height: 100%; }
}
.lv-pricing--xl .lv-container { max-width: none; }
/* Lijsten in de donkere duo-kaart (live: .duopannel .el-content ul) zijn gewone bolletjes */
.lv-panelduo .lv-ti-text ul { list-style: disc; padding-left: 30px; }
.lv-panelduo .lv-ti-text ul li { padding-bottom: 0; line-height: 29.25px; }
.lv-panelduo .lv-ti-text ul li::before { content: none; }
/* "Liggend bijgesneden" (live: YOOtheme-afbeelding op 1084×740) */
.lv-tduo-img--landscape img { aspect-ratio: 1084 / 740; }
/* Compacte intro (live: .intro.full.mini, uk-section-small) */
.lv-intro--mini { min-height: 0; padding: 244px 0 50px; }
@media (max-width: 959px) { .lv-intro--mini { padding: 150px 0 40px; } }
.lv-intro .lv-wide { max-width: 1200px; margin: 0 auto; }

/* Privacy / voorwaarden / aanvullende dienst (live: .portfolio.tekst.support in de smalle 750-kolom) */
.lv-kb--page h1 { margin-top: 20px; }
.lv-kb--page .lv-kb-text { margin-top: 20px; column-count: 1; }
.lv-kb--page .lv-kb-text h3 { margin-top: 40px; font-size: 28px; line-height: 39.2px; }
.lv-kb--page .lv-kb-text a { color: #2d2e33; text-decoration: none; }
.lv-kb--page .lv-kb-text a:hover { color: #09090a; text-decoration: underline; }
.lv-kb--page .lv-kb-text > :last-child { margin-bottom: 0; }
.lv-taglist { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 20px; padding: 0; list-style: none; }
.lv-taglist a { display: block; padding: 4px 10px; border-radius: 99px; background: #d1d1e6; color: #2e1352; text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 22px; }
.lv-kb-btn { margin-top: 20px; }
.lv-kb--page .lv-kb-text h2 { margin: 40px 0 20px; padding-bottom: 20px; font-size: 30px; line-height: 35px; }
.lv-kb--page .lv-kb-text > h2:first-child, .lv-kb--page .lv-kb-text > h3:first-child { margin-top: 0; }

/* Aanvullende diensten-overzicht (live: .werkgrid) */
.lv-svcgrid { position: relative; padding: 70px 0; background: #8438df; border-bottom: 400px solid #2e1352; }
.lv-svcgrid::after { content: ""; position: absolute; bottom: -230px; left: 0; z-index: 0; width: 470px; height: 470px; background: url(../images/system/wj-shape-duo-color.svg) no-repeat 0 0 / 100%; }
.lv-svcgrid-list { position: relative; z-index: 2; display: grid; gap: 70px; margin: 0 0 -400px; padding: 0; list-style: none; }
@media (min-width: 640px) { .lv-svcgrid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lv-svcgrid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-svcgrid-list a { display: block; text-decoration: none; }
.lv-svcgrid-list img { display: block; width: 100%; aspect-ratio: 271 / 325; object-fit: cover; border-radius: 15px; }
.lv-svcgrid-list h2 { position: relative; left: -40px; margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 3vw, 26px); line-height: clamp(20px, 3vw, 26px); color: #fff; text-align: right; }
.lv-svcgrid-list h2::after { content: ""; position: absolute; top: 2px; right: -40px; width: 25px; height: 25px; background: url(../images/system/icons/pijl-roze.svg) no-repeat 0 0 / 25px; }
@media (max-width: 959px) { .lv-svcgrid { padding: 40px 0; } .lv-svcgrid::after { width: 300px; height: 300px; bottom: -150px; } }

/* "Wij werken nu aan": lopende regel van rechts naar links, eindeloos */
@keyframes wj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[data-marquee-track].is-marquee { animation: wj-marquee var(--wj-marquee-dur, 120s) linear infinite; will-change: transform; }

/* Hover zoals live: rasterkaarten Ons werk/Cases "Meer werk" (live .wj-grid-items .uk-card:hover) — foto zoomt 1.05, titel lichtgrijs */
.lv-zoom { display: block; overflow: hidden; border-radius: 15px; }
.lv-zoom img { transition: transform .2s ease-in-out; }
.lv-werkfilter-grid a:hover .lv-zoom img { transform: scale(1.05); }
.lv-werkfilter-grid .lv-arrow-title { transition: color .2s ease-in-out; }
.lv-werkfilter-grid a:hover .lv-arrow-title { color: #d1d1e6; }
/* Labels boven de titel van een aanvullende dienst (live .taglist a): onderstreept bij hover */
.lv-taglist a:hover { text-decoration: underline; }
.lv-tags--blog a:hover { color: #2e1352; text-decoration: none; } /* live: auteurslabel zonder hover-effect */

/* FAQ (live: .urgentfaq) */
.lv-faq { padding: 70px 0; background: #fff; }
.lv-faq-title { margin: 0; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.2; color: #2d2e33; }
.lv-faq-list { display: grid; gap: 20px; max-width: 750px; margin: 20px auto 0; }
.lv-faq-item { padding: 0 20px; border-radius: 20px; background: #2e1352; }
.lv-faq-item:first-child { border-top: 1px solid rgba(255, 255, 255, .15); }
.lv-faq-item h3 { margin: 0; }
.lv-faq-q { position: relative; display: block; width: 100%; margin: 0; padding: 20px 45px 20px 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--font-heading); font-weight: 700; font-size: clamp(16px, 2vw, 18px); line-height: 1.4; color: #fff; }
.lv-faq-q::after { content: ""; position: absolute; right: 0; top: 50%; width: 24px; height: 24px; transform: translateY(-50%) rotate(90deg); background: url(../images/system/icons/pijl-roze.svg) no-repeat center / contain; transition: transform .2s ease; }
.lv-faq-q:hover, .lv-faq-q[aria-expanded="true"] { color: #c7fdbb; }
.lv-faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(270deg); }
.lv-faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.lv-faq-item[data-open] .lv-faq-panel { grid-template-rows: 1fr; }
.lv-faq-panel > div { overflow: hidden; }
.lv-faq-a { padding: 0 45px 20px 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.7; color: #fff; }
.lv-faq-a p { margin: 0; }
.lv-faq-a a { color: #fff; text-decoration: underline; }

/* Roze keuzeknoppen in blokken uit het ontwerp: hover zoals de roze knoppen op live (omlijnd, transparant) */
.chip.lv-chip-hover { transition: background-color .1s ease-in-out, box-shadow .1s ease-in-out; }
.chip.lv-chip-hover:hover { background: transparent; box-shadow: inset 0 0 0 2px #fff; }

/* Voordelen: 2 items = 2 kolommen (live: uk-child-width-1-2@m); opsommingen in de tekst */
@media (min-width: 960px) { .lv-voordelen-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lv-voordelen-text ul { margin: 20px 0 0; padding-left: 30px; list-style: disc; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 29.25px; }
.lv-voordelen-text em { color: #2d2e33; }

/* Tekstblok zonder afbeelding: tekst over de volle breedte */
@media (min-width: 960px) { .lv-tduo-grid--noimg, .lv-tduo--wide .lv-tduo-grid--noimg { grid-template-columns: 1fr; } }
/* Tekstkaart (live: .bloktekstduo.urgent / .medium) */
.lv-tcard-sec { padding: 70px 0; background: #8438df; color: #fff; }
.lv-tcard { box-sizing: border-box; padding: 40px; border-radius: 20px; color: #fff; }
.lv-tcard--pink { background: #f7148b; }
.lv-tcard--dark { background: #2e1352; }
.lv-tcard--narrow { max-width: 900px; margin: 0 auto; }
.lv-tcard h2 { color: #fff; }
.lv-tcard .lv-ti-text strong { font-weight: 700; }
@media (max-width: 639px) { .lv-tcard { padding: 30px 20px; } }

/* Afspraak met een Webjongen (live: .koffie_switcher) — sluit zonder ruimte aan op het blok erboven */
.lv-booking { padding: 0 0 70px; background: #8438df; color: #fff; text-align: center; }
.lv-booking-grid { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .lv-booking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lv-booking-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-booking img { display: block; width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; object-fit: cover; }
.lv-booking h3 { margin: 20px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 25.2px; color: #fff; }
.lv-booking-role { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 14.4px; line-height: 20.16px; color: #2e1352; }
.lv-booking-btns { margin: 20px 0 0; line-height: 29.25px; }
.lv-booking-btns a { display: inline-block; min-width: 145px; margin: 5px 0; box-sizing: content-box; padding: 10px 20px; border: 2px solid #fff; border-radius: 99px; background: transparent; color: #fff; text-align: center; text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 27.625px; transition: .1s ease-in-out; transition-property: color, background-color, border-color; }
.lv-booking-btns a:hover { background: #c7fdbb; border-color: #c7fdbb; color: #2e1352; }
.lv-ti-arrow { margin-top: 20px; line-height: 0; }
@media (min-width: 960px) { .lv-tduo-img { align-self: stretch; } }
.lv-meet .lv-btn--green { color: #2d2e33; } /* live: tekstkleur van de mail-link in .meetme */

/* Datumprikker (live: #afgesproken, uk-container-small) */
.lv-prikker { padding: 70px 0; background: #8438df; }
.lv-prikker-inner { max-width: 900px; margin: 0 auto; }
/* Voordelen zoals live: onvolledige laatste rij gecentreerd (uk-flex-center), accentwoord roze op wit */
@media (min-width: 960px) {
  .lv-voordelen-grid:not(.lv-voordelen-grid--2) { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
  .lv-voordelen-grid:not(.lv-voordelen-grid--2) > li { flex: 0 0 calc((100% - 80px) / 3); }
}
.lv-voordelen--wit .lv-accent2 { color: #f7148b; }
.lv-panelduo-body .lv-btn { align-self: flex-start; }
.lv-panelduo .lv-ti-sub { font-size: clamp(20px, 3vw, 30px); line-height: clamp(20px, 3vw, 30px); } /* live: .duopannel .el-meta */

/* Introtekst (live: .introtekst) */
.lv-introtekst { padding: 75px 0; background: #fff; color: #2e1352; text-align: center; }
.lv-introtekst--notop { padding-top: 0; }
.lv-introtekst-inner { max-width: 900px; margin: 0 auto; }
.lv-introtekst-img { display: block; width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 50%; object-fit: cover; }
.lv-introtekst h2 { margin: 0; padding-bottom: 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.075; color: #2e1352; }
.lv-introtekst h2 .lv-accent2 { color: #8438df; }
.lv-introtekst-text { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-introtekst-text p + p { margin-top: 20px; }
.lv-introtekst-btn { margin-top: 20px; }
.lv-introtekst h2 + .lv-introtekst-text { margin-top: 20px; }
.lv-ti-text > h3:first-child { margin-top: 0; }

/* Gecentreerde intro (live: .intro zonder .full) */
.lv-intro-c { padding: 100px 0; background: #8438df; color: #fff; text-align: center; }
.lv-intro-c--first { padding-top: 294px; }
@media (max-width: 959px) { .lv-intro-c { padding: 50px 0; } .lv-intro-c--first { padding-top: 150px; } }
.lv-intro-c h1 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(36px, 5vw, 72px); line-height: 1.2; color: #fff; }
.lv-intro-c .text-dark { color: #2e1352; }
.lv-intro-c-line { display: block; }
.lv-intro-c-line + .lv-intro-c-line { margin-top: 20px; }
.lv-intro-c h2 { margin: 0; padding-bottom: 20px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.075; color: #2d2e33; }
.lv-intro-c-img { display: block; width: 100%; max-width: 750px; height: auto; aspect-ratio: 750 / 560; margin: 0 auto 60px; border-radius: 20px; object-fit: cover; }
.lv-intro-c--first h1 { margin-bottom: 20px; }
.lv-tduo-img--portrait img { aspect-ratio: 438 / 525; } /* live: YOOtheme-afbeelding bijgesneden op 438×525 */

/* ==========================================================================
   Knop-hovers: één regel voor de hele site, altijd leesbaar
   - Gevulde knoppen (roze, paars, groen, donker, wit) worden omlijnd en transparant.
     Tekst + rand zijn wit op donkere/gekleurde achtergronden en donkerpaars op lichte;
     app.js (initButtonContrast) zet .wj-on-light waar donkerpaars beter leesbaar is.
   - Omlijnde knoppen vullen zich groen met donkere tekst.
   ========================================================================== */
.btn-primary:hover, .btn-violet:hover, .btn-accent:hover, .btn-dark:hover, .btn-secondary:hover,
.lv-btn--pink:hover, .lv-btn--violet:hover, .lv-btn--green:hover,
.lv-meet .lv-btn--green:hover, .lv-tduo--dark .lv-btn--violet:hover { background: transparent; border-color: #fff; color: #fff; }
.wj-on-light.btn-primary:hover, .wj-on-light.btn-violet:hover, .wj-on-light.btn-accent:hover, .wj-on-light.btn-dark:hover, .wj-on-light.btn-secondary:hover,
.wj-on-light.lv-btn--pink:hover, .wj-on-light.lv-btn--violet:hover, .wj-on-light.lv-btn--green:hover,
.lv-blogcard:hover .lv-btn--green { background: transparent; border-color: #2e1352; color: #2e1352; }
.btn-outline:hover, .lv-btn--outline:hover, .lv-btn--outline-white:hover, .lv-booking-btns a:hover { background: #c7fdbb; border-color: #c7fdbb; color: #2e1352; }
.lv-btn--ghost:hover { background: #c7fdbb; border-color: #c7fdbb; color: #2e1352; }

/* Ingesloten video's in tekst (live: .vimeo-responsive / YouTube via de Joomla-plugin): 16:9 */
.vimeo-responsive, .youtube-responsive { position: relative; overflow: hidden; height: 0; margin: 20px 0; padding-bottom: 56.25%; border-radius: 15px; }
.vimeo-responsive iframe, .youtube-responsive iframe, .vimeo-responsive > div, .youtube-responsive > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Contactblok (live: .contactblok) */
.lv-contactblok { padding: 100px 0; background: #8438df; color: #fff; }
.lv-contactblok-grid { display: grid; }
@media (min-width: 960px) { .lv-contactblok-grid { grid-template-columns: 1fr 1fr; } }
.lv-contactblok-main { padding: 75px 50px; border-radius: 15px 0 0 15px; background: #2e1352; }
.lv-contactblok h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 3vw, 32px); line-height: 43.2px; color: inherit; }
.lv-contactblok-btns { display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0 40px; }
.lv-contactblok-address { margin: 20px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 29.25px; }
.lv-contactblok-route { gap: 8px; margin-top: 40px; }
.lv-contactblok-cards { display: grid; }
.lv-contactblok-card { display: flex; flex-direction: column; justify-content: center; min-height: 326px; box-sizing: border-box; padding: 75px 50px; }
.lv-contactblok-card--pink { background: #f7148b; color: #fff; border-radius: 0 15px 0 0; }
.lv-contactblok-card--white { background: #fff; color: #2e1352; border-radius: 0 0 15px 0; }
.lv-contactblok-card .lv-contactblok-meta { margin: 0 !important; font-family: var(--font-heading); font-weight: 700; font-size: 17.6px; line-height: 24.64px; }
.lv-contactblok-card p { margin: 20px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 29.25px; }
@media (max-width: 959px) {
  .lv-contactblok { padding: 50px 0; }
  .lv-contactblok-main { border-radius: 15px 15px 0 0; padding: 40px 30px; }
  .lv-contactblok-card { min-height: 0; padding: 40px 30px; }
  .lv-contactblok-card--pink { border-radius: 0; }
  .lv-contactblok-card--white { border-radius: 0 0 15px 15px; }
}

/* Chatbot "Guus" (EasyWorkflows), zoals live */
.ew-chatbotpro-toggle { background: #c7fdbb !important; }
.ew-chatbotpro-toggle svg { display: none; }
.ew-chatbotpro-widget .ew-chatbotpro-toggle::after { content: ""; display: block; position: absolute; top: 50%; width: 48px; height: 48px; border-radius: 50%; background: url(../images/system/Guus-support-purple.svg) no-repeat center / contain; transform: translateY(-50%); }

/* Contact: privacy/voorwaarden en kaart "Support nodig?" (zoals live) */
.lv-contact-legal { display: flex; gap: 20px; margin-top: 16px; }
.lv-contact-legal a { color: #fff; text-decoration: underline; font-weight: 700; }
.lv-contact-legal a:hover { color: #c7fdbb; }
.lv-contact-support { padding: 48px; background: #fff; color: #2e1352; }
@media (min-width: 768px) { .lv-contact-support { grid-column: 1 / -1; } }
@media (max-width: 639px) { .lv-contact-support { padding: 32px; } }
.lv-contact-support h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(26px, 2.5vw, 32px); line-height: 1.35; color: #2e1352; }
.lv-contact-support-meta { margin: 4px 0 0; font-family: var(--font-heading); font-weight: 700; font-size: 17.6px; line-height: 1.4; color: #8438df; }
.lv-contact-support p { margin-top: 16px; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.625; }
.lv-contact-support ul { display: grid; gap: 6px; margin: 16px 0 0; padding: 0 0 0 35px; list-style: none; }
.lv-contact-support li { position: relative; line-height: 30px; }
.lv-contact-support li::before { content: ""; position: absolute; left: -35px; top: 0; width: 30px; height: 30px; background: url(../images/system/icons/pijl-donkerpaars.svg) no-repeat center / contain; }
.lv-contact-support a { color: #2e1352; font-weight: 700; text-decoration: none; }
.lv-contact-support a:hover { color: #8438df; text-decoration: underline; }

/* Bestanden aanleveren (live: /wjtransfer, Cockpit-widget) */
.lv-transfer { padding: 70px 0; background: #8438df; }
.lv-transfer--first { padding-top: 264px; }
@media (max-width: 959px) { .lv-transfer--first { padding-top: 150px; } }
.lv-panel-cta .lv-btn--violet:hover { background: transparent; border-color: #fff; color: #2e1352; } /* live: "Plan een afspraak" op het roze vlak — witte rand, donkerpaarse tekst */

/* Vastgezette projecten-/blogslider (app.js fitPin): hoogte = inhoud, gecentreerd op het scherm, kaarten krimpen tot alles past */
@media (min-width: 960px) {
  /* zelfde ruimte boven de Scroll-balk als tussen de titel en de kaarten (40px) */
  .lv-cases-foot { margin-top: 40px; min-height: 0; }
  /* korte tekst onder de kaart: max. 2 regels (eindigt al op "…") */
  .lv-cases-item p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 960px) and (min-height: 720px) {
  .lv-cases--pin[data-hscroll-pin] .lv-cases-inner,
  .lv-cases--blog[data-hscroll-pin] .lv-cases-inner { height: auto; justify-content: flex-start; padding-top: clamp(24px, 5vh, 80px); padding-bottom: clamp(24px, 5vh, 80px); }
  .lv-cases[data-hscroll-pin] .lv-cases-item { max-width: min(620px, var(--cw-max, 620px)); }
  .lv-cases[data-hscroll-pin] .lv-cases-track { cursor: auto; }
}
@media (min-width: 960px) and (max-height: 880px) {
  .lv-scrollbar { height: 90px; }
  .lv-scrollbar-c { width: 86px; height: 86px; font-size: 17px; }
}
/* Te laag scherm (< 720px): niet vastzetten; de hele sectie scrolt gewoon mee, kaarten zijwaarts met vegen/slepen/trackpad */
@media (min-width: 960px) and (max-height: 719px) {
  .lv-cases--pin[data-hscroll-pin], .lv-cases--pin-long[data-hscroll-pin], .lv-cases--blog[data-hscroll-pin] { height: auto !important; padding: 60px 0; }
  .lv-cases[data-hscroll-pin] .lv-cases-inner { position: static; height: auto; padding-top: 0; padding-bottom: 0; }
}
}
}

/* Projecten-/blogslider zonder vastzetten: zijwaarts scrollen binnen de slider, verticaal altijd de pagina */
.lv-cases-track { overscroll-behavior-x: contain; cursor: grab; }
.lv-cases-track.is-dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
.lv-cases-track img { -webkit-user-drag: none; }
/* Uitgelicht: de foto loopt bewust tot de rand (margin-right -100px); rond 1280px schoot hij 20px voorbij het scherm → afknippen op de schermrand */
.lv-uitgelicht { overflow-x: clip; }

/* Vastzetten uitgeschakeld omdat de sectie zelfs met smalle kaarten niet in het scherm past (app.js fitPin) */
.lv-cases.wj-pin-off { height: auto !important; padding: 60px 0 !important; }
.lv-cases.wj-pin-off .lv-cases-inner { position: static !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.lv-cases.wj-pin-off .lv-cases-track { cursor: grab !important; }

/* Placeholder voor ontbrekende support-screenshots (site/snippets/blocks/image.php) */
.wj-shot-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 16 / 10; margin: 0 0 20px; padding: 24px; box-sizing: border-box; border: 2px dashed #8438df; border-radius: 15px; background: #f5f0fd; color: #2e1352; text-align: center; }
.wj-shot-ph--portrait { aspect-ratio: 9 / 16; max-width: 300px; }
.wj-shot-ph__icon { width: 44px; height: 44px; color: #8438df; }
.wj-shot-ph__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.3; }
.wj-shot-ph__label { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.4; color: #8438df; }

/* Koppen in teksten die met H3 begonnen zijn bij het tonen één niveau opgeschoven (wjShiftHeadings): zelfde opmaak als voorheen */
.lv-kb--page .lv-kb-text h2.wj-h3 { margin: 40px 0 20px; padding-bottom: 0; font-size: 28px; line-height: 39.2px; }
.lv-kb--page .lv-kb-text > h2.wj-h3:first-child { margin-top: 0; }
.lv-kb-text h3.wj-h4, .lv-kb-text h4.wj-h5 { margin: 0 0 12px; font-size: 18px; line-height: 1.4; }
.lv-kb--page .lv-kb-text h3.wj-h4 { margin-top: 0; }
.lv-ptext .lv-prose h3.wj-h4 { margin-top: 0; padding-bottom: 0; font-size: inherit; line-height: inherit; color: inherit; }
.lv-cases .lv-cases-inner > h2.lv-cases-kicker { padding-bottom: 0; } /* "Dat vonden wij": was een h3, zelfde opmaak houden */

/* WebP-<picture> rond bestaande afbeeldingen: wrapper telt niet mee in de opmaak */
.lh-pic { display: contents; }
.lv-prose figure picture, .lv-kb-text figure picture { display: contents; }