.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}


*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}


/* =========================== Scroll To Top =========================== */

.scroll--wcreate {
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-white);
    transition: 0.8s ease-in-out;
}

.scrollToTop {
    position: fixed;
	right: 2%;
	bottom: 5%;
    display: none;
    transition: 0.5s ease;
    z-index: 5;
}

a.scrollToTop svg {
    width: 50px;
    transition: 0.8s ease-in-out;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}

.pijl{
    fill: var(--color-white);
}

.scroll--wcreate:hover .pijl{
	fill: var(--color-primary) !important;
	transition: 0.8s ease;
}

a.scrollToTop:hover .scroll--wcreate{
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
	transition: 0.8s ease;
}

/* =========================== Algemeen =========================== */

body {
  font-size: var(--font-size);
  margin: 0;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  color:#FFF;
  background-color: var(--color-near-black);
}

.m--i--r{position: relative;}

.h--100p {height: 100%;}
.h--screen{height:100vh;}

.w--container {
  display: block;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);
}

.w--container.medium {
  display: block;
  width: 100%;
  max-width: calc(var(--container-width) * 0.85);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);  
}

.w--container.small {
  display: block;
  width: 100%;
  max-width: calc(var(--container-width) * 0.7);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);  
}
.w--links{
    display: block;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(0% + var(--spacing-x));
}

/* =========================== Typografie =========================== */

h1, .h1 {
    font-size: var(--font-size-h1);
    font-weight: 400;
    text-transform: uppercase;
    margin:0;
}

h2, .h2 {
	font-size: var(--font-size-h2);
    margin-bottom: 1rem;
    text-transform:uppercase;
    font-weight:400;
}

h3, .h3 {
	font-size: var(--font-size-h3);
    margin-bottom: 1rem;
    text-transform:uppercase;
    font-weight:400;
}

h4, .h4 {
	font-size: var(--font-size-h4);
    margin-bottom: 1rem;
}

p{font-size: var(--font-size); margin: 0.5rem 0;}
.f--sm{font-size: var(--font-size-small)}
.f--md{font-size: var(--font-size-h4)}
.f--l{font-size: var(--font-size-h3)}
.f--xl{font-size: var(--font-size-h2)}
.f--xxl{font-size: var(--font-size-h1)}

.uppercase{
    text-transform:uppercase;
}

.centered{
    text-align:center;
}

.font--thin { font-weight: 100; }
.font--light { font-weight: 300; }
.font--normal { font-weight: 400; }
.font--medium { font-weight: 500; }
.font--semibold { font-weight: 600; }
.font--bold { font-weight: 700; }
.font--black { font-weight: 900; }

.text--primary { color: var(--color-primary); }
.text--secondary { color: var(--color-secondary); }
.text--white { color: var(--color-white); }
.text--black { color: var(--color-black); }

/* =========================== Achtergrondkleuren =========================== */
.bg--primary { background-color: var(--color-primary); }
.bg--secondary { background-color: var(--color-secondary); }
.bg--white { background-color: var(--color-white); }
.bg--black { background-color: var(--colorBlack); }
.bg--gray-100 { background-color: var(--color-gray-100); }
.bg--gray-200 { background-color: var(--color-gray-200); }
.bg--gray-500 { background-color: var(--color-gray-500); }
.bg--near-black { background-color: var(--color-near-black); }

/* =========================== Padding & Margin =========================== */

.p--0{padding: 0%;}
.p--1{padding:1%;}
.px--1, .pl--1{padding-left:1%;}    
.px--1, .pr--1{padding-right:1%;}
.py--1, .pt--1{padding-top:1%;}
.py--1, .pb--1{padding-bottom:1%;}
.p--2{padding:2%;}
.px--2, .pl--2{padding-left:2%;}    
.px--2, .pr--2{padding-right:2%;}
.py--2, .pt--2{padding-top:2%;}
.py--2, .pb--2{padding-bottom:2%;}
.p--5{padding:5%;}
.px--5, .pl--5{padding-left:5%;}
.px--5, .pr--5{padding-right:5%;}
.py--5, .pt--5{padding-top:5%;}
.py--5, .pb--5{padding-bottom: 5%;}
.p--10{padding:10%;}
.px--10, .pl--10{padding-left:10%;}
.px--10, .pr--10{padding-right:10%;}
.py--10, .pt--10{padding-top:10%;}
.py--10, .pb--10{padding-bottom: 10%;}
.p--15{padding:15%;}
.px--15, .pl--15{padding-left:15%;}
.px--15, .pr--15{padding-right:15%;}
.py--15, .pt--15{padding-top:15%;}
.py--15, .pb--15{padding-bottom: 15%;}
.p--20{padding:20%;}
.px--20, .pl--20{padding-left:20%;}
.px--20, .pr--20{padding-right:20%;}
.py--20, .pt--20{padding-top:20%;}
.py--20, .pb--20{padding-bottom: 20%;}

.pb--1rem{padding-bottom:1rem;}

/* Padding (px, vaste stappen) */
.p--4{padding:4px;}
.p--8{padding:8px;}
.p--16{padding:16px;}
.p--32{padding:32px;}
.p--64{padding:64px;}
.p--128{padding:128px;}

.px--4{padding-left:4px;padding-right:4px;}
.px--8{padding-left:8px;padding-right:8px;}
.px--16{padding-left:16px;padding-right:16px;}
.px--32{padding-left:32px;padding-right:32px;}
.px--64{padding-left:64px;padding-right:64px;}
.px--128{padding-left:128px;padding-right:128px;}

.py--4{padding-top:4px;padding-bottom:4px;}
.py--8{padding-top:8px;padding-bottom:8px;}
.py--16{padding-top:16px;padding-bottom:16px;}
.py--32{padding-top:32px;padding-bottom:32px;}
.py--64{padding-top:64px;padding-bottom:64px;}
.py--128{padding-top:128px;padding-bottom:128px;}

.pl--4{padding-left:4px;}
.pl--8{padding-left:8px;}
.pl--16{padding-left:16px;}
.pl--32{padding-left:32px;}
.pl--64{padding-left:64px;}
.pl--128{padding-left:128px;}

.pr--4{padding-right:4px;}
.pr--8{padding-right:8px;}
.pr--16{padding-right:16px;}
.pr--32{padding-right:32px;}
.pr--64{padding-right:64px;}
.pr--128{padding-right:128px;}

.pb--16{padding-bottom:16px;}
.pt--16{padding-top:16px;
}
.m--auto{margin: auto;}
.m--0{margin:0%;}
.mx--0, .ml--0{margin-left:0%;}
.mx--0, .mr--0{margin-right:0%;}
.my--0, .mt--0{margin-top:0%;}
.my--0, .mb--0{margin-bottom:0%;}
.m--2{margin:2%;}
.mx--2, .ml--2{margin-left:2%;}
.mx--2, .mr--2{margin-right:2%;}
.my--2, .mt--2{margin-top:2%;}
.my--2, .mb--2{margin-bottom:2%;}
.m--5{margin:5%;}
.mx--5, .ml--5{margin-left:5%;}
.mx--5, .mr--5{margin-right:5%;}
.my--5, .mt--5{margin-top:5%;}
.my--5, .mb--5{margin-bottom: 5%;}
.m--10{margin:10%;}
.mx--10, .ml--10{margin-left:10%;}
.mx--10, .mr--10{margin-right:10%;}
.my--10, .mt--10{margin-top:10%;}
.my--10, .mb--10{margin-bottom: 10%;}

.mt--1{margin-top:1%}

/* Margin (px, vaste stappen) */
.mb--4{margin-bottom:4px;}
.mb--8{margin-bottom:8px;}
.mb--16{margin-bottom:16px;}
.mb--32{margin-bottom:32px;}
.mb--64{margin-bottom:64px;}
.mb--128{margin-bottom:128px;}

.mt--4{margin-top:4px;}
.mt--8{margin-top:8px;}
.mt--16{margin-top:16px;}
.mt--32{margin-top:32px;}
.mt--64{margin-top:64px;}
.mt--128{margin-top:128px;}

.-mt--10{margin-top:-10%}
.-ml--35{margin-left:-35%}
.-ml--45{margin-left:-45%}
.-ml--10{margin-left:-10%}
.-ml--15{margin-left:-15%}

/* =========================== Widths =========================== */

.w--20{width:20%;}
.w--30{width:30%;}
.w--33{width:33.333%;}
.w--40{width:40%;}
.w--50{width:50%;}
.w--60{width:60%;}
.w--70{width:70%;}
.w--80{width:80%;}
.w--100{width:100%;}



/* =========================== Randen & Schaduwen =========================== */
.rounded--sm { border-radius: 0.125rem; } /* 2px */
.rounded--md { border-radius: 0.375rem; } /* 6px */
.rounded--lg { border-radius: 0.5rem; } /* 8px */
.rounded--xl { border-radius: 0.75rem; } /* 12px */
.rounded--2xl { border-radius: 1rem; } /* 16px */
.rounded--4xl { border-radius: 30px; } /* 16px */

.shadow--sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow--md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow--lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.shadow--xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); }

/* =========================== Randen =========================== */
.border--b{
    border-bottom:1px solid #FFF;
}

.block{
    display:block;
}
.relative{
    position:relative;
}
.sticky{
    position:sticky;
}
.absolute{
    position:absolute;
}
.fixed{
    position:fixed;
}
.overflow--hidden{
    overflow:hidden;
}

.text--24{
    font-size:24px;
}
.text--32{
    font-size:32px;
}

/* =========================== Positions =========================== */
.top--0{
    top:0;
}
.top--5{
    top:5%;
}
.right--0{
    right:0;
}
.bottom--0{
    bottom:0;
}
.left--0{
    left:0;
}

.z--0{z-index:0;}
.z--1{z-index:1;}
.z--10{z-index:10;}
.z--50{z-index:50;}

/* =========================== Flexbox & Grid =========================== */

.flex{
    display:flex;
}

.flex--col{
    flex-direction: column;
}

.f--r{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.f--r--fs{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.a--i {align-items: center;}
.a--str {align-items: stretch;}
.a--s {align-items: flex-start;}
.a--e {align-items: flex-end;}

.j--c {justify-content: center;}
.j--s {justify-content: flex-start;}
.j--e {justify-content: flex-end;}
.j--b{justify-content: space-between;}


.f--c {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Specifiek gedrag voor 2 kolommen */
.f--r:has(.f--c:nth-child(2)) .f--c {
    flex: 1 1 calc(50% - 10px); 
    max-width: calc(50% - 10px);
}

/* Specifiek gedrag voor 3 kolommen */
.f--r:has(.f--c:nth-child(3)) .f--c {
    flex: 1 1 calc(33.33% - 10px); 
    max-width: calc(33.33% - 10px);
}

/* Specifiek gedrag voor 4 kolommen */
.f--r:has(.f--c:nth-child(4)) .f--c {
    flex: 1 1 calc(25% - 10px); 
    max-width: calc(25% - 10px);
}

/* Specifiek gedrag voor 5 kolommen */
.f--r:has(.f--c:nth-child(5)) .f--c {
    flex: 1 1 calc(20% - 10px); 
    max-width: calc(20% - 10px);
}


.f--c--1{flex: 0.1;}
.f--c--2{flex: 0.2;}
.f--c--3{flex: 0.3;}
.f--c--4{flex: 0.4;}
.f--c--6{flex: 0.6;}
.f--c--7{flex: 0.7;}
.f--c--8{flex: 0.8;}
.f--c--9{flex: 0.9;}

.gap--3{
	gap:3%;
}

/* Gap (px, vaste stappen) */
.gap--4{gap:4px;}
.gap--8{gap:8px;}
.gap--16{gap:16px;}
.gap--32{gap:32px;}
.gap--64{gap:64px;}
.gap--128{gap:128px;}

.grid { display: grid; }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid--gap-4 { gap: 1rem; }

/* =========================== Images =========================== */

img{width: 100%}

.fit-cover{
    width: 100%;
    object-fit: cover;
}

.auto--size{
    height:100%;
    object-fit:cover;
}

/* =========================== Buttons =========================== */

a{
    color:var(--color-white);
    text-decoration: none;
}

a:hover, a:focus-visible {
    color: var(--color-link-hover);
    transition: color var(--animate);
}

/* Herbruikbare hover-underline, zelfde mechanisme als de hoofdnavigatie */
.link--underline {
    position: relative;
    width: fit-content;
}

.link--underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background-color: var(--color-primary);
    transition: width 0.35s ease;
}

.link--underline:hover::after {
    width: 100%;
}


.btn--primary {
    color: var(--color-white);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 16px 32px;
    font-size: var(--font-size);
    font-weight: 400;
    transition: 0.5s ease;
    display: inline-block;
    cursor: pointer;
    text-transform:uppercase;
    text-align:center;
}

.btn--primary:hover {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background: transparent;
    font-size: var(--font-size);
    text-decoration: none;
    transition: 0.5s ease;
}

.btn--primary-inverse {
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    padding: 16px 32px;
    font-size: var(--font-size);
    font-weight: 400;
    transition: 0.5s ease;
    display: inline-block;
    cursor: pointer;
    text-transform:uppercase;
	text-align:center;
}

.btn--primary-inverse:hover {
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    font-size: var(--font-size);
    text-decoration: none;
    transition: 0.5s ease;
}

.btn--primary.blue {
    color: var(--color-white);
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    padding: 16px 32px;
    font-size: var(--font-size);
    font-weight: 400;
    transition: 0.5s ease;
    display: inline-block;
    cursor: pointer;
    text-transform:uppercase;
    text-align:center;
}

.btn--primary.blue:hover {
    color: var(--color-white);
    border: 1px solid var(--color-white);
    background: transparent;
    font-size: var(--font-size);
    text-decoration: none;
    transition: 0.5s ease;
}

.btn--secondary {
    color: #fff;
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    padding: 16px 32px;
    font-size: var(--font-size);
    font-weight: 400;
    transition: 0.5s ease;
    text-transform:uppercase;
    text-align:center;
}

.btn--secondary:hover {
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    background: var(--color-white);
    font-size: var(--font-size);
    text-decoration: none;
    transition: 0.5s ease;
}

.btn--secondary-inverse {
    color: var(--color-secondary);
    background: transparent;
    border: 2px solid var(--color-secondary);
    border-radius: 15px;
    padding: 10px 20px;
    font-size: var(--font-size);
    font-weight: 400;
    transition: 0.5s ease;
}

.btn--secondary-inverse:hover {
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    background: var(--color-white);
    font-size: var(--font-size);
    text-decoration: none;
    transition: 0.5s ease;
}

.btn--text {
    display: inline-flex;
    align-items: center;
    gap: 1rem; /* optioneel: ruimte tussen tekst en pijl */
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

.btn--text::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.00016 0.583328V13.4167M7.00016 13.4167L13.4168 6.99999M7.00016 13.4167L0.583496 6.99999' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

/* =========================== Fancy Buttons (clip-path hover) =========================== */

.btn-fancy {
    -webkit-user-select: none;
    user-select: none;
    background-color: transparent;
    outline-style: none;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    display: inline-grid;
    position: relative;
    border: 1px solid var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: scale 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-fancy:active {
    scale: 0.955 0.925;
}

.btn-fancy__inner {
    grid-area: 1 / 1;
    place-items: center;
    width: 100%;
    height: 100%;
    display: grid;
}

.btn-fancy__default,
.btn-fancy__hover {
    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
    display: grid;
}

.btn-fancy__default-bg,
.btn-fancy__hover-bg {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    padding: 0;
}

.btn-fancy__default-inner,
.btn-fancy__hover-inner {
    width: 100%;
    height: 100%;
    padding: 16px 32px;
    grid-area: 1 / 1;
    justify-content: center;
    align-items: center;
    display: flex;
}

.btn-fancy__text {
    font-size: var(--font-size);
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}

.btn-fancy__subtext {
    display: block;
    font-size: 12px;
    font-weight: 300;
    text-transform: none;
}

.btn-fancy__hover {
    clip-path: polygon(100% 100%, 50% 100%, 100% 100%, 100% 50%);
    transition: clip-path 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .btn-fancy:is(:hover, :focus-visible) .btn-fancy__hover {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        transition: clip-path 0.55s 0.05s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* Primary: bg + border primary, hover valt terug op de body-achtergrondkleur */
.btn-fancy--primary .btn-fancy__default-bg {
    background-color: var(--color-primary);
}
.btn-fancy--primary .btn-fancy__default .btn-fancy__text {
    color: var(--color-white);
}
.btn-fancy--primary .btn-fancy__hover-bg {
    background-color: var(--color-near-black);
}
.btn-fancy--primary .btn-fancy__hover .btn-fancy__text {
    color: var(--color-primary);
}

/* Secondary: bg body-achtergrondkleur, border primary, hover wordt primary */
.btn-fancy--secondary .btn-fancy__default-bg {
    background-color: var(--color-near-black);
}
.btn-fancy--secondary .btn-fancy__default .btn-fancy__text {
    color: var(--color-primary);
}
.btn-fancy--secondary .btn-fancy__hover-bg {
    background-color: var(--color-primary);
}
.btn-fancy--secondary .btn-fancy__hover .btn-fancy__text {
    color: var(--color-white);
}


@media (max-width: 811px) {
    .grid--cols-2,
    .grid--cols-3,
    .grid--cols-4{
        grid-template-columns: 1fr;
    }

    .f--c{
        flex: 1 !important;
        max-width: 100% !important;
    }
    .p--m--0{
        padding:0;
    }
	
	.m--m--auto{
		margin: auto;
	}
	
	.m--m--0{
		margin: 0;
	}
	
    .py--m--5{
        padding-top:5%;
        padding-bottom:5%;
    }
    .pt--m--5{
        padding-top:5%;
    }
	
    .pb--m--5{
        padding-bottom:5%;
    }	
    .px--m--5{
        padding-left:5%;
        padding-right:5%;
    }
	.py--m--5{
        padding-top:5%;
        padding-bottom:5%;
    }

    .f--m--s{
        align-items: flex-start;
    }

    .py--m--4{padding-top:4px;padding-bottom:4px;}
    .py--m--8{padding-top:8px;padding-bottom:8px;}
    .py--m--16{padding-top:16px;padding-bottom:16px;}
    .py--m--32{padding-top:32px;padding-bottom:32px;}
    .py--m--64{padding-top:64px;padding-bottom:64px;}
    .py--m--128{padding-top:128px;padding-bottom:128px;}

    .sticky{
        position:relative;
    }
	
    .w--m--100 {
        width: 100%;
    }
	
	.w--m--80 {
        width: 80%;
    }
	
	.f--xxl{font-size: var(--font-size-h3)}
}