@font-face{font-family:"Newsreader";font-style:normal;font-display:swap;font-weight:200 800;src:url("/assets/fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-display:swap;font-weight:200 800;src:url("/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-display:swap;font-weight:100 1000;src:url("/assets/fonts/dm-sans-latin-ext-opsz-normal.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-display:swap;font-weight:100 1000;src:url("/assets/fonts/dm-sans-latin-opsz-normal.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --gold:#a9824e; --gold-d:#8d6936; --gold-l:#c09a62;
  --ink:#121110; --text:#3d3a37; --muted:#77726c;
  --cream:#faf8f5; --paper:#fbfaf8; --dark:#1b1b1d;
  --serif:"Newsreader","Tiempos Headline","Georgia",serif;
  --sans:"DM Sans","Google Sans","Helvetica Neue",Arial,sans-serif;
  --pad:6.0625rem;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:1rem;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (min-width:1000px){html{font-size:calc(100vw / 90)}}
@media (min-width:1920px){html{font-size:21.3333px}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,blockquote{margin:0;padding:0}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:0.625rem 1rem;z-index:200}
.skip:focus{left:0.625rem;top:0.625rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.eyebrow{font-size:0.9063rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}
.eyebrow-light{color:#d9c3a0}

/* Buttons */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:0.875rem;height:3.125rem;padding:0 1.5rem;border-radius:0.5rem;font-size:0.9688rem;font-weight:500;letter-spacing:-.005em;white-space:nowrap;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,border-color .25s ease,color .25s ease,filter .25s ease;cursor:pointer}
.btn .arr{width:1.4375rem;height:1.4375rem;flex:none;transition:transform .25s ease}
.btn:hover .arr{transform:translateX(0.25rem)}
.btn-lg{height:3.5625rem;font-size:1.0313rem}

/* Messing: geborsteld metaal met lichtreflectie en een glansstreep die bij hover over de knop schuift */
:root{
  --brass:linear-gradient(100deg,#6c4e24 0%,#987240 14%,#c49e5e 29%,#dfbf80 37%,#b48a4d 47%,#86622f 60%,#a5804a 74%,#caa767 86%,#8c6833 100%);
  --brass-hi:linear-gradient(100deg,#76572a 0%,#a67e47 14%,#d1ab69 29%,#ebcd90 37%,#c09654 47%,#916b36 60%,#b18b51 74%,#d6b473 86%,#97713a 100%);
  --brass-brush:repeating-linear-gradient(180deg,rgba(255,250,230,.06) 0 1px,rgba(0,0,0,0) 1px 2px,rgba(60,40,10,.05) 2px 3px,rgba(0,0,0,0) 3px 4px);
  --brass-gloss:linear-gradient(180deg,rgba(255,250,235,.38) 0%,rgba(255,250,235,.06) 46%,rgba(60,38,10,0) 54%,rgba(60,38,10,.26) 100%);
}
.btn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:42%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,248,225,.75) 50%,rgba(255,255,255,0) 100%);transform:translateX(-160%) skewX(-18deg);opacity:0}
.btn:hover::after,.btn:focus-visible::after{animation:brass-sheen .9s cubic-bezier(.3,.6,.3,1) both}
@keyframes brass-sheen{0%{transform:translateX(-160%) skewX(-18deg);opacity:0}15%{opacity:1}100%{transform:translateX(340%) skewX(-18deg);opacity:0}}

.btn-gold{color:#fff;text-shadow:0 0.0625rem 0.0625rem rgba(55,35,8,.6),0 0 0.625rem rgba(80,52,15,.25);border:1px solid #6a4c22;
  background:var(--brass-gloss),var(--brass-brush),var(--brass);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.85),inset 0 -1px 0 rgba(70,45,15,.5),inset 1px 0 0 rgba(255,236,190,.25),inset -1px 0 0 rgba(70,45,15,.25),0 0.375rem 0.875rem rgba(120,86,40,.3),0 0.0625rem 0.125rem rgba(70,48,18,.4)}
.btn-gold:hover{transform:translateY(-0.125rem);background:var(--brass-gloss),var(--brass-brush),var(--brass-hi);
  box-shadow:inset 0 1px 0 rgba(255,248,226,.95),inset 0 -1px 0 rgba(70,45,15,.5),inset 1px 0 0 rgba(255,236,190,.3),inset -1px 0 0 rgba(70,45,15,.25),0 0.75rem 1.625rem rgba(120,86,40,.38),0 0.125rem 0.25rem rgba(70,48,18,.4)}
.btn-gold:active{transform:translateY(0);filter:brightness(.95)}

/* Lichte knoppen: messing rand en een zachte messing glans bij hover */
.btn-ghost,.btn-outline{color:var(--ink);border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--brass) border-box;
  box-shadow:0 0.0625rem 0.1875rem rgba(150,110,60,.1)}
.btn-ghost{font-weight:600}
.btn-outline{font-weight:600}
.btn-outline .arr,.btn-ghost .arr{color:var(--gold-d)}
.btn-ghost::after,.btn-outline::after{background:linear-gradient(100deg,rgba(214,176,106,0) 0%,rgba(214,176,106,.35) 50%,rgba(214,176,106,0) 100%)}
.btn-ghost:hover,.btn-outline:hover{transform:translateY(-0.125rem);color:#5a3f17;
  background:linear-gradient(180deg,#fffdf8,#f7eedf) padding-box,var(--brass-hi) border-box;
  box-shadow:0 0.625rem 1.375rem rgba(120,86,40,.16),0 0.0625rem 0.1875rem rgba(150,110,60,.12)}

/* Logo */
.logo{display:inline-flex;flex-direction:column;align-items:stretch;width:12.0625rem}
.logo-mark{width:100%;height:auto;display:block;filter:drop-shadow(0 0.0625rem 0.0625rem rgba(0,0,0,.25))}
.logo-sub{display:flex;align-items:center;gap:0.5625rem;margin-top:0.375rem}
.logo-sub i{flex:1;height:1px;background:#8a7a69;opacity:.7}
.logo-sub b{font-size:0.5938rem;font-weight:700;letter-spacing:.42em;color:#2b241e;margin-right:-.42em;padding-right:.42em}
.logo-light .logo-sub b{color:#e9e2d8}
.logo-light .logo-sub i{background:#bdb2a4}

/* Header */
/* Navigatie: strak en minimaal, bij scrollen een crème balk met messing lijn */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100}
.header-inner{position:relative;isolation:isolate;display:flex;align-items:center;height:6.5rem;padding:0 3.125rem 0 5.8125rem;transition:height .35s ease}
.header-inner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:rgba(250,248,245,.94);backdrop-filter:blur(1rem) saturate(1.3);-webkit-backdrop-filter:blur(1rem) saturate(1.3);
  box-shadow:0 0.625rem 1.875rem rgba(40,30,20,.08);transition:opacity .35s ease}
.header-inner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(90deg,rgba(169,130,78,0) 0%,rgba(169,130,78,.55) 18%,#d9b877 50%,rgba(169,130,78,.55) 82%,rgba(169,130,78,0) 100%)}
.site-header.is-scrolled .header-inner{height:5rem}
.site-header.is-scrolled .header-inner::before,.site-header.is-scrolled .header-inner::after{opacity:1}
.site-header .logo{width:12.0625rem;margin-top:0.625rem}
.site-header.is-scrolled .logo{width:9.125rem;margin-top:0}
.logo{transition:width .35s ease,margin .35s ease}
.main-nav{display:flex;gap:2.5rem;margin-left:7.5rem;align-items:center}
.main-nav a{position:relative;font-size:0.9688rem;font-weight:500;letter-spacing:.01em;color:#1d1b19;padding:0.75rem 0;transition:color .25s ease}
.main-nav a:not(.btn)::after{content:"";position:absolute;left:-0.125rem;right:-0.125rem;bottom:0.25rem;height:0.125rem;border-radius:0.125rem;background:var(--brass);transform:scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.main-nav a:not(.btn):hover{color:#6d4f22}
.main-nav a:not(.btn):hover::after{transform:scaleX(.6)}
.main-nav a[aria-current],.main-nav a.is-active{font-weight:600;color:#0f0e0d}
.main-nav a[aria-current]::after,.main-nav a.is-active::after{transform:scaleX(1)}
.nav-phone-m,.nav-cta-m{display:none}
.header-phone{display:flex;align-items:center;gap:0.6875rem;margin-left:auto;font-size:1.0313rem;font-weight:500;color:#1d1b19;white-space:nowrap;transition:color .25s ease}
.header-phone svg{width:1.25rem;height:1.25rem;color:var(--gold-d)}
.header-phone:hover{color:#6d4f22}
.header-cta{margin-left:2.125rem;height:3.375rem;width:12.5rem;padding:0}
.site-header.is-scrolled .header-cta{height:3rem}
.burger{display:none}

/* Hero */
.hero{position:relative;height:54.375rem;background:var(--cream);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url("/assets/img/hero.5d4b6c51.webp") right center/cover no-repeat}
.hero-fade{position:absolute;inset:0;background:radial-gradient(35rem 9.375rem at 32.5rem 50.375rem,rgba(250,248,245,.94) 0%,rgba(250,248,245,.86) 50%,rgba(250,248,245,0) 100%),linear-gradient(90deg,#faf8f5 0%,rgba(250,248,245,.97) 30%,rgba(250,248,245,.82) 40%,rgba(250,248,245,.35) 52%,rgba(250,248,245,0) 64%),linear-gradient(180deg,rgba(250,248,245,.55) 0%,rgba(250,248,245,0) 16%)}
.hero-content{position:relative;padding:10.625rem 0 0 var(--pad)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:7.625rem;line-height:6.1875rem;letter-spacing:-.035em;color:#0d0c0b;margin:2.0625rem 0 0 -0.25rem;font-variation-settings:"opsz" 72}
.hero h1 em{font-style:normal;color:#a57f4b;background:linear-gradient(180deg,#b08a55,#96703d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{margin-top:0.25rem;font-size:1.4063rem;line-height:1.9219rem;color:#34312e;letter-spacing:-.003em}
.hero-actions{display:flex;gap:1.6875rem;margin-top:1.875rem}
.hero-actions .btn-gold{width:14.75rem;padding:0}
.hero-actions .btn-ghost{width:14.25rem;padding:0;font-weight:600}
.usps{display:flex;margin-top:3.5rem}
.usps li{display:flex;align-items:center;gap:1.4375rem}
.usps li:nth-child(1){width:17.5625rem}
.usps li:nth-child(2){width:17.6875rem}
.usps svg{width:2.75rem;height:2.75rem;color:var(--gold);flex:none}
.usps li:nth-child(3) svg{width:3.5rem;height:3.125rem}
.usps strong,.usps span{text-shadow:0 0 0.75rem rgba(250,248,245,.95),0 0 0.1875rem rgba(250,248,245,.9)}
.usps strong{display:block;font-size:1.0562rem;font-weight:600;line-height:1.4375rem;color:#161514}
.usps span{display:block;font-size:0.9281rem;line-height:1.375rem;color:#7a756f}

/* Diensten */
.diensten{background:var(--paper)}
.diensten-inner{display:flex;justify-content:space-between;align-items:flex-start;height:34.6875rem;padding:2.3125rem 4.5rem 0 var(--pad)}
.diensten-text{padding-top:0.6875rem}
.diensten h2,.projecten h2{font-family:var(--serif);font-weight:400;color:#0f0e0d;letter-spacing:-.025em;font-variation-settings:"opsz" 72}
.diensten h2{font-size:3.7125rem;line-height:3.75rem;margin-top:1.4063rem;margin-left:-0.125rem}
.diensten .body{margin-top:1.4063rem;font-size:1.3rem;line-height:1.875rem;color:#45413d}
.diensten .btn{margin-top:1.6875rem;width:18.875rem;padding:0;height:3.5938rem;gap:1.375rem}
.cards{display:grid;grid-template-columns:24.125rem 24.125rem;grid-template-rows:14.3125rem 14.5625rem;gap:1.0313rem 1.125rem}
.card{position:relative;display:block;border-radius:0.5625rem;overflow:hidden;background:#111;color:#fff;isolation:isolate;box-shadow:0 0.5rem 1.375rem rgba(30,20,10,.14)}
.card::before{content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat;transition:transform .7s cubic-bezier(.2,.7,.2,1);z-index:-2}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%);z-index:-1;transition:opacity .3s ease}
.card:hover::before{transform:scale(1.06)}
.card-body{position:absolute;left:1.5rem;right:1rem;bottom:0.6875rem;display:block}
.card-body strong{display:block;font-size:1.375rem;font-weight:500;line-height:1.6875rem;letter-spacing:-.005em;text-shadow:0 0.0625rem 0.5rem rgba(0,0,0,.5)}
.card-body>span{display:block;margin-top:0.25rem;font-size:1.0125rem;line-height:1.4375rem;color:rgba(255,255,255,.95);text-shadow:0 0.0625rem 0.375rem rgba(0,0,0,.6)}
.card:nth-child(3) .card-body>span{font-size:0.8562rem}
.card-body .arr{display:inline-block;width:1.0625rem;height:1.0625rem;vertical-align:-0.1875rem;margin-left:0.125rem;transition:transform .25s ease}
.card:hover .arr{transform:translateX(0.3125rem)}

/* Banner */
.banner{position:relative;height:21.875rem;background:#0c0b0a;overflow:hidden;color:#fff}
.banner-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,0) 48%,rgba(10,9,8,.55) 62%,rgba(10,9,8,.72) 100%),url("/assets/img/banner.33486b16.webp") left center/cover no-repeat}
.banner-content{position:absolute;left:53.875rem;width:30.625rem;top:0;bottom:0;text-align:center;padding-top:2.8125rem}
.banner blockquote{font-family:var(--serif);font-weight:400;font-size:3.5438rem;line-height:3.875rem;letter-spacing:-.025em;margin-top:1.4375rem;font-variation-settings:"opsz" 72;white-space:nowrap}
.banner-cta{margin-top:2.125rem;padding:0 2.125rem}

/* Projecten */
.projecten{background:var(--paper)}
.projecten-inner{padding:1.5625rem 5.875rem 1.4375rem var(--pad)}
.projecten-head{display:flex;justify-content:space-between;align-items:flex-start}
.projecten h2{font-size:2.6313rem;line-height:2.5313rem;margin-top:0.625rem;margin-left:-0.0625rem}
.projecten-head .btn{margin-top:1.0625rem;width:16rem;height:3.125rem;padding:0;font-size:0.9063rem;gap:1.25rem}
.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3125rem;margin-top:0.4688rem}
.project{display:block}
.project-img{display:block;height:10rem;border-radius:0.4375rem;overflow:hidden;background:#ddd;box-shadow:0 0.25rem 0.875rem rgba(30,20,10,.12)}
.project-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.project:hover img{transform:scale(1.07)}
.project strong{display:block;margin-top:0.6875rem;font-size:1.0688rem;font-weight:600;line-height:1.5rem;color:#141312;transition:color .2s ease}
.project:hover strong{color:var(--gold-d)}
.project>span:last-child{display:block;font-size:0.9063rem;line-height:1.375rem;color:#6f6a64}

/* CTA */
.cta{background:var(--paper)}
.cta-inner{display:flex;align-items:center;height:8.5625rem;padding:0 0 0 var(--pad)}
.cta h2{font-family:var(--serif);font-weight:400;font-size:2.1187rem;line-height:2rem;letter-spacing:-.02em;width:32.8125rem;flex:none;color:#111;position:relative;top:0.25rem;font-variation-settings:"opsz" 72}
.cta h2 span{font-size:1.75rem}
.cta .btn{width:15.4375rem;height:3.5625rem;padding:0;gap:1.125rem;position:relative;top:0.0938rem}
.contact-list{margin-left:8.8125rem;padding-left:4.0313rem;border-left:1px solid #e4dfd8;display:grid;gap:0.6563rem;position:relative;top:-0.1875rem}
.contact-list li{display:flex;align-items:center;gap:1.375rem;font-size:1.0625rem;color:#33302d;line-height:1.5625rem}
.contact-list svg{width:1.4375rem;height:1.4375rem;color:var(--gold);flex:none}
.contact-list a{transition:color .2s ease}
.contact-list a:hover{color:var(--gold-d)}

/* Footer */
.site-footer{background:var(--dark);color:#f3efe9}
.footer-inner{display:flex;align-items:center;height:6.4375rem;padding:0 0 0 6rem}
.site-footer .logo{width:8.375rem;margin-top:-0.4375rem}
.site-footer .logo-sub{margin-top:0.3125rem;gap:0.375rem}
.site-footer .logo-sub b{font-size:0.4063rem}
.footer-nav{display:flex;gap:2.875rem;margin-left:7.75rem}
.footer-nav a{font-size:0.9375rem;font-weight:500;transition:color .2s ease}
.footer-nav a:hover{color:var(--gold-l)}
.socials{display:flex;gap:1.125rem;margin-left:10.6875rem}
.socials a{display:block;width:1.5rem;height:1.5rem;transition:color .2s ease,transform .2s ease}
.socials a:hover{color:var(--gold-l);transform:translateY(-0.125rem)}
.socials svg{width:100%;height:100%}
.copyright{margin-left:3rem;font-size:0.875rem;line-height:1.3125rem;color:#b9b4ad;position:relative;top:0.125rem}

/* Reveal */
.reveal{opacity:0;transform:translateY(1.375rem);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.cards .reveal:nth-child(2),.project-grid .reveal:nth-child(2){transition-delay:.08s}
.cards .reveal:nth-child(3),.project-grid .reveal:nth-child(3){transition-delay:.16s}
.cards .reveal:nth-child(4),.project-grid .reveal:nth-child(4){transition-delay:.24s}
.no-js .reveal{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(1.125rem)}to{opacity:1;transform:none}}
.hero-content>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-content>*:nth-child(2){animation-delay:.08s}
.hero-content>*:nth-child(3){animation-delay:.18s}
.hero-content>*:nth-child(4){animation-delay:.26s}
.hero-content>*:nth-child(5){animation-delay:.34s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.hero-content>*{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}


/* ---------- Subpagina's ---------- */
.page-hero{position:relative;background:linear-gradient(180deg,#f6f1ea 0%,var(--paper) 100%);overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-7.5rem;top:-10rem;width:45rem;height:45rem;border-radius:50%;background:radial-gradient(closest-side,rgba(192,154,98,.22),rgba(192,154,98,0));pointer-events:none}
.page-hero-inner{position:relative;z-index:1;padding:11.125rem 4.5625rem 4rem var(--pad)}
.crumbs{display:flex;gap:0.625rem;font-size:0.9063rem;color:#8a847c;margin-bottom:2.125rem}
.crumbs a{color:#5c5650;transition:color .2s ease}
.crumbs a:hover{color:var(--gold-d)}
.crumbs b{font-weight:500;color:var(--gold-d)}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:5.25rem;line-height:5.125rem;letter-spacing:-.03em;color:#0d0c0b;margin:1.375rem 0 0 -0.1875rem;font-variation-settings:"opsz" 72}
.page-lead{margin-top:1.75rem;max-width:45rem;font-size:1.3125rem;line-height:1.9375rem;color:#3d3a37}
.jump{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2.25rem}
.jump a{display:inline-flex;align-items:center;height:2.75rem;padding:0 1.25rem;border-radius:62.4375rem;border:1px solid #d6bd9a;background:#fff;font-size:0.9375rem;font-weight:500;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.jump a:hover{background:var(--brass-gloss),var(--brass);border-color:#6a4c22;color:#fff;text-shadow:0 0.0625rem 0.0625rem rgba(55,35,8,.6);box-shadow:inset 0 1px 0 rgba(255,244,214,.8);transform:translateY(-0.125rem)}
.is-target{animation:target 1.6s ease}
@keyframes target{0%{box-shadow:0 0 0 0 rgba(169,130,78,.0)}25%{box-shadow:0 0 0 0.5rem rgba(169,130,78,.35)}100%{box-shadow:0 0 0 0.5rem rgba(169,130,78,0)}}

.svc-list{padding:1.5rem 4.5625rem 2.5rem var(--pad);display:grid;gap:4.5rem}
.svc{display:grid;grid-template-columns:37.5rem 1fr;gap:4.5rem;align-items:center;border-radius:0.875rem}
.svc-rev{grid-template-columns:1fr 37.5rem}
.svc-rev .svc-img{order:2}
.svc-img{display:block;height:25rem;border-radius:0.75rem;overflow:hidden;box-shadow:0 0.875rem 2.5rem rgba(30,20,10,.16);background:#111}
.svc-img img,.work-img img,.about-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.svc-img:hover img,.work:hover .work-img img,.about-img:hover img{transform:scale(1.05)}
.svc-text h2,.work-text h2,.about-text h2,.form h2{font-family:var(--serif);font-weight:400;font-size:3rem;line-height:3.125rem;letter-spacing:-.025em;color:#0f0e0d;margin-top:0.875rem;font-variation-settings:"opsz" 72}
.svc-text>p:not(.eyebrow),.work-text>p:not(.eyebrow),.about-text>p:not(.eyebrow){margin-top:1.25rem;font-size:1.1875rem;line-height:1.875rem;color:#45413d;max-width:35rem}
.ticks{margin-top:1.375rem;display:grid;gap:0.625rem}
.ticks li{position:relative;padding-left:2rem;font-size:1.0625rem;line-height:1.625rem;color:#2b2825}
.ticks li::before{content:"";position:absolute;left:0.125rem;top:0.375rem;width:0.875rem;height:0.5rem;border-left:0.125rem solid var(--gold);border-bottom:0.125rem solid var(--gold);transform:rotate(-45deg)}
.chips{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:0.625rem}
.chips li{height:2.5rem;padding:0 1.125rem;display:inline-flex;align-items:center;border-radius:62.4375rem;background:#f3ece2;color:#6d5127;font-size:0.9688rem;font-weight:500}
.svc-text .btn{margin-top:1.875rem}

.next{padding:2.5rem 4.5625rem 3.5rem var(--pad)}
.next-link{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2.375rem 3rem;border-radius:0.875rem;background:var(--dark);color:#fff;transition:background-color .3s ease,transform .3s ease}
.next-link:hover{background:#26221d;transform:translateY(-0.1875rem)}
.next-link .eyebrow{color:#d9c3a0}
.next-link strong{display:inline-flex;align-items:center;gap:1.125rem;font-family:var(--serif);font-weight:400;font-size:2.375rem;line-height:1.1;letter-spacing:-.02em}
.next-link .arr{width:2.125rem;height:2.125rem;color:var(--gold-l);transition:transform .25s ease}
.next-link:hover .arr{transform:translateX(0.5rem)}

.work-list{padding:1.5rem 4.5625rem 2.5rem var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:3.5rem 2.5rem}
.work{border-radius:0.875rem}
.work-img{height:21.875rem;border-radius:0.75rem;overflow:hidden;background:#ddd;box-shadow:0 0.625rem 1.875rem rgba(30,20,10,.14)}
.work-text{padding-top:1.625rem}
.work-text h2{font-size:2.375rem;line-height:2.5rem;margin-top:0.625rem}
.text-link{display:inline-flex;align-items:center;gap:0.75rem;margin-top:1.25rem;font-size:1.0313rem;font-weight:600;color:var(--gold-d);border-bottom:1px solid rgba(141,105,54,.35);padding-bottom:0.25rem;transition:color .2s ease,border-color .2s ease}
.text-link .arr{width:1.25rem;height:1.25rem;transition:transform .25s ease}
.text-link:hover{color:var(--ink);border-color:var(--ink)}
.text-link:hover .arr{transform:translateX(0.3125rem)}

.values{padding:0.5rem 4.5625rem 4.5rem var(--pad)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.value-grid li{padding:2.125rem 2.125rem 2.25rem;border-radius:0.875rem;background:#fff;border:1px solid #ece5db;box-shadow:0 0.375rem 1.25rem rgba(40,30,20,.05)}
.value-grid svg{width:2.875rem;height:2.875rem;color:var(--gold)}
.value-grid strong{display:block;margin-top:1.25rem;font-size:1.25rem;font-weight:600;line-height:1.6875rem}
.value-grid span{display:block;margin-top:0.5rem;font-size:1.0313rem;line-height:1.625rem;color:#5f5a54}
.about-inner{display:grid;grid-template-columns:1fr 35rem;gap:5rem;align-items:center;padding:5.5rem 4.5625rem 4.5rem var(--pad)}
.about-img{display:block;height:23.75rem;border-radius:0.75rem;overflow:hidden;box-shadow:0 0.875rem 2.5rem rgba(30,20,10,.16)}
.about-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

.contact-inner{display:grid;grid-template-columns:28.125rem 1fr;gap:3rem;align-items:start;padding:1rem 4.5625rem 6rem var(--pad)}

/* Contactpaneel */
.contact-panel{position:sticky;top:7.5rem;padding:2.75rem 2.5rem 2.5rem;border-radius:1.125rem;color:#f3efe9;overflow:hidden;
  background:radial-gradient(26.25rem 16.25rem at 100% 0%,rgba(192,154,98,.22),rgba(192,154,98,0)),linear-gradient(160deg,#25211c 0%,#191715 100%);
  box-shadow:0 1.5rem 3.75rem rgba(30,20,10,.22)}
.contact-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:0.1875rem;background:var(--brass)}
.contact-panel h2{font-family:var(--serif);font-weight:400;font-size:2.375rem;line-height:2.5625rem;letter-spacing:-.02em;margin-top:0.875rem;color:#fff;font-variation-settings:"opsz" 72}
.contact-panel-lead{margin-top:1rem;font-size:1.0625rem;line-height:1.6875rem;color:#c9c2b8}
.contact-rows{margin-top:1.875rem;display:grid;gap:0.625rem}
.contact-row{display:flex;align-items:center;gap:1.125rem;padding:1rem 1.125rem;border-radius:0.75rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:background-color .25s ease,border-color .25s ease,transform .25s ease}
.contact-row:hover{background:rgba(255,255,255,.09);border-color:rgba(214,176,106,.55);transform:translateX(0.25rem)}
.contact-row .ci{display:grid;place-items:center;width:2.875rem;height:2.875rem;border-radius:50%;flex:none;color:#fff;background:var(--brass-gloss),var(--brass);box-shadow:inset 0 1px 0 rgba(255,244,214,.8),0 0.25rem 0.75rem rgba(0,0,0,.3)}
.contact-row .ci svg{width:1.3125rem;height:1.3125rem;filter:drop-shadow(0 0.0625rem 0.0625rem rgba(55,35,8,.5))}
.contact-row small{display:block;font-size:0.7813rem;letter-spacing:.16em;text-transform:uppercase;color:#a79f94}
.contact-row strong{display:block;margin-top:0.125rem;font-size:1.1563rem;font-weight:600;color:#fff;word-break:break-word}
.contact-row>span:nth-child(2){flex:1;min-width:0}
.contact-row .arr{width:1.25rem;height:1.25rem;color:#d6b06a;flex:none;transition:transform .25s ease}
.contact-row:hover .arr{transform:translateX(0.25rem)}
.contact-promise{margin-top:1.875rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:0.625rem}
.contact-promise li{position:relative;padding-left:1.875rem;font-size:1rem;line-height:1.5rem;color:#ddd6cc}
.contact-promise li::before{content:"";position:absolute;left:0.125rem;top:0.375rem;width:0.8125rem;height:0.4375rem;border-left:0.125rem solid #d6b06a;border-bottom:0.125rem solid #d6b06a;transform:rotate(-45deg)}

/* Formulier */
.form{position:relative;border-radius:1.125rem;background:#fff;border:1px solid #ece5db;box-shadow:0 1.5rem 3.75rem rgba(40,30,20,.1);overflow:hidden}
.form::before{content:"";position:absolute;inset:0 0 auto 0;height:0.1875rem;background:var(--brass)}
.form-body{display:grid;gap:1.375rem;padding:2.75rem 3rem 2.5rem}
.form h2{font-size:2.5rem;line-height:2.625rem;margin:0.25rem 0 0}
.form-intro{font-size:1.0625rem;line-height:1.625rem;color:#5f5a54;margin-top:-0.625rem}
.field-group{border:0;margin:0;padding:1.5rem 0 0;border-top:1px solid #efe9e0;display:grid;gap:0.875rem;min-width:0}
.field-group legend{display:flex;align-items:center;gap:0.75rem;padding:0;margin-bottom:1rem;font-size:1.0313rem;font-weight:600;color:#1d1b19;float:left;width:100%}
.field-group legend+*{clear:both}
.step-dot{display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;font-size:0.8438rem;font-weight:700;color:#fff;text-shadow:0 0.0625rem 0.0625rem rgba(55,35,8,.5);background:var(--brass-gloss),var(--brass);box-shadow:inset 0 1px 0 rgba(255,244,214,.8)}

.svc-pick{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick>span{display:flex;align-items:center;gap:0.875rem;min-height:3.875rem;padding:0.75rem 1.125rem;border-radius:0.75rem;border:1.5px solid #e6dfd5;background:#fbf9f6;font-size:1rem;font-weight:600;color:#2a2622;transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.pick>span svg{width:1.75rem;height:1.75rem;flex:none;color:var(--gold-d);transition:color .2s ease}
.pick:hover>span{border-color:#d6bd9a;background:#fff;transform:translateY(-0.125rem);box-shadow:0 0.5rem 1.125rem rgba(120,86,40,.1)}
.pick input:checked+span{color:#fff;border-color:#6a4c22;text-shadow:0 0.0625rem 0.0625rem rgba(55,35,8,.55);background:var(--brass-gloss),var(--brass-brush),var(--brass);box-shadow:inset 0 1px 0 rgba(255,244,214,.85),0 0.5rem 1.25rem rgba(120,86,40,.28)}
.pick input:checked+span svg{color:#fff}
.pick input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem}
.fl{position:relative}
.fl input,.fl textarea{display:block;width:100%;font:inherit;font-size:1.0625rem;color:var(--ink);background:#fbf9f6;border:1.5px solid #e6dfd5;border-radius:0.75rem;padding:1.625rem 1.125rem 0.625rem;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.fl input{height:3.875rem}
.fl textarea{min-height:9.375rem;resize:vertical;padding-top:1.875rem;line-height:1.625rem}
.fl label{position:absolute;left:1.1875rem;top:1.25rem;font-size:1.0313rem;color:#8a847c;pointer-events:none;transform-origin:left top;transition:transform .2s ease,color .2s ease,top .2s ease}
.fl input:focus,.fl textarea:focus{outline:0;background:#fff;border-color:var(--gold);box-shadow:0 0 0 4px rgba(169,130,78,.14)}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label{top:0.625rem;transform:scale(.78);color:var(--gold-d);font-weight:600}
.fl.is-bad input,.fl.is-bad textarea{border-color:#c25a45;background:#fff8f6}
.fl.is-bad label{color:#a33a2a}
.count{position:absolute;right:1rem;bottom:0.75rem;font-size:0.8125rem;color:#a39d95}

.pref{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;font-size:0.9688rem;color:#5f5a54}
.pref label{cursor:pointer}
.pref input{position:absolute;opacity:0;pointer-events:none}
.pref label span{display:inline-flex;align-items:center;height:2.5rem;padding:0 1.125rem;border-radius:62.4375rem;border:1.5px solid #e6dfd5;background:#fbf9f6;font-weight:600;color:#2a2622;transition:all .2s ease}
.pref input:checked+span{color:#fff;border-color:#6a4c22;text-shadow:0 0.0625rem 0.0625rem rgba(55,35,8,.5);background:var(--brass-gloss),var(--brass)}
.pref input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}

.form-submit{width:100%;margin-top:0.25rem}
.form-note{display:flex;align-items:center;justify-content:center;gap:0.5rem;font-size:0.875rem;color:var(--muted);text-align:center}
.form-note svg{width:1rem;height:1rem;flex:none;color:var(--gold-d)}
.form-error{font-size:0.9375rem;font-weight:500;color:#a33a2a;padding:0.75rem 1rem;border-radius:0.625rem;background:#fbefec}
.form-error[hidden]{display:none}

.form-done{display:grid;justify-items:center;text-align:center;gap:0.875rem;padding:4.5rem 3rem}
.form-done[hidden]{display:none}
.form-body[hidden]{display:none}
.done-icon{display:grid;place-items:center;width:5.25rem;height:5.25rem;border-radius:50%;color:#fff;background:var(--brass-gloss),var(--brass);box-shadow:inset 0 1px 0 rgba(255,244,214,.85),0 0.875rem 1.875rem rgba(120,86,40,.3);animation:pop .5s cubic-bezier(.2,.8,.3,1.3) both}
.done-icon svg{width:2.5rem;height:2.5rem}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.form-done h2{margin-top:0.625rem}
.form-done p{max-width:28.75rem;font-size:1.0625rem;line-height:1.6875rem;color:#45413d}
.done-alt{font-size:0.9375rem!important;color:#6f6a64!important}
.done-alt a{color:var(--gold-d);font-weight:600}
.form-done .btn{margin-top:0.625rem}

/* Paginaheader met foto (zelfde opbouw als de homepage) */
.page-hero.has-photo{min-height:40rem;background:var(--cream)}
.page-hero.has-photo::after{display:none}
.page-hero-bg{position:absolute;inset:0;background-position:right center;background-size:cover;background-repeat:no-repeat}
.page-hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,#faf8f5 0%,rgba(250,248,245,.97) 32%,rgba(250,248,245,.84) 42%,rgba(250,248,245,.38) 54%,rgba(250,248,245,0) 66%),linear-gradient(180deg,rgba(250,248,245,.6) 0%,rgba(250,248,245,0) 18%),linear-gradient(0deg,rgba(250,248,245,.9) 0%,rgba(250,248,245,0) 14%)}
.page-hero.has-photo .page-hero-inner{padding-bottom:5.25rem}
.page-hero.has-photo h1{font-size:4.75rem;line-height:4.75rem;max-width:43.75rem}
.page-hero.has-photo .page-lead{max-width:37.5rem}
.page-hero.has-photo .jump{max-width:40rem}

/* Werkwijze */
.steps{background:var(--paper)}
.steps-inner{padding:6rem 4.5625rem 1.5rem var(--pad)}
.steps-head h2{font-family:var(--serif);font-weight:400;font-size:3.25rem;line-height:3.375rem;letter-spacing:-.025em;color:#0f0e0d;margin-top:0.875rem;font-variation-settings:"opsz" 72}
.steps-head>p:not(.eyebrow){margin-top:1rem;font-size:1.1875rem;line-height:1.875rem;color:#45413d;max-width:38.75rem}
.step-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.75rem;counter-reset:none}
.step-grid li{position:relative;padding:1.875rem 1.75rem 2rem;border-radius:0.875rem;background:#fff;border:1px solid #ece5db;box-shadow:0 0.375rem 1.25rem rgba(40,30,20,.05)}
.step-grid li:not(:last-child)::after{content:"";position:absolute;top:3.25rem;right:-1.3125rem;width:1.375rem;height:1.5px;background:var(--brass)}
.step-no{display:inline-grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;font-family:var(--serif);font-size:1.375rem;color:#fff;text-shadow:0 0.0625rem 0.0625rem rgba(55,35,8,.55);background:var(--brass-gloss),var(--brass);box-shadow:inset 0 1px 0 rgba(255,244,214,.8),0 0.25rem 0.75rem rgba(120,86,40,.25)}
.step-grid strong{display:block;margin-top:1.375rem;font-size:1.25rem;font-weight:600;line-height:1.6875rem}
.step-grid li>span:last-child{display:block;margin-top:0.5rem;font-size:1rem;line-height:1.5625rem;color:#5f5a54}
.steps-cta{margin-top:2.25rem;padding:0 2.125rem}

/* Mobiele actiebalk */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:0.625rem;padding:0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));background:rgba(250,248,245,.94);backdrop-filter:blur(0.875rem);-webkit-backdrop-filter:blur(0.875rem);box-shadow:0 -1px 0 rgba(0,0,0,.06),0 -0.625rem 1.875rem rgba(40,30,20,.08);transition:transform .3s ease}
.mbar .btn{flex:1;height:3.25rem;padding:0 0.75rem;font-size:1rem;gap:0.625rem}
.mbar .btn svg{width:1.25rem;height:1.25rem;flex:none}
.mbar.is-hidden{transform:translateY(110%)}

/* ---------- Tablet ---------- */
@media (max-width:999.98px){
  :root{--pad:2.5rem}
  .header-inner,.site-header.is-scrolled .header-inner{height:4.75rem;padding:0 1.25rem 0 1.75rem}
  .site-header .logo,.site-header.is-scrolled .logo{width:8rem;margin-top:0}
  .logo{width:8.75rem}
  .site-header .logo,.site-footer .logo{margin-top:0}
  .diensten-inner{height:auto;align-items:stretch}
  .cta h2,.cta .btn,.contact-list,.copyright{position:static}
  .eyebrow{font-size:0.7813rem}
  .logo-sub b{font-size:0.4375rem}
  .header-phone{font-size:0.9688rem}
  .header-cta,.site-header.is-scrolled .header-cta{margin-left:1.25rem;width:auto;padding:0 1.25rem;height:3rem}
  .burger{display:grid;gap:0.3125rem;width:3rem;height:3rem;place-content:center;margin-left:0.625rem;border-radius:0.625rem;border:1px solid rgba(169,130,78,.35);background:rgba(255,255,255,.85)}
  .burger span{display:block;width:1.25rem;height:0.125rem;border-radius:0.125rem;background:var(--ink);transition:transform .3s ease,opacity .2s ease}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(0.4375rem) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-0.4375rem) rotate(-45deg)}
  .main-nav{position:fixed;top:0;right:0;bottom:0;width:min(21.25rem,86vw);margin:0;flex-direction:column;align-items:flex-start;gap:0;padding:6.5rem 1.5rem 2rem;background:var(--cream);box-shadow:-1.25rem 0 3.75rem rgba(30,20,10,.18);transform:translateX(105%);transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:-1;visibility:hidden;border-radius:0;gap:0.25rem}
  .main-nav.is-open{transform:none;visibility:visible;box-shadow:-1.25rem 0 3.75rem rgba(30,20,10,.18),0 0 0 100vmax rgba(20,14,8,.38)}
  .nav-open .mbar{transform:translateY(110%)}
  .main-nav a{font-size:1.25rem;padding:0.875rem 0.25rem;align-self:stretch;border-bottom:1px solid #ece5db}
  .main-nav a:not(.btn)::after{left:0.25rem;right:auto;width:2.25rem;bottom:0.625rem;transform-origin:left}
  .main-nav a[aria-current]{color:#6d4f22}
  .nav-phone-m{display:block;margin-top:0.875rem;border-bottom:0!important;color:var(--gold-d)!important;font-weight:600!important}
  .hero{height:auto;min-height:47.5rem}
  .hero-bg{background-size:cover;background-position:78% center}
  .card:nth-child(3) .card-body>span{font-size:0.9063rem}
  .hero-fade{background:linear-gradient(90deg,#faf8f5 0%,rgba(250,248,245,.95) 38%,rgba(250,248,245,.6) 58%,rgba(250,248,245,.1) 80%),linear-gradient(180deg,rgba(250,248,245,.6) 0%,rgba(250,248,245,0) 18%)}
  .hero-content{padding:8.75rem var(--pad) 3.5rem}
  .hero h1{font-size:6rem;line-height:4.75rem;margin-top:1.375rem}
  .hero-lead{font-size:1.125rem;line-height:1.75rem;margin-top:1.375rem}
  .hero-lead br,.diensten .body br{display:none}
  .hero-lead{max-width:26.25rem}
  .usps{flex-wrap:wrap;gap:1.375rem 2.125rem;margin-top:2.75rem}
  .usps li,.usps li:nth-child(1),.usps li:nth-child(2){width:auto;gap:1rem}
  .diensten-inner{flex-direction:column;gap:2.25rem;padding:3.5rem var(--pad)}
  .diensten-text{padding-top:0}
  .diensten h2{font-size:3.25rem;line-height:3.3125rem}
  .diensten .body{max-width:32.5rem;margin-top:1.625rem;font-size:1.125rem;line-height:1.75rem}
  .cards{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:14.375rem}
  .banner{height:auto}
  .banner-bg{background:linear-gradient(90deg,rgba(10,9,8,.15) 0%,rgba(10,9,8,.7) 55%,rgba(10,9,8,.85) 100%),url("/assets/img/banner.33486b16.webp") left center/cover no-repeat}
  .banner-content{position:relative;left:auto;width:auto;margin-left:auto;max-width:32.5rem;padding:3.5rem var(--pad) 3.5rem 0}
  .banner blockquote{font-size:2.875rem;line-height:3.0625rem}
  .projecten-inner{padding:3.5rem var(--pad) 0.5rem}
  .project-grid{grid-template-columns:1fr 1fr;gap:1.75rem 1.3125rem;margin-top:1.75rem}
  .project-img{height:auto;aspect-ratio:300/160}
  .cta-inner{height:auto;flex-wrap:wrap;gap:1.75rem 2.5rem;padding:3.5rem var(--pad)}
  .cta h2{width:auto;flex:1 1 23.75rem}
  .contact-list{margin-left:0;padding-left:0;border-left:0;flex:1 1 100%;grid-template-columns:repeat(3,auto);justify-content:start;gap:0.75rem 2.25rem;padding-top:1.625rem;border-top:1px solid #e4dfd8}
  .contact-list li{gap:0.75rem}
  .footer-inner{height:auto;flex-wrap:wrap;gap:1.625rem 2.5rem;padding:2.25rem var(--pad)}
  .footer-nav{margin-left:0;gap:1.75rem;flex-wrap:wrap;order:3;flex:1 1 100%}
  .socials{margin-left:auto}
  .copyright{margin-left:0;order:4}
  .page-hero-inner{padding:8.25rem var(--pad) 3rem}
  .crumbs{margin-bottom:1.5rem}
  .page-hero h1{font-size:3.75rem;line-height:3.75rem}
  .page-lead{font-size:1.125rem;line-height:1.75rem;margin-top:1.375rem}
  .svc-list{padding:1rem var(--pad) 2rem;gap:3.5rem}
  .svc,.svc-rev{grid-template-columns:1fr;gap:1.75rem}
  .svc-rev .svc-img{order:0}
  .svc-img{height:auto;aspect-ratio:27/16}
  .svc-text h2,.about-text h2{font-size:2.5rem;line-height:2.625rem}
  .next{padding:2rem var(--pad) 3rem}
  .next-link strong{font-size:1.875rem}
  .work-list{padding:1rem var(--pad) 2rem;gap:2.75rem 1.5rem}
  .work-img{height:auto;aspect-ratio:16/9}
  .work-text h2{font-size:2rem;line-height:2.125rem}
  .values{padding:0 var(--pad) 3.5rem}
  .value-grid{grid-template-columns:1fr;gap:1rem}
  .about-inner{grid-template-columns:1fr;gap:2.25rem;padding:3.5rem var(--pad)}
  .about-img{height:auto;aspect-ratio:16/9}
  .contact-inner{grid-template-columns:1fr;gap:1.75rem;padding:0.5rem var(--pad) 4rem}
  .contact-panel{position:static}
  .contact-inner .form{order:-1}
  .form-body{padding:2.25rem 1.875rem 2rem}
  .page-hero.has-photo{min-height:0}
  .page-hero-bg{background-position:72% center}
  .page-hero-fade{background:linear-gradient(90deg,#faf8f5 0%,rgba(250,248,245,.95) 40%,rgba(250,248,245,.6) 62%,rgba(250,248,245,.1) 84%),linear-gradient(180deg,rgba(250,248,245,.6) 0%,rgba(250,248,245,0) 18%)}
  .page-hero.has-photo .page-hero-inner{padding-bottom:4rem}
  .page-hero.has-photo h1{font-size:3.75rem;line-height:3.75rem}
  .steps-inner{padding:4rem var(--pad) 1rem}
  .steps-head h2{font-size:2.625rem;line-height:2.75rem}
  .step-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .step-grid li::after{display:none}
}

/* ---------- Mobiel ---------- */
@media (max-width:640px){
  :root{--pad:1.25rem}
  .header-inner,.site-header.is-scrolled .header-inner{height:4.25rem;padding:0 0.75rem 0 1.125rem}
  .site-header .logo,.site-header.is-scrolled .logo{width:7rem}
  .logo{width:7rem}
  .logo-sub{gap:0.3125rem;margin-top:0.3125rem}
  .logo-sub b{font-size:0.3438rem}
  .header-phone span,.header-cta{display:none}
  .header-phone{width:3rem;height:3rem;padding:0;justify-content:center;border-radius:0.625rem;border:1px solid rgba(169,130,78,.35);background:rgba(255,255,255,.85);font-size:0;gap:0}
  .burger{margin-left:0.625rem}
  .nav-cta-m{display:inline-flex;margin-top:1.125rem;align-self:stretch;height:3.375rem;color:#fff!important;border-bottom:0!important}
  .main-nav{width:100%;padding:5.75rem 1.5rem 2rem}
  .main-nav.is-open{box-shadow:none}
  .hero{min-height:0}
  .hero-bg{inset:auto 0 0 0;height:54%;background-size:cover;background-position:80% center}
  .hero-fade{background:linear-gradient(180deg,#faf8f5 0%,#faf8f5 44%,rgba(250,248,245,.86) 56%,rgba(250,248,245,.35) 74%,rgba(250,248,245,.05) 100%)}
  .hero-content{padding:7rem var(--pad) 2.5rem}
  .eyebrow{font-size:0.6875rem;letter-spacing:.34em}
  .hero h1{font-size:4.25rem;line-height:3.4375rem;margin-top:1.125rem;margin-left:-0.125rem}
  .hero-lead{font-size:1.0313rem;line-height:1.625rem;margin-top:1.5rem}
  .hero-actions{flex-direction:column;gap:0.75rem;margin-top:1.625rem}
  .hero-actions .btn-gold,.hero-actions .btn-ghost{width:100%}
  .usps{flex-direction:column;gap:1rem;margin-top:2.125rem;padding:1.25rem;border-radius:0.75rem;background:rgba(250,248,245,.88);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);box-shadow:0 0.625rem 1.875rem rgba(40,30,20,.12)}
  .usps svg,.usps li:nth-child(3) svg{width:2.25rem;height:2.25rem}
  .usps strong br{display:none}
  .diensten-inner{padding:2.75rem var(--pad);gap:1.75rem}
  .diensten h2{font-size:2.5rem;line-height:2.5625rem;margin-top:1rem}
  .diensten h2 br,.projecten h2 br{display:none}
  .diensten .body{font-size:1.0625rem;line-height:1.6875rem;margin-top:1.25rem}
  .diensten .btn{width:100%;margin-top:1.5rem}
  .cards{grid-template-columns:1fr;grid-auto-rows:12.5rem;gap:0.875rem}
  .banner-bg{background:linear-gradient(180deg,rgba(10,9,8,.2) 0%,rgba(10,9,8,.78) 52%,rgba(10,9,8,.94) 100%),url("/assets/img/banner.33486b16.webp") 22% top/auto 62% no-repeat,#0c0b0a}
  .banner-content{max-width:none;margin:0;padding:13.125rem var(--pad) 2.75rem}
  .banner blockquote{font-size:2.25rem;line-height:2.4375rem;white-space:normal;margin-top:1rem}
  .banner blockquote br{display:none}
  .banner-cta{width:100%;margin-top:1.625rem}
  .projecten-inner{padding:2.75rem var(--pad) 0.25rem}
  .projecten-head{flex-direction:column;gap:0.375rem}
  .projecten h2{font-size:2.125rem;line-height:2.1875rem}
  .projecten-head .btn{width:100%;margin-top:0.875rem}
  .project-grid{gap:1.375rem 0.875rem;margin-top:1.5rem}
  .project strong{font-size:1rem;line-height:1.375rem;margin-top:0.625rem}
  .project>span:last-child{font-size:0.8438rem;line-height:1.25rem}
  .cta-inner{padding:2.75rem var(--pad);gap:1.375rem}
  .cta h2{font-size:1.75rem;line-height:1.9375rem;flex-basis:100%}
  .cta h2 span{font-size:1.4375rem}
  .cta .btn{width:100%}
  .contact-list{grid-template-columns:1fr;padding-top:1.375rem}
  .footer-inner{padding:2rem var(--pad);gap:1.375rem}
  .footer-nav{gap:0.875rem 1.5rem}
  .page-hero-inner{padding:6.75rem var(--pad) 2.25rem}
  .page-hero h1{font-size:2.625rem;line-height:2.6875rem}
  .page-hero h1 br{display:none}
  .jump{gap:0.5rem;margin-top:1.625rem}
  .jump a{height:2.5rem;padding:0 0.9375rem;font-size:0.875rem}
  .svc-text h2,.about-text h2{font-size:2.0625rem;line-height:2.1875rem}
  .svc-text>p:not(.eyebrow),.work-text>p:not(.eyebrow),.about-text>p:not(.eyebrow){font-size:1.0625rem;line-height:1.6875rem}
  .svc-text .btn,.about-actions .btn{width:100%}
  .next-link{flex-direction:column;align-items:flex-start;padding:1.75rem 1.5rem}
  .next-link strong{font-size:1.625rem;gap:0.75rem}
  .next-link .arr{width:1.625rem;height:1.625rem}
  .work-list{grid-template-columns:1fr}
  .value-grid li{padding:1.625rem 1.5rem}
  .contact-panel{padding:2rem 1.375rem 1.75rem}
  .contact-panel h2{font-size:1.875rem;line-height:2.0625rem}
  .contact-panel h2 br{display:none}
  .contact-row{padding:0.875rem;gap:0.875rem}
  .contact-row strong{font-size:0.9688rem}
  .contact-row .arr{display:none}
  .pref span:first-child{flex-basis:100%}
  .form-body{padding:1.875rem 1.25rem 1.625rem;gap:1.125rem}
  .form h2{font-size:1.9375rem;line-height:2.0625rem}
  .field-row{grid-template-columns:1fr}
  .svc-pick{grid-template-columns:1fr}
  .pick>span{min-height:3.5rem}
  .form-done{padding:3.5rem 1.375rem}
  /* Hero: tekst en knoppen op crème, de auto als eigen beeld eronder */
  .usps{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 0.5rem 1.625rem rgba(40,30,20,.08);border:1px solid #efe8de;margin-bottom:1.75rem}
  .usps strong,.usps span{text-shadow:none}
  .eyebrow{font-size:0.75rem;letter-spacing:.3em}
  /* Grotere klikvlakken (minimaal 2.75rem) */
  .crumbs a{padding:0.75rem 0;margin:-0.75rem 0}
  .text-link{min-height:2.75rem;padding-bottom:0;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(141,105,54,.35);text-underline-offset:0.3125rem}
  .contact-list{gap:0.25rem}
  .contact-list li{min-height:2.75rem}
  .contact-list a{display:flex;align-items:center;min-height:2.75rem;flex:1}
  .footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  .footer-nav a{display:flex;align-items:center;min-height:2.75rem;font-size:1rem}
  .socials{gap:0.25rem;margin-right:-0.625rem}
  .socials a{width:2.75rem;height:2.75rem;padding:0.625rem}
  .site-footer .logo{width:7.75rem}
  /* Vaste actiebalk onderin */
  .mbar{display:flex}
  body{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}
  .page-hero.has-photo h1{font-size:2.625rem;line-height:2.6875rem}
  .steps-head h2{font-size:2.125rem;line-height:2.25rem}
  .step-grid{grid-template-columns:1fr}
  .steps-cta{width:100%}
  /* Mobiel: foto als achtergrond van de header, donkere waas en lichte tekst */
  .header-inner::before,.header-inner::after{opacity:1}
  .hero{min-height:0}
  .hero-bg,.page-hero-bg{inset:0;height:auto;background-size:cover;background-position:72% center}
  .hero-fade,.page-hero-fade{background:linear-gradient(180deg,rgba(14,11,8,.62) 0%,rgba(14,11,8,.46) 38%,rgba(14,11,8,.58) 70%,rgba(14,11,8,.82) 100%)}
  .hero-content{padding:7.25rem var(--pad) 2.25rem}
  .hero .eyebrow,.page-hero.has-photo .eyebrow{color:#e6c88a}
  .hero h1,.page-hero.has-photo h1{color:#fff;text-shadow:0 0.125rem 1.125rem rgba(0,0,0,.35)}
  .hero h1 em{background:linear-gradient(180deg,#f0d49a,#c99f5c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
  .hero-lead,.page-hero.has-photo .page-lead{color:rgba(255,255,255,.92);text-shadow:0 0.0625rem 0.625rem rgba(0,0,0,.35)}
  .hero-actions .btn-ghost{color:#fff;background:linear-gradient(rgba(20,15,10,.35),rgba(20,15,10,.35)) padding-box,var(--brass) border-box;backdrop-filter:blur(0.375rem);-webkit-backdrop-filter:blur(0.375rem)}
  .hero-actions .btn-ghost:hover{color:#fff;background:linear-gradient(rgba(20,15,10,.5),rgba(20,15,10,.5)) padding-box,var(--brass-hi) border-box}
  .usps{margin-bottom:0;background:rgba(255,255,255,.96)}
  .page-hero.has-photo .page-hero-inner{padding:7rem var(--pad) 2.75rem}
  .page-hero.has-photo .crumbs,.page-hero.has-photo .crumbs a{color:rgba(255,255,255,.8)}
  .page-hero.has-photo .crumbs b{color:#e6c88a}
  .page-hero.has-photo .jump a{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.6)}
}

.svc-text h2{margin-top:0}

/* Aanvullingen op styles.css (worden er bij het bouwen achter geplakt) */
.hero-bg{transform:translateX(9%)}
@media (max-width:640px){.hero-bg{transform:none}}