@font-face{font-family:'Fira Sans';src:url('assets/fira-sans-300-latin-ext.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Sans';src:url('assets/fira-sans-300-latin.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';src:url('assets/fira-sans-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Sans';src:url('assets/fira-sans-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Thema Alufence — 1-op-1 nabouw van de Elementor-site (hello-theme-child).
   Maatvoering nagemeten op www.alu-fence.be bij 1440px. */
:root{
  --sp-container:1140px;--sp-gutter:0px;--sp-gap:0px;
  --sp-primary:#f6c427;--sp-primary-contrast:#54595f;
  --sp-secondary:#2e2f42;--sp-text:#333;--sp-muted:#54595f;
  --sp-line:#e5e5e5;--sp-surface:#f8f8f8;
  --sp-radius:0px;--sp-btn-radius:0px;
  --sp-font:'Fira Sans',sans-serif;--sp-font-heading:var(--sp-font);
  --al-oranje:#f59720;--al-navy:#2e2f42;--al-veld:#f8f9fa;--al-placeholder:#7a7a7a;
}
body{font:300 16px/24px var(--sp-font);color:var(--sp-text);background:#fff}
.sp-section .sp-col{padding-left:10px;padding-right:10px}
.sp-pad-s{padding:30px 0}.sp-pad-m{padding:60px 0}.sp-pad-l{padding:100px 0}
.sp-padb-none{padding-bottom:0}.sp-padb-s{padding-bottom:30px}

/* koppen: h2 = sectietitel, h5 = het gespatieerde bovenschrift */
h1,h2,h3,h4,h5,h6,.sp-heading{font-weight:300;text-transform:uppercase;letter-spacing:.5px;margin:0}
h2,h2.sp-heading,.sp-w-heading h2{font-size:30px;line-height:30px}
h5,h5.sp-heading,.sp-w-heading h5,.sp-w-heading h5.sp-size-m{font-size:16px;line-height:16px;letter-spacing:4.5px;color:var(--sp-primary)}
h2.sp-size-xl,.sp-w-heading h2.sp-size-xl{font-size:45px;line-height:45px}
.sp-w-heading+.sp-w-heading{margin-top:4px}
.sp-scheme-light h2,.sp-scheme-light h5,.sp-scheme-light .sp-heading{color:#fff}
p{margin:0 0 24px}p:last-child{margin-bottom:0}
a{color:var(--sp-primary)}

/* header — 20px lucht boven en onder, logo als woordmerk */
.site-header{background:#fff;padding:20px 0}
.header-inner{display:flex;align-items:center;gap:0;min-height:66px}
.menu-btn{display:none}
.site-logo{flex:none;width:13.596%;padding-left:10px;box-sizing:border-box;color:var(--sp-text);text-decoration:none;font-size:30px;line-height:30px;text-transform:uppercase;letter-spacing:.5px}
.site-logo img{height:44px;width:auto;display:block}
.site-nav{flex:1;padding-left:10px}
.site-nav .sp-menu{display:flex;gap:0;list-style:none;margin:0;padding:0}
.site-nav .sp-menu a{display:block;padding:13px 20px;font:300 16px/20px var(--sp-font);color:var(--sp-primary);text-decoration:none;position:relative}
.site-nav .sp-menu a[aria-current],.site-nav .sp-menu .is-active>a{color:var(--sp-primary)}
.site-nav .sp-menu a[aria-current]::after,.site-nav .sp-menu .is-active>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#3f444b}
.header-contact,.footer-contact{display:flex;list-style:none;margin:0;padding:0;justify-content:flex-end}
.header-contact li,.footer-contact li{display:flex;align-items:center;margin:0 19px;font-size:16px;line-height:24px;color:var(--sp-muted)}
.header-contact svg,.footer-contact svg{width:16px;height:16px;flex:none;color:var(--sp-primary);margin-right:5px}
.header-contact a,.footer-contact a{color:var(--sp-muted);text-decoration:none}
.header-contact a:hover,.footer-contact a:hover{color:var(--sp-primary)}

/* hero */
.sp-has-bg{background-size:cover;background-position:center}
.sp-overlay{position:absolute;inset:0}

/* icoon + tekst: gele cirkel met een donker lijnicoon */
.sp-iconbox{text-align:center;padding:25px 0}
.sp-iconbox-icon.sp-iconstyle-circle,.sp-iconbox-icon.sp-iconstyle-square{width:100px;height:100px;border-radius:50%;background:var(--sp-primary);display:flex;align-items:center;justify-content:center;margin:0 auto;padding:25px;box-sizing:border-box}
.sp-iconbox-icon svg{width:50px;height:50px;color:var(--sp-muted)}
.sp-iconbox-title{font-size:25px;line-height:30px;font-weight:300;text-transform:uppercase;letter-spacing:normal;margin:23px 0 16px;color:var(--sp-text)}
.sp-iconbox-text{font-size:16px;line-height:24px}

/* knoppen */
.sp-btn,.sp-button,button.sp-btn{display:inline-block;background:var(--sp-primary);color:var(--sp-primary-contrast);border:0;border-radius:0;padding:15px 20px;font:400 15px/15px var(--sp-font);text-decoration:none;cursor:pointer}
.sp-btn:hover,.sp-button:hover{background:#e8b619;border-color:#e8b619;color:var(--sp-primary-contrast)}

/* het oranje blok met de witte kaderlijn */
.cta-kader{background:var(--al-oranje);padding:20px}
.cta-kader>.sp-container{max-width:none;margin:0;border:1px solid rgba(255,255,255,.85);padding:81px 0;text-align:center}
.cta-kader .sp-col{padding:0}
.cta-kader h2,.cta-kader .sp-w-heading h5,.cta-kader .sp-w-heading h5.sp-size-m{color:#fff}
.cta-kader .sp-widget{margin-bottom:0}
.cta-kader .sp-btn{margin-top:20px}

/* de rij met de drie iconen hoort bij het blok erboven: 30px eronder begint ze, 100px eronder stopt de sectie */
.ib-rij{padding:30px 0 98px}

/* galerij & slider */
.sp-slider-images{--sp-slider-gap:20px}
.sp-slider-btn,.sp-slider button{background:none;border:0;color:rgba(237,237,237,.9);box-shadow:none;width:25px;height:25px;font-size:25px;border-radius:0}
.sp-slider-btn svg,.sp-slider button svg{width:25px;height:25px;stroke-width:1}
.sp-gallery-item img{width:100%;display:block}
/* realisaties: drie kolommen met de beelden op hun eigen hoogte, zoals de oude galerij */
.sp-gallery.sp-masonry{columns:3;column-gap:9px}
.sp-gallery.sp-masonry .sp-gallery-item{break-inside:avoid;margin:0 0 9px}

/* contactblok onder elke pagina */
.voet-contact{display:flex;background:var(--al-oranje)}
.voet-contact-foto{width:42.632%;background-size:cover;background-position:center;background-repeat:no-repeat}
.voet-contact-form{width:57.368%;background:var(--al-navy);padding:100px 100px 74px;box-sizing:border-box}
.voet-contact-form h2{color:#fff;font-size:30px;line-height:30px}
.voet-contact-form h5{color:var(--sp-primary);margin-top:0}
.voet-contact .sp-form{margin-top:24px}
.voet-contact .sp-form-grid{display:flex;flex-direction:column;gap:10px}
.voet-contact .sp-field{width:100%}
.voet-contact .sp-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.voet-contact input,.voet-contact textarea{width:100%;box-sizing:border-box;background:var(--al-veld);border:1px solid var(--al-veld);border-radius:0;font:400 15px/21px var(--sp-font);color:var(--sp-text)}
.voet-contact input{height:40px;padding:8px 16px}
.voet-contact textarea{display:block;height:96px;min-height:96px;padding:5px 14px;resize:vertical}
.voet-contact ::placeholder{color:var(--al-placeholder);opacity:1}
.voet-contact .sp-form button[type=submit]{width:50%;height:47px;margin-top:11px;padding:15px 20px;background:var(--sp-primary);color:var(--sp-primary-contrast);border:1px solid var(--sp-primary);border-radius:0;font:400 15px/15px var(--sp-font)}
.voet-contact .sp-form-msg,.voet-contact .sp-form-error{color:#fff}
/* ALTCHA-captcha: op de navy voet erfde de widget de donkere bodytekst (currentColor) en was hij
   onleesbaar. Zelfde lichte vlak als de invulvelden, zonder afronding, net als de rest van het formulier. */
.voet-contact altcha-widget{margin-top:10px;--altcha-color-base:var(--al-veld);--altcha-color-text:var(--sp-text);--altcha-color-border:var(--al-veld);--altcha-border-radius:0}
.voet-contact .sp-field altcha-widget label{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}

/* voet: witte strook met contactgegevens, daaronder de donkere copyrightbalk */
.site-footer{background:#fff}
.foot-contact{padding:40px 0;display:flex;justify-content:center}
.foot-contact .footer-contact{justify-content:center}
.foot-copy{background:var(--al-navy);color:#fff;padding:20px 0;text-align:center;font-size:16px;line-height:24px}
.foot-copy a{color:var(--sp-primary);text-decoration:none}
.footer-legal{display:block;font-size:13px;opacity:.75}
.footer-legal a{margin:0 6px;color:#fff}

@media(max-width:1200px){.sp-container{padding:0 20px}.voet-contact-form{padding:50px}}
@media(max-width:900px){
  .menu-btn{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;order:3}
  .menu-btn span{width:26px;height:3px;background:var(--sp-muted);border-radius:2px}
  .header-inner{flex-wrap:wrap;justify-content:space-between}
  .site-logo{width:auto}
  .site-nav{order:4;flex-basis:100%;display:none}
  .site-nav.is-open{display:block}
  .site-nav .sp-menu{flex-direction:column}
  .header-contact{order:5;flex-basis:100%;justify-content:flex-start;flex-wrap:wrap;margin-top:10px}
  .header-contact li{margin:4px 19px 4px 0}
  .voet-contact{flex-direction:column}
  .voet-contact-foto{width:100%;min-height:220px}
  .voet-contact-form{width:100%;padding:27px}
  .sp-size-xl{font-size:32px;line-height:34px}
  .sp-gallery-4{grid-template-columns:repeat(2,1fr)}
  .cta-kader>.sp-container{padding:40px 20px}
}
@media(max-width:560px){.sp-gallery-4{grid-template-columns:1fr}}

/* de voordelenlijst had op de oude site groene vinkjes */
.sp-icon-vink{color:#61ce70}