/* KMW Vastgoed, sitestijl. Geen externe afhankelijkheden. */
@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/raleway-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Raleway;font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/raleway-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Raleway;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/raleway-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/montserrat-latin-700-normal.woff2) format("woff2")}

:root{
  --red:#e72c34;--red-dark:#c81d25;--dgrey:#231e21;--lgrey:#ebebeb;--text:#101111;--muted:#6c6c6c;--white:#fff;
  --heading:Montserrat,"Segoe UI",Arial,sans-serif;--body:Raleway,"Segoe UI",Arial,sans-serif;
  --container:1140px;--gutter:15px;--header-h:130px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
/* Lenis (smooth scroll met muis/trackpad) neemt het over van CSS */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.parallax{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--body);font-size:1rem;line-height:1.9;color:var(--text);background:var(--white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red-dark)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3,h4,.h3,.h4{font-family:var(--heading);font-weight:700;line-height:1.25;margin:0 0 .6em;color:inherit}
h1{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.25rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem)}
h3,.h3{font-size:1.375rem}
h4,.h4{font-size:1.125rem}
p,ul,ol,address{margin:0 0 1.25rem}
address{font-style:normal}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--dgrey);color:#fff;padding:.5rem 1rem}
.skip-link:focus{top:1rem}
.text-center{text-align:center}
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* Header */
.header{position:sticky;top:0;z-index:100;background:var(--white);transition:box-shadow .3s ease}
.header.is-scrolled{box-shadow:0 2px 12px rgba(0,0,0,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.header-logo{display:block;width:140px;margin:16px 0;transition:width .35s ease-out}
.header-logo img{width:100%}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;color:var(--dgrey)}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:26px;height:3px;background:currentColor;border-radius:2px;transition:transform .25s ease}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-8px}.nav-toggle-bars::after{top:8px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-8px) rotate(-45deg)}
.header-nav{flex-basis:100%}
.nav-primary{display:none;list-style:none;margin:0 calc(-1*var(--gutter));padding:0 0 .5rem}
.nav-primary.open{display:block}
.nav-primary a{display:block;padding:10px var(--gutter);color:var(--text);font:700 1.125rem/1.5 var(--heading);text-decoration:none;border-top:1px solid rgba(0,0,0,.1)}
.nav-primary a:hover,.nav-primary a.active{color:var(--red)}
.nav-primary .nav-cta-item{padding:12px var(--gutter) 4px;border-top:1px solid rgba(0,0,0,.1)}
.nav-primary a.nav-cta{display:inline-block;border:2px solid var(--red);background:var(--red);color:#fff;padding:8px 26px;transition:background-color .5s ease-in-out,color .5s ease-in-out,border-color .5s ease-in-out}
.nav-primary a.nav-cta:hover,.nav-primary a.nav-cta:focus-visible{background:var(--dgrey);border-color:var(--dgrey);color:#fff}
.nav-primary a.nav-cta.active{background:transparent;color:var(--red)}
.nav-primary a.nav-cta.active:hover{background:var(--red);border-color:var(--red);color:#fff}
@media (min-width:992px){
  :root{--header-h:130px}
  .header-logo{width:264px;margin:20px 0}
  .header.is-scrolled .header-logo{width:150px;margin:12px 0}
  .nav-toggle{display:none}
  .header-nav{flex-basis:auto}
  .nav-primary{display:flex;gap:6px;margin:0;padding:0}
  .nav-primary{align-items:center}
  .nav-primary a{border:0;padding:8px 12px}
  .nav-primary .nav-cta-item{padding:0 0 0 14px;border:0}
  .nav-primary a.nav-cta{padding:8px 26px}
}
@media (max-width:991.98px){:root{--header-h:90px}}

/* Kruimelpad */
.breadcrumb{font-size:.8125rem;color:var(--muted);padding-top:.75rem;padding-bottom:.75rem}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.breadcrumb li+li::before{content:"/";padding:0 .5rem;color:#aaa}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--red);text-decoration:underline}

/* Secties */
.section{padding:70px 0}
.section.pt-0{padding-top:0}
.bg-white{background:var(--white)}
.bg-lgrey{background:var(--lgrey)}
.bg-dgrey{background:var(--dgrey);color:#fff}
.bg-red{background:var(--red);color:#fff}
.bg-red a{color:#fff}
.page-header{max-width:760px;margin:0 auto 40px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.intro{max-width:980px}

/* Knoppen */
.btn{display:inline-block;min-width:150px;padding:.55rem 1.5rem;border:2px solid transparent;font:700 1rem/1.5 var(--heading);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;margin:0 .25rem .5rem 0}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff;min-width:220px}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-outline-primary{border-color:var(--red);color:var(--red);background:transparent}
.btn-outline-primary:hover{background:var(--red);color:#fff}
.btn-outline-secondary{border-color:var(--dgrey);color:var(--dgrey);background:transparent;min-width:220px}
.btn-outline-secondary:hover{background:var(--dgrey);color:#fff}

/* Hero */
.hero{padding:40px 0 0;background:linear-gradient(var(--lgrey) 0,var(--lgrey) 62%,var(--white) 62%)}
.hero-grid{display:grid;gap:0}
.tile{padding:24px 20px;position:relative;z-index:1}
.tile h1{font-size:1.5rem;margin-bottom:.75rem}
.tile p{font-size:.9375rem;margin:0}
.hero-image{margin-top:-1px;overflow:hidden}
.hero-image img{width:100%;height:clamp(260px,62vw,420px);object-fit:cover}
@media (min-width:992px){
  .hero{padding-top:56px;background:linear-gradient(var(--lgrey) 0,var(--lgrey) 52%,var(--white) 52%)}
  .hero-grid{grid-template-columns:repeat(12,1fr)}
  .tile{grid-column:1/7;grid-row:1;align-self:start;padding:30px 28px;margin-bottom:0}
  .hero-image{grid-column:3/13;grid-row:1;margin-top:110px}
  .hero-image img{height:clamp(460px,44vw,600px)}
}

/* Kaarten */
.cards{display:grid;gap:30px;grid-template-columns:1fr}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{position:relative;display:flex;flex-direction:column;text-align:center}
.card-media{display:block}
.card-label{position:absolute;top:0;left:0;z-index:2;background:var(--red);color:#fff;padding:5px 15px;font-size:.875rem}
.card-body{position:relative;z-index:3;background:var(--lgrey);color:var(--text);margin:-50px 25px 0;padding:24px 24px 8px;flex:1}
.card-body h3{font-size:1.25rem}
.card-body h3 a{color:inherit;text-decoration:none}
.card-body h3 a:hover{color:var(--red)}
.card-body p{font-size:.875rem}
.card-footer{background:var(--lgrey);margin:0 25px;padding:0 24px 24px}
.bg-lgrey .card-body,.bg-lgrey .card-footer{background:var(--white)}
.img-zoom{display:block;overflow:hidden}
.img-zoom img{transition:transform .5s ease-out;width:100%}
.img-zoom:hover img,.img-zoom:focus-visible img{transform:scale(1.05)}

/* Projecten-teaser */
.teaser{display:grid;gap:0}
.teaser-body{background:var(--white);padding:24px;box-shadow:0 .125rem .25rem rgba(0,0,0,.075);position:relative;z-index:1}
.teaser-body p{font-size:.9375rem}
@media (min-width:768px){
  .teaser{grid-template-columns:repeat(12,1fr);align-items:center}
  .teaser-image{grid-column:1/7;grid-row:1}
  .teaser-body{grid-column:6/13;grid-row:1;padding:48px}
}
@media (min-width:992px){.teaser-body{grid-column:6/12}}

/* Artikel */
.article-date{color:var(--muted);font-size:.8125rem;margin-top:-.75rem}
.article-figure{margin:0 auto 1.5rem;max-width:960px}
.article-figure img{width:100%}
.prose p,.prose li{font-size:.9375rem}
.prose h2{font-size:1.375rem;margin-top:2rem}
.prose ul{padding-left:1.25rem}

/* Contact */
.contact-grid{display:grid;gap:30px;max-width:900px;margin:0 auto}
@media (min-width:768px){.contact-grid{grid-template-columns:1fr 1fr}}
.map{position:relative;width:100%;max-width:900px;margin:30px auto 0;min-height:380px;background:#d9d9d9 linear-gradient(135deg,#e2e2e2 25%,#d6d6d6 25%,#d6d6d6 50%,#e2e2e2 50%,#e2e2e2 75%,#d6d6d6 75%) 0 0/40px 40px;display:flex;align-items:center;justify-content:center}
@media (min-width:768px){.map{aspect-ratio:16/9}}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-consent{background:var(--white);padding:28px;max-width:440px;margin:16px;text-align:center;box-shadow:0 .125rem .5rem rgba(0,0,0,.12)}
.map-consent p{font-size:.875rem}
.map-consent .h4{font-family:var(--heading);font-weight:700;font-size:1.125rem;margin-bottom:.5rem}
.contact-card{background:var(--white);padding:32px;box-shadow:0 .125rem .25rem rgba(0,0,0,.075)}

/* Footer */
.footer-grid{display:grid;gap:30px;align-items:start}
@media (min-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-grid img{width:216px}
.footer-contact .h4{color:#fff;margin-bottom:1rem}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:.75rem;line-height:1.6}
.contact-list .icon{flex:0 0 22px;width:22px;height:22px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-list a{color:#fff;text-decoration:none}
.contact-list a:hover,.contact-list a:focus-visible{text-decoration:underline}
.footer-bottom{background:var(--lgrey);font-size:.8125rem;padding:1rem 0}
.footer-bottom-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem}
.footer-bottom p{margin:0}
.list-inline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.footer-bottom a{color:var(--text);text-decoration:none}
.footer-bottom a:hover{color:var(--red);text-decoration:underline}

/* Terug naar boven */
.btn-scrolltop{position:fixed;right:0;bottom:40px;z-index:80;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(0,0,0,.5);color:#fff;opacity:0;visibility:hidden;transition:opacity .4s ease-out,visibility .4s}
.btn-scrolltop.is-visible{opacity:1;visibility:visible}
.btn-scrolltop:hover{background:var(--dgrey);color:#fff}

@media print{.header,.footer,.btn-scrolltop,.breadcrumb{display:none}.section{padding:20px 0}}