:root{
  --bg:#05090d;--bg2:#09111a;--surface:#0f1a24;--surface2:#122638;
  --blue:#079cff;--blue2:#0d6efd;--text:#f7fbff;--muted:#b7c3ce;--line:rgba(255,255,255,.11);
  --max:1200px;--radius:14px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.screen-reader-text{position:absolute;left:-9999px}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid rgba(0,0,0,.10);box-shadow:0 2px 14px rgba(0,0,0,.06)}
.header-inner{min-height:104px;display:grid;grid-template-columns:320px 1fr auto;gap:28px;align-items:center}
.brand{display:block}.brand img,.brand .custom-logo{display:block;max-height:94px;width:auto;transform:none;transform-origin:left center}
.primary-nav .menu,.footer-nav .menu{list-style:none;display:flex;gap:24px;margin:0;padding:0}.primary-nav a{font-size:14px;font-weight:700;text-transform:uppercase;color:#111820}
.primary-nav a:hover{color:var(--blue)}.header-actions{display:flex;align-items:center;gap:18px}.header-phone{font-size:18px;color:var(--blue);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border:1px solid transparent;font-weight:800;text-transform:uppercase;letter-spacing:.02em;transition:.2s ease}
.btn-primary{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 8px 26px rgba(7,156,255,.18)}
.btn-primary:hover{transform:translateY(-2px)}.btn-outline{border-color:rgba(255,255,255,.55);color:#fff}.btn-small{padding:12px 16px;font-size:13px}
.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span:not(.screen-reader-text){display:block;width:26px;height:2px;background:#111820;margin:5px 0}
.hero{min-height:560px;position:relative;display:flex;align-items:center;overflow:hidden;background:#03070b}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.58))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,560px) 1fr}.hero-copy{padding:72px 0}
.eyebrow{color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.hero h1{font-size:clamp(40px,4.7vw,62px);line-height:.98;text-transform:uppercase;max-width:780px;margin:10px 0 26px;letter-spacing:-.03em}
.hero-text{max-width:560px;color:#e1e8ee;font-size:18px}.button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.services{background:#f3f5f7;color:#111;padding:0}.service-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.service-card{padding:38px 28px;border-right:1px solid rgba(0,0,0,.13)}.service-card:last-child{border-right:0}
.service-icon{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--blue));display:grid;place-items:center;color:#fff;font-size:27px;margin-bottom:18px}
.service-card h2{font-size:20px;text-transform:uppercase;margin:0 0 12px}.service-card p{color:#3d4750;margin:0 0 14px}.service-card a{color:var(--blue2);font-weight:800;text-transform:uppercase;font-size:13px}
.about{display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(135deg,#06111b,#0b2235)}.about-copy{display:flex;align-items:center}.about-inner{max-width:600px;padding:72px 56px;margin-left:auto}
.about h2,.contact-strip h2{font-size:34px;text-transform:uppercase;margin:0 0 20px}.about p{color:#d5dee7}.about-image{min-height:460px;overflow:hidden}.about-image img{width:100%;height:100%;object-fit:cover;display:block}
.contact-strip{background:linear-gradient(90deg,#073a72,#084c92 52%,#063867);padding:50px 0}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:0}
.contact-grid>div{padding:0 36px;border-right:1px solid rgba(255,255,255,.22)}.contact-grid>div:first-child{padding-left:0}.contact-grid>div:last-child{border-right:0}
.contact-strip h2{font-size:22px}.hours{margin:0}.hours div{display:flex;justify-content:space-between;gap:18px;padding:6px 0}.hours dt{color:#e6eef6}.hours dd{margin:0;text-align:right}.contact-big{font-size:18px}
.experience{background:linear-gradient(135deg,#06101a,#0c1722);padding:34px 0;border-bottom:1px solid var(--line)}
.experience-grid{display:grid;grid-template-columns:1.2fr .9fr 1fr;align-items:center;gap:36px}.experience blockquote{font-size:20px;font-style:italic;margin:0;color:#e7edf2}
.experience-brand{text-align:center}.experience-brand img{max-width:240px;transform:none}
.experience-copy strong{display:block;color:var(--blue);font-size:25px;text-transform:uppercase}.experience-copy span{text-transform:uppercase;letter-spacing:.08em}
.site-footer{background:#020406;padding:24px 0;color:#a8b4bf;font-size:14px}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer-inner a:hover{color:var(--blue)}.social-link{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff!important;font-weight:900}
.content-area{padding:70px 0}.prose{max-width:900px}.prose h1{font-size:48px}
@media(max-width:980px){
  .header-inner{grid-template-columns:220px auto auto}.primary-nav{position:absolute;left:0;right:0;top:104px;background:#fff;display:none;border-top:1px solid rgba(0,0,0,.10);padding:22px 24px;box-shadow:0 12px 20px rgba(0,0,0,.08)}.primary-nav.open{display:block}.primary-nav .menu{flex-direction:column}.menu-toggle{display:block;justify-self:end}.header-actions .header-phone{display:none}
  .hero{min-height:520px;background-position:68% center}.hero-grid{grid-template-columns:1fr}.hero-copy{max-width:650px}
  .service-grid{grid-template-columns:repeat(2,1fr)}.service-card:nth-child(2){border-right:0}.service-card:nth-child(-n+2){border-bottom:1px solid rgba(0,0,0,.13)}
  .about{grid-template-columns:1fr}.about-inner{margin:0;max-width:none}.about-image{min-height:360px}
  .contact-grid{grid-template-columns:1fr 1fr}.contact-grid>div{padding:20px}.contact-grid>div:first-child{padding-left:20px}.contact-grid>div:last-child{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);border-right:0}
  .experience-grid{grid-template-columns:1fr 1fr}.experience-copy{grid-column:1/-1;text-align:center}
}
@media(max-width:680px){
  .container{width:min(100% - 32px,var(--max))}.site-header{position:relative}.header-inner{min-height:78px;grid-template-columns:150px auto auto;gap:10px}.brand img,.brand .custom-logo{max-height:56px}
  .header-actions .btn{display:none}.primary-nav{top:78px}.hero{min-height:auto;background-position:72% center}.hero:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22)}
  .hero-copy{padding:76px 0 64px}.hero h1{font-size:42px}.hero-text{font-size:16px;max-width:92%}.button-row{flex-direction:column;align-items:stretch}.btn{width:100%}
  .service-grid{grid-template-columns:1fr}.service-card{border-right:0!important;border-bottom:1px solid rgba(0,0,0,.13)!important}
  .about-inner{padding:48px 24px}.about h2{font-size:30px}.about-image{min-height:280px}
  .contact-grid{grid-template-columns:1fr}.contact-grid>div,.contact-grid>div:first-child{padding:26px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}.contact-grid>div:last-child{grid-column:auto;border-bottom:0}
  .hours div{display:block}.hours dd{text-align:left}.experience-grid{grid-template-columns:1fr;text-align:center}.experience-copy{grid-column:auto}.site-footer{text-align:center}.footer-inner{justify-content:center}
}

.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:-3%;opacity:0;background-position:var(--hero-position);background-size:cover;background-repeat:no-repeat;transition:opacity 1.15s ease;transform:scale(1.03)}
.hero-slide.is-active{opacity:1;z-index:1}
.hero-motion .hero-slide.is-active{animation:gdzHeroMove 10s ease-in-out forwards}
@keyframes gdzHeroMove{0%{transform:scale(1.03) translate3d(0,0,0)}100%{transform:scale(1.10) translate3d(-1.2%,.5%,0)}}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none!important;animation:none!important;transform:none!important}}

/* v1.4 approved concept refinements */
.about{background:linear-gradient(135deg,#06111b,#071b2b)}
.about-inner{padding-top:64px;padding-bottom:64px}
.contact-strip{background:linear-gradient(90deg,#0b3f7d,#0c4f99 52%,#083b72)}
.experience{background:linear-gradient(135deg,#06111a,#071a2b);padding:38px 0}
.experience-brand img{max-width:270px;filter:none}
.experience-copy strong{font-size:26px}
.site-footer{background:#02070c}

/* =========================================================
   Garage de Zwart v1.5 — donkere ontwerprichting
   ========================================================= */

:root{
  --bg:#050708;
  --bg2:#0a0d0f;
  --surface:#121416;
  --surface2:#181b1e;
  --blue:#049fe8;
  --blue2:#007fc3;
  --text:#fff;
  --muted:#c3c8cc;
  --line:rgba(255,255,255,.12);
  --max:1440px;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#030506;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.header-inner{
  min-height:108px;
  grid-template-columns:260px 1fr auto;
  gap:34px;
}
.brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.brand img,
.brand .custom-logo{
  display:block;
  width:auto;
  max-width:235px;
  max-height:82px;
  transform:none;
}
.primary-nav .menu{
  justify-content:center;
  gap:30px;
}
.primary-nav a{
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
}
.primary-nav a:hover,
.primary-nav .current-menu-item>a{
  color:var(--blue);
}
.header-phone{
  color:var(--blue);
  white-space:nowrap;
}
.btn-primary{
  background:var(--blue);
  box-shadow:none;
}
.btn-primary:hover{
  background:#0ab1ff;
}
.menu-toggle span:not(.screen-reader-text){
  background:#fff;
}

/* Hero */
.hero{
  min-height:650px;
  background:#050708;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.90) 27%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.10) 76%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.30));
  pointer-events:none;
}
.hero-overlay{
  display:none;
}
.hero-grid{
  z-index:3;
}
.hero-copy{
  padding:88px 0 80px;
  max-width:600px;
}
.hero .eyebrow{
  margin-bottom:16px;
}
.hero h1{
  max-width:570px;
  margin:0 0 28px;
  font-size:clamp(50px,5.15vw,78px);
  line-height:.98;
  letter-spacing:-.035em;
}
.hero-text{
  max-width:535px;
  color:#f0f3f5;
  font-size:17px;
}
.hero-slide{
  background-position:var(--hero-position);
}
.button-row{
  margin-top:34px;
}

/* Diensten */
.services{
  padding:0;
  background:linear-gradient(180deg,#17191b,#111315);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
}
.service-grid{
  max-width:1440px;
}
.service-card{
  min-height:286px;
  padding:46px 38px 40px;
  border-right:1px solid rgba(255,255,255,.12);
}
.service-card:last-child{
  border-right:0;
}
.service-icon{
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  color:var(--blue);
  display:block;
  font-size:46px;
  line-height:1;
  margin-bottom:20px;
}
.service-card h2{
  color:#fff;
  font-size:21px;
  line-height:1.18;
}
.service-card p{
  color:#d7dbde;
  font-size:15px;
}
.service-card a{
  color:var(--blue);
}

/* Over ons */
.about{
  grid-template-columns:1.08fr .92fr;
  min-height:500px;
  background:#0b0d0f;
}
.about-copy{
  order:2;
}
.about-image{
  order:1;
  min-height:500px;
}
.about-image img{
  filter:saturate(.9) contrast(1.04);
}
.about-inner{
  max-width:680px;
  padding:78px 60px;
  margin:0;
}
.about h2{
  font-size:36px;
  margin-bottom:24px;
}
.about .eyebrow{
  color:var(--blue);
}

/* Contact */
.contact-strip{
  padding:42px 0;
  background:linear-gradient(180deg,#16191b,#111315);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.contact-grid{
  grid-template-columns:1fr 1fr 1fr;
}
.contact-grid>div{
  border-right:1px solid rgba(255,255,255,.13);
}
.contact-strip h2{
  color:#fff;
  font-size:22px;
}
.contact-big,
.hours{
  color:#f2f4f5;
}

/* Ervaringsblok */
.experience{
  background:#06080a;
  padding:42px 0;
}
.experience-grid{
  grid-template-columns:1.05fr .9fr 1fr;
}
.experience blockquote{
  color:#fff;
  font-size:21px;
  line-height:1.55;
}
.experience-brand img{
  max-width:250px;
}
.experience-copy{
  text-align:left;
}
.experience-copy strong{
  color:var(--blue);
  font-size:24px;
}
.experience-copy span{
  color:#fff;
}

/* Footer */
.site-footer{
  background:#020304;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.footer-inner{
  color:#aeb6bc;
}
.social-link{
  background:var(--blue);
}

/* Responsive */
@media(max-width:1180px){
  .header-inner{
    grid-template-columns:220px auto auto;
  }
  .brand img{
    max-width:205px;
  }
  .primary-nav .menu{
    gap:20px;
  }
  .hero h1{
    font-size:clamp(46px,5.2vw,66px);
  }
}
@media(max-width:980px){
  .site-header{
    background:#030506;
  }
  .primary-nav{
    top:108px;
    background:#07090a;
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 12px 24px rgba(0,0,0,.28);
  }
  .primary-nav a{
    color:#fff;
  }
  .hero{
    min-height:580px;
  }
  .hero:after{
    background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.70) 68%,rgba(0,0,0,.25));
  }
  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .service-card{
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }
  .service-card:nth-child(2){
    border-right:0;
  }
  .about{
    grid-template-columns:1fr;
  }
  .about-copy{order:1}
  .about-image{order:2;min-height:360px}
  .contact-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:680px){
  .header-inner{
    min-height:82px;
    grid-template-columns:170px auto auto;
  }
  .brand img{
    max-width:160px;
    max-height:62px;
  }
  .primary-nav{
    top:82px;
  }
  .hero{
    min-height:560px;
    background:#050708;
  }
  .hero:after{
    background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.86));
  }
  .hero-copy{
    padding:68px 0 58px;
  }
  .hero h1{
    font-size:44px;
  }
  .service-grid{
    grid-template-columns:1fr;
  }
  .service-card{
    min-height:auto;
    padding:34px 24px;
    border-right:0!important;
  }
  .about-inner{
    padding:50px 24px;
  }
  .contact-grid{
    grid-template-columns:1fr;
  }
  .experience-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .experience-copy{
    text-align:center;
  }
}

/* v1.6 — logo en gerichte correcties */
.site-header .brand img{
  transform:rotate(-3.5deg);
  transform-origin:left center;
}
.experience-brand img{
  transform:rotate(-3.5deg);
  transform-origin:center center;
}
.service-card a{
  display:none !important;
}
.footer-nav{
  display:none !important;
}

/* v1.6.1 — mobiele leesbaarheid diensten */
@media (max-width:680px){
  .services{
    background:#111315 !important;
  }
  .service-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
  }
  .service-card{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    padding:30px 24px 32px !important;
    background:#111315 !important;
    color:#fff !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    overflow:visible !important;
  }
  .service-card:last-child{
    border-bottom:0 !important;
  }
  .service-card .service-icon{
    display:block !important;
    color:var(--blue) !important;
    margin-bottom:16px !important;
  }
  .service-card h2{
    display:block !important;
    color:#fff !important;
    font-size:22px !important;
    line-height:1.2 !important;
    margin:0 0 12px !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .service-card p{
    display:block !important;
    color:#d7dbde !important;
    font-size:16px !important;
    line-height:1.6 !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

/* =========================================================
   Garage de Zwart v1.7
   Witte header + leesbare donkere dienstenbalk
   ========================================================= */

/* Witte header */
.site-header{
  background:#ffffff !important;
  border-bottom:1px solid rgba(0,0,0,.10) !important;
  box-shadow:0 2px 14px rgba(0,0,0,.06) !important;
}
.primary-nav a{
  color:#101418 !important;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a{
  color:var(--blue) !important;
}
.header-phone{
  color:var(--blue) !important;
}
.menu-toggle span:not(.screen-reader-text){
  background:#101418 !important;
}

/* Logo blijft schuin zoals afgesproken */
.site-header .brand img{
  transform:rotate(-3.5deg) !important;
  transform-origin:left center !important;
}

/* Mobiel menu ook wit */
@media (max-width:980px){
  .primary-nav{
    background:#ffffff !important;
    border-top:1px solid rgba(0,0,0,.10) !important;
    box-shadow:0 12px 24px rgba(0,0,0,.10) !important;
  }
  .primary-nav a{
    color:#101418 !important;
  }
}

/* Dienstenbalk donker houden, teksten altijd leesbaar */
.services{
  background:linear-gradient(180deg,#17191b,#111315) !important;
  color:#ffffff !important;
}
.service-card{
  background:transparent !important;
  color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
}
.service-card .service-icon{
  color:var(--blue) !important;
  opacity:1 !important;
  visibility:visible !important;
}
.service-card h2{
  display:block !important;
  color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
}
.service-card p{
  display:block !important;
  color:#d7dbde !important;
  opacity:1 !important;
  visibility:visible !important;
}
.service-card a{
  display:none !important;
}

/* Mobiel: vier diensten duidelijk onder elkaar */
@media (max-width:680px){
  .service-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
  }
  .service-card{
    width:100% !important;
    min-height:0 !important;
    padding:30px 24px 32px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
  }
  .service-card:last-child{
    border-bottom:0 !important;
  }
  .service-card h2{
    font-size:22px !important;
    line-height:1.2 !important;
    margin:0 0 12px !important;
  }
  .service-card p{
    font-size:16px !important;
    line-height:1.6 !important;
    margin:0 !important;
  }
}

/* v1.7.1 — definitieve mobiele zichtbaarheid diensten */
@media (max-width: 680px){

  .services,
  .services .container,
  .services .service-grid{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .services .service-grid{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
  }

  .services .service-card{
    position:relative !important;
    display:block !important;
    flex:none !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:30px 24px 32px !important;
    margin:0 !important;
    background:#111315 !important;
    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    transform:none !important;
    clip:auto !important;
    clip-path:none !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
  }

  .services .service-card:last-child{
    border-bottom:0 !important;
  }

  .services .service-card .service-icon{
    position:static !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:0 0 16px !important;
    color:var(--blue) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .services .service-card h2,
  .services .service-card p{
    position:static !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    transform:none !important;
    clip:auto !important;
    clip-path:none !important;
    text-indent:0 !important;
    white-space:normal !important;
  }

  .services .service-card h2{
    color:#fff !important;
    font-size:22px !important;
    line-height:1.2 !important;
    margin:0 0 12px !important;
  }

  .services .service-card p{
    color:#d7dbde !important;
    font-size:16px !important;
    line-height:1.6 !important;
    margin:0 !important;
  }
}

/* v1.7.2 — scherp footerlogo, overige layout ongewijzigd */
.experience-brand img{
  max-width:250px !important;
  height:auto !important;
  transform:rotate(-3.5deg) !important;
  transform-origin:center center !important;
  image-rendering:auto !important;
}

/* =========================================================
   Garage de Zwart v1.7.3
   Witte menubalk zwevend over de hero + groter schuin logo
   ========================================================= */

body.home .site-header{
  position:absolute !important;
  top:24px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:80 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

body.home .site-header .header-inner{
  width:min(1480px, calc(100% - 48px)) !important;
  min-height:112px !important;
  margin:0 auto !important;
  padding:12px 28px !important;
  background:#fff !important;
  border-radius:22px !important;
  box-shadow:0 14px 38px rgba(0,0,0,.20) !important;
  grid-template-columns:300px 1fr auto !important;
  gap:28px !important;
}

body.home .site-header .brand img{
  width:auto !important;
  max-width:285px !important;
  max-height:94px !important;
  transform:rotate(-4deg) !important;
  transform-origin:left center !important;
}

body.home .primary-nav a{
  color:#101418 !important;
}

body.home .header-phone{
  color:var(--blue) !important;
}

body.home .hero{
  padding-top:0 !important;
}

body.home .hero-copy{
  padding-top:178px !important;
}

/* Tablet: nog steeds boven de hero, maar compacter */
@media (max-width:1180px){
  body.home .site-header .header-inner{
    grid-template-columns:240px auto auto !important;
    gap:18px !important;
  }
  body.home .site-header .brand img{
    max-width:225px !important;
    max-height:78px !important;
  }
}

/* Mobiel: geen onhandige zwevende balk; compacte normale header */
@media (max-width:980px){
  body.home .site-header{
    position:relative !important;
    top:0 !important;
    background:#fff !important;
  }
  body.home .site-header .header-inner{
    width:min(var(--max), calc(100% - 32px)) !important;
    min-height:86px !important;
    margin:auto !important;
    padding:8px 0 !important;
    background:#fff !important;
    border-radius:0 !important;
    box-shadow:none !important;
    grid-template-columns:190px auto auto !important;
  }
  body.home .site-header .brand img{
    max-width:180px !important;
    max-height:68px !important;
    transform:rotate(-3.5deg) !important;
  }
  body.home .primary-nav{
    top:86px !important;
    background:#fff !important;
  }
  body.home .hero-copy{
    padding-top:68px !important;
  }
}

@media (max-width:680px){
  body.home .site-header .header-inner{
    width:min(100% - 24px, var(--max)) !important;
    grid-template-columns:160px auto auto !important;
  }
  body.home .site-header .brand img{
    max-width:150px !important;
    max-height:58px !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8
   Transparante/glazen navigatie over de hero
   ========================================================= */

/* Desktop homepage header floats over hero */
body.home .site-header{
  position:absolute !important;
  top:20px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:90 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

body.home .site-header .header-inner{
  width:min(1500px, calc(100% - 44px)) !important;
  min-height:104px !important;
  margin:0 auto !important;
  padding:10px 28px !important;
  background:rgba(4,8,12,.58) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:20px !important;
  box-shadow:0 12px 34px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(120%) !important;
  grid-template-columns:300px 1fr auto !important;
  gap:24px !important;
}

body.home .site-header .brand img{
  width:auto !important;
  max-width:282px !important;
  max-height:90px !important;
  transform:rotate(-3.5deg) !important;
  transform-origin:left center !important;
}

body.home .primary-nav .menu{
  gap:27px !important;
}

body.home .primary-nav a{
  color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}

body.home .primary-nav a:hover,
body.home .primary-nav .current-menu-item>a{
  color:var(--blue) !important;
}

body.home .header-phone{
  color:var(--blue) !important;
  font-weight:800 !important;
}

body.home .header-actions .btn-primary{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:transparent !important;
}

body.home .menu-toggle span:not(.screen-reader-text){
  background:#fff !important;
}

/* Hero composition closer to approved concept */
body.home .hero{
  min-height:690px !important;
}

body.home .hero:after{
  background:
    linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.80) 27%,rgba(0,0,0,.42) 53%,rgba(0,0,0,.10) 76%),
    linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.26)) !important;
}

body.home .hero-copy{
  padding-top:188px !important;
  padding-bottom:76px !important;
  max-width:600px !important;
}

body.home .hero h1{
  font-size:clamp(54px,5.5vw,82px) !important;
  line-height:.97 !important;
}

body.home .hero-text{
  max-width:540px !important;
  font-size:17px !important;
  line-height:1.65 !important;
}

/* Keep four approved service blocks dark and readable */
.services{
  background:linear-gradient(180deg,#17191b,#111315) !important;
}
.service-card h2{color:#fff !important}
.service-card p{color:#d7dbde !important}
.service-card .service-icon{color:var(--blue) !important}

/* Tablet */
@media (max-width:1180px){
  body.home .site-header .header-inner{
    grid-template-columns:230px auto auto !important;
    gap:16px !important;
  }
  body.home .site-header .brand img{
    max-width:220px !important;
    max-height:74px !important;
  }
  body.home .primary-nav .menu{
    gap:18px !important;
  }
}

/* Tablet/mobile: normal white header for maximum usability */
@media (max-width:980px){
  body.home .site-header{
    position:relative !important;
    top:0 !important;
    background:#fff !important;
  }
  body.home .site-header .header-inner{
    width:min(var(--max), calc(100% - 32px)) !important;
    min-height:86px !important;
    margin:auto !important;
    padding:8px 0 !important;
    background:#fff !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    grid-template-columns:190px auto auto !important;
  }
  body.home .site-header .brand img{
    max-width:180px !important;
    max-height:68px !important;
    transform:rotate(-3.5deg) !important;
  }
  body.home .primary-nav{
    top:86px !important;
    background:#fff !important;
  }
  body.home .primary-nav a{
    color:#101418 !important;
    text-shadow:none !important;
  }
  body.home .menu-toggle span:not(.screen-reader-text){
    background:#101418 !important;
  }
  body.home .hero{
    min-height:580px !important;
  }
  body.home .hero-copy{
    padding-top:70px !important;
  }
}

@media (max-width:680px){
  body.home .site-header .header-inner{
    width:min(100% - 24px, var(--max)) !important;
    grid-template-columns:155px auto auto !important;
  }
  body.home .site-header .brand img{
    max-width:145px !important;
    max-height:56px !important;
  }
  body.home .hero h1{
    font-size:44px !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8.1
   Meer ademruimte rond headerlogo; overige v1.8 layout behouden
   ========================================================= */
@media (min-width:1181px){
  body.home .site-header .header-inner{
    grid-template-columns:330px 1fr auto !important;
    min-height:118px !important;
    padding:14px 28px !important;
  }

  body.home .site-header .brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    padding:5px 18px 5px 4px !important;
    overflow:visible !important;
  }

  body.home .site-header .brand a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:88px !important;
    overflow:visible !important;
  }

  body.home .site-header .brand img{
    display:block !important;
    width:auto !important;
    max-width:292px !important;
    max-height:92px !important;
    margin:0 !important;
    transform:rotate(-3.5deg) !important;
    transform-origin:center center !important;
    object-fit:contain !important;
  }

  body.home .hero-copy{
    padding-top:204px !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8.2
   Mobiele dienstenblokken: tekst altijd zichtbaar
   ========================================================= */
@media (max-width:680px){

  .services{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    background:#111315 !important;
  }

  .services .container,
  .services .service-grid{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .services .service-card{
    position:relative !important;
    display:block !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:30px 24px 32px !important;
    margin:0 !important;
    background:#111315 !important;
    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    transform:none !important;
    clip:auto !important;
    clip-path:none !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
  }

  .services .service-card:last-child{
    border-bottom:0 !important;
  }

  .services .service-card .service-icon{
    position:static !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    margin:0 0 16px !important;
    padding:0 !important;
    color:var(--blue) !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    transform:none !important;
  }

  .services .service-card h2,
  .services .service-card p{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    transform:none !important;
    clip:auto !important;
    clip-path:none !important;
    text-indent:0 !important;
    white-space:normal !important;
  }

  .services .service-card h2{
    color:#fff !important;
    font-size:22px !important;
    line-height:1.2 !important;
    margin-top:0 !important;
    margin-bottom:12px !important;
  }

  .services .service-card p{
    color:#d7dbde !important;
    font-size:16px !important;
    line-height:1.6 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8.3
   Mobiele dienstenlayout gebruikt dezelfde Customizer-content
   ========================================================= */

.services-mobile{
  display:none;
}

@media (max-width:680px){

  /* Gebruik op mobiel een eigen, eenvoudige weergave zodat oude
     desktop/service-grid regels geen tekst meer kunnen verbergen. */
  .services{
    display:none !important;
  }

  .services-mobile{
    display:block !important;
    background:#111315 !important;
    color:#fff !important;
    width:100% !important;
  }

  .services-mobile .container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .service-mobile-card{
    display:grid !important;
    grid-template-columns:54px minmax(0,1fr) !important;
    gap:18px !important;
    align-items:start !important;
    width:100% !important;
    padding:28px 24px 30px !important;
    margin:0 !important;
    background:#111315 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    color:#fff !important;
  }

  .service-mobile-card:last-child{
    border-bottom:0 !important;
  }

  .service-mobile-icon{
    display:block !important;
    color:var(--blue) !important;
    font-size:36px !important;
    line-height:1 !important;
    padding-top:2px !important;
  }

  .service-mobile-content{
    display:block !important;
    min-width:0 !important;
  }

  .service-mobile-content h2{
    display:block !important;
    color:#fff !important;
    font-size:22px !important;
    line-height:1.2 !important;
    margin:0 0 10px !important;
    padding:0 !important;
    font-weight:800 !important;
    opacity:1 !important;
    visibility:visible !important;
    white-space:normal !important;
  }

  .service-mobile-content p{
    display:block !important;
    color:#d7dbde !important;
    font-size:16px !important;
    line-height:1.55 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    white-space:normal !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8.5
   Instelbare hero-overlay + robuuste dienstenweergave
   ========================================================= */

/* Extra donkerte instelbaar via Customizer */
body.home .hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,var(--hero-overlay,.50));
  pointer-events:none;
}

/* Bestaande hero-content blijft boven de overlay */
body.home .hero .hero-grid{
  position:relative;
  z-index:3;
}

/* Diensten: titels en teksten op desktop/tablet expliciet zichtbaar */
.services .service-card{
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
}

.services .service-card h2{
  display:block !important;
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  max-height:none !important;
  overflow:visible !important;
}

.services .service-card p{
  display:block !important;
  color:#d7dbde !important;
  opacity:1 !important;
  visibility:visible !important;
  max-height:none !important;
  overflow:visible !important;
}

/* Mobiele aparte dienstenlayout blijft de bron op iPhone */
@media (max-width:680px){
  .services{display:none !important;}
  .services-mobile{display:block !important;}
}

/* =========================================================
   Garage de Zwart v1.8.6
   Mobiel headerlogo volledig zichtbaar
   ========================================================= */

@media (max-width:980px){
  body.home .site-header .header-inner{
    grid-template-columns:minmax(210px, 42vw) auto auto !important;
    min-height:92px !important;
    overflow:visible !important;
  }

  body.home .site-header .brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    overflow:visible !important;
    padding:4px 10px 4px 0 !important;
  }

  body.home .site-header .brand img{
    display:block !important;
    width:100% !important;
    max-width:220px !important;
    height:auto !important;
    max-height:78px !important;
    object-fit:contain !important;
    object-position:left center !important;
    transform:rotate(-3.5deg) !important;
    transform-origin:center center !important;
    overflow:visible !important;
  }

  body.home .menu-toggle{
    justify-self:end !important;
  }
}

@media (max-width:680px){
  body.home .site-header .header-inner{
    grid-template-columns:minmax(195px, 48vw) auto auto !important;
    min-height:88px !important;
    width:min(100% - 20px, var(--max)) !important;
  }

  body.home .site-header .brand img{
    width:100% !important;
    max-width:205px !important;
    max-height:74px !important;
    transform:rotate(-3.5deg) !important;
  }
}

@media (max-width:420px){
  body.home .site-header .header-inner{
    grid-template-columns:minmax(175px, 52vw) auto auto !important;
    gap:8px !important;
  }

  body.home .site-header .brand img{
    max-width:188px !important;
    max-height:68px !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8.7
   Juiste logovariant per headerachtergrond
   ========================================================= */

.site-header .logo-darkbg,
.site-header .logo-lightbg{
  display:none;
}

body.home .site-header .logo-darkbg{
  display:block !important;
}

body.home .site-header .logo-lightbg{
  display:none !important;
}

@media (max-width:980px){
  body.home .site-header .logo-darkbg{
    display:none !important;
  }

  body.home .site-header .logo-lightbg{
    display:block !important;
  }

  body.home .site-header .logo-customizer{
    display:block !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8.8
   Mobiel: exact één volledig logo in de witte header
   ========================================================= */

/* Basis: voorkom dat meerdere logo-assets tegelijk ruimte innemen */
.site-header .brand .logo-darkbg,
.site-header .brand .logo-lightbg,
.site-header .brand .logo-customizer{
  position:static !important;
}

/* Desktop homepage: alleen blauw/wit voor donkere/transparante header */
@media (min-width:981px){
  body.home .site-header .brand .logo-darkbg{
    display:block !important;
  }
  body.home .site-header .brand .logo-lightbg{
    display:none !important;
  }
}

/* Mobiel/tablet: alleen blauw/zwart voor witte header */
@media (max-width:980px){
  body.home .site-header .brand .logo-darkbg{
    display:none !important;
  }

  body.home .site-header .brand .logo-lightbg{
    display:block !important;
  }

  /* Als een customizer-logo is ingesteld, verberg het op mobiel zodat
     er nooit twee logo's tegelijk verschijnen. */
  body.home .site-header .brand .logo-customizer{
    display:none !important;
  }

  body.home .site-header .brand{
    position:relative !important;
    overflow:visible !important;
  }

  body.home .site-header .brand .logo-lightbg{
    width:100% !important;
    max-width:220px !important;
    height:auto !important;
    max-height:78px !important;
    object-fit:contain !important;
    object-position:left center !important;
    transform:rotate(-3.5deg) !important;
    transform-origin:center center !important;
    margin:0 !important;
  }
}

@media (max-width:680px){
  body.home .site-header .brand .logo-lightbg{
    max-width:205px !important;
    max-height:74px !important;
  }
}

@media (max-width:420px){
  body.home .site-header .brand .logo-lightbg{
    max-width:188px !important;
    max-height:68px !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8.9
   Mobiel: Over ons tekst volledig zichtbaar
   ========================================================= */

@media (max-width:680px){

  .about,
  .about-copy,
  .about-inner{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .about{
    display:block !important;
    background:#0b0d0f !important;
  }

  .about-copy{
    display:block !important;
    width:100% !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .about-inner{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:48px 24px 52px !important;
  }

  .about .eyebrow,
  .about h2,
  .about p{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    transform:none !important;
    clip:auto !important;
    clip-path:none !important;
    white-space:normal !important;
    text-indent:0 !important;
  }

  .about .eyebrow{
    color:var(--blue) !important;
    font-size:15px !important;
    line-height:1.4 !important;
    margin:0 0 14px !important;
  }

  .about h2{
    color:#fff !important;
    font-size:34px !important;
    line-height:1.1 !important;
    margin:0 0 20px !important;
  }

  .about p{
    color:#e4e7e9 !important;
    font-size:17px !important;
    line-height:1.65 !important;
    margin:0 !important;
  }

  .about-image{
    display:block !important;
    min-height:280px !important;
    height:280px !important;
    overflow:hidden !important;
  }

  .about-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/* =========================================================
   Garage de Zwart v1.8.10
   Structurele mobiele Over-ons oplossing
   ========================================================= */

.about-mobile{
  display:none;
}

@media (max-width:680px){
  /* Verberg uitsluitend de desktopvariant op mobiel */
  .about#over-ons{
    display:none !important;
  }

  /* Eigen mobiele markup, los van oude .about-regels */
  .about-mobile{
    display:block !important;
    width:100% !important;
    background:#0b0d0f !important;
    color:#fff !important;
    overflow:visible !important;
  }

  .about-mobile-copy{
    display:block !important;
    width:100% !important;
    padding:46px 24px 48px !important;
    margin:0 !important;
    background:#0b0d0f !important;
  }

  .about-mobile-eyebrow{
    display:block !important;
    margin:0 0 14px !important;
    color:var(--blue) !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
  }

  .about-mobile h2{
    display:block !important;
    margin:0 0 20px !important;
    padding:0 !important;
    color:#fff !important;
    font-size:34px !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
  }

  .about-mobile-text,
  .about-mobile-text p{
    display:block !important;
    position:static !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    color:#e4e7e9 !important;
    font-size:17px !important;
    line-height:1.65 !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    transform:none !important;
    clip:auto !important;
    clip-path:none !important;
    white-space:normal !important;
  }

  .about-mobile-image{
    display:block !important;
    width:100% !important;
    height:280px !important;
    overflow:hidden !important;
  }

  .about-mobile-image img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/* Garage de Zwart v1.8.11 — hero bovenregel verwijderd */
.hero .eyebrow,
.hero-eyebrow,
.hero-kicker,
.hero-label{
  display:none !important;
}

/* Garage de Zwart v1.8.12 — Over ons tekst betrouwbaar zichtbaar */
.about .about-inner > p:not(.eyebrow){
  display:block;
  opacity:1;
  visibility:visible;
  color:#d5dee7;
  height:auto;
  max-height:none;
  overflow:visible;
}
@media (max-width:680px){
  .about-mobile-text,
  .about-mobile-text p{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    color:#e4e7e9 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* v1.8.13 — compactere Over ons afbeelding op desktop */
@media (min-width: 769px){
  .about{
    min-height:0 !important;
  }
  .about .about-media,
  .about .about-image,
  .about figure{
    height:450px !important;
    min-height:0 !important;
    overflow:hidden;
  }
  .about .about-media img,
  .about .about-image img,
  .about figure img,
  .about > img{
    width:100%;
    height:450px !important;
    min-height:0 !important;
    object-fit:cover !important;
    object-position:center center;
    display:block;
  }
  .about .about-inner{
    min-height:450px;
    align-content:center;
  }
}

/* v1.8.14 — compactere Over ons foto + meer logoruimte in desktop menubalk */
@media (min-width: 769px){
  /* Over ons: rustiger verhouding beeld/tekst */
  .about .about-media,
  .about .about-image,
  .about figure{
    height:400px !important;
    min-height:0 !important;
    overflow:hidden;
  }
  .about .about-media img,
  .about .about-image img,
  .about figure img,
  .about > img{
    width:100%;
    height:400px !important;
    min-height:0 !important;
    object-fit:cover !important;
    object-position:center center;
    display:block;
  }
  .about .about-inner{
    min-height:400px !important;
    align-content:center;
  }

  /* Headerlogo: extra ademruimte zonder de rest van de header te wijzigen */
  .site-header .custom-logo-link,
  .header-inner .custom-logo-link,
  .header-wrap .custom-logo-link{
    flex:0 0 auto;
    margin-right:28px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .site-header .custom-logo,
  .header-inner .custom-logo,
  .header-wrap .custom-logo{
    max-width:none;
    width:auto;
    height:auto;
  }
}

/* v1.8.15 — hero standaard verder uitgezoomd + instelbare zoom */
.hero-slide{
  inset:0 !important;
  transform:scale(var(--hero-zoom,1));
  transform-origin:center center;
}
.hero-motion .hero-slide.is-active{
  animation:gdzHeroMoveAdjustable 10s ease-in-out forwards !important;
}
@keyframes gdzHeroMoveAdjustable{
  0%{transform:scale(var(--hero-zoom,1)) translate3d(0,0,0)}
  100%{transform:scale(calc(var(--hero-zoom,1) + .025)) translate3d(-.4%,.2%,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{
    animation:none !important;
    transform:scale(var(--hero-zoom,1));
  }
}

/* v1.8.16 — rustiger hoofdmenu met Diensten-dropdown */
.primary-nav .menu{
  align-items:center;
  gap:30px;
}
.primary-nav .menu > li{
  position:relative;
}
.primary-nav .menu > li > a{
  white-space:nowrap;
}
.primary-nav .sub-menu{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:220px;
  margin:0;
  padding:10px 0;
  list-style:none;
  background:rgba(5,10,14,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:0 16px 32px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:120;
}
.primary-nav .sub-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:18px;
}
.primary-nav .sub-menu li{
  display:block;
}
.primary-nav .sub-menu a{
  display:block;
  padding:10px 18px;
  color:#fff !important;
  white-space:nowrap;
  font-size:13px;
}
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus{
  color:var(--blue) !important;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

@media (max-width:980px){
  .primary-nav .menu{
    gap:0 !important;
  }
  .primary-nav .sub-menu{
    position:static !important;
    transform:none !important;
    min-width:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    display:block !important;
    margin:4px 0 8px !important;
    padding:0 0 0 16px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .primary-nav .sub-menu a{
    padding:8px 14px !important;
    color:#38414a !important;
    font-size:13px !important;
  }
}

/* v1.8.17 — compact hoofdmenu zonder dropdown */
.primary-nav .sub-menu{
  display:none !important;
}
.primary-nav .menu{
  gap:34px;
}
.primary-nav .menu > li > a{
  white-space:nowrap;
}

/* v1.8.18 — Over ons fotohoogte desktop: 400px */

/* =========================================================
   Garage de Zwart v1.9
   Hero-content rechts op desktop; mobiel bestaande opbouw
   ========================================================= */
@media (min-width:981px){
  body.home .hero .hero-grid{
    grid-template-columns:1fr minmax(0,590px) !important;
  }

  body.home .hero .hero-copy{
    grid-column:2 !important;
    justify-self:end !important;
    width:100% !important;
    max-width:590px !important;
    padding-left:42px !important;
    padding-right:0 !important;
    text-align:left !important;
    position:relative !important;
    z-index:3 !important;
  }

  body.home .hero .hero-copy h1,
  body.home .hero .hero-copy .hero-text,
  body.home .hero .hero-copy .hero-actions{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body.home .hero .hero-copy::before{
    content:"";
    position:absolute;
    inset:110px -36px 44px -36px;
    background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.34) 22%,rgba(0,0,0,.56) 100%);
    border-radius:18px;
    z-index:-1;
    pointer-events:none;
  }

  body.home .hero:after{
    background:
      linear-gradient(90deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.80) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.24)) !important;
  }
}

@media (max-width:980px){
  body.home .hero .hero-grid{
    grid-template-columns:1fr !important;
  }

  body.home .hero .hero-copy{
    grid-column:auto !important;
    justify-self:stretch !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:left !important;
  }

  body.home .hero .hero-copy::before{
    content:none !important;
  }
}

/* =========================================================
   Garage de Zwart v1.9.1
   Over ons desktop/tablet omgedraaid: tekst links, foto rechts
   ========================================================= */

@media (min-width:681px){
  .about{
    grid-template-columns:1fr 1fr !important;
  }

  .about .about-copy{
    order:1 !important;
  }

  .about .about-image{
    order:2 !important;
  }

  .about .about-inner{
    margin-left:0 !important;
    margin-right:auto !important;
    padding-left:56px !important;
    padding-right:56px !important;
    text-align:left !important;
  }

  .about .about-image img{
    object-position:center center !important;
  }
}

/* Mobiel: bestaande aparte mobiele sectie blijft tekst eerst, foto eronder */
@media (max-width:680px){
  .about-mobile-copy{
    order:1 !important;
  }

  .about-mobile-image{
    order:2 !important;
  }
}

/* =========================================================
   Garage de Zwart v1.9.2
   Over ons: tekstblok op desktop verder naar binnen
   ========================================================= */
@media (min-width:1100px){
  .about .about-inner{
    padding-left:140px !important;
    padding-right:56px !important;
  }
}

/* =========================================================
   Garage de Zwart v1.9.3
   Verfijnde uitlijning/vulling Over ons en contactstrook
   ========================================================= */

@media (min-width:981px){
  .about{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) !important;
    max-width:1500px !important;
    margin:0 auto !important;
    padding:18px 32px !important;
    column-gap:42px !important;
    align-items:center !important;
    background:#0b0d0f !important;
  }

  .about .about-copy{
    order:1 !important;
    display:flex !important;
    align-items:center !important;
    min-height:400px !important;
  }

  .about .about-inner{
    width:100% !important;
    max-width:590px !important;
    min-height:0 !important;
    margin:0 !important;
    padding:42px 20px 42px 16px !important;
    text-align:left !important;
  }

  .about .eyebrow{
    margin-bottom:16px !important;
  }

  .about h2{
    margin-bottom:24px !important;
  }

  .about .about-inner > p:not(.eyebrow){
    max-width:560px !important;
    line-height:1.7 !important;
  }

  .about .about-image{
    order:2 !important;
    height:400px !important;
    min-height:0 !important;
    overflow:hidden !important;
    border-radius:4px !important;
    align-self:center !important;
  }

  .about .about-image img{
    width:100% !important;
    height:400px !important;
    object-fit:cover !important;
    object-position:center 56% !important;
    display:block !important;
  }

  .contact-strip{
    padding:38px 0 !important;
  }

  .contact-strip .container{
    max-width:1500px !important;
    padding-left:48px !important;
    padding-right:48px !important;
  }

  .contact-grid{
    align-items:start !important;
  }

  .contact-grid > div{
    padding-left:34px !important;
    padding-right:34px !important;
  }

  .contact-grid > div:first-child{
    padding-left:0 !important;
  }

  .contact-grid > div:last-child{
    padding-right:0 !important;
  }
}

@media (min-width:681px) and (max-width:980px){
  .about{
    gap:26px !important;
    padding:24px !important;
  }

  .about .about-inner{
    padding:30px 18px !important;
  }
}

@media (max-width:680px){
  .about-mobile{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* =========================================================
   Garage de Zwart v1.10
   Hero overlay volledig instelbaar + Facebook in header
   ========================================================= */

/* De Customizer-waarde --hero-overlay is nu de enige algemene
   verduistering over de hero. 0 = originele foto. */
body.home .hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  background:rgba(0,0,0,var(--hero-overlay,.50)) !important;
  pointer-events:none !important;
}

/* Oude extra overlay-laag niet meer gebruiken. */
body.home .hero .hero-overlay{
  display:none !important;
}

/* Geen apart zwart afgerond kader rond hero-tekst. */
body.home .hero .hero-copy::before{
  content:none !important;
  display:none !important;
}

/* Hero-content blijft boven de instelbare overlay. */
body.home .hero .hero-grid{
  position:relative !important;
  z-index:3 !important;
}

/* Facebook naar de header, direct voor het telefoonnummer. */
.header-actions .header-social{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--blue);
  color:#fff !important;
  font-size:17px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease;
}
.header-actions .header-social:hover,
.header-actions .header-social:focus{
  transform:translateY(-1px);
  background:#0ab1ff;
}

/* Oude footer-social wordt niet meer getoond. */
.site-footer .social-link{
  display:none !important;
}

/* Mobiele header compact houden; Facebook staat in de desktop/tablet-balk. */
@media (max-width:680px){
  .header-actions .header-social{
    display:none !important;
  }
}


/* v1.11.5 — vaste regelverdeling hero H1 */
body.home .hero h1 .hero-title-row{
  display:block !important;
  width:100% !important;
  white-space:nowrap !important;
}


/* v1.11.6 — hero titel definitief: GARAGE / DE ZWART */
body.home .hero h1{
  display:block !important;
}
body.home .hero h1 .hero-title-row{
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  white-space:nowrap !important;
}
body.home .hero h1 .hero-title-row + .hero-title-row{
  margin-top:0 !important;
}


/* v1.11.7 — afspraakknop uit header naar hero */
body.home .hero .hero-single-cta{
  margin-top:28px;
}
body.home .hero .hero-single-cta .btn{
  min-width:190px;
}





/* =========================================================
   Garage de Zwart v1.11.9
   Herstel regelbare hero zoom/pan
   ========================================================= */

body.home .hero .hero-slide{
  transform:scale(var(--hero-zoom,1)) translate3d(0,0,0);
  transform-origin:center center !important;
  will-change:transform, opacity;
}

body.home .hero.hero-motion .hero-slide.is-active{
  animation:gdzHeroMotionV1119 var(--hero-motion-duration,6s) ease-in-out forwards !important;
}

@keyframes gdzHeroMotionV1119{
  0%{
    transform:scale(var(--hero-zoom,1)) translate3d(0,0,0);
  }
  100%{
    transform:scale(calc(var(--hero-zoom,1) + var(--hero-motion-zoom,.06)))
              translate3d(var(--hero-pan-x,-2%),var(--hero-pan-y,1%),0);
  }
}

@media (prefers-reduced-motion:reduce){
  body.home .hero.hero-motion .hero-slide.is-active{
    animation:none !important;
  }
  body.home .hero .hero-slide{
    transform:scale(var(--hero-zoom,1)) !important;
  }
}