/* Tegelzetbedrijf Noord-Holland. Creme en zwart, een lettertype (Geist), drie gewichten.
   Lettergroottes: 14 / 17 / 20 / 24 / h2 / h1. Geen labels boven koppen, geen nummering. */
@font-face{font-family:Geist;src:url(fonts/geist.woff2) format("woff2");font-weight:200 600;font-style:normal;font-display:swap}

:root{
  --cream:#f4f1eb;--cream-2:#ebe6dc;--paper:#fff;--soft:#f3f2ef;--ink:#151515;--ink-2:#1d1c1a;
  --mute:rgba(21,21,21,.7);--line:rgba(21,21,21,.12);
  --on-dark:#f4f1eb;--on-dark-mute:rgba(244,241,235,.66);--on-dark-line:rgba(244,241,235,.16);
  --pad:clamp(20px,4.17vw,150px);--max:1760px;--sec:clamp(96px,12vw,168px);
  --ease:cubic-bezier(.22,1,.36,1);--hdr:80px;
}
/* Breedte zoals Bou (gemeten 14 okt): marge 4,17% van de schermbreedte (60 px op 1440), inhoud maximaal 1760 px.
   De oude, smalle opzet (1240 px) blijft te bekijken met ?smal achter het adres. */
.smal{--pad:clamp(20px,5.6vw,72px);--max:1240px}
.smal .say{font-size:clamp(30px,3.6vw,52px)}
@media (min-width:641px){.smal .cases{gap:clamp(36px,4vw,56px) clamp(16px,1.8vw,24px)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Geist,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--cream);padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}
.ic{width:18px;height:18px;flex:none}

h2{font-weight:300;font-size:clamp(36px,4.8vw,64px);line-height:1.04;letter-spacing:-.035em;max-width:16ch;text-wrap:balance}
h3{font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.lead{font-size:20px;line-height:1.55;color:var(--mute);max-width:36em}

/* Knoppen: label en icoon als twee tegels, met een voeg ertussen. Hover: de vulling komt van onder. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:stretch;height:56px;font-size:15px;font-weight:500;letter-spacing:.005em;text-decoration:none;border-radius:2px;transition:color .5s var(--ease),border-color .5s var(--ease)}
.btn>span{display:flex;align-items:center;min-width:0;padding:0 24px;white-space:nowrap}
@media (max-width:380px){.btn>span{padding:0 16px;white-space:normal;line-height:1.25}}
.btn>i{display:grid;place-items:center;width:56px;flex:none;border-left:1px solid;border-color:inherit;transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.btn>i .ic{transition:transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover>i .ic{transform:translateX(3px)}
.btn-cream{background:var(--cream);color:var(--ink);--fill:#fff;border-color:transparent}
.btn-cream>i{background:var(--ink);color:var(--cream)}
.btn-ghost{border:1px solid rgba(244,241,235,.62);color:var(--on-dark);--fill:var(--cream)}
.btn-ghost:hover{color:var(--ink);border-color:var(--cream)}
.btn-ink{background:var(--ink);color:var(--cream);--fill:#2a2826;border-color:rgba(244,241,235,.16)}
.btn-out{border:1px solid rgba(21,21,21,.22);color:var(--ink);--fill:var(--ink)}
.btn-out:hover{color:var(--cream);border-color:var(--ink)}
.btn:hover .i-wa{background:#25d366;color:#fff}

/* Header (naar Bou, gemeten 14 okt): bovenaan doorzichtig over de foto. Zodra je scrolt wordt hij een witte balk
   met ronde onderhoeken die altijd mee blijft gaan (Seth 14 okt: niet wegschuiven zoals bij Bou). Altijd 80 px hoog, zodat er straks
   een logo in past. Links het merk, in het midden het menu, rechts "Gratis offerte" met een rond knopje. */
.hdr{--hm:clamp(8px,1vw,20px);position:fixed;top:0;left:var(--hm);right:var(--hm);z-index:50;color:var(--on-dark);border-radius:0 0 20px 20px;background:rgba(255,255,255,0);transition:transform .55s var(--ease),background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;height:var(--hdr);max-width:calc(var(--max) + 2*(var(--pad) - var(--hm)));padding:0 calc(var(--pad) - var(--hm))}
.hdr.solid{background:#fff;color:var(--ink);box-shadow:0 14px 34px -22px rgba(0,0,0,.32)}
.sub .hdr{color:var(--ink)}
.brand{justify-self:start;display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;line-height:1.1}
.brand-mark{width:36px;height:36px;flex:none;display:block}
.brand-t{display:flex;flex-direction:column;justify-content:center}
.brand-t span:first-child{font-size:17px;font-weight:500;letter-spacing:-.01em}
.brand-t span:last-child{font-size:14px;font-weight:400;opacity:.7}
.nav{display:flex;gap:clamp(24px,2.4vw,46px);justify-self:center}
.nav a{font-size:16px;font-weight:400;text-decoration:none;opacity:.88;position:relative;padding:6px 0;transition:opacity .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after{transform:scaleX(1)}
.hdr-cta{justify-self:end;display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:450;text-decoration:none;white-space:nowrap}
.hdr-cta i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--on-dark);color:var(--ink);transition:transform .45s var(--ease),background-color .4s var(--ease),color .4s var(--ease)}
.hdr-cta i .ic{width:15px;height:15px}
.hdr.solid .hdr-cta i,.sub .hdr .hdr-cta i,.menu-open .hdr .hdr-cta i{background:var(--ink);color:#fff}
.hdr-cta:hover i,.hdr-cta:focus-visible i{transform:translateX(4px)}
.burger{display:none;width:44px;height:44px;position:relative;margin-right:-10px}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:1020px){.nav{display:none}.burger{display:block}.hdr-in{display:flex;gap:20px}.brand{margin-right:auto}}
@media (max-width:560px){.hdr-cta{display:none}.hdr-in{gap:16px}}

.menu{position:fixed;inset:0;z-index:45;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--hdr) + 28px) var(--pad) calc(28px + env(safe-area-inset-bottom))}
@media (max-height:650px){.menu{justify-content:flex-start}.menu-foot{margin-top:24px;flex:none}}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font-size:clamp(30px,8vw,44px);font-weight:300;letter-spacing:-.03em;line-height:1.2;padding:8px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.menu-foot{display:flex;flex-direction:column;gap:12px}
.menu nav a:first-child{border-top:1px solid var(--line)}
.menu-foot .btn{width:100%;justify-content:space-between}
.menu-open .hdr{background:var(--paper);color:var(--ink);box-shadow:none}
.menu-open .wa{opacity:0;pointer-events:none}
.motion .menu.show nav a{animation:up .6s var(--ease) both}
.motion .menu.show nav a:nth-child(2){animation-delay:.04s}.motion .menu.show nav a:nth-child(3){animation-delay:.08s}
.motion .menu.show nav a:nth-child(4){animation-delay:.12s}.motion .menu.show nav a:nth-child(5){animation-delay:.16s}.motion .menu.show nav a:nth-child(6){animation-delay:.2s}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Hero. Desktop: drie foto's met een voeg ertussen, er wisselt er telkens een. Telefoon: één vaste foto. */
.hero{position:relative;min-height:max(620px,100svh);display:flex;flex-direction:column;justify-content:flex-end;color:var(--on-dark);background:#0d0d0d;overflow:hidden}
.panes{position:absolute;inset:0;z-index:0;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#0d0d0d}
.pane,.hero-m{position:relative;margin:0;overflow:hidden;min-width:0}
.pane img,.hero-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos)}
.pane img.in{clip-path:inset(100% 0 0 0);animation:wipe 1.4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.hero-m{display:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(14,12,10,.28),rgba(14,12,10,.28)),
  linear-gradient(180deg,rgba(14,12,10,.5) 0%,rgba(14,12,10,0) 20%),
  linear-gradient(90deg,rgba(14,12,10,.84) 0%,rgba(14,12,10,.66) 42%,rgba(14,12,10,.3) 62%,rgba(14,12,10,.06) 82%,rgba(14,12,10,0) 100%),
  linear-gradient(0deg,rgba(14,12,10,.7) 0%,rgba(14,12,10,0) 45%)}
.hero-in{position:relative;z-index:2;padding-bottom:clamp(88px,13vh,140px)}
.hero h1,.hero-in p{text-shadow:0 1px 28px rgba(10,9,8,.45)}
.hero h1{font-weight:250;font-size:clamp(44px,5.8vw,80px);line-height:1.02;letter-spacing:-.035em;max-width:13ch}
.hero h1 span{display:block;text-wrap:balance}
.hero h1 strong{font-weight:560}
.hero-in p{margin-top:26px;font-size:20px;line-height:1.5;max-width:21em;color:rgba(244,241,235,.86)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.motion .h-in{animation:up 1s var(--ease) both}
.motion .hero-in p.h-in{animation-delay:.12s}.motion .hero-cta.h-in{animation-delay:.22s}
@media (max-width:700px),(max-aspect-ratio:4/5){
  /* Ook staande tablets (15 okt): drie panelen van ~270 px breed toonden maar 14-31% van elke foto.
     De marmeren gang groot en bijna volledig; de tekst krijgt een eigen vlak en bedekt de vloer niet. */
  .panes{display:none}
  .hero{min-height:0;padding-top:min(118vw,72svh);justify-content:initial}
  .hero-m{display:block;position:absolute;inset:0 0 auto;height:min(118vw,72svh)}
  .hero::after{bottom:auto;height:min(118vw,72svh);background:linear-gradient(180deg,rgba(14,12,10,.55),transparent 28%,transparent 82%,#151515)}
  .hero-in{background:#151515;padding-top:30px;padding-bottom:72px}
  .hero h1{font-size:clamp(36px,10.4vw,52px)}
  .hero-in p{font-size:17px;margin-top:18px}
  .hero-cta{margin-top:28px}.hero-cta .btn{flex:1 1 140px;justify-content:center}.hero-cta .btn>i{display:none}
}

/* Staande tablet (15 okt): foto zo hoog dat kop en knoppen nog in het eerste scherm passen (tekstblok ~420 px). */
@media (min-width:701px) and (max-aspect-ratio:4/5){
  .hero{padding-top:min(118vw,calc(100svh - 460px))}
  .hero-m,.hero::after{height:min(118vw,calc(100svh - 460px))}
}

/* Secties */
.sec{padding:var(--sec) 0}
.motion .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.motion .rv.in{opacity:1;transform:none}

/* Grote zin in licht gewicht met een paar zware woorden (richting Bou) */
.say{font-weight:250;font-size:clamp(30px,3.6vw,60px);line-height:1.1;letter-spacing:-.03em;max-width:none;text-wrap:balance}
.say strong{font-weight:560}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid rgba(21,21,21,.2);border-radius:999px;font-size:14px;font-weight:450;text-decoration:none;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.pill::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;transition:transform .35s var(--ease)}
.pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill:hover::after{transform:scale(1.6)}

.intro{padding:clamp(96px,13vw,184px) 0 clamp(64px,8vw,112px);text-align:center}
.intro-in{display:flex;flex-direction:column;align-items:center}
.intro .say{max-width:24ch}
.intro-sub{margin-top:28px;font-size:18px;line-height:1.55;color:var(--mute);max-width:34em;text-wrap:pretty}
.intro .pill{margin-top:36px}

/* Het werk: vijf ingangen met foto, titel, korte zin en labels, en een vak naar alle foto's */
.werk{padding:0 0 var(--sec)}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(16px,1.5vw,30px)}
.case{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.case figure{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/5;background:var(--soft)}
.case figure img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 1.1s var(--ease)}
.case:hover figure img,.case:focus-visible figure img{transform:scale(1.03)}
.case-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:18px}
.case h3{font-size:18px;font-weight:560;letter-spacing:-.015em}
.case-t p{font-size:16px;line-height:1.45;color:rgba(21,21,21,.78)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags li{padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.05);font-size:13px;font-weight:560;letter-spacing:.04em;text-transform:uppercase;color:rgba(21,21,21,.78)}
.case-more{justify-content:stretch}
.more-in{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;aspect-ratio:4/5;padding:clamp(24px,2.6vw,36px);border-radius:4px;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.more-in::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.07) calc(25% - 1px) 25%),repeating-linear-gradient(0deg,transparent 0 calc(20% - 1px),rgba(255,255,255,.07) calc(20% - 1px) 20%);transition:transform 1.2s var(--ease)}
.case-more:hover .more-in::before{transform:scale(1.06)}
.more-t{font-size:clamp(26px,2.6vw,38px);font-weight:250;line-height:1.08;letter-spacing:-.03em}
.more-t strong{font-weight:560}
.more-s{font-size:15px;color:rgba(255,255,255,.62)}
.more-go{display:grid;place-items:center;width:52px;height:52px;margin-top:12px;border-radius:50%;background:#fff;color:var(--ink);transition:transform .5s var(--ease)}
.case-more:hover .more-go{transform:translateX(6px)}
@media (max-width:1020px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .cases{grid-template-columns:1fr;gap:44px}
  .case figure{aspect-ratio:4/5}
  .case-more .more-in{aspect-ratio:auto;min-height:220px}
}

/* Over Les: grijze kaart, vierkante foto links die openvouwt bij het inscrollen, citaat rechts (richting Bou-case) */
.les{padding:0 0 var(--sec)}
.les-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6.5vw,104px);align-items:center;padding:clamp(16px,4.6vw,68px);border-radius:4px;background:var(--soft);overflow:hidden}
.les-photo{position:relative;margin:0;--p:1}
.les-frame{position:relative;aspect-ratio:1;overflow:hidden;border-radius:4px;background:#1a1916;
  clip-path:inset(calc((1 - var(--p)) * 24%) calc((1 - var(--p)) * 24%) round calc(4px + (1 - var(--p)) * 200px))}
.les-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1 + (1 - var(--p)) * .35)) rotate(calc((1 - var(--p)) * -3deg));transition:opacity .01s linear .9s}
.les-frame img.on{opacity:1;z-index:1;transition:none}
.les-frame img.in{opacity:1;z-index:2;clip-path:inset(100% 0 0 0);animation:wipe 1.1s cubic-bezier(.65,0,.35,1) forwards}
.les-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(14,12,10,.42),rgba(14,12,10,0) 34%)}
.les-nav{position:absolute;left:16px;bottom:16px;z-index:4;opacity:clamp(0,calc((var(--p) - .85) * 6.7),1);display:flex;align-items:center;gap:2px;height:42px;padding:0 4px;border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#fff;font-size:13px;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(14,12,10,.18)}
.les-nav button{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;transition:background-color .3s}
.les-nav button:hover{background:rgba(255,255,255,.18)}
.les-nav .ic{width:14px;height:14px}
.les-n{padding:0 4px;min-width:30px;text-align:center}.les-n b,.les-n i{font-weight:450;font-style:normal}
.les-n b{display:inline-block}
.les-n b.tick{animation:up .5s var(--ease)}
.les-txt{max-width:none;padding:clamp(8px,2vw,24px) 0}
.les-q{margin:0}
.les-q strong{font-weight:560}
.nw{white-space:nowrap}
.les-by{margin-top:26px;font-size:13px;font-weight:560;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.les-more{margin-top:18px;font-size:17px;line-height:1.55;color:var(--mute);max-width:30em}
@media (max-width:860px){.les-card{grid-template-columns:1fr;gap:28px}.les-photo{width:100%;max-width:560px;margin-inline:auto}.les-txt{padding:0 4px 8px}}
@media (max-width:860px) and (max-height:500px){.les-photo{max-width:360px}}
@media (prefers-reduced-motion:reduce){.les-photo{--p:1!important}}

/* Mogelijkheden: zin links, vakjes rechts */
/* Mogelijkheden (14 okt, scroll-sectie): kop scrolt weg, daarna zet de foto + woordenlijst zich vast en loopt elke
   scrollstap één woord verder (--step per woord). De bovenlijn van elk woord vult zich mee als voortgang. Klik op een
   woord = de galerij met dat filter. Zonder beweging (reduced motion, geen JS): geen vastzetten, dan wisselt de foto bij
   aanwijzen of bij het woord midden in beeld. Foto's heel, nooit breder dan de echte pixels (--sw / --dpr). */
.kan-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px)}
.kan-head .say{grid-column:1/-1;max-width:22ch}
.kan-head p{grid-column:1/-1;margin-top:20px;font-size:18px;color:var(--mute)}
.kan-track{--step:42vh;position:relative;margin-top:clamp(40px,4vw,72px)}
.kan-pin{display:flex;align-items:center}
.motion .kan-track{height:calc(100vh + var(--n) * var(--step));margin-top:0}
.motion .kan-pin{position:sticky;top:0;height:100vh;padding:calc(var(--hdr) + 20px) 0 20px}
.kan-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);width:100%}
.kan-stage{--dpr:1;position:relative;min-height:clamp(260px,30vw,560px)}
.motion .kan-stage{min-height:0}
@media (min-resolution:1.4dppx){.kan-stage{--dpr:1.9}}
@media (min-resolution:2.5dppx){.kan-stage{--dpr:2.4}}
.kan-stage img{position:absolute;left:0;top:0;width:auto;height:auto;max-height:100%;max-width:min(100%,calc(var(--sw) / var(--dpr)));border-radius:4px;opacity:0;clip-path:inset(100% 0 0 0 round 4px);transform:scale(1.05);transform-origin:left top}
.kan-stage img.on{opacity:1;clip-path:inset(0 round 4px);transform:none;z-index:2}
.kan-stage img.was{opacity:0;clip-path:inset(0 round 4px);transform:none;z-index:1}
.motion .kan-stage img{transition:clip-path .9s var(--ease),transform 1.3s var(--ease),opacity .4s var(--ease) .3s}
.motion .kan-stage img.on{transition:clip-path .9s var(--ease),transform 1.3s var(--ease),opacity 0s}
html:not(.js) .kan-stage img:first-child{opacity:1;clip-path:none;transform:none}
.kw-list{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line);align-self:center}
.kw{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(8px,1.4vh,22px) 0;border-top:1px solid var(--line);text-decoration:none;color:rgba(21,21,21,.7);transition:color .45s var(--ease)}
.motion .kw::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ink);transform:scaleX(var(--k,0));transform-origin:left}
.kw-w{font-size:clamp(36px,min(4.3vw,7.2vh),84px);font-weight:250;line-height:1.05;letter-spacing:-.035em;white-space:nowrap}
.kw-n{display:inline-flex;align-items:center;gap:12px;flex:none;font-size:15px;color:var(--ink);opacity:0;transform:translateX(-10px);transition:opacity .4s var(--ease),transform .5s var(--ease);white-space:nowrap}
.kw-n i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff}
.kw-n .ic{width:15px;height:15px}
.kw:hover{color:rgba(21,21,21,.9)}
.kw.on,.kw:focus-visible{color:var(--ink)}
.kw.on .kw-n,.kw:focus-visible .kw-n{opacity:1;transform:none}
.kan-foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px)}
.kan-ook{grid-column:2;margin-top:clamp(20px,2vw,32px);font-size:clamp(17px,1.3vw,22px);line-height:1.5;color:var(--mute);max-width:34em;text-wrap:pretty}
.kan-ook strong{font-weight:500;color:var(--ink)}
@media (max-width:1200px){.kw-f{display:none}}
@media (max-width:860px){
  .kan-head,.kan-grid,.kan-foot{grid-template-columns:minmax(0,1fr);gap:0}
  .kan-ook{grid-column:1}
  .kan-track{--step:38svh}
  .kan-grid{gap:20px}
  .motion .kan-track{height:calc(100vh + var(--n) * var(--step));height:calc(100svh + var(--n) * var(--step))}
  .motion .kan-pin{height:100vh;height:100svh;padding:calc(var(--hdr) + 18px) 0 16px;align-items:stretch}
  .motion .kan-grid{display:flex;flex-direction:column;gap:18px}
  .motion .kan-stage{flex:1 1 auto;min-height:150px}
  .kan-stage{min-height:min(42vh,400px)}
  .kw-list{align-self:stretch}
  .kw{padding:clamp(6px,1.2svh,12px) 0}
  .kw-w{font-size:clamp(28px,min(8.4vw,4.6svh),44px)}
  .kw-n i{width:32px;height:32px}
}

/* Werkgebied: een donkere box op de witte pagina (naar Bou "You can find Bou here", gemeten 14 okt: 60 px van de rand
   op 1440, hoeken 4 px, verloop van bijna zwart naar donker groen, korrel). De kaart is de landtextuur. */
.gebied{padding:0}
.gebied-box{--bx:clamp(22px,5.4vw,104px);position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"txt map" "pl pl";gap:clamp(24px,4vw,64px) clamp(32px,5vw,96px);align-items:center;
  padding:clamp(48px,5vw,96px) var(--bx) clamp(28px,3.4vw,56px);border-radius:4px;color:var(--on-dark);
  background:radial-gradient(110% 70% at 60% 112%,rgba(74,110,97,.6),rgba(74,110,97,0) 64%),linear-gradient(180deg,#111212 0%,#171c1b 34%,#202b28 68%,#2b3c36 100%)}
.gebied-box::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.gebied-txt{grid-area:txt;align-self:center}
.gebied-txt>p{margin-top:28px;font-size:18px;line-height:1.55;color:var(--on-dark-mute);max-width:30em;text-wrap:pretty}
.gebied-box .map{grid-area:map;margin:calc(-.5*var(--bx)) calc(-1*var(--bx)) calc(-.3*var(--bx)) 0}
.gebied-box .nl text{stroke:#171c1b}
.gebied-box .nl{max-height:min(64vh,700px)}
/* Alle plaatsen als kaartjes in twee rijen die langzaam tegen elkaar in schuiven (pauzeren bij aanwijzen) */
.places{grid-area:pl;min-width:0;display:flex;flex-direction:column;gap:10px;margin:0 calc(-1*var(--bx))}
.pl-row{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.pl-track{display:flex;flex:none;gap:10px;padding-right:10px;margin:0;list-style:none}
.pl-track li{flex:none;display:flex;flex-direction:column;gap:3px;min-width:clamp(150px,12vw,220px);padding:16px 18px 17px;border:1px solid rgba(244,241,235,.15);border-radius:4px;transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.pl-track b{font-size:17px;font-weight:450;letter-spacing:-.01em;color:var(--on-dark)}
.pl-track span{font-size:13px;color:rgba(244,241,235,.74)}
.pl-track li:hover,.pl-track li.hl{border-color:rgba(244,241,235,.5);background:rgba(244,241,235,.05)}
.motion .pl-track{animation:pl 70s linear infinite}
.motion .pl-row[data-dir=r] .pl-track{animation-direction:reverse;animation-duration:80s}
.pl-row:hover .pl-track{animation-play-state:paused}
@keyframes pl{to{transform:translateX(-100%)}}
html:not(.motion) .pl-row{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none;padding:0 var(--bx)}
html:not(.motion) .pl-track{flex-wrap:wrap}html:not(.motion) .pl-track[aria-hidden]{display:none}
@media (max-width:960px){.gebied-box{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "map" "pl"}.gebied-box .map{width:auto;max-width:640px;margin:0 max(calc(-1*var(--bx)),calc((100% - 640px)/2))}}
.map{position:relative}
.nl{width:100%;height:auto;overflow:hidden}
.nl .p{fill:rgba(244,241,235,.025);stroke:rgba(244,241,235,.1);stroke-width:.6}
.nl .p.on{fill:rgba(244,241,235,.1);stroke:rgba(244,241,235,.38);stroke-width:.7}
.nl .lake{fill:rgba(244,241,235,.5);font-size:6.5px;letter-spacing:.34em}
.nl text{paint-order:stroke;stroke:var(--ink);stroke-width:3.2px;stroke-linejoin:round}
.nl .ct .cd{fill:var(--on-dark);transition:r .4s var(--ease)}
.nl .ct .cr{fill:none;stroke:var(--on-dark);stroke-width:.6;opacity:0}
.nl .ct text{fill:var(--on-dark);font-size:8.5px;font-weight:500}
.nl .home .hd{fill:var(--on-dark)}
.nl .home text{fill:var(--on-dark);font-size:11px;font-weight:600}
.nl .ct.hl .cd{r:3.6}
.nl .ring{fill:none;stroke:var(--on-dark);stroke-width:.8;opacity:0}
/* Golf: één front vanuit Enkhuizen. --T = periode, de golf reist in 80% daarvan tot R; een plaats op afstand --d (0..1)
   licht op na --d x 80% x --T. Eerste keer kleurt hij het werkgebied in en verschijnen de plaatsen als hij ze raakt. */
.nl{--T:6s;--w0:.3s}
.nl .wv,.nl .cov,.nl .ct .cr,.nl .ct .cd,.nl .ring{transform-box:fill-box;transform-origin:center}
.nl .wv,.nl .wr{opacity:0}
.nl .wr{fill:none;stroke:#f4f0e8;stroke-opacity:.4;stroke-width:.9;transform-box:fill-box;transform-origin:center}
.nl .rr{fill:none;stroke:rgba(244,241,235,.16);stroke-width:.5;stroke-dasharray:1.5 2.5}
.motion .map .rr{display:none}
.motion .map .cov{transform:scale(0)}
.motion .map.go .cov{transform:scale(1);transition:transform calc(var(--T)*.8) linear var(--w0)}
.motion .map.go .wv,.motion .map.go .wr{animation:golf var(--T) linear var(--w0) infinite}
@keyframes golf{0%{transform:scale(0);opacity:var(--o,1)}70%{opacity:var(--o,1)}80%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:0}}
.motion .map .ct{opacity:0;transition:opacity .5s var(--ease)}
.motion .map.go .ct{opacity:1;transition-delay:calc(var(--w0) + var(--d)*var(--T)*.8)}
.motion .map.go .ct .cd{animation:hitd var(--T) ease-out calc(var(--w0) + var(--d)*var(--T)*.8) infinite}
.motion .map.go .ct .cr{animation:hitr var(--T) ease-out calc(var(--w0) + var(--d)*var(--T)*.8) infinite}
@keyframes hitd{0%{transform:scale(1)}3%{transform:scale(1.7)}10%,100%{transform:scale(1)}}
@keyframes hitr{0%{opacity:.8;transform:scale(1)}12%{opacity:0;transform:scale(3.6)}100%{opacity:0;transform:scale(3.6)}}
.motion .map .home text{opacity:0;transition:opacity .6s var(--ease) .1s}
.motion .map .glow{opacity:0;transition:opacity 1.4s var(--ease)}
.motion .map.go .home text,.motion .map.go .glow{opacity:1}
.motion .map.go .ring{animation:kring var(--T) ease-out var(--w0) infinite}
.nl .ring.r2{display:none}
@keyframes kring{0%{opacity:.8;transform:scale(.4)}22%{opacity:0;transform:scale(3.4)}100%{opacity:0;transform:scale(3.4)}}

/* Vragen */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:start}
.faq-side{position:sticky;top:calc(var(--hdr) + 48px)}
.faq-side>p{margin-top:24px;font-size:17px;color:var(--mute);text-wrap:pretty;max-width:22em}
.ask{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:32px;max-width:340px}
.ask .btn{justify-content:space-between}
.qa{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q h3{font-size:inherit;font-weight:inherit}
.q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;padding:24px 0;font-size:clamp(18px,1.5vw,20px);font-weight:400;letter-spacing:-.01em;line-height:1.35;transition:padding .5s var(--ease),opacity .3s}
.q button:hover i{background:var(--ink);color:var(--cream)}
.q.open button{padding-bottom:12px}
.q i{position:relative;flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.q i::before,.q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform .45s var(--ease)}
.q i::after{transform:rotate(90deg)}
.q button:hover i,.q.open i{border-color:var(--ink)}
.q.open i::after{transform:rotate(0)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.a>div{overflow:hidden}
.a p{padding:0 64px 28px 0;font-size:17px;line-height:1.6;color:var(--mute);max-width:36em;text-wrap:pretty}
.q.open .a{grid-template-rows:1fr}
html:not(.js) .a{grid-template-rows:1fr}
@media (max-width:860px){.faq-grid{grid-template-columns:minmax(0,1fr)}.faq-side{position:static}.a p{padding-right:0}}

/* Contact (naar Bou "They say no one reads the footer", gemeten 14 okt): wit, kop links over twee kolommen,
   WhatsApp en Bellen op de plek van Helsinki en London. Vierkant 150 px op 1440 en 200 op 2059, hoek 10 px,
   rechts naam en twee grijze regels, pilknop onderaan gelijk met het vierkant. Zes kolommen, zelfde raster als de footer. */
.contact{padding:clamp(96px,10.4vw,200px) 0}
.contact-grid,.foot-cols,.foot-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--cg)}
.contact-grid{--cg:clamp(16px,1.67vw,28px);row-gap:48px;align-items:start}
.contact .say{grid-column:1/3}
.reach{--sq:clamp(112px,10.4vw,200px);grid-column:span 2;display:grid;grid-template-columns:var(--sq) minmax(0,1fr);grid-template-rows:1fr auto;row-gap:14px;column-gap:clamp(16px,1.7vw,24px);text-decoration:none;color:var(--ink)}
.reach:nth-of-type(1){grid-column:3/5}.reach:nth-of-type(2){grid-column:5/7}
.reach-sq{grid-row:1/3;position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;width:var(--sq);height:var(--sq);border-radius:10px;background:var(--ink);color:var(--cream)}
.reach-sq.reach-wa{background:#25d366;color:#fff}
.reach-sq::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.14);transform:translateY(101%);transition:transform .6s var(--ease)}
.reach-sq .ic{width:34%;height:34%;transition:transform .6s var(--ease)}
.reach:hover .reach-sq::before,.reach:focus-visible .reach-sq::before{transform:none}
.reach:hover .reach-sq .ic,.reach:focus-visible .reach-sq .ic{transform:scale(1.12) rotate(-8deg)}
.reach-t{display:flex;flex-direction:column;font-size:clamp(17px,1.4vw,24px);font-weight:300;line-height:1.3;letter-spacing:-.01em}
.reach-t b{font-weight:400}
.reach-t span{color:rgba(21,21,21,.6)}
.reach-btn{grid-column:2;grid-row:2;align-self:end;justify-self:start;position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;height:clamp(38px,2.35vw,48px);padding:0 clamp(16px,1.2vw,22px);border:1px solid rgba(10,10,10,.12);border-radius:999px;font-size:clamp(15px,1vw,18px);white-space:nowrap;transition:color .45s var(--ease),border-color .45s var(--ease)}
.reach-t{grid-column:2;grid-row:1;align-self:start}
.reach-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.reach-btn .ic{width:16px;height:16px;transition:transform .45s var(--ease)}
.reach:hover .reach-btn,.reach:focus-visible .reach-btn{color:#fff;border-color:var(--ink)}
.reach:hover .reach-btn::before,.reach:focus-visible .reach-btn::before{transform:none}
.reach:hover .reach-btn .ic{transform:translateX(3px)}
.motion .reach.rv:nth-of-type(2){transition-delay:.12s}
@media (max-width:1020px){.contact .say{grid-column:1/-1}.reach:nth-of-type(1){grid-column:1/4}.reach:nth-of-type(2){grid-column:4/7}}
@media (max-width:400px){.reach{--sq:88px}}
@media (max-width:640px){.contact-grid{row-gap:28px}.contact .say{margin-bottom:12px}.reach:nth-of-type(n){grid-column:1/-1}}

/* Voettekst (naar Bou): lichtgrijze box met marge en hoek 8 px, kolommen op hetzelfde raster als contact,
   kolomkop met rond pijltje, onderin een zwarte balk (hoek 12 px) met de bedrijfsnaam. */
.foot{--bp:clamp(20px,2.8vw,60px);padding:0 max(8px,calc(var(--pad) - var(--bp))) max(8px,calc(var(--pad) - var(--bp)) + env(safe-area-inset-bottom))}
.foot-box{max-width:calc(var(--max) + 2*var(--bp));margin:0 auto;padding:var(--bp) var(--bp) 20px;border-radius:8px;background:rgba(0,0,0,.05)}
.foot-cols{--cg:clamp(16px,1.67vw,28px);row-gap:36px;padding-bottom:clamp(40px,4.2vw,72px)}
.foot-h{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:6px;font-size:16px;color:var(--ink);text-decoration:none}
.foot-h i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.08);transition:transform .45s var(--ease),background-color .45s var(--ease),color .45s var(--ease)}
.foot-h i .ic{width:12px;height:12px}
.foot-h:hover i{transform:translateX(3px);background:var(--ink);color:#fff}
.foot nav,.foot ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;font-size:clamp(14px,1vw,16px);line-height:1.6;color:#535353}
.foot nav a{text-decoration:none;color:inherit;width:max-content;max-width:100%;overflow-wrap:anywhere;transition:color .3s}
.foot nav a:hover{color:var(--ink)}
@media (max-width:640px){.foot nav a{display:inline-flex;align-items:center;min-height:44px;width:fit-content}}
.foot-bar{--cg:clamp(16px,1.67vw,28px);row-gap:16px;margin:0 calc(20px - var(--bp));padding:clamp(14px,1.05vw,20px) calc(var(--bp) - 20px);border-radius:12px;background:#0a0a0a;color:rgba(255,255,255,.62);font-size:clamp(13px,.9vw,14px);line-height:1.45}
.foot-bar p{margin:0;display:flex;flex-direction:column}
.foot-bar b{color:#fff;font-weight:600}
.foot-bar p:nth-child(1){grid-column:1/3}.foot-bar p:nth-child(2){grid-column:3/5}.foot-bar p:nth-child(3){grid-column:5/7}
/* vier kolommen op het raster van contact: Werkgebied onder WhatsApp, Contact onder Bellen */
.foot-cols>div:nth-child(3){grid-column:3}.foot-cols>div:nth-child(4){grid-column:5/7}
@media (max-width:860px){.foot-cols>div:nth-child(n){grid-column:auto}.foot-cols>div:nth-child(odd){grid-column:1/4}.foot-cols>div:nth-child(even){grid-column:4/7}}
@media (max-width:640px){.foot-cols>div:nth-child(4){grid-column:1/-1}}
@media (max-width:640px){.foot-bar{margin:0 calc(-1*var(--bp) + 12px);padding:16px calc(var(--bp) - 12px + 4px)}.foot-bar p:nth-child(n){grid-column:1/-1}}

/* WhatsApp-knop: om de paar seconden een golf, het icoon tikt even mee */
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;text-decoration:none;transition:opacity .4s var(--ease),visibility .4s,transform .4s var(--ease)}
.wa-b{position:relative;order:2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 12px 28px -12px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.14);transition:transform .4s var(--ease)}
.wa-b .ic{width:27px;height:27px}
.wa-b::before,.wa-b::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;background:rgba(37,211,102,.12);opacity:0;pointer-events:none}
.motion .wa-b::before{animation:wave 3.4s cubic-bezier(.15,.6,.35,1) infinite}
.motion .wa-b::after{animation:wave 3.4s cubic-bezier(.15,.6,.35,1) .35s infinite}
.motion .wa-b .ic{animation:tick 3.4s ease-in-out infinite}
@keyframes wave{0%{opacity:.9;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.85)}}
@keyframes tick{0%,100%{transform:none}3%{transform:rotate(-14deg) scale(1.08)}6%{transform:rotate(11deg) scale(1.08)}9%{transform:rotate(-6deg)}12%{transform:none}}
.wa:hover .wa-b{transform:scale(1.06)}
.wa-l{order:1;margin-right:12px;padding:11px 16px;border-radius:999px;background:var(--cream);color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 10px 26px -12px rgba(0,0,0,.45);opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.wa:hover .wa-l,.wa.wa-say .wa-l{opacity:1;transform:none}
@media (hover:none){.wa-l{display:none}}
.wa.away{opacity:0;visibility:hidden;transform:translateY(12px)}
.wa.away .wa-l{opacity:0}

/* Lightbox */
.lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,10,10,.96);color:var(--on-dark)}
.lb::backdrop{background:transparent}
.lb[open]{display:grid;place-items:center}
.lb figure{max-width:min(92vw,1400px);max-height:86dvh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb img{max-width:100%;max-height:80dvh;width:auto;object-fit:contain}
.lb figcaption{font-size:14px;color:var(--on-dark-mute);text-align:center}
.lb button{position:fixed;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--on-dark-line);transition:background-color .3s}
.lb button:hover{background:rgba(244,241,235,.1)}
.lb-x{top:18px;right:18px}.lb-p{left:18px;top:50%;margin-top:-26px}.lb-n{right:18px;top:50%;margin-top:-26px}
.motion .lb[open] img{animation:lbIn .5s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.98)}}
@media (max-width:700px){.lb-p,.lb-n{top:auto;bottom:24px;margin:0}.lb-p{left:calc(50% - 62px)}.lb-n{right:calc(50% - 62px)}}

/* Galerij (werk.html) */
.gal-head{padding:calc(var(--hdr) + clamp(48px,7vw,96px)) 0 clamp(28px,4vw,44px)}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;text-decoration:none;color:var(--mute);margin-bottom:28px}
.back:hover{color:var(--ink)}
.gal-head .say{max-width:none}
/* Filters als grote woorden in licht gewicht; de streep schuift mee naar de gekozen soort */
.filters{position:relative;display:flex;flex-wrap:wrap;gap:8px clamp(20px,2.6vw,44px);margin-top:clamp(28px,4vw,56px);padding-bottom:14px}
.f{display:inline-flex;align-items:flex-start;gap:5px;min-height:44px;padding:6px 0;border:0;background:none;font-size:clamp(22px,2.3vw,40px);font-weight:250;line-height:1.15;letter-spacing:-.025em;color:rgba(21,21,21,.7);cursor:pointer;transition:color .45s var(--ease)}
.f span{margin-top:.3em;font-size:max(11px,.34em);font-weight:450;letter-spacing:0;color:inherit;font-variant-numeric:tabular-nums}
.f:hover{color:rgba(21,21,21,.9)}
.f[aria-pressed=true]{color:var(--ink)}
.f-bar{position:absolute;left:0;top:0;height:2px;width:var(--w,0);background:var(--ink);transform:translate(var(--x,0),var(--y,0));transition:transform .6s var(--ease),width .6s var(--ease)}
/* Foto's: rijen die precies de breedte vullen, elke foto heel (niet bijgesneden), geen tekst eronder */
.gal{padding:clamp(24px,3vw,44px) 0 var(--sec);--gg:clamp(8px,.9vw,16px)}
.grid-g{display:flex;flex-wrap:wrap;gap:var(--gg);column-gap:var(--gg)}
.grid-g li{flex:calc(var(--r) * 100) 1 calc(var(--r) * 240px)}
.grid-g li[hidden]{display:none}
.grid-g .tile{display:block;width:100%;aspect-ratio:var(--r);border-radius:4px;overflow:hidden;background:var(--soft);cursor:zoom-in}
.grid-g .tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.grid-g .tile:hover img{transform:scale(1.04)}
.js .grid-g.lay{display:block;position:relative}
.js .grid-g.lay li{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform:translate3d(var(--x),var(--y),0)}
.js .grid-g.lay .tile{height:100%;aspect-ratio:auto}
.grid-g.anim li{transition:transform .9s var(--ease),width .9s var(--ease),height .9s var(--ease),opacity .4s var(--ease)}
.grid-g li.noanim{transition:none!important}
.grid-g li.out{opacity:0}
/* Binnenkomen: de foto schuift van onder omhoog in zijn vak, net als in de hero */
.motion .grid-g .tile{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1) var(--d,0s)}
.motion .grid-g .tile img{transform:scale(1.16);transition:transform 1.5s var(--ease) var(--d,0s)}
.motion .grid-g li.seen .tile{clip-path:inset(0 0 0 0)}
.motion .grid-g li.seen .tile img{transform:none}
.motion .grid-g li.seen .tile:hover img{transform:scale(1.04)}
.gal-none{font-size:17px;color:var(--mute)}
.gal-cta{padding:var(--sec) 0;background:var(--soft);text-align:center}
.gal-cta .wrap{display:flex;flex-direction:column;align-items:center}
.gal-cta p{margin-top:18px;font-size:17px;color:var(--mute)}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.les-cta{justify-content:flex-start;margin-top:36px}
@media (min-width:641px){.les-cta .btn,.gal-cta .btn-lg{flex:1 1 240px;max-width:340px;justify-content:space-between}.gal-cta .cta-btns{align-self:stretch}}
/* Grotere variant van de tegelknop (WhatsApp en bellen bij Over Les en onder de galerij) */
.btn-lg{height:64px;font-size:16px}
.btn-lg>span{padding:0 28px}
.btn-lg>i{width:64px}
@media (max-width:640px){.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:28px calc(-1*var(--pad)) 0;padding:0 var(--pad) 14px}.filters::-webkit-scrollbar{display:none}.f{flex:none;font-size:24px}.cta-btns{flex-direction:column;align-self:stretch}.cta-btns .btn{justify-content:space-between}}

/* 27 okt (Seth): ruimte tussen Vragen/galerij en contact was 192 px op telefoon (twee paddings opgeteld). */
.faq+.contact,.gal+.contact{padding-top:0}
@media (max-width:640px){.faq,.gal{padding-bottom:64px}}