/* PACK Consultancy, huisstijl vastgesteld op 13 september 2026.
   Alle kleuren vlak: geen verloop, glans, gloed of schaduw onder knoppen. */

/* ── Lettertypen, zelf gehost (font-src 'self') ── */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('assets/fonts/BricolageGrotesque-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('assets/fonts/BricolageGrotesque-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/Inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Kleuren ── */
:root{
  --diep:#093534; --petrol:#155049; --goud:#C09C4E; --goud-donker:#8C7130;
  --ivoor:#F5F3EE; --steen:#E1E6E2; --kaart:#FBFAF7; --kaart-rand:#E3E1DA;
  --inkt:#0E2624; --tekst-licht:#4E5856;
  --zilver:#B0B6B9; --tekst-donker:#CFD4D5; --lijn-donker:rgba(176,182,185,.18);
  --kop:'Bricolage Grotesque',Arial,sans-serif; --tekst:'Inter',system-ui,sans-serif;
  /* Zijmarge groeit mee op grote schermen, zodat de inhoud nooit breder wordt dan 1360 px
     en in het midden staat (iMac, 2 oktober 2026). Onder 1504 px is het gewoon 72 px. */
  --rand:max(72px,calc((100vw - 1360px) / 2));
}

/* ── Basis ── */
[hidden]{display:none !important}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
html,body{overflow-x:hidden;overflow-x:clip}
body{font-family:var(--tekst);font-size:17px;line-height:1.6;color:var(--inkt);background:var(--ivoor);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.accent{color:var(--goud)}
.sectie .accent{color:var(--petrol)}
.rand{padding-left:var(--rand);padding-right:var(--rand)}
.skip{position:absolute;left:-9999px;top:0;background:var(--goud);color:var(--inkt);padding:10px 16px;font-weight:600;z-index:20}
.skip:focus{left:16px;top:16px}

/* ── Knoppen ── */
.knop{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:999px;background:var(--goud);color:var(--inkt);font:600 16.5px var(--tekst);letter-spacing:.005em;text-decoration:none;white-space:nowrap}
.knop:hover{background:#B38F42}
.knop:focus-visible,.knop-tekst:focus-visible,.nav a:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.knop-klein{height:44px;padding:0 20px;font-size:15px}
.knop-tekst{font:600 17px var(--tekst);display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.knop-tekst .pijl{color:var(--goud)}
.knop-tekst:hover .pijl{transform:translateX(3px)}
.pijl{display:inline-block;transition:transform .2s}

/* ── Boventitel ── */
.boventitel{display:flex;align-items:center;gap:12px;font:500 15px var(--tekst);letter-spacing:.01em;margin-bottom:22px}
.stip{width:10px;height:10px;border-radius:50%;background:var(--goud);box-shadow:0 0 0 5px rgba(192,156,78,.22);flex:none}

/* ── Header ── */
.hero{position:relative;background:var(--diep);color:var(--tekst-donker);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 85% at 80% 50%,#14453F 0%,var(--diep) 70%)}
.hero>*{position:relative}
.nav{height:96px;display:flex;align-items:center;gap:40px}
/* Vast menu bovenin (2 oktober 2026). Bovenaan doorzichtig over de header, na het scrollen
   effen diep petrol en lager. Geen backdrop-filter: dat maakt van de nav het kader voor
   position:fixed, en dan past het beeldvullende mobiele menu er niet meer in. */
.hero .nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(9,53,52,0);border-bottom:1px solid transparent;
  transition:height .35s cubic-bezier(.2,.85,.2,1),background-color .35s ease,border-color .35s ease}
.hero .nav.gescrold{height:72px;background:var(--diep);border-bottom-color:var(--lijn-donker)}
.hero{padding-top:96px}
html{scroll-padding-top:88px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font:700 22px var(--kop);letter-spacing:-.01em}
.logo img{width:38px;height:38px}
.logo em{font-style:normal;font-weight:500;color:var(--tekst-donker)}
.nav ul{display:flex;gap:32px;list-style:none;margin-left:auto;font:500 15.5px var(--tekst)}
.nav ul a{text-decoration:none;color:var(--tekst-donker)}
.nav ul a:hover{color:#fff}
.menu-knop{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;color:#fff;cursor:pointer;border-radius:8px;position:relative}
.menu-knop span{position:absolute;left:10px;width:24px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.7,0,.25,1),opacity .25s ease,top .45s cubic-bezier(.7,0,.25,1)}
.menu-knop span:nth-child(1){top:14px}.menu-knop span:nth-child(2){top:21px}.menu-knop span:nth-child(3){top:28px}
.nav.open .menu-knop span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav.open .menu-knop span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav.open .menu-knop span:nth-child(3){top:21px;transform:rotate(-45deg)}
.menu-cta{display:none}
.hero-inhoud{display:grid;grid-template-columns:minmax(0,720px) 1fr;min-height:764px}
.hero-tekst{padding:64px 0 72px}
.hero .boventitel{color:var(--tekst-donker)}
.hero h1{font-size:clamp(44px,5.3vw,76px);color:var(--zilver);margin-bottom:28px}
.hero .intro{font-size:20px;line-height:1.55;max-width:560px;margin-bottom:40px}
.knoppen{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-bottom:44px}
.hero .knop-tekst{color:var(--zilver)}
.bewijs{display:flex;gap:36px;list-style:none;font-size:14.5px;line-height:1.4;padding-top:26px;max-width:640px;color:#B4BABB;border-top:1px solid var(--lijn-donker)}
.bewijs li{max-width:190px}
.bewijs b{display:block;font:700 17px var(--kop);color:var(--zilver);margin-bottom:2px}
.hero-foto{position:relative;align-self:end;justify-self:end;margin-right:calc(-1 * var(--rand));height:760px;max-height:100%}
.hero-foto img{height:100%;width:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 22%,#000 50%),linear-gradient(to bottom,transparent 0,#000 12%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 22%,#000 50%),linear-gradient(to bottom,transparent 0,#000 12%);mask-composite:intersect}

/* ── Secties ── */
.sectie{padding-top:120px;padding-bottom:120px}
.sectie .boventitel{color:var(--petrol)}
.sectie h2{font-size:clamp(34px,3.8vw,54px);max-width:760px}
.kopregel{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:64px}
.kopregel p{font-size:18px;color:var(--tekst-licht);max-width:440px}

/* diensten */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dienst{background:var(--kaart);border-radius:18px;padding:36px 34px 38px;border:1px solid var(--kaart-rand)}
.dienst .ic{width:56px;height:56px;border-radius:14px;background:var(--steen);color:var(--petrol);display:grid;place-items:center;margin-bottom:28px}
.dienst .ic svg{width:26px;height:26px}
.dienst h3{font-size:25px;letter-spacing:-.015em;margin-bottom:12px}
.dienst p{font-size:16px;color:var(--tekst-licht);margin-bottom:14px}
.dienst .probleem{font-weight:500;color:var(--inkt)}
.dienst .ook{font:600 13px var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);margin:20px 0 8px}
.ook-voor{list-style:none;margin-bottom:22px}
.ook-voor li{position:relative;padding-left:18px;font-size:15px;color:var(--tekst-licht);margin-bottom:5px}
.ook-voor li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--goud)}
.dienst a{font:600 15px var(--tekst);color:var(--petrol);display:inline-flex;gap:8px;text-decoration:none}
.dienst a .pijl{color:var(--goud-donker)}
.dienst.uit{background:var(--petrol);border-color:var(--petrol)}
.dienst.uit .ic{background:rgba(255,255,255,.14);color:var(--goud)}
.dienst.uit h3{color:#EEF1F1}.dienst.uit p{color:#D9DEDE}.dienst.uit .probleem{color:#EEF1F1}.dienst.uit .ook{color:var(--goud)}.dienst.uit .ook-voor li{color:#D9DEDE}.dienst.uit a{color:#EEF1F1}.dienst.uit a .pijl{color:var(--goud)}

/* werkwijze */
.werkwijze{background:var(--steen)}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);position:relative;list-style:none}
.stappen::before{content:"";position:absolute;left:26px;right:33%;top:26px;border-top:1px solid rgba(21,80,73,.28)}
.stap{padding-right:40px}
.stap .nr{width:52px;height:52px;border-radius:50%;background:var(--goud);color:var(--inkt);display:grid;place-items:center;font:700 20px var(--kop);margin-bottom:26px;position:relative}
.stap .wie{font:600 13px var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);margin-bottom:14px}
.stap h3{font-size:26px;letter-spacing:-.015em;margin-bottom:6px}
.stap p{font-size:16.5px;color:#3E4C49;max-width:340px}

/* werk: horizontale galerij (sinds 1 oktober 2026). Zonder script of op telefoon een veegrij;
   met motion.js op een groot scherm vastgepind (.werk-pin) en schuivend met het scrollen. */
.werk{background:var(--ivoor)}
.werk-kop{padding-bottom:36px}
.werk-kop .kopregel{margin-bottom:0}
.werk-rij{display:flex;gap:72px;overflow-x:auto;scroll-snap-type:x mandatory;padding-top:8px;padding-bottom:28px;scrollbar-width:none;overscroll-behavior-x:contain}
.werk-rij::-webkit-scrollbar{display:none}
.case{flex:none;width:min(1120px,84vw);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:56px;align-items:center;scroll-snap-align:center}
.case-beeld{position:relative;display:block;padding-bottom:44px;transform-origin:50% 60%;will-change:transform;text-decoration:none}
.browser{background:var(--kaart);border:1px solid var(--kaart-rand);border-radius:14px;overflow:hidden}
.browser-balk{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;background:var(--steen);border-bottom:1px solid var(--kaart-rand)}
.browser-balk i{width:10px;height:10px;border-radius:50%;background:#C6CDC9}
.browser-balk i:first-child{background:var(--goud)}
.browser-balk span{margin-left:12px;font-size:12.5px;color:var(--tekst-licht);background:var(--kaart);border-radius:999px;padding:3px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-venster{height:min(50vh,500px);overflow:hidden;position:relative;background:var(--kaart)}
.case-scroll{width:100%;height:auto;will-change:transform}
.telefoon{position:absolute;right:-26px;bottom:0;width:23%;min-width:118px;border-radius:28px;background:var(--inkt);padding:7px;box-shadow:0 0 0 6px var(--ivoor);will-change:transform}
.telefoon img{border-radius:21px;width:100%;height:auto}
.case-nr{font:700 15px var(--kop);color:var(--goud-donker);letter-spacing:.1em}
.case-tekst h3{font-size:clamp(30px,3vw,46px);margin:10px 0 6px}
.case-vak{color:var(--tekst-licht);font-size:16px;margin-bottom:26px}
.case-label{font:600 13px var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);margin-bottom:10px}
.case-extra{list-style:none;margin-bottom:28px}
.case-extra li{position:relative;padding-left:22px;margin-bottom:8px;font-size:16px;color:#3E4C49}
.case-extra li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--goud)}
.case .knop-tekst{color:var(--petrol);font-size:16px}
.case .knop-tekst .pijl{color:var(--goud-donker)}
.werk-teller{display:flex;align-items:center;gap:14px;font:700 15px var(--kop);color:var(--petrol);margin-top:24px;padding-bottom:96px}
.werk-van{color:var(--tekst-licht);font-weight:500}
.werk-balk{flex:0 0 220px;height:2px;background:var(--kaart-rand);position:relative;overflow:hidden;margin-left:8px}
.werk-balk i{position:absolute;inset:0;background:var(--goud);transform-origin:left;transform:scaleX(0)}
.werk-hint{margin-left:auto;font:500 14px var(--tekst);color:var(--tekst-licht)}
.werk-pin .werk-plak{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.werk-pin .werk-rij{overflow:visible;scroll-snap-type:none;width:max-content;will-change:transform;
  padding-left:calc((100vw - min(1120px,84vw)) / 2);padding-right:calc((100vw - min(1120px,84vw)) / 2)}
.werk-pin .werk-teller{padding-bottom:0}
.werk-pin .case{opacity:.4;transition:opacity .6s ease}
.werk-pin .case.dichtbij{opacity:1}
.werk-pin .werk-hint::after{content:" \2192"}

/* probleem */
.probleem-inhoud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.probleem h2{margin-bottom:24px}
.probleem .tekst p,.probleem-inhoud>div>p:not(.boventitel){font-size:17.5px;color:var(--tekst-licht);margin-bottom:18px;max-width:560px}
.probleem-lijst{background:var(--kaart);border:1px solid var(--kaart-rand);border-radius:18px;padding:36px 34px 38px}
.lijst-kop{font:700 22px var(--kop);letter-spacing:-.015em;margin-bottom:18px}
.vinkjes{list-style:none;margin-bottom:22px}
.vinkjes li{position:relative;padding-left:34px;margin-bottom:12px;font-size:16.5px;color:#3E4C49}
.vinkjes li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--goud)}
.vinkjes li::after{content:"";position:absolute;left:7px;top:8px;width:5px;height:9px;border:solid var(--inkt);border-width:0 2px 2px 0;transform:rotate(45deg)}
.slotzin{font-size:16.5px;color:var(--tekst-licht);margin-bottom:26px}

/* over */
.over{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:80px;align-items:center}
.over .tekst p{font-size:17.5px;color:var(--tekst-licht);margin-bottom:18px;max-width:600px}
.over h2{margin-bottom:24px}
.kenmerken{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:28px}
.kenmerken li{font:500 14px var(--tekst);color:var(--petrol);background:var(--steen);border-radius:999px;padding:8px 16px}
.over-knop{margin-top:30px}
.over-foto{border-radius:24px;overflow:hidden;background:var(--diep);aspect-ratio:4/5}
.over-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}

/* slot */
.slot{background:var(--diep);color:var(--tekst-donker);padding-top:96px;padding-bottom:96px;position:relative;overflow:hidden}
.slot-inhoud{display:flex;align-items:center;justify-content:space-between;gap:60px;position:relative}
.slot h2{font-size:clamp(32px,3.4vw,48px);color:var(--zilver);max-width:720px}
.slot p{font-size:18px;margin-top:16px;max-width:560px}
.slot .zonbg{position:absolute;right:-120px;bottom:-320px;width:520px;height:520px;opacity:.09;pointer-events:none;will-change:transform}
.slot .knop{flex:none}
.slot .mail{display:block;margin-top:22px;font:600 17px var(--tekst);color:var(--zilver);text-decoration:none}
.slot .mail:hover{color:#fff}
.slot-contact{margin-top:18px}
.slot-contact .knop-tekst{font-size:17px}

/* voet */
.voet{background:var(--diep);color:#B4BABB;font-size:14px;padding-top:26px;padding-bottom:26px;border-top:1px solid var(--lijn-donker)}
.voet-balk{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.voet a{color:var(--zilver);text-decoration:none}
.voet a:hover{color:#fff}

/* onthullen bij scrollen; zonder script of met reduced motion gewoon zichtbaar */
.onthul{opacity:1;transform:none}
.js .onthul{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .onthul.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .onthul{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.pijl{transition:none}}



/* ── Losse pagina's (sinds 1 oktober 2026) ── */
.nav ul a[aria-current]{color:#fff;box-shadow:0 2px 0 var(--goud)}
.hero.sub .hero-inhoud{grid-template-columns:minmax(0,880px);min-height:0}
.hero.sub .hero-tekst{padding:48px 0 96px}
.hero.sub h1{font-size:clamp(40px,4.6vw,68px)}
.hero.sub.met-foto .hero-inhoud{grid-template-columns:minmax(0,720px) 1fr}
.hero.sub.met-foto .hero-foto{height:620px}
.hero.sub.met-foto .hero-tekst{padding-bottom:72px}
.kruimels{display:flex;flex-wrap:wrap;gap:10px;font:500 14px var(--tekst);color:#B4BABB;margin-bottom:26px}
.kruimels a{color:var(--tekst-donker);text-decoration:none}
.kruimels a:hover{color:#fff}
.kruimels [aria-current]{color:var(--goud)}
.knop-licht{color:var(--zilver)}
.knop-licht:hover{color:#fff}
.knop-rand{background:transparent;color:var(--petrol);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.knop-rand:hover{background:var(--steen)}
.steen{background:var(--steen)}
.tb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.tb.om .plek{order:-1}
.tb h2{margin-bottom:24px}
.tb-tekst p:not(.boventitel){font-size:17.5px;color:var(--tekst-licht);margin-bottom:18px;max-width:580px}
.plek img{width:100%;height:auto;border-radius:20px;border:1px solid var(--kaart-rand);background:#fff}
.beeld-breed{padding-top:0}
.plek.breed img{max-height:640px;object-fit:cover}
.kenmerk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none}
.kenmerk-grid.n4{grid-template-columns:repeat(2,1fr)}
.kenmerk-kaart{background:var(--kaart);border:1px solid var(--kaart-rand);border-radius:18px;padding:30px 30px 32px}
.kk-nr{font:700 14px var(--kop);color:var(--goud-donker);letter-spacing:.1em}
.kenmerk-kaart h3{font-size:22px;letter-spacing:-.015em;margin:12px 0 8px}
.kenmerk-kaart p{font-size:15.5px;color:var(--tekst-licht)}
.stappen-4{grid-template-columns:repeat(4,1fr)}
.stappen-4::before{right:25%}
.pakketten{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.pakket{position:relative;background:var(--kaart);border:1px solid var(--kaart-rand);border-radius:20px;padding:34px 30px 32px;display:flex;flex-direction:column}
.pakket h3{font-size:28px;letter-spacing:-.02em;margin-bottom:6px}
.pakket-voor{font-size:15.5px;color:var(--tekst-licht);margin-bottom:22px}
.pakket ul{list-style:none;flex:1;margin-bottom:8px}
.pakket li{position:relative;padding-left:22px;margin-bottom:9px;font-size:15.5px;color:#3E4C49}
.pakket li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--goud)}
.pakket-prijs{font:700 24px var(--kop);color:var(--petrol);margin:0 0 4px;padding-bottom:4px}
.pakket-prijs .vanaf{font:500 15px var(--tekst);letter-spacing:0;color:var(--tekst-licht);margin-right:8px;vertical-align:8px}
.pakket.uit .pakket-prijs .vanaf{color:#C9D0CF}
.pakket-prijs .valuta{font-size:22px;margin-right:4px;vertical-align:14px}
.pakket-prijs:has(.valuta){font-size:48px;letter-spacing:-.03em;line-height:1}
.pakket-prijs .per{font:500 15px var(--tekst);letter-spacing:0;color:var(--tekst-licht);margin-left:8px}
.pakket-looptijd{font-size:14px;color:var(--tekst-licht);margin-bottom:4px}
.pakket ul{border-top:1px solid var(--kaart-rand);padding-top:20px;margin-top:18px}
.pakket li.niet{color:#9AA3A0;text-decoration:line-through;text-decoration-color:rgba(154,163,160,.6)}
.pakket li.niet::before{background:transparent;box-shadow:inset 0 0 0 1.5px #C6CDC9}
.pakket .knop{margin-top:22px}
.pakketten.n4{grid-template-columns:repeat(4,1fr);gap:20px}
.pakketten.n2{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
/* Pakketsecties gecentreerd (Paul, 2 oktober 2026): kop, toelichting en kaarten in het midden. */
.pakketsectie .kopregel{flex-direction:column;align-items:center;text-align:center;gap:18px}
.pakketsectie .kopregel>div{width:100%;display:flex;flex-direction:column;align-items:center}
.pakketsectie .kopregel .boventitel{justify-content:center}
.pakketsectie .kopregel h2{margin-left:auto;margin-right:auto}
.pakketsectie .kopregel p{max-width:560px}
.pakketsectie+.pakketsectie{padding-top:0}
.pakketten.n4 .pakket{padding:30px 24px 28px}
.pakketten.n4 .pakket-voor,.pakketten.n3 .pakket-voor{min-height:3.2em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pakket .knop{width:100%}
.pakket.uit{background:var(--petrol);border-color:var(--petrol)}
.pakket.uit h3,.pakket.uit .pakket-prijs{color:#EEF1F1}
.pakket.uit .pakket-voor,.pakket.uit li{color:#D9DEDE}
.pakket.uit ul{border-top-color:rgba(255,255,255,.18)}
.pakket.uit .per,.pakket.uit .pakket-looptijd{color:#C9D0CF}
.pakket.uit li.niet{color:rgba(217,222,222,.5)}
.pakket.uit li.niet::before{box-shadow:inset 0 0 0 1.5px rgba(217,222,222,.4)}
.pakket-label{position:absolute;top:-13px;left:30px;background:var(--goud);color:var(--inkt);font:600 12.5px var(--tekst);padding:5px 12px;border-radius:999px}
.dienst-links{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dienst-link{display:flex;flex-direction:column;background:var(--kaart);border:1px solid var(--kaart-rand);border-radius:18px;padding:32px 30px;text-decoration:none;transition:border-color .3s,transform .5s cubic-bezier(.2,.85,.2,1)}
.dienst-link:hover{border-color:var(--petrol);transform:translateY(-6px)}
.dienst-link h3{font-size:24px;letter-spacing:-.015em;margin:12px 0 10px}
.dienst-link p{font-size:16px;color:var(--tekst-licht);flex:1;margin-bottom:22px}
.dienst-link .meer{font:600 15px var(--tekst);color:var(--petrol)}
.dienst-link .pijl{color:var(--goud-donker)}
.dienst-link:hover .pijl{transform:translateX(4px)}
.mini-werk{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mini-case{text-decoration:none;display:block}
.mini-case .browser{margin-bottom:20px;transition:border-color .3s}
.mini-case:hover .browser{border-color:var(--petrol)}
.browser-venster.mini{height:260px}
.mini-case .case-scroll{transition:transform 1.2s cubic-bezier(.2,.85,.2,1)}
.mini-case:hover .case-scroll{transform:translateY(calc(-100% + 260px));transition:transform 7s ease-in-out}
.mini-case h3{font-size:22px;letter-spacing:-.015em;margin-bottom:2px}
.mini-case .case-vak{margin-bottom:12px}
.alles-werk{margin-top:36px}
.alles-werk .knop-tekst{color:var(--petrol)}
.alles-werk .pijl{color:var(--goud-donker)}
.faq-inhoud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:80px;align-items:start}
.faq-toel{margin-top:20px;font-size:16.5px;color:var(--tekst-licht)}
.faq-toel .knop-tekst{color:var(--petrol);font-size:16.5px}
.faq-lijst details{border-bottom:1px solid var(--kaart-rand);padding:22px 0}
.faq-lijst details:first-child{border-top:1px solid var(--kaart-rand)}
.faq-lijst summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;font:700 20px/1.3 var(--kop);letter-spacing:-.01em}
.faq-lijst summary::-webkit-details-marker{display:none}
.faq-lijst summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--steen);color:var(--petrol);display:grid;place-items:center;font:500 22px/1 var(--tekst);transition:transform .4s cubic-bezier(.2,.85,.2,1),background .3s}
.faq-lijst details[open] summary::after{transform:rotate(45deg);background:var(--goud);color:var(--inkt)}
.faq-lijst details p{margin-top:12px;font-size:16.5px;color:var(--tekst-licht);max-width:640px}
.chatkeuze{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:72px;align-items:center}
.keuzes{display:flex;flex-direction:column;gap:16px}
.keuze{display:flex;align-items:center;gap:22px;background:var(--kaart);border:1px solid var(--kaart-rand);border-radius:18px;padding:26px 28px;text-decoration:none;transition:border-color .3s,transform .5s cubic-bezier(.2,.85,.2,1)}
.keuze:hover{border-color:var(--petrol);transform:translateX(8px)}
.keuze>span:nth-child(2){flex:1}
.keuze b{display:block;font:700 23px var(--kop);letter-spacing:-.015em;margin-bottom:4px}
.keuze b+span{font-size:15.5px;color:var(--tekst-licht)}
.keuze .pijl{color:var(--goud-donker);font-size:22px}
.keuze-noot{font-size:14px;color:var(--tekst-licht);margin-top:18px}
.case-status{display:inline-block;margin-left:12px;vertical-align:2px;font:600 12px var(--tekst);background:var(--steen);color:var(--petrol);border-radius:999px;padding:4px 11px}
.werk-los{padding-top:72px}
.voet{padding-top:0}
.voet-kolommen{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:48px;padding:72px 0 52px}
.voet-merk .logo{font-size:20px}
.voet-merk .logo img{width:34px;height:34px}
.voet-merk p{margin-top:16px;max-width:320px;line-height:1.6}
.voet-kop{font:600 13px var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--zilver);margin-bottom:14px}
.voet ul{list-style:none}
.voet li{margin-bottom:9px}
.voet-kolommen a{color:#CFD4D5}
.voet-balk{border-top:1px solid var(--lijn-donker);padding-top:26px}

/* ── Band tussen werkwijze en werk ── */
.band{background:var(--diep);color:var(--zilver);overflow:hidden;padding:30px 0}
.band-spoor{display:flex;width:max-content;will-change:transform}
.band-reeks{display:flex;align-items:center;gap:44px;padding-right:44px;flex:none}
.band span{font:700 clamp(40px,6vw,92px)/1 var(--kop);letter-spacing:-.035em;white-space:nowrap}
.band span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.5px var(--zilver)}
.band-zon{width:clamp(28px,3.4vw,50px);height:clamp(28px,3.4vw,50px);flex:none;fill:var(--goud);stroke:var(--goud);stroke-width:2;stroke-linecap:round}

/* ── Beweging (motion.js zet .beweeg; bij prefers-reduced-motion blijft alles stil) ── */
.voortgang{position:fixed;top:0;left:0;right:0;height:3px;background:var(--goud);transform-origin:left;transform:scaleX(0);z-index:80;pointer-events:none}
.beweeg .hero h1 .w,.beweeg .gesplitst .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.beweeg .hero h1 .w>span{display:inline-block;transform:translateY(110%) rotate(5deg);transform-origin:0 100%;transition:transform 1.1s cubic-bezier(.2,.85,.2,1);transition-delay:calc(var(--i,0) * 75ms + 120ms)}
.beweeg.geladen .hero h1 .w>span{transform:none}
.beweeg .hero .boventitel,.beweeg .hero .intro,.beweeg .hero .knoppen,.beweeg .hero .bewijs{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.85,.2,1)}
.beweeg.geladen .hero .boventitel{opacity:1;transform:none;transition-delay:.05s}
.beweeg.geladen .hero .intro{opacity:1;transform:none;transition-delay:.7s}
.beweeg.geladen .hero .knoppen{opacity:1;transform:none;transition-delay:.85s}
.beweeg.geladen .hero .bewijs{opacity:1;transform:none;transition-delay:1s}
.beweeg .hero-foto{opacity:0;transform:translateX(40px) scale(1.04);transition:opacity 1.4s ease .2s,transform 1.8s cubic-bezier(.2,.85,.2,1) .2s}
.beweeg.geladen .hero-foto{opacity:1;transform:none}
.beweeg .hero-foto img,.beweeg .logo img{will-change:transform}
.beweeg .gesplitst .w>span{display:inline-block;transform:translateY(110%);transition:transform .95s cubic-bezier(.2,.85,.2,1);transition-delay:calc(var(--i,0) * 55ms)}
.beweeg .gesplitst.in-beeld .w>span{transform:none}

/* Onthullen: opkomen uit een waas, broertjes na elkaar. Animatie met fill backwards,
   zodat een transform die motion.js later zet (kantelen) niet wordt overschreven. */
.beweeg .onthul{transition:none;opacity:0;transform:none}
.beweeg .onthul.zichtbaar{opacity:1;animation:opkomen 1s cubic-bezier(.2,.85,.2,1) backwards;animation-delay:calc(var(--d,0) * 120ms)}
@keyframes opkomen{from{opacity:0;transform:translateY(40px) scale(.98);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.beweeg .dienst,.beweeg .pakket,.beweeg .kenmerk-kaart{transition:transform .5s cubic-bezier(.2,.85,.2,1),border-color .3s;transform-style:preserve-3d}
.beweeg .dienst .ic{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.beweeg .dienst:hover .ic{transform:translateZ(30px) rotate(-8deg) scale(1.08)}
.beweeg .vinkjes li{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.85,.2,1);transition-delay:calc(var(--d,0) * 150ms + 250ms)}
.beweeg .vinkjes li::before,.beweeg .vinkjes li::after{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--d,0) * 150ms + 450ms)}
.beweeg .vinkjes li::after{transform:rotate(45deg) scale(0)}
.beweeg .probleem-lijst.in-beeld .vinkjes li{opacity:1;transform:none}
.beweeg .probleem-lijst.in-beeld .vinkjes li::before{transform:none}
.beweeg .probleem-lijst.in-beeld .vinkjes li::after{transform:rotate(45deg)}
.beweeg .kenmerken li{opacity:0;transform:translateY(14px) scale(.9);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d,0) * 90ms)}
.beweeg .kenmerken.in-beeld li{opacity:1;transform:none}
.beweeg .stappen::before{transform-origin:left;transform:scaleX(var(--lijn,0));border-top:2px solid var(--goud)}
.beweeg .stap .nr{transform:scale(.55);opacity:.35;transition:transform .6s cubic-bezier(.3,1.7,.5,1),opacity .4s}
.beweeg .stap.aan .nr{transform:none;opacity:1}
.magneet{transition:transform .4s cubic-bezier(.2,.85,.2,1),background .2s}
.beweeg .case-extra li{transition:transform .4s ease}
.beweeg:not(.werk-pin) .case.speelt .case-scroll{animation:siteScroll 16s ease-in-out infinite alternate}
@keyframes siteScroll{0%,8%{transform:none}92%,100%{transform:translateY(calc(-100% + 300px))}}
@media (min-width:761px){@keyframes siteScroll{0%,8%{transform:none}92%,100%{transform:translateY(calc(-100% + min(50vh,500px)))}}}
.beweeg:not(.werk-pin) .case-beeld:hover .telefoon{transform:translateY(-10px) rotate(-3deg)}
.beweeg .telefoon{transition:transform .6s cubic-bezier(.2,.85,.2,1)}
.werk-pin .telefoon{transition:none}

/* Cursor die meekijkt (alleen met een muis) */
.cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:90;pointer-events:none}
.cursor span{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--goud);opacity:0;display:grid;place-items:center;overflow:hidden;font:600 14px var(--tekst);color:var(--inkt);white-space:nowrap;transition:width .4s cubic-bezier(.2,.85,.2,1),height .4s cubic-bezier(.2,.85,.2,1),left .4s cubic-bezier(.2,.85,.2,1),top .4s cubic-bezier(.2,.85,.2,1),opacity .3s}
.cursor.aan span{opacity:.95}
.cursor.link span{width:46px;height:46px;left:-23px;top:-23px;opacity:.3}
.cursor.groot span{width:104px;height:104px;left:-52px;top:-52px;opacity:1}
.beweeg .case-beeld[data-cursor]{cursor:none}

/* ── Grote schermen: de headerfoto komt mee naar binnen, met een zachte overgang aan beide kanten ── */
@media (min-width:1600px){
  .hero-foto{margin-right:-40px}
  .hero-foto img{
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 22%,#000 50%),linear-gradient(to left,transparent 0,#000 18%),linear-gradient(to bottom,transparent 0,#000 12%);-webkit-mask-composite:source-in,source-in;
    mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 22%,#000 50%),linear-gradient(to left,transparent 0,#000 18%),linear-gradient(to bottom,transparent 0,#000 12%);mask-composite:intersect,intersect}
}


/* ── Tafereel in de header van de homepage (2 oktober 2026) ──
   Naar het goedgekeurde prototype pack-header-voorbeeld.html. Beweging in tafereel.js.
   z-index op de header in plaats van isolation: isolation alleen zou het vaste menu (dat in de header
   staat) onder de inhoud verderop laten schuiven; met z-index blijft de header met menu erboven. */
:root{--goud-licht:#E2C787;--kaart-donker:rgba(14,50,47,.82)}
.hero.met-tafereel{z-index:50;overflow:clip}
.hero>.licht{position:absolute;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:0;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(226,199,135,.22),rgba(192,156,78,.08) 45%,transparent 70%);transform:translate3d(72vw,300px,0)}
.hero.met-tafereel .hero-inhoud{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
/* Kaartjes schalen mee met de breedte van het tafereel (container-eenheden), zodat ze op elke breedte
   dezelfde opbouw houden en niet over elkaars tekst schuiven. 2.414cqi = 14px bij 580px breed. */
.scene{position:relative;width:100%;max-width:580px;aspect-ratio:1/1.2;justify-self:end;perspective:1100px;margin:32px 0;container-type:inline-size}
.scene .laag{position:absolute;will-change:transform;transform-style:preserve-3d}
.scene .zon{left:-22%;top:-24%;width:144%;aspect-ratio:1;opacity:.62;pointer-events:none}
.scene .zon img{width:100%;height:100%;display:block;animation:zon-draai 90s linear infinite}
@keyframes zon-draai{to{transform:rotate(360deg)}}
.scene .kaart{--lit:.4;background:var(--kaart-donker);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--goud) calc(var(--lit) * 100%),var(--lijn-donker));border-radius:1.3em;padding:1.15em 1.3em 1.3em;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.55),0 0 calc(var(--lit) * 46px) -10px rgba(226,199,135,calc(var(--lit) * .55));
  color:var(--tekst-donker);font-size:clamp(10.5px,2.414cqi,14px);line-height:1.4}
.scene .stap{display:inline-flex;align-items:center;gap:.7em;font-size:.82em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--goud-licht);margin-bottom:1.05em}
.scene .stap i{font-style:normal;display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:50%;background:var(--goud);color:var(--inkt);letter-spacing:0;font-size:1em}
.scene .k-zoek,.scene .k1{left:0;top:0;width:74%}
.scene .zoekbalk{display:flex;align-items:center;gap:10px;background:rgba(245,243,238,.08);border:1px solid var(--lijn-donker);border-radius:999px;padding:.65em 1em;color:#fff;font-weight:500;min-height:2.85em}
.scene .zoekbalk svg{width:1.15em;height:1.15em;flex:none;color:var(--zilver)}
.scene .typcursor{width:1.5px;height:1.1em;background:var(--goud-licht);animation:knipper 1s steps(1) infinite;margin-left:-6px}
@keyframes knipper{50%{opacity:0}}
.scene .resultaten{list-style:none;margin:.85em 0 0;padding:0;display:grid;gap:.57em}
.scene .resultaten li{display:grid;grid-template-columns:1.6em 1fr;gap:.7em;align-items:center;padding:.57em .7em;border-radius:.85em}
.scene .resultaten .top{background:rgba(192,156,78,.16)}
.scene .resultaten .top b{color:#fff;display:block}
.scene .resultaten .top small{color:var(--goud-licht);font-size:.86em}
.scene .pin{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;font-size:.8em;font-weight:600;background:var(--goud);color:var(--inkt)}
.scene .resultaten .rest .pin{background:transparent;border:1px solid var(--lijn-donker);color:var(--zilver)}
.scene .streep{height:.57em;border-radius:.3em;background:rgba(176,182,185,.2);width:72%}
.scene .resultaten li:nth-child(3) .streep{width:54%}
.scene .k-chat,.scene .k2{right:0;top:45.5%;width:64%}
.scene .bel{max-width:88%;padding:.65em .85em;border-radius:1em;margin-top:.57em}
.scene .bel.klant{background:rgba(245,243,238,.1);border-bottom-left-radius:4px}
.scene .bel.mindy{background:var(--goud);color:var(--inkt);margin-left:auto;border-bottom-right-radius:4px;font-weight:500}
.scene .tijd{float:right;font-size:.82em;color:var(--zilver);font-weight:500;margin-top:2px}
.scene .k-klant,.scene .k3{left:7%;bottom:0;width:62%}
.scene .k-klant p,.scene .k3 p{margin:0}
.scene .k-klant b,.scene .k3 b{color:#fff;font-size:1.07em;display:block;margin-bottom:.15em}
.beweeg .scene{opacity:0;transform:translateX(40px) scale(.97);transition:opacity 1.4s ease .25s,transform 1.8s cubic-bezier(.2,.85,.2,1) .25s}
.beweeg.geladen .scene{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.scene .zon img,.scene .typcursor{animation:none}}
@media (max-width:1100px){.hero.met-tafereel .hero-inhoud{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}.scene{aspect-ratio:1/1.28}}
@media (max-width:900px){
  .hero.met-tafereel .hero-inhoud{grid-template-columns:minmax(0,1fr)}
  .scene{justify-self:center;max-width:520px;margin:8px auto 48px}
}
@media (max-width:520px){
  .scene{aspect-ratio:1/1.58}
  .scene .k-zoek,.scene .k1{width:86%}
  .scene .k-chat,.scene .k2{width:76%;top:42%}
  .scene .k-klant,.scene .k3{width:78%;left:4%}
}


/* Onderdelen voor de taferelen op de losse pagina's (taferelen.py). Alles in em, zodat het meeschaalt. */
.hero.sub.met-tafereel .hero-tekst{padding-bottom:48px}
.hero.sub .scene{max-width:460px;margin:40px 0}
@media (max-width:1100px){.hero.sub .scene{aspect-ratio:1/1.4}}
@media (max-width:900px){.hero.sub .scene{margin:8px auto 48px}}
@media (max-width:520px){.hero.sub .scene{aspect-ratio:1/1.7}}
.scene .kaart p{margin:0}
.scene .kaart b{color:#fff}
.scene .klein{font-size:.86em;color:var(--zilver);margin-top:.6em}
.scene .k1 p:not(.klein):not(.gesponsord) b,.scene .k2 p:not(.klein):not(.sterren) b{display:block;margin-bottom:.15em}
.scene .mb{border:1px solid var(--lijn-donker);border-radius:.8em;overflow:hidden;background:rgba(245,243,238,.04)}
.scene .mb-balk{display:flex;align-items:center;gap:.35em;padding:.5em .7em;border-bottom:1px solid var(--lijn-donker)}
.scene .mb-balk i{width:.55em;height:.55em;border-radius:50%;background:rgba(176,182,185,.35)}
.scene .mb-balk i:first-child{background:var(--goud)}
.scene .mb-balk span{flex:1;height:.7em;border-radius:1em;background:rgba(176,182,185,.15);margin-left:.6em}
.scene .mb-hero{padding:1em;display:grid;gap:.5em;background:rgba(21,80,73,.6)}
.scene .mb-r1{height:.9em;width:70%;border-radius:.3em;background:rgba(238,241,241,.8)}
.scene .mb-r2{height:.6em;width:88%;border-radius:.3em;background:rgba(176,182,185,.35)}
.scene .mb-knop{height:1.6em;width:42%;border-radius:1em;background:var(--goud);margin-top:.3em;animation:knop-puls 2.6s ease-in-out infinite}
@keyframes knop-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.scene .mb-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;padding:.8em 1em 1em}
.scene .mb-rij span{height:2.6em;border-radius:.5em;background:rgba(176,182,185,.14)}
.scene .schermen{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;align-items:flex-end;gap:.6em;font-size:.82em;color:var(--zilver)}
.scene .schermen li{display:grid;justify-items:center;gap:.5em}
.scene .schermen b{display:block;border:2px solid var(--goud-licht);border-radius:.35em}
.scene .sc-desk{width:4.2em;height:2.8em}.scene .sc-tab{width:2.6em;height:3.3em}.scene .sc-tel{width:1.6em;height:2.9em}
.scene .post-beeld{aspect-ratio:16/7;border-radius:.8em;background:var(--petrol);display:grid;place-items:center;overflow:hidden;margin-bottom:.7em}
.scene .post-beeld.breed{aspect-ratio:16/6}
.scene .k1 .post-beeld{aspect-ratio:16/6}.scene .k2 .post-beeld{aspect-ratio:16/5;margin-bottom:.4em}
.scene .post-beeld img{width:26%;height:auto;opacity:.9;animation:zon-draai 40s linear infinite}
.scene .post-acties{display:flex;align-items:center;gap:.6em;font-size:.82em;color:var(--zilver);margin-top:.6em}
.scene .hart{width:.8em;height:.8em;background:var(--goud);transform:rotate(45deg);position:relative;flex:none;animation:hart 1.8s ease-in-out infinite;margin:.2em .3em 0}
.scene .hart::before,.scene .hart::after{content:"";position:absolute;width:.8em;height:.8em;border-radius:50%;background:var(--goud)}
.scene .hart::before{left:-.4em;top:0}.scene .hart::after{top:-.4em;left:0}
@keyframes hart{0%,100%{transform:rotate(45deg) scale(1)}15%{transform:rotate(45deg) scale(1.25)}30%{transform:rotate(45deg) scale(1)}}
.scene .balken{display:flex;align-items:flex-end;gap:.5em;height:6em;padding-top:.4em}
.scene .balken span{flex:1;border-radius:.3em .3em 0 0;background:rgba(192,156,78,.45);transform-origin:bottom;animation:balk 3.2s ease-in-out infinite alternate}
.scene .balken span:nth-child(1){height:30%}.scene .balken span:nth-child(2){height:45%;animation-delay:.2s}.scene .balken span:nth-child(3){height:38%;animation-delay:.4s}
.scene .balken span:nth-child(4){height:62%;animation-delay:.6s}.scene .balken span:nth-child(5){height:74%;animation-delay:.8s}.scene .balken span:nth-child(6){height:96%;background:var(--goud);animation-delay:1s}
@keyframes balk{from{transform:scaleY(.82)}to{transform:scaleY(1)}}
.scene .zoekbalk.klein{min-height:2.4em;font-size:.92em}
.scene .resultaat-kort{display:flex;align-items:center;gap:.7em;margin-top:.8em;padding:.5em .7em;border-radius:.8em;background:rgba(192,156,78,.16)}
.scene .agenda{display:grid;grid-template-columns:repeat(7,1fr);gap:.35em;text-align:center;font-size:.78em;color:var(--zilver)}
.scene .agenda i{height:2.2em;border-radius:.4em;background:rgba(176,182,185,.12)}
.scene .agenda i.post-dag{background:var(--goud);animation:knop-puls 2.6s ease-in-out infinite}
.scene .gesponsord{font-size:.75em;letter-spacing:.06em;text-transform:uppercase;color:var(--zilver);margin-bottom:.5em}
.scene .mini-knop{display:inline-block;margin-top:.7em;padding:.4em 1em;border-radius:1em;background:var(--goud);color:var(--inkt);font-weight:600;font-size:.86em}
.scene .kaartje{height:4.2em;border-radius:.8em;position:relative;overflow:hidden;background-color:rgba(21,80,73,.55);
  background-image:linear-gradient(90deg,rgba(176,182,185,.10) 1px,transparent 1px),linear-gradient(rgba(176,182,185,.10) 1px,transparent 1px);background-size:1.6em 1.6em}
.scene .mappin{position:absolute;left:50%;top:50%;width:1.5em;height:1.5em;margin:-1.2em 0 0 -.75em;border-radius:50% 50% 50% 0;background:var(--goud);transform:rotate(-45deg);animation:pin 2.4s ease-in-out infinite}
.scene .mappin::after{content:"";position:absolute;left:.45em;top:.45em;width:.6em;height:.6em;border-radius:50%;background:var(--diep)}
@keyframes pin{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(.2em,-.2em)}}
.scene .sterren{color:var(--goud);letter-spacing:.15em;margin-top:.6em;font-size:1.05em}
.scene .golf{display:flex;align-items:center;gap:.35em;height:2.4em;margin-top:.7em}
.scene .golf span{flex:none;width:.35em;height:30%;border-radius:1em;background:var(--goud);animation:golf 1.1s ease-in-out infinite}
.scene .golf span:nth-child(2n){animation-delay:.15s}.scene .golf span:nth-child(3n){animation-delay:.3s}.scene .golf span:nth-child(4n){animation-delay:.45s}
@keyframes golf{0%,100%{height:25%}50%{height:100%}}
.scene .afspraak{display:flex;align-items:center;gap:.9em}
.scene .afspraak b{display:block}
.scene .datum{display:grid;place-items:center;align-content:center;width:3em;height:3.2em;border-radius:.6em;background:var(--goud);color:var(--inkt);font-weight:700;font-size:1.05em;line-height:1.05;flex:none}
.scene .datum b{color:var(--inkt);font-size:.7em;text-transform:uppercase;letter-spacing:.06em}
.scene .werk-mini{height:9em;border-radius:.7em;overflow:hidden;border:1px solid var(--lijn-donker)}
.scene .werk-mini img{width:100%;height:auto;display:block;animation:werk-scroll 14s ease-in-out infinite alternate}
@keyframes werk-scroll{0%,10%{transform:none}90%,100%{transform:translateY(calc(-100% + 9em))}}
.scene .bel.links{margin-left:0;margin-right:auto}.scene .bel.rechts{margin-left:auto;margin-right:0}
.scene .vinkregel{display:flex;align-items:center;gap:.8em}
.scene .vinkregel svg{width:2em;height:2em;padding:.4em;border-radius:50%;background:var(--goud);color:var(--inkt);flex:none}
.scene .vinkregel b{display:block}
@media (prefers-reduced-motion:reduce){.scene .mb-knop,.scene .post-beeld img,.scene .hart,.scene .balken span,.scene .agenda i.post-dag,.scene .mappin,.scene .golf span,.scene .werk-mini img{animation:none}}

/* ── Tablet ── */
@media (max-width:1100px){
  :root{--rand:40px}
  .hero-inhoud{grid-template-columns:minmax(0,1fr) 360px}
  .hero-foto{height:600px}
  .diensten,.stappen{grid-template-columns:repeat(2,1fr);gap:20px}
  .case{grid-template-columns:1fr;gap:28px;width:min(640px,78vw)}
  .kenmerk-grid,.pakketten,.pakketten.n4,.dienst-links,.mini-werk,.stappen-4{grid-template-columns:repeat(2,1fr)}
  .tb{gap:48px}
  .faq-inhoud,.chatkeuze{grid-template-columns:1fr;gap:40px}
  .chatkeuze .plek{max-width:420px}
  .voet-kolommen{grid-template-columns:1fr 1fr}
  .hero.sub.met-foto .hero-inhoud{grid-template-columns:minmax(0,1fr) 340px}
  .hero.sub.met-foto .hero-foto{height:520px}
  .stappen::before{display:none}
  .stap{padding-right:0;padding-bottom:20px}
  .over{grid-template-columns:1fr;gap:40px}
  .probleem-inhoud{gap:40px}
  .over-foto{max-width:420px}
}

/* ── Telefoon ── */
/* ── Beeldvullend menu vanaf tabletbreedte (2 oktober 2026): onder 1100 px past het gewone menu niet. ── */
@media (max-width:1100px){
  .nav ul{display:none}
  .nav .knop-klein{display:none}
  .menu-knop{display:flex}
  /* Beeldvullend menu (2 oktober 2026): groeit als cirkel vanuit de knop, links schuiven er na elkaar in. */
  .nav .logo,.menu-knop{position:relative;z-index:62}
  .nav ul#menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:61;margin:0;gap:0;background:var(--diep);
    padding:112px var(--rand) calc(32px + env(safe-area-inset-bottom));overflow-y:auto;
    clip-path:circle(0px at calc(100% - var(--rand) - 22px) 38px);visibility:hidden;
    transition:clip-path .65s cubic-bezier(.7,0,.25,1),visibility 0s linear .65s}
  .nav.open ul#menu{clip-path:circle(150% at calc(100% - var(--rand) - 22px) 38px);visibility:visible;
    transition:clip-path .8s cubic-bezier(.7,0,.25,1),visibility 0s}
  .nav ul#menu li{border-top:1px solid var(--lijn-donker);opacity:0;transform:translateY(28px);
    transition:opacity .25s ease,transform .3s ease}
  .nav.open ul#menu li{opacity:1;transform:none;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.85,.2,1);transition-delay:calc(.22s + var(--i,0) * 60ms)}
  .nav ul#menu li:nth-child(1){--i:0}.nav ul#menu li:nth-child(2){--i:1}.nav ul#menu li:nth-child(3){--i:2}.nav ul#menu li:nth-child(4){--i:3}.nav ul#menu li:nth-child(5){--i:4}.nav ul#menu li:nth-child(6){--i:5}.nav ul#menu li:nth-child(7){--i:6}
  .nav ul#menu a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:700 clamp(28px,8vw,38px)/1.1 var(--kop);letter-spacing:-.025em;color:var(--zilver)}
  .nav ul#menu a::after{content:"\2192";font:400 22px var(--tekst);color:var(--goud);opacity:.8}
  .nav ul#menu a[aria-current]{color:var(--goud);box-shadow:none}
  .nav ul#menu li.menu-cta{display:block;border-top:0;margin-top:auto;padding-top:32px}
  .nav ul#menu li.menu-cta a{display:flex;justify-content:center;font:600 17px var(--tekst);letter-spacing:0;color:var(--inkt);padding:0;width:100%;max-width:none}
  .nav ul#menu li.menu-cta a::after{content:none}
  body.menu-open{overflow:hidden}
  body.menu-open .chat-knop{display:none}
}

@media (max-width:760px){
  :root{--rand:22px}
  body{font-size:16px}
  .nav{height:76px;gap:16px}
  .hero{padding-top:76px}
  .hero .nav.gescrold{height:64px}
  .hero-inhoud{grid-template-columns:1fr;min-height:0}
  .hero-tekst{padding:32px 0 8px}
  .hero h1{font-size:clamp(38px,11vw,48px);max-width:none;margin-bottom:20px}
  .hero .intro{font-size:17.5px;margin-bottom:28px}
  .knoppen{gap:18px;margin-bottom:28px}
  .knop{height:52px;padding:0 24px;width:100%;max-width:360px}
  .bewijs{flex-direction:column;gap:14px;padding-top:20px}
  .bewijs li{max-width:none}
  .hero-foto{justify-self:center;margin:8px auto 0;height:auto;width:min(100%,360px)}
  .hero-foto img{width:100%;height:auto;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);-webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-composite:add}
  .sectie{padding-top:72px;padding-bottom:72px}
  .sectie h2{font-size:clamp(30px,8.5vw,40px)}
  .kopregel{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px}
  .diensten,.stappen{grid-template-columns:1fr;gap:16px}
  .werk-rij{gap:28px}
  .kenmerk-grid,.pakketten,.pakketten.n4,.pakketten.n2,.dienst-links,.mini-werk,.stappen-4{grid-template-columns:1fr}
  .tb{grid-template-columns:1fr;gap:32px}
  .tb.om .plek{order:0}
  .hero.sub .hero-tekst{padding:28px 0 64px}
  .hero.sub h1{font-size:clamp(36px,10vw,46px)}
  .hero.sub.met-foto .hero-inhoud{grid-template-columns:1fr}
  .hero.sub.met-foto .hero-foto{height:auto}
  .hero.sub.met-foto .hero-tekst{padding-bottom:8px}
  .pakketten{gap:30px}
  .pakketten.n4 .pakket-voor{min-height:0}
  .keuze{padding:22px 20px;gap:16px}
  .keuze b{font-size:20px}
  .voet-kolommen{grid-template-columns:1fr;gap:32px;padding:56px 0 36px}
  .werk-los{padding-top:48px}
  .faq-lijst summary{font-size:18px}
  .case{width:86vw;gap:22px}
  .browser-venster{height:300px}
  .telefoon{right:-8px;width:30%;min-width:0;border-radius:20px;padding:5px}
  .telefoon img{border-radius:15px}
  .werk-teller{padding-bottom:64px}
  .werk-balk{flex-basis:120px}
  .probleem-inhoud{grid-template-columns:1fr;gap:32px}
  .probleem-lijst{padding:28px 24px 30px}
  .dienst{padding:28px 24px 30px}
  .slot{padding-top:64px;padding-bottom:64px}
  .slot-inhoud{flex-direction:column;align-items:flex-start;gap:28px}
  .slot .zonbg{right:-200px;bottom:-380px}
  .voet-balk{flex-direction:column;gap:8px}
}

/* ── De chat (Mindy) ── vlak, in de huisstijl: geen schaduw, wel een rand */
.chat-knop{position:fixed;right:24px;bottom:24px;z-index:70;height:56px;border:none;cursor:pointer;border-radius:999px;background:var(--goud);color:var(--inkt);display:flex;align-items:center;gap:10px;padding:0 22px 0 8px;font:600 15px var(--tekst)}
.chat-knop:hover{background:#B38F42}
.chat-knop.open{width:56px;padding:0;justify-content:center;background:var(--petrol);color:#fff}
.chat-knop.open .lbl{display:none}
.chat-gezicht{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;flex:none}
.chat-paneel .chat-gezicht{width:36px;height:36px}
/* Het paneel start dicht via de klasse .open; nooit style.display gebruiken (CSP). */
.chat-paneel{position:fixed;right:24px;bottom:92px;z-index:70;width:372px;background:var(--kaart);border-radius:18px;overflow:hidden;border:1px solid var(--kaart-rand);display:none;flex-direction:column}
.chat-paneel.open{display:flex}
.chat-paneel .kop{background:var(--diep);padding:14px 16px;display:flex;align-items:center;gap:11px}
.chat-paneel .kop>div{flex:1}
.chat-paneel .nm{color:#fff;font:700 16px var(--kop)}
.chat-paneel .st{color:var(--tekst-donker);font-size:12.5px;display:flex;align-items:center;gap:6px;margin-top:2px}
.chat-paneel .kop .stip{width:7px;height:7px;box-shadow:none}
.chat-paneel .kop button{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;color:#fff}
.chat-berichten{padding:16px;display:flex;flex-direction:column;gap:10px;height:300px;overflow-y:auto;background:var(--ivoor)}
.msg{max-width:84%;font-size:15px;line-height:1.5;padding:10px 13px}
.msg.in{align-self:flex-start;background:#fff;color:var(--inkt);border:1px solid var(--kaart-rand);border-radius:2px 14px 14px 14px}
.msg.uit{align-self:flex-end;background:var(--petrol);color:#fff;border-radius:14px 2px 14px 14px}
.msg.tikt span{display:inline-block;font-size:20px;line-height:1;color:var(--petrol);animation:tikken 1.2s infinite}
.msg.tikt span:nth-child(2){animation-delay:.2s}
.msg.tikt span:nth-child(3){animation-delay:.4s}
@keyframes tikken{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chat-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;background:var(--ivoor)}
.chip{background:#fff;border:1px solid var(--kaart-rand);color:var(--petrol);font:600 13px var(--tekst);padding:7px 13px;border-radius:999px;cursor:pointer}
.chip:hover{background:var(--steen)}
.chat-voet{border-top:1px solid var(--kaart-rand);padding:12px;display:flex;gap:8px;background:var(--kaart)}
.chat-voet input{flex:1;border:1px solid #C9CFCB;border-radius:999px;padding:10px 15px;font:400 15px var(--tekst);outline:none;color:var(--inkt);background:#fff;min-width:0}
.chat-voet input:focus{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(21,80,73,.14)}
.chat-voet button{width:40px;height:40px;border-radius:50%;background:var(--goud);color:var(--inkt);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.chat-voet button:hover{background:#B38F42}
/* Op een telefoon en een tablet vult het gesprek het hele scherm; sluiten kan
   alleen met het kruisje in de kop. Zie het sjabloon Chat-Mindy-Beeldvullend-Mobiel. */
@media (max-width:900px),(pointer:coarse) and (max-width:1200px){
  .chat-paneel{left:0;right:0;bottom:auto;top:var(--chat-top,0px);width:100%;max-height:none;border-radius:0;border:none;z-index:9999;height:100vh;height:100dvh;height:var(--chat-hoog,100dvh)}
  .chat-berichten{height:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
  .chat-voet input{font-size:16px}  /* onder de 16px zoomt iOS bij het typen in */
  .chat-knop.open{display:none}
  body.chat-open{overflow:hidden}
}
/* Wolkje boven de chatknop na het sluiten van een gestart gesprek (2 oktober 2026). Vlak, geen schaduw. */
.chat-wolk{position:fixed;right:24px;bottom:92px;z-index:69;max-width:250px;display:flex;align-items:flex-start;gap:4px;
  background:var(--kaart);border:1px solid var(--kaart-rand);border-radius:16px 16px 4px 16px;padding:4px 4px 4px 0;
  opacity:0;transform:translateY(12px) scale(.94);transform-origin:bottom right;pointer-events:none;visibility:hidden;
  transition:opacity .35s ease,transform .5s cubic-bezier(.2,.85,.2,1),visibility 0s linear .5s}
.chat-wolk.zichtbaar{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.5,.5,1),visibility 0s}
.chat-wolk::after{content:"";position:absolute;right:26px;bottom:-7px;width:12px;height:12px;background:var(--kaart);border-right:1px solid var(--kaart-rand);border-bottom:1px solid var(--kaart-rand);transform:rotate(45deg)}
.chat-wolk .wolk-tekst{flex:1;border:0;background:transparent;cursor:pointer;text-align:left;padding:10px 4px 10px 14px;font:500 14.5px/1.4 var(--tekst);color:var(--inkt)}
.chat-wolk .wolk-tekst:hover{color:var(--petrol)}
.chat-wolk .wolk-sluit{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--tekst-licht);cursor:pointer;display:grid;place-items:center}
.chat-wolk .wolk-sluit:hover{background:var(--steen)}
.chat-wolk .wolk-sluit svg{width:14px;height:14px}
body.menu-open .chat-wolk,body.chat-open .chat-wolk{display:none}
@media (max-width:760px){.chat-wolk{bottom:88px;max-width:230px}}
@media (prefers-reduced-motion:reduce){.msg.tikt span{animation:none}}
/* Mobiel menu zonder beweging: alleen een korte fade. Alleen tot 1100 px, anders verdwijnt het desktopmenu. */
@media (prefers-reduced-motion:reduce) and (max-width:1100px){.nav ul#menu,.nav ul#menu li,.menu-knop span{transition:opacity .2s ease !important}.nav ul#menu{clip-path:none !important}.nav:not(.open) ul#menu{opacity:0}.nav ul#menu li{transform:none !important}}