:root {

    --bs-body-font-family: 'Atkinson Hyperlegible', sans-serif;
    --bs-font-sans-serif: 'Titillium Web', sans-serif;

    --font-header: var(--bs-font-sans-serif);
    --font-body: var(--bs-body-font-family);

    --color-primary-light: #fff8c5;			/* zachte highlight geel (origineel: #ffcb05) */ 
    --color-primary-medium: #f4c900;		/* heldere mosterdgeel uit achtergrond */
    --color-primary-dark: #b38f00;			/* diepe warme geel */
    --color-primary-extra-dark: #6e5800;

    --color-secondary-light: #f8f8f8;		/* lichte grijstint voor cards/backgrounds */
    --color-secondary-medium: #999999;		/* neutrale tekstkleur */
    --color-secondary-dark: #2b2b2b;		/* voor headings/bodytext */
    --color-secondary-extra-dark: #121212;

    --color-accent-light: #d8f3f7;			/* achtergrond van scherm (blauwgroen tint) */
    --color-accent-medium: #4bb7c5;			/* heldere accentkleur uit het scherm */
    --color-accent-dark: #006d7a;			/* dieper blauwgroen voor buttons/icons */
    --color-accent-extra-dark: #003640;

    --color-tertiary-light: #ffd8b3;		/* lichte oranje tint (raketvlam/licht) */
    --color-tertiary-medium: #ff6f2c;		/* raket oranje */
    --color-tertiary-dark: #cc3b00;			/* diepe vurige oranje */
    --color-tertiary-extra-dark: #801f00;

    --color-success-light: #dff6df;
    --color-success-medium: #43b649;
    --color-success-dark: #2f7f34;

    --color-white: #FFFFFF;
    --color-light-grey: #eee5e5;
    --color-medium-grey: #ddcecd;
    --color-grey: #9E9494;
    --color-dark-grey: #4b4448;
    --color-black: #000000;


    --color-electric-light: #c3ffc3;		/* pastelgroen voor subtiele achtergrond of hover */
    --color-electric-medium: #21ff21;		/* jouw originele felle groen */
    --color-electric-dark: #14b814;			/* goed voor knoppen, icoontjes of borders */
    --color-electric-extra-dark: #0c600c;	/* diep donkergroen voor tekst of extreme contrasten */

    --header-color: var(--color-secondary-extra-dark);
    --body-color: var(--color-secondary-dark);

    --line-height: 1.65;
    --paragraph-spacing: 1rem;
    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 24px;
    --shadow-soft: 0 8px 24px rgba(23, 26, 31, 0.08);
    --shadow-medium: 0 12px 30px rgba(23, 26, 31, 0.12);
}

/* Basis */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: var(--line-height);
    color: var(--body-color);
    background-color: var(--color-white);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--header-color);
    font-family: var(--font-header);
    line-height: 1.15;
    margin-top: 0;
}

h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3, h4, h5, h6 { font-weight: 500; }

p, li, small, label, input, textarea, select {
    font-family: var(--font-body);
}

p {
    margin-bottom: var(--paragraph-spacing);
}

a {
    color: var(--color-accent-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

.electric-link {
	text-decoration-line: underline;
	/* text-decoration-color: var(--color-accent-medium); */
	text-decoration-color: var(--color-electric-medium);
	text-decoration-thickness: .3em;
}
.electric-link:hover{
	text-decoration-color: var(--color-accent-dark);
}


/* List styles */
ul {
	list-style-type: none;
}
.arrow-next li::before {
	content: "\276F"; /* Unicode voor een pijl naar rechts */
	margin-right: 10px; /* Ruimte tussen pijl en tekst */
	/*	color: #000; /* Kleur van de pijl */
}
.arrow-down::before {
    content: "\276F"; /* Unicode voor een pijl naar rechts */
    margin-right: 10px; /* Ruimte tussen pijl en tekst */
    display: inline-block; /* Zorg ervoor dat de transform werkt */
    transform: rotate(90deg); /* Draai de pijl */
    font-style: normal; /* Schakel italic uit */
}



/* Layout helpers */
.section-padding {
    padding: 5rem 0;
}

.card-soft {
    background: var(--color-white);
    border: 1px solid #ececec;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-soft);
}

/* Kleurhelpers */
.color-primary-medium { color: var(--color-primary-medium); }
.color-primary-dark { color: var(--color-primary-dark); }
.color-secondary-dark { color: var(--color-secondary-dark); }
.color-secondary-extra-dark { color: var(--color-secondary-extra-dark); }
.color-accent-dark { color: var(--color-accent-dark); }
.color-tertiary-dark { color: var(--color-tertiary-dark); }
.color-white { color: var(--color-white); }

.bg-color-primary-light { background-color: var(--color-primary-light); }
.bg-color-primary-medium { background-color: var(--color-primary-medium); }
.bg-color-secondary-light { background-color: var(--color-secondary-light); }
.bg-color-secondary-extra-dark { background-color: var(--color-secondary-extra-dark); }
.bg-color-accent-light { background-color: var(--color-accent-light); }
.bg-color-accent-medium { background-color: var(--color-accent-medium); }
.bg-color-tertiary-light { background-color: var(--color-tertiary-light); }
.bg-color-white { background-color: var(--color-white); }

/* Background color classes */
.bg-color-primary-light { background-color: var(--color-primary-light); }
.bg-color-primary-medium { background-color: var(--color-primary-medium); }
.bg-color-primary-dark { background-color: var(--color-primary-dark); }
.bg-color-primary-extra-dark { background-color: var(--color-primary-extra-dark); }

.bg-color-secondary-light { background-color: var(--color-secondary-light); }
.bg-color-secondary-medium { background-color: var(--color-secondary-medium); }
.bg-color-secondary-dark { background-color: var(--color-secondary-dark); }
.bg-color-secondary-extra-dark { background-color: var(--color-secondary-extra-dark); }

.bg-color-tertiary-light { background-color: var(--color-tertiary-light); }
.bg-color-tertiary-medium { background-color: var(--color-tertiary-medium); }
.bg-color-tertiary-dark { background-color: var(--color-tertiary-dark); }
.bg-color-tertiary-extra-dark { background-color: var(--color-tertiary-extra-dark); }

.bg-color-accent-light { background-color: var(--color-accent-light); }
.bg-color-accent-medium { background-color: var(--color-accent-medium); }
.bg-color-accent-dark { background-color: var(--color-accent-dark); }
.bg-color-accent-extra-dark { background-color: var(--color-accent-extra-dark); }

.bg-color-electric-light { background-color: var(--color-electric-light); }
.bg-color-electric-medium { background-color: var(--color-electric-medium); }
.bg-color-electric-dark { background-color: var(--color-electric-dark); }
.bg-color-electric-extra-dark { background-color: var(--color-electric-extra-dark); }

.bg-color-white { background-color: var(--color-white) }
.bg-color-light-grey { background-color: var(--color-light-grey) }
.bg-color-medium-grey { background-color: var(--color-medium-grey) }
.bg-color-grey { background-color: var(--color-grey) }
.bg-color-dark-grey { background-color: var(--color-dark-grey) }
.bg-color-red { background-color: red }


/* ========================================
   NAVBAR
======================================== */

.custom-navbar {
    background-color: var(--color-white);
    border-bottom: 1px solid #ececec;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.custom-navbar .navbar-brand {
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-secondary-extra-dark);
}

.custom-navbar .navbar-brand:hover {
    color: var(--color-secondary-extra-dark);
}

.custom-navbar .navbar-nav {
    gap: 0.25rem;
}

.custom-navbar .nav-item {
    position: relative;
}

.custom-navbar .nav-link {
    position: relative;
    font-family: var(--font-header);
    font-weight: 600;
    color: var(--color-accent-dark);
    padding: 0.9rem 1rem;
    transition: color 0.2s ease;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link:focus {
    color: var(--color-primary-medium);
}

.custom-navbar .nav-link.active {
    color: var(--color-primary-medium);
}

@media (min-width: 992px) {
    .custom-navbar .nav-link.active::before {
        content: "";
        position: absolute;
        top: -0.9rem;
        left: 1rem;
        right: 1rem;
        height: 3px;
        background-color: var(--color-primary-medium);
        border-radius: 999px;
    }
}

@media (max-width: 991.98px) {
    .custom-navbar .navbar-collapse {
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid #ececec;
    }

    .custom-navbar .navbar-nav {
        align-items: flex-start !important;
        gap: 0;
    }

    .custom-navbar .nav-link {
        padding: 0.75rem 0;
        width: 100%;
    }

    .custom-navbar .nav-link.active {
        color: var(--color-primary-medium);
    }
}

/* ========================================
   LOGO NAVBAR
======================================== */

.navbar-logo {
    height: 27px;
    width: auto;
    display: block;
}

@media (min-width: 992px) {
    .navbar-logo {
        height: 27px;
    }
}

/* ========================================
   BUTTONS
======================================== */

.btn {
    border-radius: 999px;
    font-family: var(--font-header);
    font-weight: 600;
    padding: 0.8rem 1.4rem;
    transition: all 0.2s ease;
    box-shadow: none;
}

.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 143, 157, 0.2);
}

.btn-primary-custom {
    background-color: var(--color-primary-medium);
    border: 2px solid var(--color-primary-medium);
    color: var(--color-secondary-extra-dark);
}

.btn-primary-custom:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-accent-custom {
    background-color: var(--color-accent-dark);
    border: 2px solid var(--color-accent-dark);
    color: var(--color-white);
}

.btn-accent-custom:hover {
    background-color: var(--color-accent-extra-dark);
    border-color: var(--color-accent-extra-dark);
    color: var(--color-white);
}

.btn-tertiary-custom {
    background-color: var(--color-tertiary-dark);
    border: 2px solid var(--color-tertiary-dark);
    color: var(--color-white);
}

.btn-tertiary-custom:hover {
    background-color: var(--color-tertiary-extra-dark);
    border-color: var(--color-tertiary-extra-dark);
    color: var(--color-white);
}

.btn-outline-dark-custom {
    background-color: transparent;
    border: 2px solid var(--color-secondary-extra-dark);
    color: var(--color-secondary-extra-dark);
}

.btn-outline-dark-custom:hover {
    background-color: var(--color-secondary-extra-dark);
    color: var(--color-white);
}

.btn-lg {
    font-size: 1.25rem;
}

.btn-outline-accent {
    color: var(--color-accent-dark);
    border: 2px solid var(--color-accent-dark);
    background-color: transparent;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-outline-accent:hover {
    background-color: var(--color-accent-dark);
    color: #fff;
    border-color: var(--color-accent-dark);
}

.btn-outline-tertiary {
    color: var(--color-tertiary-dark);
    border: 2px solid var(--color-tertiary-dark);
    background-color: transparent;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-outline-tertiary:hover {
    background-color: var(--color-tertiary-dark);
    color: #fff;
    border-color: var(--color-tertiary-dark);
}

/* ========================================
   BUTTON MET ICOON
======================================== */

.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-with-icon__icon {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.btn-with-icon:hover .btn-with-icon__icon {
    transform: translateX(4px);
}

/* ========================================
   BADGES
======================================== */

.badge-custom {
    display: inline-block;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-primary-custom {
    background-color: var(--color-primary-light);
    color: var(--color-primary-extra-dark);
}

.badge-accent-custom {
    background-color: var(--color-accent-light);
    color: var(--color-accent-extra-dark);
}

.badge-dark-custom {
    background-color: var(--color-secondary-extra-dark);
    color: var(--color-white);
}

/* ========================================
   FORMULIEREN
======================================== */

.form-label {
    font-weight: 600;
    color: var(--color-secondary-extra-dark);
    margin-bottom: 0.4rem;
}

.form-control,
.form-select {
    border: 1px solid #d7dbe0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    color: var(--color-secondary-dark);
    background-color: var(--color-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
    color: var(--color-grey);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent-medium);
    box-shadow: 0 0 0 0.2rem rgba(121, 199, 209, 0.2);
}

/* ========================================
   CARDS
======================================== */

.style-card {
    background: var(--color-white);
    border: 1px solid #ececec;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    height: 100%;
}

.demo-block {
    border: 1px solid #ececec;
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    background: var(--color-white);
}

.card-soft {
    background: var(--color-white);
    border: 1px solid #ececec;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-soft);
}

/* ========================================
   HUISSTIJL / SWATCHES
======================================== */

.hero-style {
    background: linear-gradient(135deg, var(--color-primary-medium) 0%, #f0c300 100%);
    border-radius: var(--border-radius-lg);
    padding: 4rem;
    overflow: hidden;
}

.color-swatch {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.color-swatch__block {
    height: 120px;
}

.color-swatch__meta {
    padding: 1rem;
    font-size: 0.9rem;
}

/* ========================================
   FOOTER
======================================== */

.footer-section {
	background-color: var(--color-accent-extra-dark);
	padding-top: 60px;
}
.footer-section ul li {
	color: var(--color-medium-grey);
	padding: 0.8rem 0 0.8rem 0;
}
.footer-section ul.bottom-border li{
	border-bottom: 1px solid #ff0000;
}
.footer-section ul li span.darker {
	color: #6B6161;
}
.footer-section ul li a{
	color: var(--color-secondary-medium);
	text-decoration: none;
}
.footer-section ul li a:hover{
	color: var(--color-secondary-light);
	transition: color 0.5s ease;
}
.footer-section ul::before {
	color: var(--color-secondary-medium);
}
.footer-logo {
	display: block; /* voorkomt inline whitespace-issues */
	width: 100%; /* schaal mee op kleine schermen */
	max-width: 149px; /* nooit groter dan de originele breedte */
	height: auto; /* behoudt de aspect-ratio */
}


/* ========================================
   CONTACT WIDGET - DARK
======================================== */

.contact-widget-dark {
    background-color: var(--color-accent-medium);
    border-radius: 2rem;
    padding: 3.5rem 3rem;
}

.contact-widget-dark__title {
    font-size: clamp(1.2rem, 3vw, 2.25rem);
    line-height: 1.1;
    color: var(--color-secondary-extra-dark);
	font-weight: 700;
    margin-bottom: 1.5rem;
}

.contact-widget-dark__text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--color-secondary-extra-dark);
    max-width: 22rem;
    margin: 0 auto;
}

.contact-widget-dark .form-control,
.contact-widget-dark .form-select,
.contact-widget-dark textarea {
    background-color: #f3f3f3;
    border: 1px solid #d9d9d9;
    border-radius: 0.6rem;
    padding: 0.95rem 1rem;
    color: #5a5a5a;
    font-size: 1.05rem;
    box-shadow: none;
}

.contact-widget-dark .form-control::placeholder,
.contact-widget-dark textarea::placeholder {
    color: #5a5a5a;
    opacity: 1;
}

.contact-widget-dark .form-control:focus,
.contact-widget-dark .form-select:focus,
.contact-widget-dark textarea:focus {
    border-color: var(--color-accent-extra-dark);
    box-shadow: 0 0 0 0.2rem rgba(25, 89, 100, 0.15);
    background-color: #f3f3f3;
}

.contact-widget-dark textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

.btn-contact-widget-dark {
    background-color: #0b7684;
    border: 2px solid #0b7684;
    color: #ffffff;
    border-radius: 999px;
    padding: 0.9rem 2rem;
    font-weight: 700;
    min-width: 7rem;
}

.btn-contact-widget-dark:hover,
.btn-contact-widget-dark:focus {
    background-color: #095d68;
    border-color: #095d68;
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .contact-widget-dark {
        padding: 2.5rem 1.5rem;
        border-radius: 1.5rem;
    }

    .contact-widget-dark__title,
    .contact-widget-dark__text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================
   HERO BANNER
======================================== */

.hero-banner {
    position: relative;
    width: 100%;
    background-color: var(--color-primary-medium);
    overflow: hidden;
    padding: 3rem 1rem;
    min-height: 400px;
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/plusje.svg');
    background-repeat: repeat;
    background-size: 60px 60px;
    -webkit-mask-image: linear-gradient(
        to bottom right,
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 0) 40%
    );
    mask-image: linear-gradient(
        to bottom right,
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 0) 40%
    );
    z-index: 0;
}

.hero-banner > * {
    position: relative;
    z-index: 1;
}

.hero-banner__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-banner__title {
    color: var(--color-secondary-extra-dark);
    font-size: clamp(1.5rem, 7vw, 3.4rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.hero-banner__lead {
    color: rgba(23, 26, 31, 0.88);
    font-size: 1.15rem;
    line-height: 1.75;
    max-width: 34rem;
}

.hero-banner__actions .btn {
    min-width: 190px;
}

.hero-banner__visual-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-banner__bg {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    z-index: 0;
}

.hero-banner__rocket {
    position: absolute;
    width: 35%;
    max-width: 100px;
    height: auto;
    top: -18%;
    left: 54%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: rocketIdle 3.8s linear infinite;
    will-change: transform;
}

.hero-banner__smoke {
    position: absolute;
    bottom: 12%;
    left: 54%;
    transform: translate(-50%, 0);
    width: 76%;
    max-width: 340px;
    height: auto;
    z-index: 1;
    animation: smokePulse 2.5s ease-in-out infinite;
    will-change: transform, opacity;
}

.hero-banner__visual-wrap-alt {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0 0 0;
}

.hero-banner__visual {
    display: block;
    width: 100%;
    max-width: 540px;
    height: auto;
    filter: drop-shadow(0 22px 40px rgba(23, 26, 31, 0.14));
}

@keyframes rocketIdle {
    0%   { transform: translate(-50%, -50%) rotate(-3deg); }
    10%  { transform: translate(-50%, -51%) rotate(2deg); }
    20%  { transform: translate(-50%, -49%) rotate(-2deg); }
    30%  { transform: translate(-50%, -50.5%) rotate(3deg); }
    40%  { transform: translate(-50%, -49.5%) rotate(-3deg); }
    50%  { transform: translate(-50%, -50%) rotate(2deg); }
    60%  { transform: translate(-50%, -50.8%) rotate(-2deg); }
    70%  { transform: translate(-50%, -49.8%) rotate(3deg); }
    80%  { transform: translate(-50%, -50.3%) rotate(-3deg); }
    90%  { transform: translate(-50%, -49.7%) rotate(2deg); }
    100% { transform: translate(-50%, -50%) rotate(-3deg); }
}

@keyframes smokePulse {
    0% {
        transform: translate(-50%, 0) scale(0.98);
    }
    50% {
        transform: translate(-50%, 0) scale(1.02);
    }
    100% {
        transform: translate(-50%, 0) scale(0.98);
    }
}

@media (min-width: 768px) {
    .hero-banner {
        padding: 3.5rem 0 4rem 0;
    }

    .hero-banner__lead {
        font-size: 1.40rem;
    }
}

@media (min-width: 992px) {
    .hero-banner {
        padding: 5rem 2rem;
    }

    .hero-banner__visual-wrap {
        justify-content: flex-end;
        padding-top: 0;
    }

    .hero-banner__visual {
        max-width: 620px;
        transform: translateX(1rem);
    }
}

@media (min-width: 1200px) {
    .hero-banner__title {
        max-width: 20ch;
    }

    .hero-banner__visual {
        max-width: 680px;
        transform: translateX(2rem);
    }
}

/* ========================================
   CLIENT LOGOS
======================================== */

.client-logo-small {
    display: block;
    width: 150px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* mobiel */
@media (max-width: 768px) {
    .client-logo-small {
        width: 90px;
    }
}

/* =================
   ANIMATIE
================= */

.logos-animate .col {
    opacity: 0;
    transform: translateY(50px);
    animation: logoBounceIn 0.6s ease forwards;
}

/* staggered delay (links → rechts) */
.logos-animate .col:nth-child(1) { animation-delay: .7s; }
.logos-animate .col:nth-child(2) { animation-delay: .85s; }
.logos-animate .col:nth-child(3) { animation-delay: 1s; }
.logos-animate .col:nth-child(4) { animation-delay: 1.15s; }
.logos-animate .col:nth-child(5) { animation-delay: 1.3s; }
.logos-animate .col:nth-child(6) { animation-delay: 1.45s; }

/* bounce effect */
@keyframes logoBounceIn {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    60% {
        opacity: 1;
        transform: translateY(-6px);
    }
    80% {
        transform: translateY(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   CASE HIGHLIGHT
======================================== */

.section-case-highlight {
    background-color: var(--color-white);
}

.portfolio-img {
    overflow: hidden;
    max-width: 500px;
    margin-left: auto;
}
.case-highlight__image-wrap {
    border-radius: 1.5rem;
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: 0 12px 30px rgba(23, 26, 31, 0.08);
    max-width: 500px;
    margin-left: auto;
}

.case-highlight__image {
    display: block;
    width: 100%;
    height: auto;
}

.case-highlight__title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--color-secondary-extra-dark);
}

.case-highlight__text {
    font-size: 1.30rem;
    line-height: 1.8;
    color: var(--color-secondary-dark);
    max-width: 34rem;
}

/* ========================================
   SECTION - AUDIENCE
======================================== */

.section-audience {
    background-color: var(--color-white);
}

.section-audience__intro {
    max-width: 32rem;
}

.section-audience__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--color-secondary-extra-dark);
}

.section-audience__text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-secondary-dark);
}

.audience-card {
    background: var(--color-white);
    border: 1px solid #ece7dc;
    border-radius: 1.25rem;
    padding: 1.5rem 1.25rem;
    height: 100%;
    box-shadow: 0 6px 18px rgba(23, 26, 31, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.audience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(23, 26, 31, 0.08);
    border-color: rgba(197, 159, 0, 0.35);
}

.audience-card__icon-wrap {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background-color: var(--color-primary-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.audience-card__icon {
    font-size: 1.35rem;
    color: var(--color-accent-dark);
}

.audience-card__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-family: var(--font-header);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

.audience-card__title {
    font-size: 1.35rem;
    line-height: 1.15;
    margin-bottom: 0.9rem;
    color: var(--color-secondary-extra-dark);
}

.audience-card__text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--color-secondary-dark);
}

@media (max-width: 991.98px) {
    .section-audience__intro {
        max-width: none;
    }
}

/* ========================================
   CASE - AANPAK BLOK
======================================== */

.case-section{
	overflow: hidden;
}
.approach-case {
    max-width: 420px;
    margin-left: auto;
}

.approach-case__image-wrap {
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: 0 10px 25px rgba(23, 26, 31, 0.08);
}

.approach-case__image {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    .approach-case {
        margin-left: 0;
    }
}


/* ========================================
   SECTIE - DIENSTEN
======================================== */

.services-section{
	overflow: hidden;
}

.icon-list-item {
    display: flex;
    align-items: center; /* 🔥 dit is de belangrijkste */
    gap: 1rem;
}

.icon-list-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;

    background-color: var(--color-primary-medium);
    color: var(--color-secondary-extra-dark);

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-family: var(--font-header);

    flex-shrink: 0; /* 🔥 voorkomt dat hij versmalt */
	
	margin-top: 0.4rem;
}







/* ========================================
   FADE IN
======================================== */

.fade-in {
    opacity: 0;
    animation: fadeIn ease forwards;
}

/* durations */
.fade-in-fast {
    animation-duration: 0.5s;
}

.fade-in-normal {
    animation-duration: 1s;
}

.fade-in-slow {
    animation-duration: 1.5s;
}

/* keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ========================================
   SLIDE-IN ANIMATIES
   Werkt met percentages, zoals oude site
======================================== */

.slide-in-left,
.slide-in-right,
.slide-in-top,
.slide-in-bottom {
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
    will-change: transform, opacity;
}

.slide-in-left {
    transform: translateX(-50%);
}

.slide-in-right {
    transform: translateX(50%);
}

.slide-in-top {
    transform: translateY(-50%);
}

.slide-in-bottom {
    transform: translateY(50%);
}

.slide-in-left.in-view,
.slide-in-right.in-view,
.slide-in-top.in-view,
.slide-in-bottom.in-view {
    opacity: 1;
    transform: translate(0, 0);
}

/* Optionele snelheden */
.slide-speed-fast {
    transition-duration: 0.5s;
}

.slide-speed-normal {
    transition-duration: 1s;
}

.slide-speed-slow {
    transition-duration: 1.5s;
}