:root{--navy:#06263f;--navy2:#0a3455;--orange:#f7931e;--orange2:#e77900;--cream:#f4f1e9;--paper:#fffdf8;--text:#12293c;--muted:#65727d;--line:rgba(18,41,60,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--paper);overflow-x:hidden}a{text-decoration:none;color:inherit}img{max-width:100%}.fp-shell{width:min(1180px,calc(100% - 44px));margin-inline:auto}.fp-eyebrow{margin:0;color:var(--orange);font-size:11px;font-weight:850;letter-spacing:2px;text-transform:uppercase}.fp-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(18,41,60,.07)}.fp-header-inner{min-height:78px;display:flex;align-items:center;gap:28px}.fp-brand{width:190px;display:flex;align-items:center;flex:0 0 auto}.fp-brand img,.fp-brand .custom-logo{display:block;width:100%;height:auto}.fp-brand .custom-logo-link{display:block}.fp-nav{margin-left:auto;display:flex;gap:27px;align-items:center}.fp-nav a{font-size:12px;font-weight:720;color:#334a5c}.fp-nav a:hover{color:var(--orange2)}.fp-header-cta{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:7px;background:var(--orange);color:#fff;font-size:12px;font-weight:800;box-shadow:0 8px 22px rgba(247,147,30,.2)}.fp-menu,.fp-mobile-nav{display:none}.fp-hero{position:relative;padding:95px 0;min-height:740px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(90deg,#fffdf8 0 59%,#f0eee8 59% 100%)}.fp-hero:after{content:"";position:absolute;right:-190px;bottom:-310px;width:650px;height:650px;border:110px solid rgba(247,147,30,.07);border-radius:50%}.fp-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.72fr);gap:clamp(62px,7vw,110px);align-items:center}.fp-hero-copy{max-width:720px}.fp-hero h1{max-width:760px;margin:18px 0 0;font-size:clamp(62px,6.6vw,102px);line-height:.95;letter-spacing:-.065em;text-wrap:balance}.fp-hero-text{max-width:630px;margin:28px 0 0;font-size:18px;line-height:1.7;color:var(--muted)}.fp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.fp-btn{min-height:55px;display:inline-flex;align-items:center;justify-content:center;padding:0 23px;border-radius:8px;font-size:13px;font-weight:820}.fp-primary{background:var(--orange);color:#fff;box-shadow:0 14px 30px rgba(247,147,30,.2)}.fp-primary:hover{background:var(--orange2)}.fp-secondary{border:1px solid var(--line);background:#fff;color:var(--navy)}.fp-proof{display:flex;flex-wrap:wrap;gap:18px;margin-top:34px}.fp-proof span{font-size:11px;font-weight:700;color:#6e7a83}.fp-hero-panel{position:relative}.fp-logo-card{min-height:190px;display:grid;place-items:center;padding:24px;border:1px solid rgba(18,41,60,.08);border-radius:18px;background:#fff;box-shadow:0 26px 60px rgba(18,41,60,.12)}.fp-logo-card img{width:min(370px,90%)}.fp-preview{position:relative;width:calc(100% - 42px);min-height:270px;margin:-18px 0 0 42px;padding:32px;border-radius:16px;background-color:var(--navy);background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;box-shadow:0 24px 54px rgba(6,38,63,.2);overflow:hidden}.fp-preview small{display:block;color:#ffad4d;font-size:11px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.25)}.fp-preview h2{max-width:390px;margin:17px 0 0;color:#fff;font-size:32px;line-height:1.06;letter-spacing:-.04em;text-shadow:0 2px 16px rgba(0,0,0,.30)}.fp-preview p{margin:18px 0 0;color:rgba(255,255,255,.84);font-size:13px;font-weight:520;line-height:1.55;text-shadow:0 1px 10px rgba(0,0,0,.28)}.fp-preview a{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.28);color:#fff;font-size:13px;font-weight:850;line-height:1.35;text-shadow:0 1px 10px rgba(0,0,0,.32)}.fp-preview a span{color:var(--orange);font-size:17px;transition:transform .18s ease}.fp-preview a:hover span{transform:translate(2px,-2px)}.fp-section{padding:112px 0}.fp-cream{background:var(--cream)}.fp-heading{max-width:720px}.fp-heading.center{text-align:center;margin-inline:auto}.fp-heading h2,.fp-jobs-head h2{margin:15px 0 0;color:var(--navy);font-size:clamp(42px,4.4vw,68px);line-height:1;letter-spacing:-.055em}.fp-heading.center h2{max-width:850px;margin-inline:auto}.fp-heading>p:not(.fp-eyebrow){margin:24px 0 0;max-width:560px;color:var(--muted);font-size:15px;line-height:1.72}.fp-two-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:55px}.fp-two-cards article{min-height:360px;padding:42px;border-radius:18px;border:1px solid var(--line);background:var(--cream)}.fp-two-cards article.dark{background:var(--navy);color:#fff}.fp-two-cards article>span{color:var(--orange);font-size:11px;font-weight:850}.fp-two-cards h3{margin:80px 0 0;font-size:clamp(34px,3vw,48px);line-height:1;letter-spacing:-.045em}.fp-two-cards p{max-width:510px;margin:20px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.fp-two-cards .dark p{color:rgba(255,255,255,.64)}.fp-two-cards a{display:inline-block;margin-top:28px;color:var(--orange2);font-size:12px;font-weight:820}.fp-two-cards .dark a{color:var(--orange)}.fp-split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:80px}.fp-trades{display:grid;grid-template-columns:1fr 1fr;gap:13px}.fp-trades div{min-height:150px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;padding:24px;border-radius:13px;border:1px solid rgba(18,41,60,.09);background:#fffdf8}.fp-trades span{align-self:start;color:#9ca5ab;font-size:10px;font-weight:850}.fp-trades strong{font-size:21px;line-height:1;color:var(--navy)}.fp-trades i{font-style:normal;color:var(--orange2)}.fp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:55px;border-radius:16px;overflow:hidden;background:var(--line);border:1px solid var(--line)}.fp-steps article{min-height:300px;padding:35px;background:#fffdf8}.fp-steps span{color:var(--orange2);font-size:11px;font-weight:900}.fp-steps h3{margin:105px 0 0;font-size:26px;line-height:1.05;color:var(--navy)}.fp-steps p{margin:15px 0 0;color:var(--muted);font-size:13px;line-height:1.65}.fp-jobs{background:var(--navy);color:#fff}.fp-jobs .fp-eyebrow{color:var(--orange)}.fp-jobs-head{display:flex;align-items:end;justify-content:space-between;gap:30px}.fp-jobs-head h2{color:#fff}.fp-jobs-head>a{margin-bottom:10px;color:var(--orange);font-size:12px;font-weight:820}.fp-job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}.fp-job-grid article{min-height:345px;display:flex;flex-direction:column;padding:28px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045)}.fp-job-grid article>span{width:max-content;padding:7px 10px;border-radius:999px;background:rgba(247,147,30,.13);color:#ffd7a8;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:1px}.fp-job-grid h3{margin:70px 0 0;font-size:29px;line-height:1.03;letter-spacing:-.04em}.fp-job-grid p{margin:20px 0 0;color:rgba(255,255,255,.52);font-size:11px}.fp-job-grid a{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);font-size:11px;font-weight:780}.fp-contact-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(410px,.7fr);gap:90px;align-items:center}.fp-phone{display:inline-flex;flex-direction:column;gap:4px;margin-top:32px;padding-left:17px;border-left:3px solid var(--orange);color:#7a858c;font-size:10px;text-transform:uppercase;letter-spacing:1px}.fp-phone strong{color:var(--navy);font-size:18px;letter-spacing:0}.fp-form-preview{padding:35px;border-radius:17px;background:var(--navy);color:#fff;box-shadow:0 24px 54px rgba(6,38,63,.16)}.fp-form-preview>small{color:var(--orange);font-size:9px;font-weight:850;letter-spacing:1.3px;text-transform:uppercase}.fp-form-preview h3{margin:10px 0 0;font-size:33px;letter-spacing:-.04em}.fp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:25px}.fp-form-grid div{min-height:52px;display:flex;align-items:center;padding:0 13px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.45);font-size:11px}.fp-form-grid .wide{grid-column:1/-1;min-height:88px;align-items:flex-start;padding-top:14px}.fp-form-preview button{width:100%;min-height:53px;margin-top:12px;border:0;border-radius:8px;background:var(--orange);color:#fff;font-weight:800;opacity:.78}.fp-footer{padding:75px 0 25px;background:#031c2e;color:#fff}.fp-footer-grid{display:grid;grid-template-columns:1.2fr .55fr .65fr .9fr;gap:65px}.fp-footer-brand img{width:210px}.fp-footer-brand p{max-width:360px;margin:20px 0 0;color:rgba(255,255,255,.52);font-size:12px;line-height:1.7}.fp-footer-grid>div:not(.fp-footer-brand):not(.fp-footer-card){display:grid;gap:10px}.fp-footer h3{margin:0 0 10px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.38)}.fp-footer a{font-size:11px;color:rgba(255,255,255,.74)}.fp-footer-card{padding:26px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:var(--navy2)}.fp-footer-card span{color:var(--orange);font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:1.3px}.fp-footer-card h3{margin:10px 0 0;color:#fff;font-size:24px;line-height:1.05;letter-spacing:0;text-transform:none}.fp-footer-card a{display:block;margin-top:22px;padding:14px 15px;border-radius:7px;background:#fff;color:var(--navy);font-size:10px;font-weight:800}.fp-footer-bottom{display:flex;justify-content:space-between;margin-top:55px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.3);font-size:9px}.fp-generic{min-height:60vh;padding:130px 0}@media(max-width:1050px){.fp-nav,.fp-header-cta{display:none}.fp-menu{width:44px;height:44px;margin-left:auto;display:grid;place-content:center;gap:5px;border:0;border-radius:7px;background:var(--navy)}.fp-menu span{width:19px;height:2px;background:#fff}.fp-mobile-nav{padding:17px 22px 24px;border-top:1px solid var(--line);background:#fffdf8}.fp-mobile-nav:not([hidden]){display:grid}.fp-mobile-nav a{padding:12px 0;border-bottom:1px solid rgba(18,41,60,.07);font-size:13px;font-weight:740}.fp-hero{min-height:0;background:#fffdf8}.fp-hero-grid,.fp-split,.fp-contact-grid{grid-template-columns:1fr}.fp-hero-panel{max-width:650px}.fp-job-grid{grid-template-columns:1fr 1fr}.fp-footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:720px){.fp-shell{width:min(100% - 30px,1180px)}.fp-header-inner{min-height:68px}.fp-brand{width:155px}.fp-hero{padding:65px 0 72px}.fp-hero h1{font-size:clamp(52px,14vw,74px)}.fp-hero-text{font-size:16px}.fp-actions{display:grid}.fp-btn{width:100%}.fp-proof{display:grid;gap:10px}.fp-logo-card{min-height:145px}.fp-preview{width:calc(100% - 18px);min-height:245px;margin-left:18px;padding:27px}.fp-preview h2{font-size:29px}.fp-preview a{font-size:12.5px}.fp-section{padding:75px 0}.fp-heading h2,.fp-jobs-head h2{font-size:43px}.fp-two-cards,.fp-trades,.fp-steps,.fp-job-grid{grid-template-columns:1fr}.fp-two-cards article{min-height:320px;padding:30px}.fp-two-cards h3{margin-top:65px}.fp-steps{border:0;gap:12px;background:transparent;overflow:visible}.fp-steps article{min-height:250px;border:1px solid var(--line);border-radius:13px}.fp-steps h3{margin-top:80px}.fp-jobs-head{align-items:flex-start;flex-direction:column}.fp-contact-grid{gap:50px}.fp-form-preview{padding:27px 22px}.fp-form-grid{grid-template-columns:1fr}.fp-form-grid .wide{grid-column:auto}.fp-footer-grid{grid-template-columns:1fr;gap:38px}.fp-footer-bottom{flex-direction:column;gap:8px}}

/* =========================================================
   FLEXPERSONEEL V3 - GROTE HERO FOTO
========================================================= */

.fp-hero-background-photo {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;

    width: 52%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Zachte overgang tussen lichte tekstkant en foto */
.fp-hero-background-photo::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            #fffdf8 0%,
            rgba(255,253,248,.93) 5%,
            rgba(255,253,248,.35) 22%,
            rgba(255,253,248,0) 46%
        );

    pointer-events: none;
}

/* Als een foto gekozen is, geen oude beige achtergrond/cirkel als hoofdbeeld */
.fp-hero.has-hero-background {
    background: #fffdf8;
}

.fp-hero.has-hero-background::after {
    opacity: .20;
    z-index: 1;
}

/* Content en kaarten boven de foto houden */
.fp-hero.has-hero-background .fp-hero-grid {
    z-index: 3;
}

/*
 * De kaarten iets naar links trekken zodat een groter deel van
 * de foto zichtbaar blijft, zoals bij de referentiesite.
 */
.fp-hero.has-hero-background .fp-hero-panel {
    transform: translateX(-42px);
}

/* De witte logo-kaart iets compacter zodat de hero-foto meer ruimte krijgt */
.fp-hero.has-hero-background .fp-logo-card {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(3px);
}

/* Het kleine opdrachtblok behoudt zijn eigen, aparte achtergrondfoto */
.fp-hero.has-hero-background .fp-preview {
    position: relative;
}


/* TABLET */
@media (max-width: 1050px) {

    .fp-hero.has-hero-background {
        padding-bottom: 105px;
    }

    .fp-hero-background-photo {
        top: auto;
        width: 100%;
        height: 49%;
    }

    .fp-hero-background-photo::before {
        background:
            linear-gradient(
                180deg,
                #fffdf8 0%,
                rgba(255,253,248,.72) 16%,
                rgba(255,253,248,.08) 48%,
                rgba(255,253,248,0) 100%
            );
    }

    .fp-hero.has-hero-background .fp-hero-panel {
        transform: none;
    }
}


/* MOBILE */
@media (max-width: 720px) {

    .fp-hero.has-hero-background {
        padding-bottom: 82px;
    }

    .fp-hero-background-photo {
        height: 45%;
        background-position: center;
    }

    .fp-hero.has-hero-background .fp-logo-card {
        background: rgba(255,255,255,.97);
    }
}



/* =========================================================
   FLEXPERSONEEL V4 - LOGO OPSCHONEN HERO + GROTERE FOOTER
========================================================= */

/* In de header iets netter centreren */
.fp-brand {
    width: 210px;
}

/* Footer-logo duidelijk groter maken */
.fp-footer-brand img {
    width: 270px;
    max-width: 100%;
}

/* Iets meer lucht bij de footer-brand tekst zodat het grotere logo mooi valt */
.fp-footer-brand p {
    max-width: 390px;
    margin-top: 22px;
}

/* Grote foto-hero zonder extra wit logoblok */
.fp-hero.has-hero-background .fp-hero-panel {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transform: translateX(-18px);
}

/* Verberg eventueel het oude witte logovlak als dat nog ergens cached staat */
.fp-hero.has-hero-background .fp-logo-card {
    display: none !important;
}

/* Donkere opdrachtkaart omhoog en strakker op de foto zetten */
.fp-hero.has-hero-background .fp-preview {
    width: min(100%, 430px);
    min-height: 255px;
    margin: -34px 0 0;
    padding: 34px 32px 28px;
    border-radius: 18px;
}

/* Rechter hero-foto iets sterker zichtbaar maken */
.fp-hero-background-photo {
    width: 54%;
    background-position: center right;
}

/* Zachtere overgang van links naar rechts */
.fp-hero-background-photo::before {
    background:
        linear-gradient(
            90deg,
            #fffdf8 0%,
            rgba(255,253,248,.94) 7%,
            rgba(255,253,248,.58) 18%,
            rgba(255,253,248,.15) 34%,
            rgba(255,253,248,0) 48%
        );
}

@media (max-width: 1050px) {
    .fp-brand {
        width: 185px;
    }

    .fp-footer-brand img {
        width: 240px;
    }

    .fp-hero.has-hero-background .fp-hero-panel {
        transform: none;
    }

    .fp-hero.has-hero-background .fp-preview {
        width: min(100%, 460px);
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .fp-brand {
        width: 160px;
    }

    .fp-footer-brand img {
        width: 220px;
    }

    .fp-hero.has-hero-background .fp-preview {
        width: 100%;
        min-height: 230px;
        padding: 27px 24px 24px;
        margin-top: 0;
    }
}


/* =========================================================
   FLEXPERSONEEL V5 - LOGO VIA CUSTOMIZER
========================================================= */

.fp-brand {
    flex: 0 0 auto;
    overflow: visible;
}

.fp-brand img,
.fp-footer-brand img {
    display: block;
    object-fit: contain;
}

.fp-footer-brand {
    min-width: 0;
}

@media (max-width: 720px) {
    .fp-footer-brand img {
        max-width: min(100%, 300px);
    }
}


/* =========================================================
   FLEXPERSONEEL V6 - FOTO'S IN DOELGROEPBLOKKEN
========================================================= */

.fp-audience-image-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fp-audience-image-card.has-bg-image {
    border-color: rgba(18,41,60,.14);
    box-shadow:
        0 18px 44px rgba(18,41,60,.08),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.fp-two-cards .dark.has-bg-image p {
    color: rgba(255,255,255,.80);
}

.fp-two-cards .dark.has-bg-image h3 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,.24);
}

.fp-two-cards .dark.has-bg-image a {
    color: #ffae4b;
}

.fp-worker-card.has-bg-image h3 {
    color: var(--navy);
}

.fp-worker-card.has-bg-image p {
    color: rgba(18,41,60,.74);
}

.fp-worker-card.has-bg-image a {
    color: var(--orange2);
}

@media (max-width: 720px) {
    .fp-audience-image-card {
        background-position: center;
    }
}


/* =========================================================
   FLEXPERSONEEL V7 - DOELGROEP KEUZEPORTAAL
========================================================= */

.fp-audience-portal {
    gap: 22px;
}

.fp-audience-portal .fp-audience-image-card {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    padding: 34px 36px 36px;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 22px 54px rgba(18,41,60,.07);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.fp-audience-portal .fp-audience-image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 65px rgba(18,41,60,.11);
}

/* Een zachte foto-glow aan de rechterzijde zodat de afbeelding aanwezig is,
   maar de content niet overheerst. */
.fp-audience-portal .fp-audience-image-card.has-bg-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0) 52%,
            rgba(255,255,255,.08) 100%
        );
    pointer-events: none;
}

.fp-audience-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.fp-audience-number {
    color: var(--orange) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
}

.fp-audience-type {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* Opdrachtgever */
.fp-employer-card .fp-audience-type {
    color: #ffd29c;
    border: 1px solid rgba(247,147,30,.18);
    background: rgba(247,147,30,.10);
}

/* Vakman */
.fp-worker-card .fp-audience-type {
    color: var(--orange2);
    border: 1px solid rgba(247,147,30,.18);
    background: rgba(247,147,30,.08);
}

.fp-audience-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 88px;
}

.fp-audience-portal .fp-audience-card-content h3 {
    max-width: 520px;
    margin: 0;
    font-size: clamp(38px, 3.2vw, 54px);
    line-height: .98;
    letter-spacing: -.05em;
}

.fp-audience-portal .fp-audience-card-content > p {
    max-width: 550px;
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.72;
}

.fp-employer-card .fp-audience-card-content > p {
    color: rgba(255,255,255,.74);
}

.fp-worker-card .fp-audience-card-content > p {
    color: rgba(18,41,60,.69);
}

.fp-audience-points {
    list-style: none;
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 27px 0 31px;
}

.fp-audience-points li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 9px;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
}

.fp-audience-points li > span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 9px !important;
    font-weight: 900 !important;
}

.fp-employer-card .fp-audience-points li {
    color: rgba(255,255,255,.84);
}

.fp-employer-card .fp-audience-points li > span {
    color: #ffad4a;
    background: rgba(247,147,30,.12);
}

.fp-worker-card .fp-audience-points li {
    color: rgba(18,41,60,.78);
}

.fp-worker-card .fp-audience-points li > span {
    color: var(--orange2);
    background: rgba(247,147,30,.10);
}

.fp-audience-button {
    width: fit-content;
    min-height: 49px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: auto !important;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.fp-audience-button > span {
    font-size: 16px !important;
    transition: transform .18s ease;
}

.fp-audience-button:hover {
    transform: translateY(-1px);
}

.fp-audience-button:hover > span {
    transform: translateX(3px);
}

.fp-audience-button-light {
    color: var(--navy) !important;
    background: #fff !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.fp-audience-button-light:hover {
    background: #fff5e9 !important;
}

.fp-audience-button-dark {
    color: #fff !important;
    background: var(--navy) !important;
    box-shadow: 0 12px 24px rgba(6,38,63,.14);
}

.fp-audience-button-dark:hover {
    background: var(--navy2) !important;
}

/* Zorg dat achtergrondfoto's echt subtiel blijven */
.fp-employer-card.has-bg-image {
    background-position: center;
}

.fp-worker-card.has-bg-image {
    background-position: center;
}

@media (max-width: 900px) {
    .fp-audience-portal {
        grid-template-columns: 1fr;
    }

    .fp-audience-portal .fp-audience-image-card {
        min-height: 450px;
    }

    .fp-audience-card-content {
        padding-top: 68px;
    }
}

@media (max-width: 720px) {
    .fp-audience-portal .fp-audience-image-card {
        min-height: 0;
        padding: 28px 24px;
    }

    .fp-audience-card-content {
        padding-top: 58px;
    }

    .fp-audience-portal .fp-audience-card-content h3 {
        font-size: 38px;
    }

    .fp-audience-button {
        width: 100%;
    }
}


/* =========================================================
   FLEXPERSONEEL V8 - VAKGEBIEDEN MET FOTO'S + FILTERLINKS
========================================================= */

.fp-trades-section {
    overflow: hidden;
}

.fp-trades-layout {
    align-items: start;
}

.fp-trades-heading {
    position: sticky;
    top: 120px;
}

.fp-trades-all-link {
    min-height: 48px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    padding: 0 17px;
    border-radius: 8px;
    color: #fff;
    background: var(--navy);
    font-size: 11.5px;
    font-weight: 850;
    box-shadow: 0 12px 28px rgba(6,38,63,.12);
    transition: transform .18s ease, background .18s ease;
}

.fp-trades-all-link:hover {
    transform: translateY(-2px);
    background: var(--navy2);
}

.fp-trades-all-link span {
    color: var(--orange);
    font-size: 16px;
}

.fp-trades-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.fp-trades-cards .fp-trade-card-new {
    min-height: 255px;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid rgba(18,41,60,.09);
    border-radius: 16px;
    background: #fffdf8;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(18,41,60,.035);
    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease;
}

.fp-trades-cards .fp-trade-card-new:hover {
    transform: translateY(-4px);
    border-color: rgba(247,147,30,.28);
    box-shadow: 0 22px 48px rgba(18,41,60,.08);
}

.fp-trade-media {
    position: relative;
    min-height: 155px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(247,147,30,.12), transparent 34%),
        linear-gradient(135deg, #edf1f3, #e3e9ec);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fp-trade-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(6,38,63,0) 48%,
            rgba(6,38,63,.15) 100%
        );
    pointer-events: none;
}

.fp-trade-placeholder {
    color: rgba(6,38,63,.10);
    font-size: 62px;
    font-weight: 900;
    letter-spacing: -.06em;
}

.fp-trade-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 17px 19px 19px;
}

.fp-trade-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fp-trade-card-meta span:first-child {
    color: #9aa4ac;
    font-size: 9px;
    font-weight: 900;
}

.fp-trade-card-meta span:last-child {
    color: var(--orange2);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.fp-trade-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 14px;
}

.fp-trade-card-bottom strong {
    max-width: 84%;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.fp-trade-card-bottom i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border-radius: 50%;
    color: var(--orange2);
    background: rgba(247,147,30,.10);
    font-size: 14px;
    font-style: normal;
    transition: transform .18s ease, background .18s ease;
}

.fp-trade-card-new:hover .fp-trade-card-bottom i {
    transform: translate(2px,-2px);
    background: rgba(247,147,30,.16);
}

@media (max-width: 1050px) {
    .fp-trades-heading {
        position: static;
    }
}

@media (max-width: 720px) {
    .fp-trades-cards {
        grid-template-columns: 1fr;
    }

    .fp-trades-cards .fp-trade-card-new {
        min-height: 230px;
    }

    .fp-trade-media {
        min-height: 145px;
    }

    .fp-trades-all-link {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================================
   FLEXPERSONEEL V9 - COMPACTE VAKGEBIEDKAARTEN
   Behoudt foto's, Customizer en filterlinks van V8.
========================================================= */

.fp-trades-cards {
    gap: 13px !important;
}

.fp-trades-cards .fp-trade-card-new {
    min-height: 0 !important;
    height: 178px !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 22px rgba(18,41,60,.035) !important;
}

.fp-trades-cards .fp-trade-card-new:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 32px rgba(18,41,60,.075) !important;
}

/* Kleine fotozone in plaats van een halve grote kaart */
.fp-trade-media {
    min-height: 0 !important;
    height: 92px !important;
    flex: 0 0 92px !important;
    background-position: center !important;
}

/* Placeholder zonder foto rustig houden */
.fp-trade-placeholder {
    font-size: 38px !important;
    opacity: .7;
}

/* Compact tekstgedeelte */
.fp-trade-card-body {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding: 10px 13px 12px !important;
}

.fp-trade-card-meta {
    min-height: 13px;
}

.fp-trade-card-meta span:first-child {
    font-size: 8px !important;
}

.fp-trade-card-meta span:last-child {
    font-size: 7px !important;
    letter-spacing: .9px !important;
}

.fp-trade-card-bottom {
    align-items: center !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}

.fp-trade-card-bottom strong {
    max-width: calc(100% - 34px) !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
}

.fp-trade-card-bottom i {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    font-size: 12px !important;
}

/* Linkerkolom ook iets compacter, zodat de sectie niet onnodig hoog wordt */
.fp-trades-heading h2 {
    max-width: 520px;
}

@media (max-width: 720px) {
    .fp-trades-cards .fp-trade-card-new {
        height: 170px !important;
    }

    .fp-trade-media {
        height: 86px !important;
        flex-basis: 86px !important;
    }

    .fp-trade-card-bottom strong {
        font-size: 18px !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V10 - CLEAN FIX VAKGEBIEDKAARTEN
   Reset oude .fp-trades div-regels die binnenste blokken raakten.
========================================================= */

/* De hoofdkaart blijft één enkel vlak */
.fp-trades-cards .fp-trade-card-new {
    height: 190px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(18,41,60,.09) !important;
    border-radius: 14px !important;
    background: #fffdf8 !important;
    overflow: hidden !important;
}

/* BELANGRIJK: oude algemene .fp-trades div styling uitschakelen */
.fp-trades-cards .fp-trade-card-new > div,
.fp-trades-cards .fp-trade-card-new div {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Fotozone */
.fp-trades-cards .fp-trade-media {
    position: relative !important;
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    flex: 0 0 108px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Alleen een grijze placeholder wanneer er GEEN foto is gekozen */
.fp-trades-cards .fp-trade-media:not(.has-image) {
    background-image: linear-gradient(135deg, #eef1f2, #e4e8e9) !important;
}

/* Bij een gekozen Customizer-foto wint de inline background-image uit PHP */
.fp-trades-cards .fp-trade-media.has-image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Mooie lichte overgang onderin de foto */
.fp-trades-cards .fp-trade-media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg,
        rgba(6,38,63,0) 55%,
        rgba(6,38,63,.16) 100%
    ) !important;
    pointer-events: none !important;
}

/* Zonder foto: alleen een subtiel nummer */
.fp-trades-cards .fp-trade-placeholder {
    position: relative !important;
    z-index: 1 !important;
    color: rgba(6,38,63,.16) !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

/* Onderste tekstzone */
.fp-trades-cards .fp-trade-card-body {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 10px 13px 11px !important;
    background: #fffdf8 !important;
}

/* Meta boven de naam */
.fp-trades-cards .fp-trade-card-meta {
    width: 100% !important;
    min-height: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    padding: 0 !important;
}

.fp-trades-cards .fp-trade-card-meta span:first-child {
    color: #98a3ab !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
}

.fp-trades-cards .fp-trade-card-meta span:last-child {
    color: var(--orange2) !important;
    font-size: 7px !important;
    font-weight: 850 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
}

/* Naam + pijl */
.fp-trades-cards .fp-trade-card-bottom {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 3px 0 0 !important;
}

.fp-trades-cards .fp-trade-card-bottom strong {
    display: block !important;
    max-width: calc(100% - 34px) !important;
    margin: 0 !important;
    color: var(--navy) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
}

.fp-trades-cards .fp-trade-card-bottom i {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: grid !important;
    place-items: center !important;
    align-self: flex-end !important;
    border-radius: 50% !important;
    color: var(--orange2) !important;
    background: rgba(247,147,30,.10) !important;
    font-size: 12px !important;
    font-style: normal !important;
}

/* Hover rustig houden */
.fp-trades-cards .fp-trade-card-new:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(247,147,30,.26) !important;
    box-shadow: 0 16px 36px rgba(18,41,60,.08) !important;
}

@media (max-width: 720px) {
    .fp-trades-cards .fp-trade-card-new {
        height: 185px !important;
    }

    .fp-trades-cards .fp-trade-media {
        height: 104px !important;
        min-height: 104px !important;
        flex-basis: 104px !important;
    }

    .fp-trades-cards .fp-trade-card-bottom strong {
        font-size: 18px !important;
    }
}



/* =========================================================
   FLEXPERSONEEL V11 - CUSTOMIZER FOTO FIX
========================================================= */

.fp-trades-cards .fp-trade-media.has-image::after {
    background: linear-gradient(
        180deg,
        rgba(6,38,63,0) 62%,
        rgba(6,38,63,.12) 100%
    ) !important;
}

/* =========================================================
   FLEXPERSONEEL V12 - MEER FOTO, MINDER WIT
========================================================= */

.fp-trades-cards .fp-trade-card-new {
    height: 180px !important;
}

.fp-trades-cards .fp-trade-media {
    height: 128px !important;
    min-height: 128px !important;
    flex: 0 0 128px !important;
}

.fp-trades-cards .fp-trade-card-body {
    min-height: 52px !important;
    flex: 0 0 52px !important;
    padding: 8px 13px 9px !important;
    justify-content: center !important;
}

.fp-trades-cards .fp-trade-card-meta {
    display: none !important;
}

.fp-trades-cards .fp-trade-card-bottom {
    flex: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fp-trades-cards .fp-trade-card-bottom strong {
    max-width: calc(100% - 30px) !important;
    color: var(--navy) !important;
    font-size: 17px !important;
    font-weight: 820 !important;
    line-height: 1.05 !important;
}

.fp-trades-cards .fp-trade-card-bottom i {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
    border-radius: 0 !important;
    color: var(--navy) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.fp-trades-cards .fp-trade-card-new:hover .fp-trade-card-bottom i {
    transform: translate(2px,-1px) !important;
    background: transparent !important;
}

.fp-trades-cards .fp-trade-placeholder {
    font-size: 34px !important;
    color: rgba(6,38,63,.13) !important;
}

@media (max-width: 720px) {
    .fp-trades-cards .fp-trade-card-new {
        height: 178px !important;
    }

    .fp-trades-cards .fp-trade-media {
        height: 126px !important;
        min-height: 126px !important;
        flex-basis: 126px !important;
    }

    .fp-trades-cards .fp-trade-card-body {
        min-height: 52px !important;
        flex-basis: 52px !important;
    }

    .fp-trades-cards .fp-trade-card-bottom strong {
        font-size: 18px !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V13 - MINIMALE TEKSTBALK VAKGEBIEDEN
========================================================= */

/* Nog iets compacter: nadruk ligt nu duidelijk op de foto */
.fp-trades-cards .fp-trade-card-new {
    height: 168px !important;
}

/* Foto blijft groot */
.fp-trades-cards .fp-trade-media {
    height: 128px !important;
    min-height: 128px !important;
    flex: 0 0 128px !important;
}

/* Witte balk terugbrengen naar ±40px */
.fp-trades-cards .fp-trade-card-body {
    min-height: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    padding: 5px 12px 6px !important;
    justify-content: center !important;
}

/* Naam en pijl direct naast elkaar */
.fp-trades-cards .fp-trade-card-bottom {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tekst subtieler */
.fp-trades-cards .fp-trade-card-bottom strong {
    max-width: none !important;
    color: var(--navy) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.015em !important;
}

/* Kleine zwarte/donkerblauwe pijl direct achter de functienaam */
.fp-trades-cards .fp-trade-card-bottom i {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
    margin: 0 !important;
    color: var(--navy) !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: none !important;
}

.fp-trades-cards .fp-trade-card-new:hover .fp-trade-card-bottom i {
    transform: translate(2px,-1px) !important;
}

/* Mobiel dezelfde rustige verhouding houden */
@media (max-width: 720px) {
    .fp-trades-cards .fp-trade-card-new {
        height: 166px !important;
    }

    .fp-trades-cards .fp-trade-media {
        height: 126px !important;
        min-height: 126px !important;
        flex-basis: 126px !important;
    }

    .fp-trades-cards .fp-trade-card-body {
        min-height: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        padding: 5px 11px 6px !important;
    }

    .fp-trades-cards .fp-trade-card-bottom strong {
        font-size: 15px !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V14 - GROTERE PIJL BIJ VAKGEBIEDEN
========================================================= */

.fp-trades-cards .fp-trade-card-bottom i {
    font-size: 14px !important;
    font-weight: 900 !important;
    margin-left: 1px !important;
}


/* =========================================================
   FLEXPERSONEEL V15 - STAPPENBLOK LOSSE KAARTEN
========================================================= */

.fp-steps-section .fp-heading {
    max-width: 760px;
}

.fp-steps-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    margin-top: 52px;
}

.fp-step-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    padding: 34px 32px;
    border: 1px solid rgba(18,41,60,.10);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 14px 34px rgba(6,38,63,.06);
}

.fp-step-card-featured {
    background: var(--navy);
    border-color: rgba(6,38,63,.14);
    box-shadow: 0 22px 50px rgba(6,38,63,.16);
}

.fp-step-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.fp-step-number {
    color: var(--orange2);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.fp-step-role {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(247,147,30,.16);
    background: rgba(247,147,30,.08);
    color: var(--orange2);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.fp-step-card-featured .fp-step-number {
    color: #ffbc66;
}

.fp-step-card-featured .fp-step-role {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: #ffd7a8;
}

.fp-step-card h3 {
    margin: 72px 0 0;
    color: var(--navy);
    font-size: clamp(28px, 2.4vw, 38px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.fp-step-card p {
    margin: 18px 0 0;
    max-width: 300px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.fp-step-card-featured h3 {
    color: #fff;
}

.fp-step-card-featured p {
    color: rgba(255,255,255,.72);
}

.fp-step-arrow {
    display: grid;
    place-items: center;
}

.fp-step-arrow span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(247,147,30,.10);
    color: var(--orange2);
    font-size: 24px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(247,147,30,.14);
}

.fp-steps-note {
    margin: 26px 0 0;
    color: #74808a;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.7;
    text-align: center;
}

@media (max-width: 1050px) {
    .fp-steps-flow {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .fp-step-arrow {
        min-height: 34px;
    }

    .fp-step-arrow span {
        transform: rotate(90deg);
    }
}

@media (max-width: 720px) {
    .fp-step-card {
        min-height: 0;
        padding: 28px 24px;
        border-radius: 15px;
    }

    .fp-step-card h3 {
        margin-top: 48px;
        font-size: 28px;
    }

    .fp-step-card p {
        max-width: none;
        font-size: 13.5px;
    }

    .fp-steps-note {
        margin-top: 18px;
        font-size: 11.5px;
    }
}

/* =========================================================
   FLEXPERSONEEL V16 - WARME PROCESS FLOW
========================================================= */

.fp-steps-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 20%, rgba(247,147,30,.09), transparent 24%),
        radial-gradient(circle at 91% 75%, rgba(247,147,30,.08), transparent 27%),
        linear-gradient(135deg, #f1ede4 0%, #eee8dd 100%);
}

.fp-steps-shell {
    position: relative;
    z-index: 3;
}

.fp-steps-heading {
    max-width: 760px;
}

.fp-steps-heading h2 {
    max-width: 740px;
}

.fp-process-glow {
    position: absolute;
    z-index: 0;
    border-radius: 999px;
    filter: blur(4px);
    pointer-events: none;
}

.fp-process-glow-one {
    width: 410px;
    height: 410px;
    top: -240px;
    right: 18%;
    border: 70px solid rgba(247,147,30,.035);
}

.fp-process-glow-two {
    width: 360px;
    height: 360px;
    bottom: -235px;
    left: 23%;
    border: 60px solid rgba(247,147,30,.04);
}

.fp-process-decoration {
    position: absolute;
    z-index: 1;
    color: var(--orange);
    opacity: .075;
    pointer-events: none;
}

.fp-process-decoration svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-process-decoration-hammer {
    width: 245px;
    height: 245px;
    top: 62px;
    right: 3.5%;
    transform: rotate(8deg);
}

.fp-process-decoration-leaf {
    width: 260px;
    height: 260px;
    bottom: -18px;
    left: 1%;
    transform: rotate(-10deg);
}

.fp-process-decoration-helmet {
    width: 185px;
    height: 185px;
    right: 14%;
    bottom: -10px;
    opacity: .055;
    transform: rotate(6deg);
}

.fp-steps-flow {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1fr) 66px minmax(0,1fr) 66px minmax(0,1fr);
    align-items: stretch;
    margin-top: 52px;
}

/* side cards now warm instead of white */
.fp-steps-flow .fp-step-card {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 32px;
    border: 1px solid rgba(18,41,60,.09);
    border-radius: 19px;
    background: rgba(255,250,242,.84);
    box-shadow:
        0 18px 48px rgba(61,49,33,.075),
        inset 0 1px 0 rgba(255,255,255,.82);
    backdrop-filter: blur(2px);
}

.fp-steps-flow .fp-step-card-three {
    background: rgba(249,245,237,.90);
}

.fp-steps-flow .fp-step-card-featured {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(247,147,30,.12), transparent 35%),
        linear-gradient(145deg, #06263f, #0b3859);
    border-color: rgba(6,38,63,.22);
    box-shadow: 0 26px 58px rgba(6,38,63,.18);
}

.fp-steps-flow .fp-step-card-featured::after {
    content: "";
    position: absolute;
    width: 155px;
    height: 155px;
    right: -76px;
    bottom: -80px;
    border: 26px solid rgba(247,147,30,.075);
    border-radius: 50%;
}

.fp-step-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.fp-step-number {
    color: var(--orange2);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.1px;
}

.fp-step-role {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(247,147,30,.20);
    border-radius: 999px;
    color: var(--orange2);
    background: rgba(247,147,30,.07);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}

.fp-step-card-featured .fp-step-number {
    color: #ffbd68;
}

.fp-step-card-featured .fp-step-role {
    color: #ffd8a8;
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
}

.fp-step-mini-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-top: 44px;
    border: 1px solid rgba(247,147,30,.20);
    border-radius: 13px;
    color: var(--orange2);
    background: rgba(247,147,30,.07);
}

.fp-step-mini-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-step-card-featured .fp-step-mini-icon {
    color: #ffc277;
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
}

.fp-steps-flow .fp-step-card h3 {
    margin: 24px 0 0;
    color: var(--navy);
    font-size: clamp(28px,2.25vw,37px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.fp-steps-flow .fp-step-card p {
    max-width: 315px;
    margin: 17px 0 0;
    color: #66727c;
    font-size: 13.5px;
    line-height: 1.72;
}

.fp-steps-flow .fp-step-card-featured h3 {
    color: #fff;
}

.fp-steps-flow .fp-step-card-featured p {
    color: rgba(255,255,255,.72);
}

/* Flow arrows + short connecting strokes */
.fp-step-arrow {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
}

.fp-step-arrow::before,
.fp-step-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 1px;
    background: rgba(231,121,0,.28);
}

.fp-step-arrow::before {
    left: 0;
}

.fp-step-arrow::after {
    right: 0;
}

.fp-step-arrow span {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(247,147,30,.24);
    border-radius: 50%;
    color: var(--orange2);
    background: #f8e9d5;
    font-size: 20px;
    font-weight: 850;
    box-shadow: 0 7px 18px rgba(117,74,23,.08);
}

.fp-steps-badges {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px;
}

.fp-steps-badges > span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(18,41,60,.08);
    border-radius: 999px;
    color: #69747c;
    background: rgba(255,250,242,.72);
    font-size: 10.5px;
    font-weight: 700;
}

.fp-steps-badges i {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--orange2);
    background: rgba(247,147,30,.10);
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
}

@media (max-width: 1050px) {
    .fp-steps-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fp-step-arrow {
        min-height: 42px;
    }

    .fp-step-arrow::before,
    .fp-step-arrow::after {
        display: none;
    }

    .fp-step-arrow span {
        transform: rotate(90deg);
    }

    .fp-process-decoration-hammer {
        width: 190px;
        height: 190px;
        right: -45px;
    }

    .fp-process-decoration-leaf {
        width: 200px;
        height: 200px;
        left: -45px;
    }
}

@media (max-width: 720px) {
    .fp-steps-section {
        background:
            radial-gradient(circle at 100% 7%, rgba(247,147,30,.08), transparent 24%),
            linear-gradient(135deg, #f1ede4, #eee8dd);
    }

    .fp-steps-flow {
        margin-top: 38px;
    }

    .fp-steps-flow .fp-step-card {
        min-height: 0;
        padding: 25px 22px 27px;
        border-radius: 16px;
    }

    .fp-step-mini-icon {
        margin-top: 34px;
    }

    .fp-steps-flow .fp-step-card h3 {
        font-size: 29px;
    }

    .fp-steps-flow .fp-step-card p {
        max-width: none;
        font-size: 13px;
    }

    .fp-process-decoration-hammer {
        width: 145px;
        height: 145px;
        top: 60px;
        right: -50px;
    }

    .fp-process-decoration-leaf {
        width: 160px;
        height: 160px;
        bottom: 20px;
        left: -60px;
    }

    .fp-process-decoration-helmet {
        display: none;
    }

    .fp-steps-badges {
        display: grid;
        justify-content: stretch;
    }

    .fp-steps-badges > span {
        justify-content: flex-start;
    }
}

/* =========================================================
   FLEXPERSONEEL V19 - CLEAN STEP ARROWS
   Eén regelset, zonder oude overrides.
========================================================= */

/* Veiligheid: hamer blijft uit beeld als oude markup nog gecached is. */
.fp-process-decoration-hammer {
    display: none !important;
}

@media (min-width: 1051px) {

    /*
     * De connector-kolom is exact even hoog als de kaarten.
     * De horizontale lijn loopt precies door het midden.
     */
    .fp-steps-flow > .fp-step-arrow {
        position: relative !important;
        align-self: stretch !important;
        min-height: 100% !important;
        height: 100% !important;

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

        background:
            linear-gradient(
                to right,
                rgba(231,121,0,.30),
                rgba(231,121,0,.30)
            )
            center 50% / 100% 1px no-repeat !important;
    }

    /* Oude losse lijnstukjes volledig uitschakelen. */
    .fp-steps-flow > .fp-step-arrow::before,
    .fp-steps-flow > .fp-step-arrow::after {
        content: none !important;
        display: none !important;
    }

    /*
     * Rondje bewust 2px omhoog voor optische uitlijning:
     * de pijl-glyph zelf zit in fonts meestal iets lager dan geometrisch midden.
     */
    .fp-steps-flow > .fp-step-arrow span {
        position: relative !important;
        top: -2px !important;
        left: auto !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        margin: 0 !important;

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

        transform: none !important;

        border: 1px solid rgba(247,147,30,.30) !important;
        border-radius: 50% !important;
        background: #f8e9d5 !important;

        color: var(--orange2) !important;
        font-size: 20px !important;
        font-weight: 850 !important;
        line-height: 1 !important;

        box-shadow: 0 7px 18px rgba(117,74,23,.08) !important;
    }
}

/* Op tablet/mobiel wordt de flow verticaal. */
@media (max-width: 1050px) {

    .fp-steps-flow > .fp-step-arrow {
        position: relative !important;
        min-height: 44px !important;
        height: 44px !important;

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

        background: none !important;
    }

    .fp-steps-flow > .fp-step-arrow::before,
    .fp-steps-flow > .fp-step-arrow::after {
        content: none !important;
        display: none !important;
    }

    .fp-steps-flow > .fp-step-arrow span {
        position: relative !important;
        top: 0 !important;
        left: auto !important;
        margin: 0 !important;
        transform: rotate(90deg) !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V20 - COMPACTE OPDRACHTEN FEED
========================================================= */

.fp-jobs-feed {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 15%, rgba(247,147,30,.055), transparent 25%),
        linear-gradient(145deg, #06263f 0%, #07304e 100%);
}

.fp-jobs-feed::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -250px;
    bottom: -280px;
    border: 68px solid rgba(247,147,30,.035);
    border-radius: 50%;
    pointer-events: none;
}

.fp-jobs-feed > .fp-shell {
    position: relative;
    z-index: 2;
}

.fp-jobs-feed-head {
    align-items: flex-end;
}

.fp-jobs-feed-head h2 {
    max-width: 780px;
}

.fp-jobs-place-button {
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 8px !important;
    padding: 0 17px;
    border-radius: 8px;
    color: var(--navy) !important;
    background: var(--orange);
    font-size: 11.5px !important;
    font-weight: 850 !important;
    box-shadow: 0 11px 25px rgba(0,0,0,.14);
    transition: transform .18s ease, background .18s ease;
}

.fp-jobs-place-button:hover {
    transform: translateY(-2px);
    background: #ffa32f;
}

.fp-jobs-place-button span {
    color: var(--navy);
    font-size: 16px;
}

.fp-job-feed-grid {
    gap: 16px;
    margin-top: 45px;
}

.fp-job-grid .fp-job-feed-card {
    position: relative;
    min-height: 245px;
    padding: 25px 25px 23px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.035));
    box-shadow: 0 16px 36px rgba(0,0,0,.08);
    overflow: hidden;
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.fp-job-grid .fp-job-feed-card:hover {
    transform: translateY(-4px);
    border-color: rgba(247,147,30,.28);
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
    box-shadow: 0 22px 44px rgba(0,0,0,.13);
}

.fp-job-feed-accent {
    position: absolute;
    top: 0;
    left: 25px;
    width: 48px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--orange);
}

.fp-job-feed-top {
    position: relative;
    min-height: 34px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.fp-job-category,
.fp-job-status {
    width: max-content;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fp-job-category {
    color: #ffd7a8;
    background: rgba(247,147,30,.13);
    border: 1px solid rgba(247,147,30,.10);
}

.fp-job-status {
    color: #fff;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.08);
}

.fp-job-index {
    position: absolute;
    top: -10px;
    right: 0;
    color: rgba(255,255,255,.055);
    font-size: 50px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    pointer-events: none;
}

.fp-job-grid .fp-job-feed-card h3 {
    position: relative;
    z-index: 1;
    max-width: 92%;
    margin: 40px 0 0;
    color: #fff;
    font-size: clamp(25px, 2.2vw, 32px);
    line-height: 1.03;
    letter-spacing: -.04em;
}

.fp-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 17px;
    margin-top: 22px;
}

.fp-job-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.58);
    font-size: 10.5px;
    font-weight: 600;
}

.fp-job-meta svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-job-feed-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.09);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
}

.fp-job-feed-footer span:last-child {
    color: var(--orange);
    font-size: 15px;
    transition: transform .18s ease;
}

.fp-job-feed-card:hover .fp-job-feed-footer span:last-child {
    transform: translateX(3px);
}

.fp-jobs-bottom-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
    color: rgba(255,255,255,.40);
    font-size: 10px;
}

.fp-jobs-bottom-link a {
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
}

.fp-jobs-bottom-link a:hover {
    color: var(--orange);
}

@media (max-width: 1050px) {
    .fp-job-feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fp-job-feed-grid .fp-job-feed-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .fp-jobs-feed-head {
        align-items: flex-start;
    }

    .fp-jobs-place-button {
        width: 100%;
        justify-content: space-between;
        margin-bottom: 0 !important;
    }

    .fp-job-feed-grid {
        grid-template-columns: 1fr;
        margin-top: 34px;
    }

    .fp-job-feed-grid .fp-job-feed-card:last-child {
        grid-column: auto;
    }

    .fp-job-grid .fp-job-feed-card {
        min-height: 225px;
        padding: 23px 21px 21px;
    }

    .fp-job-feed-accent {
        left: 21px;
    }

    .fp-job-grid .fp-job-feed-card h3 {
        font-size: 27px;
    }

    .fp-jobs-bottom-link {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   FLEXPERSONEEL V21 - LEESBAARDERE KLEINE TEKST OP DESKTOP
   Minder zware font-weights, iets grotere tekst.
========================================================= */

/* Kleine sectietitel */
.fp-jobs-feed .fp-eyebrow {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
}

/* Oranje knop rechtsboven */
.fp-jobs-feed .fp-jobs-place-button {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* Categorie + status pills */
.fp-jobs-feed .fp-job-category,
.fp-jobs-feed .fp-job-status {
    min-height: 27px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
}

/* Metadata: locatie en type opdracht */
.fp-jobs-feed .fp-job-meta > span {
    color: rgba(255,255,255,.70) !important;
    font-size: 11.5px !important;
    font-weight: 450 !important;
    line-height: 1.4 !important;
}

/* Icoontjes iets duidelijker zonder groter te schreeuwen */
.fp-jobs-feed .fp-job-meta svg {
    width: 15.5px !important;
    height: 15.5px !important;
    stroke-width: 1.7 !important;
}

/* Onderste CTA per kaart */
.fp-jobs-feed .fp-job-feed-footer {
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

/* Onderste link rechts */
.fp-jobs-feed .fp-jobs-bottom-link {
    color: rgba(255,255,255,.55) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

.fp-jobs-feed .fp-jobs-bottom-link a {
    font-size: 11.5px !important;
    font-weight: 650 !important;
}

/* Klein beetje meer rust rondom de info */
.fp-jobs-feed .fp-job-meta {
    gap: 10px 18px !important;
}

@media (max-width: 720px) {
    .fp-jobs-feed .fp-job-meta > span {
        font-size: 11px !important;
    }

    .fp-jobs-feed .fp-job-feed-footer {
        font-size: 11px !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V22 - CONTACTACTIES + FLOATING WHATSAPP
========================================================= */

.fp-contact-section {
    position: relative;
}

.fp-contact-copy > p:not(.fp-eyebrow) {
    max-width: 610px;
}

/* Contact buttons */
.fp-contact-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 33px;
}

.fp-contact-action {
    position: relative;
    min-height: 92px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 15px 14px;
    border: 1px solid rgba(18,41,60,.10);
    border-radius: 13px;
    background: #fffdf8;
    box-shadow: 0 9px 24px rgba(18,41,60,.045);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

a.fp-contact-action:hover {
    transform: translateY(-2px);
    border-color: rgba(247,147,30,.28);
    box-shadow: 0 14px 30px rgba(18,41,60,.075);
}

.fp-contact-action-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--navy);
    background: rgba(6,38,63,.07);
}

.fp-contact-action-icon-whatsapp {
    color: #128c7e;
    background: rgba(37,211,102,.12);
}

.fp-contact-action-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-contact-action-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-contact-action-copy small {
    color: #84909a;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.fp-contact-action-copy strong {
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.fp-contact-action-arrow {
    color: var(--orange2);
    font-size: 15px;
    font-weight: 700;
}

.fp-contact-action-pending {
    opacity: .72;
    border-style: dashed;
    background: #f6f3ec;
}

.fp-contact-pending-label {
    position: absolute;
    top: 9px;
    right: 9px;
    padding: 4px 6px;
    border-radius: 999px;
    color: #8b6b42;
    background: rgba(247,147,30,.10);
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

/* Fixed WhatsApp button */
.fp-floating-whatsapp {
    position: fixed;
    z-index: 999;
    right: 24px;
    bottom: 24px;

    min-height: 56px;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 0 17px 0 13px;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;

    color: #fff;
    background: #25D366;

    box-shadow:
        0 15px 34px rgba(0,0,0,.19),
        0 4px 12px rgba(37,211,102,.22);

    font-size: 12px;
    font-weight: 750;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.fp-floating-whatsapp:hover {
    transform: translateY(-3px);
    color: #fff;
    background: #20bd5a;
    box-shadow:
        0 20px 42px rgba(0,0,0,.22),
        0 6px 15px rgba(37,211,102,.26);
}

.fp-floating-whatsapp svg {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1050px) {
    .fp-contact-actions {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .fp-contact-action {
        min-height: 76px;
    }
}

@media (max-width: 720px) {
    .fp-contact-actions {
        margin-top: 28px;
    }

    .fp-floating-whatsapp {
        right: 16px;
        bottom: 16px;

        width: 56px;
        height: 56px;
        min-height: 56px;

        justify-content: center;
        padding: 0;
    }

    .fp-floating-whatsapp span {
        display: none;
    }

    .fp-floating-whatsapp svg {
        width: 28px;
        height: 28px;
    }
}

/* =========================================================
   FLEXPERSONEEL V23 - CONTACTOPTIES ONDER ELKAAR
========================================================= */

/* Contactopties als losse keuzes onder elkaar, geen flow. */
.fp-contact-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 470px !important;
    margin-top: 32px !important;
}

/* Compacter en rustiger. */
.fp-contact-action {
    min-height: 74px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 13px 15px !important;
    border-radius: 12px !important;
}

/* Geen pijlen meer: dit zijn drie aparte contactkeuzes. */
.fp-contact-action-arrow {
    display: none !important;
}

/* Iconen iets duidelijker. */
.fp-contact-action-icon {
    width: 44px !important;
    height: 44px !important;
}

.fp-contact-action-icon svg {
    width: 21px !important;
    height: 21px !important;
}

/* Tekst rustig maar goed leesbaar. */
.fp-contact-action-copy small {
    font-size: 8.5px !important;
    font-weight: 650 !important;
    letter-spacing: 1px !important;
}

.fp-contact-action-copy strong {
    font-size: 13px !important;
    font-weight: 650 !important;
}

/* Pending e-mail badge rechtsboven houden. */
.fp-contact-action-pending {
    position: relative !important;
}

.fp-contact-pending-label {
    top: 10px !important;
    right: 11px !important;
}

/* =========================================================
   VASTE WHATSAPP-KNOP: ROND EN RUSTIG
========================================================= */

.fp-floating-whatsapp {
    right: 22px !important;
    bottom: 22px !important;

    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;

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

    gap: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.88) !important;

    background: #25D366 !important;
    box-shadow:
        0 14px 30px rgba(0,0,0,.18),
        0 5px 14px rgba(37,211,102,.22) !important;
}

/* Alleen icoon tonen, geen brede tekstpil meer. */
.fp-floating-whatsapp span {
    display: none !important;
}

.fp-floating-whatsapp svg {
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
}

.fp-floating-whatsapp:hover {
    transform: translateY(-3px) scale(1.03) !important;
}

/* Mobiel iets compacter. */
@media (max-width: 720px) {
    .fp-contact-actions {
        max-width: none !important;
    }

    .fp-contact-action {
        min-height: 70px !important;
        padding: 12px 13px !important;
    }

    .fp-floating-whatsapp {
        right: 16px !important;
        bottom: 16px !important;
        width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .fp-floating-whatsapp svg {
        width: 27px !important;
        height: 27px !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V24 - UITGEBREIDER OPDRACHTFORMULIER DEMO
========================================================= */

.fp-form-preview-interactive {
    padding: 34px !important;
}

.fp-form-preview-interactive .fp-form-grid {
    gap: 10px !important;
}

.fp-form-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fp-form-field > span {
    display: none;
}

.fp-form-field input,
.fp-form-field textarea,
.fp-extra-field textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 8px;
    outline: none;
    color: #fff;
    background: rgba(255,255,255,.035);
    font: inherit;
    font-size: 11px;
    font-weight: 450;
    line-height: 1.5;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.fp-form-field input {
    min-height: 52px;
    padding: 0 13px;
}

.fp-form-field textarea,
.fp-extra-field textarea {
    min-height: 92px;
    padding: 13px;
    resize: vertical;
}

.fp-form-field input::placeholder,
.fp-form-field textarea::placeholder,
.fp-extra-field textarea::placeholder {
    color: rgba(255,255,255,.46);
    opacity: 1;
}

.fp-form-field input:focus,
.fp-form-field textarea:focus,
.fp-extra-field textarea:focus {
    border-color: rgba(247,147,30,.58);
    background: rgba(255,255,255,.055);
    box-shadow: 0 0 0 3px rgba(247,147,30,.07);
}

.fp-form-field-wide {
    grid-column: 1 / -1;
}

.fp-extra-information {
    display: grid;
    gap: 9px;
    margin-top: 10px;
}

.fp-extra-field {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
}

.fp-extra-field-head {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 10px 0 13px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.60);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .5px;
}

.fp-form-preview .fp-extra-field-remove {
    width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: rgba(255,255,255,.66) !important;
    background: rgba(255,255,255,.06) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    cursor: pointer;
    opacity: 1 !important;
}

.fp-form-preview .fp-extra-field-remove:hover {
    color: #fff !important;
    background: rgba(255,255,255,.11) !important;
}

.fp-extra-field textarea {
    min-height: 82px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.fp-extra-field textarea:focus {
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(247,147,30,.36);
}

.fp-form-preview .fp-add-information {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin: 10px 0 0 !important;
    padding: 0 13px !important;
    border: 1px dashed rgba(247,147,30,.38) !important;
    border-radius: 8px !important;
    color: #ffbf70 !important;
    background: rgba(247,147,30,.055) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    cursor: pointer;
    opacity: 1 !important;
    transition:
        border-color .18s ease,
        background .18s ease;
}

.fp-form-preview .fp-add-information:hover {
    border-color: rgba(247,147,30,.62) !important;
    background: rgba(247,147,30,.09) !important;
}

.fp-add-information-plus {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--navy);
    background: var(--orange);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.fp-form-preview .fp-add-information.is-disabled {
    opacity: .45 !important;
    cursor: default;
}

.fp-form-preview .fp-form-submit-preview {
    width: 100% !important;
    min-height: 53px !important;
    margin-top: 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: var(--orange) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    opacity: .80 !important;
}

.fp-form-preview-note {
    margin: 12px 2px 0;
    color: rgba(255,255,255,.40);
    font-size: 8.5px;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .fp-form-preview-interactive {
        padding: 27px 22px !important;
    }

    .fp-form-field-wide {
        grid-column: auto;
    }
}

/* =========================================================
   FLEXPERSONEEL V26 - EIGEN WHATSAPP PNG
========================================================= */

/* PNG in het contactblok */
.fp-contact-action-icon-whatsapp {
    background: #ffffff !important;
    border: 1px solid rgba(37,211,102,.18) !important;
    overflow: hidden !important;
}

.fp-contact-action-icon-whatsapp .fp-whatsapp-png {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

/* Vaste knop: witte cirkel met het echte groene WhatsApp-logo */
.fp-floating-whatsapp {
    background: #ffffff !important;
    border: 1px solid rgba(18,41,60,.10) !important;
    box-shadow:
        0 14px 30px rgba(0,0,0,.16),
        0 5px 14px rgba(37,211,102,.12) !important;
}

.fp-floating-whatsapp:hover {
    background: #ffffff !important;
    box-shadow:
        0 18px 36px rgba(0,0,0,.18),
        0 7px 18px rgba(37,211,102,.17) !important;
}

/* Oude SVG-regels hebben geen effect meer, maar deze PNG krijgt eigen maatvoering */
.fp-floating-whatsapp .fp-whatsapp-png {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
}

/* Tekst blijft verborgen op de ronde vaste knop */
.fp-floating-whatsapp > span {
    display: none !important;
}

@media (max-width: 720px) {
    .fp-floating-whatsapp .fp-whatsapp-png {
        width: 35px !important;
        height: 35px !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V27 - WHATSAPP LOGO GROTER IN WITTE CIRKEL
========================================================= */

/* Contactkaart: groen logo vult de witte cirkel bijna volledig. */
.fp-contact-action-icon-whatsapp .fp-whatsapp-png {
    width: 38px !important;
    height: 38px !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* Vaste knop rechtsonder: veel minder lege witte ruimte rondom. */
.fp-floating-whatsapp .fp-whatsapp-png {
    width: 50px !important;
    height: 50px !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* Zorg dat de witte ronde houders het grotere logo netjes afkappen. */
.fp-contact-action-icon-whatsapp,
.fp-floating-whatsapp {
    overflow: hidden !important;
}

@media (max-width: 720px) {
    .fp-floating-whatsapp .fp-whatsapp-png {
        width: 47px !important;
        height: 47px !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V28 - DEFINITIEVE FOOTER
========================================================= */

.fp-footer {
    position: relative;
    overflow: hidden;
    padding: 78px 0 26px !important;
    background:
        radial-gradient(circle at 92% 18%, rgba(247,147,30,.045), transparent 23%),
        linear-gradient(145deg, #031c2e 0%, #05243a 100%) !important;
    color: #fff;
}

.fp-footer-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--orange) 18%,
        var(--orange) 82%,
        transparent 100%
    );
    opacity: .8;
}

.fp-footer-grid-v2 {
    position: relative;
    z-index: 2;
    display: grid !important;
    grid-template-columns: minmax(300px,1.35fr) minmax(120px,.55fr) minmax(210px,.75fr) minmax(260px,.9fr) !important;
    gap: clamp(42px,5vw,76px) !important;
    align-items: start;
}

.fp-footer-logo-link {
    display: inline-block;
}

.fp-footer-brand img {
    display: block;
    max-width: 100%;
    height: auto;
}

.fp-footer-brand p {
    max-width: 390px !important;
    margin: 21px 0 0 !important;
    color: rgba(255,255,255,.60) !important;
    font-size: 12px !important;
    line-height: 1.75 !important;
}

.fp-footer-features {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.fp-footer-features > span {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    line-height: 1.45;
}

.fp-footer-features i {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
    margin-top: -1px;
    border-radius: 50%;
    color: #ffbd67;
    background: rgba(247,147,30,.10);
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
}

.fp-footer-column {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
}

.fp-footer-column h3,
.fp-footer-contact h3 {
    margin: 2px 0 12px !important;
    color: rgba(255,255,255,.38) !important;
    font-size: 8.5px !important;
    font-weight: 750 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.fp-footer-column > a:not(.fp-footer-contact-link) {
    width: fit-content;
    color: rgba(255,255,255,.72) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    transition: color .18s ease, transform .18s ease;
}

.fp-footer-column > a:not(.fp-footer-contact-link):hover {
    color: #fff !important;
    transform: translateX(2px);
}

/* Contactregels */
.fp-footer-contact {
    gap: 9px !important;
}

.fp-footer-contact-link {
    min-width: 0;
    display: grid !important;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: inherit !important;
}

.fp-footer-contact-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    color: #ffb95f;
    background: rgba(255,255,255,.045);
}

.fp-footer-contact-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-footer-contact-link > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fp-footer-contact-link small {
    color: rgba(255,255,255,.38);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.fp-footer-contact-link strong {
    overflow-wrap: anywhere;
    color: rgba(255,255,255,.82);
    font-size: 10.5px;
    font-weight: 550;
    line-height: 1.35;
}

a.fp-footer-contact-link:hover .fp-footer-contact-icon {
    color: #fff;
    border-color: rgba(247,147,30,.30);
    background: rgba(247,147,30,.10);
}

a.fp-footer-contact-link:hover strong {
    color: #fff;
}

.fp-footer-contact-pending {
    opacity: .62;
}

/* CTA-kaart */
.fp-footer-card-v2 {
    position: relative;
    overflow: hidden;
    padding: 27px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(247,147,30,.10), transparent 38%),
        #0a3455 !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.10);
}

.fp-footer-card-v2 > span {
    color: #ffb85a !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.25px !important;
}

.fp-footer-card-v2 h3 {
    max-width: 240px;
    margin: 11px 0 0 !important;
    color: #fff !important;
    font-size: 25px !important;
    font-weight: 750 !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    text-transform: none !important;
}

.fp-footer-card-v2 p {
    max-width: 250px;
    margin: 13px 0 0;
    color: rgba(255,255,255,.54);
    font-size: 9.5px;
    line-height: 1.65;
}

.fp-footer-card-v2 a {
    min-height: 45px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 21px !important;
    padding: 0 14px !important;
    border-radius: 7px !important;
    color: var(--navy) !important;
    background: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    transition: transform .18s ease, background .18s ease;
}

.fp-footer-card-v2 a:hover {
    transform: translateY(-2px);
    background: #fff4e6 !important;
}

.fp-footer-card-v2 a i {
    color: var(--orange2);
    font-size: 14px;
    font-style: normal;
}

/* Onderste rij */
.fp-footer-bottom-v2 {
    position: relative;
    z-index: 2;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    margin-top: 58px !important;
    padding-top: 21px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.32) !important;
    font-size: 8.5px !important;
}

.fp-footer-bottom-v2 > span:last-child {
    text-align: right;
}

.fp-footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fp-footer-legal a {
    color: rgba(255,255,255,.34) !important;
    font-size: 8.5px !important;
    transition: color .18s ease;
}

.fp-footer-legal a:hover {
    color: rgba(255,255,255,.72) !important;
}

.fp-footer-legal span {
    color: rgba(255,255,255,.18);
}

@media (max-width: 1050px) {
    .fp-footer-grid-v2 {
        grid-template-columns: 1.1fr .7fr 1fr !important;
    }

    .fp-footer-card-v2 {
        grid-column: 1 / -1;
        max-width: 520px;
    }
}

@media (max-width: 720px) {
    .fp-footer {
        padding: 62px 0 24px !important;
    }

    .fp-footer-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .fp-footer-brand p {
        max-width: none !important;
    }

    .fp-footer-features {
        max-width: 420px;
    }

    .fp-footer-card-v2 {
        grid-column: auto;
        max-width: none;
    }

    .fp-footer-bottom-v2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 42px !important;
        text-align: left;
    }

    .fp-footer-bottom-v2 > span:last-child {
        text-align: left;
    }

    .fp-footer-legal {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* =========================================================
   FLEXPERSONEEL V29 - FOOTER TEKST GROTER / LEESBAARDER
========================================================= */

/* Kopjes Navigatie / Contact */
.fp-footer-column h3,
.fp-footer-contact h3 {
    margin-bottom: 14px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.35px !important;
}

/* Navigatie links */
.fp-footer-column > a:not(.fp-footer-contact-link) {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.fp-footer-column {
    gap: 13px !important;
}

/* Contactregels iets ruimer */
.fp-footer-contact {
    gap: 11px !important;
}

.fp-footer-contact-link {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 8px 0 !important;
}

/* Contacticonen iets groter */
.fp-footer-contact-icon {
    width: 38px !important;
    height: 38px !important;
}

.fp-footer-contact-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* WHATSAPP / BELLEN / E-MAIL */
.fp-footer-contact-link small {
    font-size: 9px !important;
    font-weight: 650 !important;
    letter-spacing: .85px !important;
    line-height: 1.25 !important;
}

/* Telefoonnummer / e-mailadres */
.fp-footer-contact-link strong {
    font-size: 12.5px !important;
    font-weight: 520 !important;
    line-height: 1.4 !important;
}

/* Onderste rij ook net iets beter leesbaar */
.fp-footer-bottom-v2,
.fp-footer-legal a {
    font-size: 9.5px !important;
}

@media (max-width: 720px) {
    .fp-footer-column h3,
    .fp-footer-contact h3 {
        font-size: 10px !important;
    }

    .fp-footer-column > a:not(.fp-footer-contact-link) {
        font-size: 12.5px !important;
    }

    .fp-footer-contact-link strong {
        font-size: 12px !important;
    }
}

/* =========================================================
   FLEXPERSONEEL V30 - GROTERE CONTACTICONEN FOOTER
========================================================= */

.fp-footer-contact-icon {
    width: 40px !important;
    height: 40px !important;
}

.fp-footer-contact-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.8 !important;
}

@media (max-width: 720px) {
    .fp-footer-contact-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .fp-footer-contact-icon svg {
        width: 21px !important;
        height: 21px !important;
    }
}


/* =========================================================
   FLEXPERSONEEL V31 - HERO FOTO WEG OP MOBIEL
========================================================= */

@media (max-width: 720px) {

    .fp-hero-background-photo {
        display: none !important;
    }

    .fp-hero.has-hero-background {
        background:
            radial-gradient(circle at 105% 88%, rgba(247,147,30,.06), transparent 32%),
            #fffdf8 !important;
        padding-bottom: 76px !important;
    }

    .fp-hero.has-hero-background::after {
        opacity: .10 !important;
    }

    .fp-hero.has-hero-background .fp-hero-panel {
        width: 100% !important;
        max-width: none !important;
        margin-top: 6px !important;
        transform: none !important;
    }

    .fp-hero.has-hero-background .fp-preview {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 27px 24px 24px !important;
        border-radius: 17px !important;
        background-image: none !important;
        background-color: var(--navy) !important;
        box-shadow: 0 18px 42px rgba(6,38,63,.16) !important;
    }

    .fp-hero.has-hero-background .fp-preview small,
    .fp-hero.has-hero-background .fp-preview h2,
    .fp-hero.has-hero-background .fp-preview p,
    .fp-hero.has-hero-background .fp-preview a {
        text-shadow: none !important;
    }
}



/* Generic WordPress pages: SEO-safe title/content layout. */
.fp-generic-shell{max-width:940px}.fp-generic-header{margin:0 0 38px}.fp-generic-header h1{max-width:900px;margin:0;color:var(--navy);font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.055em;text-wrap:balance}.fp-generic-content{font-size:15px;line-height:1.78;color:var(--muted)}.fp-generic-content>:first-child{margin-top:0}.fp-generic-content h2,.fp-generic-content h3,.fp-generic-list-item h2{color:var(--navy);line-height:1.15}.fp-generic-content h2{margin-top:48px;font-size:32px}.fp-generic-content h3{margin-top:34px;font-size:23px}.fp-generic-content a,.fp-generic-list-item a{color:var(--orange2);text-decoration:underline;text-underline-offset:3px}.fp-generic-content img{height:auto}.fp-generic-list{display:grid;gap:18px}.fp-generic-list-item{padding:26px 0;border-bottom:1px solid var(--line)}.fp-generic-list-item h2{margin:0 0 10px;font-size:28px}.fp-generic-list-item p{color:var(--muted);line-height:1.7}@media(max-width:720px){.fp-generic{padding:90px 0}.fp-generic-header{margin-bottom:28px}.fp-generic-header h1{font-size:clamp(40px,12vw,58px)}.fp-generic-content h2{font-size:28px}}


/* =========================================================
   SEO / ACCESSIBILITY BASIS V2
========================================================= */
.fp-skip-link{
    position:fixed;
    top:10px;
    left:10px;
    z-index:99999;
    padding:10px 14px;
    border-radius:7px;
    background:#06263f;
    color:#fff;
    font-size:13px;
    font-weight:800;
    transform:translateY(-160%);
    transition:transform .15s ease;
}
.fp-skip-link:focus{transform:translateY(0)}