*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#f7f3ec;color:#1d1d1a;font-family:Arial,Helvetica,sans-serif}
picture,img{display:block}
img{width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #c98a2b;outline-offset:3px}
.skip{position:absolute;left:14px;top:-80px;z-index:9;background:#fff;color:#1d1d1a;padding:12px 16px;font-weight:700}
.skip:focus{top:14px}
.wrap{width:min(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right),1100px);margin:auto}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:white;overflow:hidden;background:#222}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.16)),linear-gradient(0deg,rgba(0,0,0,.6),transparent 55%)}
.hero-content{margin:auto auto 0;position:relative;z-index:2;padding:max(42px,env(safe-area-inset-top)) 0 calc(46px + env(safe-area-inset-bottom))}
.logo{font-weight:700;letter-spacing:.18em;font-size:.82rem;margin-bottom:40px}
h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(2.4rem,min(13vw,14vh),6rem);line-height:.98;margin:0 0 24px}
.hero p{max-width:560px;line-height:1.7;color:rgba(255,255,255,.82);margin-bottom:26px}
.btn{display:inline-block;background:#fff;color:#1d1d1a;padding:16px 22px;font-weight:700;font-size:.86rem}
.intro{padding:70px 0}
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(2.3rem,10vw,4.4rem);line-height:1.05;margin:0 0 22px}
.intro p{font-family:Georgia,serif;font-size:clamp(1.3rem,5vw,2.2rem);line-height:1.4;color:#4f5d49}
.portfolio{padding:70px 0;background:#e8ded0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.services{padding:70px 0}
.service{padding:22px 0;border-top:1px solid rgba(0,0,0,.14)}
.service h3{font-size:1rem;margin:0 0 8px}
.service p{margin:0;color:#666;font-size:.88rem;line-height:1.6}
.contact{padding:70px 0}
.contactbox{background:#fff;padding:28px}
.contactbox address{font-style:normal;margin:1em 0 1.5em}
.contactbox address a{text-decoration:underline;text-underline-offset:3px;color:#1d1d1a}
.contactbox p,.contactbox address{color:#666;line-height:1.7}
.whatsapp{display:block;margin-top:24px;background:#1d8649;color:white;text-align:center;padding:17px 20px;font-weight:700}
.whatsapp.mail{background:#566050;margin-top:10px}
footer{background:#1b1b18;color:white;padding:34px 0 calc(34px + env(safe-area-inset-bottom));font-size:.75rem;text-align:center}
footer p{margin:0}
footer p+p{margin-top:8px;color:#bdb7aa}
footer a{text-decoration:underline;text-underline-offset:3px}
.gegevens{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;margin:1em 0 0}
.gegevens dt{color:#1d1d1a}
.gegevens dd{margin:0}
.sociaal{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.sociaal a{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.18);padding:9px 14px;font-weight:700;font-size:.9rem}
.sociaal a:hover{border-color:#1d1d1a}
.sociaal svg{width:18px;height:18px;fill:currentColor}
.keuze-resultaat .privacy a{text-decoration:underline}
@media(max-width:620px){
  .grid{grid-template-columns:1fr}
  }
@media(max-height:520px) and (orientation:landscape){.logo{margin-bottom:18px}h1{margin-bottom:14px}.hero p{margin:0 0 16px;line-height:1.5}.hero-content{padding-top:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}}
.maatvelden{margin:0 0 30px;padding:20px;background:#eee7dc}
.maatvelden h3{font-family:Georgia,serif;font-size:1.35rem;font-weight:400;margin:0 0 12px}
.maat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.maat-grid label{display:block;font-size:.72rem;font-weight:700;margin-bottom:6px}
.maat-grid input{width:100%;padding:13px 10px;border:1px solid rgba(0,0,0,.18);background:#fff;font-size:16px}
.maat-note{font-size:.75rem;color:#666;margin-top:10px;line-height:1.5}
@media(max-width:620px){.maat-grid{grid-template-columns:1fr}}
.keuzehulp{padding:70px 0;background:#1b1b18;color:#fff}
.keuzehulp .sub{max-width:650px;color:rgba(255,255,255,.7);line-height:1.7;margin:0 0 30px}
.keuze-box{background:#f7f3ec;color:#1d1d1a;padding:30px;max-width:760px}
.keuze-vraag h3{font-family:Georgia,serif;font-size:1.45rem;font-weight:400;margin:0 0 14px}
.opties{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.optie{position:relative}
.optie:last-child:nth-child(odd){grid-column:1/-1}
.optie input{position:absolute;opacity:0}
.optie label{display:block;background:#fff;border:1px solid rgba(0,0,0,.17);padding:15px;cursor:pointer;font-size:.85rem;border-radius:3px}
.optie input:checked+label{background:#566050;color:#fff;border-color:#566050}
.optie input:focus-visible+label{outline:3px solid #c98a2b;outline-offset:2px}
.keuze-resultaat{background:#e7ded0;padding:25px;margin-top:20px}
.keuze-resultaat h3{font-family:Georgia,serif;font-size:1.7rem;font-weight:400;margin:0 0 15px}
.keuze-resultaat p{color:#555;line-height:1.6;margin:8px 0}
.keuze-resultaat strong{color:#1d1d1a}
.keuze-resultaat .klein{font-size:.78rem;margin-top:15px}
.keuze-whatsapp{display:block;margin-top:20px;background:#1d8649;color:#fff;text-align:center;padding:17px;font-weight:700}
.keuze-whatsapp.mail{background:#566050;margin-top:10px}
.melding{color:#9b352c;font-weight:700;font-size:.9rem;margin:10px 0}
@media(max-width:620px){.keuzehulp{padding:60px 0}.keuze-box{padding:22px 16px}.opties{grid-template-columns:1fr}}
.keuze-stap{min-height:320px}
.stap-indicator{font-size:.72rem;letter-spacing:.16em;color:#65705d;font-weight:700;margin-bottom:22px}
.stap-nav{display:flex;gap:12px;margin-top:28px}
.stap-nav button{border:0;padding:17px 20px;font-weight:700;cursor:pointer;font-size:.9rem}
.stap-volgende{background:#566050;color:#fff;flex:1}
.stap-terug{background:#e7ded0;color:#24241e}
.keuze-stap .keuze-vraag{margin:0}
.keuze-stap .maatvelden{margin-top:22px}
.album-nav{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0 40px;padding:0;list-style:none}
.album-nav a{display:block;padding:12px 15px;background:white;font-size:14px;font-weight:700}
.album{margin:0 0 55px;scroll-margin-top:20px}
.album h3{font:normal clamp(2rem,7vw,3rem) Georgia,serif;margin:0 0 26px}
.album .grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
@media(min-width:621px){.album .grid:has(> .foto:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.album .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.album .grid > .foto:last-child:nth-child(odd):not(:only-child){grid-column:1/-1}}
.album .grid img{aspect-ratio:4/3;object-fit:cover}
.contactform{margin-top:20px;padding-top:20px;border-top:1px solid rgba(0,0,0,.12)}
.contactform .contact-intro{margin:0 0 18px}
.veld{margin-bottom:14px}
.veld label{display:block;font-size:.72rem;font-weight:700;margin-bottom:6px;color:#1d1d1a}
.veld .optioneel{font-weight:400;color:#555}
.veld input,.veld textarea{display:block;width:100%;padding:13px 10px;border:1px solid rgba(0,0,0,.18);background:#fff;color:#1d1d1a;font:16px/1.4 Arial,Helvetica,sans-serif;border-radius:0}
.veld textarea{resize:vertical;min-height:96px}
.veld [aria-invalid="true"]{border-color:#9b352c}
.keuze-resultaat .fout{color:#9b352c;font-size:.8rem;font-weight:700;margin:6px 0 0}
.keuze-resultaat .privacy{font-size:.75rem;margin:4px 0 0}
.keuze-resultaat .form-status{font-weight:700;margin:12px 0 0}
.keuze-resultaat .form-status:empty{display:none}
.contactform button{width:100%;border:0;font:700 1rem Arial,Helvetica,sans-serif;cursor:pointer}
.contactform button[disabled]{opacity:.7;cursor:progress}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bedankt{margin-top:20px;padding:20px;background:#fff}
.keuze-resultaat .bedankt h3{font-size:1.35rem;margin:0 0 8px}
.foto{display:block;cursor:zoom-in;outline-offset:2px}
.foto img{transition:opacity .2s}
.foto:hover img{opacity:.88}
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(17,17,15,.97);color:#fff;overflow:hidden;touch-action:pan-y pinch-zoom}
.lightbox::backdrop{background:rgba(17,17,15,.97)}
.lb-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 16px 24px}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%}
.lb-figure img{width:auto;height:auto;max-width:calc(100vw - 32px);max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);object-fit:contain;opacity:0;transition:opacity .25s ease;user-select:none;-webkit-user-drag:none}
.lb-figure img.klaar{opacity:1}
.lb-caption{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 16px;margin-top:18px;text-align:center;max-width:44rem}
.lb-titel{font-family:Georgia,serif;font-size:1.15rem}
.lb-tekst{color:rgba(255,255,255,.75);font-size:.85rem}
.lb-teller{font-size:.7rem;letter-spacing:.18em;color:rgba(255,255,255,.7);font-weight:700}
.lb-knop{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s}
.lb-knop:hover{background:rgba(255,255,255,.2)}
.lb-knop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lb-sluit{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.lb-vorige,.lb-volgende{top:50%;transform:translateY(-50%)}
.lb-vorige{left:16px}
.lb-volgende{right:16px}
.lb-laden{position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:lb-draai .8s linear infinite}
@keyframes lb-draai{to{transform:rotate(360deg)}}
@media(max-width:760px){.lb-stage{padding:60px 0 84px}.lb-figure img{max-width:100vw;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}.lb-vorige,.lb-volgende{top:auto;bottom:16px;transform:none}.lb-vorige{left:calc(50% - 60px)}.lb-volgende{right:calc(50% - 60px)}.lb-caption{padding:0 16px}}
@media(min-width:761px){.lb-figure img{max-width:calc(100vw - 176px)}}
@media(prefers-reduced-motion:reduce){.lb-figure img,.foto img,.lb-knop{transition:none}.lb-laden{animation-duration:2s}}
html.lb-open{overflow:hidden}
/* Links from the home page to the category pages */
a.service{display:block;position:relative;padding-right:40px}
a.service:after{content:"\2192";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.3rem;transition:transform .2s}
a.service:hover:after{transform:translate(4px,-50%)}
a.service:hover h3{text-decoration:underline;text-underline-offset:3px}
/* Category and privacy pages */
a.logo{display:inline-block}
.hero-sub h1{font-size:clamp(2.3rem,min(11vw,12vh),5rem)}
.hero-plain{min-height:0;background:#1b1b18}
.hero-plain .hero-content{padding-top:max(42px,env(safe-area-inset-top))}
.hero-plain:after{display:none}
.kruimel{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;font-size:.78rem;color:rgba(255,255,255,.75)}
.kruimel li+li:before{content:"/";margin-right:6px}
.kruimel a{text-decoration:underline;text-underline-offset:3px}
.inhoud{padding:70px 0;border-top:1px solid rgba(0,0,0,.08)}
.kolommen{display:grid;gap:34px}
@media(min-width:861px){.kolommen{grid-template-columns:1fr 1fr;gap:56px}}
.kolommen h3,.tekst h2{font:normal 1.6rem/1.2 Georgia,serif;margin:0 0 12px}
.kolommen p,.kolommen li,.tekst p,.tekst li{color:#555;line-height:1.75}
.kolommen ul,.tekst ul{padding-left:20px}
.kolommen strong,.tekst strong{color:#1d1d1a}
.stappen{list-style:none;margin:0;padding:0;counter-reset:stap}
.stappen li{counter-increment:stap;display:grid;grid-template-columns:56px 1fr;padding:22px 0;border-top:1px solid rgba(0,0,0,.14)}
.stappen li:before{content:counter(stap,decimal-leading-zero);font:normal 1.6rem Georgia,serif;color:#8a7c66}
.stappen h3{font-size:1rem;margin:0 0 8px}
.stappen p{margin:0;color:#666;font-size:.88rem;line-height:1.6}
.vragen{max-width:820px}
.vragen details{border-top:1px solid rgba(0,0,0,.14)}
.vragen details:last-child{border-bottom:1px solid rgba(0,0,0,.14)}
.vragen summary{cursor:pointer;padding:20px 36px 20px 0;font-weight:700;list-style:none;position:relative}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary:after{content:"+";position:absolute;right:4px;top:14px;font:normal 1.6rem Georgia,serif}
.vragen details[open] summary:after{content:"\2212"}
.vragen details p{margin:0 0 20px;color:#555;line-height:1.75}
.vragen a,.tekst a,.kolommen a,.stappen a{text-decoration:underline;text-underline-offset:3px}
.portfolio .album:last-child{margin-bottom:0}
.tekst{max-width:760px}
.tekst h2{margin-top:44px}
.tekst h2:first-child{margin-top:0}
.tekst .bijgewerkt{font-size:.8rem;color:#5f5f5f}
.album-meer{margin:18px 0 0}
.album-meer a{font-weight:700;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.voet-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 18px;padding:0;list-style:none;font-size:.82rem}
.voet-nav a{text-decoration:none;font-weight:700}
.voet-nav a:hover{text-decoration:underline}
[hidden]{display:none!important}
/* Keuzehulp: help under a question, and the extra fields of an answer (text, list, longer text) */
.stap-uitleg{margin:-6px 0 14px;font-size:.88rem;line-height:1.5;color:#555}
.maat-grid select,.maat-grid textarea{width:100%;padding:13px 10px;border:1px solid rgba(0,0,0,.18);background:#fff;color:#1d1d1a;font:16px/1.4 Arial,Helvetica,sans-serif;border-radius:0}
.maat-grid textarea{resize:vertical;min-height:80px}
.maat-grid [aria-invalid="true"]{border-color:#9b352c}
.maatveld-breed{grid-column:1/-1}
.verplicht{color:#9b352c;margin-left:2px}
/* Contact form in a contact block */
.contactbox .fout{color:#9b352c;font-size:.8rem;font-weight:700;margin:6px 0 0}
.contactbox .form-status{font-weight:700;margin:12px 0 0}
.contactbox .form-status:empty{display:none}
.contactbox .contactform{margin-top:24px}
.contactbox .contactform button{margin-top:6px}
.contactbox .privacy{font-size:.78rem}
.contactbox .bedankt{background:#f7f3ec;margin-top:24px}
/* Mededelingen: one bar at the top of every page; more than one take turns */
.mededelingen{display:grid;position:relative;z-index:5}
.mededeling{grid-area:1/1;transition:opacity .4s}
.mededeling[data-off],.mededeling[data-closed]{opacity:0;visibility:hidden}
.mededeling-inhoud{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:.86rem;line-height:1.45;font-weight:700}
.mededeling-inhoud p{flex:1;margin:0}
.mededeling-inhoud a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap;margin-left:6px}
.mededeling-titel{margin-right:6px}
.mededeling button{flex:none;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;opacity:.75;padding:0}
.mededeling button:hover{opacity:1;background:rgba(0,0,0,.12)}
.mededeling svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mededeling-holiday{background:#566050;color:#fff}
.mededeling-closed{background:#1b1b18;color:#fff}
.mededeling-hours{background:#7c2d24;color:#fff}
.mededeling-event{background:#4c3a6b;color:#fff}
.mededeling-promo{background:#1d6b45;color:#fff}
.mededeling-info{background:#e8ded0;color:#1d1d1a}
.mededeling-warning{background:#c98a2b;color:#1d1d1a}
@media(prefers-reduced-motion:reduce){.mededeling{transition:none}}