:root{--green:#285c48;--forest:#183e31;--sage:#dfe9e1;--mist:#f2f6f1;--lime:#b9cf9f;--ink:#183029;--muted:#63736c;--line:#dbe5dc;--white:#fff;--red:#cf2f2f;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.65}img{display:block;width:100%;height:100%;object-fit:cover}button,input,select,textarea{font:inherit}a{color:inherit}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:99;background:#fff;padding:.8rem}.skip-link:focus{top:1rem}.site-header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - var(--max))/2));background:rgba(255,255,255,.96);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.brand{text-decoration:none}.brand-mark{display:grid;width:108px;height:56px;background:var(--red);color:#fff;text-transform:uppercase;line-height:1;padding:7px 10px;transform:skew(-4deg);box-shadow:0 6px 20px rgba(44,53,48,.12)}.brand-mark strong{font:800 30px/1 "Manrope"}.brand-mark small{font-weight:800;font-size:10px;letter-spacing:.08em}.site-header nav{display:flex;align-items:center;gap:2rem}.site-header nav a{text-decoration:none;font-size:.92rem;font-weight:600}.site-header nav a:hover{color:var(--green)}.nav-cta{background:var(--green);color:#fff!important;padding:.8rem 1.2rem;border-radius:999px}.menu-button{display:none;border:0;background:none;font-weight:700;color:var(--forest)}
.hero{max-width:1440px;min-height:690px;margin:0 auto 3rem;display:grid;grid-template-columns:minmax(360px,.78fr) 1.22fr;grid-template-areas:"copy photo";background:var(--mist);overflow:hidden}.hero-photo{grid-area:photo;min-height:690px;position:relative}.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(242,246,241,.22),transparent 30%)}.hero-photo img{object-position:center center}.hero-panel{grid-area:copy;padding:6rem clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;color:var(--green);margin:0 0 1.2rem}.eyebrow:before{content:"";display:inline-block;width:34px;height:2px;background:var(--lime);vertical-align:middle;margin-right:.7rem}.eyebrow.light{color:#dce9df}.hero h1,.section h2,.expertise-band h2,.contact h2{font:700 clamp(2.6rem,5vw,5.4rem)/1.04 "Manrope",sans-serif;letter-spacing:-.055em;margin:0}.hero h1{font-size:clamp(3rem,5vw,5rem);color:var(--forest)}.hero h1 em{color:var(--green);font-style:normal}.hero-intro{font-size:1.08rem;color:var(--muted);max-width:540px;margin:2rem 0}.hero-actions{display:flex;align-items:center;gap:1.8rem}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;text-decoration:none;padding:1rem 1.45rem;font-weight:700;cursor:pointer}.button.primary{background:var(--green);color:#fff}.button.primary:hover{background:var(--forest)}.text-link{text-decoration:none;font-weight:700;color:var(--green)}.text-link span{font-size:1.2rem}.trust-row{display:flex;gap:1.25rem;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:3rem;padding-top:1.3rem;color:var(--muted);font-size:.8rem}.trust-row span:before{content:"✓";color:var(--green);margin-right:.4rem}.intro-strip{max-width:var(--max);margin:auto;padding:2rem 0 3rem;display:flex;gap:2rem;align-items:center;color:var(--muted);text-transform:uppercase;font-size:.76rem;letter-spacing:.13em}.intro-strip p{margin:0;color:var(--forest);font-size:1rem;letter-spacing:0;text-transform:none}.intro-strip .line{height:1px;background:var(--line);flex:1}.section{max-width:var(--max);margin:auto;padding:7.5rem 0}.section-heading{margin-bottom:3.5rem}.section-heading h2{font-size:clamp(2.4rem,4.5vw,4.5rem);color:var(--forest)}
.services{padding-top:6rem}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.service-card{min-height:305px;padding:2rem;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;background:#fff;transition:transform .25s,box-shadow .25s}.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(31,77,59,.09)}.service-card.featured{background:var(--green);color:#fff;border-color:var(--green)}.service-card .number{font:700 .8rem "Manrope";color:#7fa58e}.service-card.featured .number{color:#dce9df}.service-card h3{font:700 1.5rem "Manrope";margin:auto 0 .8rem;color:var(--forest)}.service-card.featured h3{color:#fff}.service-card p{margin:0;color:var(--muted)}.service-card.featured p{color:#edf5ef}.service-card ul{padding-left:1.1rem;font-size:.88rem;margin:1rem 0 0}.expertise-band{max-width:1440px;margin:auto;background:var(--forest);color:#fff;padding:6rem max(36px,calc((100% - var(--max))/2));display:grid;grid-template-columns:1.2fr .8fr;gap:7rem;align-items:end;border-radius:26px}.expertise-band h2{font-size:clamp(2.5rem,4.3vw,4.6rem)}.expertise-band>p{font-size:1.12rem;border-left:2px solid var(--lime);padding-left:2rem;color:#d8e4dc}.section-heading.split{display:flex;justify-content:space-between;align-items:end}.section-heading.split>p{max-width:390px;color:var(--muted)}.project-grid{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:330px 330px;gap:18px}.project{overflow:hidden;border-radius:18px}.project.large{grid-row:1/3}.project button{border:0;padding:0;width:100%;height:100%;position:relative;cursor:pointer;text-align:left;background:#000;color:#fff;overflow:hidden}.project img{transition:transform .55s ease;filter:saturate(.82)}.project button:hover img{transform:scale(1.035)}.project button:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(16,46,35,.9))}.project span{position:absolute;z-index:2;left:1.6rem;right:1.6rem;bottom:1.5rem;font:700 1.3rem "Manrope"}.project small{display:block;text-transform:uppercase;letter-spacing:.13em;font:700 .67rem "DM Sans";color:#dce9df;margin-bottom:.3rem}.portfolio-note{color:var(--muted);font-size:.86rem;margin-top:1rem}.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:7rem;align-items:center;background:var(--mist);max-width:1440px;padding-left:max(24px,calc((100% - var(--max))/2));padding-right:max(24px,calc((100% - var(--max))/2));border-radius:26px}.about-photo{height:650px;position:relative}.about-photo:before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid var(--lime);border-radius:18px;z-index:-1}.about-photo img{border-radius:18px}.about-photo span{position:absolute;bottom:1.2rem;right:-1.2rem;background:var(--green);color:#fff;font:700 1rem/1.35 "Manrope";padding:1.2rem 1.5rem;border-radius:12px}.about-copy h2{font-size:clamp(2.7rem,4.5vw,4.5rem);color:var(--forest)}.about-copy .lead{font-size:1.25rem;font-weight:600;margin:2rem 0 1rem}.about-copy>p:not(.eyebrow):not(.lead){color:var(--muted)}.principles{margin-top:2.6rem}.principles div{border-top:1px solid var(--line);padding:1rem 0;display:flex;gap:1.5rem}.principles strong{color:var(--green)}.process{padding-bottom:8rem}.process ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.process li{background:var(--mist);padding:2rem;border-radius:16px;min-height:245px}.process li>span{display:block;color:#7fa58e;font-weight:700;margin-bottom:4rem}.process h3{font:700 1.2rem "Manrope";margin:0 0 .5rem;color:var(--forest)}.process p{font-size:.92rem;color:var(--muted)}
.contact{max-width:1440px;margin:auto;background:var(--sage);color:var(--forest);padding:7rem max(36px,calc((100% - var(--max))/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:7rem;border-radius:26px}.contact h2{font-size:clamp(2.7rem,4.5vw,4.7rem)}.contact .eyebrow.light{color:var(--green)}.contact-intro>p:not(.eyebrow){color:var(--muted);max-width:520px}.area{margin-top:3rem;border-left:4px solid var(--green);padding-left:1.2rem;display:grid}.area span,.area small{color:var(--muted);font-size:.8rem}.area strong{font-size:1.05rem}form{background:#fff;color:var(--ink);padding:2.5rem;border-radius:18px;box-shadow:0 20px 50px rgba(30,66,52,.08)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}label{display:grid;gap:.35rem;font-size:.82rem;font-weight:700;margin-bottom:1rem}input,select,textarea{width:100%;border:1px solid var(--line);background:#fbfdfb;padding:.85rem;color:#111;border-radius:8px}input:focus,select:focus,textarea:focus{outline:2px solid var(--lime);border-color:var(--green)}textarea{resize:vertical}.consent{display:flex;grid-template-columns:auto 1fr;align-items:start;font-weight:400}.consent input{width:auto;margin-top:.35rem}.form-status{font-size:.88rem;color:var(--muted)}footer{max-width:var(--max);margin:auto;padding:4rem 0 2rem;display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;font-size:.86rem}footer p{margin:0}footer .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1rem;color:var(--muted)}dialog{width:min(950px,92vw);border:0;border-radius:18px;padding:0;background:var(--forest);color:#fff}dialog::backdrop{background:rgba(16,39,31,.78)}dialog .close{position:absolute;right:1rem;top:1rem;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:#fff;font-size:1.6rem;cursor:pointer}.dialog-content{display:grid;grid-template-columns:1.2fr .8fr;min-height:480px}.dialog-content img{min-height:480px}.dialog-copy{padding:3rem}.dialog-copy h3{font:700 2rem "Manrope";margin:.5rem 0 1rem}.dialog-copy p{color:#d8e4dc}
@media(max-width:1100px){.hero{grid-template-columns:.9fr 1.1fr}.hero-panel{padding:5rem 2.5rem}.hero h1{font-size:clamp(2.8rem,5vw,4.2rem)}}@media(max-width:900px){.site-header{height:72px}.menu-button{display:block}.site-header nav{position:absolute;display:none;top:72px;left:0;right:0;background:#fff;padding:1.5rem;flex-direction:column;align-items:stretch}.site-header nav.open{display:flex}.hero{grid-template-columns:1fr;grid-template-areas:"photo" "copy"}.hero-photo{height:54vh;min-height:420px}.hero-panel{padding:4rem 1.5rem}.intro-strip,.section{padding-left:1.5rem;padding-right:1.5rem}.intro-strip{display:none}.service-grid{grid-template-columns:1fr 1fr}.expertise-band,.about,.contact{grid-template-columns:1fr;gap:3rem;border-radius:0}.project-grid{grid-template-columns:1fr;grid-template-rows:460px 340px 340px}.project.large{grid-row:auto}.process ol{grid-template-columns:1fr 1fr}footer{margin:0 1.5rem;grid-template-columns:1fr}.dialog-content{grid-template-columns:1fr}.dialog-content img{height:360px;min-height:0}}@media(max-width:600px){.hero-photo{height:370px;min-height:0}.hero-panel{padding-top:3.2rem}.service-grid,.process ol,.field-row{grid-template-columns:1fr}.section{padding-top:5rem;padding-bottom:5rem}.section-heading.split{display:block}.about-photo{height:490px}.contact{padding-top:5rem;padding-bottom:5rem}form{padding:1.4rem}.hero-actions{align-items:flex-start;flex-direction:column}.project-grid{grid-template-rows:390px 300px 300px}.dialog-content img{height:270px}}

/* New horizontal brand mark */
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{display:block;width:248px;height:58px;object-fit:contain;object-position:left center}
@media(max-width:900px){.brand-logo{width:205px;height:50px}}
@media(max-width:600px){.brand-logo{width:180px;height:46px}}

/* Shared gold accent family — Wie ziet betaalt / Erwin van Rosmalen */
:root{--gold:#d0ad74;--gold-rich:#d5af58;--gold-deep:#85641f;--gold-soft:#edcd80;--gold-wash:#fbf7ee}
.site-header{border-bottom-color:rgba(198,162,95,.52)}
.nav-cta{box-shadow:inset 0 0 0 1px rgba(237,205,128,.65)}
.text-link span{color:var(--gold-deep)}
.hero-photo{border-left:3px solid var(--gold)}
.eyebrow:before{background:var(--gold)}
.service-card.featured{border-top:4px solid var(--gold)}
.service-card.featured .number{color:var(--gold-soft)}
.expertise-band{box-shadow:inset 0 3px 0 var(--gold)}
.expertise-band .eyebrow.light{color:var(--gold-soft)}
.expertise-band>p{border-left-color:var(--gold)}
.project small{color:var(--gold-soft)}
.about-photo:before{border-color:var(--gold)}
.principles strong,.process li>span{color:var(--gold-deep)}
.contact .eyebrow.light{color:var(--gold-deep)}
.area{border-left-color:var(--gold)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--gold-rich);outline-offset:1px;border-color:var(--green)}
footer{position:relative}
footer:before{content:"";position:absolute;left:0;right:0;top:1.75rem;height:1px;background:linear-gradient(90deg,var(--gold),transparent 48%)}
@media(max-width:900px){.hero-photo{border-left:0;border-bottom:3px solid var(--gold)}}

/* More breathing room for the headline and a warm gold emphasis. */
.hero h1{font-size:clamp(2rem,3.8vw,3.7rem);letter-spacing:-.015em;line-height:1.14}
.hero h1 .hero-gold{color:#9b762b}
.hero-panel{min-width:0}
@media(min-width:1101px){.hero{grid-template-columns:1.1fr .9fr}}

/* Additional renovation project fills the final portfolio cell. */
.project-grid{grid-auto-rows:330px}
.renovation-photo{position:absolute;inset:0;overflow:hidden;container-type:size}
.renovation-photo img{position:absolute;width:max(165.52cqw,259.46cqh);height:auto;max-width:none;left:calc(-1 * max(5.52cqw,8.65cqh));top:calc(-1 * max(5.52cqw,8.65cqh));object-fit:contain;transition:none}
.renovation button:hover img{transform:none}
.renovation-dialog{width:min(1100px,94vw)}
.renovation-dialog .dialog-content{grid-template-columns:1fr}
.renovation-dialog .dialog-content img{height:auto;min-height:0;object-fit:contain;background:white}
.renovation-dialog .dialog-copy{padding:1.5rem 2rem 2rem}
@media(max-width:900px){.project-grid{grid-auto-rows:340px}}
@media(max-width:600px){.project-grid{grid-auto-rows:300px}}

/* De Klusdag: personal maintenance service. */
.klusdag{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:start;padding-top:1rem;padding-bottom:7rem;scroll-margin-top:110px}
.klusdag h2{font-size:clamp(2.2rem,4vw,3.8rem);line-height:1.12;letter-spacing:-.025em;color:var(--forest)}
.klusdag-copy>p:not(.eyebrow){color:var(--muted);font-size:1.05rem}
.klusdag-copy .klusdag-lead{font-size:1.2rem;color:var(--ink)}
.klusdag-afspraak{background:var(--gold-wash);border:1px solid var(--gold);border-radius:18px;padding:2rem}
.klusdag-afspraak h3{font:700 1.5rem/1.3 "Manrope",sans-serif;margin:0 0 1.5rem;color:var(--forest)}
.klusdag-route{margin-bottom:1.2rem}.klusdag-route strong{color:var(--forest)}.klusdag-route p{margin:.3rem 0;color:var(--muted)}
.klusdag-afspraak ul{padding:1.2rem 0 0 1.2rem;border-top:1px solid var(--gold);margin:1.5rem 0}.klusdag-afspraak li{margin-bottom:.6rem}
@media(max-width:1100px){.klusdag{gap:2rem;padding-left:1.5rem;padding-right:1.5rem}.site-header nav{gap:1.2rem}}
@media(max-width:900px){.klusdag{grid-template-columns:1fr;padding-top:1rem;padding-bottom:5rem}.klusdag-afspraak{padding:1.5rem}}

/* Help for parents and the gift day, within De Klusdag. */
.ouders-panel{grid-column:1/-1;display:grid;grid-template-columns:1.3fr .8fr;gap:3rem;background:var(--forest);color:#fff;border-radius:24px;padding:clamp(1.5rem,4vw,3rem);border-top:3px solid var(--gold);scroll-margin-top:110px}
.ouders-copy,.ouders-cadeau{min-width:0}
.ouders-panel .eyebrow{color:var(--gold-soft)}
.ouders-panel h3{font:700 clamp(2rem,3.3vw,3rem)/1.15 "Manrope",sans-serif;letter-spacing:-.02em;margin:0 0 1.5rem}
.ouders-copy>p:not(.eyebrow){color:#e0eae3}.ouders-copy .ouders-lead{font-size:1.15rem}
.ouders-afspraken{list-style:none;padding:0;margin:1.5rem 0 2rem}.ouders-afspraken li{padding:.8rem 0;border-top:1px solid #456556;color:#e0eae3}.ouders-afspraken strong{color:#fff}
.ouders-panel .button.primary{background:var(--gold-soft);color:var(--forest)}.ouders-panel .button.primary:hover{background:#f4deb0}
.ouders-cadeau{align-self:center;background:var(--gold-wash);color:var(--forest);padding:2rem;border:1px solid var(--gold);border-radius:16px}
.cadeau-mark{display:block;font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-deep);margin-bottom:1rem}
.ouders-cadeau h4{font:700 1.7rem/1.25 "Manrope",sans-serif;margin:0 0 1rem}.ouders-cadeau p{color:var(--muted)}
.ouders-cadeau .cadeau-belofte{font:700 1.25rem/1.5 "Manrope",sans-serif;color:var(--forest);padding:1rem 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.ouders-cadeau .text-link{display:inline-block;margin-top:.5rem}
@media(max-width:900px){.ouders-panel{grid-template-columns:1fr;gap:2rem}.ouders-cadeau{padding:1.5rem}}

@media(min-width:901px){.site-header nav{gap:clamp(.65rem,1.35vw,1.5rem)}.site-header nav a{font-size:.86rem}.site-header .brand-logo{width:clamp(180px,19vw,248px)}}