@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,900;1,800;1,900&family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{--black:#0b0b0b;--white:#f5f3ee;--yellow:#d6ff00;--pink:#ff006e}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--black);color:var(--white);font-family:Montserrat,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:4px}.wrap{width:min(1200px,calc(100% - 48px));margin:auto}.skip{position:absolute;top:-100px;left:10px;padding:12px;background:var(--yellow);color:black}.skip:focus{top:10px}header{position:sticky;top:0;z-index:10;background:#0b0b0bf5;border-bottom:1px solid #333}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.logo{font:italic 900 38px/1 'Barlow Condensed',Impact,sans-serif}.logo span,h2 span,h3 span{color:var(--yellow)}nav{display:flex;gap:30px}nav a{font-size:12px;font-weight:700}nav a:hover{color:var(--yellow)}#menu{display:none}.cta,.outline{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:40px;font-size:12px;font-weight:800}.cta{background:var(--yellow);color:#111}.outline{border:1px solid #888;color:white}.hero{display:grid;grid-template-columns:53% 47%;min-height:590px;align-items:center}.hero-copy{position:relative;z-index:2;padding:65px 0}.eyebrow,.label{font-size:11px;letter-spacing:.24em;font-weight:800}.eyebrow{color:#ddd}h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-style:italic;line-height:.9;margin:20px 0;text-transform:uppercase}h1{font-size:clamp(70px,9vw,130px)}h2{font-size:clamp(50px,6vw,80px)}h3{font-size:clamp(56px,6vw,82px)}h1 em,.contact h2 em{font-style:inherit;display:block;background:var(--yellow);color:#111;transform:skew(-4deg);width:max-content;max-width:100%;padding:0 .09em .075em}.hero-copy>p:not(.eyebrow){max-width:500px;line-height:1.8;font-size:15px}.hero-copy small{font-size:10px;color:#aaa}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}.hero-visual{position:relative;min-height:550px;height:100%;overflow:hidden;display:flex;align-items:end;justify-content:center;background:linear-gradient(145deg,transparent 30%,#d6ff00 45%,#d6ff00 54%,#ff006e 60%,transparent 72%)}.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0;mask-image:linear-gradient(to right,transparent,black 18%,black 87%,transparent)}.hero-stamp{position:absolute;right:12px;bottom:32px;background:#151515cc;padding:10px;transform:rotate(-8deg);font:italic 900 22px/1 'Barlow Condensed',sans-serif}.benefits{border-block:1px solid #444;display:grid;grid-template-columns:repeat(3,1fr)}.benefits div{padding:24px;display:flex;flex-direction:column;gap:9px;border-right:1px solid #444}.benefits div:last-child{border:0}.benefits b{font-size:13px}.benefits span{color:#aaa;font-size:11px}.section{padding-top:100px;padding-bottom:100px}.services{display:grid;grid-template-columns:1fr 1fr;gap:20px}.services article{min-height:460px;border:1px solid #444;border-radius:18px;padding:30px;position:relative;overflow:hidden;background:linear-gradient(135deg,#222,#090909)}.services article:nth-child(2){background:linear-gradient(140deg,#36102a,#080808)}.services article p:not(.label){font-size:13px;line-height:1.8;max-width:380px;position:relative;z-index:2}.label,.services a{color:var(--yellow)}.services a{font-size:12px;font-weight:800;border-bottom:1px solid var(--yellow);padding-bottom:6px;position:relative;z-index:3}.tile-visual{position:absolute;bottom:-20px;right:0;width:64%;height:180px;display:flex;align-items:center;justify-content:center;font:italic 900 42px/.9 'Barlow Condensed',sans-serif;transform:rotate(-7deg);box-shadow:0 0 55px #d6ff002c}.website-mock{border:8px solid #555;background:#181818}.website-mock strong{color:var(--yellow)}.video-mock{font-size:70px;background:radial-gradient(circle,#f09,#501030 45%,transparent 75%);box-shadow:none}.video-mock small{font:700 10px Montserrat;position:absolute;bottom:30px}.work{background:#151515}.work>div>p:not(.eyebrow){font-size:13px;color:#aaa}.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.portfolio article{background:#080808;border:1px solid #444;border-radius:14px;overflow:hidden;padding-bottom:20px}.portfolio article>b,.portfolio article>small{display:block;margin:10px 18px;font-size:12px}.portfolio article>small{color:#aaa;font-size:10px}.sample{height:235px;display:flex;align-items:center;justify-content:center;font:italic 900 48px/.95 'Barlow Condensed';text-align:center}.sample-a{background:repeating-linear-gradient(145deg,#202020 0 50px,#d6ff00 50px 58px,#101010 58px 105px)}.sample-b{background:radial-gradient(circle,#ff006e,#39031d 72%);flex-direction:column}.sample-b small{font-size:18px}.sample-c{background:linear-gradient(135deg,#232323,#121212);color:var(--yellow)}.why{display:grid;grid-template-columns:1fr 1fr;gap:50px}.why p:last-child{font-size:15px;line-height:1.9;color:#ddd}.contact{background:var(--yellow);color:#080808;border-radius:20px;padding:60px;display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:80px}.contact h2{font-size:clamp(58px,6vw,80px)}.contact h2 em{background:#101010;color:var(--yellow)}.contact p{line-height:1.8;font-size:14px}.contact small{font-size:11px}.contact form{background:#111;color:#fff;padding:28px;border-radius:14px}.contact label{display:block;font-size:11px;font-weight:800;margin-bottom:7px}.contact input,.contact select,.contact textarea{display:block;width:100%;color:white;background:#222;border:1px solid #555;border-radius:7px;padding:13px;margin-bottom:17px;font-size:13px}.contact button{width:100%;padding:15px;border:0;background:var(--yellow);font-weight:800;border-radius:30px;cursor:pointer}#feedback{font-size:12px}footer{border-top:1px solid #444}.footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:27px 0}.footer span{font-size:10px;color:#aaa}@media(max-width:800px){.hero{grid-template-columns:54% 46%}.nav{gap:12px}nav{gap:15px}.contact{padding:30px}}@media(max-width:700px){.wrap{width:calc(100% - 36px)}.nav{height:66px}.logo{font-size:33px}.nav-cta{display:none}#menu{display:block;background:none;border:0;color:white;font-size:25px;cursor:pointer}nav{display:none;position:absolute;top:66px;left:0;right:0;background:#111;padding:22px;flex-direction:column}nav.open{display:flex}.hero{display:flex;flex-direction:column-reverse;min-height:0}.hero-visual{height:300px;min-height:300px;width:100%}.hero-visual img{mask-image:linear-gradient(to bottom,black 65%,transparent)}.hero-copy{padding:5px 0 40px;width:100%}h1{font-size:clamp(62px,15vw,90px)}.hero-copy>p:not(.eyebrow){font-size:13px}.actions{flex-direction:column}.actions a{width:100%}.benefits,.services,.portfolio,.why,.contact{grid-template-columns:1fr}.benefits div{border:0;border-bottom:1px solid #444;padding:16px 0}.section{padding-block:65px}.services article{min-height:405px;padding:23px}.tile-visual{height:150px}.portfolio{gap:16px}.why{gap:10px}.contact{padding:23px;gap:15px;margin-bottom:40px}.contact form{padding:20px}.footer{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Homepage refinements V1.2 — italic headline, graphic service cards, compact CTA */
.hero h1{font-style:italic;letter-spacing:-.025em;line-height:.86;transform:skewX(-7deg);transform-origin:left center;padding:12px 0 16px 12px;margin-left:1px;overflow:visible}
.hero h1 .hero-line{display:block;white-space:nowrap;font-style:italic;text-shadow:2px 2px 0 #222}
.hero h1 em{display:table;position:relative;isolation:isolate;transform:skewX(-2deg) rotate(-2deg);padding:.015em .12em .09em .08em;margin-top:.05em;font-style:italic;white-space:nowrap}
.hero h1 em:before,.hero h1 em:after{content:"";position:absolute;z-index:-1;background:var(--yellow);height:6px;transform:rotate(-2deg);left:-12px;right:-10px;top:-8px;clip-path:polygon(5% 0,99% 0,100% 45%,0 100%)}
.hero h1 em:after{top:auto;bottom:-7px;height:7px;transform:rotate(2deg)}
.services{gap:22px}
.services article{min-height:340px;padding:30px;background:radial-gradient(ellipse at 85% 70%,#7a860b 0,#272b15 24%,transparent 53%),linear-gradient(145deg,#191919,#090909);border-color:#676767;box-shadow:inset 0 0 30px #ffffff07;transition:transform .2s ease,border-color .2s ease}
.services article:nth-child(2){background:radial-gradient(ellipse at 85% 68%,#6d053f 0,#21071b 39%,transparent 72%),linear-gradient(145deg,#181818,#090909)}
.services article:hover{transform:translateY(-3px);border-color:var(--yellow)}
.services article h3{font-size:clamp(50px,5vw,73px);position:relative;z-index:2;margin:10px 0 12px}
.services article p:not(.label){max-width:51%;font-size:12px;line-height:1.65}
.services article .label{position:relative;z-index:3}
.services article>a{position:relative;z-index:5;display:inline-block;margin-top:12px}
.services .tile-visual{position:absolute;right:5px;bottom:6px;top:auto;height:240px;width:54%;transform:none;box-shadow:none;pointer-events:none}
.services .website-mock{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:end;transform:rotate(-7deg);filter:drop-shadow(-14px 17px 15px #000)}
.laptop-screen{position:relative;width:100%;height:80%;border:8px solid #292d33;border-radius:11px 11px 3px 3px;background:#15252a;overflow:hidden;box-shadow:0 0 0 1px #74777b}
.browser-dots{position:absolute;top:0;left:0;right:0;padding:4px 9px;color:#b1b8c1;background:#2e3437;font:7px Arial;letter-spacing:3px}
.mock-sky{display:flex;flex-direction:column;justify-content:center;height:100%;padding:15px;background:linear-gradient(0deg,#15231c 0%,#1d363d77 44%,#9b9ca6 100%);font:italic 900 clamp(13px,2vw,26px)/.9 'Barlow Condensed',sans-serif;color:white;text-shadow:0 2px 7px #000}
.mock-sky b{color:#fff}.mock-sky i{font:700 8px Montserrat;color:var(--yellow);margin-top:10px}
.laptop-base{width:113%;height:12px;border-radius:0 0 65% 65%;background:linear-gradient(#c2c7cc,#545b60 50%,#1a1d20);margin-top:0;box-shadow:0 10px 12px #000b}
.services .video-mock{display:flex;align-items:center;justify-content:end;background:none;transform:rotate(-8deg)}
.helmet{position:relative;border-radius:50% 48% 43% 42%;width:83%;height:90%;background:radial-gradient(ellipse at 30% 15%,#ff9dcc 0%,#f40880 15%,#920044 58%,#2b0924 84%);box-shadow:inset -15px -10px 20px #09030b,0 0 35px #ff006e70;border:9px solid #bd1c72}
.helmet-glass{position:absolute;inset:27% 8% 21% 7%;border-radius:49% 45% 42% 43%;background:radial-gradient(ellipse at 22% 19%,#db9dbc,#230a26 53%,#070610 88%);border:7px solid #f158a5;box-shadow:inset 3px 8px 8px #100319}
.helmet-shine{position:absolute;top:17%;left:23%;width:36%;height:7%;background:#ffd5f0;border-radius:90%;transform:rotate(-20deg);filter:blur(3px)}
.helmet-neck{position:absolute;width:63%;height:18%;left:17%;bottom:-9%;border-radius:0 0 40% 40%;background:linear-gradient(#dc0e73,#210017);border:7px solid #8a134c}
.conversion-banner{position:relative;margin-bottom:35px;padding:18px 34px;display:grid;grid-template-columns:1.05fr auto 1.15fr auto;align-items:center;gap:25px;min-height:98px;background:var(--yellow);color:#080808;clip-path:polygon(2% 0,99% 2%,100% 13%,98.7% 87%,100% 100%,2% 97%,0 90%,1.2% 77%,0 63%,1% 41%,0 19%);box-shadow:0 0 16px #d6ff0022}
.conversion-banner h2{font-size:clamp(38px,3.5vw,54px);line-height:.82;margin:0;transform:skewX(-7deg)}
.banner-divider{display:block;width:2px;height:58px;background:#1616167e}
.conversion-banner p{font-size:12px;font-weight:600;line-height:1.6;max-width:340px;margin:0}
.banner-action{background:#090909;color:#fff;border-radius:25px;font-size:12px;font-weight:800;white-space:nowrap;padding:14px 21px;text-align:center}
.contact{background:#141414;color:var(--white);border:1px solid #333}
.contact h2 em{background:var(--yellow);color:#111}
.contact .eyebrow{color:var(--yellow)}
@media(max-width:950px){.services article p:not(.label){max-width:55%}.services .tile-visual{width:48%}.conversion-banner{grid-template-columns:1fr 2px 1.2fr;gap:16px}.banner-action{grid-column:3;justify-self:start}.conversion-banner h2{grid-row:1 / span 2}.banner-divider{grid-row:1 / span 2}}
@media(max-width:700px){.hero h1{transform:skewX(-5deg);font-size:clamp(58px,13vw,80px);padding-left:6px}.hero h1 em{max-width:100%;white-space:normal}.services{gap:14px}.services article{min-height:300px;padding:21px}.services article h3{font-size:56px}.services article p:not(.label){max-width:53%;font-size:11px}.services .tile-visual{height:170px;width:49%}.conversion-banner{width:calc(100% - 36px);padding:15px 20px;grid-template-columns:1fr;gap:12px;min-height:unset}.conversion-banner h2{font-size:40px;grid-row:auto}.banner-divider{display:none}.conversion-banner p{font-size:11px}.banner-action{grid-column:auto;justify-self:start}.contact{margin-top:0}}
@media(max-width:380px){.services article p:not(.label){max-width:58%}.services .tile-visual{width:44%}.services article h3{font-size:47px}}
@media(prefers-reduced-motion:reduce){.services article{transition:none}}

/* Projectaanvraag als compact dialoogvenster — geen groot kader op homepage */
.request-dialog{position:fixed;inset:0;margin:auto;width:min(580px,calc(100% - 28px));max-height:min(88vh,820px);overflow-y:auto;padding:28px;background:#141414;color:var(--white);border:1px solid #555;border-radius:18px;box-shadow:0 24px 85px #000a}
.request-dialog::backdrop{background:#000c;backdrop-filter:blur(4px)}
.request-dialog-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.request-dialog h2{font-size:clamp(40px,7vw,58px);margin:10px 0 12px}
.request-dialog-head p:not(.eyebrow){font-size:13px;line-height:1.6}
.request-dialog-head small{display:block;margin-bottom:18px;color:#bbb;font-size:11px}
.request-dialog .eyebrow{color:var(--yellow)}
.request-close{flex:0 0 auto;width:38px;height:38px;border:1px solid #666;border-radius:50%;background:transparent;color:white;font-size:27px;cursor:pointer}
.request-dialog form label{display:block;font-size:12px;font-weight:800;margin:13px 0 6px}
.request-dialog form input,.request-dialog form select,.request-dialog form textarea{display:block;width:100%;background:#222;color:white;border:1px solid #555;border-radius:8px;padding:12px}
.request-dialog form button[type=submit]{width:100%;padding:14px;margin-top:20px;border:0;border-radius:50px;background:var(--yellow);font-weight:800;cursor:pointer}
.request-dialog #feedback{font-size:12px;color:var(--yellow)}
@media(max-width:700px){.request-dialog{padding:20px}.request-dialog h2{font-size:44px}}

/* Beschoft hero artwork: the full-width asset is activated only once it loads. */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,#0b0b0b22 0%,transparent 56%),url("assets/beschoft-hero.webp");background-position:center;background-repeat:no-repeat;background-size:cover;opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:-1}
.hero.hero-art-ready::before{opacity:1}
.hero.hero-art-ready .hero-visual{opacity:0;pointer-events:none}
.hero.hero-art-ready .hero-copy{position:relative;z-index:2}
@media(max-width:700px){.hero::before{inset:0 0 auto;height:300px;background-position:65% center;background-size:cover}.hero.hero-art-ready .hero-visual{background:none}}
@media(prefers-reduced-motion:reduce){.hero::before{transition:none}}

/* V1.5: clear visual separation between headline and bust on desktop */
@media(min-width:701px){
 .hero{grid-template-columns:minmax(0,52%) minmax(0,48%);min-height:600px}
 .hero.hero-art-ready::before{
   background-image:linear-gradient(90deg,#0b0b0b 0%,#0b0b0be6 21%,#0b0b0b88 43%,transparent 65%),url("assets/beschoft-hero.webp");
   background-size:100% 100%,auto 100%;
   background-position:center,right center;
 }
 .hero .hero-copy{max-width:100%;min-width:0;padding-right:12px}
 .hero .hero-copy h1{font-size:clamp(56px,6vw,88px);letter-spacing:-.025em;margin-top:26px}
 .hero .hero-copy h1 .hero-line{max-width:100%}
 .hero .hero-copy h1 em{max-width:100%;font-size:.96em}
 .hero .hero-copy>p:not(.eyebrow){max-width:440px}
}
@media(min-width:701px) and (max-width:960px){
 .hero .hero-copy h1{font-size:clamp(49px,6vw,66px)}
 .hero{min-height:520px}
}
@media(max-width:700px){
 .hero.hero-art-ready::before{background-image:linear-gradient(0deg,#0b0b0b 0%,transparent 30%),url("assets/beschoft-hero.webp");background-size:100% 100%,auto 300px;background-position:center,72% top}
 .hero .hero-copy h1{font-size:clamp(53px,12vw,76px);letter-spacing:-.025em}
 .hero .hero-copy h1 .hero-line{white-space:normal}
 .hero .hero-copy h1 em{white-space:normal}
}

/* Dedicated cinematic service assets. Keep legacy CSS illustrations as fallbacks
   until both image files have been uploaded to the Beschoft develop branch. */
.services article{isolation:isolate}
.services article .service-photo{display:none;position:absolute;z-index:0;right:0;bottom:0;width:65%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}
.services article.has-service-image .service-photo{display:block}
.services article.has-service-image .tile-visual{display:none}
.services article.has-service-image::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#101010 0%,#101010ed 31%,#10101077 51%,transparent 76%);pointer-events:none}
.services article.has-service-image > .label,.services article.has-service-image > h3,.services article.has-service-image > p:not(.label),.services article.has-service-image > a{position:relative;z-index:2}
@media(max-width:700px){
 .services article .service-photo{width:68%;height:100%;object-position:center center}
 .services article.has-service-image::after{background:linear-gradient(90deg,#101010 0%,#101010ed 30%,#10101066 55%,transparent 80%)}
}

/* V2.1 fix: render the uploaded service images without lazy-load/display:none deadlock.
   Both asset paths were verified in the develop branch. */
.services article .service-photo{display:block;opacity:1;visibility:visible;z-index:0}
.services article .tile-visual{display:none}
.services article::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#101010 0%,#101010f2 25%,#101010ad 43%,transparent 75%);pointer-events:none}
.services article > .label,.services article > h3,.services article > p:not(.label),.services article > a{position:relative;z-index:2}
@media(max-width:700px){
 .services article::after{background:linear-gradient(90deg,#101010 0%,#101010e8 28%,#10101080 52%,transparent 83%)}
}

/* Portfolio V2: authentic concept showcase, no implied customer references */
.work .portfolio-header{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:27px}
.work .portfolio-header h2{margin-bottom:0}
.work .portfolio-header>p{margin:0 0 5px;max-width:350px;color:#bcbcbc;font-size:12px;line-height:1.8}
.portfolio-v2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.portfolio-v2 .project-card{border:1px solid #444;background:#0b0b0b;border-radius:16px;overflow:hidden;padding:0;min-width:0;transition:border-color .2s ease,transform .2s ease}
.portfolio-v2 .project-card:hover{border-color:#777;transform:translateY(-3px)}
.portfolio-v2 .project-feature{grid-column:span 2}
.portfolio-v2 .project-media{position:relative;height:280px;overflow:hidden;background:#080808}
.portfolio-v2 .project-feature .project-media{height:385px}
.portfolio-v2 .project-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.portfolio-v2 .project-media img[src$="beschoft-hero.webp"]{object-position:center 41%}
.portfolio-v2 .project-brand:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090909e8 0%,#09090988 38%,transparent 70%);pointer-events:none}
.portfolio-v2 .project-web img{object-position:52% 45%}
.portfolio-v2 .project-motion img{object-position:60% 28%}
.portfolio-v2 .project-media:not(.project-brand):after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0005,transparent 38%);pointer-events:none}
.portfolio-v2 .project-marker{position:absolute;top:20px;left:20px;z-index:2;background:#0b0b0bde;border:1px solid #777;color:var(--yellow);padding:9px 11px;border-radius:4px;font-weight:800;letter-spacing:.15em;font-size:10px}
.portfolio-v2 .project-overlay{position:absolute;left:6%;bottom:13%;font:italic 900 clamp(38px,5vw,77px)/.93 'Barlow Condensed',Impact,sans-serif;z-index:2;text-shadow:2px 3px #090909}
.portfolio-v2 .motion-label{position:absolute;right:17px;bottom:18px;z-index:2;color:#ff83c4;font-size:11px;font-weight:800;letter-spacing:.14em}
.portfolio-v2 .project-details{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:18px 19px}
.portfolio-v2 .project-details>div{display:flex;flex-direction:column;gap:6px}
.portfolio-v2 .project-details b{font-size:13px}
.portfolio-v2 .project-details small{font-size:10px;color:#bcbcbc}
.portfolio-v2 .project-type{color:var(--yellow);font-size:9px;letter-spacing:.14em;font-weight:800}
.portfolio-v2 .project-card:hover img{transform:scale(1.025)}
.work .portfolio-note{margin:20px 0 0;color:#bcbcbc;font-size:11px}
@media(max-width:700px){
 .work .portfolio-header{display:block}
 .work .portfolio-header>p{margin:14px 0 0}
 .portfolio-v2{grid-template-columns:1fr;gap:16px}
 .portfolio-v2 .project-feature{grid-column:auto}
 .portfolio-v2 .project-media,.portfolio-v2 .project-feature .project-media{height:270px}
 .portfolio-v2 .project-overlay{font-size:49px}
 .portfolio-v2 .project-details{padding:15px}
 .portfolio-v2 .project-details b{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .portfolio-v2 .project-card,.portfolio-v2 .project-media img{transition:none}
}

/* V2.3 — compactere overgang van diensten naar Waarom Beschoft.
   Alleen deze twee aaneensluitende secties worden geraakt. */
#diensten{padding-bottom:38px}
#waarom{padding-top:38px}
@media(max-width:700px){
  #diensten{padding-bottom:24px}
  #waarom{padding-top:28px}
}