/*
Theme Name: Customizr Pro Child
Theme URI: http://presscustomizr.com/customizr-pro
Template: customizr-pro
Author: Press Customizr Team
Author URI: http://presscustomizr.com/
Description: A child theme for Customizr Pro
Version: 1.0.1690862082
Updated: 2023-08-01 04:48:02

*/

/* ==========================================================================
   Global: Hide page titles
   ========================================================================== */
.entry-title,
.page-title,
.czr-page-title {
    display: none !important;
}

/* ==========================================================================
   Brand Variables
   ========================================================================== */
:root {
    --brand-primary: #1a2b3c;
    /* Deep Night Blue/Anthracite */
    --brand-accent: #ccff00;
    /* Bright Green/Yellow */
    --brand-neutral: #f5f5f5;
    /* Light Grey/White */
    --brand-accent-ink: #4f6200;
    /* Olijf, de leesbare tekstversie van --brand-accent (dat is op wit onleesbaar) */

    --font-header: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
}

/* ==========================================================================
   Homepage Custom Layout
   ========================================================================== */

/* Global Reset for Home */
.performalytics-home {
    background-color: #ffffff;
    font-family: var(--font-body);
    color: var(--brand-primary);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* Changed from overflow-x to generic overflow as requested */
    position: relative;
    /* Added for absolute positioning of watermark */
    min-height: 80vh;
    /* Ensure container is tall enough for the logo */
}

/* Hero Section */
.performalytics-hero {
    text-align: center;
    padding: 80px 20px;
    background-color: transparent;
}

.performalytics-hero h1 {
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 3rem;
    color: var(--brand-primary);
    margin-bottom: 10px;
}

.performalytics-hero p.subheadline {
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: #555;
    margin-top: 0;
}

/* Services Grid */
.performalytics-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    padding: 40px 20px 80px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Service Card (Oval) */
.service-card {
    background-color: #f5f5f5;
    position: relative;
    z-index: 2;
    border: 1px solid var(--brand-neutral);
    border-radius: 50px;
    padding: 40px 30px;
    flex: 1 1 300px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

/* Lijst neemt beschikbare ruimte , geen margin-bottom zodat button direct aansluit */
.service-card ul {
    flex: 1;
    margin-bottom: 0;
}

/* Verwijder margin van laatste li zodat er geen extra ruimte ontstaat */
.service-card ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Zorg dat er geen lege <p> ruimte is tussen lijst en button */
.service-card p:empty,
.service-card br {
    display: none;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card h2 {
    font-family: var(--font-header);
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--brand-primary);
}

.service-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    width: 100%;
}

.service-card ul li {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--brand-neutral);
}

.service-card ul li:last-child {
    border-bottom: none;
}

/* Button */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-accent);
    color: #000000;
    font-family: var(--font-header);
    font-weight: 700;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 25px;
    transition: background-color 0.3s ease;
    /* Sticky to bottom of flex card */
    margin-top: auto;
    align-self: stretch;
    /* Stretch to same width as siblings */
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: clamp(0.78rem, 1.2vw, 1rem);
}

.btn-accent:hover {
    background-color: #b3e600;
    /* Slightly darker accent */
    color: #000000;
    text-decoration: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .performalytics-services {
        flex-direction: column;
        align-items: center;
    }

    .service-card {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Coming Soon State
   ========================================================================== */
.service-card.coming-soon {
    opacity: 0.6;
    cursor: default;
}

.service-card.coming-soon:hover {
    transform: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Keep original shadow, no lift */
}

.service-card.coming-soon .btn-accent {
    background-color: #dcdcdc;
    /* Light Grey */
    color: #666666;
    /* Dark Grey */
    cursor: not-allowed;
    pointer-events: none;
    /* Prevent clicks */
}

/* ==========================================================================
   Background Watermark
   ========================================================================== */
.performalytics-home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Changed from -1 to 0 */
    background-image: url('https://performalytics.nl/wp-content/uploads/2025/12/cropped-Logo-Draft-V6-no-bg.png');
    background-repeat: no-repeat;
    background-position: center 150px;
    /* Pushed down */
    background-size: 40%;
    /* Fixed percentage */
    /* Prevent cutoff */
    opacity: 0.1;
    /* Increased visibility */
    filter: grayscale(100%);
}

@media (max-width: 768px) {
    .performalytics-home::before {
        background-size: 90%;
    }
}

/* Ensure content sits on top of watermark */
.performalytics-home>* {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Projects Section
   ========================================================================== */
.projects-section {
    text-align: center;
    padding: 60px 20px;
}

.projects-section h2 {
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 2rem;
    color: var(--brand-primary);
    margin-bottom: 40px;
}

.projects-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.project-item {
    text-align: center;
    width: 320px;
}

.project-image-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    margin: 0 auto 16px;
    background-color: #f0f0f0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.project-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
    transition: transform 0.4s ease;
}

.project-item:hover .project-image-container img {
    transform: scale(1.04);
}

.project-item h3 {
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--brand-primary);
    margin: 0;
}

/* ==========================================================================
   Modal Overlay , gecentreerd, scrollbaar op kleine schermen
   ========================================================================== */
.pf-modal-overlay {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.72);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.pf-modal-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.pf-modal-box {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 48px 40px 40px;
    max-width: 540px;
    width: 100%;
    position: relative;
    margin: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pf-modal-box h2 {
    font-family: var(--font-header);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 8px;
}

.pf-modal-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.5;
}

.pf-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    color: #999;
    transition: color 0.2s;
    padding: 0;
}

.pf-modal-close:hover {
    color: var(--brand-primary);
}

/* Forminator form labels leesbaar in modal */
.pf-modal-box .forminator-label,
.pf-modal-box label,
.pf-modal-box .forminator-field label {
    color: var(--brand-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* Radio & checkbox cursor and radio bullet fix in modal */
.pf-modal-box .forminator-radio,
.pf-modal-box .forminator-checkbox {
    cursor: pointer !important;
}

/* Explicitly style the radio bullet so the selection is visible */
.pf-modal-box .forminator-radio .forminator-radio-bullet {
    position: relative !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid var(--brand-primary) !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    background-color: #fff !important;
    vertical-align: middle !important;
}

.pf-modal-box .forminator-radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pf-modal-box .forminator-radio input[type="radio"]:checked + .forminator-radio-bullet::after,
.pf-modal-box .forminator-radio.forminator-is_checked .forminator-radio-bullet::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--brand-primary) !important;
}

.pf-modal-box .forminator-input,
.pf-modal-box input[type="text"],
.pf-modal-box input[type="email"],
.pf-modal-box input[type="tel"],
.pf-modal-box textarea {
    border: 1.5px solid #ddd !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    color: var(--brand-primary) !important;
    background: #fafafa !important;
}

.pf-modal-box .forminator-input:focus,
.pf-modal-box input:focus,
.pf-modal-box textarea:focus {
    border-color: var(--brand-accent) !important;
    outline: none !important;
    background: #fff !important;
}

@media (max-width: 600px) {
    .pf-modal-box {
        padding: 40px 20px 28px;
    }
    .pf-modal-overlay {
        align-items: flex-start;
        /* Ruimte voor de mobiele header + uitgevouwen menu */
        padding-top: 80px;
    }
}

/* ==========================================================================
   Services Page: Diensten blokken (verticaal gestapeld, rijke layout)
   ========================================================================== */
.pf-services-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px 80px;
}

.pf-services-page h1 {
    font-family: var(--font-header);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 20px;
    line-height: 1.2;
}

.pf-services-intro {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: #555;
    line-height: 1.8;
    max-width: 680px;
    margin-bottom: 64px;
    border-left: 4px solid var(--brand-accent);
    padding-left: 20px;
}

/* Individuele dienst blok , tag full-width, dan afbeelding + tekst naast elkaar */
.pf-service-block {
    margin-bottom: 100px;
    padding-bottom: 72px;
    border-bottom: 1px solid #e8e8e8;
}

.pf-service-block:last-of-type {
    border-bottom: none;
    margin-bottom: 30px;
    padding-bottom: 0;
}

/* Tag balk: volledige breedte boven het blok */
.pf-service-block__tag {
    display: block;
    width: 100%;
    background-color: var(--brand-accent);
    color: #000;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

/* Afbeelding + content naast elkaar */
.pf-service-block__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.pf-service-block.reverse .pf-service-block__body {
    direction: rtl;
}
.pf-service-block.reverse .pf-service-block__body > * {
    direction: ltr;
}

.pf-service-block__image {
    background-color: var(--brand-neutral);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 7;
}

.pf-service-block__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pf-service-block__image-placeholder {
    color: #bbb;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content kolom */
.pf-service-block__content {
    display: flex;
    flex-direction: column;
}

.pf-service-block__content h2 {
    font-family: var(--font-header);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-top: 0;
    margin-bottom: 12px;
}

.pf-service-block__content p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #444;
    line-height: 1.75;
    margin-bottom: 20px;
}

.pf-service-block__content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    flex: 1;
}

.pf-service-block__content ul li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 0 16px;
    font-family: var(--font-body);
    font-size: 0.97rem;
    color: #333;
    padding: 12px 0;
    border-bottom: 1px solid #ebebeb;
    line-height: 1.6;
    align-items: start;
}

.pf-service-block__content ul li:last-child {
    border-bottom: none;
}

.pf-service-block__content ul li::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--brand-accent);
    border-radius: 50%;
    margin-top: 6px;
    grid-column: 1;
    grid-row: 1;
}

.pf-service-block__content ul li strong {
    font-weight: 600;
    color: var(--brand-primary);
    display: block;
    grid-column: 2;
    grid-row: 1;
}

.pf-service-block__content ul li > span {
    grid-column: 3;
    grid-row: 1;
    color: #555;
}

.pf-service-block__content .btn-accent,
.pf-service-block__content .btn-primary {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 720px) {
    .pf-service-block__body,
    .pf-service-block.reverse .pf-service-block__body {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    /* Op mobiel: afbeelding ONDER de tag maar BOVEN de tekst */
    .pf-service-block__image {
        order: -1;
        aspect-ratio: 8 / 9;
    }

    .pf-service-block__content ul li {
        grid-template-columns: 16px 1fr;
        grid-template-rows: auto auto;
    }

    .pf-service-block__content ul li::before {
        grid-row: 1;
    }

    .pf-service-block__content ul li strong {
        grid-column: 2;
        grid-row: 1;
    }

    .pf-service-block__content ul li > span {
        grid-column: 2;
        grid-row: 2;
        margin-top: 2px;
        font-size: 0.92rem;
    }

    .pf-services-page h1 {
        font-size: 2rem;
    }
}

/* CTA blok onderaan diensten , outer wrapper voor full-width padding */
.pf-services-cta-outer {
    padding: 0 24px 80px;
    max-width: 910px;
    margin: 0 auto;
}

.pf-services-cta {
    background-color: var(--brand-primary);
    border-radius: 16px;
    padding: 56px 40px;
    text-align: center;
}

.pf-services-cta h2 {
    font-family: var(--font-header);
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-accent);
    margin-bottom: 12px;
}

.pf-services-cta p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 32px;
}

/* Forminator form labels leesbaar op donkere CTA achtergrond */
.pf-services-cta .forminator-label,
.pf-services-cta label,
.pf-services-cta .forminator-field label {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.pf-services-cta .forminator-input,
.pf-services-cta input[type="text"],
.pf-services-cta input[type="email"],
.pf-services-cta input[type="tel"],
.pf-services-cta textarea {
    background: rgba(255,255,255,0.1) !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
}

.pf-services-cta .forminator-input:focus,
.pf-services-cta input:focus,
.pf-services-cta textarea:focus {
    border-color: var(--brand-accent) !important;
    background: rgba(255,255,255,0.15) !important;
}

@media (max-width: 600px) {
    .pf-services-cta {
        padding: 40px 20px;
    }
    .pf-services-cta h2 {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   Over Performalytics pagina  (v1, 2026-09-03)
   Vervangt de oude "Over Ons" sectie. Alle styling van de pagina staat hier,
   zodat er geen CSS in de pagina zelf hoeft te staan.

   Belangrijk: WordPress voegt met wpautop lege <p> tags toe tussen blokken.
   Die werden grid-items en duwden de foto uit de hero. Daarom staat de
   plaatsing van tekst en foto expliciet vast en worden lege <p> verborgen.
   Alle nieuwe klassen werken los van een wrapper, zodat de opmaak ook klopt
   als de editor de buitenste div weghaalt.
   ========================================================================== */

/* --- Pagina wrapper --------------------------------------------------- */
.pf-about-page,
.pf-about-v2 {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px 80px;
    font-family: var(--font-body);
    color: #555;
    line-height: 1.8;
}

.pf-about-v2 > p:empty,
.pf-about-hero > p:empty,
.pf-steps > p:empty,
.pf-cta > p:empty { display: none; }

/* --- Titel ------------------------------------------------------------ */
.pf-about-page h1,
.pf-about-title {
    font-family: var(--font-header);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 32px;
    line-height: 1.15;
}

.pf-about-page h1 span { color: var(--brand-accent); }
.pf-about-title span   { color: var(--brand-accent-ink); }

.pf-about-v2 p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0 0 20px;
}

/* --- Hero: tekst links, foto rechts ----------------------------------- */
/* Geen scheidingslijn en weinig ruimte onder de hero: de intro en het
   statement eronder zijn een doorlopend verhaal, geen twee secties. */
.pf-about-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 0;
}

.pf-about-hero__text {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.pf-about-hero__image {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.pf-about-hero__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.pf-about-hero__image-placeholder {
    color: #bbb;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
}

.pf-photo-caption {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #888;
    text-align: left;
    margin-top: 10px;
    line-height: 1.4;
    width: 100%;
}

.pf-about-hero__text .lead {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: #333;
    line-height: 1.8;
    border-left: 4px solid var(--brand-accent);
    padding-left: 20px;
    margin-bottom: 24px;
}

.pf-about-hero__text p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Laatste alinea van de intro plakt tegen het statement aan, een verhaal. */
.pf-about-hero__text > p:last-child { margin-bottom: 0; }

/* --- Highlights voor de snelle lezer ---------------------------------- */
/* Olijf = de methode en de belofte. De letters staan op --brand-accent-ink,
   met een streepje in de echte accentkleur eronder als markeerstift. De
   accentkleur zelf is als tekstkleur op wit onleesbaar (contrast 1,2 op 1),
   daarom zit die alleen in de streep en niet in de letters. */
.pf-hl-g {
    color: var(--brand-accent-ink);
    font-weight: 700;
    background-image: linear-gradient(180deg, transparent 62%, rgba(204, 255, 0, .55) 62%);
}

/* Donkerblauw = de feiten en het bewijs. */
.pf-hl-b {
    color: var(--brand-primary);
    font-weight: 700;
}

/* --- Statement dat de naam uitlegt ------------------------------------ */
.pf-statement {
    font-family: var(--font-header);
    font-size: 1.5rem;
    line-height: 1.45;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0 0 56px;
    padding: 28px 32px;
    background: var(--brand-neutral);
    border-left: 6px solid var(--brand-accent);
    border-radius: 0 8px 8px 0;
}

.pf-statement strong {
    color: var(--brand-accent-ink);
    font-weight: 700;
}

/* --- Tekstblokken ----------------------------------------------------- */
.pf-block { margin: 0 0 48px; }

/* --- Genummerde stappen ----------------------------------------------- */
.pf-steps {
    margin: 0 0 56px;
    padding: 32px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
}

.pf-steps__intro {
    font-family: var(--font-header);
    font-weight: 600;
    color: var(--brand-primary);
    font-size: 1.05rem;
    margin: 0 0 20px;
}

.pf-steps ol {
    list-style: none;
    counter-reset: pfstep;
    margin: 0;
    padding: 0;
}

.pf-steps li {
    counter-increment: pfstep;
    position: relative;
    padding: 2px 0 0 48px;
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.pf-steps li:last-child { margin-bottom: 0; }

/* Cijfer exact in het midden: line-height 1 (anders erft het 1.6 van de li
   en zakt het cijfer), en de body-font in plaats van de monospace, want die
   heeft een scheve ascent/descent waardoor het cijfer te hoog kwam. */
.pf-steps li::before {
    content: counter(pfstep);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--brand-accent);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    padding: 1.5px 0 0 0;
    /* Alle vier de zijden expliciet: het moederthema zet padding-right op
       li::before, en die duwde het cijfer 3,4 px naar links. De 1,5 px
       bovenaan compenseert dat Roboto cijfers 0,75 px te hoog zet. */
    margin: 0;
    letter-spacing: 0;
    text-indent: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- Pullquote -------------------------------------------------------- */
.pf-pullquote {
    font-family: var(--font-header);
    font-size: 1.6rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--brand-primary);
    text-align: center;
    margin: 0 0 56px;
    padding: 40px 24px;
    border-top: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
}

/* --- Contactblok ------------------------------------------------------ */
.pf-cta {
    margin: 0;
    padding: 32px;
    background: var(--brand-primary);
    border-radius: 12px;
}

.pf-cta p {
    color: #ffffff;
    margin: 0 0 12px;
    font-size: 1.05rem;
    line-height: 1.7;
}

.pf-cta p:last-child { margin-bottom: 0; }

.pf-cta a {
    color: var(--brand-accent);
    font-weight: 700;
    text-decoration: underline;
}

.pf-cta a:hover { color: #ffffff; }

/* --- Kenmerken/USP lijst (behouden voor hergebruik) ------------------- */
.pf-about-usps {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pf-about-usps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
}

.pf-about-usps li::before {
    content: "";
    display: inline-block;
    min-width: 8px;
    height: 8px;
    background-color: var(--brand-accent);
    border-radius: 50%;
    margin-top: 6px;
}

/* --- Mobiel ----------------------------------------------------------- */
@media (max-width: 720px) {
    .pf-about-page,
    .pf-about-v2 {
        padding: 40px 20px 60px;
    }
    .pf-about-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pf-about-hero__text {
        grid-column: 1;
        grid-row: 1;
    }
    .pf-about-hero__image {
        grid-column: 1;
        grid-row: 2;
    }
    .pf-about-usps {
        grid-template-columns: 1fr;
    }
    .pf-about-page h1,
    .pf-about-title {
        font-size: 2.1rem;
    }
    .pf-statement {
        font-size: 1.25rem;
        padding: 24px;
    }
    .pf-pullquote {
        font-size: 1.25rem;
        padding: 32px 16px;
    }
    .pf-steps {
        padding: 24px 20px;
    }
    .pf-cta {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   Footer Links (Privacy & Terms)
   ========================================================================== */

/* Centreer copyright , exacte selectors uit footer HTML */
.colophon__row {
    justify-content: center !important;
}

.colophon__row > .col-12 {
    text-align: center !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

#footer__credits,
#footer__credits .czr-copyright {
    text-align: center !important;
}

.pf-footer-links {
    width: 100%;
    text-align: center;
    padding: 10px 0 14px;
    background-color: #1a1a1a;
}

.pf-footer-kvk {
    color: #888;
    font-family: var(--font-body), sans-serif;
    font-size: 0.78rem;
    margin: 0 14px;
}

.pf-footer-links a {
    color: #888;
    font-family: var(--font-body), sans-serif;
    font-size: 0.78rem;
    text-decoration: none;
    margin: 0 14px;
    transition: color 0.2s;
}

.pf-footer-links a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
   Shared: btn-primary (donkere variant)
   ========================================================================== */
.btn-primary {
    display: inline-block;
    background-color: var(--brand-primary);
    color: #ffffff;
    font-family: var(--font-header);
    font-weight: 700;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #2e4560;
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
   Forminator forms - font, spacing, button
   ========================================================================== */

/* Input field labels: "Jouw website", "Werk email" */
.forminator-ui.forminator-custom-form .forminator-label {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #1a2b3c !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}

/* Consent container + text (the <p> inside the div) */
.forminator-ui.forminator-custom-form .forminator-consent__label,
.forminator-ui.forminator-custom-form .forminator-checkbox__label,
.forminator-ui.forminator-custom-form .forminator-consent__label p,
.forminator-ui.forminator-custom-form .forminator-checkbox__label p {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Regular checkbox text (the <span>) - letter-spacing reset is the key fix */
.forminator-ui.forminator-custom-form .forminator-checkbox-label {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}

/* HTML field: "Eerlijk en duidelijk..." */
.forminator-ui.forminator-custom-form .forminator-field-html p {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.65 !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}

/* Full-width submit button */
.forminator-ui.forminator-custom-form .forminator-button-submit {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: #1a2b3c;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 25px;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
    background-color: #ccff00;
    color: #000000;
}

/* Forminator form links: brand green on hover */
.forminator-ui.forminator-custom-form a,
.forminator-ui.forminator-custom-form .forminator-consent__label p a,
.forminator-ui.forminator-custom-form .forminator-field-html a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.15s;
}

.forminator-ui.forminator-custom-form a:hover,
.forminator-ui.forminator-custom-form .forminator-consent__label p a:hover,
.forminator-ui.forminator-custom-form .forminator-field-html a:hover {
    color: #ccff00 !important;
    text-decoration: underline;
}

/* Radio labels: beat Forminator's [data-design=default] letter-spacing */
#forminator-module-99 .forminator-radio-label,
#forminator-module-99 .forminator-radio span {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #333 !important;
}

/* Global radio-label fix, all main-site Forminator forms */
.forminator-ui.forminator-custom-form[data-design="default"] .forminator-radio-label,
.forminator-ui.forminator-custom-form[data-design="default"] .forminator-radio span {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* ==========================================================================
   Bijschriften onder afbeeldingen, streepje weg
   Toegevoegd 2026-08-11 voor het AVG compliance benchmark artikel.
   Customizr Pro tekent standaard een streepje van 4em boven elk bijschrift via
   .wp-block-image figcaption::before en .wp-caption-text::before (zie
   customizr-pro/assets/front/css/style.min.css). Dat is niet met een inline
   style te overschrijven, want het is een pseudo-element. Deze regel zet het
   uit voor ALLE afbeeldingen op de hoofdsite.
   ========================================================================== */
.wp-block-image figcaption::before,
.wp-caption-text::before {
    content: none;
}

/* ==========================================================================
   Binnenkort blok  (v1, 2026-09-04)
   Teaser plus e-mail sign-up for a Kennisbank or Inspiratie article that is
   planned but not written yet. One block, one Forminator form, reused for
   every "coming soon" article: only the copy changes per post.
   Visual language follows the Over Performalytics page: neutral statement
   block with the accent bar, olive highlights, a dark card for the form.
   The post title is hidden site-wide (.entry-title above), so the block
   carries its own h1. Empty <p> from wpautop are hidden, same as pf-about.
   Full setup: How To Instructions/How to add a Binnenkort artikel met
   e-mail aanmelding.md
   ========================================================================== */

.pf-soon {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 0 40px;
    font-family: var(--font-body);
    color: #555;
    line-height: 1.8;
}

.pf-soon > p:empty,
.pf-soon__card > p:empty { display: none; }

/* --- Kicker: small label above the title -------------------------------- */
.pf-soon__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent-ink);
    margin: 0 0 18px;
}

.pf-soon__kicker::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-accent);
    box-shadow: 0 0 0 4px rgba(204, 255, 0, 0.25);
    flex: none;
}

/* --- Title (h1, the post title itself is hidden by the global rule) ----- */
.pf-soon .pf-soon__title,
.pf-soon h1.pf-soon__title {
    display: block;
    font-family: var(--font-header);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1.15;
    margin: 0 0 24px;
}

.pf-soon__title span { color: var(--brand-accent-ink); white-space: nowrap; }

/* --- Lead paragraph, accent bar left like .lead on the Over page --------- */
.pf-soon__lead {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: #333;
    line-height: 1.8;
    border-left: 4px solid var(--brand-accent);
    padding-left: 20px;
    margin: 0 0 24px;
}

.pf-soon__text {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin: 0 0 32px;
}

/* --- "What the article will cover" box ------------------------------------ */
.pf-soon__box {
    margin: 0 0 32px;
    padding: 28px 32px;
    background: var(--brand-neutral);
    border-left: 6px solid var(--brand-accent);
    border-radius: 0 8px 8px 0;
}

.pf-soon__box-title {
    font-family: var(--font-header);
    font-weight: 600;
    color: var(--brand-primary);
    font-size: 1.05rem;
    margin: 0 0 14px;
}

.pf-soon__box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-soon__box li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin: 0 0 10px;
}

.pf-soon__box li:last-child { margin-bottom: 0; }

.pf-soon__box li::before {
    content: "";
    display: inline-block;
    min-width: 8px;
    height: 8px;
    background: var(--brand-accent-ink);
    border-radius: 50%;
    margin-top: 10px;
}

/* --- Dark card that holds the form ---------------------------------------- */
.pf-soon__card {
    margin: 0 0 20px;
    padding: 36px 36px 32px;
    background: var(--brand-primary);
    border-radius: 12px;
}

.pf-soon__card-title {
    font-family: var(--font-header);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-accent);
    line-height: 1.3;
    margin: 0 0 8px;
}

.pf-soon__card-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin: 0 0 24px;
}

/* Forminator inside the dark card. Selectors carry .forminator-ui.forminator-
   custom-form to reach (0,3,0)+ and beat Forminator's [data-design] rules,
   see How To Instructions/How to style Forminator forms to match site fonts.md */
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-label {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.pf-soon__card .forminator-ui.forminator-custom-form .forminator-input,
.pf-soon__card .forminator-ui.forminator-custom-form input[type="email"],
.pf-soon__card .forminator-ui.forminator-custom-form input[type="text"] {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    box-shadow: none !important;
}

.pf-soon__card .forminator-ui.forminator-custom-form .forminator-input::placeholder,
.pf-soon__card .forminator-ui.forminator-custom-form input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.pf-soon__card .forminator-ui.forminator-custom-form .forminator-input:focus,
.pf-soon__card .forminator-ui.forminator-custom-form input:focus {
    border-color: var(--brand-accent) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    outline: none !important;
}

/* Optional newsletter checkbox and its text, light on dark */
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-checkbox-label,
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-checkbox__label,
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-consent__label p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
}

/* Disclosure text ("Eerlijk en duidelijk.") small and muted */
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-field-html p {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
}

.pf-soon__card .forminator-ui.forminator-custom-form a,
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-field-html a,
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-consent__label p a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: underline;
}

.pf-soon__card .forminator-ui.forminator-custom-form a:hover,
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-field-html a:hover {
    color: var(--brand-accent) !important;
}

/* Submit: accent button, same shape as .btn-accent on the homepage */
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-button-submit {
    background-color: var(--brand-accent) !important;
    color: #000000 !important;
    font-family: var(--font-header) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: 25px !important;
    padding: 14px 20px !important;
    border: none !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.pf-soon__card .forminator-ui.forminator-custom-form .forminator-button-submit:hover {
    background-color: #ffffff !important;
    color: var(--brand-primary) !important;
}

/* Success and error messages readable on dark */
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-response-message,
.pf-soon__card .forminator-ui.forminator-custom-form .forminator-response-message p {
    color: #ffffff !important;
    font-family: var(--font-body) !important;
}

.pf-soon__card .forminator-ui.forminator-custom-form .forminator-response-message.forminator-success {
    background: rgba(204, 255, 0, 0.12) !important;
    border: 1px solid rgba(204, 255, 0, 0.5) !important;
    border-radius: 8px !important;
}

/* --- PS line under the card ------------------------------------------------ */
.pf-soon__ps {
    font-size: 0.9rem;
    color: #777;
    line-height: 1.6;
    margin: 0;
}

.pf-soon__ps a {
    color: var(--brand-accent-ink);
    font-weight: 600;
    text-decoration: underline;
}

.pf-soon__ps a:hover { color: var(--brand-primary); }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 720px) {
    .pf-soon {
        padding: 32px 0 32px;
    }
    .pf-soon .pf-soon__title,
    .pf-soon h1.pf-soon__title {
        font-size: 2rem;
    }
    .pf-soon__lead {
        font-size: 1.05rem;
    }
    .pf-soon__box {
        padding: 22px 20px;
    }
    .pf-soon__card {
        padding: 28px 20px 24px;
    }
    .pf-soon__card-title {
        font-size: 1.3rem;
    }
}