:root{--orange:#ff791b;--blue:#100b88;--paper:#fffaf3;--line:rgba(16,11,136,.23)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--blue);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.6}a{color:inherit;text-underline-offset:5px}a,button,input,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.skip{position:absolute;top:-100px;background:white;padding:14px;z-index:10}.skip:focus{top:5px}.header{background:var(--orange);display:flex;align-items:center;justify-content:space-between;padding:25px 6%;gap:25px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:14px;line-height:1.1;font-weight:800;letter-spacing:2px;display:inline-block}.brand strong{display:block;font-size:36px;letter-spacing:-2px}.brand span{padding-left:12px}nav{display:flex;align-items:center;gap:30px}nav a{font-size:14px;font-weight:700;text-decoration:none;padding:10px 0}.nav-contact{border-bottom:2px solid}.hero{background:var(--orange);display:grid;grid-template-columns:1.35fr 1fr;padding:74px 6% 68px;align-items:center;gap:25px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;margin:0 0 24px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,6.7vw,94px);line-height:1.02;letter-spacing:-5px;margin-bottom:28px;max-width:850px}h1 span{font-style:italic}h2{font-size:clamp(34px,4.5vw,60px);line-height:1.09;letter-spacing:-2.5px;margin-bottom:25px}h3{font-size:25px;letter-spacing:-.8px;line-height:1.2}.intro{max-width:540px;font-size:18px}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:30px}.button{display:inline-block;border:0;border-radius:3px;padding:17px 22px;text-decoration:none;font:700 15px Arial;cursor:pointer;min-height:50px}.dark{color:var(--paper);background:var(--blue)}.button:hover{filter:brightness(1.2)}.button:disabled{cursor:not-allowed;opacity:.75}.text-link{font-size:14px;font-weight:700}.hero-note{font-size:13px;margin:27px 0 0}.hero-art{position:relative;max-width:430px;justify-self:center;width:100%}.mascot{width:100%;height:auto;display:block;mix-blend-mode:multiply}.sticker{position:absolute;width:34%;height:auto;right:-6%;top:0;transform:rotate(12deg);mix-blend-mode:multiply}.ticker{background:var(--blue);color:var(--paper);padding:17px 6%;font-size:12px;font-weight:700;letter-spacing:1.5px;display:flex;gap:25px;justify-content:space-between;flex-wrap:wrap}.ticker span{color:var(--orange)}.section{padding:90px 6%}.section-top{max-width:710px;margin-bottom:44px}.section-top>p:last-child{max-width:570px}.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.services article,.service-callout{padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.services p{font-size:15px;margin-bottom:0}.number{display:block;font-size:12px;margin-bottom:35px}.service-callout{position:relative;background:var(--orange);overflow:hidden;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}.service-callout img{position:absolute;right:10px;top:10px;height:155px;width:auto;mix-blend-mode:multiply}.service-callout p,.service-callout a{position:relative;max-width:70%;font-weight:700}.service-callout a{font-size:14px}.reuse{background:var(--blue);color:var(--paper);padding:70px 6%;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.reuse p:not(.eyebrow){max-width:530px}.reuse>img{width:100%;height:auto;opacity:.9}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}figure{margin:0}.photo-placeholder{background:#f0e7da;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed var(--blue);gap:12px}.photo-placeholder span{font-size:56px;line-height:1}.photo-placeholder strong{font-size:11px;letter-spacing:2px}.second{background:#ffe0c6}.third{background:#e4e3ef}figcaption{font-weight:700;font-size:16px;margin-top:18px}figcaption small{display:block;font-weight:400;font-size:12px;margin-top:5px}.reviews{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 55px}.reviews .eyebrow{grid-column:1/-1}.reviews h2{grid-row:2/4}.reviews p:not(.eyebrow){max-width:550px}.contact{background:var(--orange);display:grid;grid-template-columns:1fr 1fr;gap:75px}.contact>div>p:not(.eyebrow){max-width:420px}.phone{font-size:clamp(24px,3vw,39px);font-weight:800;text-decoration:none;display:block;letter-spacing:-1px;margin:32px 0 5px}.email{display:block;overflow-wrap:anywhere}.location{font-size:13px;margin-top:20px}.contact-sticker{width:145px;height:auto;mix-blend-mode:multiply;margin-top:20px}form{background:var(--paper);padding:32px;border-radius:4px}label{display:block;font-size:14px;font-weight:700;margin:17px 0 7px}label span{font-weight:400;font-size:12px}input,textarea{width:100%;border:1px solid var(--blue);border-radius:2px;padding:12px;background:white;color:var(--blue);font:inherit}textarea{resize:vertical}form .button{width:100%;line-height:1.4}.form-info,.privacy-note,#form-status{font-size:13px}.form-info{padding-bottom:16px;border-bottom:1px solid var(--line)}.privacy-note{margin:17px 0}.trap{display:none}.privacy{padding-top:28px;padding-bottom:28px;font-size:14px}summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:700}details p{max-width:850px}footer{border-top:1px solid var(--line);padding:35px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px}footer p,footer>a:last-child{font-size:12px;margin:0}footer .brand strong{font-size:25px}footer .brand{font-size:10px}@media(min-width:1500px){.hero,.section,.reuse,.header,footer{padding-left:max(6%,calc((100% - 1320px)/2));padding-right:max(6%,calc((100% - 1320px)/2))}}@media(max-width:850px){nav{gap:16px}.hero{grid-template-columns:1.4fr 1fr}h1{letter-spacing:-3px}.services{grid-template-columns:repeat(2,1fr)}.contact{gap:30px}.section{padding-top:65px;padding-bottom:65px}}@media(max-width:600px){.header{padding:20px 6%;align-items:flex-start}nav{gap:4px 15px;flex-wrap:wrap;justify-content:flex-end;max-width:240px}nav a{font-size:12px;padding:5px 0}.brand strong{font-size:30px}.brand{font-size:11px}.brand span{display:none}.hero{grid-template-columns:1fr;padding-top:42px;padding-bottom:35px;gap:10px}h1{font-size:52px;letter-spacing:-2.8px}.eyebrow{font-size:10px;letter-spacing:1.2px}.intro{font-size:16px}.hero-art{max-width:240px;margin:15px auto 0}.sticker{right:-18%;width:39%}.ticker{font-size:10px;gap:8px 18px;justify-content:center}.ticker span:last-of-type{display:none}.services{grid-template-columns:1fr}.services article{padding:25px}.number{margin-bottom:15px}.services h3{margin-bottom:13px}.service-callout{min-height:200px}.reuse{grid-template-columns:1fr;padding-top:55px;padding-bottom:40px;gap:25px}.reuse>img{max-width:320px;justify-self:center}.gallery{grid-template-columns:1fr;gap:30px}.photo-placeholder{aspect-ratio:16/10}.reviews{display:block}.contact{grid-template-columns:1fr;gap:20px}.contact-sticker{display:none}form{padding:23px}footer{flex-wrap:wrap}footer p{max-width:170px}.section{padding-top:50px;padding-bottom:50px}.privacy{padding-top:20px;padding-bottom:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Projectfoto’s: behoud verhoudingen in de grote afbeelding. */
.gallery{row-gap:38px}.gallery-hint{font-size:13px}.project-photo{position:relative;display:block;background:#ece6dd;overflow:hidden;border-radius:3px}.project-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center}.photo-open{position:absolute;bottom:12px;right:12px;background:var(--paper);color:var(--blue);padding:6px 10px;font-size:11px;font-weight:700}.project-photo:hover img{filter:brightness(.93)}@media(max-width:600px){.project-photo img{aspect-ratio:4/3}.gallery{gap:32px}}

/* Origineel AJETO-embleem zonder de donkere vermenigvuldiging op oranje. */
.sticker,.contact-sticker{mix-blend-mode:normal;filter:none}
/* Oranje vlakken zonder watermerk. */
.hero,.contact{position:relative;isolation:isolate}

.brand-filter-defs{position:absolute;pointer-events:none}


/* Blauwe illustratie met echte transparantie; behoud de blauwe lijnen. */
.mascot{mix-blend-mode:normal}

/* Laat oranje ook door de witte binnenvlakken van de illustratie schijnen. */
.mascot{filter:none;mix-blend-mode:normal}

#customer-reviews{grid-column:2;min-width:0}#customer-reviews figure{border-top:1px solid var(--line);padding:22px 0}#customer-reviews blockquote{margin:0 0 12px;font-size:19px}#customer-reviews figcaption{font-size:14px}@media(max-width:600px){#customer-reviews{margin-top:25px}}

/* Eigen vervoer bij de klusverhalen. */
.reuse .moped-photo{margin:0;justify-self:center;width:min(100%,390px)}.moped-photo img{display:block;width:100%;height:auto;max-height:480px;object-fit:cover;border-radius:5px}.moped-photo figcaption{font-size:13px;color:var(--paper);margin-top:12px}.transport{background:#ffe9d5}.transport-gallery{display:grid;grid-template-columns:1fr 1fr;gap:28px}.transport-gallery .project-photo img{aspect-ratio:4/3;object-position:center 60%}@media(max-width:600px){.transport-gallery{grid-template-columns:1fr}.reuse .moped-photo{width:min(100%,320px)}}

/* Fotoreeksen blijven zonder JavaScript met vegen en scrollen bruikbaar. */
.photo-strip,.banner-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;position:relative;border-radius:4px;gap:0}
.photo-strip>.project-photo,.banner-strip>.project-photo{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.photo-strip img{aspect-ratio:4/3;object-fit:cover}.project-card{min-width:0}
.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.carousel-controls button{min-width:44px;min-height:44px;background:var(--blue);color:var(--paper);border:0;border-radius:3px;font:700 16px Arial;cursor:pointer;padding:10px 15px}
.carousel-counter{font-size:12px}.project-navigation{display:none}.work-banner{background:#edeaf5}.banner-strip{max-width:1100px;margin:auto}.banner-strip img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 55%}.work-banner>.carousel-controls{max-width:1100px;margin:15px auto 0}.work-banner .section-top{margin-bottom:25px}
@media(max-width:600px){.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:20px;position:relative;padding-bottom:15px;scrollbar-width:thin}.gallery>.project-card{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}.project-navigation{display:flex}.banner-strip img{aspect-ratio:4/3}.carousel-controls button{font-size:14px}.work-banner{padding-top:40px;padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){.photo-strip,.banner-strip,.gallery{scroll-behavior:auto}}

/* Alleen apparaten met een precieze muisaanwijzer krijgen de hamer. */
@media(hover:hover) and (pointer:fine){body,a,button,summary{cursor:url("assets/hamer-cursor.svg") 3 3,auto}input,textarea{cursor:text}button:disabled{cursor:not-allowed}}

/* De klauwhamer staat klaar boven links en maakt een tik bij indrukken. */
@media(hover:hover) and (pointer:fine){
 a[href]:hover,button:not(:disabled):hover,summary:hover,[role="button"]:hover{cursor:url("assets/hamer-klaar.svg") 6 3,pointer}
 a[href]:active,button:not(:disabled):active,summary:active,[role="button"]:active{cursor:url("assets/hamer-tik.svg") 3 9,pointer}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
 a[href]:hover,a[href]:active,button:not(:disabled):hover,button:not(:disabled):active,summary:hover,summary:active,[role="button"]:hover,[role="button"]:active{cursor:url("assets/hamer-cursor.svg") 3 3,pointer}
}

/* Toon de hele kapstok, ook in de horizontale projectkaart. */
.oak-project .photo-strip img{object-fit:contain;background:#eee8df}
.banner-strip img[src*="kapstok-"]{object-fit:contain;background:#eee8df}

.business-details{border-top:1px solid var(--line);padding:32px 6%;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;font-size:14px;align-items:center}.business-details .eyebrow{margin-bottom:10px}.business-details h2{font-size:24px;letter-spacing:-.7px;margin-bottom:8px}.business-details p{margin-bottom:6px}.business-address{font-style:normal}.business-registration{overflow-wrap:anywhere}@media(max-width:600px){.business-details{grid-template-columns:1fr;gap:18px}}

/* Transparante PNG rechtstreeks weergeven, zonder SVG-filtereffect. */
.mascot{filter:none;mix-blend-mode:normal;background:transparent}


/* Behoud oorspronkelijke alpha; witte binnenvlakken worden doorzichtig. */
.mascot{filter:url("#ink-only");mix-blend-mode:normal;background:transparent}
.sticker,.contact-sticker{filter:none;clip-path:none;mix-blend-mode:normal;background:transparent}

/* Blauwe lijnillustratie in het oranje klusvak; behoud transparante randen. */
.service-callout .callout-mascot{mix-blend-mode:normal;filter:url("#ink-only");height:155px;width:auto;right:8px;top:10px}

/* Blauwe navigatiebalk met witte tekst. */
.header{background:var(--blue);color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.header a{color:#fff}
.header a:focus-visible{outline-color:#fff}

.header .brand{color:var(--orange)}

/* Eenvoudige handzaag als herkenbaar merkaccent. */
.header .brand strong{display:flex;align-items:center;gap:10px}
.brand-hammer{display:block;flex:none;width:48px;height:26px;transform:rotate(-8deg)}
@media(max-width:600px){.brand-hammer{width:34px;height:22px}.header .brand strong{gap:6px}}

.header .brand-hammer{width:30px;height:34px;transform:rotate(-15deg)}
@media(max-width:600px){.header .brand-hammer{width:25px;height:29px}}

/* Persoonlijk verhaal in dezelfde huisstijl. */
.header a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.about-hero{background:var(--orange);display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center}.about-hero h1{font-size:clamp(40px,5.5vw,76px);letter-spacing:-3px}.about-hero figure{max-width:380px;justify-self:center}.about-page figure img{width:100%;height:auto;display:block;border-radius:4px}.about-page figcaption{font-size:12px;font-weight:400}.about-story>h2{max-width:850px}.story-columns{display:grid;grid-template-columns:1fr 1fr;gap:50px}.about-values{display:grid;grid-template-columns:1fr 1fr;gap:65px;background:var(--blue);color:var(--paper);align-items:center}.about-values figure img{max-height:450px;object-fit:cover}.about-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}.about-photo-pair img{aspect-ratio:4/3;object-fit:cover}.about-cta{background:var(--orange)}.about-cta>p:not(.eyebrow){max-width:640px}
@media(max-width:850px){.header nav{gap:12px}.about-hero{gap:25px}.about-values{gap:30px}}
@media(max-width:600px){.about-hero,.story-columns,.about-values,.about-photo-pair{grid-template-columns:1fr;gap:25px}.about-hero h1{font-size:43px;letter-spacing:-2px}.about-hero figure{max-width:300px}.header nav{max-width:245px;gap:5px 12px}.about-values figure img{max-height:340px}.story-columns p{margin-bottom:0}}

.seo-tone{background:#ffe9d5}.service-links{display:grid;grid-template-columns:1fr 1fr;gap:20px}.service-links a{padding:18px;border:1px solid var(--line);font-weight:700}.seo-project-image{max-width:550px;margin:0 0 25px}.seo-project-image img{width:100%;height:auto;max-height:400px;object-fit:cover}.seo-project-image figcaption{font-size:12px}@media(max-width:600px){.service-links{grid-template-columns:1fr}.header{gap:12px}.header nav{max-width:245px}}

/* Een korte eigen Panda-intro; standaard verborgen zonder JavaScript. */
.panda-intro[hidden]{display:none}.panda-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--orange);color:var(--blue);overflow:hidden}
.panda-intro-copy{text-align:center;position:absolute;top:20%;left:6%;right:6%}.panda-intro-copy strong{font-size:clamp(30px,6vw,70px);line-height:1;letter-spacing:-2px;display:block}.panda-intro-copy p{font-size:14px;margin-top:16px}
.panda-skip{position:absolute;right:24px;top:24px;background:transparent;color:var(--blue);border:1px solid currentColor;border-radius:3px;padding:12px 16px;font:700 14px Arial;cursor:pointer;z-index:2;min-height:44px}
.panda-road{position:absolute;top:calc(60% + 76px);left:0;width:100%;height:2px;background:var(--blue);opacity:.25}
.panda-van{position:absolute;top:calc(60% - 150px);left:0;width:clamp(280px,45vw,470px);transform:translateX(-110%)}
.panda-car{display:block;width:100%;height:auto}.panda-body{animation:panda-bounce .24s ease-in-out infinite alternate}.panda-dust{transform-origin:55px 230px;animation:panda-puff .38s ease-out infinite}.wheel-back{transform-origin:148px 228px}.wheel-front{transform-origin:353px 228px}.panda-wheel{animation:panda-wheel-turn .4s linear infinite}
.panda-replay{border:0;background:none;color:var(--blue);font:12px Arial;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:10px 0;min-height:44px}
@keyframes panda-drive{0%{transform:translateX(-110%)}100%{transform:translateX(calc(100vw + 50px))}}
@keyframes panda-bounce{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes panda-puff{from{transform:translateX(5px) scale(.7);opacity:.28}to{transform:translateX(-20px) scale(1.3);opacity:0}}
@keyframes panda-wheel-turn{to{transform:rotate(360deg)}}
@media(max-width:600px){.panda-intro-copy{top:25%}.panda-intro-copy strong{font-size:40px}.panda-skip{right:16px;top:16px}.panda-road{top:calc(60% + 9px)}}
@media(prefers-reduced-motion:reduce){.panda-intro{display:none!important}.panda-van,.panda-body,.panda-dust,.panda-wheel{animation:none}.panda-replay{display:none}}

.panda-van.panda-running{animation:panda-drive 2.8s cubic-bezier(.27,.45,.53,.84) both}

.carousel-controls button svg{display:block;margin:auto;pointer-events:none}
