/* Layout: vaste video achter een smalle kop, daaronder papierbladen met plakband op een verloop van zwart naar wit; één bewuste look, dus geen donkere variant */
:root{
  color-scheme:light;
  --ink:#000;
  --paper:#f5f5f5;
  --white:#fff;
  --grey:#4d4d4d;
  --line:#808080;
  --red:#e8402f;
  --slash:#f00;
  --font-body:"Jost","Futura","Century Gothic",Arial,sans-serif;
  --font-title:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--ink);font-family:var(--font-body);font-weight:300;font-size:17px;line-height:1.75}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[hidden]{display:none!important}

/* achtergrond */
body>:not(.achter){position:relative;z-index:1}
.achter{position:fixed;inset:0;z-index:0;background:var(--ink) center/cover no-repeat}
.achter video{width:100%;height:100%;object-fit:cover;display:block}
.achter::after,.tegel::after{content:"";position:absolute;inset:0;
  background:radial-gradient(rgba(0,0,0,.55) 1px,transparent 1.2px) 0 0/3px 3px}
.achter::after{background-color:rgba(0,0,0,.58)}

/* kop */
.kop{color:var(--white);padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:84px 0;min-height:clamp(430px,62vh,620px);display:flex;flex-direction:column}
.menu{max-width:1180px;width:100%;margin:0 auto;border-top:1px solid var(--line);padding-top:6px;display:flex;flex-wrap:wrap;gap:0 30px}
.menu a{text-decoration:none;font-size:19px;padding-block:4px}
.menu a:hover,.menu a[aria-current="page"]{color:var(--red)}
.merk{margin:auto;padding-block:40px 56px;width:min(440px,100%)}
.merk a{display:block}
.merk img{width:100%;aspect-ratio:10/3}
.merk p{margin:0;text-align:right;font-size:clamp(16px,2.4vw,19px);padding-right:6%;line-height:1.3}

/* blad op verloop */
.verloop{position:relative;overflow:hidden;background:linear-gradient(#000 0,#808080 46%,#fff 92%);
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:72px 96px}
.verloop::before{content:"";position:absolute;inset:0;background:url(images/logo-zwart.png) center top/1100px auto;opacity:.13}
.vel{position:relative;background:var(--paper);box-shadow:0 8px 22px rgba(0,0,0,.45);padding:44px clamp(20px,5vw,56px);text-align:center;margin-inline:auto;width:100%}
.vel p{margin:0}
.vel p+p{margin-top:1.5em}
.vel::before,.vel::after,.foto::before{content:"";position:absolute;left:50%;width:72px;height:30px;background:rgba(255,255,255,.42);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.vel::before{top:-15px;transform:translateX(-50%) rotate(-3deg)}
.vel::after{bottom:-15px;transform:translateX(-50%) rotate(5deg)}
.woord{font-family:var(--font-title);font-weight:700;letter-spacing:-.02em}
.woord i,.dienst h3 i{color:var(--slash);font-style:normal}
.home .vel{max-width:860px}

/* over */
.samen{position:relative;max-width:980px;margin:0 auto;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:0;align-items:end}
.samen .vel{max-width:none;width:calc(100% + 10px)}
.vel .titel{width:min(300px,100%);margin:-12px auto 10px}
.foto{position:relative;z-index:1;background:var(--white);padding:18px;box-shadow:0 8px 22px rgba(0,0,0,.45);margin-bottom:42px;margin-left:-6px}
.foto::before{top:-16px;transform:translateX(-50%) rotate(88deg)}
.foto img{width:100%;aspect-ratio:555/719;object-fit:cover}
.ondertekend{margin-top:1.5em}
.ondertekend>span{display:block}

/* witte blokken */
.wit{background:var(--white);padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:64px 80px}
.wit .breed{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.koptekst{width:min(600px,100%);margin-inline:auto}

/* diensten */
.tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tegel{position:relative;aspect-ratio:5/7;overflow:hidden;background:var(--ink) center/cover no-repeat;display:grid;place-items:center;padding:8px}
.tegel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tegel::after{background-color:rgba(0,0,0,.18)}
.dienst{position:relative;z-index:1;background:var(--white);width:100%;max-width:300px;padding:24px 12px;text-align:center}
.dienst h3{margin:0 0 12px;font-family:var(--font-title);font-weight:700;font-size:clamp(16px,1.9vw,19px);line-height:1.2}
.dienst p{margin:0;color:var(--red);font-size:16px;line-height:1.6}

/* aanbevelingen */
.stemmen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;align-items:start}
.stem{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;min-width:0}
.stem img{width:150px;height:150px;border-radius:50%;object-fit:cover;background:var(--paper);border:5px solid var(--white);box-shadow:0 0 0 1px #c4c4c4,0 3px 8px rgba(0,0,0,.25)}
.stem blockquote{margin:0;font-size:16px;line-height:1.85}
.stem footer{line-height:1.5}
.stem b{font-weight:400;display:block}
.stem i{font-style:normal;color:var(--slash)}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:40px;align-items:start;max-width:1040px;margin:0 auto}
.contact img{width:100%}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.veld{display:flex;flex-direction:column;min-width:0}
.veld.vol,form .verzend,form .klaar{grid-column:1/-1}
label{font-size:16px}
input,textarea{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--grey);border-radius:0;padding:6px 2px;width:100%}
input::placeholder,textarea::placeholder{color:var(--grey)}
textarea{min-height:120px;resize:vertical}
.verzend{background:var(--ink);color:var(--white);border:0;font:inherit;font-size:17px;padding:13px;cursor:pointer}
.verzend:hover{background:var(--grey)}
.verzend:disabled{opacity:.6;cursor:wait}
.klaar{margin:0;text-align:center}
.lokje{position:absolute;left:-9999px}

/* voet */
.voet{background:var(--ink);color:var(--white);text-align:center;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:20px 28px;display:flex;flex-direction:column;align-items:center;gap:6px}
.voet img{width:min(300px,100%);aspect-ratio:10/3}
.voet em{font-size:14px;margin-top:-16px}
.gegevens{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;font-size:16px}
.gegevens a{text-decoration:none}
.li{width:30px;height:30px;border-radius:50%;background:var(--white);color:var(--ink);display:grid;place-items:center}
.li svg{width:17px;height:17px;fill:currentColor}

@media (max-width:820px){
  .tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stemmen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .samen{grid-template-columns:1fr;gap:36px;justify-items:center}
  .samen .vel{width:100%}
  .foto{width:min(320px,100%);margin:0}
  .contact{grid-template-columns:1fr}
}
@media (max-width:520px){
  .kop{padding-top:40px;min-height:0}
  .menu{gap:0 20px}
  .tegels,.stemmen{grid-template-columns:1fr}
  .tegel{aspect-ratio:4/3}
  form{grid-template-columns:1fr}
}