:root{
  --ink:#241F1A;
  --paper:#F6F1E6;
  --pine:#D9C6A3;
  --pine-dark:#B79E76;
  --charcoal:#1B1815;
  --moss:#4E5C43;
  --moss-dark:#3A4432;
  --rust:#9C4A34;
  --line:rgba(36,31,26,0.14);
  --paper-line:rgba(246,241,230,0.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em;}
a{color:inherit;}
img{display:block;max-width:100%;}
.wrap{max-width:1100px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

.terrazzo-rule{width:100%; height:14px; display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto; opacity:0.9;}
.terrazzo-rule span{display:inline-block;border-radius:50%;}
.terrazzo-rule .a{width:5px;height:5px;background:var(--moss);}
.terrazzo-rule .b{width:3px;height:3px;background:var(--rust);}
.terrazzo-rule .c{width:7px;height:2px;border-radius:2px;background:var(--pine-dark);}
.terrazzo-rule .d{width:4px;height:4px;background:var(--ink);opacity:0.5;}

.nav{position:sticky; top:0; z-index:50; background:rgba(246,241,230,0.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:16px;}
.brand{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0;}
.brand .word{font-family:'Fraunces',serif; font-weight:600; font-size:1.25rem; letter-spacing:-0.01em; white-space:nowrap;}
.brand .tag{font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:0.85rem; opacity:0.6; white-space:nowrap;}
@media (max-width:560px){.brand{flex-direction:column; gap:0; align-items:flex-start;} .brand .tag{font-size:0.72rem;}}
.nav .cta{font-family:'Work Sans',sans-serif; font-size:0.82rem; font-weight:600; text-decoration:none; white-space:nowrap; background:var(--charcoal); color:var(--paper); padding:10px 18px; border-radius:2px; transition:background .2s ease;}
.nav .cta:hover{background:var(--moss-dark);}

.hero{background:var(--charcoal); line-height:0;}
.hero-slideshow{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;}
.hero-slideshow .slide-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
@media (max-width:640px){.hero-slideshow{aspect-ratio:4/5;}}
.hero-img{width:100%; height:auto; display:block;}
@media (max-width:640px){
  .hero-img{height:58vh; object-fit:cover; object-position:50% 42%;}
}
.hero-intro{background:var(--charcoal); padding:40px 0 48px;}
.hero-tag{color:var(--paper); font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:clamp(1.5rem, 3.4vw, 2.2rem); line-height:1.2; margin:0 0 16px; max-width:700px;}
.hero-sub{color:rgba(246,241,230,0.85); font-size:1.05rem; max-width:560px; margin:0 0 28px; font-weight:300;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn{display:inline-block; font-family:'Work Sans',sans-serif; font-weight:600; font-size:0.95rem; text-decoration:none; padding:14px 26px; border-radius:2px; transition:transform .15s ease, background .2s ease; border:none; cursor:pointer;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--moss); color:var(--paper);}
.btn-primary:hover{background:var(--moss-dark);}
.btn-ghost{background:transparent; color:var(--paper); border:1px solid var(--paper-line);}
.btn-ghost:hover{background:rgba(246,241,230,0.1);}

.facts{background:var(--ink); color:var(--paper); padding:26px 0;}
.facts .wrap{display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between;}
.fact{flex:1; min-width:150px;}
.fact .label{text-transform:uppercase; letter-spacing:0.08em; font-size:0.7rem; opacity:0.6; font-weight:600; margin-bottom:4px;}
.fact .value{font-family:'Fraunces',serif; font-size:1.25rem; font-weight:500;}

section{padding:96px 0;}
@media (max-width:640px){section{padding:64px 0;}}
.eyebrow{text-transform:uppercase; letter-spacing:0.12em; font-size:0.72rem; font-weight:600; color:var(--moss-dark); margin-bottom:16px;}
h2.section-title{font-size:clamp(1.7rem, 3.6vw, 2.5rem); margin:0 0 28px; max-width:640px;}

.story{background:var(--paper);}
.story-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
@media (max-width:860px){.story-grid{grid-template-columns:1fr;}}
.story p{font-size:1.05rem; margin:0 0 18px; max-width:52ch;}
.story-img-wrap{position:relative;}
.story-img{width:100%; border-radius:2px;}
.photo-credit{font-size:0.72rem; color:var(--ink); opacity:0.55; margin-top:8px; font-style:italic;}
.pullquote{margin:48px 0 0; padding:32px 0 0; border-top:1px solid var(--line);}
.pullquote p{font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:clamp(1.3rem, 2.6vw, 1.7rem); line-height:1.4; color:var(--moss-dark); max-width:640px; margin:0;}

.story-signature{margin:28px 0 0; padding:20px 0 0; border-top:1px solid var(--line);}
.story-signature .name{font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:1rem; color:var(--ink); margin:0 0 6px;}
.story-signature .thanks{font-size:0.88rem; opacity:0.7; max-width:52ch; margin:0;}

.why{background: linear-gradient(180deg, var(--paper) 0%, var(--pine) 5%, var(--pine) 95%, var(--paper) 100%);}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:860px){.why-grid{grid-template-columns:1fr;}}
.why-list{list-style:none; margin:0; padding:0;}
.why-list li{padding:22px 0; border-bottom:1px solid rgba(36,31,26,0.18); display:flex; gap:18px; align-items:baseline;}
.why-list li:first-child{padding-top:0;}
.why-list .mark{width:8px; height:8px; border-radius:50%; background:var(--rust); flex:none; transform:translateY(-2px);}
.why-list h3{font-size:1.1rem; margin:0 0 4px;}
.why-list p{margin:0; font-size:0.95rem; opacity:0.85; max-width:44ch;}
.why-slideshow, .story-slideshow{position:relative; border-radius:2px; overflow:hidden; aspect-ratio:3/4; cursor:pointer; background:var(--charcoal);}
.slide-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.8s ease; z-index:1;}
.slide-img.active{opacity:1; z-index:2;}
.why-slideshow .hint, .story-slideshow .hint, .gallery-slideshow .hint{
  position:absolute; right:14px; bottom:14px; z-index:3;
  background:rgba(27,24,21,0.55); color:var(--paper); font-size:0.72rem;
  padding:6px 10px; border-radius:2px; opacity:0; transition:opacity .2s ease;
}
.why-slideshow:hover .hint, .story-slideshow:hover .hint, .gallery-slideshow:hover .hint{opacity:1;}

/* ---------- gallery grid / lightbox ---------- */
.gallery{background:var(--paper);}
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:760px){.photo-grid{grid-template-columns:repeat(2,1fr);}}
.photo-grid button{
  padding:0; margin:0; border:none; background:none; cursor:pointer;
  border-radius:2px; overflow:hidden; position:relative; display:block;
}
.photo-grid img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .35s ease;}
.photo-grid button:hover img{transform:scale(1.06);}
.photo-grid .cap{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  background:linear-gradient(0deg, rgba(27,24,21,0.75), transparent);
  color:var(--paper); font-size:0.78rem; text-align:left; opacity:0; transition:opacity .25s ease;
}
.photo-grid button:hover .cap{opacity:1;}

.lightbox{
  position:fixed; inset:0; background:rgba(27,24,21,0.94); z-index:100;
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%; max-height:80vh; border-radius:2px; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.lightbox-cap{color:var(--paper); text-align:center; margin-top:16px; font-size:0.95rem; opacity:0.85;}
.lightbox-close{position:absolute; top:24px; right:28px; background:none; border:none; color:var(--paper); font-size:2rem; line-height:1; cursor:pointer; opacity:0.8;}
.lightbox-close:hover{opacity:1;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(246,241,230,0.15); border:none; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.3rem; color:var(--paper); display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.lightbox-nav:hover{background:rgba(246,241,230,0.3);}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
@media (max-width:640px){.lightbox{padding:16px;} .lightbox-nav{width:38px;height:38px;font-size:1.1rem;} .lightbox-prev{left:6px;} .lightbox-next{right:6px;}}

/* ---------- toekomst-sectie ---------- */
.future{background:var(--paper);}
.future-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px; max-width:760px;}
@media (max-width:860px){.future-grid{grid-template-columns:1fr;}}
.future-card{background:var(--paper); padding:28px 26px; border-radius:2px; border:1px solid var(--moss); border-top:3px solid var(--moss);}
.future-card h3{font-size:1.05rem; margin:0 0 10px;}
.future-card p{font-size:0.92rem; margin:0; opacity:0.85;}
.future p.lead{font-size:1.05rem; max-width:65ch; margin:0 0 16px;}
.future-quote{
  margin:36px 0 0; padding:28px 32px; background:var(--ink); border-radius:2px;
}
.future-quote p{font-family:'Fraunces',serif; font-style:italic; font-weight:500; color:var(--paper); font-size:clamp(1.15rem,2.2vw,1.4rem); margin:0; line-height:1.4;}

/* ---------- indeling / plattegrond ---------- */
.layout-section{background:var(--charcoal); color:var(--paper);}
.layout-section .eyebrow{color:var(--pine);}
.layout-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center;}
@media (max-width:860px){.layout-grid{grid-template-columns:1fr;}}
.layout-section p{font-size:1rem; opacity:0.88; font-weight:300; max-width:50ch; margin:0 0 18px;}
.layout-drawing{background:var(--paper); border-radius:2px; padding:20px; border:none; cursor:pointer; display:block; width:100%;}
.layout-drawing svg, .layout-drawing img{width:100%; height:auto; display:block;}
.layout-caption{font-size:0.78rem; opacity:0.55; margin-top:10px; font-style:italic;}

.specs{background:var(--charcoal); color:var(--paper);}
.specs .eyebrow{color:var(--pine);}
.spec-table{width:100%; border-collapse:collapse; margin-top:8px;}
.spec-table tr{border-bottom:1px solid var(--paper-line);}
.spec-table tr:first-child td, .spec-table tr:first-child th{padding-top:0;}
.spec-table th, .spec-table td{text-align:left; padding:18px 0; vertical-align:top;}
.spec-table th{font-weight:500; width:34%; color:var(--pine); font-family:'Fraunces',serif; font-size:1rem;}
.spec-table td{font-size:0.96rem; opacity:0.92; font-weight:300;}

.price{position:relative; overflow:hidden; background:var(--paper);}
.price-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:860px){.price-inner{grid-template-columns:1fr;}}
.price-tag{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.4rem,5vw,3.4rem); color:var(--moss-dark); margin:0 0 6px;}
.price-note{font-size:0.85rem; opacity:0.65; margin:0 0 28px;}
.price p{font-size:1.02rem; max-width:48ch;}
.terrazzo-panel{background:var(--ink); color:var(--paper); padding:40px; border-radius:2px; position:relative;}
.terrazzo-panel::before{content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 22%, var(--moss) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 15%, var(--rust) 0 3px, transparent 4px),
    radial-gradient(circle at 40% 68%, var(--pine-dark) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 78%, var(--moss) 0 3px, transparent 4px),
    radial-gradient(circle at 60% 40%, var(--rust) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 85%, var(--pine-dark) 0 3px, transparent 4px);
  opacity:0.5;}
.terrazzo-panel *{position:relative;}
.terrazzo-panel h3{font-family:'Fraunces',serif; font-weight:500; font-size:1.3rem; margin:0 0 14px;}
.terrazzo-panel p{font-size:0.95rem; opacity:0.85; font-weight:300; margin:0;}

.logistics{background:var(--pine);}
.logi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
@media (max-width:860px){.logi-grid{grid-template-columns:1fr;}}
.logi-card{background:var(--paper); padding:28px 26px; border-radius:2px;}
.logi-card .num{font-family:'Fraunces',serif; font-style:italic; font-size:1.6rem; color:var(--moss-dark); margin-bottom:10px; display:block;}
.logi-card h3{font-size:1.05rem; margin:0 0 8px;}
.logi-card p{font-size:0.92rem; margin:0; opacity:0.85;}
.logistics-note{margin-top:32px; font-size:0.95rem; opacity:0.85; max-width:60ch;}

/* ---------- contact form ---------- */
.contact{background:var(--charcoal); color:var(--paper);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact h2{color:var(--paper); max-width:480px;}
.contact-details{margin-top:24px; font-size:1.02rem;}
.contact-details a{text-decoration:none; color:var(--pine); font-weight:500;}
.contact-details .addr{opacity:0.75; margin-top:6px; font-size:0.95rem;}
.contact-form{background:rgba(246,241,230,0.06); border:1px solid var(--paper-line); border-radius:2px; padding:32px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.65; margin-bottom:8px;}
.form-row input, .form-row textarea{
  width:100%; background:rgba(246,241,230,0.04); border:1px solid var(--paper-line);
  color:var(--paper); padding:12px 14px; font-family:'Work Sans',sans-serif; font-size:0.95rem;
  border-radius:2px; resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--pine);}
.form-row textarea{min-height:110px;}
.form-note{font-size:0.78rem; opacity:0.55; margin-top:14px;}
.form-result{font-size:0.88rem; margin-top:14px; min-height:1.2em;}
.form-result.success{color:var(--pine);}
.form-result.error{color:#c97a63;}
#formSubmitBtn:disabled{opacity:0.6; cursor:default;}

.footer{background:var(--ink); color:var(--paper); padding:32px 0 28px;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--paper-line);}
.footer .word{font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem;}
.footer-brand{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.footer-tagline{font-family:'Fraunces',serif; font-style:italic; font-size:0.85rem; opacity:0.6;}
.footer-contact-group{display:flex; gap:24px; flex-wrap:wrap;}
.footer-contact{color:var(--pine); text-decoration:none; font-size:0.92rem;}
.footer-contact:hover{text-decoration:underline;}
.footer-bottom{margin-top:18px; font-size:0.78rem; opacity:0.5;}