/*
 * utilities.css — equisan
 * Utility class systeem gebaseerd op Tailwind CSS conventies.
 * Classes gebruiken dubbele streepjes (--) als separator.
 *
 * BREAKPOINTS (desktop-first):
 *   t--  →  tablet  →  @media (max-width: 1024px)
 *   m--  →  mobiel  →  @media (max-width: 768px)
 *
 * INHOUD:
 *  1.  Reset & Base
 *  2.  Container & Layout-componenten
 *  3.  Display
 *  4.  Visibility
 *  5.  Overflow
 *  6.  Position
 *  7.  Inset
 *  8.  Z-index
 *  9.  Flexbox
 *  10. Grid
 *  11. Margin
 *  12. Padding
 *  13. Gap
 *  14. Width & Height
 *  15. Aspect Ratio
 *  16. Typografie — Lettertype, Grootte, Gewicht, Stijl
 *  17. Typografie — Line-height, Letter-spacing
 *  18. Typografie — Uitlijning, Transform, Decoratie, Wrap
 *  19. Kleuren — Tekst
 *  20. Kleuren — Achtergrond
 *  21. Kleuren — Border
 *  22. Border — Breedte & Stijl
 *  23. Border — Radius
 *  24. Schaduw
 *  25. Opacity
 *  26. Achtergrond — Grootte & Positie
 *  27. Transitions
 *  28. Transforms
 *  29. Cursor & Interactie
 *  30. Lijsten
 *  31. Diversen
 *  32. Screen Reader
 *  33. Parallax
 *  34. GSAP / Animatie helpers
 *  35. Responsive — Tablet (≤1024px)
 *  36. Responsive — Mobiel (≤768px)
 */


/* ============================================
   1. RESET & BASE
   ============================================ */

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

body {
    font-family: var(--font-primary);
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-weight:100;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p{
   margin:0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    margin: 0;
}

h1 {
    font-size: 120px;
    line-height: 1;
    font-weight: 100;
}

h2 {
    font-size: 98px;
    line-height: 1.05;
    font-weight: 100;
}

h3 {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 100;
}

h4 {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.01em;
}

h5 {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
}

h6 {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}


/* ============================================
   2. CONTAINER & LAYOUT-COMPONENTEN
   ============================================ */

.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);
}

/* Eenzijdige padding-left voor uitlijning op containerlijn */
.pl--container {
    padding-left: var(--spacing-x);
}

.pr--container {
    padding-right: var(--spacing-x);
}


/* ============================================
   3. DISPLAY
   ============================================ */

.block         { display: block; }
.inline--block { display: inline-block; }
.inline        { display: inline; }
.inline--flex  { display: inline-flex; }
.inline--grid  { display: inline-grid; }
.flex          { display: flex; }
.grid          { display: grid; }
.hidden        { display: none; }
.contents      { display: contents; }


/* ============================================
   4. VISIBILITY
   ============================================ */

.visible   { visibility: visible; }
.invisible { visibility: hidden; }


/* ============================================
   5. OVERFLOW
   ============================================ */

.overflow--auto    { overflow: auto; }
.overflow--hidden  { overflow: hidden; }
.overflow--visible { overflow: visible; }
.overflow--scroll  { overflow: scroll; }
.overflow--clip    { overflow: clip; }

.overflow-x--auto    { overflow-x: auto; }
.overflow-x--hidden  { overflow-x: hidden; }
.overflow-x--scroll  { overflow-x: scroll; }

.overflow-y--auto    { overflow-y: auto; }
.overflow-y--hidden  { overflow-y: hidden; }
.overflow-y--scroll  { overflow-y: scroll; }


/* ============================================
   6. POSITION
   ============================================ */

.static   { position: static; }
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }


/* ============================================
   7. INSET (top / right / bottom / left)
   ============================================ */

.inset--0  { inset: 0; }
.inset--4  { inset: 4px; }
.inset--8  { inset: 8px; }
.inset--16 { inset: 16px; }

.top--0   { top: 0; }
.top--4   { top: 4px; }
.top--8   { top: 8px; }
.top--12  { top: 12px; }
.top--16  { top: 16px; }
.top--20  { top: 20px; }
.top--24  { top: 24px; }
.top--32  { top: 32px; }
.top--40  { top: 40px; }
.top--48  { top: 48px; }
.top--64  { top: 64px; }
.top--80  { top: 80px; }
.top--96  { top: 96px; }
.top--128 { top: 128px; }
.top--auto { top: auto; }

.right--0   { right: 0; }
.right--4   { right: 4px; }
.right--8   { right: 8px; }
.right--12  { right: 12px; }
.right--16  { right: 16px; }
.right--24  { right: 24px; }
.right--32  { right: 32px; }
.right--48  { right: 48px; }
.right--64  { right: 64px; }
.right--auto { right: auto; }

.bottom--0   { bottom: 0; }
.bottom--4   { bottom: 4px; }
.bottom--8   { bottom: 8px; }
.bottom--12  { bottom: 12px; }
.bottom--16  { bottom: 16px; }
.bottom--24  { bottom: 24px; }
.bottom--32  { bottom: 32px; }
.bottom--48  { bottom: 48px; }
.bottom--64  { bottom: 64px; }
.bottom--auto { bottom: auto; }

.left--0   { left: 0; }
.left--4   { left: 4px; }
.left--8   { left: 8px; }
.left--12  { left: 12px; }
.left--16  { left: 16px; }
.left--24  { left: 24px; }
.left--32  { left: 32px; }
.left--48  { left: 48px; }
.left--64  { left: 64px; }
.left--auto { left: auto; }

.-top--4  { top: -4px; }
.-top--8  { top: -8px; }
.-top--16 { top: -16px; }
.-top--24 { top: -24px; }
.-top--32 { top: -32px; }

.-bottom--4  { bottom: -4px; }
.-bottom--8  { bottom: -8px; }
.-bottom--16 { bottom: -16px; }
.-bottom--24 { bottom: -24px; }
.-bottom--32 { bottom: -32px; }


/* ============================================
   8. Z-INDEX
   ============================================ */

.z--0    { z-index: 0; }
.z--10   { z-index: 10; }
.z--20   { z-index: 20; }
.z--30   { z-index: 30; }
.z--40   { z-index: 40; }
.z--50   { z-index: 50; }
.z--100  { z-index: 100; }
.z--auto { z-index: auto; }
.z--neg  { z-index: -1; }

/* Semantische z-index (via variabelen) */
.z--dropdown { z-index: var(--z-dropdown); }
.z--sticky   { z-index: var(--z-sticky); }
.z--fixed    { z-index: var(--z-fixed); }
.z--modal    { z-index: var(--z-modal); }
.z--tooltip  { z-index: var(--z-tooltip); }


/* ============================================
   9. FLEXBOX
   ============================================ */

/* Richting */
.flex--row         { flex-direction: row; }
.flex--row-reverse { flex-direction: row-reverse; }
.flex--col         { flex-direction: column; }
.flex--col-reverse { flex-direction: column-reverse; }

/* Wrap */
.flex--wrap         { flex-wrap: wrap; }
.flex--nowrap       { flex-wrap: nowrap; }
.flex--wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content */
.justify--start   { justify-content: flex-start; }
.justify--end     { justify-content: flex-end; }
.justify--center  { justify-content: center; }
.justify--between { justify-content: space-between; }
.justify--around  { justify-content: space-around; }
.justify--evenly  { justify-content: space-evenly; }

/* Align Items */
.items--start    { align-items: flex-start; }
.items--end      { align-items: flex-end; }
.items--center   { align-items: center; }
.items--baseline { align-items: baseline; }
.items--stretch  { align-items: stretch; }

/* Align Content */
.content--start   { align-content: flex-start; }
.content--end     { align-content: flex-end; }
.content--center  { align-content: center; }
.content--between { align-content: space-between; }
.content--around  { align-content: space-around; }
.content--evenly  { align-content: space-evenly; }

/* Align Self */
.self--auto     { align-self: auto; }
.self--start    { align-self: flex-start; }
.self--end      { align-self: flex-end; }
.self--center   { align-self: center; }
.self--stretch  { align-self: stretch; }
.self--baseline { align-self: baseline; }

/* Flex Grow & Shrink */
.flex--1       { flex: 1 1 0%; }
.flex--auto    { flex: 1 1 auto; }
.flex--initial { flex: 0 1 auto; }
.flex--none    { flex: none; }
.grow          { flex-grow: 1; }
.grow--0       { flex-grow: 0; }
.shrink        { flex-shrink: 1; }
.shrink--0     { flex-shrink: 0; }

/* Flex Basis */
.basis--auto  { flex-basis: auto; }
.basis--full  { flex-basis: 100%; }
.basis--1-2   { flex-basis: 50%; }
.basis--1-3   { flex-basis: 33.333%; }
.basis--2-3   { flex-basis: 66.666%; }
.basis--1-4   { flex-basis: 25%; }
.basis--3-4   { flex-basis: 75%; }
.basis--1-5   { flex-basis: 20%; }
.basis--2-5   { flex-basis: 40%; }
.basis--3-5   { flex-basis: 60%; }
.basis--4-5   { flex-basis: 80%; }

/* Order */
.order--first { order: -9999; }
.order--last  { order: 9999; }
.order--none  { order: 0; }
.order--1     { order: 1; }
.order--2     { order: 2; }
.order--3     { order: 3; }
.order--4     { order: 4; }
.order--5     { order: 5; }
.order--6     { order: 6; }


/* ============================================
   10. GRID
   ============================================ */

/* Template Columns */
.grid--cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid--cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid--cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid--cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid--cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid--cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid--cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid--cols-none { grid-template-columns: none; }

/* Template Rows */
.grid--rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid--rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid--rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid--rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid--rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid--rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid--rows-none { grid-template-rows: none; }

/* Column Span */
.col--span-1   { grid-column: span 1 / span 1; }
.col--span-2   { grid-column: span 2 / span 2; }
.col--span-3   { grid-column: span 3 / span 3; }
.col--span-4   { grid-column: span 4 / span 4; }
.col--span-5   { grid-column: span 5 / span 5; }
.col--span-6   { grid-column: span 6 / span 6; }
.col--span-7   { grid-column: span 7 / span 7; }
.col--span-8   { grid-column: span 8 / span 8; }
.col--span-9   { grid-column: span 9 / span 9; }
.col--span-10  { grid-column: span 10 / span 10; }
.col--span-11  { grid-column: span 11 / span 11; }
.col--span-12  { grid-column: span 12 / span 12; }
.col--span-full { grid-column: 1 / -1; }

/* Row Span */
.row--span-1    { grid-row: span 1 / span 1; }
.row--span-2    { grid-row: span 2 / span 2; }
.row--span-3    { grid-row: span 3 / span 3; }
.row--span-4    { grid-row: span 4 / span 4; }
.row--span-5    { grid-row: span 5 / span 5; }
.row--span-6    { grid-row: span 6 / span 6; }
.row--span-full { grid-row: 1 / -1; }

/* Grid Auto Flow */
.grid--flow-row    { grid-auto-flow: row; }
.grid--flow-col    { grid-auto-flow: column; }
.grid--flow-dense  { grid-auto-flow: dense; }

/* Justify & Align Items (grid) */
.grid--items-start   { place-items: start; }
.grid--items-end     { place-items: end; }
.grid--items-center  { place-items: center; }
.grid--items-stretch { place-items: stretch; }


/* ============================================
   11. MARGIN
   ============================================ */

.m--0   { margin: 0; }
.m--4   { margin: 4px; }
.m--8   { margin: 8px; }
.m--12  { margin: 12px; }
.m--16  { margin: 16px; }
.m--20  { margin: 20px; }
.m--24  { margin: 24px; }
.m--32  { margin: 32px; }
.m--40  { margin: 40px; }
.m--48  { margin: 48px; }
.m--56  { margin: 56px; }
.m--64  { margin: 64px; }
.m--80  { margin: 80px; }
.m--96  { margin: 96px; }
.m--112 { margin: 112px; }
.m--128 { margin: 128px; }
.m--160 { margin: 160px; }
.m--192 { margin: 192px; }
.m--224 { margin: 224px; }
.m--256 { margin: 256px; }
.m--auto { margin: auto; }

.mt--0   { margin-top: 0; }
.mt--4   { margin-top: 4px; }
.mt--8   { margin-top: 8px; }
.mt--12  { margin-top: 12px; }
.mt--16  { margin-top: 16px; }
.mt--20  { margin-top: 20px; }
.mt--24  { margin-top: 24px; }
.mt--32  { margin-top: 32px; }
.mt--40  { margin-top: 40px; }
.mt--48  { margin-top: 48px; }
.mt--56  { margin-top: 56px; }
.mt--64  { margin-top: 64px; }
.mt--80  { margin-top: 80px; }
.mt--96  { margin-top: 96px; }
.mt--112 { margin-top: 112px; }
.mt--128 { margin-top: 128px; }
.mt--160 { margin-top: 160px; }
.mt--192 { margin-top: 192px; }
.mt--224 { margin-top: 224px; }
.mt--256 { margin-top: 256px; }
.mt--auto { margin-top: auto; }

.-mt--4  { margin-top: -4px; }
.-mt--8  { margin-top: -8px; }
.-mt--12 { margin-top: -12px; }
.-mt--16 { margin-top: -16px; }
.-mt--24 { margin-top: -24px; }
.-mt--32 { margin-top: -32px; }
.-mt--48 { margin-top: -48px; }
.-mt--56 { margin-top: -56px; }
.-mt--64 { margin-top: -64px; }

.mr--0   { margin-right: 0; }
.mr--4   { margin-right: 4px; }
.mr--8   { margin-right: 8px; }
.mr--12  { margin-right: 12px; }
.mr--16  { margin-right: 16px; }
.mr--20  { margin-right: 20px; }
.mr--24  { margin-right: 24px; }
.mr--32  { margin-right: 32px; }
.mr--40  { margin-right: 40px; }
.mr--48  { margin-right: 48px; }
.mr--64  { margin-right: 64px; }
.mr--96  { margin-right: 96px; }
.mr--128 { margin-right: 128px; }
.mr--auto { margin-right: auto; }

.mb--0   { margin-bottom: 0; }
.mb--4   { margin-bottom: 4px; }
.mb--8   { margin-bottom: 8px; }
.mb--12  { margin-bottom: 12px; }
.mb--16  { margin-bottom: 16px; }
.mb--20  { margin-bottom: 20px; }
.mb--24  { margin-bottom: 24px; }
.mb--32  { margin-bottom: 32px; }
.mb--40  { margin-bottom: 40px; }
.mb--48  { margin-bottom: 48px; }
.mb--56  { margin-bottom: 56px; }
.mb--64  { margin-bottom: 64px; }
.mb--80  { margin-bottom: 80px; }
.mb--96  { margin-bottom: 96px; }
.mb--112 { margin-bottom: 112px; }
.mb--128 { margin-bottom: 128px; }
.mb--160 { margin-bottom: 160px; }
.mb--192 { margin-bottom: 192px; }
.mb--224 { margin-bottom: 224px; }
.mb--256 { margin-bottom: 256px; }
.mb--auto { margin-bottom: auto; }

.-mb--4  { margin-bottom: -4px; }
.-mb--8  { margin-bottom: -8px; }
.-mb--16 { margin-bottom: -16px; }
.-mb--24 { margin-bottom: -24px; }
.-mb--32 { margin-bottom: -32px; }
.-mb--48 { margin-bottom: -48px; }

.ml--0   { margin-left: 0; }
.ml--4   { margin-left: 4px; }
.ml--8   { margin-left: 8px; }
.ml--12  { margin-left: 12px; }
.ml--16  { margin-left: 16px; }
.ml--20  { margin-left: 20px; }
.ml--24  { margin-left: 24px; }
.ml--32  { margin-left: 32px; }
.ml--40  { margin-left: 40px; }
.ml--48  { margin-left: 48px; }
.ml--64  { margin-left: 64px; }
.ml--96  { margin-left: 96px; }
.ml--128 { margin-left: 128px; }
.ml--auto { margin-left: auto; }

.mx--0    { margin-inline: 0; }
.mx--4    { margin-inline: 4px; }
.mx--8    { margin-inline: 8px; }
.mx--12   { margin-inline: 12px; }
.mx--16   { margin-inline: 16px; }
.mx--20   { margin-inline: 20px; }
.mx--24   { margin-inline: 24px; }
.mx--32   { margin-inline: 32px; }
.mx--40   { margin-inline: 40px; }
.mx--48   { margin-inline: 48px; }
.mx--64   { margin-inline: 64px; }
.mx--96   { margin-inline: 96px; }
.mx--128  { margin-inline: 128px; }
.mx--auto { margin-inline: auto; }

.my--0   { margin-block: 0; }
.my--4   { margin-block: 4px; }
.my--8   { margin-block: 8px; }
.my--12  { margin-block: 12px; }
.my--16  { margin-block: 16px; }
.my--20  { margin-block: 20px; }
.my--24  { margin-block: 24px; }
.my--32  { margin-block: 32px; }
.my--40  { margin-block: 40px; }
.my--48  { margin-block: 48px; }
.my--64  { margin-block: 64px; }
.my--96  { margin-block: 96px; }
.my--128 { margin-block: 128px; }
.my--auto { margin-block: auto; }


/* ============================================
   12. PADDING
   ============================================ */

.p--0   { padding: 0; }
.p--4   { padding: 4px; }
.p--8   { padding: 8px; }
.p--12  { padding: 12px; }
.p--16  { padding: 16px; }
.p--20  { padding: 20px; }
.p--24  { padding: 24px; }
.p--32  { padding: 32px; }
.p--40  { padding: 40px; }
.p--48  { padding: 48px; }
.p--56  { padding: 56px; }
.p--64  { padding: 64px; }
.p--80  { padding: 80px; }
.p--96  { padding: 96px; }
.p--112 { padding: 112px; }
.p--128 { padding: 128px; }
.p--160 { padding: 160px; }
.p--192 { padding: 192px; }
.p--224 { padding: 224px; }
.p--256 { padding: 256px; }

.pt--0   { padding-top: 0; }
.pt--4   { padding-top: 4px; }
.pt--8   { padding-top: 8px; }
.pt--12  { padding-top: 12px; }
.pt--16  { padding-top: 16px; }
.pt--20  { padding-top: 20px; }
.pt--24  { padding-top: 24px; }
.pt--32  { padding-top: 32px; }
.pt--40  { padding-top: 40px; }
.pt--48  { padding-top: 48px; }
.pt--56  { padding-top: 56px; }
.pt--64  { padding-top: 64px; }
.pt--80  { padding-top: 80px; }
.pt--96  { padding-top: 96px; }
.pt--112 { padding-top: 112px; }
.pt--128 { padding-top: 128px; }
.pt--160 { padding-top: 160px; }
.pt--192 { padding-top: 192px; }
.pt--224 { padding-top: 224px; }
.pt--256 { padding-top: 256px; }

.pr--0   { padding-right: 0; }
.pr--4   { padding-right: 4px; }
.pr--8   { padding-right: 8px; }
.pr--12  { padding-right: 12px; }
.pr--16  { padding-right: 16px; }
.pr--20  { padding-right: 20px; }
.pr--24  { padding-right: 24px; }
.pr--32  { padding-right: 32px; }
.pr--40  { padding-right: 40px; }
.pr--48  { padding-right: 48px; }
.pr--56  { padding-right: 56px; }
.pr--64  { padding-right: 64px; }
.pr--80  { padding-right: 80px; }
.pr--96  { padding-right: 96px; }
.pr--128 { padding-right: 128px; }
.pr--160 { padding-right: 160px; }
.pr--256 { padding-right: 256px; }

.pb--0   { padding-bottom: 0; }
.pb--4   { padding-bottom: 4px; }
.pb--8   { padding-bottom: 8px; }
.pb--12  { padding-bottom: 12px; }
.pb--16  { padding-bottom: 16px; }
.pb--20  { padding-bottom: 20px; }
.pb--24  { padding-bottom: 24px; }
.pb--32  { padding-bottom: 32px; }
.pb--40  { padding-bottom: 40px; }
.pb--48  { padding-bottom: 48px; }
.pb--56  { padding-bottom: 56px; }
.pb--64  { padding-bottom: 64px; }
.pb--80  { padding-bottom: 80px; }
.pb--96  { padding-bottom: 96px; }
.pb--112 { padding-bottom: 112px; }
.pb--128 { padding-bottom: 128px; }
.pb--160 { padding-bottom: 160px; }
.pb--192 { padding-bottom: 192px; }
.pb--224 { padding-bottom: 224px; }
.pb--256 { padding-bottom: 256px; }

.pl--0   { padding-left: 0; }
.pl--4   { padding-left: 4px; }
.pl--8   { padding-left: 8px; }
.pl--12  { padding-left: 12px; }
.pl--16  { padding-left: 16px; }
.pl--20  { padding-left: 20px; }
.pl--24  { padding-left: 24px; }
.pl--32  { padding-left: 32px; }
.pl--40  { padding-left: 40px; }
.pl--48  { padding-left: 48px; }
.pl--56  { padding-left: 56px; }
.pl--64  { padding-left: 64px; }
.pl--80  { padding-left: 80px; }
.pl--96  { padding-left: 96px; }
.pl--128 { padding-left: 128px; }
.pl--160 { padding-left: 160px; }
.pl--256 { padding-left: 256px; }

.px--0   { padding-inline: 0; }
.px--4   { padding-inline: 4px; }
.px--8   { padding-inline: 8px; }
.px--12  { padding-inline: 12px; }
.px--16  { padding-inline: 16px; }
.px--20  { padding-inline: 20px; }
.px--24  { padding-inline: 24px; }
.px--32  { padding-inline: 32px; }
.px--40  { padding-inline: 40px; }
.px--48  { padding-inline: 48px; }
.px--56  { padding-inline: 56px; }
.px--64  { padding-inline: 64px; }
.px--80  { padding-inline: 80px; }
.px--96  { padding-inline: 96px; }
.px--128 { padding-inline: 128px; }
.px--160 { padding-inline: 160px; }
.px--256 { padding-inline: 256px; }

.py--0   { padding-block: 0; }
.py--4   { padding-block: 4px; }
.py--8   { padding-block: 8px; }
.py--12  { padding-block: 12px; }
.py--16  { padding-block: 16px; }
.py--20  { padding-block: 20px; }
.py--24  { padding-block: 24px; }
.py--32  { padding-block: 32px; }
.py--40  { padding-block: 40px; }
.py--48  { padding-block: 48px; }
.py--56  { padding-block: 56px; }
.py--64  { padding-block: 64px; }
.py--80  { padding-block: 80px; }
.py--96  { padding-block: 96px; }
.py--112 { padding-block: 112px; }
.py--128 { padding-block: 128px; }
.py--160 { padding-block: 160px; }
.py--192 { padding-block: 192px; }
.py--224 { padding-block: 224px; }
.py--256 { padding-block: 256px; }


/* ============================================
   13. GAP
   ============================================ */

.gap--0   { gap: 0; }
.gap--4   { gap: 4px; }
.gap--8   { gap: 8px; }
.gap--12  { gap: 12px; }
.gap--16  { gap: 16px; }
.gap--20  { gap: 20px; }
.gap--24  { gap: 24px; }
.gap--32  { gap: 32px; }
.gap--40  { gap: 40px; }
.gap--48  { gap: 48px; }
.gap--56  { gap: 56px; }
.gap--64  { gap: 64px; }
.gap--80  { gap: 80px; }
.gap--96  { gap: 96px; }
.gap--112 { gap: 112px; }
.gap--128 { gap: 128px; }
.gap--160 { gap: 160px; }

.gap-x--0   { column-gap: 0; }
.gap-x--4   { column-gap: 4px; }
.gap-x--8   { column-gap: 8px; }
.gap-x--12  { column-gap: 12px; }
.gap-x--16  { column-gap: 16px; }
.gap-x--20  { column-gap: 20px; }
.gap-x--24  { column-gap: 24px; }
.gap-x--32  { column-gap: 32px; }
.gap-x--40  { column-gap: 40px; }
.gap-x--48  { column-gap: 48px; }
.gap-x--64  { column-gap: 64px; }
.gap-x--96  { column-gap: 96px; }
.gap-x--128 { column-gap: 128px; }

.gap-y--0   { row-gap: 0; }
.gap-y--4   { row-gap: 4px; }
.gap-y--8   { row-gap: 8px; }
.gap-y--12  { row-gap: 12px; }
.gap-y--16  { row-gap: 16px; }
.gap-y--20  { row-gap: 20px; }
.gap-y--24  { row-gap: 24px; }
.gap-y--32  { row-gap: 32px; }
.gap-y--40  { row-gap: 40px; }
.gap-y--48  { row-gap: 48px; }
.gap-y--64  { row-gap: 64px; }
.gap-y--96  { row-gap: 96px; }
.gap-y--128 { row-gap: 128px; }


/* ============================================
   14. WIDTH & HEIGHT
   ============================================ */

/* Vaste breedte (px) */
.w--4   { width: 4px; }
.w--8   { width: 8px; }
.w--12  { width: 12px; }
.w--16  { width: 16px; }
.w--20  { width: 20px; }
.w--24  { width: 24px; }
.w--32  { width: 32px; }
.w--40  { width: 40px; }
.w--48  { width: 48px; }
.w--56  { width: 56px; }
.w--64  { width: 64px; }
.w--80  { width: 80px; }
.w--96  { width: 96px; }
.w--112 { width: 112px; }
.w--128 { width: 128px; }
.w--160 { width: 160px; }
.w--192 { width: 192px; }
.w--224 { width: 224px; }
.w--256 { width: 256px; }
.w--320 { width: 320px; }
.w--384 { width: 384px; }

/* Procentuele breedte (fracties) */
.w--full  { width: 100%; }
.w--1-2   { width: 50%; }
.w--1-3   { width: 33.333%; }
.w--2-3   { width: 66.666%; }
.w--1-4   { width: 25%; }
.w--3-4   { width: 75%; }
.w--1-5   { width: 20%; }
.w--2-5   { width: 40%; }
.w--3-5   { width: 60%; }
.w--4-5   { width: 80%; }
.w--45    { width: 45%; }
.w--50    { width: 50%; }
.w--55    { width: 55%; }

/* Speciale breedte */
.w--screen { width: 100vw; }
.w--auto   { width: auto; }
.w--min    { width: min-content; }
.w--max    { width: max-content; }
.w--fit    { width: fit-content; }

/* Min-width */
.min-w--0      { min-width: 0; }
.min-w--full   { min-width: 100%; }
.min-w--screen { min-width: 100vw; }
.min-w--min    { min-width: min-content; }
.min-w--max    { min-width: max-content; }

/* Max-width */
.max-w--none { max-width: none; }
.max-w--full { max-width: 100%; }
.max-w--256  { max-width: 256px; }
.max-w--384  { max-width: 384px; }
.max-w--512  { max-width: 512px; }
.max-w--640  { max-width: 640px; }
.max-w--768  { max-width: 768px; }
.max-w--960  { max-width: 960px; }
.max-w--1024 { max-width: 1024px; }
.max-w--1280 { max-width: 1280px; }
.max-w--1536 { max-width: 1536px; }

/* Vaste hoogte (px) */
.h--4   { height: 4px; }
.h--8   { height: 8px; }
.h--12  { height: 12px; }
.h--16  { height: 16px; }
.h--20  { height: 20px; }
.h--24  { height: 24px; }
.h--32  { height: 32px; }
.h--40  { height: 40px; }
.h--48  { height: 48px; }
.h--56  { height: 56px; }
.h--64  { height: 64px; }
.h--80  { height: 80px; }
.h--96  { height: 96px; }
.h--112 { height: 112px; }
.h--128 { height: 128px; }
.h--160 { height: 160px; }
.h--192 { height: 192px; }
.h--200 { height: 200px; }
.h--224 { height: 224px; }
.h--256 { height: 256px; }
.h--320 { height: 320px; }
.h--384 { height: 384px; }
.h--400 { height: 400px; }
.h--480 { height: 480px; }
.h--512 { height: 512px; }

/* Viewport hoogte */
.h--screen          { height: 100vh; }
.h--screen--header  { height: calc(100vh - var(--header-height)); }
.h--25vh { height: 25vh; }
.h--33vh { height: 33vh; }
.h--40vh { height: 40vh; }
.h--50vh { height: 50vh; }
.h--60vh { height: 60vh; }
.h--70vh { height: 70vh; }
.h--75vh { height: 75vh; }
.h--80vh { height: 80vh; }

/* Speciale hoogte */
.h--full { height: 100%; }
.h--auto { height: auto; }
.h--min  { height: min-content; }
.h--max  { height: max-content; }
.h--fit  { height: fit-content; }

/* Min-height */
.min-h--0      { min-height: 0; }
.min-h--full   { min-height: 100%; }
.min-h--screen { min-height: 100vh; }

/* Max-height */
.max-h--none   { max-height: none; }
.max-h--full   { max-height: 100%; }
.max-h--screen { max-height: 100vh; }
.max-h--128    { max-height: 128px; }
.max-h--256    { max-height: 256px; }
.max-h--512    { max-height: 512px; }


/* ============================================
   15. ASPECT RATIO
   ============================================ */

.aspect--auto   { aspect-ratio: auto; }
.aspect--square { aspect-ratio: 1 / 1; }
.aspect--video  { aspect-ratio: 16 / 9; }
.aspect--4-3    { aspect-ratio: 4 / 3; }
.aspect--3-2    { aspect-ratio: 3 / 2; }
.aspect--2-3    { aspect-ratio: 2 / 3; }
.aspect--2-1    { aspect-ratio: 2 / 1; }


/* ============================================
   16. TYPOGRAFIE — Lettertype, Grootte, Gewicht, Stijl
   ============================================ */

/* Letterfamilie */
.font--primary { font-family: var(--font-primary); }
.font--heading { font-family: var(--font-heading); }
.font--accent  { font-family: var(--font-accent); }
.font--mono    { font-family: var(--font-mono); }

/* Lettergrootte — px */
.text--10  { font-size: 10px; }
.text--11  { font-size: 11px; }
.text--12  { font-size: 12px; }
.text--13  { font-size: 13px; }
.text--14  { font-size: 14px; }
.text--15  { font-size: 15px; }
.text--16  { font-size: 16px; }
.text--17  { font-size: 17px; }
.text--18  { font-size: 18px; }
.text--20  { font-size: 20px; }
.text--22  { font-size: 22px; }
.text--24  { font-size: 24px; }
.text--28  { font-size: 28px; }
.text--32  { font-size: 32px; }
.text--36  { font-size: 36px; }
.text--40  { font-size: 40px; }
.text--48  { font-size: 48px; }
.text--56  { font-size: 56px; }
.text--64  { font-size: 64px; }
.text--72  { font-size: 72px; }
.text--80  { font-size: 80px; }
.text--96  { font-size: 96px; }
.text--112 { font-size: 112px; }
.text--128 { font-size: 128px; }

/* Lettergrootte — semantisch (Tailwind-namen) */
.text--xs   { font-size: 12px; }
.text--sm   { font-size: 14px; }
.text--base { font-size: 16px; }
.text--lg   { font-size: 18px; }
.text--xl   { font-size: 20px; }
.text--2xl  { font-size: 24px; }
.text--3xl  { font-size: 30px; }
.text--4xl  { font-size: 36px; }
.text--5xl  { font-size: 48px; }
.text--6xl  { font-size: 60px; }
.text--7xl  { font-size: 72px; }
.text--8xl  { font-size: 96px; }
.text--9xl  { font-size: 128px; }

/* Lettergrootte — vloeiend (clamp) */
.text--fluid-xs   { font-size: clamp(12px, 1.5vw, 14px); }
.text--fluid-sm   { font-size: clamp(14px, 2vw, 16px); }
.text--fluid-base { font-size: clamp(16px, 2vw, 18px); }
.text--fluid-lg   { font-size: clamp(18px, 2.5vw, 24px); }
.text--fluid-xl   { font-size: clamp(22px, 3vw, 32px); }
.text--fluid-2xl  { font-size: clamp(28px, 4vw, 48px); }
.text--fluid-3xl  { font-size: clamp(36px, 5vw, 64px); }
.text--fluid-4xl  { font-size: clamp(48px, 7vw, 96px); }

/* Lettergewicht */
.font--100 { font-weight: 100; }
.font--200 { font-weight: 200; }
.font--300 { font-weight: 300; }
.font--400 { font-weight: 400; }
.font--500 { font-weight: 500; }
.font--600 { font-weight: 600; }
.font--700 { font-weight: 700; }
.font--800 { font-weight: 800; }
.font--900 { font-weight: 900; }

/* Tailwind-namen voor gewicht */
.font--thin       { font-weight: 100; }
.font--extralight { font-weight: 200; }
.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--extrabold  { font-weight: 800; }
.font--black      { font-weight: 900; }

/* Lettersijl */
.italic     { font-style: italic; }
.not-italic { font-style: normal; }


/* ============================================
   17. TYPOGRAFIE — Line-height, Letter-spacing
   ============================================ */

/* Line-height — unitless (aanbevolen) */
.leading--none    { line-height: 1; }
.leading--tight   { line-height: 1.25; }
.leading--snug    { line-height: 1.375; }
.leading--normal  { line-height: 1.5; }
.leading--relaxed { line-height: 1.625; }
.leading--loose   { line-height: 2; }

/* Line-height — px (voor display titels) */
.leading--16  { line-height: 16px; }
.leading--20  { line-height: 20px; }
.leading--24  { line-height: 24px; }
.leading--28  { line-height: 28px; }
.leading--32  { line-height: 32px; }
.leading--40  { line-height: 40px; }
.leading--48  { line-height: 48px; }
.leading--56  { line-height: 56px; }
.leading--64  { line-height: 64px; }
.leading--72  { line-height: 72px; }
.leading--80  { line-height: 80px; }
.leading--96  { line-height: 96px; }
.leading--112 { line-height: 112px; }
.leading--128 { line-height: 128px; }

/* Letter-spacing */
.tracking--tighter { letter-spacing: -0.05em; }
.tracking--tight   { letter-spacing: -0.025em; }
.tracking--normal  { letter-spacing: 0; }
.tracking--wide    { letter-spacing: 0.025em; }
.tracking--wider   { letter-spacing: 0.05em; }
.tracking--widest  { letter-spacing: 0.1em; }
.tracking--ultra   { letter-spacing: 0.15em; }


/* ============================================
   18. TYPOGRAFIE — Uitlijning, Transform, Decoratie, Wrap
   ============================================ */

/* Tekstuitlijning */
.text--left    { text-align: left; }
.text--center  { text-align: center; }
.text--right   { text-align: right; }
.text--justify { text-align: justify; }

/* Teksttransformatie */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Tekstdecoratie */
.underline      { text-decoration-line: underline; }
.overline       { text-decoration-line: overline; }
.line-through   { text-decoration-line: line-through; }
.no--underline  { text-decoration: none; }

/* Tekstafkapping */
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text--ellipsis { text-overflow: ellipsis; }
.text--clip     { text-overflow: clip; }

/* Witruimte */
.whitespace--normal   { white-space: normal; }
.whitespace--nowrap   { white-space: nowrap; }
.whitespace--pre      { white-space: pre; }
.whitespace--pre-wrap { white-space: pre-wrap; }
.whitespace--pre-line { white-space: pre-line; }

/* Woordbreuk */
.break--normal { overflow-wrap: normal; word-break: normal; }
.break--words  { overflow-wrap: break-word; }
.break--all    { word-break: break-all; }
.break--keep   { word-break: keep-all; }


/* ============================================
   19. KLEUREN — TEKST
   ============================================ */

.text--primary      { color: var(--color-primary); }
.text--primary-dark { color: var(--color-primary-dark); }
.text--on-primary   { color: var(--color-on-primary); }
.text--secondary  { color: var(--color-secondary); }
.text--accent     { color: var(--color-accent); }
.text--light      { color: var(--color-light); }
.text--muted      { color: var(--color-text-muted); }
.text--error      { color: var(--color-error); }
.text--success    { color: var(--color-success); }
.text--warning    { color: var(--color-warning); }
.text--info       { color: var(--color-info); }
.text--white      { color: var(--color-white); }
.text--black      { color: var(--color-black); }
.text--inherit    { color: inherit; }
.text--current    { color: currentColor; }
.text--transparent { color: transparent; }


/* ============================================
   20. KLEUREN — ACHTERGROND
   ============================================ */

.bg--primary      { background-color: var(--color-primary); }
.bg--primary-dark { background-color: var(--color-primary-dark); }
.bg--secondary    { background-color: var(--color-secondary); }
.bg--accent       { background-color: var(--color-accent); }
.bg--light        { background-color: var(--color-light); }
.bg--gray         { background-color: var(--color-bg-gray); }
.bg--error        { background-color: var(--color-error); }
.bg--success      { background-color: var(--color-success); }
.bg--warning      { background-color: var(--color-warning); }
.bg--info         { background-color: var(--color-info); }
.bg--white        { background-color: var(--color-white); }
.bg--black        { background-color: var(--color-black); }
.bg--dark         { background-color: var(--color-dark); }
.bg--transparent  { background-color: transparent; }
.bg--inherit      { background-color: inherit; }


/* ============================================
   21. KLEUREN — BORDER
   ============================================ */

.border--primary      { border-color: var(--color-primary);      border-style: solid; }
.border--primary-dark { border-color: var(--color-primary-dark); border-style: solid; }
.border--secondary    { border-color: var(--color-secondary);    border-style: solid; }
.border--accent       { border-color: var(--color-accent);       border-style: solid; }
.border--default      { border-color: var(--color-border);       border-style: solid; }
.border--error        { border-color: var(--color-error);        border-style: solid; }
.border--success      { border-color: var(--color-success);      border-style: solid; }
.border--warning      { border-color: var(--color-warning);      border-style: solid; }
.border--info         { border-color: var(--color-info);         border-style: solid; }
.border--white        { border-color: var(--color-white);        border-style: solid; }
.border--black        { border-color: var(--color-black);        border-style: solid; }
.border--transparent  { border-color: transparent;               border-style: solid; }


/* ============================================
   22. BORDER — BREEDTE & STIJL
   ============================================ */

.border--0 { border: 0; }
.border--1 { border: 1px solid; }
.border--2 { border: 2px solid; }
.border--4 { border: 4px solid; }
.border--8 { border: 8px solid; }

.border-t--0 { border-top: 0; }
.border-t--1 { border-top: 1px solid; }
.border-t--2 { border-top: 2px solid; }
.border-t--4 { border-top: 4px solid; }

.border-r--0 { border-right: 0; }
.border-r--1 { border-right: 1px solid; }
.border-r--2 { border-right: 2px solid; }
.border-r--4 { border-right: 4px solid; }

.border-b--0 { border-bottom: 0; }
.border-b--1 { border-bottom: 1px solid rgba(113,74,58,.2); }
.border-b--2 { border-bottom: 2px solid; }
.border-b--4 { border-bottom: 4px solid; }

.border-l--0 { border-left: 0; }
.border-l--1 { border-left: 1px solid; }
.border-l--2 { border-left: 2px solid; }
.border-l--4 { border-left: 4px solid; }

.border-x--0 { border-left: 0; border-right: 0; }
.border-x--1 { border-left: 1px solid; border-right: 1px solid; }
.border-x--2 { border-left: 2px solid; border-right: 2px solid; }

.border-y--0 { border-top: 0; border-bottom: 0; }
.border-y--1 { border-top: 1px solid; border-bottom: 1px solid; }
.border-y--2 { border-top: 2px solid; border-bottom: 2px solid; }

.border--solid  { border-style: solid; }
.border--dashed { border-style: dashed; }
.border--dotted { border-style: dotted; }
.border--none   { border-style: none; }


/* ============================================
   23. BORDER — RADIUS
   ============================================ */

/* Semantisch (via variabelen) */
.rounded--none  { border-radius: 0; }
.rounded--sm    { border-radius: var(--radius-sm); }
.rounded        { border-radius: var(--radius); }
.rounded--md    { border-radius: var(--radius-md); }
.rounded--lg    { border-radius: var(--radius-lg); }
.rounded--xl    { border-radius: var(--radius-xl); }
.rounded--2xl   { border-radius: var(--radius-2xl); }
.rounded--full  { border-radius: var(--radius-full); }

/* Exact px */
.rounded--4  { border-radius: 4px; }
.rounded--8  { border-radius: 8px; }
.rounded--12 { border-radius: 12px; }
.rounded--16 { border-radius: 16px; }
.rounded--20 { border-radius: 20px; }
.rounded--24 { border-radius: 24px; }
.rounded--32 { border-radius: 32px; }
.rounded--48 { border-radius: 48px; }
.rounded--64 { border-radius: 64px; }

/* Per hoek */
.rounded-t--0   { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-t--4   { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.rounded-t--8   { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.rounded-t--16  { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.rounded-t--24  { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.rounded-t--full { border-top-left-radius: var(--radius-full); border-top-right-radius: var(--radius-full); }

.rounded-b--0   { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-b--4   { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.rounded-b--8   { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.rounded-b--16  { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.rounded-b--24  { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.rounded-b--full { border-bottom-left-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); }

.rounded-l--0   { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-l--8   { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.rounded-l--16  { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.rounded-l--full { border-top-left-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); }

.rounded-r--0   { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-r--8   { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.rounded-r--16  { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.rounded-r--full { border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); }

.rounded-tl--0   { border-top-left-radius: 0; }
.rounded-tl--4   { border-top-left-radius: 4px; }
.rounded-tl--8   { border-top-left-radius: 8px; }
.rounded-tl--16  { border-top-left-radius: 16px; }
.rounded-tl--24  { border-top-left-radius: 24px; }
.rounded-tl--full { border-top-left-radius: var(--radius-full); }

.rounded-tr--0   { border-top-right-radius: 0; }
.rounded-tr--4   { border-top-right-radius: 4px; }
.rounded-tr--8   { border-top-right-radius: 8px; }
.rounded-tr--16  { border-top-right-radius: 16px; }
.rounded-tr--24  { border-top-right-radius: 24px; }
.rounded-tr--full { border-top-right-radius: var(--radius-full); }

.rounded-br--0   { border-bottom-right-radius: 0; }
.rounded-br--4   { border-bottom-right-radius: 4px; }
.rounded-br--8   { border-bottom-right-radius: 8px; }
.rounded-br--16  { border-bottom-right-radius: 16px; }
.rounded-br--24  { border-bottom-right-radius: 24px; }
.rounded-br--full { border-bottom-right-radius: var(--radius-full); }

.rounded-bl--0   { border-bottom-left-radius: 0; }
.rounded-bl--4   { border-bottom-left-radius: 4px; }
.rounded-bl--8   { border-bottom-left-radius: 8px; }
.rounded-bl--16  { border-bottom-left-radius: 16px; }
.rounded-bl--24  { border-bottom-left-radius: 24px; }
.rounded-bl--full { border-bottom-left-radius: var(--radius-full); }


/* ============================================
   24. SCHADUW
   ============================================ */

.shadow--none { box-shadow: none; }
.shadow--sm   { box-shadow: var(--shadow-sm); }
.shadow--md   { box-shadow: var(--shadow-md); }
.shadow--lg   { box-shadow: var(--shadow-lg); }
.shadow--xl   { box-shadow: var(--shadow-xl); }


/* ============================================
   25. OPACITY
   ============================================ */

.opacity--0   { opacity: 0; }
.opacity--5   { opacity: 0.05; }
.opacity--10  { opacity: 0.1; }
.opacity--20  { opacity: 0.2; }
.opacity--25  { opacity: 0.25; }
.opacity--30  { opacity: 0.3; }
.opacity--40  { opacity: 0.4; }
.opacity--50  { opacity: 0.5; }
.opacity--60  { opacity: 0.6; }
.opacity--70  { opacity: 0.7; }
.opacity--75  { opacity: 0.75; }
.opacity--80  { opacity: 0.8; }
.opacity--90  { opacity: 0.9; }
.opacity--95  { opacity: 0.95; }
.opacity--100 { opacity: 1; }


/* ============================================
   26. ACHTERGROND — Grootte & Positie
   ============================================ */

.bg--cover    { background-size: cover; }
.bg--contain  { background-size: contain; }
.bg--auto     { background-size: auto; }

.bg--center      { background-position: center; }
.bg--top         { background-position: top; }
.bg--bottom      { background-position: bottom; }
.bg--left        { background-position: left; }
.bg--right       { background-position: right; }
.bg--left-top    { background-position: left top; }
.bg--right-top   { background-position: right top; }
.bg--left-bottom { background-position: left bottom; }

.bg--no-repeat { background-repeat: no-repeat; }
.bg--repeat    { background-repeat: repeat; }
.bg--repeat-x  { background-repeat: repeat-x; }
.bg--repeat-y  { background-repeat: repeat-y; }

.bg--fixed  { background-attachment: fixed; }
.bg--local  { background-attachment: local; }
.bg--scroll { background-attachment: scroll; }


/* ============================================
   27. TRANSITIONS
   ============================================ */

.transition--none      { transition: none; }
.transition--all       { transition: all var(--transition); }
.transition--colors    { transition: color, background-color, border-color var(--transition); }
.transition--opacity   { transition: opacity var(--transition); }
.transition--shadow    { transition: box-shadow var(--transition); }
.transition--transform { transition: transform var(--transition); }

.duration--75    { transition-duration: 75ms; }
.duration--100   { transition-duration: 100ms; }
.duration--150   { transition-duration: 150ms; }
.duration--200   { transition-duration: 200ms; }
.duration--300   { transition-duration: 300ms; }
.duration--500   { transition-duration: 500ms; }
.duration--700   { transition-duration: 700ms; }
.duration--1000  { transition-duration: 1000ms; }

.ease--linear  { transition-timing-function: linear; }
.ease--in      { transition-timing-function: var(--ease-in); }
.ease--out     { transition-timing-function: var(--ease-out); }
.ease--in-out  { transition-timing-function: var(--ease-in-out); }


/* ============================================
   28. TRANSFORMS
   ============================================ */

/* Scale */
.scale--0   { transform: scale(0); }
.scale--50  { transform: scale(0.5); }
.scale--75  { transform: scale(0.75); }
.scale--90  { transform: scale(0.9); }
.scale--95  { transform: scale(0.95); }
.scale--100 { transform: scale(1); }
.scale--105 { transform: scale(1.05); }
.scale--110 { transform: scale(1.1); }
.scale--125 { transform: scale(1.25); }
.scale--150 { transform: scale(1.5); }

/* Rotate */
.rotate--0   { transform: rotate(0deg); }
.rotate--1   { transform: rotate(1deg); }
.rotate--2   { transform: rotate(2deg); }
.rotate--3   { transform: rotate(3deg); }
.rotate--6   { transform: rotate(6deg); }
.rotate--12  { transform: rotate(12deg); }
.rotate--45  { transform: rotate(45deg); }
.rotate--90  { transform: rotate(90deg); }
.rotate--135 { transform: rotate(135deg); }
.rotate--180 { transform: rotate(180deg); }
.-rotate--1   { transform: rotate(-1deg); }
.-rotate--2   { transform: rotate(-2deg); }
.-rotate--3   { transform: rotate(-3deg); }
.-rotate--6   { transform: rotate(-6deg); }
.-rotate--12  { transform: rotate(-12deg); }
.-rotate--45  { transform: rotate(-45deg); }
.-rotate--90  { transform: rotate(-90deg); }
.-rotate--180 { transform: rotate(-180deg); }

/* Translate X */
.translate-x--0    { transform: translateX(0); }
.translate-x--full { transform: translateX(100%); }
.-translate-x--full { transform: translateX(-100%); }
.translate-x--1-2  { transform: translateX(50%); }
.-translate-x--1-2 { transform: translateX(-50%); }

/* Translate Y */
.translate-y--0    { transform: translateY(0); }
.translate-y--full { transform: translateY(100%); }
.-translate-y--full { transform: translateY(-100%); }
.translate-y--1-2  { transform: translateY(50%); }
.-translate-y--1-2 { transform: translateY(-50%); }

/* Centrage met translate */
.center--xy { transform: translate(-50%, -50%); }
.center--x  { transform: translateX(-50%); }
.center--y  { transform: translateY(-50%); }

/* Will-change (performance hint) */
.will-change--transform { will-change: transform; }
.will-change--opacity   { will-change: opacity; }
.will-change--auto      { will-change: auto; }


/* ============================================
   29. CURSOR & INTERACTIE
   ============================================ */

.cursor--auto        { cursor: auto; }
.cursor--default     { cursor: default; }
.cursor--pointer     { cursor: pointer; }
.cursor--wait        { cursor: wait; }
.cursor--text        { cursor: text; }
.cursor--move        { cursor: move; }
.cursor--help        { cursor: help; }
.cursor--not-allowed { cursor: not-allowed; }
.cursor--none        { cursor: none; }
.cursor--grab        { cursor: grab; }
.cursor--grabbing    { cursor: grabbing; }
.cursor--crosshair   { cursor: crosshair; }
.cursor--zoom-in     { cursor: zoom-in; }
.cursor--zoom-out    { cursor: zoom-out; }

.pointer--none { pointer-events: none; }
.pointer--auto { pointer-events: auto; }

.select--none { user-select: none; }
.select--text { user-select: text; }
.select--all  { user-select: all; }
.select--auto { user-select: auto; }

.appearance--none { appearance: none; -webkit-appearance: none; }

.outline--none { outline: none; }
.outline--0    { outline: 0; }

.resize--none { resize: none; }
.resize--y    { resize: vertical; }
.resize--x    { resize: horizontal; }
.resize       { resize: both; }


/* ============================================
   30. LIJSTEN
   ============================================ */

.list--none    { list-style: none; padding-left: 0; margin: 0; }
.list--disc    { list-style-type: disc; }
.list--decimal { list-style-type: decimal; }
.list--inside  { list-style-position: inside; }
.list--outside { list-style-position: outside; }

.list--gap--4  li + li { margin-top: 4px; }
.list--gap--8  li + li { margin-top: 8px; }
.list--gap--12 li + li { margin-top: 12px; }
.list--gap--16 li + li { margin-top: 16px; }
.list--gap--24 li + li { margin-top: 24px; }


/* ============================================
   31. OBJECT FIT & POSITIE
   ============================================ */

.object--contain    { object-fit: contain; }
.object--cover      { object-fit: cover; }
.object--fill       { object-fit: fill; }
.object--none       { object-fit: none; }
.object--scale-down { object-fit: scale-down; }

.object--center       { object-position: center; }
.object--top          { object-position: top; }
.object--bottom       { object-position: bottom; }
.object--left         { object-position: left; }
.object--right        { object-position: right; }
.object--left-top     { object-position: left top; }
.object--right-top    { object-position: right top; }
.object--left-bottom  { object-position: left bottom; }
.object--right-bottom { object-position: right bottom; }


/* ============================================
   32. SCREEN READER
   ============================================ */

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

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


/* ============================================
   33. PARALLAX
   ============================================ */

.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-section .parallax-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
}


/* ============================================
   34. GSAP / ANIMATIE HELPERS
   ============================================ */

/* Beginstaat voor GSAP reveal-animaties */
.gsap--hidden {
    opacity: 0;
    visibility: hidden;
}

.gsap--invisible {
    opacity: 0;
}

.gsap--above {
    opacity: 0;
    transform: translateY(-30px);
}

.gsap--below {
    opacity: 0;
    transform: translateY(30px);
}

.gsap--left {
    opacity: 0;
    transform: translateX(-30px);
}

.gsap--right {
    opacity: 0;
    transform: translateX(30px);
}

/* Clip-path beginstaten voor reveal-animaties */
.clip--top    { clip-path: inset(0 0 100% 0); }
.clip--bottom { clip-path: inset(100% 0 0 0); }
.clip--left   { clip-path: inset(0 100% 0 0); }
.clip--right  { clip-path: inset(0 0 0 100%); }
.clip--none   { clip-path: inset(0 0 0 0); }


/* ============================================
   35. RESPONSIVE — TABLET (≤1024px)  →  t--
   ============================================ */

@media (max-width: 1024px) {

    /* Display */
    .t--block         { display: block; }
    .t--inline--block { display: inline-block; }
    .t--flex          { display: flex; }
    .t--grid          { display: grid; }
    .t--hidden        { display: none; }

    /* Flexbox */
    .t--flex--row     { flex-direction: row; }
    .t--flex--col     { flex-direction: column; }
    .t--flex--wrap    { flex-wrap: wrap; }
    .t--flex--nowrap  { flex-wrap: nowrap; }

    .t--justify--start   { justify-content: flex-start; }
    .t--justify--end     { justify-content: flex-end; }
    .t--justify--center  { justify-content: center; }
    .t--justify--between { justify-content: space-between; }

    .t--items--start   { align-items: flex-start; }
    .t--items--end     { align-items: flex-end; }
    .t--items--center  { align-items: center; }
    .t--items--stretch { align-items: stretch; }

    .t--self--start  { align-self: flex-start; }
    .t--self--end    { align-self: flex-end; }
    .t--self--center { align-self: center; }

    .t--flex--1    { flex: 1 1 0%; }
    .t--flex--none { flex: none; }
    .t--shrink--0  { flex-shrink: 0; }

    /* Grid */
    .t--grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .t--grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .t--grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .t--grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .t--grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .t--col--span-1  { grid-column: span 1 / span 1; }
    .t--col--span-2  { grid-column: span 2 / span 2; }
    .t--col--span-3  { grid-column: span 3 / span 3; }
    .t--col--span-4  { grid-column: span 4 / span 4; }
    .t--col--span-6  { grid-column: span 6 / span 6; }
    .t--col--span-full { grid-column: 1 / -1; }

    /* Order */
    .t--order--first { order: -9999; }
    .t--order--last  { order: 9999; }
    .t--order--1     { order: 1; }
    .t--order--2     { order: 2; }
    .t--order--3     { order: 3; }
    .t--order--4     { order: 4; }

    /* Width */
    .t--w--full  { width: 100%; }
    .t--w--1-2   { width: 50%; }
    .t--w--1-3   { width: 33.333%; }
    .t--w--2-3   { width: 66.666%; }
    .t--w--auto  { width: auto; }

    /* Height */
    .t--h--auto   { height: auto; }
    .t--h--full   { height: 100%; }
    .t--h--screen { height: 100vh; }

    /* Margin */
    .t--m--0    { margin: 0; }
    .t--m--auto { margin: auto; }

    .t--mt--0    { margin-top: 0; }
    .t--mt--8    { margin-top: 8px; }
    .t--mt--16   { margin-top: 16px; }
    .t--mt--24   { margin-top: 24px; }
    .t--mt--32   { margin-top: 32px; }
    .t--mt--48   { margin-top: 48px; }
    .t--mt--64   { margin-top: 64px; }
    .t--mt--auto { margin-top: auto; }

    .t--mb--0    { margin-bottom: 0; }
    .t--mb--8    { margin-bottom: 8px; }
    .t--mb--16   { margin-bottom: 16px; }
    .t--mb--24   { margin-bottom: 24px; }
    .t--mb--32   { margin-bottom: 32px; }
    .t--mb--48   { margin-bottom: 48px; }
    .t--mb--64   { margin-bottom: 64px; }
    .t--mb--auto { margin-bottom: auto; }

    .t--mx--auto { margin-inline: auto; }
    .t--my--0    { margin-block: 0; }
    .t--my--16   { margin-block: 16px; }
    .t--my--32   { margin-block: 32px; }

    /* Padding */
    .t--p--0   { padding: 0; }
    .t--p--16  { padding: 16px; }
    .t--p--24  { padding: 24px; }
    .t--p--32  { padding: 32px; }

    .t--pt--0   { padding-top: 0; }
    .t--pt--16  { padding-top: 16px; }
    .t--pt--24  { padding-top: 24px; }
    .t--pt--32  { padding-top: 32px; }
    .t--pt--48  { padding-top: 48px; }
    .t--pt--64  { padding-top: 64px; }
    .t--pt--96  { padding-top: 96px; }

    .t--pb--0   { padding-bottom: 0; }
    .t--pb--16  { padding-bottom: 16px; }
    .t--pb--24  { padding-bottom: 24px; }
    .t--pb--32  { padding-bottom: 32px; }
    .t--pb--48  { padding-bottom: 48px; }
    .t--pb--64  { padding-bottom: 64px; }
    .t--pb--96  { padding-bottom: 96px; }

    .t--px--0   { padding-inline: 0; }
    .t--px--16  { padding-inline: 16px; }
    .t--px--24  { padding-inline: 24px; }
    .t--px--32  { padding-inline: 32px; }

    .t--py--0   { padding-block: 0; }
    .t--py--16  { padding-block: 16px; }
    .t--py--24  { padding-block: 24px; }
    .t--py--32  { padding-block: 32px; }
    .t--py--48  { padding-block: 48px; }
    .t--py--64  { padding-block: 64px; }
    .t--py--96  { padding-block: 96px; }

    /* Gap */
    .t--gap--0   { gap: 0; }
    .t--gap--8   { gap: 8px; }
    .t--gap--12  { gap: 12px; }
    .t--gap--16  { gap: 16px; }
    .t--gap--24  { gap: 24px; }
    .t--gap--32  { gap: 32px; }
    .t--gap--48  { gap: 48px; }

    /* Typography */
    .t--text--left   { text-align: left; }
    .t--text--center { text-align: center; }
    .t--text--right  { text-align: right; }

    .t--text--14  { font-size: 14px; }
    .t--text--16  { font-size: 16px; }
    .t--text--18  { font-size: 18px; }
    .t--text--20  { font-size: 20px; }
    .t--text--24  { font-size: 24px; }
    .t--text--28  { font-size: 28px; }
    .t--text--32  { font-size: 32px; }
    .t--text--40  { font-size: 40px; }
    .t--text--48  { font-size: 48px; }

    /* Position */
    .t--static   { position: static; }
    .t--relative { position: relative; }
    .t--absolute { position: absolute; }

    /* Border Radius */
    .t--rounded--none { border-radius: 0; }
    .t--rounded--sm   { border-radius: var(--radius-sm); }
    .t--rounded       { border-radius: var(--radius); }
    .t--rounded--lg   { border-radius: var(--radius-lg); }
}


/* ============================================
   36. RESPONSIVE — MOBIEL (≤768px)  →  m--
   ============================================ */

@media (max-width: 1024px) {

   body{
      font-size:14px;
   }

   h1{
      font-size:64px;
   }
   h2{
      font-size:40px !important;
   }
   h3{
      font-size:32px;
   }

   h2 br{
      display:none;
   }

    /* Display */
    .m--block         { display: block; }
    .m--inline--block { display: inline-block; }
    .m--flex          { display: flex; }
    .m--grid          { display: grid; }
    .m--hidden        { display: none !important; }

    /* Flexbox */
    .m--flex--row     { flex-direction: row; }
    .m--flex--col     { flex-direction: column; }
    .m--flex--wrap    { flex-wrap: wrap; }
    .m--flex--nowrap  { flex-wrap: nowrap; }
    .m--flex--col--reverse {flex-direction:column-reverse;}

    .m--justify--start   { justify-content: flex-start; }
    .m--justify--end     { justify-content: flex-end; }
    .m--justify--center  { justify-content: center; }
    .m--justify--between { justify-content: space-between; }

    .m--items--start   { align-items: flex-start; }
    .m--items--end     { align-items: flex-end; }
    .m--items--center  { align-items: center; }
    .m--items--stretch { align-items: stretch; }

    .m--self--start  { align-self: flex-start; }
    .m--self--end    { align-self: flex-end; }
    .m--self--center { align-self: center; }

    .m--flex--1    { flex: 1 1 0%; }
    .m--flex--none { flex: none; }
    .m--shrink--0  { flex-shrink: 0; }

    /* Grid */
    .m--grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .m--grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m--grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .m--col--span-1  { grid-column: span 1 / span 1; }
    .m--col--span-2  { grid-column: span 2 / span 2; }
    .m--col--span-full { grid-column: 1 / -1; }

    /* Order */
    .m--order--first { order: -9999; }
    .m--order--last  { order: 9999; }
    .m--order--1     { order: 1; }
    .m--order--2     { order: 2; }
    .m--order--3     { order: 3; }
    .m--order--4     { order: 4; }

    /* Width */
    .m--w--full  { width: 100%; }
    .m--w--1-2   { width: 50%; }
    .m--w--auto  { width: auto; }
    .m--w--screen { width: 100vw; }

    /* Height */
    .m--h--auto   { height: auto; }
    .m--h--full   { height: 100%; }
    .m--h--screen { height: 100vh; }
    .m--h--40vh   { height: 40vh; }
    .m--h--50vh   { height: 50vh; }
    .m--h--200    { height: 200px; }
    .m--h--300    { height: 300px; }
    .m--h--400    { height: 400px; }

    /* Margin */
    .m--m--0    { margin: 0; }
    .m--m--auto { margin: auto; }

    .m--mt--0    { margin-top: 0; }
    .m--mt--4    { margin-top: 4px; }
    .m--mt--8    { margin-top: 8px; }
    .m--mt--12   { margin-top: 12px; }
    .m--mt--16   { margin-top: 16px; }
    .m--mt--24   { margin-top: 24px; }
    .m--mt--32   { margin-top: 32px; }
    .m--mt--48   { margin-top: 48px; }
    .m--mt--64   { margin-top: 64px; }
    .m--mt--auto { margin-top: auto; }

    .m--mb--0    { margin-bottom: 0; }
    .m--mb--4    { margin-bottom: 4px; }
    .m--mb--8    { margin-bottom: 8px; }
    .m--mb--12   { margin-bottom: 12px; }
    .m--mb--16   { margin-bottom: 16px; }
    .m--mb--24   { margin-bottom: 24px; }
    .m--mb--32   { margin-bottom: 32px; }
    .m--mb--48   { margin-bottom: 48px; }
    .m--mb--64   { margin-bottom: 64px; }
    .m--mb--auto { margin-bottom: auto; }

    .m--ml--0    { margin-left: 0; }
    .m--ml--auto { margin-left: auto; }
    .m--mr--0    { margin-right: 0; }
    .m--mr--auto { margin-right: auto; }
    .m--mx--auto { margin-inline: auto; }
    .m--my--0    { margin-block: 0; }
    .m--my--16   { margin-block: 16px; }
    .m--my--32   { margin-block: 32px; }

    /* Padding */
    .m--p--0   { padding: 0; }
    .m--p--8   { padding: 8px; }
    .m--p--12  { padding: 12px; }
    .m--p--16  { padding: 16px; }
    .m--p--24  { padding: 24px; }
    .m--p--32  { padding: 32px; }

    .m--pt--0   { padding-top: 0; }
    .m--pt--8   { padding-top: 8px; }
    .m--pt--12  { padding-top: 12px; }
    .m--pt--16  { padding-top: 16px; }
    .m--pt--24  { padding-top: 24px; }
    .m--pt--32  { padding-top: 32px; }
    .m--pt--48  { padding-top: 48px; }
    .m--pt--64  { padding-top: 64px; }
    .m--pt--96  { padding-top: 96px; }

    .m--pb--0   { padding-bottom: 0; }
    .m--pb--8   { padding-bottom: 8px; }
    .m--pb--12  { padding-bottom: 12px; }
    .m--pb--16  { padding-bottom: 16px; }
    .m--pb--24  { padding-bottom: 24px; }
    .m--pb--32  { padding-bottom: 32px; }
    .m--pb--48  { padding-bottom: 48px; }
    .m--pb--64  { padding-bottom: 64px; }
    .m--pb--96  { padding-bottom: 96px; }

    .m--pl--0   { padding-left: 0; }
    .m--pl--8   { padding-left: 8px; }
    .m--pl--16  { padding-left: 16px; }
    .m--pl--24  { padding-left: 24px; }
    .m--pr--0   { padding-right: 0; }
    .m--pr--8   { padding-right: 8px; }
    .m--pr--16  { padding-right: 16px; }
    .m--pr--24  { padding-right: 24px; }

    .m--px--0   { padding-inline: 0; }
    .m--px--8   { padding-inline: 8px; }
    .m--px--12  { padding-inline: 12px; }
    .m--px--16  { padding-inline: 16px; }
    .m--px--24  { padding-inline: 24px; }
    .m--px--32  { padding-inline: 32px; }

    .m--py--0   { padding-block: 0; }
    .m--py--8   { padding-block: 8px; }
    .m--py--12  { padding-block: 12px; }
    .m--py--16  { padding-block: 16px; }
    .m--py--24  { padding-block: 24px; }
    .m--py--32  { padding-block: 32px; }
    .m--py--48  { padding-block: 48px; }
    .m--py--64  { padding-block: 64px; }
    .m--py--96  { padding-block: 96px; }

    /* Gap */
    .m--gap--0   { gap: 0; }
    .m--gap--4   { gap: 4px; }
    .m--gap--8   { gap: 8px; }
    .m--gap--12  { gap: 12px; }
    .m--gap--16  { gap: 16px; }
    .m--gap--24  { gap: 24px; }
    .m--gap--32  { gap: 32px; }
    .m--gap--48  { gap: 48px; }
    .m--gap--64  { gap: 64px; }

    /* Typography */
    .m--text--left    { text-align: left; }
    .m--text--center  { text-align: center; }
    .m--text--right   { text-align: right; }

    .m--text--12  { font-size: 12px; }
    .m--text--13  { font-size: 13px; }
    .m--text--14  { font-size: 14px; }
    .m--text--15  { font-size: 15px; }
    .m--text--16  { font-size: 16px; }
    .m--text--17  { font-size: 17px; }
    .m--text--18  { font-size: 18px; }
    .m--text--20  { font-size: 20px; }
    .m--text--22  { font-size: 22px; }
    .m--text--24  { font-size: 24px; }
    .m--text--28  { font-size: 28px; }
    .m--text--32  { font-size: 32px; }
    .m--text--36  { font-size: 36px; }
    .m--text--40  { font-size: 40px; }
    .m--text--48  { font-size: 48px; }

    .m--font--400   { font-weight: 400; }
    .m--font--500   { font-weight: 500; }
    .m--font--600   { font-weight: 600; }
    .m--font--700   { font-weight: 700; }

    .m--leading--tight   { line-height: 1.25; }
    .m--leading--normal  { line-height: 1.5; }
    .m--leading--relaxed { line-height: 1.625; }

    .m--hidden--text { font-size: 0; }

    /* Position */
    .m--static   { position: static; }
    .m--relative { position: relative; }
    .m--absolute { position: absolute; }

    /* Border Radius */
    .m--rounded--none { border-radius: 0; }
    .m--rounded--sm   { border-radius: var(--radius-sm); }
    .m--rounded       { border-radius: var(--radius); }
    .m--rounded--lg   { border-radius: var(--radius-lg); }
    .m--rounded--full { border-radius: var(--radius-full); }

    /* Overflow */
    .m--overflow--hidden { overflow: hidden; }

    /* Opacity */
    .m--opacity--0   { opacity: 0; }
    .m--opacity--100 { opacity: 1; }
}