/*
 * Gedeelde secties in de opmaak van het Sketch-ontwerp ("2026-update", frames 1920 breed), op ÁLLE pagina's.
 * Bron van de maten: detailpagina-diensten / -websites / werkwijze / over-ons / home (inspector + 1:1-render).
 * Blokken: paginakop (sk-hero), tekst + foto (sk-ti), verhaalkaart (sk-story: "From Texel", "duopannel"),
 * voordelen met nummers (usp-*), veelgestelde vragen (wj-block--faq), introtekst (sk-intro), dienstkaarten.
 * "Meet Carst" en "Dit werkte goed" blijven in de opmaak van de huidige site (lv-meet / lv-cases).
 * In de Tailwind-laag "utilities": alleen zo winnen de !important-regels van Tailwinds eigen !pt-…-klassen.
 */
@layer utilities {

/* Inhoudsbreedte zoals Sketch: 1400 breed, links op 258 bij 1920 */
@media (min-width: 768px) {
  .wj-block:not(.lv-meet):not(.lv-cases) .container-content { max-width: calc(1404px + 4rem); }
}

/* Lopende tekst in Sketch: Quicksand 500, 20/30, letterafstand 1 */
.sk-ti .prose, .sk-story .prose, .usp-text, .wj-block--faq .accordion-panel .prose { font-size: 18px; line-height: 28px; letter-spacing: .5px; }
@media (min-width: 1024px) {
  .sk-ti .prose, .sk-story .prose, .usp-text, .wj-block--faq .accordion-panel .prose { font-size: 20px; line-height: 30px; letter-spacing: 1px; }
}
.sk-ti .prose p + p, .sk-story .prose p + p { margin-top: 30px; }
.sk-ti .btn, .sk-story .btn { min-height: 40px; line-height: 36px; }

/* Opsommingen (lijstveld en lijstjes in de tekst): roze cirkel 31 met witte pijl, Montserrat 25/30 vet, steek 54 */
.sk-ti .checklist, .sk-ti .prose ul { display: grid; gap: 24px; margin-top: 45px; padding: 0; list-style: none; }
.sk-ti .checklist li, .sk-ti .prose ul li { position: relative; display: block; margin: 0; padding-left: 54px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 1.3vw, 25px); line-height: 30px; }
.sk-ti .checklist li::before, .sk-ti .prose ul li::before { content: ""; position: absolute; left: 0; top: 0; width: 31px; height: 31px; margin: 0; border-radius: 50%; background: #f7148b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 31'%3E%3Cpath d='m13 9.5 6 6-6 6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 31px 31px; }
.sk-ti .prose ul li::marker { content: none; }
.sk-ti .sk-ti-listtitle { margin-top: 45px; margin-bottom: -11px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 1.3vw, 25px); line-height: 30px; }

/* ---------- Paginakop: kruimelpad, titel 163 (lange woorden 129/77), ondertitel 46/43, intro 25/33 semibold ---------- */
.sk-hero nav[aria-label="Kruimelpad"] { font-size: 18px; line-height: 23px; }
.sk-hero nav[aria-label="Kruimelpad"] ol { column-gap: 17px; }
.sk-hero nav[aria-label="Kruimelpad"] li { gap: 17px; }
.sk-hero nav[aria-label="Kruimelpad"] a { color: rgb(255 255 255 / .5); }
.sk-hero nav[aria-label="Kruimelpad"] li > span[aria-hidden] { width: 20px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18.5M14.5 1l4 4-4 4' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 20px 10px; }
.sk-hero nav[aria-label="Kruimelpad"] li > span[aria-hidden] svg { display: none; }
.sk-hero:not(.sk-hero--center) .sk-hero-sub { line-height: .935; }
.sk-hero:not(.sk-hero--center) .prose { max-width: 1250px; font-weight: 600; font-size: clamp(19px, 1.3vw, 25px); line-height: 1.32; }
@media (min-width: 1024px) {
  .sk-hero:not(.sk-hero--center) { padding-top: clamp(224px, 15.2vw, 292px) !important; padding-bottom: clamp(56px, 4.22vw, 81px) !important; }
  .sk-hero:not(.sk-hero--center) .sk-hero-inner { max-width: none; }
  .sk-hero nav[aria-label="Kruimelpad"] { margin-bottom: 32px; }
  .sk-hero:not(.sk-hero--center) h1 { line-height: .853; }
  .sk-hero:not(.sk-hero--center) .sk-hero-sub { margin-top: clamp(20px, 1.72vw, 33px); }
  .sk-hero:not(.sk-hero--center) .prose { margin-top: clamp(28px, 2.4vw, 46px); }
  .sk-hero--later { padding-top: clamp(80px, 6.5vw, 125px) !important; }
}

/* ---------- Dienstkaarten (Diensten): 460×498, radius 20, geen schaduw ---------- */
.wj-block--service-columns .card { box-shadow: none; border-radius: 20px; }
.wj-block--service-columns .card h2 { color: #f7148b; }
.wj-block--service-columns .card li { position: relative; border: 0; }
.wj-block--service-columns .card li::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 0; height: 2px; background: #e8e8f2; }
.wj-block--service-columns .card li:last-child::after { display: none; }
.wj-block--service-columns .card li > a, .wj-block--service-columns .card li > span { padding-block: 13px 15px; font-size: 18px; line-height: 23px; }
.wj-block--service-columns .card li:first-child > a, .wj-block--service-columns .card li:first-child > span { padding-top: 0; }
.wj-block--service-columns .card li:last-child > a, .wj-block--service-columns .card li:last-child > span { padding-bottom: 0; }
@media (min-width: 1024px) {
  .wj-block--service-columns { padding-bottom: clamp(96px, 8.7vw, 167px) !important; }
  .wj-block--service-columns .container-content > div { column-gap: 30px; row-gap: 21px; margin-inline: -18px; }
  .wj-block--service-columns .card { width: calc((100% - 60px) / 3); min-height: 498px; padding: 37px 29px 29px 43px; }
  .wj-block--service-columns .card h2 { margin-bottom: 30px; font-size: clamp(28px, 1.77vw, 34px); line-height: 43px; }
  .wj-block--service-columns .card ul { margin-left: -1px; max-width: 389px; }
}

/* ---------- Tekst + foto ("Zo werken we", "Doorgroeien", "Goede sites"): foto 541×650, tekst 752 ---------- */
.sk-ti .sk-ti-media .rounded-card { box-shadow: none; border-radius: 20px; }
.sk-ti .sk-ti-media img { aspect-ratio: 541 / 650; width: 100%; height: auto; object-fit: cover; }
.sk-ti h2 { max-width: 557px; line-height: 1.087; } /* Sketch: kopvak 557 breed */
.sk-ti .sk-ti-sub { color: #f7148b; font-size: clamp(20px, 1.25vw, 24px); line-height: 1.292; }
.sk-ti[data-bg="primary"] .sk-ti-sub, .sk-ti[data-bg="dark"] .sk-ti-sub { color: #f7148b; }
@media (min-width: 1024px) {
  .sk-ti { padding-top: clamp(80px, 6.5vw, 125px) !important; padding-bottom: clamp(64px, 5.57vw, 107px) !important; }
  .sk-ti .sk-ti-grid { grid-template-columns: minmax(0, 541fr) minmax(0, 752fr); column-gap: clamp(48px, 5.57vw, 107px); align-items: center; }
  .sk-ti .sk-ti-grid--right { grid-template-columns: minmax(0, 752fr) minmax(0, 541fr); }
  .sk-ti .sk-ti-grid--noimg { grid-template-columns: minmax(0, 1fr); }
  .sk-ti .sk-ti-grid--noimg .sk-ti-body { max-width: 900px; }
  .sk-ti .sk-ti-media .rounded-card { max-width: none; margin: 0; }
  .sk-ti h2 { margin-bottom: 26px; }
  .sk-ti .sk-ti-btn { margin-top: 20px; }
}

/* ---------- Verhaalkaart ("From Texel, with love", "Webjongens & AI", "duopannel"): 1400×834, tekst 700 donker, beeld 700 ---------- */
.sk-story { box-shadow: none !important; border-radius: 20px; }
.sk-story .sk-story-body > h2 { line-height: 1.087; }
.sk-story .sk-story-lead { color: #f7148b; font-size: clamp(20px, 1.25vw, 24px); line-height: 1.292; }
.sk-story .sk-story-media > picture { display: block; width: 100%; height: 100%; }
.sk-story .sk-story-media img { width: 100%; height: 100%; object-fit: cover; }
.sk-story .sk-story-media--collage img { transform: scale(1.146); } /* Sketch: teamcollage ingezoomd, fotoraster loopt van rand tot rand */
@media (min-width: 1024px) {
  .sk-story-sec { padding-top: clamp(56px, 5.16vw, 99px) !important; padding-bottom: clamp(56px, 5.16vw, 99px) !important; background: linear-gradient(to bottom, var(--sk-top) 0, var(--sk-top) calc(clamp(56px, 5.16vw, 99px) + clamp(300px, 21.7vw, 417px)), var(--sk-bottom) calc(clamp(56px, 5.16vw, 99px) + clamp(300px, 21.7vw, 417px))) !important; }
  .sk-story { grid-template-columns: 1fr 1fr; min-height: clamp(600px, 43.4vw, 834px); }
  .sk-story .sk-story-body { justify-content: flex-start; padding: clamp(64px, 5.83vw, 112px) clamp(40px, 3.23vw, 62px); }
  .sk-story .sk-story-body > h2 { max-width: 576px; margin-bottom: 29px; }
  .sk-story .sk-story-lead { max-width: 480px; margin-bottom: 32px; }
  .sk-story .sk-story-body > .prose { max-width: 576px; }
  .sk-story .sk-story-btn { margin-top: 54px; }
  .sk-story .sk-story-media { position: relative; min-height: 100%; }
  .sk-story .sk-story-media img { position: absolute; inset: 0; }
}
.sk-story-sec { --sk-top: #fff; --sk-bottom: #fff; }
.sk-story-sec[data-bg="primary"] { --sk-top: #8438df; --sk-bottom: #8438df; }
.sk-story-sec[data-bg="dark"] { --sk-top: #2e1352; --sk-bottom: #2e1352; }
.sk-story-sec[data-bg-bottom="primary"] { --sk-bottom: #8438df; }
.sk-story-sec[data-bg-bottom="white"] { --sk-bottom: #fff; }
.sk-story-sec[data-bg-bottom="dark"] { --sk-bottom: #2e1352; }
/* Zelfde kleur boven als de sectie ervoor: geen dubbele witruimte (Sketch: foto-sectie loopt door in de kaart) */
@media (min-width: 1024px) {
  [data-bg="white"]:not([data-bg-bottom]) + .sk-story-sec[data-bg="white"],
  [data-bg="white"][data-bg-bottom="white"] + .sk-story-sec[data-bg="white"],
  [data-bg="primary"]:not([data-bg-bottom]) + .sk-story-sec[data-bg="primary"],
  [data-bg="dark"]:not([data-bg-bottom]) + .sk-story-sec[data-bg="dark"] { padding-top: 0 !important; background: linear-gradient(to bottom, var(--sk-top) 0, var(--sk-top) clamp(300px, 21.7vw, 417px), var(--sk-bottom) clamp(300px, 21.7vw, 417px)) !important; }
}

/* ---------- Voordelen met nummers ("Daarom werk je met Webjongens"): paars, witte cirkel 46 met roze cijfer ---------- */
.usp-num-filled { letter-spacing: 1.3px; line-height: 1; }
.usp-filled .usp-title { gap: 26px; color: #fff; }
.usp-filled .usp-text { color: #fff; }
.usp-filled .usp-text ul { margin-top: 8px; padding-left: 1.2em; list-style: disc; }
@media (min-width: 1024px) {
  .usp-filled { padding-top: clamp(56px, 5.16vw, 99px) !important; padding-bottom: clamp(72px, 6.35vw, 122px) !important; }
  .usp-filled h2 { max-width: none; margin-bottom: 52px; font-size: clamp(40px, 3.02vw, 58px); line-height: 1.069; color: #fff; }
  .usp-filled .usp-grid { grid-template-columns: repeat(3, minmax(0, 443px)); justify-content: space-between; column-gap: 32px; }
  .usp-filled .usp-grid--2 { grid-template-columns: repeat(2, minmax(0, 443px)); justify-content: start; column-gap: 35px; }
  .usp-filled .usp-title { margin-bottom: 41px; padding-left: 4px; font-size: clamp(26px, 1.77vw, 34px); line-height: 43px; }
}

/* ---------- Introtekst ("Ga jij voor paars?"): kop 34/43, tekst 20/24, 1104 breed, gecentreerd ---------- */
.sk-intro .sk-intro-inner { max-width: 1104px; }
.sk-intro h2 { font-size: clamp(28px, 1.77vw, 34px); line-height: 43px; }
.sk-intro .prose { font-size: 18px; line-height: 24px; letter-spacing: .5px; }
.sk-intro .sk-intro-img { display: block; width: 200px; height: 200px; margin: 0 auto 40px; border-radius: 50%; object-fit: cover; }
@media (min-width: 1024px) {
  .sk-intro { padding-top: clamp(80px, 7.2vw, 139px) !important; padding-bottom: clamp(64px, 5.2vw, 100px) !important; }
  .sk-intro h2 { margin-bottom: 33px; }
  .sk-intro .prose { font-size: 20px; letter-spacing: 1px; }
}

/* ---------- Veelgestelde vragen: volle breedte, dunne witte plus, gestippelde lijnen ---------- */
.wj-block--faq .container-content > div { max-width: none; }
.wj-block--faq h2 { line-height: 1.087; }
.wj-block--faq [data-accordion-item] { padding-bottom: 1px; border: 0; background: repeating-linear-gradient(to right, #e3e3f0 0 3px, transparent 3px 4px) left bottom / 100% 1px no-repeat; }
.wj-block--faq [data-accordion-item]:last-child { background: none; }
.wj-block--faq [data-accordion-toggle] { padding-block: 15px; font-size: clamp(20px, 1.25vw, 24px); line-height: 31px; }
.wj-block--faq [data-accordion-toggle] > span { width: 34px; height: 31px; margin-right: 1px; overflow: visible; background: transparent; }
.wj-block--faq [data-accordion-toggle] > span > span { width: 36px; flex: none; transform: none !important; }
.wj-block--faq [data-accordion-toggle] svg { width: 36px; height: 36px; margin-top: 2px; overflow: visible; stroke-width: 1.33; stroke-linecap: butt; }
.wj-block--faq .accordion-panel .prose { max-width: 1000px; padding-top: 12px; padding-bottom: 34px; }
@media (min-width: 1024px) {
  .wj-block--faq { padding-top: clamp(64px, 5.83vw, 112px) !important; padding-bottom: clamp(56px, 5.16vw, 99px) !important; }
  .wj-block--faq h2 { margin-bottom: 31px; }
}


/* Kopaccenten in de voordelen-koppen: Sketch toont "Daarom werk je met Webjongens" helemaal wit */
.usp-filled h2 span, .usp-check h2 span { color: inherit; }

/* ---------- Pakketten (Websites): kaarten 449×629, kop 34/43, tekst 20/30, paarse knop, donkere kaart met losse labels ---------- */
.sk-packages .card, .sk-packages article { box-shadow: none; border-radius: 20px; }
.sk-packages article h2 { font-size: clamp(28px, 1.77vw, 34px); line-height: 43px; }
.sk-packages article > p { font-size: 18px; line-height: 28px; letter-spacing: .5px; }
.sk-packages article ul:not(.grid-cols-2) li { position: relative; border: 0; padding-block: 16px 18px; font-size: 18px; line-height: 28px; letter-spacing: .5px; }
.sk-packages article ul:not(.grid-cols-2) li::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 0; height: 2px; background: #e8e8f2; }
.sk-packages article ul:not(.grid-cols-2) li:first-child { padding-top: 0; }
.sk-packages article ul:not(.grid-cols-2) li:last-child { padding-bottom: 0; }
.sk-packages article ul:not(.grid-cols-2) li:last-child::after { display: none; }
.sk-packages article .btn { min-height: 50px; line-height: 46px; border-radius: 24px; }
.sk-packages article hr { border: 0; height: 2px; background: rgb(255 255 255 / .85); }
.sk-chip { display: flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 24px; font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: #fff; transition: color .1s; }
a.sk-chip:hover { color: #c7fdbb; }
@media (min-width: 1024px) {
  .sk-packages > .container-content > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .sk-packages article { min-height: 629px; padding: 50px 37px 41px; }
  .sk-packages article h2 { margin-bottom: 14px; }
  .sk-packages article > p { margin-bottom: 32px; font-size: 20px; line-height: 30px; letter-spacing: 1px; }
  .sk-packages article ul:not(.grid-cols-2) li { font-size: 20px; line-height: 30px; letter-spacing: 1px; }
  .sk-packages article ul { margin-left: -10px; margin-bottom: 32px; }
  .sk-packages article hr { margin: 0 0 32px; }
  .sk-packages article ul.grid-cols-2 { margin: 0; row-gap: 0; column-gap: 26px; }
}

/* ---------- Stappenplan (Werkwijze): nummer 54/65, kop 46/50, witte lijn, dikke witte plus 42 (open = kruis) ---------- */
.sk-steps .sk-steps-num { font-size: clamp(36px, 2.8vw, 54px); line-height: 1.2; letter-spacing: 2.7px; }
.sk-steps .sk-steps-title { font-size: clamp(28px, 2.4vw, 46px); line-height: 1.087; }
.sk-steps .sk-steps-line { height: 1px; background: #fff; }
.sk-steps .sk-steps-icon { width: 42px; height: 42px; background: transparent; }
.sk-steps .sk-steps-icon > span { position: relative; width: 42px; height: 42px; }
.sk-steps .sk-steps-icon > span svg { display: none; }
.sk-steps .sk-steps-icon > span::before, .sk-steps .sk-steps-icon > span::after { content: ""; position: absolute; left: 0; top: 50%; width: 42px; height: 5.25px; margin-top: -2.6px; border-radius: 2px; background: #fff; }
.sk-steps .sk-steps-icon > span::after { transform: rotate(90deg); }
.sk-steps .sk-steps-text { font-size: 18px; line-height: 28px; letter-spacing: .5px; }
@media (min-width: 1024px) {
  .sk-steps [data-accordion] { gap: 0; }
  .sk-steps [data-accordion-toggle] { gap: 0; padding-block: 19px; }
  .sk-steps .sk-steps-num { width: 97px; margin-left: -8px; }
  .sk-steps .sk-steps-line { margin: 0 51px 0 20px; }
  .sk-steps .sk-steps-icon { margin-right: 4px; }
  .sk-steps .sk-steps-text { max-width: 1000px; padding-left: 89px; padding-top: 2px; padding-bottom: 34px; font-size: 20px; line-height: 30px; letter-spacing: 1px; }
}

/* ---------- Opsomming-voordelen (Werkwijze "Daarom werk je met Webjongens"): roze cirkel 32 met witte pijl, 25/30 wit ---------- */
.usp-check h2 { line-height: 1.087; }
.usp-check .sk-checklist { gap: 24px; }
.usp-check .sk-checklist li { position: relative; display: block; padding-left: 47px; font-size: clamp(20px, 1.3vw, 25px); line-height: 30px; }
.usp-check .sk-checklist li::before { content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 32px; margin: 0; border-radius: 50%; box-shadow: none; background: #f7148b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m13.5 10 6 6-6 6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 32px 32px; }
@media (min-width: 1024px) {
  .usp-check h2 { margin-bottom: 60px; font-size: clamp(32px, 2.4vw, 46px); }
}

}

/* ===================================================================================================
 * Onderstaande regels staan bewust BUITEN @layer: ze overschrijven live-header.css / live-home.css (ongelaagd).
 * =================================================================================================== */

/* ---------- Header volgens Sketch: volle breedte (logo op 130, hamburger tot 63 van de rand), menu op hoogte 109 ---------- */
@media (min-width: 1280px) {
  .lh-header .lh-container { max-width: none; padding-left: clamp(40px, 6.77vw, 130px); padding-right: clamp(40px, 3.28vw, 63px); }
  .lh-header .lh-right { gap: 0; margin-top: 24px; }
  .lh-header .lh-nav li { margin-right: clamp(22px, 2.03vw, 39px); }
  .lh-header .lh-nav > li:last-child { margin-right: clamp(40px, 4.53vw, 87px); }
  .lh-header .lh-nav .lh-koffie { min-height: 48px; padding: 0 46px 0 18px; background-position: right 15px center; background-size: 22px; }
  .lh-header .lh-burger { margin-left: clamp(24px, 2.5vw, 48px); }
}
.lh-dialog-titlebar { display: flex; align-items: center; gap: 24px; }
.lh-dialog-titlebar .lh-dialog-title { margin-bottom: 0; }
.lh-dialog-titlebar { margin-bottom: 20px; padding-bottom: 20px; }
.lh-dialog-titlebar .lh-dialog-title { padding-bottom: 0; }

/* ---------- "Dit doen we dus / Dit werkte goed": kop, knop en Scroll links zoals Sketch (109 bij 1920), kaarten schuiven over de volle breedte ---------- */
@media (min-width: 960px) {
  .lv-cases:not(.lv-cases--blog) .lv-cases-inner { --sk-left: max(40px, 5.68vw); padding-left: 0; }
  .lv-cases:not(.lv-cases--blog) .lv-cases-inner > h3, .lv-cases:not(.lv-cases--blog) .lv-cases-inner > h2 { margin-left: var(--sk-left); }
  .lv-cases:not(.lv-cases--blog) .lv-cases-track { padding-left: var(--sk-left); scroll-padding-left: var(--sk-left); }
  .lv-cases:not(.lv-cases--blog) .lv-cases-foot { margin-left: var(--sk-left); }
}

/* ---------- "Je plannen bespreken?" + "Reviews" (Sketch): kaarten 686×336, bovenkant in de kleur van de sectie ervoor, onderkant paars ---------- */
.sk-cta { --sk-cta-top: #8438df; padding: 60px 0 0; background: linear-gradient(to bottom, var(--sk-cta-top) 0, var(--sk-cta-top) 50%, #8438df 50%); color: #fff; }
.sk-cta-grid { display: grid; gap: 28px; width: min(1400px, calc(100% - 40px)); margin: 0 auto; }
.sk-cta-card, .sk-reviews { box-sizing: border-box; min-height: 336px; border-radius: 20px; }
.sk-cta-card { padding: 40px 28px; background: #f7148b; }
.sk-cta h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(26px, 1.77vw, 34px); line-height: 43px; }
.sk-cta-card p { max-width: 592px; margin: 12px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 28px; letter-spacing: .5px; }
.sk-cta-btn { display: inline-flex; align-items: center; height: 38px; margin-top: 34px; padding: 0 20px; border-radius: 19px; background: #7056af; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1; text-decoration: none; transition: background-color .1s, color .1s; }
.sk-cta-btn:hover { background: #2e1352; }
.sk-reviews { display: flex; flex-direction: column; align-items: center; padding: 40px 24px; background: #fff; color: #2e1352; text-align: center; }
.sk-reviews h2 { color: #8438df; }
.sk-reviews-body { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 20px; }
.sk-brace { flex: none; width: 15px; height: 58px; color: #e3e3f0; }
.sk-brace--r { transform: scaleX(-1); }
.sk-reviews-track { flex: 0 1 420px; }
.sk-review { margin: 0; }
.sk-review p { margin: 0; font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: .8px; }
.sk-dots { display: flex; gap: 12px; margin-top: 30px; }
.sk-dots button { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: #2e1352; cursor: pointer; }
.sk-dots button[aria-selected="true"] { background: #8438df; }
.sk-dots button:focus-visible { outline: 2px solid #f7148b; outline-offset: 2px; }
@media (min-width: 960px) {
  .sk-cta { padding-top: clamp(64px, 5.5vw, 106px); background: linear-gradient(to bottom, var(--sk-cta-top) 0, var(--sk-cta-top) calc(clamp(64px, 5.5vw, 106px) + 153px), #8438df calc(clamp(64px, 5.5vw, 106px) + 153px)); }
  .sk-cta-grid { grid-template-columns: 1fr 1fr; width: min(1400px, calc(100% - 80px)); }
  .sk-cta-card { padding: 65px 47px 54px; }
  .sk-cta-card p { font-size: 20px; line-height: 30px; letter-spacing: 1px; }
  .sk-reviews { padding: 58px 55px 58px 60px; }
}

/* ---------- Footer (Sketch, zonder kaarten): logo 384 + nieuwsbrief, contact 34/43, adres + "Snel naar" in 4 kolommen, copyright 20/30 ---------- */
.sk-footer { padding: 72px 0 60px; background: #8438df; color: #fff; font-family: var(--font-body); }
.sk-footer a { color: #fff; text-decoration: none; transition: color .1s; }
.sk-footer a:hover { color: #c7fdbb; }
.sk-footer-grid, .sk-footer-bottom { width: min(1400px, calc(100% - 40px)); margin: 0 auto; }
.sk-footer-grid { display: grid; gap: 48px; }
.sk-footer-logo img { display: block; width: min(384px, 100%); height: auto; }
.sk-footer-label { margin: 40px 0 0; font-weight: 400; font-size: 20px; line-height: 30px; }
.sk-footer-form { display: flex; align-items: center; max-width: 402px; height: 60px; margin-top: 17px; padding: 0 14px 0 21px; border-radius: 30px; background: #592698; }
.sk-footer-form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 500 18px/30px var(--font-body); letter-spacing: 1px; }
.sk-footer-form input::placeholder { color: #fff; opacity: 1; }
.sk-footer-form button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.sk-footer-form button svg { width: 32px; height: 32px; }
.sk-footer-form:focus-within { box-shadow: 0 0 0 2px #c7fdbb; }
.sk-footer-status { margin-top: 10px; }
.sk-footer-contact { display: grid; gap: 25px; }
.sk-footer-contact a { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 1.77vw, 34px); line-height: 43px; }
.sk-footer-contact a svg { width: 34px; height: 34px; flex: none; fill: currentColor; }
.sk-footer-cols { display: grid; gap: 32px; margin-top: 48px; }
.sk-footer-cols h3 { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 30px; }
.sk-footer-adres p { margin: 20px 0 0; font-weight: 500; font-size: 18px; line-height: 38px; letter-spacing: 1px; }
.sk-footer-nav ul { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 40px; margin: 20px 0 0; padding: 0; list-style: none; }
.sk-footer-nav li { font-weight: 500; font-size: 18px; line-height: 38px; letter-spacing: 1px; }
.sk-footer-bottom { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 56px; }
.sk-footer-legal p { margin: 0; font-weight: 500; font-size: 16px; line-height: 28px; letter-spacing: 1px; }
.sk-footer-legal .lv-footer-cookie { display: inline; margin: 0; padding: 0; cursor: pointer; }
.sk-socials { display: flex; gap: 10px; }
.sk-socials img { display: block; width: 38px; height: 38px; }
@media (min-width: 960px) {
  .sk-footer { padding: 153px 0 105px; }
  .sk-footer-grid, .sk-footer-bottom { width: min(1400px, calc(100% - 80px)); }
  .sk-footer-grid { grid-template-columns: minmax(0, 495fr) minmax(0, 905fr); gap: 0; }
  .sk-footer-label { margin-top: 56px; font-size: 23px; }
  .sk-footer-form input { font-size: 20px; }
  .sk-footer-contact { margin-top: -5px; }
  .sk-footer-cols { grid-template-columns: minmax(0, 319fr) minmax(0, 574fr); gap: 0; margin-top: 57px; padding-left: 12px; }
  .sk-footer-cols h3 { font-size: 23px; }
  .sk-footer-adres p, .sk-footer-nav li { font-size: 20px; }
  .sk-footer-adres p { margin-top: 28px; }
  .sk-footer-nav ul { grid-template-columns: repeat(4, auto); grid-template-rows: repeat(2, auto); grid-auto-flow: column; justify-content: space-between; column-gap: 24px; margin-top: 24px; }
  .sk-footer-bottom { margin-top: 83px; }
  .sk-footer-legal p { font-size: 20px; line-height: 30px; }
}

/* ---------- Team (Over ons, Sketch): foto 438×523, roze plus 35, naam 34/43, rol 25/33; middelste kolom schuift mee (zoals live) ---------- */
.sk-team-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(32px, 2.4vw, 46px); line-height: 1.087; color: #fff; }
.sk-team-head p { margin: 24px 0 0; font-family: var(--font-body); font-weight: 600; font-size: clamp(18px, 1.2vw, 23px); line-height: 30px; color: #fff; }
.sk-team-grid { display: grid; gap: 48px; margin: 48px 0 0; padding: 0; list-style: none; }
.sk-team-photo { position: relative; overflow: hidden; aspect-ratio: 438 / 523; border-radius: 15px; background: #2e1352; }
.sk-team-photo picture, .sk-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-team-bio { position: absolute; inset: 0; overflow-y: auto; padding: 28px; background: rgb(46 19 82 / .95); color: #fff; font-size: 18px; line-height: 28px; opacity: 0; pointer-events: none; transition: opacity .5s; }
.sk-team-plus { position: absolute; right: 19px; bottom: 21px; display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 0; border-radius: 50%; background: #f7148b; cursor: pointer; }
.sk-team-plus span { position: relative; width: 17px; height: 17px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.sk-team-plus span::before, .sk-team-plus span::after { content: ""; position: absolute; left: 0; top: 50%; width: 17px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #fff; }
.sk-team-plus span::after { transform: rotate(90deg); }
.sk-team-plus:focus-visible { outline: 2px solid #c7fdbb; outline-offset: 2px; }
.team-card h3 { margin: 30px 0 0 46px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px, 1.77vw, 34px); line-height: 43px; color: #fff; }
.team-card h3 + p { margin: 7px 0 0 46px; font-family: var(--font-body); font-weight: 600; font-size: clamp(19px, 1.3vw, 25px); line-height: 33px; color: #fff; }
@media (min-width: 640px) { .sk-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1024px) {
  .sk-team { padding-top: 99px; padding-bottom: 99px; }
  .sk-team-grid { grid-template-columns: repeat(3, minmax(0, 438px)); justify-content: space-between; column-gap: 51px; row-gap: 183px; margin-top: 85px; }
  .team-card h3 { margin-top: 36px; }
}
/* Sketch-details: grotere ▼ in het menu, accolades in de Reviews-kaart iets voller */
@media (min-width: 1280px) { .lh-header .lh-dd-toggle svg { width: 11px; height: 9px; } }
.sk-brace path { stroke-width: 2.4; }

/* ---------- Team-pop-up (Over ons), zoals live (EngageBox): 980 breed, foto 300 links, "…'s stats" 40/45, balken 30 hoog ---------- */
.wj-pop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .3s; }
.wj-pop[hidden] { display: none; }
.wj-pop.is-open { opacity: 1; }
.wj-pop-backdrop { position: absolute; inset: 0; background: rgb(255 255 255 / .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.wj-pop-close { position: fixed; top: 0; right: 0; z-index: 2; width: 46px; height: 36px; padding: 6px 13px; border: 0; background: transparent; color: #fff; cursor: pointer; transition: color .1s; }
.wj-pop-close svg { display: block; width: 20px; height: 20px; }
.wj-pop-close:hover { color: #555; }
.wj-pop-dialog { position: relative; z-index: 1; display: grid; width: min(980px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 20px; background: #fff; color: #2e1352; transform: translateY(30px); transition: transform .3s; }
.wj-pop.is-open .wj-pop-dialog { transform: none; }
.wj-pop-img picture, .wj-pop-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wj-pop-img img { max-height: 45vh; border-radius: 20px 20px 0 0; }
.wj-pop-body { padding: 30px 24px; }
.wj-pop-body h2 { margin: 0; padding-bottom: 24px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 2.1vw, 40px); line-height: 1.125; color: #7056af; }
.wj-pop-stat { display: grid; grid-template-columns: minmax(0, 205fr) minmax(0, 365fr); align-items: center; gap: 12px; min-height: 50px; }
.wj-pop-stat > div { font-family: var(--font-heading); font-weight: 700; font-size: clamp(17px, 1.17vw, 22.5px); line-height: 1.625; color: #2e1352; }
.wj-pop-stat progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; border: 0; border-radius: 500px; overflow: hidden; background: #d1d1e6; color: #2e1352; }
.wj-pop-stat progress::-webkit-progress-bar { background: #d1d1e6; border-radius: 500px; }
.wj-pop-stat progress::-webkit-progress-value { background: #2e1352; border-radius: 500px; }
.wj-pop-stat progress::-moz-progress-bar { background: #2e1352; border-radius: 500px; }
.wj-pop-btn { display: inline-flex; align-items: center; height: 42px; margin-top: 20px; padding: 0 20px; border-radius: 99px; background: #c7fdbb; color: #2e1352; font-family: var(--font-heading); font-weight: 700; font-size: 17px; text-decoration: none; transition: background-color .1s, color .1s; }
.wj-pop-btn:hover { background: transparent; box-shadow: inset 0 0 0 2px #2e1352; }
html.wj-pop-lock, html.wj-pop-lock body { overflow: hidden; }
.team-card--pop { cursor: pointer; }
@media (min-width: 960px) {
  .wj-pop-dialog { grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; }
  .wj-pop-img img { max-height: none; border-radius: 20px 0 0 20px; }
  .wj-pop-body { padding: 50px; }
  .wj-pop-body h2 { padding-bottom: 30px; }
  .wj-pop-stat { gap: 0; }
}

/* ---------- Footer: golf-effect op ♥ WEBJONGENS (zoals tevoko.webjongens.dev), in Webjongens-kleuren ---------- */
.wj-credit { display: inline-flex; align-items: center; gap: 7px; }
.wj-credit .wave-link { display: inline-flex; color: inherit; text-decoration: none; }
.wj-credit .wave-link span { display: inline-block; font-weight: 400; transition: color .4s ease; }
.wj-credit .wave-link .wave-b { font-weight: 700; }
.wj-credit .wj-credit-heart { overflow: visible; transform-origin: center; transition: fill .3s ease; }
.wj-credit:hover .wave-link span { animation: wj-wave .9s cubic-bezier(.23, 1, .32, 1) forwards; color: #c7fdbb; }
.wj-credit:hover .wave-link span:nth-child(2) { animation-delay: .05s; }
.wj-credit:hover .wave-link span:nth-child(3) { animation-delay: .1s; }
.wj-credit:hover .wave-link span:nth-child(4) { animation-delay: .15s; }
.wj-credit:hover .wave-link span:nth-child(5) { animation-delay: .2s; }
.wj-credit:hover .wave-link span:nth-child(6) { animation-delay: .25s; }
.wj-credit:hover .wave-link span:nth-child(7) { animation-delay: .3s; }
.wj-credit:hover .wave-link span:nth-child(8) { animation-delay: .35s; }
.wj-credit:hover .wave-link span:nth-child(9) { animation-delay: .4s; }
.wj-credit:hover .wave-link span:nth-child(10) { animation-delay: .45s; }
.wj-credit:hover .wj-credit-heart { animation: wj-heart-jello .6s cubic-bezier(.23, 1, .32, 1) forwards, wj-heart-beat .9s cubic-bezier(.23, 1, .32, 1) .6s infinite; fill: #f7148b; }
@keyframes wj-wave { 0% { transform: translateY(0); } 35% { transform: translateY(-9px); } 65% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes wj-heart-jello { 0% { transform: scale(1) rotate(0); } 20% { transform: scale(1.3) rotate(-15deg); } 40% { transform: scale(1.2) rotate(12deg); } 60% { transform: scale(1.25) rotate(-8deg); } 80% { transform: scale(1.2) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wj-heart-beat { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 50% { transform: scale(1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .wj-credit:hover .wave-link span, .wj-credit:hover .wj-credit-heart { animation: none; } }
.lv-copy .wave-link:hover { text-decoration: none; }
@media (min-width: 960px) { .wj-pop-stat { grid-template-columns: 205px 365px; } }
/* ♥ WEBJONGENS op dezelfde basislijn als "© 2017-2026"; "Afspraak maken" op één regel */
.wj-credit, .wj-credit .wave-link { display: inline; }
@media (min-width: 960px) { .lv-footer-sub nav a { white-space: nowrap; } }

/* "Je plannen bespreken?" + "Reviews" — details volgens Sketch (over-ons): zachte schaduw, accolades 33×80, kop donkerpaars, stippen paars */
.sk-cta-card, .sk-reviews { box-shadow: 0 10px 30px rgb(46 19 82 / .28); }
.sk-reviews h2 { color: #2e1352; }
.sk-reviews-body { margin-top: 14px; }
.sk-brace { flex: none; width: 33px; height: auto; margin-top: -8px; font-family: var(--font-body); font-weight: 400; font-size: 100px; line-height: 80px; color: #e3e3f0; transform: none; }
.sk-reviews-track { flex: 0 1 420px; padding: 0 12px; }
.sk-dots { gap: 12px; margin-top: 46px; }
.sk-dots button { background: #8438df; }
.sk-dots button[aria-selected="true"] { background: #7056af; }
@media (min-width: 960px) { .sk-reviews { padding: 58px 54px 58px 60px; } }
.sk-brace { font-weight: 700; }
.sk-cta-btn { height: 48px; padding: 0 21px; border-radius: 24px; }

/* "Alles onder één dak"-slider (lv-cslider), zoals live: kaartbreedte groeit mee (live: 257 @1280 … 321 @1920) en de slider begint op 0.7vw − 317 */
@media (min-width: 960px) { .lv-cslider-track li { flex-basis: calc(10vw + 129px); } }
@media (min-width: 1280px) { .lv-cslider-inner { grid-template-columns: calc(20vw + 238px) minmax(0, 1fr); } }
/* "Read more" in de kaarten (lv-cslider), hover zoals live: vlak donkerpaars 73%, tekst blijft donkerpaars */
.lv-ccard-btn { transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out; }
.lv-ccard-btn:hover, .lv-ccard-btn:focus-visible { background-color: rgba(46, 19, 82, .73); border-color: rgba(46, 19, 82, .73); color: #2e1352 !important; }

/* "Slim uitbreiden" (donkere pakketkaart), zoals Sketch: labels 17px vet in 2 kolommen van 210, rij-afstand 45, geen lijnen */
.sk-packages article ul.grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 0; margin: 0; padding: 0; list-style: none; }
.sk-packages article ul.grid-cols-2 li { margin: 0; padding: 0; border: 0; letter-spacing: normal; }
.sk-packages article ul.grid-cols-2 li::after { content: none; }
.sk-chip { height: 38px; padding: 0 21px; letter-spacing: normal; line-height: 1; white-space: nowrap; }
@media (min-width: 1024px) {
  .sk-packages article ul.grid-cols-2 { grid-template-columns: 210px minmax(0, 1fr); margin: 0; }
  .sk-packages article hr { margin-bottom: 35px; }
}
@media (min-width: 1024px) { .sk-packages article hr { height: 1px; margin-top: 11px; background: #fff; } }

/* Reviews-slider: sleepbaar spoor + accolades als knoppen */
.sk-reviews-view { position: relative; flex: 0 1 420px; min-width: 0; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: height .35s cubic-bezier(.16,1,.3,1); border-radius: 6px; }
.sk-reviews-view.is-dragging { cursor: grabbing; }
.sk-reviews-view:focus-visible { outline: 2px solid #f7148b; outline-offset: 4px; }
.sk-reviews-track { display: flex; align-items: flex-start; padding: 0; will-change: transform; }
.sk-reviews-track .sk-review { flex: 0 0 100%; box-sizing: border-box; padding: 0 12px; }
button.sk-brace { display: grid; place-items: center; width: 48px; height: 96px; margin: -8px 0 0; padding: 0; border: 0; border-radius: 14px; background: transparent; color: #e3e3f0; font: 700 100px/80px var(--font-body); cursor: pointer; transition: color .2s, background-color .2s, transform .25s cubic-bezier(.16,1,.3,1); }
button.sk-brace span { display: block; transform: translateY(-4px); }
button.sk-brace:hover { color: #8438df; background: #f5f0fe; }
button.sk-brace[data-sk-prev]:hover { transform: translateX(-3px); }
button.sk-brace[data-sk-next]:hover { transform: translateX(3px); }
button.sk-brace:active { color: #f7148b; }
button.sk-brace:focus-visible { outline: 2px solid #f7148b; outline-offset: 2px; color: #8438df; }
@media (max-width: 480px) { button.sk-brace { width: 34px; font-size: 72px; } }
.sk-cta-grid { grid-template-columns: minmax(0, 1fr); }
.sk-cta-grid > * { min-width: 0; }
@media (min-width: 960px) { .sk-cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sk-reviews-body { min-width: 0; }
.sk-reviews-view { flex: 1 1 0; max-width: 420px; }

/* "Scroll"-balk (projectenslider): paarse lijn die roze volloopt met de scrollvoortgang */
.lv-cases-foot::after { content: none !important; display: none !important; }
.lv-scrollbar { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; height: 117px; margin-left: 40px; }
.lv-scrollbar-c { display: grid; place-items: center; flex: none; width: 113px; height: 113px; border: 2px solid #8438df; border-radius: 50%; color: #fff; font: 500 20px/1 var(--font-body); }
.lv-scrollbar-line { position: relative; flex: 1; height: 2px; background: #8438df; }
.lv-scrollbar-line i { position: absolute; inset: 0; background: linear-gradient(90deg, #f7148b, #ff4fae); transform-origin: 0 50%; transform: scaleX(.04); transition: transform .12s linear; }
.lv-scrollbar-line b { position: absolute; top: 50%; display: grid; place-items: center; width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; border: 2px solid #8438df; border-radius: 50%; box-sizing: border-box; background: #2e1352; color: #fff; transition: border-color .3s, background-color .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.lv-scrollbar-line b:last-child { border-color: #7056af; }
.lv-scrollbar-line b svg { width: 27px; height: 27px; flex: none; }
.lv-scrollbar-line b.is-on { border-color: #f7148b; background: #f7148b; transform: scale(1.12); }
@media (max-width: 959px) { .lv-scrollbar { flex: none; align-self: stretch; width: auto; height: 80px; margin: 24px 0 0; } .lv-scrollbar-c { width: 76px; height: 76px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .lv-scrollbar-line i, .lv-scrollbar-line b { transition: none; } }
/* "Plan een afspraak" (roze kaart) = live /diensten: violet met violette rand; hover transparant, witte rand, donkerpaarse tekst; 0.1s */
.sk-cta-btn { height: 42px; padding: 0 20px; border: 2px solid #8438df; border-radius: 99px; background: #8438df; color: #fff; font-size: 17px; line-height: 38px; transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out; }
.sk-cta-btn:hover, .sk-cta-btn:focus-visible { background: transparent; border-color: #fff; color: #2e1352; }

/* Footer op mobiel: "Snel naar" in 2 kolommen, niets breder dan het scherm */
.lv-footer-top > *, .lv-footer-sub > * { min-width: 0; }
@media (max-width: 639px) { .lv-footer-sub ul { columns: 2; column-gap: 24px; } }

/* Scroll-balk: roze begint bij de cirkel; pijlen exact in het midden van hun cirkel */
.lv-scrollbar-c { border-color: #f7148b; }
.lv-scrollbar-line i { transform: scaleX(0); }
.lv-scrollbar-line b { padding: 0; overflow: hidden; }
.lv-scrollbar-line b svg { position: absolute; inset: -2px; width: 27px; height: 27px; }
.lv-scrollbar-line b svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Alles wat klikbaar is toont een handje (vragen + plus, stappen, schakelaars, knoppen) */
button:not(:disabled), [role="button"], [role="tab"], summary, label[for], [data-accordion-toggle], [data-accordion-toggle] *, [data-dropdown-toggle], [data-dropdown-toggle] * { cursor: pointer; }
/* Accolades in de reviews: bij hover alleen violet, geen achtergrondvlak */
button.sk-brace:hover, button.sk-brace:focus-visible, button.sk-brace:active { background: transparent; }
/* Pijlcirkels: geen border meer (rand = inset-schaduw) → gevuld is één egale roze cirkel zonder naad */
.lv-scrollbar-line b { width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; border: 0; overflow: visible; background: #2e1352; box-shadow: inset 0 0 0 2px #8438df; transform: none; transition: background-color .3s, box-shadow .3s; }
.lv-scrollbar-line b:last-child { box-shadow: inset 0 0 0 2px #7056af; }
.lv-scrollbar-line b.is-on, .lv-scrollbar-line b.is-on:last-child { background: #f7148b; box-shadow: none; transform: none; }
.lv-scrollbar-line b svg { inset: 2px; width: 23px; height: 23px; }

/* Ons werk: de kolomverschuiving gebeurt nu via JS op de link (zoals live), niet meer statisch op het li-element */
@media (min-width: 960px) { .lv-werkgrid-list li:nth-child(even), .lv-werkgrid-list li:nth-child(odd) { transform: none; } .lv-werkgrid-list a { will-change: transform; } }
/* Reviews-stippen zoals Sketch (websites/diensten): inactief #2e1352, actief #7056af, 14px, 26px uit elkaar */
.sk-dots { gap: 12px; }
.sk-dots button { width: 14px; height: 14px; background: #2e1352; transition: background-color .2s; }
.sk-dots button[aria-selected="true"] { background: #7056af; }
.sk-dots button:hover { background: #8438df; }

/* =====================================================================================================
 * MOBIEL / TABLET — vloeiend met clamp(): elke maat loopt van de telefoonwaarde (390) naar precies de huidige
 * waarde op het breekpunt, zodat desktop ongewijzigd blijft en er geen sprong is.
 * ===================================================================================================== */
@layer utilities {
  /* Grote koppen kleiner op mobiel (vanaf 1280 exact als voorheen) */
  .text-display { font-size: clamp(42px, -11.02px + 13.596vw, 163px); }
  .text-display-2 { font-size: clamp(36px, -4.75px + 10.449vw, 129px); }
  /* Nummercirkels ("1 Motivatie"): 34 → 46 */
  .usp-title .usp-num-filled { width: clamp(34px, 26.62px + 1.893vw, 46px); height: clamp(34px, 26.62px + 1.893vw, 46px); font-size: clamp(19px, 14.69px + 1.104vw, 26px); }
  .usp-filled .usp-title { gap: clamp(14px, 6.62px + 1.893vw, 26px); }
  @media (max-width: 1023px) {
    /* Sectie-ruimte: 64 vast → 36…96 vloeiend */
    .wj-block.py-16 { padding-top: clamp(36px, -0.91px + 9.464vw, 96px); padding-bottom: clamp(36px, -0.91px + 9.464vw, 96px); }
    .wj-block.pb-16 { padding-bottom: clamp(36px, -0.91px + 9.464vw, 96px); }
    .wj-block.pt-16 { padding-top: clamp(36px, -0.91px + 9.464vw, 96px); }
    /* Twee secties in dezelfde kleur na elkaar: geen dubbele witruimte */
    .wj-block[data-bg="primary"]:not([data-bg-bottom]) + .wj-block.py-16[data-bg="primary"],
    .wj-block[data-bg-bottom="primary"] + .wj-block.py-16[data-bg="primary"],
    .wj-block[data-bg="white"]:not([data-bg-bottom]) + .wj-block.py-16[data-bg="white"],
    .wj-block[data-bg-bottom="white"] + .wj-block.py-16[data-bg="white"],
    .wj-block[data-bg="dark"]:not([data-bg-bottom]) + .wj-block.py-16[data-bg="dark"],
    .wj-block[data-bg-bottom="dark"] + .wj-block.py-16[data-bg="dark"],
    .lv-meet + .wj-block.py-16[data-bg="primary"], .lv-cslider + .wj-block.py-16[data-bg="primary"], .lv-cases + .wj-block.py-16[data-bg="dark"] { padding-top: clamp(20px, -26.75px + 11.987vw, 96px); }
    /* Paginakop: 160 boven / 64 onder → 128…208 / 28…64 */
    .wj-block.sk-hero:not(.sk-hero--center):not(.sk-hero--later) { padding-top: clamp(128px, 78.79px + 12.618vw, 208px) !important; }
    .wj-block.sk-hero--later { padding-top: clamp(36px, -0.91px + 9.464vw, 96px) !important; }
    .wj-block.sk-hero:not(.sk-hero--center) { padding-bottom: clamp(28px, 5.85px + 5.678vw, 64px); }
    section.bg-primary.pt-40.pb-14 { padding-top: clamp(128px, 78.79px + 12.618vw, 208px); padding-bottom: clamp(32px, 17.24px + 3.785vw, 56px); }
  }
}

@media (max-width: 959px) {
  /* Live-blokken: 70/100/150 vast → vloeiend */
  main .lv-meet, main .lv-cslider, main .lv-kb, main .lv-ptext, main .lv-btext, main .lv-bmeta, main .lv-werkfilter, main .lv-kblist, main .lv-bloglist { padding-top: clamp(36px, 12.74px + 5.965vw, 70px); padding-bottom: clamp(36px, 12.74px + 5.965vw, 70px); }
  main .lv-bloktext { padding-top: clamp(36px, 26.42px + 2.456vw, 50px); padding-bottom: clamp(36px, 26.42px + 2.456vw, 50px); }
  main .lv-kb-head, main .lv-bimage, main .lv-intro { padding-top: clamp(128px, 112.95px + 3.860vw, 150px); }
  .wj-block[data-bg="primary"]:not([data-bg-bottom]) + .lv-meet, .wj-block[data-bg="primary"]:not([data-bg-bottom]) + .lv-cslider,
  .wj-block[data-bg-bottom="primary"] + .lv-meet, .lv-meet + .lv-cslider, .lv-cslider + .lv-meet { padding-top: 0; }
  .wj-block[data-bg="dark"]:not([data-bg-bottom]) + .lv-cases, .wj-block[data-bg-bottom="dark"] + .lv-cases { padding-top: 0; }
  .sk-cta { padding-top: clamp(36px, 16.84px + 4.912vw, 64px); }
  .lv-footer { padding-top: clamp(44px, 26.21px + 4.561vw, 70px); padding-bottom: clamp(44px, 26.21px + 4.561vw, 70px); }

  /* Koppen die op mobiel vast 60/80px waren */
  .lv-bloktext h2 { font-size: clamp(40px, 17.42px + 5.789vw, 73px); line-height: 1; }
  .lv-werkwijze h2 { padding-left: 30px; font-size: clamp(52px, 32.84px + 4.912vw, 80px); line-height: .94; }

  /* "Dit doen we dus / Dit werkte goed": vegen met snap, volgende kaart piept in beeld, ruimte tussen Scroll en knop */
  main .lv-cases { padding-top: clamp(24px, 19.89px + 1.053vw, 30px); padding-bottom: clamp(40px, -1.05px + 10.526vw, 100px); }
  .lv-cases-inner { padding-left: 20px; }
  .lv-cases h2 { padding-bottom: 24px; }
  .lv-cases-track { gap: 16px; padding-right: 20px; scroll-snap-type: x mandatory; scroll-padding-left: 0; overscroll-behavior-x: contain; }
  .lv-cases-item { flex-basis: calc(100vw - 64px); scroll-snap-align: start; }
  .lv-cases-foot { gap: 28px; padding-right: 20px; }
  .lv-cases-foot .lv-scrollbar { margin: 0; }

  /* Meet-kaart: aanhalingsteken links boven de tekst, niet meer over de functietitel */
  .lv-meet-quote { position: static; top: auto; width: 44px; height: 44px; margin: 24px 0 0; }
  .lv-meet-quote svg { width: 44px; height: 44px; }
  .lv-meet-text { margin-top: 12px; }

  /* Footer mobiel: logo + nieuwsbrief, contact, adres, Snel naar (2 kolommen), cookievoorkeuren, lijn, socials + © */
  .lv-footer-top { gap: 0; }
  .lv-footer-top > div:first-child { display: contents; }
  .lv-footer-logo { padding-bottom: 0; }
  .lv-footer-nb { margin: 28px 0 10px; }
  .lv-footer-form { max-width: none; margin: 0; }
  .lv-footer-form input { width: calc(100% - 64px); height: 48px; padding: 0 18px; }
  .lv-footer-form button { width: 64px; height: 48px; background-position: center; }
  .lv-footer-top > div:nth-child(2) { order: 2; margin-top: 40px; }
  .lv-footer-cookie { order: 3; margin-top: 32px; }
  .lv-footer-contact a { font-size: clamp(20px, 14.31px + 1.46vw, 28px); line-height: 1.4; }
  .lv-footer-contact div + div { margin-top: 12px; }
  .lv-footer-sub { margin-top: 32px; gap: 28px; font-size: 16px; }
  .lv-footer-sub h3 { margin-bottom: 12px; font-size: 20px; }
  .lv-footer-sub p { margin-bottom: 6px; }
  .lv-footer-sub li { margin-bottom: 12px; }
  .lv-footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 20px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / .25); }
  .lv-socials span { font-size: 20px; }
  .lv-copy { white-space: normal; font-size: 15px; }

  /* Mobiel menu: huidige pagina zichtbaar (zoals desktop: donkere tekst, roze pijl), video nooit door het menu heen (iOS) */
  .lh-mnav > li > a[aria-current], .lh-mnav > li > button.is-active, .lh-msub a[aria-current] { color: var(--lh-hover); }
  .lh-msub a[aria-current]::before { background: var(--lh-pink) 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 12px; }
  body.lh-locked main video { visibility: hidden; }
  .lh-offcanvas { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
  .lh-offcanvas.is-open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  /* Je/U: dezelfde schakelaar als desktop, in de balk en onderin het menu met uitleg */
  .lh-mobile .lh-tools { align-items: center; }
  .lh-mobile .lh-toggler { margin-right: 2px; }
  .lh-offcanvas-u { display: flex; align-items: center; gap: 14px; padding: 10px 25px 110px; }
  .lh-jeu-label { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.3; color: #fff; }
  .lh-jeu-label b { color: #c7fdbb; }
}
/* "Aanvullende diensten"-kaarten op de telefoon: 1 kaart over de volle breedte, pijlen helemaal in beeld */
@media (max-width: 639px) {
  .lv-cslider-inner { padding-inline: 20px; gap: 24px; }
  .lv-cslider-track { gap: 20px; padding-right: 0; }
  .lv-cslider-track li { flex: 0 0 100%; }
  .lv-cslider-wrap::after { display: none; }
  .lv-cslider-prev { left: -12px; }
  .lv-cslider-next { right: -12px; }
}
/* Mobiele balk: bij omhoog scrollen (vast) precies schermbreed (iOS: right:0 hangt aan de layout-viewport) en rechts wat meer marge */
@media (max-width: 959px) {
  .lh-mobile.is-sticky .lh-mobile-bar { left: 0; right: auto; width: 100vw; max-width: 100vw; box-sizing: border-box; }
  .lh-mobile .lh-container { padding-right: 20px; }
  .lh-mobile .lh-tools { margin-right: 0; }
  body { overflow-x: clip; }
}

/* Geen gekleurde randjes langs afgeronde foto's: onder een foto die tot de rand loopt mag geen achtergrondkleur zitten
   (anti-aliasing van de ronde hoek liet de kleur van de kaart erdoorheen schemeren) */
@layer utilities {
  .sk-story.bg-dark { background-color: transparent; }
  .sk-story.bg-dark > .sk-story-body { background-color: var(--color-dark); }
  .sk-story-media:has(img) { background-color: transparent; }
  .overflow-hidden:is(.rounded-card, [class*="rounded-["]):has(> img, > picture, > video) { background-color: transparent; }
}
/* Vaste balk (omhoog scrollen): schakelaar, zoeken en hamburger verticaal gecentreerd in de balk van 80px; logo blijft bovenaan */
@media (max-width: 959px) {
  .lh-mobile.is-sticky .lh-tools { align-self: center; margin-top: 0; }
}


/* Foto naast de verhaaltekst (bv. "Digitaal toegankelijk") op mobiel/tablet helemaal tonen i.p.v. bijgesneden */
@layer utilities {
  @media (max-width: 1023px) {
    .sk-story .sk-story-media:not(.sk-story-media--collage) { min-height: 0; }
    .sk-story .sk-story-media:not(.sk-story-media--collage) img { position: static; display: block; width: 100%; height: auto; }
  }
}
/* Pijlcirkels in opsommingen in verhouding tot de tekst: 28px op de telefoon → 38px (live-lijst) / 31-32px (Sketch-lijsten) */
.lv-cslider-list svg { width: clamp(28px, 21.16px + 1.754vw, 38px); height: clamp(28px, 21.16px + 1.754vw, 38px); }
.lv-cslider-list li { gap: clamp(10px, 7.95px + .526vw, 13px); line-height: 1.4; }
@layer utilities {
  .sk-ti .checklist li::before, .sk-ti .prose ul li::before { width: clamp(26px, 22.92px + .789vw, 31px); height: clamp(26px, 22.92px + .789vw, 31px); background-size: 100% 100%; top: 2px; }
  .sk-ti .checklist li, .sk-ti .prose ul li { padding-left: clamp(40px, 31.39px + 2.208vw, 54px); }
  .usp-check .sk-checklist li::before { width: clamp(26px, 22.31px + .946vw, 32px); height: clamp(26px, 22.31px + .946vw, 32px); background-size: 100% 100%; top: 2px; }
  .usp-check .sk-checklist li { padding-left: clamp(38px, 32.46px + 1.42vw, 47px); }
}

/* Domeinnaam-check (HostFact-tabel) op de telefoon: elke rij een kaartje — naam + vrij/bezet, daaronder prijs + bestellen */
@media (max-width: 639px) {
  .wj-whois-results .w_result table, .wj-whois-results .w_result tbody, .wj-whois-results .w_result tr, .wj-whois-results .w_result td { display: block; width: auto; }
  .wj-whois-results .w_result table > tbody:first-child { display: none; }
  .wj-whois-results .w_result tbody[style*="none"] { display: none; }
  .wj-whois-results .w_result tr.domain_tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / .2); }
  .wj-whois-results .w_result tr.domain_tr > td { padding: 0; border: 0; text-align: left; white-space: nowrap; }
  .wj-whois-results .w_result tr.domain_tr > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; overflow-wrap: anywhere; white-space: normal; font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
  .wj-whois-results .w_result tr.domain_tr > td:nth-child(2) { grid-column: 3; grid-row: 1; justify-self: end; }
  .wj-whois-results .w_result tr.domain_tr > td:nth-child(3) { grid-column: 1; grid-row: 2; }
  .wj-whois-results .w_result tr.domain_tr > td:nth-child(4) { display: none; }
  .wj-whois-results .w_result tr.domain_tr > td:nth-child(5) { grid-column: 2; grid-row: 2; opacity: .8; }
  .wj-whois-results .w_result tr.domain_tr > td:nth-child(6) { grid-column: 3; grid-row: 2; justify-self: end; }
  .wj-whois-results .w_result tr.domain_tr > td:nth-child(6):empty, .wj-whois-results .w_result tr.domain_tr > td:nth-child(6):not(:has(a)) { visibility: hidden; }
}
/* Homepage "Uitgelicht": 150px boven → 48…150; live-voordelen (vacatures): 100 → 40…100 */
@media (max-width: 959px) {
  main .lv-uitgelicht { padding-top: clamp(48px, -21.79px + 17.895vw, 150px); }
  main .lv-voordelen { padding-top: clamp(40px, -1.05px + 10.526vw, 100px); padding-bottom: clamp(40px, -1.05px + 10.526vw, 100px); }
}

/* "Je plannen bespreken?" + "Reviews" op mobiel (onder elkaar): kleurovergang altijd precies midden in de tussenruimte,
   ongeacht de lengte van de review. Boven-kleur = een vlak in dezelfde rasterregel als de roze kaart. */
@media (max-width: 959px) {
  .sk-cta { isolation: isolate; overflow: clip; background: #8438df; }
  .sk-cta-grid > .sk-cta-card { grid-row: 1; grid-column: 1; }
  .sk-cta-grid > .sk-reviews { grid-row: 2; grid-column: 1; }
  .sk-cta-grid::before { content: ""; grid-row: 1; grid-column: 1; z-index: -1; margin: calc(-1 * clamp(36px, 16.84px + 4.912vw, 64px)) -50vw -14px; background: var(--sk-cta-top); }
}

/* "Klant case" / "Bekijk ander werk" (lv-ander) op mobiel/tablet: zelfde opbouw als desktop, vloeiend verkleind —
   grote kop over de linkerbovenhoek van de (gedimde) foto, projectnaam + ronde pijl rechtsonder op de foto,
   schuifpijlen halverwege de foto, binnen de kaart */
@media (max-width: 959px) {
  .lv-ander:not(.lv-ander--kb) .lv-ander-card { --pt: clamp(72px, 47.37px + 6.316vw, 108px); --px: clamp(16px, 5.05px + 2.807vw, 32px); container-type: inline-size; padding: var(--pt) var(--px) clamp(28px, 11.58px + 4.21vw, 52px); }
  .lv-ander:not(.lv-ander--kb) h2 { top: clamp(20px, 6.32px + 3.509vw, 40px); left: calc(var(--px) + 6px); padding: 0; font-size: clamp(40px, 24.6px + 3.95vw, 62px); line-height: 1; }
  .lv-ander:not(.lv-ander--kb) .lv-ander-track { margin: 0; }
  .lv-ander:not(.lv-ander--kb) .lv-ander-track a { width: 100%; }
  .lv-ander:not(.lv-ander--kb) .lv-ander-title { right: 52px; bottom: clamp(10px, 4.53px + 1.404vw, 18px); padding: 0; font-size: clamp(18px, 13.89px + 1.053vw, 24px); line-height: 1.2; text-shadow: 0 1px 6px rgb(0 0 0 / .45); }
  .lv-ander:not(.lv-ander--kb) .lv-ander-title::after { right: -40px; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
  .lv-ander:not(.lv-ander--kb) .lv-ander-nav { top: calc(var(--pt) + 100cqw * .24127); }
  .lv-ander:not(.lv-ander--kb) .lv-ander-prev { left: 2px; }
  .lv-ander:not(.lv-ander--kb) .lv-ander-next { right: 2px; }
}
@media (max-width: 959px) {
  .lv-ander:not(.lv-ander--kb) .lv-ander-card { --pb: clamp(28px, 11.58px + 4.21vw, 52px); padding: clamp(20px, 6.32px + 3.509vw, 40px) var(--px) var(--pb); }
  .lv-ander:not(.lv-ander--kb) h2 { position: relative; top: auto; left: auto; margin: 0 0 -.42em 6px; }
  .lv-ander:not(.lv-ander--kb) .lv-ander-track li, .lv-ander:not(.lv-ander--kb) .lv-ander-track a { line-height: 0; }
  .lv-ander:not(.lv-ander--kb) .lv-ander-title { line-height: 1.2; }
  .lv-ander:not(.lv-ander--kb) .lv-ander-nav { top: auto; bottom: calc(var(--pb) + 100cqw * .24127 - 20px); }
}

/* Ons werk / Cases: overgang projectraster → "Meer werk" op mobiel — laatste kaart steekt over de donkere band (zoals desktop),
   geen vorm over de projectnaam, normale ruimte tot "Meer werk" */
@media (max-width: 959px) {
  .lv-werkgrid { border-bottom-width: clamp(120px, 77.89px + 10.8vw, 180px); }
  .lv-werkgrid-list { margin-bottom: calc(-1 * clamp(120px, 77.89px + 10.8vw, 180px)); padding-bottom: 0; }
  .lv-werkgrid::after { display: none; }
  main .lv-werkgrid + .lv-werkfilter { padding-top: clamp(48px, 37.05px + 2.807vw, 64px); }
}

/* Support-overzicht op mobiel: zoeken over de volle breedte, filter + "Wis filters" ernaast, artikelen als compacte rijen */
@media (max-width: 639px) {
  .lv-kblist-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 24px 0 16px; }
  .lv-kblist-search { grid-column: 1 / -1; }
  .lv-kblist-search input, .lv-kblist-search input:focus { width: 100%; height: 48px; padding: 0 46px 0 20px; font-size: 17px; }
  .lv-kblist-select { min-width: 0; }
  .lv-kblist-select select { width: 100%; height: 48px; padding: 0 40px 0 20px; font-size: 17px; }
  .lv-kblist-reset { font-size: 16px; white-space: nowrap; }
  .lv-kblist-grid { gap: 0; }
  .lv-kblist-grid > li { border-top: 1px solid rgb(255 255 255 / .15); }
  .lv-kblist-grid > li:last-child { border-bottom: 1px solid rgb(255 255 255 / .15); }
  .lv-kblist-grid a { padding: 18px 0 16px; }
  .lv-kblist-grid h2 { padding-right: 0; font-size: clamp(19px, 15.57px + .88vw, 22px); line-height: 1.3; }
  .lv-kblist-more { margin-top: 6px; padding-right: 30px; font-size: 16px; line-height: 1.6; letter-spacing: .5px; }
  .lv-kblist-more::after { width: 22px; height: 22px; }
}

/* Mobiel menu: infaden i.p.v. van rechts inschuiven; inhoud horizontaal + verticaal gecentreerd (bij overloop gewoon scrollen) */
@media (max-width: 959px) {
  .lh-offcanvas, .lh-offcanvas.is-open { -webkit-transform: none; transform: none; }
  .lh-offcanvas { display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  .lh-offcanvas.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
  .lh-offcanvas-top { position: absolute; top: 0; right: 0; z-index: 2; }
  .lh-offcanvas-title { margin-top: auto; padding: 70px 20px 24px; text-align: center; }
  .lh-mnav { padding: 0 20px; text-align: center; }
  .lh-mnav > li > a, .lh-mnav > li > button { display: inline-block; margin: 0 0 26px; padding-left: 44px; }
  .lh-mnav > li > a::before, .lh-mnav > li > button::before { left: 0; }
  .lh-msub { margin: -6px 0 8px; }
  .lh-msub li { text-align: center; }
  .lh-msub a { display: inline-block; margin: 0 0 20px; }
  .lh-offcanvas-u { justify-content: center; margin-bottom: auto; padding: 4px 20px 110px; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) { .lh-offcanvas, .lh-offcanvas.is-open { transition: none; } }

/* Desktopmenu (volledig scherm): alles altijd binnen beeld met marge — links ruimte voor de roze pijl (45px) + 20px,
   boven/onder 80px (sluitknop); vanaf 1330px breed precies als voorheen (inhoud 1200 gecentreerd) */
@media (min-width: 960px) {
  .lh-dialog-body { max-width: none; padding: 80px max(24px, calc((100vw - 1200px) / 2)) 80px max(65px, calc((100vw - 1200px) / 2)); }
  .lh-dialog-grid { min-width: 0; }
  .lh-panels { min-width: 0; }
}
@media (min-width: 960px) and (max-width: 1239px) { .lh-tabs { margin-left: 0; } }

/* =====================================================================================================
 * Telefoon staand en kleiner (≤ 479px): kaarten/panelen over de volle schermbreedte (geen lege stroken links/rechts,
 * geen afgeronde hoeken), alleen binnenruimte houdt de tekst van de rand. Plus: alles werkt vanaf 300px breed.
 * ===================================================================================================== */
@media (max-width: 479px) {
  .container-content { --wj-g: 1.25rem; }
  .container-live, .container-small, .lv-container, .lv-ander-inner, .lv-bmeta-inner, .lv-ptext-inner, .lv-pimage-inner { --wj-g: 15px; }
  .sk-story, .lv-meet-grid, .lv-ander-card, .lv-pricing-card, .sk-packages article, .wj-block--service-columns .card,
  .wj-block--afspraak .rounded-card, .lv-contactblok-main, .lv-tcard, .wj-block--process-slider .relative.mx-auto.grid,
  .lv-bmeta-card, .lv-blogcard, main ul.grid > li > a.card.card-link, .wj-dog-game, .wj-block--link-cards-collage .container-live > .grid,
  .wj-block--link-cards-collage .rounded-card {
    margin-left: calc(-1 * var(--wj-g, 20px)); margin-right: calc(-1 * var(--wj-g, 20px)); border-radius: 0;
  }
  .wj-dog-game canvas:focus-visible { border-radius: 0; }
  .sk-cta-grid { width: 100%; }
  .sk-cta-card, .sk-reviews { border-radius: 0; }
  .lv-uitgelicht .lv-container { padding-left: 0; padding-right: 0; }
  .lv-uitgelicht-card { border-radius: 0; }
  .wj-block--link-cards-collage h2 { white-space: normal; }
  .wj-block--link-cards-collage .p-10 { padding: 32px 20px; }

  /* 300px: lange knopteksten en links breken af i.p.v. buiten beeld te lopen */
  .lv-btn, .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-top: 9px; padding-bottom: 9px; }
  main :is(p, li, td, figcaption) a, .lv-kb-text a, .prose a { overflow-wrap: anywhere; }
  /* schuifpijlen van de support-slider binnen beeld */
  .lv-ander--kb .lv-ander-prev { left: 4px; }
  .lv-ander--kb .lv-ander-next { right: 4px; }
  /* "Aanvullende diensten": titel + pijl rechts uitgelijnd binnen beeld */
  .lv-svcgrid-list h2 { left: 0; padding-right: 34px; }
  .lv-svcgrid-list h2::after { right: 0; }
}

/* Mobiel menu: één kolom in het midden van het scherm, alles erin links uitgelijnd (titel, items met pijl, submenu's, Je/U).
   Rasterkolom = breedte van het breedste item; lege rijen boven/onder centreren verticaal en vallen weg als het menu langer is dan het scherm. */
@media (max-width: 959px) {
  .lh-offcanvas { display: grid; grid-template-columns: minmax(0, max-content); grid-template-rows: 1fr auto auto auto 1fr; justify-content: center; }
  .lh-offcanvas::before, .lh-offcanvas::after { content: ""; }
  .lh-offcanvas-title { margin: 0; padding: 70px 0 22px; text-align: left; }
  .lh-mnav { padding: 0; text-align: left; max-width: calc(100vw - 40px); }
  .lh-mnav > li > a, .lh-mnav > li > button { display: block; margin: 0 0 24px; padding-left: 46px; }
  .lh-msub { margin: -6px 0 10px 46px; }
  .lh-msub li { text-align: left; }
  .lh-msub a { display: block; margin: 0 0 18px; padding-left: 30px; }
  .lh-offcanvas-u { justify-content: flex-start; margin: 0; padding: 6px 0 110px; }
}
/* vaste kolombreedte: openklappen van een submenu laat het menu niet opzij verspringen */
@media (max-width: 959px) { .lh-offcanvas { grid-template-columns: min(232px, calc(100vw - 40px)); } .lh-mnav { max-width: none; } }

/* Mobiel menu: bovenbalk gelijk aan de paginabalk (logo, Je/U, zoeken, kruis op de plek van de hamburger) */
@media (max-width: 959px) {
  .lh-offcanvas { grid-template-rows: 1fr auto auto 1fr; }
  .lh-offcanvas-top { position: absolute; inset: 0 0 auto 0; height: 100px; display: block; z-index: 2; }
  .lh-offcanvas-top .lh-container { display: flex; align-items: flex-start; justify-content: space-between; height: 80px; padding-right: 20px; }
  .lh-offcanvas-top .lh-logo img { display: block; width: 100px; height: 100px; }
  .lh-offcanvas-top .lh-tools { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
  .lh-offcanvas.is-sticky .lh-offcanvas-top .lh-tools { align-self: center; margin-top: 0; }
  .lh-offcanvas-top .lh-search input.is-expanded, .lh-offcanvas-top .lh-search input:focus { width: min(250px, calc(100vw - 190px)); }
  .lh-offcanvas-top .lh-offcanvas-close { display: grid; place-items: center; width: 40px; height: 35px; padding: 0; }
  .lh-offcanvas-top .lh-offcanvas-close svg { width: 24px; height: 24px; }
  .lh-offcanvas-title { padding-top: 124px; }
}
@media (max-width: 959px) { .lh-offcanvas-top .lh-toggler { margin-right: 2px; } }

/* Meet-kaart op mobiel/tablet zoals desktop: naam + functie links (verticaal gecentreerd), foto rechtsonder op de onderrand */
@media (max-width: 959px) {
  .lv-meet-card { flex-direction: row; align-items: center; gap: 0; min-height: clamp(280px, 241.05px + 9.99vw, 380px); padding: 0 0 0 clamp(22px, 13.79px + 2.105vw, 50px); }
  .lv-meet-name { position: relative; z-index: 2; width: auto; max-width: 46%; padding: 0; text-shadow: 0 2px 12px rgb(46 19 82 / .6); }
  .lv-meet-photo { position: absolute; z-index: 1; left: auto; right: 0; bottom: 0; width: clamp(186px, 62%, 450px); max-width: none; margin: 0; }
  .lv-meet-photo img { width: 100%; height: auto; }
}

/* Meet-kaart op ALLE breedtes vloeiend: foto rechtsonder ín de kaart (breedte = 75% van de kaart, max 450 zoals live),
   kaart groeit mee met de foto zodat hoofd en schouders nooit worden afgesneden; naam + functie links verticaal gecentreerd */
.lv-meet-card { container-type: inline-size; display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; gap: 0;
  min-height: clamp(280px, 241.05px + 9.99vw, 380px); padding: clamp(24px, 18.53px + 1.404vw, 40px) 0 0 0; }
.lv-meet-photo { position: relative; z-index: 1; left: auto; right: auto; bottom: auto; flex: none; width: min(450px, 75cqw); max-width: none; margin: 0; }
.lv-meet-photo img { display: block; width: 100%; height: auto; }
.lv-meet-name { position: absolute; z-index: 2; left: clamp(22px, 13.79px + 2.105vw, 50px); top: 50%; transform: translateY(-50%); width: auto; max-width: 46cqw; padding: 0; text-shadow: 0 2px 12px rgb(46 19 82 / .6); }
.lv-meet-name h3 { overflow-wrap: anywhere; }

/* "Aanvullende diensten" (lv-cslider) vloeiend: linkerkolom groeit mee met het scherm (formule van live, nu vanaf 960),
   kaarten nooit smaller dan 280px, pijlen vanaf 640px onder de kaarten (nooit meer over de tekst) */
@media (min-width: 960px) {
  .lv-cslider-inner { grid-template-columns: calc(20vw + 238px) minmax(0, 1fr); }
  .lv-cslider-track li { flex-basis: max(280px, calc(10vw + 129px)); }
}
@media (min-width: 640px) {
  .lv-cslider-wrap { padding-bottom: 60px; }
  .lv-cslider-nav { top: auto; bottom: 0; }
  .lv-cslider-prev { left: 0; right: auto; transform: rotate(180deg); }
  .lv-cslider-next { left: 52px; right: auto; transform: none; }
}

/* Kaarten met een raster (contact/support-panelen, verhaalkaarten): kolom mag nooit breder worden dan de kaart door een lang woord */
@layer utilities {
  .rounded-card.grid, .sk-story { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 768px) { .rounded-card.grid.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .rounded-card.grid.sk-story, .sk-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* zelfde specificiteit als de regel hierboven, anders blijft de verhaalkaart 1 kolom */
}
@media (max-width: 479px) {
  /* lange woorden (bv. "onderhoudsabonnement") en e-mailadressen breken af i.p.v. buiten de kaart te vallen */
  main :is(h1, h2, h3, h4, p, li, blockquote, dd, dt) { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  main .rounded-card.grid.shadow-card-lg { margin-left: calc(-1 * var(--wj-g, 20px)); margin-right: calc(-1 * var(--wj-g, 20px)); border-radius: 0; }
}