/* Dev4: selected Dev2 components with the approved fern hero and client imagery. */
@font-face{font-family:Anton;src:url('../assets/fonts/anton-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-500.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-600.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-700.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Oswald";src:url("../assets/fonts/oswald-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Oswald";src:url("../assets/fonts/oswald-500.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Oswald";src:url("../assets/fonts/oswald-600.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Oswald";src:url("../assets/fonts/oswald-700.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--mix-dark:#080b09;--mix-ink:#292b29;--mix-sage:#a9c7a3;--mix-heading-light:#dde5da;--mix-canopy:#174a35;--mix-moss:#2e4031;--mix-orange:#e86f2c;--mix-body-light:#e1e6dc}
*{box-sizing:border-box}body{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:16px;line-height:1.7;letter-spacing:0;color:var(--mix-ink)}button,input,textarea,select{font-family:'Hanken Grotesk',Arial,sans-serif}h1,h2,h3,p{text-align:center;float:none;max-width:100%;width:100%}h1,h2{font-family:Anton,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.015em;line-height:1.2;text-transform:uppercase;color:var(--mix-ink)}h1{font-size:clamp(36px,4vw,58px)}h2{font-size:clamp(32px,4.1vw,56px);margin:0 0 28px}h3{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;font-size:26px;line-height:1.35;text-transform:none;letter-spacing:0;color:inherit;margin:0 0 18px}p{font-family:'Hanken Grotesk',Arial,sans-serif;font-weight:400;font-size:16px;line-height:1.75;margin:0 0 18px;color:inherit}img{max-width:100%}.container{display:flow-root;overflow:clip}.container>*{float:none}.mainmenu{position:absolute;z-index:30}.mainmenu li,.mainmenu a{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;text-transform:uppercase;font-size:14px;letter-spacing:.11em}.mainmenu .logo{width:112px;height:112px}.mainmenu .klapper{float:none;clear:both;padding-top:38px;margin:0}.mainmenu li{line-height:2.6}
.topper{height:100svh!important;min-height:680px}.topper .middle{width:calc(100% - 48px);max-width:900px}.topper .titletopper{float:none;padding:28px 0}.topper h1{color:white;line-height:1.25;margin:0;font-size:clamp(36px,4.1vw,58px);letter-spacing:.08em}.hero-sub{float:none!important;display:block;margin:25px 0 0!important;font-size:15px!important;color:#dde5da;letter-spacing:.1em!important}.topper .btngreen{bottom:-68px;font-family:Oswald,'Arial Narrow',sans-serif;letter-spacing:.1em;font-size:14px;background:#a5b0a5;color:#182c1e;border:0;padding:5px 28px;min-height:42px}.topper .titletopper::before,.topper .titletopper::after{width:55px;height:2px}.mainmenu .logo .kleur{opacity:1}
.packages{float:none;width:100%;padding:85px max(28px,8vw) 80px;background:var(--mix-dark);color:#dde5da;text-align:center}.package-heading{max-width:760px;margin:0 auto 30px}.package-heading h2{font-size:clamp(32px,4.3vw,62px);color:var(--mix-sage);margin-bottom:24px}.package-heading h3{font-size:clamp(25px,2.8vw,38px);line-height:1.4;color:#dde5da;margin-bottom:24px}.package-heading p{font-size:17px;max-width:660px;margin:0 auto 36px}.plans{max-width:1220px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0 auto 30px}.plan{display:flex;flex-direction:column;align-items:center;padding:34px 16px 22px;min-height:380px;border:0;border-radius:0;float:none;width:auto;color:#223a25}.plan-0{background:#e4e9e1}.plan-1{background:#d4ddd0}.plan-2{background:#a5b0a5}.plan-3{background:#7c8d7c;color:#142c18}.plan-4{background:#48614b;color:#fff}.plan .plan-name{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:clamp(16px,1.65vw,25px);font-weight:700;letter-spacing:-.025em;line-height:1.3;min-height:35px;margin-bottom:18px;white-space:nowrap;color:inherit}.plan p{color:inherit}.plan .plan-tag{font-size:14px;line-height:1.5;min-height:42px;margin:0}.plan .plan-price{margin:24px 0!important}.plan-price span{font-family:Oswald,'Arial Narrow',sans-serif;font-size:clamp(24px,2.3vw,34px);font-weight:400;letter-spacing:0;line-height:1.3}.plan-price small{font-size:12px;line-height:1.5;margin-top:8px}.plan .plan-visits{font-size:13px;line-height:1.7;margin:0 0 20px;min-height:52px}.plan-details{margin-top:auto;font-size:13px;font-family:'Hanken Grotesk',Arial,sans-serif;line-height:1.5;min-height:44px}.package-foot{max-width:980px;font-size:13px;margin:0 auto 26px;color:#dde5da}.packages>.btnlightgreen{display:inline-flex;align-items:center;justify-content:center;font-family:Oswald,'Arial Narrow',sans-serif;font-size:14px;min-height:42px;letter-spacing:.06em;padding:7px 25px}
.mix-section,.client-gallery{float:none;padding:90px max(24px,6vw);margin:0;width:100%;text-align:center;clear:both}.section-intro{max-width:760px;margin:0 auto 44px;float:none}.section-intro p{max-width:640px;margin:0 auto}.mix-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1200px;margin:auto}.mix-service{float:none;width:auto}.service-photo{width:100%;height:320px;position:relative;display:block;border:0;padding:0;background:none;cursor:pointer;overflow:hidden}.service-photo img{float:none;width:100%;height:100%;object-fit:cover;transition:transform .25s}.service-photo:hover img{transform:scale(1.025)}.service-photo span{position:absolute;left:15px;top:15px;padding:4px 11px;background:#2e4031;color:#dde5da;font-size:14px}.mix-service h3{margin:24px 0 14px}.mix-service p{margin:0 auto 22px}.mix-text-link{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:15px;font-weight:600;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;cursor:pointer;padding:10px 0;min-height:44px}.mix-button{display:inline-flex;align-items:center;justify-content:center;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:15px;font-weight:700;line-height:1.5;background:var(--mix-orange);color:#fff;border:0;border-radius:3px;padding:14px 25px;min-height:48px;max-width:100%;cursor:pointer;letter-spacing:0;text-transform:none}.mix-button:hover{background:#f28c38}.mix-statement{width:100%;float:none;clear:both;background:var(--mix-dark);padding:80px 24px;text-align:center}.mix-statement h2{color:#dde5da}.mix-statement p{color:#e1e8db;max-width:750px;margin:0 auto 28px}.mix-faq-items{max-width:840px;margin:0 auto}.mix-faq details{display:block;border-bottom:1px solid #d7dfd3}.mix-faq summary{list-style:none;cursor:pointer;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:17px;font-weight:500;position:relative;padding:23px 38px 23px 16px;text-align:center;min-height:60px}.mix-faq summary::-webkit-details-marker{display:none}.mix-faq summary::after{content:'+';position:absolute;right:12px;top:20px;font-size:23px;color:#53694e}.mix-faq details[open] summary::after{content:'−'}.mix-faq details p{margin:0 auto;padding:0 24px 25px;max-width:780px;font-size:16px;color:#4b5c43}.mix-faq summary:focus-visible{outline:2px solid #48614b;outline-offset:3px}
.client-gallery>h2{font-size:clamp(28px,3vw,42px);margin:0 0 42px;color:#292b29}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1200px;margin:auto;grid-auto-flow:row dense}.gallery-grid .photo-button{height:350px}.gallery-grid .photo-button:nth-child(7n+1){grid-column:span 2}.gallery-grid .photo-button img{float:none;object-fit:cover}.mix-about{float:none;display:grid;grid-template-columns:1fr 1fr;width:100%;background:var(--mix-dark);clear:both}.mix-about-photo{min-height:670px}.mix-about-photo img{float:none;width:100%;height:100%;object-fit:cover;object-position:center 30%}.mix-about-copy{float:none;padding:70px 55px;display:flex;flex-direction:column;align-items:center;justify-content:center}.mix-about-copy h2{color:#dde5da;font-size:clamp(32px,3.6vw,50px)}.mix-about-copy p{color:#e1e6dc;max-width:620px}.mix-about-copy .mix-signature{font-size:20px;margin-top:10px}.mix-signature span{font-size:13px}.mix-about-copy .contactbtn{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:15px;text-transform:none;margin:6px 0 0}
.mix-form-section{float:none;width:100%;padding:80px max(24px,6vw);display:grid;grid-template-columns:1fr 1.5fr;gap:60px;background:#e8ede3;clear:both}.mix-form-intro{float:none}.mix-form-intro h2{font-size:clamp(32px,4vw,54px)}.mix-form-intro>p{max-width:500px;margin:0 auto 28px;color:#4b5c43}.mix-form-contact{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:32px}.mix-form-contact a{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:16px}.mix-form-contact p{font-size:14px;margin:5px 0 0}.mix-request-form{float:none;display:block;width:100%;max-width:900px;margin:0 auto}.mix-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.mix-request-form label{display:block;width:100%;font-size:14px;font-weight:600;margin:0 0 18px;color:#292b29;float:none;text-align:left}.mix-request-form input,.mix-request-form select,.mix-request-form textarea{display:block;width:100%;background:white;border:1px solid #bec8b7;border-radius:3px;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:16px;line-height:1.5;padding:13px 14px;margin:8px 0 0;float:none;color:#292b29}.mix-request-form textarea{min-height:125px;resize:vertical}.mix-request-form input::placeholder,.mix-request-form textarea::placeholder{color:#6a7465;opacity:1}.mix-request-form .mix-form-privacy{font-size:13px;color:#4b5c43;margin:0 0 18px}.mix-form-privacy a{text-decoration:underline}.mix-request-form>.mix-button{width:100%}.mix-request-form .fout{position:absolute;width:1px;height:1px;opacity:0;left:-9999px}
.mix-footer{float:none;width:100%;background:var(--mix-dark);color:#dde5da;padding:58px max(24px,5vw) 26px;white-space:normal;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:14px}.mix-footer-top{display:grid;grid-template-columns:.6fr 1.3fr 1fr 1fr;gap:38px;max-width:1320px;margin:0 auto}.mix-footer-top>div{min-width:0}.mix-footer .footer-logo{display:block;width:76px;margin:0 auto}.mix-footer .footer-logo img{float:none;object-fit:contain;width:76px;height:100px}.mix-footer h2{color:white;font-size:34px;margin-bottom:15px}.mix-footer h3{font-size:13px;letter-spacing:.12em;color:#a9bd98;margin-bottom:18px;font-weight:500}.mix-footer p{font-size:14px;color:#dde5da;margin:0 0 15px}.mix-footer-top>div>a{display:block;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:14px;color:#dde5da;margin:0 0 8px;text-align:center;overflow-wrap:anywhere}.mix-footer-bottom{float:none;clear:both;border-top:1px solid #364437;padding-top:20px;max-width:1320px;margin:35px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.mix-footer-bottom>span{float:none;position:static;transform:none;font:inherit;color:#9bab94;width:auto;white-space:normal}.mix-footer-bottom a{font:inherit;color:#9bab94;display:inline-block;margin-left:20px}.mix-footer-bottom>div{text-align:right}
.client-dialog{font-family:'Hanken Grotesk',Arial,sans-serif}.client-dialog h2{font-family:Anton,'Arial Narrow',sans-serif;color:#292b29;letter-spacing:.015em}.client-dialog h2#plan-dialog-title{font-family:'Hanken Grotesk',Arial,sans-serif;text-transform:none}.client-dialog p,.client-dialog h4,.client-dialog li{text-align:center}.client-dialog p{font-size:16px}.client-dialog h4{float:none;font-family:Oswald,'Arial Narrow',sans-serif;font-size:18px}.client-dialog li{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:16px;letter-spacing:0}.client-dialog .dialog-cta{font-family:'Hanken Grotesk',Arial,sans-serif;background:var(--mix-orange);color:#fff;font-weight:700;letter-spacing:0;border-radius:3px}.customlightbox2 .paper h2{font-family:Anton,'Arial Narrow',sans-serif;font-size:32px}.customlightbox2 .paper p{text-align:center}.customlightbox2 .contactform input,.customlightbox2 .contactform textarea{font-family:'Hanken Grotesk',Arial,sans-serif}.customlightbox2 .contactform form input[type=submit]{background:#e86f2c;color:white;font-family:'Hanken Grotesk',Arial,sans-serif;min-height:44px;font-weight:700;text-transform:none}.service-detail-dialog{width:min(900px,calc(100% - 32px))}.service-detail-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;clear:both;margin:28px 0}.service-detail-photos img{float:none;width:100%;height:250px;object-fit:cover}.service-detail-dialog .dialog-cta{display:block;width:100%;padding:14px 20px;border:0;cursor:pointer}
@media(max-width:1100px){.plans{gap:12px}.plan{padding:28px 10px 20px}.plan .plan-name{font-size:18px}.plan .plan-tag{font-size:13px}.service-photo{height:260px}.mix-about-copy{padding:50px 32px}.mix-about-photo{min-height:700px}.mix-form-section{gap:36px}.mix-footer-top{gap:24px}}
@media(max-width:1020px){.mainmenu{position:fixed;width:100%;height:76px}.mainmenu .logo{width:135px;height:48px}.mainmenu .klapper{padding-top:100px}.mainmenu .klapper li{font-size:18px;line-height:2.8}.mainmenu .klapper a{font-size:18px}.mainmenu .logo .mobile{max-height:50px;object-fit:contain;object-position:left center}.plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.plan .plan-name{font-size:24px}.plan-price span{font-size:32px}.plan .plan-tag{font-size:14px}.mix-service-grid{gap:22px}.service-photo{height:245px}.mix-about{grid-template-columns:1fr 1fr}.mix-about-copy h2{font-size:38px}.mix-about-copy p{font-size:15px}.mix-form-section{grid-template-columns:1fr;gap:40px}.mix-form-intro>p{max-width:650px}.mix-form-contact{margin-top:20px}.mix-footer-top{grid-template-columns:1fr 1fr}.mix-footer .footer-logo{margin:auto}.mix-footer h2{font-size:34px}}
@media(max-width:700px){body{font-size:16px}.topper{min-height:660px}.topper .middle{top:47%}.topper h1{font-size:38px;letter-spacing:.05em}.topper .hero-sub{font-size:12px!important;letter-spacing:.06em!important}.topper .btngreen{font-size:13px;bottom:-65px}.packages{padding:62px 22px}.package-heading h2{font-size:36px}.package-heading h3{font-size:28px}.package-heading p{font-size:16px;line-height:1.65}.plans{grid-template-columns:1fr 1fr;gap:16px}.plan{min-height:365px;padding:28px 12px 20px}.plan .plan-name{font-size:20px;min-height:30px}.plan .plan-tag{font-size:13px;min-height:42px}.plan .plan-visits{font-size:12px}.plan-price span{font-size:28px}.plan:last-child{grid-column:1/-1}.package-foot{font-size:12px}.mix-section,.client-gallery{padding:62px 24px}.section-intro{margin-bottom:32px}.section-intro h2{font-size:38px}.mix-service-grid{grid-template-columns:1fr;gap:42px}.service-photo{height:330px}.mix-service p{max-width:500px}.mix-service h3{font-size:26px}.mix-statement{padding:62px 24px}.mix-statement h2{font-size:34px}.mix-statement p{font-size:16px}.mix-faq summary{font-size:16px;padding-left:0}.mix-faq details p{padding-inline:10px}.gallery-grid{gap:12px;grid-template-columns:1fr 1fr}.gallery-grid .photo-button{height:230px}.gallery-grid .photo-button:nth-child(7n+1){grid-column:span 2;height:280px}.client-gallery>h2{font-size:32px;line-height:1.3;margin-bottom:30px}.mix-about{grid-template-columns:1fr}.mix-about-photo{min-height:0;height:500px}.mix-about-copy{padding:55px 24px}.mix-about-copy h2{font-size:40px}.mix-about-copy p{font-size:16px}.mix-form-section{padding:58px 24px}.mix-form-intro h2{font-size:38px}.mix-form-grid{grid-template-columns:1fr}.mix-footer{padding:48px 24px 25px}.mix-footer-top{grid-template-columns:1fr;gap:32px}.mix-footer h2{font-size:34px}.mix-footer .footer-logo{width:70px}.mix-footer-bottom{flex-direction:column;gap:14px;text-align:center}.mix-footer-bottom>div{text-align:center}.mix-footer-bottom a{margin:0 8px}.service-detail-photos img{height:180px}.service-detail-dialog h2{font-size:30px}.client-dialog{padding:26px}.mix-request-form input,.mix-request-form textarea,.mix-request-form select{font-size:16px}}
@media(max-width:370px){.plans{grid-template-columns:1fr}.plan:last-child{grid-column:auto}.gallery-grid .photo-button{height:180px}.topper h1{font-size:32px}.service-photo{height:260px}.mix-about-photo{height:420px}}
body h1,body h2,body h3,body p{text-align:center!important}
#contact.mix-form-section{padding:80px max(24px,6vw)}
.topper .btngreen{font-family:'Hanken Grotesk',Arial,sans-serif;font-weight:600;text-transform:none;letter-spacing:.03em}
.mix-form-privacy a{color:inherit}
@media(max-width:700px){#contact.mix-form-section{padding:58px 24px}}
/* Dark services and image gallery, requested 28 October 2026. */
#diensten.mix-services,#projecten.client-gallery{background:var(--mix-dark);color:#dde5da}
#diensten.mix-services h2,#diensten.mix-services h3,#diensten.mix-services p,#diensten.mix-services .mix-text-link,#projecten.client-gallery h2,#projecten.client-gallery h3,#projecten.client-gallery p{color:#dde5da}
/* Full viewport hero and larger service line. */
header.topper{width:100vw;max-width:100%;height:100vh!important;min-height:0!important;background-size:cover;background-position:center}
header.topper .hero-sub{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;font-size:clamp(18px,2.3vw,34px)!important;text-transform:uppercase;letter-spacing:.045em!important;line-height:1.4}
@media(max-width:700px){header.topper .hero-sub{font-size:clamp(12px,3.8vw,22px)!important;letter-spacing:.02em!important}}
@media(max-height:500px){header.topper .titletopper{padding:12px 0}header.topper h1{font-size:clamp(24px,6.5vh,38px)}header.topper .hero-sub{margin-top:14px!important;font-size:clamp(13px,4.5vh,22px)!important}header.topper .btngreen{bottom:-50px;min-height:36px;padding-block:3px}}
/* Larger hero typography; keep the existing explicit line breaks. */
header.topper h1{font-size:clamp(48px,5.8vw,82px);white-space:nowrap}
header.topper .hero-sub{font-size:clamp(22px,2.8vw,42px)!important;white-space:nowrap}
header.topper .btngreen{font-size:17px;white-space:nowrap}
@media(max-width:700px){header.topper h1{font-size:clamp(31px,11.5vw,52px)}header.topper .hero-sub{font-size:clamp(13px,4.4vw,26px)!important}header.topper .btngreen{font-size:15px}}
@media(max-height:500px){header.topper h1{font-size:clamp(27px,8vh,44px)}header.topper .hero-sub{font-size:clamp(15px,5vh,25px)!important}}
/* Light introduction copy on the black subscription section. */
#abonnementen .package-heading>p{color:#dde5da}
/* Native mobile carousel. Desktop pricing retains its existing layout. */
.mobile-pricing-nav{display:none}
@media(max-width:700px){
 #abonnementen .plans{--mobile-plan-width:min(78vw,330px);display:flex;position:relative;align-items:stretch;gap:18px;width:calc(100% + 44px);max-width:none;margin:0 -22px 0;padding:28px var(--plan-edge,11vw) 28px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--plan-edge,11vw);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;isolation:isolate}
 #abonnementen .plans::-webkit-scrollbar{display:none}
 #abonnementen .plans .plan,#abonnementen .plans .plan:last-child{flex:0 0 var(--mobile-plan-width);width:var(--mobile-plan-width);max-width:none;min-width:0;grid-column:auto;min-height:385px;padding:32px 24px 24px;scroll-snap-align:center;scroll-snap-stop:always;transform:scale(.94);opacity:.68;transition:transform 240ms cubic-bezier(.2,.7,.3,1),opacity 240ms ease,box-shadow 240ms ease;transform-origin:center;box-shadow:none}
 #abonnementen .plans .plan.is-centered{transform:scale(1.025);opacity:1;box-shadow:0 12px 28px #0005;z-index:2}
 #abonnementen .plans .plan .plan-name{font-size:27px;min-height:36px}
 #abonnementen .plans .plan .plan-price span{font-size:34px}
 #abonnementen .plans .plan .plan-tag{font-size:15px}
 #abonnementen .plans .plan .plan-visits{font-size:14px}
 #abonnementen .plans .plan .plan-details{font-size:14px;transition:opacity 160ms ease,transform 160ms ease}
 #abonnementen .plans .plan-details:active{transform:translateY(1px);opacity:.8}
 .mobile-pricing-nav{display:grid;grid-template-columns:65px 1fr 65px;align-items:center;gap:2px 6px;max-width:400px;margin:0 auto 24px;color:#dde5da}
 .pricing-step{min-height:44px;padding:8px 0;border:0;background:none;color:#dde5da;font:500 13px 'Hanken Grotesk',sans-serif;cursor:pointer;transition:opacity 160ms ease,transform 160ms ease}
 .pricing-step:active{transform:scale(.95)}.pricing-step:disabled{opacity:.3;cursor:default}
 .pricing-dots{display:flex;align-items:center;justify-content:center;gap:0;min-width:0}
 .pricing-dot{display:grid;place-items:center;flex:0 0 28px;width:28px;height:44px;border:0;background:none;padding:0;cursor:pointer}
 .pricing-dot::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#647260;transition:width 220ms ease,background 220ms ease}
 .pricing-dot[aria-current=true]::after{width:17px;border-radius:5px;background:#dde5da}
 .pricing-status{grid-column:1/-1;color:#dde5da;font-size:12px;line-height:1.4;margin:0;min-height:18px}
 #abonnementen .plans:focus-visible{outline:2px solid #a9c7a3;outline-offset:-3px}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){#abonnementen .plans .plan,.pricing-step,.pricing-dot::after,#abonnementen .plans .plan-details{transition:none!important}}
@media(max-width:700px){.mobile-pricing-nav{grid-template-columns:60px minmax(0,1fr) 60px}.pricing-dot{flex:0 0 24px;width:24px}}
@media(max-width:700px){#abonnementen .plans{--mobile-plan-width:min(72vw,310px)}}
/* Rounded pricing cards and a golden-orange highlight for GROEN. */
#abonnementen .plans .plan{border-radius:24px;border:2px solid transparent}
#abonnementen .plans .plan[data-plan="2"]{border-color:#e9aa45}
.plan-choice-badge{position:absolute;top:-14px;right:14px;z-index:3;display:inline-block;width:auto;padding:6px 12px;border-radius:999px;background:#e9aa45;color:#17281c;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
/* Share the existing garden-check button orange with the highlighted plan. */
#abonnementen .plans .plan[data-plan="2"]{border-color:var(--mix-orange)}
.plan-choice-badge{background:var(--mix-orange)}
.dev2-request-form .selected-package{background:#eff2eb;border-left:4px solid var(--mix-orange);padding:12px 16px;font-size:16px;margin:0 0 22px;color:#292b29}
.dev2-request-form [hidden]{display:none!important}
.dev2-request-form .dev2-upload{padding:16px;border:1px dashed #8b9d7f;border-radius:4px;background:#f3f5ef}
.dev2-request-form .dev2-upload>span{font-weight:400}.dev2-request-form .dev2-upload small{font-size:12px;color:#4b5c43;display:block;margin-top:8px}
.dev2-request-form .dev2-upload input{padding:7px 0;border:0;background:none;line-height:1.5;height:auto}
.dev2-request-form .form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dev2-request-form .dev2-form-error{padding:12px 16px;color:#a12828;background:#fff3ee;border:1px solid #e9b6a7;font-size:15px}
.dev2-request-form .mix-button:disabled{opacity:.65;cursor:wait}
.dev2-form-success{background:#fff;border:1px solid #becdb1;border-radius:8px;padding:32px;text-align:center;color:#292b29}
.dev2-form-success h3{font-family:Oswald,sans-serif;font-size:28px;margin:0 0 16px}.dev2-form-success p{font-size:16px}.dev2-form-success .mix-button{margin-top:12px}
.customlightbox2{position:fixed;inset:0;height:100dvh!important;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.customlightbox2 .breed{width:min(900px,100%);padding:16px;margin:0 auto;float:none}
.customlightbox2 .paper{padding:32px;margin:0;border-radius:12px;float:none;background:#fff;color:#292b29}
.customlightbox2 .paper article{float:none;display:block}
.customlightbox2 .paper h2{font-family:Anton,'Arial Narrow',sans-serif;font-size:28px;line-height:1.25;margin:0 40px 20px 0;width:calc(100% - 40px);text-transform:uppercase}
.customlightbox2 .paper article>p{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:16px;line-height:1.55;margin:0 0 26px;color:#505b4d}
.customlightbox2 .closingbtn{width:40px;height:40px;top:18px;right:18px;border-radius:50%;background-color:#eff2eb;font-size:14px;background-size:100% auto}
.customlightbox2 .dev2-request-form{margin:0;float:none;overflow:visible}
.customlightbox2 .dev2-request-form label{position:relative;display:block;float:none;width:100%;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:15px;font-weight:600;line-height:1.5;margin:0 0 20px;padding:0;color:#292b29}
.customlightbox2 .dev2-request-form input,.customlightbox2 .dev2-request-form select,.customlightbox2 .dev2-request-form textarea{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.5;float:none;margin:8px 0 0;padding:13px 14px;border:1px solid #bec8b7;border-radius:4px;width:100%;color:#292b29;background:#fff}
.customlightbox2 .dev2-request-form textarea{min-height:98px}
.customlightbox2 .dev2-request-form .dev2-upload{padding:16px;background:#f3f5ef;border:1px dashed #8b9d7f;border-radius:4px}
.customlightbox2 .dev2-request-form .dev2-upload input{padding:7px 0;border:0;background:none;height:auto}
.customlightbox2 .dev2-request-form input::placeholder,.customlightbox2 .dev2-request-form textarea::placeholder{color:#6a7465;opacity:1}
.customlightbox2 .dev2-request-form .mix-button{font-family:'Hanken Grotesk',Arial,sans-serif;font-size:16px;color:white;background:var(--mix-orange);font-weight:700;line-height:1.5;letter-spacing:0;text-transform:none;min-height:48px;padding:14px 24px;width:100%}
.customlightbox2 .dev2-request-form .mix-form-privacy{font-size:14px;color:#4b5c43;line-height:1.6;margin:0 0 18px}
@media(max-width:700px){.customlightbox2 .breed{padding:12px}.customlightbox2 .paper{padding:28px 20px}.customlightbox2 .paper h2{font-size:25px}.customlightbox2 .dev2-request-form .mix-form-grid{grid-template-columns:1fr}.customlightbox2 .closingbtn{top:12px;right:12px}.customlightbox2 .paper article>p{font-size:16px}}
.dev2-request-form[hidden]{display:none!important}
.customlightbox2 .dev2-request-form .dev2-upload>span{position:static;float:none;display:inline;width:auto;padding:0;margin:0;background:transparent;border:0;font-size:inherit;font-weight:400}

/* Center the complete hero stack, including its CTA, in the viewport. */
header.topper{display:flex;align-items:center;justify-content:center;position:relative;width:100vw;max-width:100%;height:100vh!important;height:100dvh!important;padding:24px;}
header.topper .middle{position:static;inset:auto;transform:none;display:flex;flex-direction:column;align-items:center;width:100%;max-width:900px;margin:0;text-align:center;}
header.topper .titletopper{position:relative;width:100%;}
header.topper .hero-sub{margin:25px 0 0!important;}
header.topper .btngreen{position:static;inset:auto;transform:none;display:inline-flex;align-items:center;justify-content:center;float:none;width:auto;margin:28px 0 0;}
.whatsapp-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:75;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 4px 20px #0004;transition:transform .18s,background .18s;}
.whatsapp-float svg{display:block;width:32px;height:32px;fill:currentColor;}
.whatsapp-float:hover{background:#1ebc59;transform:translateY(-3px);}
.whatsapp-float:focus-visible{outline:3px solid #fff;outline-offset:4px;}
.customlightbox2on .whatsapp-float,.customlightboxon .whatsapp-float,.open .whatsapp-float{visibility:hidden;}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none;}.whatsapp-float:hover{transform:none;}}

/* Hero without decorative divider lines. */
header.topper .titletopper::before,header.topper .titletopper::after{display:none;content:none;}

/* About section layout from the supplied reference: split editorial panel on
   larger screens, with a compact centred reading order on mobile. */
.mix-about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--mix-dark);min-height:560px;}
.mix-about-photo{min-height:560px;}
.mix-about-copy{padding:64px clamp(32px,5vw,86px);}
.mix-about-copy h2{max-width:420px;}
.mix-about-copy p{max-width:560px;}
@media(min-width:701px){
  .mix-about-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
  .mix-about-copy>*{width:100%;}
  .mix-about-copy h2,.mix-about-copy p,.mix-about-copy .mix-signature{margin-left:auto;margin-right:auto;}
}
@media(max-width:700px){
  .mix-about{display:grid;grid-template-columns:1fr;min-height:0;padding:0 24px 54px;}
  .mix-about-copy{display:contents;}
  .mix-about-copy h2{order:1;margin:0;padding:58px 0 24px;font-size:36px;line-height:1.2;}
  .mix-about-photo{order:2;width:min(220px,70vw);height:270px;min-height:0;margin:0 auto 28px;}
  .mix-about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;}
  .mix-about-copy p{order:3;max-width:600px;margin:0 auto 18px;font-size:15px;}
  .mix-about-copy .mix-signature{order:4;margin-top:10px;}
  .mix-about-copy .mix-button{order:5;margin-top:8px;}
}

/* Keep the wide gallery tiles framed on the upper portion of each portrait image,
   matching the intended bench/terrace crop while preserving the full image in the lightbox. */
.gallery-grid .photo-button:nth-child(7n+1) img{object-position:center top;}
.gallery-grid .photo-button img,.service-photo img,.service-detail-photos img{object-fit:contain;object-position:center;}
.gallery-grid .photo-button,.gallery-grid .photo-button:nth-child(7n+1){height:clamp(220px,30vw,420px);background:var(--mix-dark);}
.service-detail-photos img{height:auto;max-height:440px;}
.mix-about-photo img{object-fit:contain!important;}
.service-photo:hover img,.photo-button:hover img{transform:none;}
.mainmenu .logo .wit,.mainmenu .logo .mobile,.mix-footer .footer-logo img{filter:invert(1) grayscale(1) brightness(2);mix-blend-mode:screen;}
.gallery-grid .photo-button[data-image="assets/client-muur.webp"] img{object-fit:cover;object-position:center bottom;}

/* Shared interaction and reading constraints. */
.mix-service p,.mix-statement p,.section-intro p{max-width:65ch;}
.mix-button:focus-visible,.photo-button:focus-visible,.service-photo:focus-visible{outline:3px solid #e86f2c;outline-offset:5px;}
@media(min-width:701px){
  .mix-about{display:flex;flex-direction:column;align-items:center;padding:64px 24px;min-height:0;}
  .mix-about-copy{display:contents;}
  .mix-about-copy h2{order:1;margin:0 0 28px;}
  .mix-about-photo{order:2;width:220px;height:270px;min-height:0;margin:0 0 28px;}
  .mix-about-photo img{display:block;object-position:center 25%;}
  .mix-about-copy p{order:3;max-width:60ch;}
  .mix-about-copy .mix-signature{order:4;}
  .mix-about-copy .mix-button{order:5;width:auto;}
}
@media(min-width:1021px){
  .container{padding-left:0;}
  header.topper{width:100%;max-width:100%;margin-left:0;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
  .photo-button img,.service-photo img,.mix-button,.plan{transition:none!important;}
  .photo-button:hover img,.service-photo:hover img{transform:none;}
}

/* Desktop navigation stays available while the page scrolls. The menu itself
   can scroll if the viewport is too short, while mobile keeps its existing menu. */
@media(min-width:1021px){
  body{background:var(--mix-dark);}
  .container::before{display:none;}
  .mainmenu{position:fixed;top:2rem;left:4em;max-height:calc(100vh - 4rem);overflow-y:auto;overflow-x:visible;overscroll-behavior:contain;}
  body .mainmenu li,body .mainmenu li a{color:#dde5da!important;}
  .mainmenu .logo .kleur{opacity:0!important;}
  .mainmenu .logo .wit{opacity:1!important;}
}

/* Client review: consistent scale, centred composition and aligned service links. */
.package-heading h2,.section-intro h2,.mix-statement h2,.client-gallery>h2,.mix-about-copy h2,.mix-form-intro h2{font-size:clamp(32px,3.1vw,46px);line-height:1.18;}
.package-heading h3{font-size:clamp(24px,2.1vw,30px);}
.section-intro{max-width:620px;}
.section-intro>p{max-width:42ch;}
.mix-section,.client-gallery,.packages{padding-block:100px;}
.mix-service{display:flex;flex-direction:column;align-items:center;}
.mix-service .mix-text-link{margin-top:auto;}
.service-photo span{display:none;}
.plan .plan-name{font-size:clamp(14px,1.35vw,21px);white-space:nowrap;overflow-wrap:normal;word-break:normal;}
.plan-price span{font-family:'Hanken Grotesk',sans-serif;font-weight:400;}
.mix-footer .footer-logo,.mix-footer .footer-logo img{width:100px;height:120px;object-fit:contain;}
.mix-form-section{grid-template-columns:1fr;gap:36px;}
.mix-form-intro,.mix-request-form{width:100%;max-width:760px;margin-inline:auto;}
@media(min-width:1021px){
  .mainmenu{left:24px;width:150px;}
  .mainmenu li,.mainmenu a{font-size:12px;letter-spacing:.08em;}
  .mainmenu .logo{width:90px;height:90px;}
  .packages,.mix-section,.client-gallery,.mix-about,.mix-statement,.mix-form-section,.mix-footer{padding-left:max(190px,12vw);padding-right:max(40px,7vw);}
  .plans,.mix-service-grid,.gallery-grid{max-width:1100px;}
}
@media(max-width:700px){
  .mix-section,.client-gallery,.packages{padding-block:64px;}
}
@media(max-width:1020px){
  body .mainmenu,body.scrolled .mainmenu{background:transparent!important;box-shadow:none;}
  body.open .mainmenu,body .mainmenu .klapper{background:var(--mix-dark)!important;}
  body .mainmenu .klapper li,body .mainmenu .klapper li a{color:#dde5da!important;}
  body .mainmenu .hamburger{filter:brightness(0) invert(1);}
}
@media(max-width:700px){
 body .mainmenu{transition:transform 200ms ease;}
 body.mobile-nav-hidden:not(.open):not(.customlightbox2on) .mainmenu{transform:translateY(-110%);pointer-events:none;}
 #abonnementen.packages{padding:22px 22px 26px;}
 #abonnementen .package-heading{margin-bottom:8px;}
 #abonnementen .package-heading h2{font-size:clamp(25px,4.7svh,34px);margin-bottom:10px;}
 #abonnementen .package-heading h3{font-size:clamp(20px,3.4svh,25px);line-height:1.25;margin-bottom:10px;}
 #abonnementen .package-heading p{font-size:16px;line-height:1.55;margin-bottom:12px;}
 #abonnementen .plans{--mobile-plan-width:min(68vw,280px);padding-block:14px;gap:12px;}
 #abonnementen .plans .plan,#abonnementen .plans .plan:last-child{min-height:0;padding:22px 14px 12px;}
 #abonnementen .plans .plan .plan-name{font-size:19px;min-height:24px;margin-bottom:6px;}
 #abonnementen .plans .plan .plan-tag{font-size:14px;min-height:40px;}
 #abonnementen .plans .plan .plan-price{margin:8px 0!important;}
 #abonnementen .plan-price span{font-size:27px;}
 #abonnementen .plans .plan .plan-visits{font-size:14px;min-height:44px;margin-bottom:6px;}
 #abonnementen .plans .plan .plan-details{font-size:14px;min-height:44px;margin-top:0;}
 #abonnementen .mobile-pricing-nav{margin-bottom:8px;}
 #abonnementen .package-foot{font-size:13px;line-height:1.5;margin-bottom:12px;}
 body .mix-button,body .client-dialog .dialog-cta,body .customlightbox2 .dev2-request-form .mix-button{background:#e86f2c;background-image:none;color:#fff;border:0;border-radius:3px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:700;line-height:1.4;min-height:48px;padding:13px 20px;letter-spacing:0;text-transform:none;}
 body .mix-button:hover,body .client-dialog .dialog-cta:hover,body .customlightbox2 .dev2-request-form .mix-button:hover{background:#f28c38;}
}
@media(prefers-reduced-motion:reduce){body .mainmenu{transition:none;}}

/* Shared CTA component across page sections and both dialog families. */
body .mix-button,body .client-dialog .dialog-cta,body .customlightbox2 .dev2-request-form .mix-button{background:#e86f2c;background-image:none;color:#fff;border:0;border-radius:3px;font:700 15px/1.4 'Hanken Grotesk',sans-serif;min-height:48px;padding:13px 20px;letter-spacing:0;text-transform:none;cursor:pointer;}
body .mix-button:hover,body .client-dialog .dialog-cta:hover,body .customlightbox2 .dev2-request-form .mix-button:hover{background:#f28c38;}
.gallery-grid{display:block;columns:3;column-gap:20px;}
.gallery-grid .photo-button,.gallery-grid .photo-button:nth-child(7n+1){display:block;width:100%;height:auto;break-inside:avoid;margin:0 0 20px;}
.gallery-grid .photo-button img{display:block;width:100%;height:auto;object-fit:contain;}
.gallery-grid .photo-button[data-image="assets/client-muur.webp"] img{height:230px;object-fit:cover;object-position:bottom;}
@media(max-width:700px){.gallery-grid{columns:2;column-gap:12px;}.gallery-grid .photo-button,.gallery-grid .photo-button:nth-child(7n+1){margin-bottom:12px;}}
.mainmenu:focus-within{transform:none!important;pointer-events:auto!important;}
.mainmenu .logo .wit,.mainmenu .logo .mobile,.mix-footer .footer-logo img{filter:none;mix-blend-mode:normal;}

/* Client review: matching service crops and aligned footer columns. */
.mix-service-grid .service-photo{width:min(100%,240px);height:auto;aspect-ratio:3/4;}
.mix-service-grid .service-photo img{object-fit:cover;object-position:center;}
#diensten,#aanpak,#projecten{border-top:0;border-bottom:0;box-shadow:none;}
.mix-footer-top{align-items:start;}
.mix-footer .footer-logo{width:150px;max-width:100%;height:auto;}
.mix-footer .footer-logo img{display:block;width:100%;height:auto;}
.mix-footer-top>div:nth-child(2){align-self:center;}
.mix-footer-top h2,.mix-footer-top h3{margin-top:0;}
@media(min-width:1021px){
  .mainmenu{background:transparent;}
  body .mainmenu li.nav-on-light,body .mainmenu li.nav-on-light a{color:var(--mix-ink)!important;}
  .mix-footer-top{grid-template-columns:150px minmax(250px,1.3fr) minmax(0,1fr) minmax(0,1fr);}
}

.gallery-grid .photo-button[data-image="assets/client-muur.webp"] img,.image-dialog img[src$="/client-muur.webp"]{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center bottom;}