/* ============================================================
   ZK Kozijnen bv — homepage
   Waarden 1-op-1 overgenomen van zkkozijnen.nl (Elementor kit 4)
   ============================================================ */

/* ---------- webfont ---------- */
@font-face{
  font-family:'BR Hendrix';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/BR-Hendrix-W05-Regular.woff2') format('woff2'),
      url('../fonts/BR-Hendrix-W05-Regular.woff')  format('woff'),
      url('../fonts/BR-Hendrix-W05-Regular.ttf')   format('truetype');
}

/* ---------- design tokens ---------- */
:root{
  --primary:#3F4344;
  --secondary:#3F4344;
  --text:#5D5D5D;
  --accent:#C39508;
  --white:#FFFFFF;
  --grey-light:#F2F2F2;
  --grey-line:#E4E4E4;

  --font:"BR Hendrix",Sans-serif;
  --text-line-height:1.6em;

  --container:1310px;
  --widgets-spacing:20px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{
  margin:0;
  overflow-x:hidden;
  background-color:#fff;
  color:#333;
  font-family:var(--font);
  font-size:1rem;
  font-weight:400;
  line-height:var(--text-line-height);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;border:0;vertical-align:middle;display:inline-block}
a{color:var(--accent);font-weight:600;text-decoration:none}
a:hover{color:var(--primary)}
p{margin:0 0 .9rem}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}

h1,h2,h3,h4,h5,h6{
  color:var(--primary);
  font-family:inherit;
  font-weight:500;
  line-height:1.2;
  margin-block-start:.5rem;
  margin-block-end:1rem;
}
h1{font-size:2.5rem;text-transform:uppercase;letter-spacing:.5px}
h2{font-size:2rem}      /* 32px */
h3{font-size:1.75rem}   /* 28px */
h4{font-size:1.5rem}
h5{font-size:1.25rem}   /* 20px */
h6{font-size:1rem}

.heading-title{line-height:1;margin:0;padding:0}

.screen-only{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:#fff;color:var(--primary);padding:10px 16px
}
.skip-link:focus{left:0}

/* ---------- layout primitives (Elementor section/column/widget) ---------- */
section{position:relative}
.container{
  display:flex;
  margin-left:auto;margin-right:auto;
  position:relative;
  max-width:var(--container);
  width:100%;
  flex-wrap:wrap;
}
.col{
  position:relative;
  display:flex;
  min-height:1px;
  min-width:0;
}
.col-100{width:100%}
.col-50{width:50%}
.col-25{width:25%}
.widget-wrap{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  width:100%;
  padding:10px;              /* Elementor default column padding */
  position:relative;
}
.widget-text{color:var(--text)}
.widget{
  width:100%;
  position:relative;
  margin-block-end:var(--widgets-spacing);
}
.widget-wrap > .widget:last-child{margin-block-end:0}
.widget__container{}
.widget-image{text-align:center}

.section__overlay{
  position:absolute;inset:0;
  pointer-events:none;
}

/* verborgen per breakpoint (Elementor: elementor-hidden-desktop/tablet/mobile) */
@media (min-width:1025px){ .hide-desktop{display:none!important} }
@media (max-width:1024px) and (min-width:768px){ .hide-tablet{display:none!important} }
@media (max-width:767px){ .hide-mobile{display:none!important} }

/* omgekeerde kolomvolgorde */
.reverse-mobile,.reverse-tablet{}

/* ---------- knoppen ---------- */
.btn{
  display:inline-block;
  background-color:var(--accent);
  border:1px solid var(--accent);
  border-radius:0;
  color:var(--white);
  fill:var(--white);
  font-family:var(--font);
  font-weight:500;
  font-size:15px;
  line-height:1;
  padding:12px 24px;
  text-align:center;
  text-decoration:none;
  transition:all .3s;
  width:auto;
}
.btn:hover,.btn:focus{
  background-color:var(--primary);
  border-color:var(--primary);
  color:var(--white);
}
.btn--sm{font-size:15px;padding:12px 24px}
.btn--md{font-size:16px;padding:15px 30px}
.btn__content{display:flex;justify-content:center;align-items:center;gap:5px}
.button-wrapper{}
.align-center .button-wrapper{text-align:center}

/* Elementor "float" hover animatie */
.anim-float{transition:transform .3s ease-out}
.anim-float:hover{transform:translateY(-8px)}

/* ---------- divider widget ---------- */
.divider{
  display:flex;
  padding-block-start:5px;padding-block-end:5px;
}
.divider__sep{
  display:block;
  width:100%;
  border-block-start:1px solid var(--grey-line);
}
.divider--accent .divider{padding-block-start:0;padding-block-end:0}
.divider--accent .widget__container{
  padding:0;
  border-style:solid;border-width:0 0 1px;border-color:var(--grey-line);
}
.divider--accent .divider__sep{
  width:100px;
  border-block-start:5px solid var(--accent);
}

/* ---------- icon list widget ---------- */
.icon-list__item{display:flex;align-items:center}
.icon-list__item > a{display:flex;align-items:center;width:100%}
.icon-list:not(.icon-list--inline) .icon-list__item:not(:last-child){padding-block-end:4px}
.icon-list:not(.icon-list--inline) .icon-list__item:not(:first-child){margin-block-start:4px}
.icon-list--inline{display:flex;flex-wrap:wrap;margin-inline:-8px}
.icon-list--inline .icon-list__item{margin-inline:8px}
.icon-list__icon{
  display:inline-flex;align-items:center;
  padding-inline-end:6px;
  width:calc(var(--icon-size, 14px) + 6px);
}
.icon-list__icon svg{
  width:var(--icon-size,14px);height:var(--icon-size,14px);
  fill:var(--accent);transition:fill .3s;
}
.icon-list__icon--sq svg{width:8px;height:8px}
.icon-list__text{color:var(--text);font-weight:400;transition:color .3s}
.icon-list__item > a .icon-list__text{color:var(--text)}
.icon-list__item > a:hover .icon-list__text{color:var(--accent)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:relative}
.hdr-logo{z-index:1}
.hdr-logo__img img{width:320px}
.hdr-logo .container,.hdr-nav .container{max-width:var(--container)}

.hdr-nav{padding:0 20px;z-index:1}
.hdr-nav .widget-wrap{padding:0 10px 10px}

.nav__list{
  display:flex;
  justify-content:center;
  align-items:center;
  height:50px;
}
.nav__item{position:relative}
.nav__item > a{
  display:flex;align-items:center;
  font-family:var(--font);
  font-size:16px;
  font-weight:500;
  color:var(--white);
  padding:0 5px;
  line-height:1.5;
}
.nav__item > a:hover,
.nav__item:hover > a,
.nav__item.is-current > a,
.nav__item.is-ancestor > a{color:var(--accent)}
.nav__item.is-ancestor > a .nav__arrow{color:var(--accent)}
.nav__arrow{
  display:inline-block;
  margin-left:4px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  color:var(--white);
  transition:color .3s;
}
.nav__item:hover > a .nav__arrow,
.nav__item > a:hover .nav__arrow{color:var(--accent)}

.nav__sub{
  position:absolute;
  top:100%;left:0;
  min-width:220px;
  background:var(--white);
  padding:0;
  border-radius:0;
  box-shadow:0 5px 5px -5px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:opacity .2s,transform .2s,visibility .2s;
  z-index:20;
}
.nav__item:hover > .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{
  display:block;
  font-size:16px;
  font-weight:500;
  padding:15px;
  color:var(--primary);
  transition:background-color .3s,color .3s;
}
.nav__sub li:hover > a,.nav__sub a:hover{background-color:var(--accent);color:var(--white)}
.nav__sub li.is-current > a{background-color:var(--accent);color:var(--white)}

/* header mobiel */
.hdr-mobile{padding:0 20px;z-index:1}
.hdr-mobile .widget-wrap{padding:0 10px 10px}
.hdr-mobile__logo{width:40%}
.hdr-mobile__menu{width:60%}
.hdr-mobile__menu .widget-wrap{align-content:center;align-items:center}
.hdr-mobile__logo img{width:200px}

.hamburger{
  float:right;
  display:block;
  margin-left:auto;
  background-color:var(--accent);
  border:1px solid var(--accent);
  border-radius:0;
  padding:8px 12px;
  color:var(--white);
  transition:background-color .3s;
}
.hamburger:hover{background-color:var(--primary);border-color:var(--primary)}
.hamburger__icon{
  display:block;width:22px;height:2px;background:var(--white);position:relative;
}
.hamburger__icon::before,.hamburger__icon::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--white);
}
.hamburger__icon::before{top:-7px}
.hamburger__icon::after{top:7px}

/* offcanvas */
.offcanvas{position:fixed;inset:0;z-index:999}
.offcanvas[hidden]{display:none}
.offcanvas__overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.6);
  opacity:0;transition:opacity .3s;
}
.offcanvas__panel{
  position:absolute;top:0;left:0;bottom:0;
  width:100%;max-width:350px;
  background:var(--white);
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .3s;
  z-index:2;
  padding:15px 0;
}
.offcanvas.is-open .offcanvas__panel{transform:translateX(0)}
.offcanvas.is-open .offcanvas__overlay{opacity:1}
.offcanvas__identity{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 15px;
}
.offcanvas__logo img{width:90px}
.offcanvas__close{
  background:transparent;border:1px solid var(--primary);
  color:#333;padding:8px;width:45px;border-radius:3px;
}
.offcanvas__close:hover{background:var(--secondary);border-color:var(--accent);color:var(--white)}
.offcanvas__list a{display:block;padding:10px 15px;color:#000;font-weight:500;font-size:16px}
.offcanvas__list a:hover{color:#707070}
.offcanvas__list > li.is-current > a,
.offcanvas__list > li.is-ancestor > a{color:var(--accent)}
.offcanvas__list ul li.is-current > a{color:#707070}
.offcanvas__list > li > a{border-bottom:1px solid var(--grey-line)}
.offcanvas__list ul{display:none;background:#fafafa}
.offcanvas__list li.is-expanded > ul{display:block}
.offcanvas__list ul a{padding:12px 30px}
.offcanvas__list .nav__arrow{color:#101010;float:right;margin-top:9px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  margin-top:-230px;
  margin-bottom:0;
  padding:20px;
  overflow:hidden;
}
.hero > .container{min-height:975px;align-items:center}
.hero__col{width:100%}
.hero__col .widget-wrap{padding:30px 10px 80px}
.hero__overlay{background-color:#000;opacity:.5}

.slideshow{position:absolute;inset:0;overflow:hidden}
.slideshow__slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .5s linear;
  transform:scale(1);
  will-change:transform,opacity;
}
.slideshow__slide.is-active{opacity:1}
.slideshow__slide.is-zooming{
  transform:scale(1.3);
  transition:opacity .5s linear,transform 20s linear;
}

.hero__eyebrow .heading-title,
.hero__title .heading-title,
.hero__sub .heading-title{color:var(--white)}
.hero__eyebrow,.hero__title,.hero__sub{text-align:center}
.hero__title .heading-title{
  font-family:var(--font);
  font-size:62px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--white);
}
.hero__sub .heading-title{font-weight:500}
.hero__btn{margin-block-end:0}
.hero__btn .widget__container{padding:20px 0 0}

/* ============================================================
   INTRO (donkere band over de hero)
   ============================================================ */
.intro{
  margin-top:-305px;
  margin-bottom:0;
  padding:0 20px;
}
.intro__overlay{background-color:var(--primary);opacity:.9}
.intro__col{width:100%}
.intro__col .widget-wrap{padding:30px 10px}
.intro__heading .heading-title{color:var(--white)}
.intro__text{color:var(--white);margin-block-end:0}
.intro__text .widget__container{margin:0 0 -15px;padding:0 50% 0 0}
.intro__text p{margin-bottom:.9rem}
.linktext a{font-weight:600}

/* ============================================================
   KOZIJNEN VERKOPEN & PLAATSEN
   ============================================================ */
.sell{padding:120px 20px}
.sell__media{width:49.008%}
.sell__media > .widget-wrap{padding:0}
.sell__text{width:50.992%}
.sell__text > .widget-wrap{padding:10px 10px 10px 50px;align-content:center;align-items:center}

.inner-section{width:100%}
.inner-section > .container{max-width:none}

.sell__row1{padding:0 100px 0 0}
.sell__row2{padding:0 0 0 100px}
.sell__c1{width:69.055%}
.sell__c2{width:30.869%}
.sell__c3{width:40.093%}
.sell__c4{width:59.907%}
.sell__media .widget{margin-block-end:0}
.sell__media .widget-image{text-align:center}
.sell__img1 img{width:100%;height:150px;object-fit:cover;object-position:center center}
.sell__img2 img{height:150px;width:auto;object-fit:cover;object-position:center center}
.sell__img3 img,.sell__img4 img{width:100%;height:auto}

.sell__heading{text-align:left}
.sell__body{margin-block-end:0}

/* ============================================================
   SHOWROOM
   ============================================================ */
.showroom{
  background-image:url('../img/foto-01.jpg');
  background-position:right -260px top 80%;
  background-repeat:no-repeat;
  background-size:60% auto;
  margin-top:0;
  margin-bottom:120px;
  padding:120px 20px;
}
.showroom__overlay{opacity:.5}
.showroom__text{width:65%}
.showroom__text > .widget-wrap{
  background-color:var(--white);
  padding:50px 30px 50px 10px;
  margin:0;
}
.showroom__media{width:35%}
.showroom__media > .widget-wrap{padding:0}
.showroom__btn{margin-block-end:0}
.showroom__img img{height:370px;object-fit:cover;object-position:center 70%}

/* ============================================================
   ONS AANBOD
   ============================================================ */
.offer-title{padding:20px 20px 90px}
.offer-title__h{text-align:center;margin-block-end:0}
.offer-title__h .heading-title{font-family:var(--font);font-weight:500}

.offer--row1{
  background-color:var(--primary);
  padding:0 20px;
}
.offer--row2{
  background-color:var(--primary);
  margin-top:0;
  margin-bottom:120px;
  padding:0 20px 40px;
}
.offer__col > .widget-wrap{padding:0}
.offer__col > .widget-wrap > .widget{margin-block-end:0}

.card{width:100%;cursor:pointer}
.card > .widget-wrap{
  background-color:var(--white);
  box-shadow:0 0 5px 0 rgba(0,0,0,.25);
  transition:background .3s,border .3s,border-radius .3s,box-shadow .3s;
  margin:10px;
  padding:30px;
  width:auto;
  flex:1;
}
.card--lift > .widget-wrap{margin:-60px 10px 10px}
.card__img{overflow:hidden}
.card__img img{width:100%;height:225px;object-fit:cover;object-position:center center}
.card__title{text-align:left;padding:20px 0 0}
.card__divider .divider{padding-block-start:5px;padding-block-end:5px}
.card__divider .divider__sep{width:100%;border-block-start:1px solid var(--grey-line)}
.card__text{color:var(--text)}
.card__btn{padding:10px 0 0}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  background-color:transparent;
  background-image:linear-gradient(270deg,var(--white) 65%,var(--grey-light) 0%);
  margin-top:0;
  margin-bottom:150px;
  padding:60px 20px;
}
.cta__media > .widget-wrap{padding:10px}
.cta__img{margin-block-end:0}
.cta__img img{width:100%;height:500px;object-fit:cover;object-position:center center}
.cta__text > .widget-wrap{
  background-color:var(--white);
  padding:10px 10px 10px 50px;
  align-content:center;align-items:center;
}
.cta__heading .heading-title{font-family:var(--font);font-weight:500;line-height:1.2em}
.cta__sub .heading-title{font-family:var(--font);font-weight:500}
.cta__btn{margin-block-end:0}
.cta__btn .widget__container{padding:20px 0 0}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{position:relative}

.ftr-logo{
  background-color:var(--primary);
  background-image:url('../img/foto-02.jpg');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}
.ftr-logo__overlay{background-color:var(--primary);opacity:.97}
.ftr-logo > .container{max-width:350px}
.ftr-logo__col > .widget-wrap{
  background-color:var(--grey-light);
  box-shadow:0 -10px 10px -10px rgba(0,0,0,.2);
  margin:-26px 0 0;
  padding:25px;
  justify-content:center;
}
.ftr-logo__img{margin-block-end:0;text-align:center}
.ftr-logo__img img{width:235px}

.ftr-main{
  background-color:var(--grey-light);
  padding:60px 20px 40px;
}
.ftr-col--about{width:31.336%}
.ftr-col--data{width:29.731%}
.ftr-col--offer{width:16.894%}
.ftr-col--hours{width:22.007%}
.ftr-col--about > .widget-wrap{padding:10px 50px 10px 10px}
.ftr-col--data > .widget-wrap,
.ftr-col--offer > .widget-wrap{padding:10px 30px 10px 10px}
.ftr-col--hours > .widget-wrap{padding:10px}

.ftr__title .heading-title{font-family:var(--font);font-weight:500}
.ftr__title--brand .heading-title{font-weight:300;text-transform:uppercase}
.ftr__about{color:var(--text)}

.ftr__social{width:auto;max-width:none;margin-block-end:0}
.social{display:flex;gap:10px}
.social__icon{
  display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--accent);
  font-size:18px;
  line-height:1;
  padding:.3em;
  border-radius:0;
  text-align:center;
}
.social__icon svg{width:18px;height:18px;fill:var(--white)}

.ftr__brand{width:auto;max-width:none;text-align:start;margin-block-end:0}
.ftr__brand .widget__container{margin:-4px 0 0 20px}
.ftr__brand img{width:120px}

.ftr__list{margin-block-end:0}
.ftr__list--offer .icon-list__icon svg{width:8px;height:8px}

.ftr-bar{
  background-color:var(--grey-light);
  padding:10px 20px;
}
.ftr-bar__left > .widget-wrap{align-content:center;align-items:center;justify-content:flex-start}
.ftr-bar__right > .widget-wrap{align-content:center;align-items:center;justify-content:flex-end}
.ftr-bar__copy{width:auto;max-width:none;text-align:start;margin-block-end:0}
.ftr-bar__copy .heading-title{
  font-family:var(--font);font-size:14px;font-weight:400;
  line-height:1.6em;color:var(--text);margin:0;
}
.ftr-bar__links{width:auto;max-width:none;margin-block-end:0}
.ftr-bar__links .icon-list__text,
.ftr-bar__links .icon-list__item > a{
  font-family:var(--font);font-size:14px;font-weight:400;line-height:1.6em;
}

/* ============================================================
   ENTRANCE ANIMATIES (Elementor)
   ============================================================ */
.animate{opacity:0}
.animate.is-animated{opacity:1;animation-duration:1.25s;animation-fill-mode:both}
@media (prefers-reduced-motion:reduce){
  .animate{opacity:1}
  .animate.is-animated{animation:none!important}
  .slideshow__slide{transition:none}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}
@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}
.a-fadeIn{animation-name:fadeIn}
.a-fadeInUp{animation-name:fadeInUp}
.a-fadeInLeft{animation-name:fadeInLeft}
.a-fadeInRight{animation-name:fadeInRight}
.a-slideInLeft{animation-name:slideInLeft}
.a-slideInRight{animation-name:slideInRight}

/* ============================================================
   TABLET  (max-width:1024px)
   ============================================================ */
@media (max-width:1024px){
  .container{max-width:1024px}

  /* header */
  .hdr-mobile__logo > .widget-wrap,
  .hdr-mobile__menu > .widget-wrap{padding:10px}
  .hdr-mobile__logo .widget-image{text-align:start}
  .hdr-mobile__logo img{width:160px}
  .hamburger{padding:8px;width:45px;border-width:0;border-radius:0}
  .offcanvas__panel{max-width:365px;padding:10px 0}
  .offcanvas__logo{margin:-25px 0 0;padding:0 5px 5px 15px;display:block}
  .offcanvas__logo img{max-width:200px;max-height:200px;width:auto}
  .offcanvas__close{padding:8px;margin:12px;width:45px;border-radius:0}
  .offcanvas__list > li > a{font-size:15px;color:var(--primary);padding:10px 15px 10px 24px}
  .offcanvas__list > li > a:hover{color:var(--accent)}
  .offcanvas__list ul a{padding:15px}

  /* hero */
  .hero{margin-top:-140px;margin-bottom:0}
  .hero > .container{min-height:800px}
  .hero__col .widget-wrap{margin:0 0 115px}

  /* intro */
  .intro{margin-top:-280px;margin-bottom:0}
  .intro__text .widget__container{padding:0}

  /* verkopen & plaatsen */
  .sell{padding:60px 20px 40px}
  .sell__media > .widget-wrap{align-content:center;align-items:center}
  .sell__text > .widget-wrap{padding:10px 10px 10px 30px}
  .sell__c1 > .widget-wrap{padding:5px 5px 5px 10px;justify-content:center;align-content:center;align-items:center}
  .sell__c2 > .widget-wrap,
  .sell__c3 > .widget-wrap,
  .sell__c4 > .widget-wrap{padding:5px}

  /* showroom: wordt gestapeld, achtergrond vervangen door wit vlak */
  .showroom{
    background-image:url('../img/wit-vlak.jpg');
    margin-top:0;margin-bottom:50px;padding:20px;
  }
  .showroom > .container{flex-wrap:wrap}
  .showroom__text{width:100%}
  .showroom__text > .widget-wrap{padding:20px 10px 60px}
  .showroom__media{width:100%}
  .showroom__media > .widget-wrap{margin:0 10px;padding:0}
  .showroom__img img{height:335px}

  /* aanbod */
  .card > .widget-wrap{padding:20px 20px 40px}
  .card__img img{height:150px}

  /* cta */
  .cta{padding:40px 20px}
  .cta__img img{height:300px}
  .cta__text > .widget-wrap{padding:10px 10px 10px 30px}

  /* footer */
  .ftr-logo > .container{max-width:250px}
  .ftr__brand img{width:100px}
  .ftr-col--about,.ftr-col--data,.ftr-col--offer,.ftr-col--hours{width:50%}
  .ftr-col--about > .widget-wrap{padding:10px 30px 10px 10px}
  .ftr-col--data > .widget-wrap{padding:10px}
  .ftr-col--offer > .widget-wrap{padding:30px 30px 10px 10px}
  .ftr-col--hours > .widget-wrap{padding:30px 10px 10px}
  .ftr-bar__left > .widget-wrap,
  .ftr-bar__right > .widget-wrap{justify-content:center}
  .ftr-bar__left,.ftr-bar__right{width:100%}
  .reverse-tablet > .container{flex-direction:column-reverse;flex-wrap:wrap}
}

/* ============================================================
   MOBILE  (max-width:767px)
   ============================================================ */
@media (max-width:767px){
  .container{max-width:767px}
  .col{width:100%}

  /* de kit verkleint de koppen alleen op mobiel */
  h1{font-size:32px}
  h2{font-size:26px}
  h3{font-size:22px}

  .reverse-mobile > .container{flex-direction:column-reverse}

  /* header */
  .hdr-mobile__logo{width:70%}
  .hdr-mobile__menu{width:30%}
  .hdr-mobile__logo img{width:135px}
  .offcanvas__logo{padding:0 0 0 13px}
  .offcanvas__logo img{max-width:175px;max-height:200px}
  .offcanvas__list > li > a{font-size:15px;padding:10px 10px 10px 20px}
  .offcanvas__list ul{padding:0 0 0 10px}
  .offcanvas__list ul a{font-size:16px}

  /* hero */
  .hero{margin-top:-120px;margin-bottom:0}
  .hero > .container{min-height:450px}
  .hero__col .widget-wrap{margin:80px 0 0;padding:10px}
  .hero__title .heading-title{font-size:32px}

  /* intro */
  .intro{margin-top:0;margin-bottom:0}
  .intro__col .widget-wrap{padding:40px 10px 30px}
  .intro__text{text-align:center}

  /* verkopen & plaatsen */
  .sell{padding:40px 20px 20px}
  .sell__media,.sell__text{width:100%}
  .sell__row1{padding:15px 50px 0 0}
  .sell__row2{padding:0 0 0 50px}
  .sell__c1,.sell__c2,.sell__c3,.sell__c4{width:50%}
  .sell__c4 > .widget-wrap{padding:5px 10px 5px 5px}
  .sell__text > .widget-wrap{padding:10px}
  .sell__heading{text-align:center}
  .sell__body{text-align:center}

  /* showroom */
  .showroom{margin-top:20px;margin-bottom:0;padding:0}
  .showroom__text > .widget-wrap{padding:30px 30px 60px}
  .showroom__heading{text-align:center}
  .showroom__body{text-align:center}
  .showroom__divider .widget__container{border-width:0}
  .showroom__divider .divider{justify-content:center;padding-block-start:10px;padding-block-end:10px}
  .showroom__divider .divider__sep{margin:0 auto}
  .showroom__media > .widget-wrap{margin:0 5px 40px}
  .showroom__img img{height:300px}
  .mobile-align-center .button-wrapper{text-align:center}

  /* aanbod */
  .offer-title{padding:10px 20px 50px}
  .offer--row1{padding:20px 5px 0}
  .offer--row2{margin-bottom:60px;padding:0 5px 10px}
  .card > .widget-wrap{padding:15px 15px 30px}
  .card--lift > .widget-wrap{margin:-60px 10px 10px}
  /* op mobiel schuift alleen de eerste kaart omhoog */
  .offer--row1 .offer__col:last-child .card--lift > .widget-wrap{margin:10px}
  .card__title{text-align:center;padding:10px 0 0}
  .card__text{text-align:center}
  .mobile-align-justify .btn{width:100%;display:block}

  /* cta */
  .cta{margin-top:0;margin-bottom:40px;padding:0}
  .cta__media > .widget-wrap{margin:0 5px;padding:0}
  .cta__img img{height:300px}
  .cta__text > .widget-wrap{padding:50px 30px}
  .cta__heading,.cta__sub{text-align:center}

  /* footer */
  .ftr-main{padding:40px 20px 20px}
  .ftr-logo > .container{max-width:200px}
  .ftr-logo__img img{width:160px}
  .ftr-col--about,.ftr-col--data,.ftr-col--offer,.ftr-col--hours{width:100%}
  .ftr-col--about > .widget-wrap{padding:10px;justify-content:center}
  .ftr-col--data > .widget-wrap,
  .ftr-col--offer > .widget-wrap,
  .ftr-col--hours > .widget-wrap{padding:40px 10px 10px}
  .ftr-main .ftr__title,
  .ftr-main .ftr__about{text-align:center}
  .ftr__social{width:100%}
  .social{justify-content:center}
  .ftr__brand{width:100%;text-align:center}
  .ftr__brand .widget__container{margin:20px 0 0}
  .ftr__brand img{width:125px}
  .mobile-align-center .icon-list__item{justify-content:center}
  .mobile-align-center .icon-list__item > a{justify-content:center;width:auto}

  .reverse-mobile > .container{flex-direction:column-reverse}
  .ftr-bar__left > .widget-wrap{justify-content:center}
  .ftr-bar__right > .widget-wrap{justify-content:center}
  .ftr-bar__copy{text-align:center}
  .icon-list--inline{justify-content:center}
}

/* ============================================================
   SUBPAGINA'S — gedeelde onderdelen
   ============================================================ */

/* ---------- pagina-hero (aluminium / faq / referenties / contact) ---------- */
.page-hero{
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  margin-top:-230px;
  margin-bottom:0;
  padding:0 20px;
}
@media (min-width:1025px){ .page-hero{background-attachment:fixed} }
.page-hero > .container{min-height:600px;align-items:center}
.page-hero__overlay{background-color:#000;opacity:.5}
.page-hero__col{width:100%}
.page-hero__col > .widget-wrap{margin:150px 0 0}
.page-hero__title{text-align:center;margin-block-end:0}
.page-hero__title .heading-title{color:var(--white)}

@media (max-width:1024px){
  .page-hero{margin-top:-140px;margin-bottom:0}
  .page-hero > .container{min-height:450px}
  .page-hero__col > .widget-wrap{margin:70px 0 0}
}
@media (max-width:767px){
  .page-hero{margin-top:-125px;margin-bottom:0}
  .page-hero > .container{min-height:335px}
  .page-hero__col > .widget-wrap{margin:70px 0 0}
}

/* ---------- formulier ---------- */
.form{width:100%}
.form__fields{display:flex;flex-wrap:wrap;margin-left:-5px;margin-right:-5px;margin-bottom:-15px}
.field{
  display:flex;flex-wrap:wrap;align-items:center;
  padding-right:5px;padding-left:5px;margin-bottom:15px;
  width:100%;
}
.field--50{width:50%}
.field__label{
  cursor:pointer;
  font-family:var(--font);
  font-size:17px;
  font-weight:500;
  line-height:1.6em;
  color:var(--primary);
  margin:0;
  padding:0 0 6px;
}
.field--required .field__label::after{color:red;content:"*";padding-inline-start:.2em}
.field__input{
  flex-basis:100%;max-width:100%;width:100%;
  background-color:#fff;
  border:1px solid #69727d;
  border-radius:0;
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  line-height:1.6em;
  min-height:40px;
  padding:8px 16px;
}
.field__input:focus{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);outline:0}
.field__input::placeholder{color:inherit;font-family:inherit;opacity:.6}
/* thema-regel voor input[type=...] wint; textarea en select houden Elementors padding */
textarea.field__input,
select.field__input{padding:5px 14px}
textarea.field__input{min-height:auto}
.field__select{position:relative;display:flex;width:100%}
.field__select select{
  appearance:none;-webkit-appearance:none;
  padding-inline-end:30px;
  flex-basis:100%;
}
.field__select::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-end:12px;
  width:0;height:0;pointer-events:none;transform:translateY(-25%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--text);
}
.field--acceptance{align-items:flex-start}
.field__subgroup{display:flex;flex-wrap:wrap;width:100%}
.field__option{flex-basis:100%}
.field__option input,.field__option label{display:inline}
.field__option label{color:var(--primary);cursor:pointer}
.field--submit{align-items:flex-end}
.field--submit .btn{
  width:100%;flex-basis:100%;
  border:none;
  padding-block:0;
  min-height:40px;
  display:flex;align-items:center;justify-content:center;
}
.form__note{
  flex-basis:100%;width:100%;
  font-size:13px;line-height:1.5;color:var(--text);
  margin:4px 5px 0;
}

/* ---------- toggle / accordeon (FAQ) ---------- */
.toggle{text-align:start;width:100%}
.toggle__title{
  display:block;
  width:100%;
  background:none;border:0;
  border-block-end:1px solid #d5d8dc;
  outline:0;
  cursor:pointer;
  font-family:var(--font);
  font-size:16px;
  font-weight:700;
  line-height:1;
  color:var(--primary);
  margin:0;
  padding:15px;
  text-align:left;
}
.toggle__title.is-active{border-block-end:none}
.toggle__icon{
  float:left;
  display:block;
  width:1em;
  margin-inline-end:5px;
  color:var(--accent);
}
.toggle__icon svg{width:1em;height:1em;fill:currentColor;display:block}
.toggle__title .toggle__icon--open{display:none}
.toggle__title.is-active .toggle__icon--closed{display:none}
.toggle__title.is-active .toggle__icon--open{display:block}
.toggle__label{
  cursor:pointer;
  text-decoration:none;
  font-family:var(--font);
  font-size:18px;
  font-weight:500;
  line-height:18px;
  color:inherit;
}
.toggle__title.is-active .toggle__label{color:var(--accent)}
.toggle__content{
  display:none;
  border-block-end:1px solid #d5d8dc;
  padding:15px;
  color:var(--text);
}
.toggle__content.is-open{display:block}
.toggle__content p{margin:0 0 .9rem}
.toggle__content p:last-child{margin-bottom:0}

/* ---------- referentiekaart (call to action) ---------- */
.cta-card{
  display:block;
  position:relative;
  overflow:hidden;
  transition:.5s;
  text-decoration:none;
}
.cta-card__bg-wrapper{position:absolute;inset:0;width:100%;overflow:hidden;z-index:1;transition:all .4s}
.cta-card__bg{
  position:absolute;inset:0;z-index:1;
  background-position:50%;background-size:cover;
  transition:all 1.5s;
  will-change:transform;
}
.cta-card:hover .cta-card__bg{transform:scale(1.2)}
.cta-card__overlay{position:absolute;inset:0;z-index:2;background-color:#00000085;transition:all 1.5s}
.cta-card:hover .cta-card__overlay{background-color:rgba(0,0,0,.3)}
.cta-card__content{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;
  align-content:flex-end;align-items:flex-end;
  min-height:280px;
  width:100%;
  padding:35px;
  overflow:hidden;
  text-align:center;
  color:#fff;
  transition:.5s;
}
.cta-card__title{
  width:100%;margin:0;
  font-family:var(--font);
  font-size:20px;
  font-weight:500;
  line-height:1.2;
  text-transform:uppercase;
  color:#fff;
  transition:1s;
}

/* ---------- galerij-modal + lightbox ---------- */
.modal{position:fixed;inset:0;z-index:1000;display:none}
.modal.is-open{display:block}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.8)}
.modal__dialog{
  position:relative;
  max-width:1140px;
  margin:0 auto;
  height:100%;
  overflow-y:auto;
  padding:60px 20px;
}
.modal__panel{background:#fff;padding:20px}
.modal__close{
  position:fixed;top:14px;right:20px;z-index:2;
  background:transparent;border:0;
  color:#fff;font-size:34px;line-height:1;
  padding:6px 12px;
}
.modal__close:hover{color:var(--accent)}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.gallery__item{display:block;position:relative;overflow:hidden;text-decoration:none}
.gallery__image{
  width:100%;
  padding-bottom:66.6667%;      /* aspect ratio 3:2 */
  background-position:center center;
  background-size:cover;
  transform-origin:center top;
  transition:filter .3s,transform .3s;
}
.gallery__overlay{
  position:absolute;inset:0;
  transition:background-color .3s;
}
.gallery__item:hover .gallery__overlay{background-color:rgba(0,0,0,.5)}

.lightbox{position:fixed;inset:0;z-index:1100;display:none}
.lightbox.is-open{display:flex;align-items:center;justify-content:center}
.lightbox__overlay{position:absolute;inset:0;background:rgba(0,0,0,.9)}
.lightbox__img{position:relative;max-width:92vw;max-height:88vh;object-fit:contain}
.lightbox__close,.lightbox__prev,.lightbox__next{
  position:absolute;z-index:2;
  background:transparent;border:0;color:#fff;
  font-size:40px;line-height:1;padding:10px 16px;
}
.lightbox__close{top:10px;right:16px}
.lightbox__prev{left:8px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:8px;top:50%;transform:translateY(-50%)}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{color:var(--accent)}

/* ============================================================
   PAGINA: ALUMINIUM
   ============================================================ */
.alu-hero{background-image:url('../img/Aluminium-Raam-Kozijnen-3.jpg')}

/* waarom kozijnen uit aluminium */
.alu-why{padding:0 20px 120px}
.alu-why__media{width:40%}
.alu-why__media > .widget-wrap{margin:-60px 0 0;padding:0 0 10px}
.alu-why__media .widget{margin-block-end:0}
.alu-why__img img{
  width:100%;height:600px;object-fit:cover;object-position:center center;
  border:10px solid var(--white);
}
.alu-why__text{width:60%}
.alu-why__text > .widget-wrap{padding:60px 10px 10px 50px;align-content:center;align-items:center}
.alu-why__list{margin-block-end:0}
.alu-why__list .icon-list:not(.icon-list--inline) .icon-list__item:not(:last-child){padding-block-end:6px}
.alu-why__list .icon-list:not(.icon-list--inline) .icon-list__item:not(:first-child){margin-block-start:6px}
.alu-why__list .icon-list__icon{width:14px}
.alu-why__list .icon-list__icon svg{width:8px;height:8px;fill:var(--accent)}
.alu-why__list .icon-list__text{text-transform:lowercase;line-height:1.6em}

/* hoeveel kost een kozijn uit aluminium */
.alu-price{
  background-color:var(--white);
  background-image:url('../img/Aluminium-Kozijnen-4.jpg');
  background-position:center right;
  background-repeat:no-repeat;
  background-size:60% auto;
  margin-bottom:120px;
  padding:120px 20px;
}
.alu-price__overlay{opacity:.5}
.alu-price__text{width:60%}
.alu-price__text > .widget-wrap{
  background-color:var(--white);
  margin:0 0 0 10px;
  padding:50px 30px 50px 10px;
}
.alu-price__btn{margin-block-end:0}
.alu-price__btn .widget__container{margin:10px 0 0}
.alu-price__media{width:39.963%}
.alu-price__media > .widget-wrap{padding:0}
.alu-price__img{margin-block-end:0}
.alu-price__img img{height:370px;object-fit:cover;object-position:center center}

/* waarom ZK Kozijnen bv */
.alu-usp{padding:0 20px 120px}
.alu-usp__media{width:40%}
.alu-usp__media > .widget-wrap{margin:0;padding:0 0 10px}
.alu-usp__media .widget{margin-block-end:0}
.alu-usp__img img{
  width:100%;height:550px;object-fit:cover;object-position:center center;
  border:10px solid var(--white);
}
.alu-usp__text{width:60%}
.alu-usp__text > .widget-wrap{padding:60px 10px 10px 50px;align-content:center;align-items:center}
.alu-usp__body{margin-block-end:0}

/* stel hier je vraag */
.alu-form{
  background-color:var(--primary);
  background-image:url('../img/foto-14.jpg');
  background-position:center right;
  background-repeat:no-repeat;
  background-size:cover;
  padding:80px 20px;
}
.alu-form__overlay{background-color:#000;opacity:.56}
.alu-form > .container{max-width:800px}
.alu-form__col{width:100%}
.alu-form__col > .widget-wrap{background-color:#fff;margin:0;padding:50px}
.alu-form__heading .heading-title{color:var(--primary)}
.alu-form__widget{margin-block-end:0}

/* afsluitende cta */
.alu-cta{
  background-color:transparent;
  background-image:linear-gradient(-270deg,var(--white) 65%,var(--grey-light) 0%);
  margin-top:0;margin-bottom:0;
  padding:80px 20px;
}
.alu-cta__text{width:50%}
.alu-cta__text > .widget-wrap{
  background-color:var(--white);
  padding:10px 50px 10px 10px;
  align-content:center;align-items:center;
}
.alu-cta__heading .heading-title,
.alu-cta__sub .heading-title{font-family:var(--font);font-weight:500}
.alu-cta__btn{margin-block-end:0}
.alu-cta__btn .widget__container{padding:20px 0 0}
.alu-cta__media{width:50%}
.alu-cta__img{margin-block-end:0}
.alu-cta__img img{width:100%;height:500px;object-fit:cover;object-position:center center}

@media (max-width:1024px){
  .alu-why{padding:60px 20px 40px}
  .alu-why__media > .widget-wrap{margin:0;align-content:center;align-items:center}
  .alu-why__img img{height:457px}
  .alu-why__text > .widget-wrap{padding:10px 10px 10px 30px}

  .alu-price{
    background-image:url('../img/wit-vlak.jpg');
    margin-bottom:50px;padding:20px;
  }
  .alu-price__text,.alu-price__media{width:100%}
  .alu-price__text > .widget-wrap{margin:0;padding:10px 10px 40px}
  .alu-price__media > .widget-wrap{margin:0 10px;padding:0}
  .alu-price__img img{width:100%;height:335px}

  .alu-usp{padding:60px 20px 40px}
  .alu-usp__img img{height:750px}
  .alu-usp__text > .widget-wrap{padding:10px 10px 10px 30px}

  .alu-form{padding:60px 30px}
  .alu-cta{padding:60px 20px}
  .alu-cta__text > .widget-wrap{padding:10px 30px 10px 10px}
  .alu-cta__img img{height:300px}
}

@media (max-width:767px){
  .alu-why{padding:40px 0 20px}
  .alu-why__media,.alu-why__text{width:100%}
  .alu-why__media > .widget-wrap{padding:0}
  .alu-why__img img{height:400px;border-width:0}
  .alu-why__text > .widget-wrap{padding:10px 30px 60px}
  .alu-why__heading,.alu-why__intro{text-align:start}

  .alu-price{margin-top:0;margin-bottom:0;padding:0}
  .alu-price__text > .widget-wrap{padding:40px 30px}
  .alu-price__heading,.alu-price__body{text-align:start}
  .alu-price__media > .widget-wrap{margin:0;padding:0}
  .alu-price__img img{height:200px}

  .alu-usp{padding:40px 0 20px}
  .alu-usp__media,.alu-usp__text{width:100%}
  .alu-usp__media > .widget-wrap{margin:10px 30px 20px;padding:0}
  .alu-usp__img img{height:200px;border-width:0}
  .alu-usp__text > .widget-wrap{padding:10px 30px}
  .alu-usp__heading,.alu-usp__body{text-align:start}

  .alu-form{padding:0}
  .alu-form__col > .widget-wrap{padding:10px 30px 30px}

  .alu-cta{margin-top:0;margin-bottom:40px;padding:0}
  .alu-cta__text,.alu-cta__media{width:100%}
  .alu-cta__text > .widget-wrap{padding:35px 30px 50px}
  .alu-cta__heading,.alu-cta__sub{text-align:center}
  .alu-cta__media > .widget-wrap{margin:30px;padding:0;justify-content:center}
  .alu-cta__img .widget__container{margin:0;padding:0;border-radius:9px;overflow:hidden}
  .alu-cta__img img{width:100%;height:200px}
}

/* ============================================================
   PAGINA: VEELGESTELDE VRAGEN
   ============================================================ */
.faq-hero{background-image:url('../img/foto-14.jpg')}
.faq-hero__col > .widget-wrap{margin:150px 0 0}

.faq{padding:0 20px 120px}
.faq__media{width:40%}
.faq__media > .widget-wrap{margin:-60px 0 0;padding:0 0 10px}
.faq__media .widget{margin-block-end:0}
.faq__img img{
  width:100%;height:850px;object-fit:cover;object-position:center center;
  border:10px solid var(--white);
}
.faq__text{width:60%}
.faq__text > .widget-wrap{padding:60px 10px 10px 50px;align-content:center;align-items:center}
.faq__btn{margin-block-end:0}

@media (max-width:1024px){
  .faq-hero__col > .widget-wrap{margin:100px 0 0}
  .faq{padding:60px 20px 120px}
  .faq > .container{flex-direction:column-reverse}
  .faq__media,.faq__text{width:100%}
  .faq__media > .widget-wrap{margin:0;align-content:center;align-items:center}
  .faq__img img{height:750px}
  .faq__text > .widget-wrap{padding:10px 10px 40px}
}

@media (max-width:767px){
  .faq-hero__col > .widget-wrap{margin:70px 0 0}
  .faq{padding:40px 5px 80px}
  .faq__media > .widget-wrap{padding:0}
  .faq__img img{height:350px;border-width:0}
  .faq__text > .widget-wrap{padding:10px 25px 60px}
  .faq__heading,.faq__intro{text-align:start}
}

/* ============================================================
   PAGINA: REFERENTIES
   ============================================================ */
.ref-hero{background-image:url('../img/foto-02.jpg')}

.ref{padding:120px 20px 160px}
.ref__col{width:100%}
.ref__col > .widget-wrap{padding:0 0 0 10px}
.ref__heading{text-align:center}
.ref__intro{text-align:center}
.ref__intro .widget__container{padding:0 25%}
.ref__row{width:100%}
.ref__row > .container{max-width:none}
.ref__cell{width:33.333%}
.ref__cell .widget{margin-block-end:0}

@media (max-width:1024px){
  .ref{padding:60px 20px 40px}
  .ref__col > .widget-wrap{align-content:center;align-items:center}
  .ref__intro .widget__container{padding:0 10%}
  .cta-card__content{padding:20px}
}

@media (max-width:767px){
  .ref{padding:40px 10px 80px;z-index:1}
  .ref__col > .widget-wrap{padding:0}
  .ref__intro .widget__container{padding:0 10px}
  .ref__cell{width:100%}
  .gallery{grid-template-columns:1fr;gap:10px}
  .modal__dialog{padding:56px 10px}
  .modal__panel{padding:10px}
}
@media (max-width:1024px) and (min-width:768px){
  .gallery{gap:10px}
}

/* ============================================================
   PAGINA: CONTACT
   ============================================================ */
.contact-hero{background-image:url('../img/foto-12.jpg')}

.contact-top{padding:0 20px 60px}
.contact-top__form{width:58.014%}
.contact-top__form > .widget-wrap{
  background-color:var(--grey-light);
  margin:-60px 0 0 10px;
  padding:30px;
}
.contact-top__form .widget:last-child{margin-block-end:0}
.contact-top__intro{width:41.986%}
.contact-top__intro > .widget-wrap{padding:60px 10px 10px 50px;align-content:center;align-items:center}
.contact-top__body{margin-block-end:0}

.contact-details{
  background-color:transparent;
  background-image:linear-gradient(90deg,var(--white) 65%,var(--grey-light) 0%);
  margin-top:0;margin-bottom:150px;
  padding:60px 20px;
}
.contact-details__info{width:35.038%}
.contact-details__info > .widget-wrap{background-color:var(--white);padding:60px 50px 10px 10px}
.contact-details__title .heading-title{font-family:var(--font);font-weight:500}
.contact-details__title--spaced .widget__container{padding:30px 0 0}
.contact-details .divider--accent .divider__sep{width:65px}
.contact-details__social{margin-block-end:0}
.contact-details__map{width:64.962%}
.contact-details__map > .widget-wrap{padding:0 0 0 10px}
.contact-details__map .widget{margin-block-end:0}
.map-embed{width:100%;line-height:0}
.map-embed iframe{width:100%;height:600px;border:0}

@media (max-width:1024px){
  .contact-top{margin-top:-60px;padding:0 20px 0}
  .contact-top__form,.contact-top__intro{width:100%}
  .contact-top__form > .widget-wrap{margin:0 10px;align-content:center;align-items:center}
  .contact-top__intro > .widget-wrap{padding:60px 10px}

  .contact-details{padding:40px 20px}
  .contact-details__info,.contact-details__map{width:50%}
  .contact-details__info > .widget-wrap{padding:10px 30px 10px 10px}
  .contact-details__map > .widget-wrap{padding:0 10px}
  .map-embed iframe{height:450px}
}

@media (max-width:767px){
  .contact-top{padding:0 15px 20px}
  .contact-top__form > .widget-wrap{margin:0;padding:30px 15px}
  .contact-top__intro > .widget-wrap{padding:40px 15px 20px}
  .contact-top__heading,.contact-top__subheading,.contact-top__body{text-align:center}
  .contact-top .divider--accent .widget__container{border-width:0}
  .contact-top .divider--accent .divider{justify-content:center;padding-block-start:10px;padding-block-end:10px}
  .contact-top .divider--accent .divider__sep{margin:0 auto}

  .contact-details{margin-top:0;margin-bottom:100px;padding:0}
  .contact-details__info,.contact-details__map{width:100%}
  .contact-details__info > .widget-wrap{padding:30px 30px 60px}
  .contact-details__title{text-align:center}
  .contact-details__title--spaced .widget__container{padding:40px 0 0}
  .contact-details .divider--accent .widget__container{border-width:0}
  .contact-details .divider--accent .divider{justify-content:center;padding-block-start:10px;padding-block-end:10px}
  .contact-details .divider--accent .divider__sep{margin:0 auto}
  .contact-details__social .widget__container{text-align:center}
  .contact-details__social .social{justify-content:center}
  .contact-details__map > .widget-wrap{margin:0;padding:0}
  .map-embed iframe{height:350px}

  .field--50{width:100%}
}

/* per-dienst achtergronden (hero + prijsblok, prijsblok alleen desktop) */
.hero--storingen{background-image:url('../img/foto-04.jpg')}
@media (min-width:1025px){ .alu-price--storingen{background-image:url('../img/foto-13.jpg')} }
.hero--uitbreiden{background-image:url('../img/foto-03.jpg')}
@media (min-width:1025px){ .alu-price--uitbreiden{background-image:url('../img/foto-05.jpg')} }
.hero--renovatie{background-image:url('../img/foto-14.jpg')}
@media (min-width:1025px){ .alu-price--renovatie{background-image:url('../img/foto-16.jpg')} }
.hero--ontwerp{background-image:url('../img/foto-08.jpg')}
@media (min-width:1025px){ .alu-price--ontwerp{background-image:url('../img/foto-06.jpg')} }