/* ================================= */
/* BRAINSTORMERS. Shared Styles     */
/* ================================= */

/* Text selection highlight (highlighter yellow) */
::selection {
    background-color: #D2FF4E;
    color: #111111;
}
::-moz-selection {
    background-color: #D2FF4E;
    color: #111111;
}

/* --- Scroll-swap: pinned crossfade tagline sequence (homepage) --- */
.swap-slide {
    max-width: 64rem;
    margin: 0 auto 3rem;
    font-size: clamp(1.6rem, 4vw, 3.5rem);
}
/* Tidier breaks on the intro chunks only (not the tagline). */
.swap-chunk {
    line-height: 1.12;
    text-wrap: pretty;
}
.swap-chunk strong {
    display: block;
    margin-bottom: 1em;
    font-weight: inherit;
}
.swap-break {
    display: block;
    margin-bottom: 1.1em;
}
.swap-list {
    list-style: none;
    margin: 1em auto 0.4em;
    padding: 0;
}
/* On desktop, size the dotted list independently of the slide's auto-fit base font
   so the longest bullet ("Het ontwerpen van een sterke huisstijl") stays narrow
   enough to clear the founder portraits. Only applied where the portraits actually
   show (>=1180px); on smaller screens the list inherits the slide font so it scales
   together with the intro line ("Wij helpen ... met:") instead of looking oversized. */
@media (min-width: 1180px) {
    .swap-list {
        font-size: clamp(30px, 3vw, 44px);
    }
}
.swap-list li {
    display: block;
    margin: 0.08em 0;
    white-space: nowrap;
}
/* Tagline lines never wrap (auto-fit shrinks to fit width instead) */
.swap-tagline > div {
    white-space: nowrap;
}
/* Contact button under the final CTA slide — exact hero button + body font + a blank line above */
.swap-cta {
    margin-top: 1.4em;
    font-family: 'Satoshi', sans-serif;
}
/* Keep a phrase on one line (auto-fit shrinks the slide to honour it) */
.swap-nowrap {
    white-space: nowrap;
}
.swap-list li::before {
    content: "\2022  ";
    opacity: 0.4;
}
.swap-slide:last-child { margin-bottom: 0; }
.swap-slide a { color: inherit; }
.swap-slide a:not(.btn-prime):hover { text-decoration: underline; }
.swap-accent {
    color: #8b3dff;
    font-family: 'Playfair Display', serif;
    font-style: italic;
}
.swap-stage.is-swapping {
    position: relative; /* anchor for the founder portraits in the side gutters */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    height: 100vh;
}
.swap-stage.is-swapping > .swap-slide {
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    opacity: 0;
    z-index: 1; /* pitch text always paints above the founder portraits */
    will-change: opacity;
}

/* Founder portraits pop into the empty side gutters while the pitch is pinned.
   Kevin sits left, Nick right. Their size is driven by the real gutter beside
   the (max 64rem) text column, so they scale fluidly with the viewport: bigger
   on wide monitors, smaller on laptops, and hidden only once the gutter gets
   too narrow to hold them without touching the text. */
.swap-founder {
    position: absolute;
    top: 50%;
    z-index: 0;
    /* gutter = (100vw - text column) / 2; reserve ~1.4rem breathing room */
    width: clamp(60px, calc((100vw - 64rem) / 2 - 1.4rem), 130px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% + 22px)) scale(0.7);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.swap-founder-left { left: 0.7rem; }
.swap-founder-right { right: 0.7rem; transition-delay: 0.09s; }
.dark .swap-founder {
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
    outline: 1px solid rgba(255, 255, 255, 0.10);
}
.swap-stage.founders-in .swap-founder {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
@media (max-width: 1179px) {
    .swap-founder { display: none; } /* below this the gutter is too small to hold a portrait */
}
@media (prefers-reduced-motion: reduce) {
    .swap-founder { transition: opacity 0.4s ease; transform: translateY(-50%) scale(1); }
    .swap-stage.founders-in .swap-founder { transform: translateY(-50%) scale(1); }
}

:root {
    /* Light mode defaults mapping to Brand Kit */
    --ink: #111111;
    --near: #1E1E1E;
    --paper: #FFFFFF;
    --mist: #F2F2F2;
    --mist-2: #E8E8E8;
    --grey: #838282;
    --faint: #B6B5B5;
    --line: rgba(17,17,17,0.10);
    --line-2: rgba(17,17,17,0.16);
    --line-soft: rgba(17,17,17,0.06);
    --accent: #8b3dff;
}

html.dark {
    /* Dark mode mapping to Brand Kit */
    --ink: #F4F4F4;
    --near: #000000;
    --paper: #151515;
    --mist: #1F1F1F;
    --mist-2: #2A2A2A;
    --grey: #9A9A9A;
    --faint: #5E5E5E;
    --line: rgba(255,255,255,0.13);
    --line-2: rgba(255,255,255,0.20);
    --line-soft: rgba(255,255,255,0.07);
}

html.glass-mode {
    /* Glass display mode mapping */
    --ink: #f0f0f5;
    --near: rgba(8, 5, 20, 0.4);
    --paper: rgba(255, 255, 255, 0.03);
    --mist: transparent;
    --mist-2: rgba(255, 255, 255, 0.02);
    --grey: rgba(255, 255, 255, 0.4);
    --faint: rgba(255, 255, 255, 0.25);
    --line: rgba(255, 255, 255, 0.06);
    --line-2: rgba(255, 255, 255, 0.08);
    --line-soft: rgba(255, 255, 255, 0.04);
    --accent: var(--ink);
}

/* --- Echo Text Effect --- */
.echo-stack {
    position: relative;
    display: inline-block;
    line-height: 0.9;
}
.echo-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
}
.echo-1 { --eo: -0.04em; color: #bfbfbf; text-shadow: 0 0 40px rgba(0, 0, 0, 0.1); }
.echo-2 { --eo: -0.08em; color: #c9c9c9; }
.echo-3 { --eo: -0.12em; color: #d1d1d1; }
.echo-4 { --eo: -0.16em; color: #d9d9d9; }
.echo-layer { transform: translate(var(--eo), var(--eo)); }
.dark .echo-1 { color: #333333; text-shadow: 0 0 40px rgba(255, 255, 255, 0.1); }
.dark .echo-2 { color: #2a2a2a; }
.dark .echo-3 { color: #222222; }
.dark .echo-4 { color: #1a1a1a; }
.echo-wrap .echo-layer { white-space: normal; }

/* Day/night colour crossfade. The main word flips first (in sync with the page), then each
   echo layer crossfades in turn so the change ripples backward into the depth like a real echo. */
.echo-stack,
.echo-stack > span,
.echo-layer { transition: color 0.55s cubic-bezier(0.65, 0, 0.35, 1), text-shadow 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.echo-stack > span:not(.echo-layer) { transition-delay: 0s; }
.echo-1 { transition-delay: 0.07s; }
.echo-2 { transition-delay: 0.14s; }
.echo-3 { transition-delay: 0.21s; }
.echo-4 { transition-delay: 0.28s; }

/* One-shot ripple: as the wave passes each layer, it lifts and settles. The class is added on
   theme toggle by nav.js and removed when the wave finishes, so it only plays on day<->night. */
@keyframes echoWave {
    0%   { transform: translate(var(--eo), var(--eo)); opacity: 1; }
    45%  { transform: translate(var(--eo), calc(var(--eo) - 0.05em)); opacity: 0.45; }
    100% { transform: translate(var(--eo), var(--eo)); opacity: 1; }
}
@keyframes echoWaveMain {
    0%   { transform: translateY(0); opacity: 1; }
    45%  { transform: translateY(-0.035em); opacity: 0.8; }
    100% { transform: translateY(0); opacity: 1; }
}
html.echo-rippling .echo-stack > span:not(.echo-layer) { animation: echoWaveMain 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0s both; }
html.echo-rippling .echo-1 { animation: echoWave 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.07s both; }
html.echo-rippling .echo-2 { animation: echoWave 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.14s both; }
html.echo-rippling .echo-3 { animation: echoWave 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.21s both; }
html.echo-rippling .echo-4 { animation: echoWave 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.28s both; }
@media (prefers-reduced-motion: reduce) {
    html.echo-rippling .echo-layer,
    html.echo-rippling .echo-stack > span:not(.echo-layer) { animation: none; }
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f2f2f2; }
::-webkit-scrollbar-thumb { background: #111111; border-radius: 4px; }
.dark ::-webkit-scrollbar-track { background: #111111; }
.dark ::-webkit-scrollbar-thumb { background: #f2f2f2; }

/* --- Contact Form Input Animations --- */
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label {
    transform: translateY(-2.25rem) scale(0.8);
    color: #121212;
}
.dark .input-group input:focus ~ label,
.dark .input-group input:not(:placeholder-shown) ~ label,
.dark .input-group textarea:focus ~ label,
.dark .input-group textarea:not(:placeholder-shown) ~ label {
    color: #f2f2f2;
}
.input-border {
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.6, 0.01, -0.05, 0.9);
}
.input-group input:focus ~ .input-border,
.input-group textarea:focus ~ .input-border {
    transform: scaleX(1);
}

/* --- Service / Budget Radio Chips --- */
.service-radio:checked + div {
    background-color: #121212;
    color: #ffffff;
    border-color: #121212;
}
.dark .service-radio:checked + div {
    background-color: #f2f2f2;
    color: #111111;
    border-color: #f2f2f2;
}

/* --- Magnetic Button --- */
.magnetic-btn:hover .btn-fill {
    transform: scale(1.05);
}
.magnetic-btn .btn-fill {
    transition: transform 0.4s cubic-bezier(0.6, 0.01, -0.05, 0.9);
}

/* --- Prime Action Buttons (Contact) --- */
.btn-prime {
    color: #8b3dff !important;
    border: 1px solid #8b3dff !important;
    background-color: transparent !important;
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

.btn-prime * {
    color: #8b3dff !important;
    transition: color 0.3s ease-in-out;
}

.btn-prime:hover {
    background-color: #8b3dff !important;
    color: #ffffff !important;
}

.btn-prime:hover * {
    color: #ffffff !important;
}


/* --- Expertise Icon Accents --- */
.group:hover .material-icons {
    color: #8b3dff !important;
    transition: color 0.3s ease;
}

.text-brand-color {
    color: #8b3dff !important;
}

/* --- Boids Canvas --- */
#boids-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
#boids-container canvas {
    display: block;
}

/* --- Mobile Menu --- */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-menu.open {
    transform: translateX(0);
}

/* --- Primary nav overlap fix ---
   The desktop nav was viewport-centred while position:absolute, so it overlapped the
   logo (until ~1024px) and the right-hand controls (until ~1330px) — collapsing on
   resize. Centre it in the FLOW instead (between the logo and the controls, so it can
   never overlap them), and only reveal the desktop nav + CTA when everything actually
   fits (>=1200px). The hamburger menu handles every width below that. */
#primary-nav {
    position: static !important;
    left: auto !important;
    transform: none !important;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}
@media (max-width: 1199px) {
    #primary-nav { display: none !important; }
    #nav-cta { display: none !important; }
    #mobile-menu-btn { display: flex !important; }
}
@media (min-width: 1200px) {
    #primary-nav { display: flex !important; }
    #nav-cta { display: block !important; }
    #mobile-menu-btn { display: none !important; }
}

/* --- Hero Float Animation --- */
.hero-float {
    animation: heroFloat 8s ease-in-out infinite;
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
/* Larger amplitude for the oversized hero title (11vw) so the same gentle
   levitation actually reads at that scale, like the smaller shadowed titles. */
.hero-float-xl {
    animation: heroFloat 8s ease-in-out infinite;
}
@media (min-width: 768px) {
    .hero-float-xl { animation-name: heroFloatXl; }
}
@keyframes heroFloatXl {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

/* Hero service icon (sits beside the shadowed echo title). Mirrors the echo
   layers' soft shadow and day/night/glass behaviour so the icon feels shadowed
   and themed exactly like the title. Colour comes from text-black dark:text-white. */
.hero-icon {
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    transition: color 0.55s cubic-bezier(0.65, 0, 0.35, 1), text-shadow 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.dark .hero-icon {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
}
html.glass-mode .hero-icon {
    color: #fff !important;
    text-shadow: 0 0 28px rgba(255, 255, 255, 0.55);
}

/* --- Page Fade In --- */
.page-content {
    animation: fadeIn 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Toast Notifications --- */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    z-index: 9999;
    font-family: "Satoshi", sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    transform: translateY(calc(100% + 3rem));
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.toast.show {
    transform: translateY(0);
}
.toast.success {
    background-color: #111;
    color: #f2f2f2;
}
.toast.error {
    background-color: #dc2626;
    color: #fff;
}

/* --- No Scrollbar Utility --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Header Toggles --- */
.toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(0,0,0,0.1);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s;
}
.toggle-btn:hover {
    border-color: rgba(0,0,0,0.3);
}
.dark .toggle-btn {
    border-color: rgba(255,255,255,0.1);
}
.dark .toggle-btn:hover {
    border-color: rgba(255,255,255,0.3);
}

/* --- Expert Glass Toggle Switch --- */
#glass-toggle {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgba(139, 61, 255, 0.05);
    border: 1px solid rgba(139, 61, 255, 0.1);
    color: #8b3dff;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#glass-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #8b3dff, #6c5ce7);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

#glass-toggle:hover {
    transform: scale(1.05);
    border-color: #8b3dff;
    box-shadow: 0 0 20px rgba(139, 61, 255, 0.2);
}

#glass-toggle.active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 30px rgba(139, 61, 255, 0.4);
}

#glass-toggle.active::before {
    opacity: 1;
}

#glass-toggle .material-icons {
    font-size: 1.1rem;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#glass-toggle:hover .material-icons {
    transform: rotate(45deg);
}

/* --- Placeholder Page --- */
.placeholder-section {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

/* ================================= */
/* MOBILE RESPONSIVE OVERRIDES       */
/* ================================= */

@media (max-width: 768px) {
    /* --- Hero Text --- */
    .echo-stack {
        line-height: 0.85;
    }
    .echo-layer {
        white-space: normal;
    }

    /* --- Header Controls --- */
    .toggle-btn {
        width: 2rem;
        height: 2rem;
    }
    .toggle-btn .material-icons {
        font-size: 1rem;
    }
    #glass-toggle {
        width: 2rem;
        height: 2rem;
    }
    #glass-toggle .material-icons {
        font-size: 0.9rem;
    }

    /* --- Portfolio Grid --- */
    .aspect-video {
        aspect-ratio: 16/9;
    }

    /* --- Expertise Cards --- */
    .min-h-\[400px\] {
        min-height: 280px;
    }

    /* --- CTA Buttons --- */
    .btn-prime.inline-flex {
        font-size: 0.875rem;
        padding: 0.875rem 1.5rem;
    }

    /* --- Footer --- */
    footer .grid {
        gap: 2rem;
    }
    footer h2 {
        font-size: 1.5rem;
    }

    /* --- Contact Page LET'S TALK --- */
    .placeholder-section {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    /* --- Footer Big Text --- */
    footer h2[class*="text-[14vw]"] {
        font-size: 12vw;
    }
}

/* --- VERTICAL PHONE RESOLUTION OPTIMIZATIONS --- */
@media (max-width: 768px) and (orientation: portrait) {
    /* Texts: Shrink large display text to fit narrow screens */
    h1.text-4xl, h1.text-5xl, h1.text-6xl {
        font-size: 2.75rem !important;
        line-height: 1.1 !important;
    }
    .text-6xl, .text-7xl, .text-8xl, .text-9xl {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }

    /* Panels/Covers: Reduce heavy padding */
    .p-12, .px-12, .py-12, .p-10, .px-10, .py-10, .p-8, .px-8, .py-8 {
        padding: 1.25rem !important;
    }
    
    .px-6 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    
    /* Optimize vertical spacing (covers). Keep top and bottom separate: a section
       with pb-24 must NOT have its padding-top forced (that pulled hero titles up
       under the fixed nav). */
    .pt-24, .pt-32, .py-24 {
        padding-top: 3rem !important;
    }
    .pb-24, .pb-32, .py-24 {
        padding-bottom: 3rem !important;
    }
    /* Hero sections sit beneath the fixed 80px nav, so they need real top clearance. */
    .pt-40 {
        padding-top: 8rem !important;
    }

    /* Reduce gaps in grids and flex layouts */
    .gap-12, .gap-16, .gap-8 {
        gap: 1.5rem !important;
    }

    /* Adjust Expertise/Service cards so they aren't overly tall */
    .min-h-\[400px\] {
        min-height: 250px !important;
    }
}

/* Force black footer background as per user request */
footer {
    background-color: #1e1e1e !important;
}
footer .text-black, footer .dark\:text-\[\#f6f6f6\] {
    color: #f6f6f6 !important;
}
footer .bg-background-light, footer .dark\:bg-\[\#1e1e1e\] {
    background-color: #1e1e1e !important;
}

/* ========== Onze aanpak / plan van aanpak (homepage, mirrored orthogonal flow) ========== */
.bs-aanpak{
  /* ink = monochrome accent (connectors, heading, pac-man) — adapts to theme */
  --bs-ink:#141414;
  /* panels: WHITE in day mode */
  --bs-card:#ffffff; --bs-card-text:#141414; --bs-card-muted:#5f5f5f; --bs-card-border:rgba(0,0,0,.09);
  --bs-chip-bg:rgba(0,0,0,.05); --bs-chip-bd:rgba(0,0,0,.14);
  --bs-shadow:0 30px 60px -30px rgba(0,0,0,.20);
}
html.dark .bs-aanpak{
  --bs-ink:#f5f5f5;
  /* panels: BLACK in night mode */
  --bs-card:#141414; --bs-card-text:#f5f5f5; --bs-card-muted:#a3a3a3; --bs-card-border:rgba(255,255,255,.10);
  --bs-chip-bg:rgba(255,255,255,.08); --bs-chip-bd:rgba(255,255,255,.16);
  --bs-shadow:none;
}
.bs-aanpak .bs-wrap{max-width:1440px;margin:0 auto}
.bs-aanpak header{text-align:center}
.bs-aanpak .bs-eyebrow{display:inline-block;font-family:'Clash Display',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bs-ink);margin-bottom:22px}
.bs-aanpak .bs-title{font-family:'Clash Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2.7rem,7vw,5.5rem);line-height:.9;letter-spacing:-.02em;margin:0 auto;color:var(--bs-ink)}
.bs-aanpak .bs-title em{font-style:normal;color:inherit}
.bs-aanpak .bs-lead{margin:28px auto 0;max-width:52ch;font-size:1.15rem;line-height:1.6;color:var(--bs-ink);opacity:.7}

/* orthogonal flow: alternating cards, SVG connector drawn by js/aanpak-flow.js */
.bs-aanpak .bs-flow{position:relative;margin-top:70px}
.bs-aanpak .bs-flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.bs-aanpak .bs-flow-svg path{stroke:var(--bs-ink);stroke-width:6;stroke-dasharray:12 12;fill:none}
.bs-aanpak .bs-step{position:relative;width:46%;margin-bottom:92px;z-index:1}
.bs-aanpak .bs-step:last-child{margin-bottom:0}
.bs-aanpak .bs-step--r{margin-left:auto}
.bs-aanpak .bs-card{background:var(--bs-card);border:1px solid var(--bs-card-border);border-radius:20px;padding:36px 44px;box-shadow:var(--bs-shadow)}
.bs-aanpak .bs-chip{display:inline-block;font-family:'Clash Display',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bs-card);background:var(--bs-ink);padding:8px 16px;border-radius:6px;margin-bottom:18px}
.bs-aanpak .bs-card h3{font-family:'Clash Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.55rem,2.1vw,2.05rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:14px;color:var(--bs-card-text)}
.bs-aanpak .bs-card p{font-size:1.1rem;line-height:1.6;color:var(--bs-card-muted)}

@media(max-width:820px){
  .bs-aanpak .bs-flow{margin-top:44px;padding-left:26px}
  .bs-aanpak .bs-flow::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;border-left:6px dashed var(--bs-ink)}
  .bs-aanpak .bs-step{width:100%;margin-left:0 !important;margin-bottom:26px}
  .bs-aanpak .bs-card{min-height:0}
}