:root { --forest:#173b24; --deep:#0b2c1b; --leaf:#668238; --cream:#f3eee3; --paper:#faf7ef; --coral:#9a7135; --gold:#a7a14a; --ink:#153522; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:1.65; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia, 'Times New Roman', serif; font-weight:400; letter-spacing:-.045em; line-height:.97; }
h1 em,h2 em { color:var(--coral); font-weight:400; }

.nav-wrap { height:82px; padding:0 clamp(24px,6vw,92px); display:flex; align-items:center; justify-content:space-between; background:var(--deep); color:#f8f3e8; position:relative; z-index:10; border-bottom:5px solid #7d8d42; box-shadow:0 5px 18px #102b1d25; }
.brand { display:flex; align-items:center; gap:11px; font-family:Georgia,serif; font-size:16px; line-height:1.05; letter-spacing:-.02em; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:50% 50% 46% 54%; background:var(--forest); color:var(--cream); font-style:italic; font-size:22px; transform:rotate(-8deg); }
.brand-image { width:124px; height:72px; object-fit:contain; object-position:center; border-radius:3px; display:block; }
.header-wordmark { font-family:Arial,Helvetica,sans-serif; font-size:18px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }.header-wordmark i { color:#c8ad5a; font-family:Georgia,serif; font-size:.8em; text-transform:lowercase; padding:0 4px; }
.brand-mark::first-letter { transform:rotate(8deg); }
.desktop-nav { display:flex; align-items:center; gap:35px; font-size:13px; font-weight:700; }
.desktop-nav>a:not(.nav-cta) { padding:10px 0; border-bottom:1px solid transparent; }
.desktop-nav>a:not(.nav-cta):hover { border-color:var(--coral); }
.nav-cta { color:var(--deep); background:#e6dbbc; padding:13px 18px; border-radius:2px; }
.nav-cta span,.button span { margin-left:14px; }
.mobile-menu { display:none; }

.hero { min-height:auto; display:grid; grid-template-columns:1fr; background:var(--cream); overflow:hidden; }
.hero-copy { padding:clamp(64px,9vw,122px) 7vw 54px max(24px,7vw); align-self:center; }
.eyebrow,.section-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.19em; color:var(--leaf); }
.hero-label { display:flex; align-items:center; gap:18px; margin-bottom:24px; }.hero-label img { width:94px; height:64px; object-fit:contain; border-radius:3px; }.hero-label .eyebrow { margin:0; }
.eyebrow span { display:inline-block; width:24px; height:1px; background:var(--leaf); vertical-align:middle; margin-right:10px; }
h1 { font-size:clamp(64px,8.3vw,126px); margin-bottom:30px; }
.lead { max-width:510px; font-size:clamp(18px,1.5vw,22px); line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:30px; margin:38px 0; }
.button { display:inline-flex; align-items:center; padding:15px 19px; font-size:13px; font-weight:bold; border-radius:2px; }
.button.primary { background:var(--forest); color:white; }
.text-link { display:inline-block; font-weight:bold; font-size:13px; border-bottom:1px solid currentColor; padding-bottom:4px; }
.text-link span { margin-left:10px; }
.hero-values { display:flex; gap:26px; font-size:12px; font-weight:bold; color:#567165; }
.hero-values span::first-letter { color:var(--coral); }
.vision-modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:.25s; }.vision-modal:target { opacity:1; visibility:visible; }.vision-backdrop { position:absolute; inset:0; background:#082218d9; backdrop-filter:blur(5px); }.vision-dialog { position:relative; width:min(680px,100%); max-height:88vh; overflow:auto; background:var(--paper); padding:clamp(34px,6vw,70px); box-shadow:0 30px 90px #0008; border-top:7px solid var(--leaf); }.vision-dialog h2 { font-size:clamp(46px,7vw,72px); margin:0 0 25px; }.vision-dialog>p:not(.section-label) { color:#4d6258; }.vision-dialog .vision-lead { color:var(--ink)!important; font-size:20px; font-weight:bold; }.vision-close { position:absolute; top:15px; right:21px; font-size:32px; line-height:1; color:var(--forest); }
.hero-art { width:100%; min-height:0; aspect-ratio:3/2; position:relative; background:var(--forest); overflow:hidden; display:grid; place-items:center; }
.together-dialog { border-top-color:#b18a42; }.together-dialog::after { content:"Samen maken we van een goed idee een goed bord."; display:block; margin-top:28px; padding-top:18px; border-top:1px solid #173b2430; color:var(--forest); font:italic 18px/1.4 Georgia,serif; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; filter:saturate(.82) contrast(.96); }
.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#173b2422,transparent 60%),linear-gradient(0deg,#102b1d55,transparent 55%); pointer-events:none; }
.hero-art .sun-shape,.hero-art .leaf-one,.hero-art .leaf-two,.hero-art .plate { display:none; }
.sun-shape { position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:#e3b55d; opacity:.95; right:-12%; top:-9%; }
.leaf-one,.leaf-two { position:absolute; color:#9cb684; font-size:100px; opacity:.35; }
.leaf-one { left:10%; top:11%; transform:rotate(24deg); } .leaf-two { right:10%; bottom:10%; color:var(--coral); }
.plate { width:min(65%,480px); aspect-ratio:1; border-radius:50%; background:#e7dfcf; box-shadow:0 35px 70px #08201790, inset 0 0 0 18px #f7f1e5; position:relative; transform:rotate(-8deg); }
.food { position:absolute; border-radius:55% 45% 50% 50%; box-shadow:inset -8px -8px 16px #0002; }
.f1 { width:31%; height:30%; left:17%; top:17%; background:#567c38; transform:rotate(25deg); }.f2 { width:27%; height:25%; right:16%; top:20%; background:#b5c662; }.f3 { width:30%; height:23%; left:20%; bottom:18%; background:#dd714f; border-radius:50%; }.f4 { width:23%; height:28%; right:19%; bottom:17%; background:#f0c967; }.f5 { width:13%; height:13%; left:43%; top:43%; background:#703f31; border-radius:50%; }.f6 { width:11%; height:17%; right:29%; top:44%; background:#3f6d39; }.f7 { width:9%; height:12%; left:32%; top:43%; background:#eee8cf; }.f8 { width:8%; height:8%; left:50%; bottom:21%; background:#81372a; border-radius:50%; }.sauce { position:absolute; width:35%; height:16%; left:31%; top:35%; border:5px solid #f8e4ad; border-radius:50%; transform:rotate(35deg); }
.quote-card { position:absolute; left:8%; bottom:7%; background:var(--paper); padding:20px 38px 19px 52px; box-shadow:0 12px 35px #0a271c55; transform:rotate(-2deg); }
.quote-card>span { position:absolute; left:16px; top:3px; color:var(--coral); font:54px Georgia; }.quote-card p { margin:0; line-height:1.1; font:italic 24px Georgia; }.quote-card strong { font-weight:normal; color:var(--coral); }

.intro,.projects { padding:110px max(24px,7vw); }
.section-label { margin-bottom:35px; }
.intro-grid { display:grid; grid-template-columns:1.05fr 1fr .7fr; gap:7vw; align-items:start; }
.intro h2,.projects h2,.contact h2,.services h2 { font-size:clamp(46px,5.4vw,78px); margin:0; }
.intro-copy { padding-top:8px; color:#4e625a; }.intro-copy .big-copy { color:var(--ink); font-size:20px; font-weight:bold; line-height:1.5; }.intro-copy .text-link { color:var(--forest); margin-top:18px; }
.promise { background:#eadbb7; padding:35px 30px; min-height:230px; transform:rotate(2deg); box-shadow:10px 10px 0 #d9c69e; }.promise-icon { font-size:30px; color:var(--coral); }.promise p { margin:13px 0 7px; font-size:11px; text-transform:uppercase; font-weight:bold; letter-spacing:.14em; }.promise strong { font:italic 21px/1.35 Georgia; font-weight:400; }

.services { background:var(--forest); color:white; padding:105px max(24px,7vw); }
.section-head,.projects-title { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:55px; }.section-head>p,.projects-title>p { width:360px; color:#c2d0c8; margin:0 0 8px; }.section-label.light { color:#b9caad; }
.service-portrait { width:clamp(190px,19vw,250px); height:clamp(190px,19vw,250px); aspect-ratio:1; object-fit:cover; object-position:center 10%; align-self:end; margin-bottom:-25px; border:4px solid #879b4c; border-radius:50%; box-shadow:0 18px 35px #071b1377; }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #ffffff35; }
.service-card { padding:34px 5vw 20px 0; border-right:1px solid #ffffff35; position:relative; min-height:330px; }.service-card+ .service-card { padding-left:3vw; }.service-card:last-child { border-right:0; }.number { position:absolute; right:24px; top:28px; color:#90a296; font-size:12px; }.mini-icon { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:var(--forest); background:#d8ad59; font-size:23px; }.service-card:nth-child(2) .mini-icon { background:var(--coral); }.service-card:nth-child(3) .mini-icon { background:#a3ba8b; }.service-card h3 { font:35px Georgia; margin:25px 0 12px; }.service-card p { color:#c2d0c8; font-size:14px; max-width:310px; }.service-card a { font-size:12px; font-weight:bold; border-bottom:1px solid white; padding-bottom:3px; }.service-card a span { float:right; }

.projects-title>p { color:#66766f; }.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:23px; }.project-card { background:#f0eadf; }.project-visual { height:245px; display:grid; place-items:center; overflow:hidden; }.project-visual span { font-size:110px; filter:drop-shadow(0 18px 18px #0003); transform:rotate(-7deg); transition:.3s; }.project-card:hover .project-visual span { transform:rotate(2deg) scale(1.07); }.project-card.leaf .project-visual { background:#b7c89d; }.project-card.gold .project-visual { background:#e5c36f; }.project-card.earth .project-visual { background:#c57a5d; }.project-copy { padding:25px 27px 30px; }.project-copy small { color:var(--coral); text-transform:uppercase; font-size:10px; font-weight:bold; letter-spacing:.14em; }.project-copy h3 { font:27px Georgia; margin:8px 0; }.project-copy p { color:#5a6b64; font-size:14px; margin:0; }
.project-card.health .project-visual { background:#e7a18c; }.project-card.waste .project-visual { background:#9fbda5; }.project-card.sustain .project-visual { background:#8fb8c2; }
.vision { margin-top:20px; border-top:1px solid #173b2430; padding-top:14px; }.vision summary { list-style:none; cursor:pointer; color:var(--forest); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; display:flex; justify-content:space-between; align-items:center; }.vision summary::-webkit-details-marker { display:none; }.vision summary span { font-size:20px; line-height:1; }.vision[open] summary span { transform:rotate(45deg); }.vision>p { margin:14px 0 0; padding:15px; background:#fffaf0; border-left:3px solid var(--leaf); color:#42584e; font-size:14px; }

.project-visual img { width:100%; height:100%; object-fit:cover; filter:saturate(.85); transition:transform .4s ease; }.project-card.leaf .project-visual img,.project-card.earth .project-visual img,.project-card.waste .project-visual img { width:200%; max-width:none; transform:translateX(-50%); }.project-card.leaf:hover .project-visual img,.project-card.earth:hover .project-visual img,.project-card.waste:hover .project-visual img { transform:translateX(-50%) scale(1.035); }.project-card.leaf .project-visual img { object-position:68% center; }.project-card.earth .project-visual img { object-position:72% center; }.project-card.waste .project-visual img { object-position:73% 70%; }
.contact { background:#758238; color:#fffdf6; padding:90px max(24px,7vw); display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:8vw; }.contact .section-label { color:#e5dfbd; }.contact h2 em { color:#f8edcf; }.contact-copy p { max-width:500px; font-size:18px; }.button.cream { background:var(--cream); color:var(--forest); margin-top:15px; }
footer { background:var(--deep); color:#d8e0db; padding:45px max(24px,7vw); display:flex; align-items:center; justify-content:space-between; gap:30px; font-size:12px; }.footer-brand { color:white; }.footer-brand .brand-mark { background:var(--cream); color:var(--forest); } footer p { margin:0; }

@media (max-width: 850px) {
  .desktop-nav { display:none; }.mobile-menu { display:block; position:relative; }.mobile-menu summary { list-style:none; font-weight:bold; font-size:13px; cursor:pointer; color:#fff9eb; }.mobile-menu summary::-webkit-details-marker { display:none; }.mobile-menu summary span { margin-left:7px; color:#c8ad5a; }.mobile-menu nav { position:absolute; right:0; top:35px; background:var(--forest); color:white; min-width:190px; padding:15px; box-shadow:0 15px 30px #0003; }.mobile-menu nav a { display:block; padding:9px 10px; }
  .hero { grid-template-columns:1fr; }.hero-copy { padding-top:65px; padding-bottom:65px; }.hero-art { min-height:520px; }.plate { width:min(68%,380px); }.intro-grid { grid-template-columns:1fr 1fr; }.promise { grid-column:2; }.service-portrait { width:190px; height:220px; margin:-20px auto -30px; display:block; }.service-grid,.project-grid { grid-template-columns:1fr; }.service-card { border-right:0; border-bottom:1px solid #ffffff35; min-height:auto; padding:32px 55px 32px 0!important; }.service-card:last-child { border-bottom:0; }.project-card { display:grid; grid-template-columns:.8fr 1fr; }.project-visual { height:100%; min-height:230px; }.contact { grid-template-columns:1fr; }.section-head,.projects-title { align-items:start; }.section-head>p,.projects-title>p { width:300px; }
}
@media (max-width: 560px) {
  .nav-wrap { height:68px; border-bottom-width:4px; }.brand { font-size:14px; }.brand-mark { width:36px; height:36px; }.brand-image { width:96px; height:56px; }.header-wordmark { font-size:13px; letter-spacing:.045em; }.hero { min-height:auto; }.hero-copy { padding:55px 24px; }.hero-label { gap:12px; }.hero-label img { width:78px; height:54px; }.hero-art { min-height:430px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }.hero-values { flex-wrap:wrap; gap:8px 18px; }.quote-card { left:5%; bottom:5%; padding:15px 25px 15px 43px; }.quote-card p { font-size:20px; }
  .intro,.projects,.services { padding:75px 24px; }.intro-grid { grid-template-columns:1fr; gap:38px; }.promise { grid-column:auto; transform:none; }.section-head,.projects-title { display:block; }.section-head>p,.projects-title>p { width:auto; margin-top:25px; }.project-card { display:block; }.project-visual { height:220px; }.contact { padding:72px 24px; }.contact-copy p { font-size:16px; } footer { align-items:flex-start; flex-direction:column; } footer>p:last-child { opacity:.65; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
@media (max-width:850px) { .service-portrait { width:220px; height:220px; margin:25px auto 5px; display:block; border-radius:50%; } }
.service-more { margin-top:20px; }.service-more summary { list-style:none; cursor:pointer; width:max-content; max-width:100%; font-size:12px; font-weight:bold; border-bottom:1px solid white; padding-bottom:3px; }.service-more summary::-webkit-details-marker { display:none; }.service-more summary span { margin-left:14px; }.service-more[open] summary span { display:inline-block; transform:rotate(45deg); }.service-more>div { margin-top:18px; padding:18px; background:#f7f1e8; color:var(--forest); }.service-more>div p { color:#42584e; margin-bottom:15px; }.service-more>div a { color:var(--forest); border-bottom-color:var(--forest); }