/*
Theme Name: Heatmedia
Theme URI: https://heatmedia.nl
Author: Heatmedia
Author URI: https://heatmedia.nl
Description: Standalone Heatmedia thema. Elke pagina wordt opgebouwd als vast PHP-template. Losgekoppeld van Elementor en Naxos.
Version: 1.2.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: heatmedia
*/

/* ============================================================
   GLOBALE BOX-SIZING RESET
   Eenmalig, zodat max-width overal de buitenmaat is en padding
   naar binnen wordt getrokken. Vervangt de losse per-sectie
   border-box regels. Standaard container: max-width 1200px,
   padding 0 10px, margin 0 auto.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
a {
    color: inherit;
    text-decoration: none;
}
.post-author a {
    color: #000;
    text-decoration: none;
}
button.hm-ga-rev-arrow.hm-ga-rev-prev:hover {
    color: #fff;
}
p, a {
    font-size: 15px;
}
img.hm-logo-img.hm-logo-wit {
    max-width: 184px;
    height: auto;
}
/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root {
    --rood: #DE2918;
    --terracotta: #7A2818;
    --cream: #FBF6EE;
    --tekst: #2C2C2A;

    --rood-hover: #B92516;
    --rood-zacht: rgba(222, 41, 24, 0.1);
    --terracotta-diep: #5A1E10;
    --baksteen: #9A3320;
    --terracotta-glas: rgba(122, 40, 24, 0.95);

    --grijs: #5F5E5A;
    --grijs-zacht: rgba(44, 44, 42, 0.6);
    --lijn: #E8E4DC;
    --lijn-warm: #F0E8D5;
    --accent-licht: #FCC3BD;

    --font-tekst: 'Roboto', sans-serif;
    --font-heading: 'Oswald', sans-serif;
}


@media only screen and (max-width: 768px) {
    h1.blog-title { font-size: 30px !important; }
}

.pattern {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
        url('https://heatmedia.nl/wp-content/uploads/2026/04/Dots-right-top.png'),
        url('https://heatmedia.nl/wp-content/uploads/2026/04/Dots-left-bottom.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
        center,
        right -500px top -500px,
        left -500px bottom -500px;
}
.e-con-inner {
  gap: 0;
  row-gap: 0;
}


.elementor-element-5fc56f6,
.elementor-element-5fc56f6 > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.hm-eyebrow-red {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 12px;
    display: inline-block;
}



.hm-logos {
    background: #F5F3F0;
    padding: 40px 0;
    overflow: hidden;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
}

.hm-logos-caption {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8A857D;
    margin: 0 0 34px;
}
.hm-logos-caption strong {
    color: #DE2918;
    font-weight: 700;
}
.hm-logos-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}
.hm-logos-wrapper::before,
.hm-logos-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 160px;
    z-index: 2;
    pointer-events: none;
}
.hm-logos-wrapper::before { left: 0; background: linear-gradient(to right, #F5F3F0, transparent); }
.hm-logos-wrapper::after { right: 0; background: linear-gradient(to left, #F5F3F0, transparent); }
.hm-logos-track {
    display: flex;
    gap: 80px;
    align-items: center;
    width: max-content;
    padding: 0;
}
.hm-logos-left { animation: hm-logos-scroll-left 36s linear infinite; }
.hm-logos-right { animation: hm-logos-scroll-right 36s linear infinite; }
.hm-logos-wrapper:hover .hm-logos-track { animation-play-state: paused; }
.hm-logo-item {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    margin: 20px 0;
}
.hm-logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}
.hm-logo-item img {
    max-height: 56px;
    max-width: 180px;
    object-fit: contain;
}
@keyframes hm-logos-scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes hm-logos-scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@media (max-width: 768px) {
    .hm-logos-caption { padding: 0 25px; }

    .hm-logos-wrapper::before,
    .hm-logos-wrapper::after { width: 48px; }

    .hm-logos-track { gap: 48px; }
    .hm-logos-left  { animation-duration: 22s; }
    .hm-logos-right { animation-duration: 22s; }
}

.hm-logo-item img[alt="Jan Pas"],
.hm-logo-item img[alt="Bedder"],
.hm-logo-item img[alt="Safretti"] {
    max-height: 88px;
}


.hm-tile-num {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.9);
}
.hm-tile-num::before {
    content: '';
    width: 22px;
    height: 2px;
    background: #DE2918;
    flex-shrink: 0;
}

.hm-tile-name {
    letter-spacing: -0.3px;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25);
}
.hm-tile-desc {
    max-width: 440px;
    line-height: 1.45;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.2);
}


.hm-tile-btn {
    align-items: center;
    gap: 7px;
}
.hm-tile-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}
.hm-tile:hover .hm-tile-arrow {
    transform: translateX(4px);
}


@media (max-width: 900px) {
    .hm-tile-num { display: none; }
}


.hm-d-wd {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 10px;
    font-family: 'Roboto', sans-serif;
}

.hm-d-wd-text{
	font-size: 15px;
    line-height: 1.75;
    color: #5F5E5A;
    margin: 0 0 16px;
}
.hm-d-wd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.hm-d-wd-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-d-wd-float {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    border-radius: 10px;
    filter: drop-shadow(0 26px 40px rgba(0,0,0,0.18));
    transition: transform .15s linear;
    will-change: transform;
}
.hm-d-wd-cat {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 12px;
}
.hm-d-wd-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    color: #2C2C2A;
    margin: 0 0 18px;
    line-height: 1.1;
    text-transform: none;
	letter-spacing: 0.5px;
}
.hm-d-wd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DE2918;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: 10px;
    border: 2px solid #DE2918;
    transition: background .2s, color .2s, gap .2s;
    margin-top: 20px;
}
.hm-d-wd-btn:hover {
    background: transparent;
    color: #DE2918;
    gap: 12px;
}
@media (max-width: 860px) {
    .hm-d-wd { padding: 40px 20px; }
    .hm-d-wd-grid { grid-template-columns: 1fr; gap: 28px; }
    .hm-d-wd-visual { order: 1; }
    .hm-d-wd-body { order: 2; padding: 10px 0; }
    .hm-d-wd-title { font-size: 32px; }
	.hm-d-wd {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    }
}


.hm-d-seo {
    background: #FBF6EE;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 90px 0;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}
.hm-d-seo-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}
.hm-d-seo-cat {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 14px;
}
.hm-d-seo-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    color: #2C2C2A;
    margin: 0 0 18px;
    text-transform: none;
	letter-spacing: -0.5px;
}
.hm-d-seo-sub {
    font-size: 15px;
    line-height: 1.7;
    color: #5F5E5A;
    max-width: 660px;
    margin: 0 auto 50px;
}
.hm-d-seo-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto 50px;
}
.hm-d-seo-card {
    background: #fff;
    border: 1.5px solid #e8e4dc;
    border-radius: 10px;
    padding: 36px 28px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
}
.hm-d-seo-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: #DE2918;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.hm-d-seo-card:hover {
    border-color: #ccc;
}
.hm-d-seo-card:hover::after {
    transform: scaleX(1);
}
.hm-d-seo-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #DE2918;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 22px;
}
.hm-d-seo-card-icon svg {
    width: 22px;
    height: 22px;
}
.hm-d-seo-card-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #2C2C2A;
    margin: 0 0 10px;
    line-height: 1.2;
}
.hm-d-seo-card-text {
    font-size: 14px;
    line-height: 1.6;
    color: #5F5E5A;
    margin: 0;
}
.hm-d-seo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DE2918;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: 10px;
    border: 2px solid #DE2918;
    transition: background .2s, color .2s, gap .2s;
}
.hm-d-seo-btn:hover {
    background: transparent;
    color: #DE2918;
    gap: 12px;
}
@media (max-width: 860px) {
    .hm-d-seo { padding: 60px 0; }
    .hm-d-seo-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .hm-d-seo-title { font-size: 32px; }
    .hm-d-seo-cards { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
    .hm-d-seo-card { padding: 28px 24px; }
}


.hm-d-sm {
    position: relative;
    background: #FBF6EE;
    font-family: 'Roboto', sans-serif;
    overflow: visible;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 160px;
}
.hm-d-sm-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
}
.hm-d-sm-body { padding-top: 60px; padding-bottom: 60px; }
.hm-d-sm-cat {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 12px;
}
.hm-d-sm-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    color: #2C2C2A;
    margin: 0 0 18px;
    text-transform: none;
	letter-spacing: -0.5px;
}
.hm-d-sm-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: #5F5E5A;
    margin: 0 0 22px;
}
.hm-d-sm-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hm-d-sm-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: background .2s, color .2s, border-color .2s;
}
.hm-d-sm-btn-primary { background: #DE2918; color: #fff; border-color: #DE2918; }
.hm-d-sm-btn-primary:hover { background: transparent; color: #DE2918; border-color: #DE2918; }
.hm-d-sm-btn-dark { background: #7A2818; color: #fff; border-color: #7A2818; }
.hm-d-sm-btn-dark:hover { background: transparent; color: #7A2818; border-color: #7A2818; }

.hm-d-sm-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.hm-d-sm-phone {
    width: 320px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: -110px;
    margin-bottom: 0;
    border-radius: 10px;
    filter: drop-shadow(0 28px 44px rgba(0,0,0,0.22));
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.hm-d-sm.is-visible .hm-d-sm-phone {
    opacity: 1;
    transform: translateY(0);
}
.hm-d-sm-phone-mobile { display: none; }

@media (max-width: 860px) {
    .hm-d-sm {
        margin-top: 0;
        padding-top: 0;
        background: transparent;
    }
    .hm-d-sm-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        margin: 0;
        max-width: 100%;
    }

    .hm-d-sm-visual {
        order: 1;
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
        line-height: 0;
        position: relative;
        z-index: 2;
    }
    .hm-d-sm-phone-desktop { display: none; }
.hm-d-sm-phone-mobile {
        display: block;
        width: 84%;
        max-width: 330px;
        aspect-ratio: 370 / 464;
        object-fit: cover;
        object-position: center bottom;
        margin: 0;
        filter: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hm-d-sm-body {
        order: 2;
        background: #FBF6EE;
        text-align: left;
        padding: 30px 25px 50px;
        margin-top: 0;
        position: relative;
        z-index: 1;
    }
    .hm-d-sm-cat  { margin-top: 0; }
    .hm-d-sm-btns { justify-content: flex-start; }
    .hm-d-sm-title{ font-size: 32px; }
}


.hm-d-ads {
    background: #7A2818;
    padding: 60px 0px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
}
.hm-d-ads-head {
    max-width: 1200px;
    margin: 0 auto 40px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.hm-d-ads-cat {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FCC3BD;
    margin-bottom: 12px;
}
.hm-d-ads-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    color: #fff;
    margin: 0 0 18px;
    line-height: 1.1;
    text-transform: none;
	letter-spacing: -0.5px;
}
.hm-d-ads-intro {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin: 0;
}
.hm-d-ads-tabs {
    max-width: 1200px;
    margin: 0 auto;
	padding: 0px 15px;
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hm-d-ads-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hm-d-ads-tabbtn {
    appearance: none;
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 40px;
    padding: 11px 22px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.hm-d-ads-tabbtn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}
.hm-d-ads-tabbtn.is-active {
    background: #fff;
    color: #7A2818;
    border-color: #fff;
    font-weight: 600;
}
.hm-d-ads-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 480px;
}
.hm-d-ads-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(12px);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    opacity: 0;
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.hm-d-ads-img.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}
.hm-d-ads-content {
    position: relative;
    min-height: 280px;
}
.hm-d-ads-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.hm-d-ads-slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}
.hm-d-ads-slide h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.15;
}
.hm-d-ads-slide p {
    font-size: 14.5px;
    color: rgba(255,255,255,0.88);
    line-height: 1.7;
    margin: 0 0 22px;
}
.hm-d-ads-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DE2918;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: 10px;
    border: 2px solid #DE2918;
    transition: background .2s, color .2s, border-color .2s, gap .2s;
}
.hm-d-ads-btn:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
    gap: 12px;
}
@media (max-width: 1024px) {
    .hm-d-ads-tabs { grid-template-columns: 200px 1fr; }
    .hm-d-ads-visual { display: none; }
}
@media (max-width: 720px) {
    .hm-d-ads { padding: 60px 0; }
    .hm-d-ads-head { padding-left: 20px; padding-right: 20px; }
    .hm-d-ads-tabs { padding: 0 20px; }

    .hm-d-ads-title { font-size: 32px; }
    .hm-d-ads-tabs {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .hm-d-ads-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        order: 1;
    }
    .hm-d-ads-tabbtn { padding: 9px 16px; font-size: 13px; }


    .hm-d-ads-visual {
        display: flex;
        order: 2;
        min-height: 360px;
    }
    .hm-d-ads-img { max-height: 360px; }

    .hm-d-ads-content { min-height: auto; order: 3; }
    .hm-d-ads-slide { position: relative; }
    .hm-d-ads-slide:not(.is-active) { display: none; }
}


.hm-d-rm {
    background: #FBF6EE;
    padding: 90px 0px;
    font-family: 'Roboto', sans-serif;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.hm-d-rm-inner {
    max-width: 1200px;
    margin: 0 auto;
	padding: 0px 10px
}
.hm-d-rm-head {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}
.hm-d-rm-cat {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 12px;
    display: inline-block;
}
.hm-d-rm-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    color: #2C2C2A;
    line-height: 1.1;
    margin: 0 0 18px;
    text-transform: none;
	letter-spacing: -0.5px;
}
.hm-d-rm-sub {
    font-size: 15px;
    line-height: 1.7;
    color: #5F5E5A;
    margin: 0;
}


.hm-d-rm-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    align-items: stretch;
}


.hm-d-rm-step {
    background: #fff;
    border: 1.5px solid #E8E4DC;
    border-radius: 10px;
    padding: 32px 26px;
    text-align: center;
    position: relative;
    transition: border-color .25s, box-shadow .25s;
}


.hm-d-rm-step::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #DE2918;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    z-index: 1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.hm-d-rm-step:hover {
    border-color: #ccc;
}
.hm-d-rm-step:hover::after {
    transform: scaleX(1);
}


.hm-d-rm-step:not(:last-child)::before {
    content: '';
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='%23DE2918' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='0' y1='6' x2='20' y2='6'/><polyline points='14 1 20 6 14 11'/></svg>") no-repeat center;
    background-size: contain;
    z-index: 5;
    pointer-events: none;
}


.hm-d-rm-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #DE2918;
    color: #fff;
    border-radius: 50%;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 18px;
}


.hm-d-rm-icon {
    margin: 0 auto 18px;
    width: 56px;
    height: 56px;
    background: rgba(222, 41, 24, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DE2918;
}
.hm-d-rm-icon svg { width: 28px; height: 28px; }


.hm-d-rm-step h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #2C2C2A;
    margin: 0 0 10px;
    line-height: 1.2;
    text-transform: none;
}
.hm-d-rm-step p {
    font-size: 13.5px;
    color: #5F5E5A;
    line-height: 1.6;
    margin: 0;
}


.hm-d-rm-cta {
    text-align: center;
    margin-top: 56px;
}
.hm-d-rm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DE2918;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: 10px;
    border: 2px solid #DE2918;
    transition: background .2s, color .2s, gap .2s;
}
.hm-d-rm-btn:hover {
    background: transparent;
    color: #DE2918;
    gap: 12px;
}

@media (max-width: 900px) {
    .hm-d-rm { padding: 60px 0; }
    .hm-d-rm-inner { padding: 0 20px; }

    .hm-d-rm-flow {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0 12px;
        scrollbar-width: none;
    }
    .hm-d-rm-flow::-webkit-scrollbar { display: none; }

    .hm-d-rm-step {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }

    .hm-d-rm-step:not(:last-child)::before { display: none; }
    .hm-d-rm-title { font-size: 32px; }
}


body.single .page-title.parallax,
body.single .page-title.valign,
body.single .page-title {
    background-image: linear-gradient(135deg, #9A3320 0%, #5A1E10 100%) !important;
    background-color: #5A1E10 !important;
    background-attachment: scroll !important;
    position: relative;
    overflow: hidden;
	margin-top: -40px !important;
    height: auto !important;
    min-height: 360px !important;
    max-height: none !important;
    padding: 180px 24px 60px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
}
body.single .page-title::after,
body.single .page-title + .page-title-curve {
    display: none !important;
}
body.single .page-title .container,
body.single .page-title .row,
body.single .page-title .col-12 {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.single .page-title.parallax .overlay {
    background: transparent !important;
}
body.single .page-title .container { position: relative; z-index: 1; }
body.single .page-title .blog-category { margin-bottom: 22px; }
body.single .page-title .blog-category a {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 100px;
    text-decoration: none;
}
body.single .page-title h1.blog-title {
    font-family: 'Oswald', sans-serif !important;
    font-size: 44px !important;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.5px;
    max-width: 1000px;
    margin: 0 auto 26px;
}
body.single .blog-meta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
body.single .hm-hero-detail {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
}
body.single .hm-hero-sep {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.25);
    display: inline-block;
}
body.single .page-title .blogcrumbs {
    display: none;
}

@media (min-width: 992px) {
    .blog .row > .col-lg-4 {
        position: sticky;
        top: 110px;
        align-self: flex-start;
	}
	    .blog .row > .col-lg-8 {
        padding-right: 15px !important;
    }
    .blog .row > .col-lg-4 {
        padding-left: 15px !important;
	}
}

body.single .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    body.single .page-title {
        min-height: 280px !important;
        margin-top: -20px !important;
        padding: 130px 20px 40px !important;
    }
    body.single .page-title h1.blog-title { font-size: 30px !important; }

    body.single .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


body.single .blog-post p {
    font-size: 15px;
    line-height: 1.78;
    color: #3A3A38;
    margin-bottom: 20px;
}
body.single .blog-post h2 {
    font-family: 'Oswald', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #2C2C2A !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px;
    margin: 40px 0 16px !important;
}
body.single .blog-post h3 {
    font-family: 'Oswald', sans-serif !important;
    font-size: 25px !important;
    font-weight: 600 !important;
    color: #2C2C2A !important;
    margin: 28px 0 12px !important;
}
body.single .blog-post em { font-style: italic; color: #5F5E5A; }
body.single .blog-post strong { color: #2C2C2A; font-weight: 600; }
body.single .blog-post ul {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}
body.single .blog-post ul li {
    font-size: 15px;
    line-height: 1.7;
    color: #3A3A38;
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
}
body.single .blog-post ul li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DE2918;
}
body.single .blog-post ol {
    padding-left: 22px;
    margin: 0 0 22px;
}
body.single .blog-post ol li {
    font-size: 15px;
    line-height: 1.7;
    color: #3A3A38;
    margin-bottom: 10px;
    padding-left: 6px;
}
body.single .blog-post a {
    color: #DE2918;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
body.single .blog-post a:hover { color: #B92516; }


.hm-toc {
    background: #FBF6EE;
    border: 1px solid #ECE3D4;
    border-radius: 7px;
    padding: 24px 28px;
    margin-bottom: 36px;
}
.hm-toc-h {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #2C2C2A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hm-toc-h::before {
    content: '';
    width: 18px;
    height: 3px;
    background: #DE2918;
    display: inline-block;
}
.hm-toc-list a {
    display: block;
    font-size: 14.5px;
    color: #5F5E5A;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s, padding-left 0.2s;
}
.hm-toc-list a:last-child { border-bottom: none; }
.hm-toc-list a:hover {
    color: #DE2918;
    padding-left: 6px;
}
body.single .blog-post,
body.single .blog-post:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    transition: none !important;
    padding: 0 !important;
    height: auto !important;
}


.col-lg-4 .sidebar.widget {
    margin-bottom: 22px;
}
.col-lg-4 .sidebar.widget header h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #2C2C2A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

#text-2.widget {
    background: linear-gradient(135deg, #DE2918, #7A2818);
    border-radius: 7px;
    padding: 28px 26px;
    position: relative;
    overflow: hidden;
}
#text-2.widget header h4 {
    color: #fff !important;
    font-size: 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: -15px !important;
}
#text-2 .textwidget p {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.88);
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}
#text-2 .hm-scan-btn,
.sidebar.widget_text .hm-scan-btn {
    display: block;
    width: fit-content;
    margin: 16px auto 0;
    background: #fff;
    color: #DE2918 !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 18px;
    border: 2px solid #fff;
    border-radius: 7px;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
#text-2 .hm-scan-btn:hover,
.sidebar.widget_text .hm-scan-btn:hover {
    background: transparent;
    color: #fff !important;
    border-color: #fff;
}


#text-2 .hm-scan-btn span,
.sidebar.widget_text .hm-scan-btn span {
    background: linear-gradient(135deg, #DE2918, #7A2818);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#text-2 .hm-scan-btn:hover span,
.sidebar.widget_text .hm-scan-btn:hover span {
    background: none;
    -webkit-text-fill-color: #fff;
}

#categories-4.widget {
    border: 1px solid #ECE3D4;
    border-radius: 7px;
    padding: 24px 26px;
}
#categories-4 ul { list-style: none; margin: 0; padding: 0; }
#categories-4 li,
#categories-4 ul,
#categories-4 li a { border: none; }
#categories-4 li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14.5px;
    color: #5F5E5A;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    transition: color 0.2s;
}
#categories-4 li:last-child a { border-bottom: none !important; }
#categories-4 li a:hover { color: #DE2918; }
#categories-4 li a::after {
    content: '→';
    opacity: 0;
    transition: opacity 0.2s;
}
#categories-4 li a:hover::after { opacity: 1; }

@media (max-width: 991px) {
    body.single .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    body.single .col-12.col-lg-4 .row {
        margin-left: 0;
        margin-right: 0;
    }
    body.single .col-12.col-lg-4 [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}


@media (min-width: 992px) {
    body.single .blog-post,
    body.single .blog-post:hover {
        padding-right: 28px !important;
    }
    body.single .col-lg-4 {
        padding-left: 28px;
    }
}


@media (min-width: 992px) {
    body.single .single-post-footer,
    body.single .post-navigation-wrapper .row {
        padding-right: 28px;
    }
}


.hm-kc { max-width: 1000px; margin: 0 auto; }
.hm-kc-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.hm-kc-chip {
    font-size: 13px; font-weight: 500; padding: 8px 16px;
    border-radius: 100px; border: 1px solid #ECE3D4; color: #5F5E5A;
    text-decoration: none; transition: all 0.2s;
}
.hm-kc-chip:hover { border-color: #DE2918; color: #DE2918; }
.hm-kc-chip.active { background: #DE2918; border-color: #DE2918; color: #fff; }

.hm-kc-list { border-top: 1px solid #ECE3D4; }
.hm-kc-row {
    display: grid; grid-template-columns: 240px 1fr; gap: 28px;
    padding: 24px 0; border-bottom: 1px solid #ECE3D4; align-items: center;
}
.hm-kc-thumb-link { display: block; }
.hm-kc-thumb {
    display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 7px;
    background-color: #ddd; background-position: center; background-size: cover;
}
.hm-kc-body { min-width: 0; }
.hm-kc-cat { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #888780; margin-bottom: 10px; }
.hm-kc-cat a { color: #888780; text-decoration: none; }
.hm-kc-cat a:hover { color: #DE2918; }
.hm-kc-title { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 600; line-height: 1.15; margin: 0 0 12px; }
.hm-kc-title a { color: #7A2818; text-decoration: none; }
.hm-kc-title a:hover { color: #DE2918; }
.hm-kc-excerpt { font-size: 14.5px; line-height: 1.65; color: #5F5E5A; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hm-kc-readmore { font-size: 14px; font-weight: 600; color: #DE2918; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; }
.hm-kc-row:hover .hm-kc-readmore { gap: 10px; }
.hm-kc-meta { font-size: 12.5px; color: #888780; margin-top: 8px; }

.hm-kc-pagination { display: flex; align-items: center; justify-content: center; margin-top: 40px; gap: 6px; flex-wrap: wrap; }
.hm-kc-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
    padding: 0 12px; border: 1px solid #ECE3D4; border-radius: 7px; color: #5F5E5A;
    text-decoration: none; font-size: 14px; transition: all 0.2s;
}
.hm-kc-pagination .page-numbers:hover { border-color: #DE2918; color: #DE2918; }
.hm-kc-pagination .page-numbers.current { background: #DE2918; border-color: #DE2918; color: #fff; }

@media (max-width: 700px) {
    .hm-kc-row { grid-template-columns: 1fr; gap: 16px; }
    .hm-kc-thumb { aspect-ratio: 16 / 9; }
    .hm-kc-title { font-size: 22px; }
}


.hm-footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.hm-footer-socials a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,255,255,0.12);
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
.hm-footer-socials a:hover {
    background: #DE2918;
    transform: translateY(-3px);
}
.hm-footer-socials svg { display: block; }

.hm-footer-contact {
    list-style: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}
.hm-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 12px !important;
    color: rgba(255,255,255,0.78);
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.4;
}
.hm-footer-contact li svg {
    color: #DE2918;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    display: block;
}
.hm-footer-contact li a {
    color: rgba(255,255,255,0.78) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.hm-footer-contact li a:hover {
    color: #ffffff !important;
}


.hm-accent-red { color: #DE2918; }
.hm-h-underline {
    background-image: linear-gradient(#DE2918, #DE2918);
    background-size: 100% 4px;
    background-repeat: no-repeat;
    background-position: 0 92%;
    padding-bottom: 2px;
}
.hm-h-thin  { font-weight: 300; }
.hm-h-thick { font-weight: 700; }
.hm-h-dot::after { content: '.'; color: #DE2918; }
.hm-h-grad {
    background: linear-gradient(90deg, #DE2918, #9A3320);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hm-mk {
    position: relative;
    display: inline-block;
    z-index: 0;
    color: #7A2818;
}
.hm-mk::before {
    content: '';
    position: absolute;
    left: -6px; right: -6px;
    bottom: 5px;
    height: 42%;
    background: rgba(122,40,24,0.20);
    z-index: -1;
    transform: skewX(-14deg);
}
.hm-mk-terra { color: inherit; }
.hm-mk-terra::before {
    background: rgba(222, 41, 24, 0.22);
}

/* ============================================================
   HERBRUIKBARE VINKJES-LIJST (site-breed)
   ============================================================ */
.hm-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hm-checklist li {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #2C2C2A;
    padding-left: 34px;      /* ruimte voor het vinkje */
    position: relative;      /* zodat ::before aan het item hangt */
    line-height: 1.5;
    min-height: 22px;
    display: flex;
    align-items: center;
}
.hm-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(222, 41, 24, 0.10)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DE2918' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
      center / 12px 12px no-repeat;
}
.hm-checklist li b { font-weight: 700; }

/* ============================================================
   SEO OPTIMALISATIE PAGINA (page-id 1429) — gerichte fixes
   ============================================================ */

/* ===== HERO HOOGTE — moet 450px, geen 514px ===== */
body.page-id-1429 section.hm-hero,
body.page-id-1429 .elementor-section.hm-hero {
    min-height: 450px !important;
    height: 450px !important;
	padding: 70px 24px 70px !important;
}

/* ===== BREADCRUMB STYLING ===== */
/* De breadcrumb is een text-editor widget met links erin, in de hero */
body.page-id-1429 .hm-hero .elementor-widget-text-editor:first-of-type {
    margin-bottom: 16px !important;
}
body.page-id-1429 .hm-hero .elementor-widget-text-editor:first-of-type a,
body.page-id-1429 .hm-hero .elementor-widget-text-editor:first-of-type span {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
}
body.page-id-1429 .hm-hero .elementor-widget-text-editor:first-of-type a:hover {
    color: #fff !important;
}

/* ===== EYEBROW — ruimte onder kleiner ===== */
/* Eyebrows zitten in text-editor widgets met een <p><span>...</span></p> */
body.page-id-1429 .elementor-widget-text-editor p:has(> span[style*="color: #de2918"]),
body.page-id-1429 .elementor-widget-text-editor p:has(> span[style*="color:#de2918"]) {
    margin-bottom: 0 !important;
    line-height: 1 !important;
}
/* Het widget eromheen ook minder margin onder */
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color: #de2918"]),
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color:#de2918"]) {
    margin-bottom: 8px !important;
}
/* En de heading daar direct onder krijgt minder margin boven */
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color: #de2918"]) + .elementor-widget-heading,
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color:#de2918"]) + .elementor-widget-heading {
    margin-top: 0 !important;
}

/* ===== KNOPPEN — overschrijf inline-style met hoge specificiteit ===== */
body.page-id-1429 .elementor-widget-button .elementor-button,
body.page-id-1429 a.elementor-button.elementor-button-link {
    background: #DE2918 !important;
    color: #fff !important;
    border: 2px solid #DE2918 !important;
    border-radius: 10px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 9 22px !important;
    transition: background 0.2s, color 0.2s !important;
    outline: none !important;
    box-shadow: none !important;
}
body.page-id-1429 .elementor-widget-button .elementor-button:hover,
body.page-id-1429 a.elementor-button.elementor-button-link:hover {
    background: transparent !important;
    color: #DE2918 !important;
    outline: none !important;
    box-shadow: none !important;
}
body.page-id-1429 .elementor-widget-button .elementor-button:hover .elementor-button-text {
    color: #DE2918 !important;
}

/* Knop op rode achtergrond (.btn-on-red) — wit met outlined hover */
body.page-id-1429 .btn-on-red .elementor-button {
    background: #fff !important;
    color: #DE2918 !important;
    border: 2px solid #fff !important;
}
body.page-id-1429 .btn-on-red .elementor-button:hover {
    background: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
}
body.page-id-1429 .btn-on-red .elementor-button:hover .elementor-button-text {
    color: #fff !important;
}

/* ===== PARAGRAAF KLEUR — was #6b6560 (te licht), moet #5F5E5A ===== */
body.page-id-1429 .elementor-widget-text-editor,
body.page-id-1429 .elementor-widget-text-editor p {
    color: #5F5E5A !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
}
/* Behoud witte tekst in de rode CTA-sectie en hero */
body.page-id-1429 .hm-cta .elementor-widget-text-editor,
body.page-id-1429 .hm-cta .elementor-widget-text-editor p,
body.page-id-1429 .hm-hero .elementor-widget-text-editor,
body.page-id-1429 .hm-hero .elementor-widget-text-editor p {
    color: rgba(255,255,255,0.9) !important;
}

/* ===== VINKJES — overschrijf de inline rode blokjes ===== */
/* De vinkjes zijn inline-styled spans met een ✓ erin */
body.page-id-1429 #list li > span:first-child,
body.page-id-1429 ul#list li > span[style*="background:#DE2918"] {
    background: #DE2918 !important;
    border-radius: 6px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    color: transparent !important;
    font-size: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 13px 13px !important;
}


/* ===== HEADINGS — voor alle h1/h2 op deze pagina ===== */
body.page-id-1429 .elementor-heading-title {
    font-family: 'Oswald', sans-serif !important;
    text-transform: none !important;
    letter-spacing: -0.3px !important;
    line-height: 1.1 !important;
}
body.page-id-1429 .hm-hero h1.elementor-heading-title {
    font-size: 50px !important;
    color: #fff !important;
    letter-spacing: -0.5px !important;
}
body.page-id-1429 section:not(.hm-hero):not(.hm-cta) h2.elementor-heading-title {
    font-size: 40px !important;
    color: #2C2C2A !important;
}
body.page-id-1429 .hm-cta h2.elementor-heading-title {
    font-size: 34px !important;
    color: #fff !important;
}

/* ===== HERO PARAGRAAF — moet wit zijn en goede grootte ===== */
body.page-id-1429 .hm-hero .elementor-widget-text-editor p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.9) !important;
    text-align: center !important;
}

/* ============================================================
   SEO OPTIMALISATIE — extra fixes (CTA + headings + eyebrows)
   ============================================================ */

/* ===== CTA-SECTIE — van rood naar terracotta met dot-textuur ===== */
body.page-id-1429 .hm-cta {
    background: linear-gradient(135deg, #9A3320 0%, #5A1E10 100%) !important;
    position: relative;
    overflow: hidden;
}
body.page-id-1429 .hm-cta > .elementor-container {
    position: relative;
    z-index: 1;
}

/* CTA heading groter — van 34px naar 40px (matcht rest van pagina) */
body.page-id-1429 .hm-cta h2.elementor-heading-title {
    font-size: 40px !important;
    color: #fff !important;
}

/* CTA knop — wit met outlined-wit hover (was rood, klopt niet op terracotta) */
body.page-id-1429 .hm-cta .elementor-widget-button .elementor-button,
body.page-id-1429 .btn-on-red .elementor-button {
    background: #fff !important;
    color: #7A2818 !important;
    border: 2px solid #fff !important;
    border-radius: 10px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 9px 22px !important;
}
body.page-id-1429 .hm-cta .elementor-widget-button .elementor-button:hover,
body.page-id-1429 .btn-on-red .elementor-button:hover {
    background: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
    outline: none !important;
}
body.page-id-1429 .hm-cta .elementor-widget-button .elementor-button:hover .elementor-button-text,
body.page-id-1429 .btn-on-red .elementor-button:hover .elementor-button-text {
    color: #fff !important;
}

/* ===== HEADING SIZES — overschrijf de afwijkende sizes ===== */
/* Alle H2's op 40px (was: één op 38px, één op 34px) */
body.page-id-1429 h2.elementor-heading-title,
body.page-id-1429 .elementor-widget-heading h2.elementor-heading-title {
    font-size: 40px !important;
}

/* Hero h1 blijft 50px */
body.page-id-1429 .hm-hero h1.elementor-heading-title {
    font-size: 50px !important;
}

/* ===== EYEBROW-AFSTAND CONSISTENT ===== */
/* Eyebrows met <p> parent hebben een extra paragraph-margin in zich → wegwerken */
body.page-id-1429 .elementor-widget-text-editor p:has(> span[style*="color: #de2918"]),
body.page-id-1429 .elementor-widget-text-editor p:has(> span[style*="color:#de2918"]) {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* De wrapper-margin uniform — 10px tussen eyebrow en heading erop */
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color: #de2918"]),
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color:#de2918"]) {
    margin-bottom: 10px !important;
}

/* Heading direct na een eyebrow — geen extra top-margin */
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color: #de2918"]) + .elementor-widget-heading,
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color:#de2918"]) + .elementor-widget-heading {
    margin-top: 0 !important;
}
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color: #de2918"]) + .elementor-widget-heading h2,
body.page-id-1429 .elementor-widget-text-editor:has(span[style*="color:#de2918"]) + .elementor-widget-heading h2 {
    margin-top: 0 !important;
}

/* Witte eyebrow op CTA-sectie (als je daar nog een eyebrow toevoegt) — werkt automatisch via :has() */

/* ===== RESPONSIVE — op mobiel iets kleiner ===== */
@media (max-width: 768px) {
    body.page-id-1429 h2.elementor-heading-title { font-size: 32px !important; }
    body.page-id-1429 .hm-hero h1.elementor-heading-title { font-size: 32px !important; }
    body.page-id-1429 .hm-cta h2.elementor-heading-title { font-size: 28px !important; }
}

/* ===== EYEBROW IN ELEMENTOR-CONTAINERS (e-con) — overschrijf de gap ===== */
/* Containers gebruiken flex-gap, dus we trekken de heading omhoog met negatieve margin */
body.page-id-1429 .e-con-inner .elementor-widget-text-editor:has(span[style*="color: #de2918"]) + .elementor-widget-heading,
body.page-id-1429 .e-con-full .elementor-widget-text-editor:has(span[style*="color: #de2918"]) + .elementor-widget-heading,
body.page-id-1429 .e-con-inner .elementor-widget-text-editor:has(span[style*="color:#de2918"]) + .elementor-widget-heading,
body.page-id-1429 .e-con-full .elementor-widget-text-editor:has(span[style*="color:#de2918"]) + .elementor-widget-heading {
    margin-top: -22px !important;
}

/* Voor de eyebrow-widget zelf in containers — pak ook eventuele padding aan */
body.page-id-1429 .e-con .elementor-widget-text-editor:has(span[style*="color: #de2918"]) > .elementor-widget-container,
body.page-id-1429 .e-con .elementor-widget-text-editor:has(span[style*="color:#de2918"]) > .elementor-widget-container {
    padding-bottom: 0 !important;
}

.page-id-1724 .page-title { display: none !important; }

.hm-ga-cases{padding:80px 0;background:#FFFFFF}
.hm-ga-cases-inner{max-width:1100px;margin:0 auto;padding:0 24px}
.hm-ga-cases-head{text-align:center;max-width:680px;margin:0 auto 48px}
.hm-ga-cases-eyebrow{font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#DE2918;margin-bottom:12px;display:inline-block}
.hm-ga-cases-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:40px;line-height:1.1;margin:0 0 16px;color:#2C2C2A}
.hm-ga-cases-sub{font-family:'Roboto',sans-serif;font-size:15px;line-height:1.7;color:#5F5E5A;margin:0 auto}

.hm-ga-cases-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
@media(max-width:760px){.hm-ga-cases-grid{grid-template-columns:1fr;grid-template-rows:none}}

.hm-ga-case{position:relative;border-radius:18px;overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;padding:28px;color:#fff}
.hm-ga-case--big{grid-column:1;grid-row:1 / span 2;min-height:656px;padding:36px}
@media(max-width:760px){.hm-ga-case--big{grid-column:auto;grid-row:auto;min-height:420px}}
.hm-ga-case--big .hm-ga-case-title{font-size:40px}
.hm-ga-case--big .hm-ga-case-stat b{font-size:34px}
.hm-ga-case--big .hm-ga-case-stats{gap:40px}

.hm-ga-case-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hm-ga-case:hover .hm-ga-case-bg{transform:scale(1.06)}
.hm-ga-case-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(45,18,10,.10) 0%,rgba(45,18,10,.48) 48%,rgba(48,16,8,.93) 100%)}
.hm-ga-case-top,.hm-ga-case-body{position:relative;z-index:2}
.hm-ga-case-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hm-ga-case-pill{font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:8px 16px;border-radius:999px;line-height:1;background:rgba(255,255,255,.20);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hm-ga-case-arrow{width:50px;height:50px;border-radius:50%;background:#fff;color:#DE2918;display:flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;transition:transform .25s,background .25s,color .25s}
.hm-ga-case-arrow svg{width:21px;height:21px}
.hm-ga-case:hover .hm-ga-case-arrow{background:#DE2918;color:#fff;transform:scale(1.08)}
.hm-ga-case-title{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:24px;line-height:1.05;letter-spacing:.5px;margin:0 0 12px;color:#fff}
.hm-ga-case-desc{display:grid;grid-template-rows:0fr;opacity:0;margin-bottom:0;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1),opacity .35s ease,margin-bottom .4s cubic-bezier(.22,1,.36,1)}
.hm-ga-case-desc p{overflow:hidden;min-height:0;font-family:'Roboto',sans-serif;font-size:14px;line-height:1.55;color:rgba(255,255,255,.92);margin:0}
.hm-ga-case:hover .hm-ga-case-desc{grid-template-rows:1fr;opacity:1;margin-bottom:20px}
@media(hover:none){.hm-ga-case-desc{grid-template-rows:1fr;opacity:1;margin-bottom:20px}}
.hm-ga-case-stats{display:flex;gap:28px}
.hm-ga-case-stat b{font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;line-height:1;color:#FCC3BD;display:block}
.hm-ga-case-stat span{font-family:'Roboto',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.74);margin-top:7px;display:block}


/* ============================================================
   CONTACT-CTA — cream band, telefoon over de rand
   (cream is nu standaard; geen aparte --cream variant meer nodig)
   ============================================================ */
.hm-ga-welcome {
    position: relative;
    padding: 0;
    overflow: visible;
}
/* cream band van rand tot rand, achter de inhoud */
.hm-ga-welcome::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: #FBF6EE;
    pointer-events: none;
    z-index: 0;
}
.hm-ga-welcome-panel {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
}
.hm-ga-welcome-text {
    position: relative;
    z-index: 1;
    max-width: 48%;
}
.hm-ga-welcome-eyebrow {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    display: inline-block;
    margin-bottom: 12px;
}
.hm-ga-welcome-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    color: #2C2C2A;
    margin: 0 0 18px !important;
    letter-spacing: -0.5px;
}
.hm-ga-welcome-body {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #5F5E5A;
    max-width: 440px;
    margin: 0 0 28px;
}
.hm-ga-welcome-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.hm-ga-welcome-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DE2918;
    color: #FBF6EE;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 9px 22px;
    border-radius: 7px;
    border: 2px solid #DE2918;
    text-decoration: none;
    transition: background .25s, color .25s, gap .25s;
}
.hm-ga-welcome-btn svg { width: 17px; height: 17px; }
.hm-ga-welcome-btn:hover { background: transparent; color: #DE2918; gap: 12px; }
.hm-ga-welcome-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #DE2918;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: gap .25s;
}
.hm-ga-welcome-link svg { width: 16px; height: 16px; }
.hm-ga-welcome-link:hover { gap: 11px; }

/* ===== Telefoon — desktop: steekt over de bovenrand ===== */
.hm-ga-welcome-phone {
    display: block;
    height: auto !important;
}
.hm-ga-welcome-phone--desktop {
    position: absolute !important;
    right: 4%;
    bottom: 0;
    width: 360px !important;
    max-width: 42%;
    z-index: 2;
    filter: drop-shadow(0 24px 48px rgba(45, 18, 10, .20));
}
.hm-ga-welcome-phone--mobile { display: none; }


.elementor-element-3d3d03e,
.elementor-element-3d3d03e > .e-con-inner {
    --padding-left: 0;
    --padding-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== Gestapeld (≤980px): telefoon boven de tekst ===== */
@media (max-width: 980px) {
    .hm-ga-welcome { padding: 0; }
    .hm-ga-welcome::before { display: none; }
    .hm-ga-welcome-panel {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    .hm-ga-welcome-phone--desktop { display: none !important; }
    .hm-ga-welcome-phone--mobile {
        display: block;
        order: -1;
        position: relative;
        z-index: 1;
        width: 84%;
        max-width: 330px;
        height: auto;
        margin: 0 auto -40px;
        line-height: 0;
        filter: none;
    }
    .hm-ga-welcome-text {
        order: 1;
        position: relative;
        z-index: 2;
        max-width: 100%;
        padding: 56px 20px 50px;
    }
    .hm-ga-welcome-text::before {
        content: '';
        position: absolute;
        top: 0; bottom: 0; left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background: #FBF6EE;
        z-index: -1;
    }
    .hm-ga-welcome-title { font-size: 29px; }
    .hm-ga-welcome-actions { justify-content: flex-start; }
}

/* ===== Middenbereik 725–980px: vliegende telefoons naast de tekst (compacter) ===== */
@media (min-width: 725px) and (max-width: 980px) {
    .hm-ga-welcome::before { display: block; }        /* cream band terug over de hele sectie */
    .hm-ga-welcome-text::before { display: none; }    /* losse cream achter de tekst niet meer nodig */

    .hm-ga-welcome-panel {
        flex-direction: row;
        align-items: flex-end;        /* tekst en band delen dezelfde onderlijn */
        min-height: 360px;
        max-width: 940px;
        margin: 0 auto;
        padding: 48px 20px 0;         /* geen padding onderin: telefoon valt in de bandrand */
    }
    .hm-ga-welcome-text {
        order: 0;
        max-width: 54%;
        position: relative;
        z-index: 1;
        padding-bottom: 48px;
    }
    /* de "vliegende telefoons" (desktopbeeld) terug, absoluut zodat ze uit de band steken */
    .hm-ga-welcome-phone--desktop {
        display: block !important;
        position: absolute !important;
        right: 2%;
        bottom: 0;                    /* onderkant valt weg in de bandrand -> geen zichtbare snijrand */
        width: 44%;
        max-width: 320px;
        z-index: 2;
        filter: drop-shadow(0 18px 36px rgba(45, 18, 10, .20));
    }
    .hm-ga-welcome-phone--mobile { display: none !important; }

    .hm-ga-welcome-title { font-size: 32px; }
    .hm-ga-welcome-actions { justify-content: flex-start; }
}

/* ===== Gestapeld bereik 471–724px: telefoon iets forser zodat het niet los in het midden zweeft ===== */
@media (min-width: 471px) and (max-width: 724px) {
    .hm-ga-welcome-phone--mobile { max-width: 380px; }
}

/* ============================================================
   GOOGLE ADVERTISING — AFBEELDING + TEKST (herbruikbaar blok)
   Voeg .hm-ga-feature--reverse toe aan de <section> om beeld
   en tekst van kant te wisselen. Vinkjes: gebruik je bestaande
   .hm-checklist (optioneel — bij voorkeur weglaten op SEO-secties).
   ============================================================ */
.hm-ga-feature {
    padding: 90px 0;
    font-family: 'Roboto', sans-serif;
}

.hm-ga-feature {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.hm-ga-feature-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;    
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.hm-ga-feature--reverse .hm-ga-feature-visual { order: 2; }
.hm-ga-feature--reverse .hm-ga-feature-body   { order: 1; }

/* ===== Afbeelding ===== */
.hm-ga-feature-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-ga-feature .hm-ga-feature-img,
img.hm-ga-feature-img {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;  
    height: auto;
    display: block;
    object-fit: cover; 
}

/* ===== Tekst ===== */
.hm-ga-feature-cat {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 12px;
    display: inline-block;
}
.hm-ga-feature-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    color: #2C2C2A;
    margin: 0 0 18px !important;   /* thema forceert anders een marge bovenaan de h2 */
    line-height: 1.1;
    text-transform: none;
	letter-spacing: -0.5px;
}
.hm-ga-feature-text {
    font-size: 15px;
    line-height: 1.75;
    color: #5F5E5A;
    margin: 0 0 16px;
}
.hm-ga-feature .hm-checklist {
    margin: 24px 0 28px;
}
.hm-ga-feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DE2918;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 9px 22px;
    border-radius: 7px;
    border: 2px solid #DE2918;
    transition: background .2s, color .2s, gap .2s;
}
.hm-ga-feature-btn:hover {
    background: transparent;
    color: #DE2918;
    gap: 12px;
}

/* Contentmarketing-feature: Elementor-container-padding weghalen */
.elementor-element-63cf1f2,
.elementor-element-63cf1f2 > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== Mobiel ===== */
@media (max-width: 860px) {
    .hm-ga-feature { padding: 60px 0; }
    .hm-ga-feature-grid { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; }
    .hm-ga-feature-visual { order: 1 !important; }
    .hm-ga-feature-body   { order: 2 !important; padding: 0; }
    .hm-ga-feature-title { font-size: 32px; }
    /* beeld vult de kolom als brede banner i.p.v. een klein gecentreerd vierkant */
    .hm-ga-feature .hm-ga-feature-img,
    img.hm-ga-feature-img { max-width: 100%; aspect-ratio: 1 / 1; }
}

/* ============================================================
   MODIFIER — strakke afbeelding met blok-schaduw
   Voeg .hm-ga-feature--sharp toe aan de <section>.
   Werkt samen met --reverse; geen HTML-wijziging verder nodig.
   ============================================================ */
.hm-ga-feature--sharp .hm-ga-feature-img {
    box-shadow: 24px 24px 0 -12px #F5F3F0; 
}

/* ===== Mobiel ===== */
@media (max-width: 860px) {
    .hm-ga-feature--sharp .hm-ga-feature-img,
    .hm-ga-feature--reverse.hm-ga-feature--sharp .hm-ga-feature-img {
        box-shadow: 14px 14px 0 -7px #F5F3F0;
    }
}

/* ============================================================
   MODIFIER — strakke afbeelding met blok-schaduw
   Voeg .hm-ga-feature--sharp toe aan de <section>.
   Werkt samen met --reverse; geen HTML-wijziging verder nodig.
   ============================================================ */
.hm-ga-feature--sharp .hm-ga-feature-img {
    box-shadow: 24px 24px 0 -12px #F5F3F0; 
}

/* ===== Mobiel ===== */
@media (max-width: 860px) {
    .hm-ga-feature--sharp .hm-ga-feature-img,
    .hm-ga-feature--reverse.hm-ga-feature--sharp .hm-ga-feature-img {
        box-shadow: 14px 14px 0 -7px #F5F3F0;
    }
}

/* ============================================================
   SCROLL-REVEAL — werkt automatisch op alle .hm-ga-feature secties
   Beeld en tekst komen licht omhoog zodra de sectie in beeld komt.
   Geen HTML-wijziging nodig. Respecteert 'reduced motion'.
   ============================================================ */
.js-reveal .hm-ga-feature .hm-ga-feature-visual,
.js-reveal .hm-ga-feature .hm-ga-feature-body {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease;
    will-change: opacity, transform;
}
/* lichte stagger: de tekst komt net iets na het beeld */
.js-reveal .hm-ga-feature .hm-ga-feature-body {
    transition-delay: .12s;
}
.js-reveal .hm-ga-feature.is-visible .hm-ga-feature-visual,
.js-reveal .hm-ga-feature.is-visible .hm-ga-feature-body {
    opacity: 1;
    transform: none;
}

/* ============================================================
   EXPANDABLE TABS — aanpak/uitleg
   ============================================================ */
.hm-extabs {
    background: #FBF6EE;
    padding: 90px 0;
    font-family: 'Roboto', sans-serif;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.hm-extabs-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
.hm-extabs-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}
.hm-extabs-eyebrow {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 12px;
    display: inline-block;
}
.hm-extabs-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    color: #2C2C2A;
    margin: 0 0 18px !important;
    text-transform: none;
    letter-spacing: -0.5px;
}
/* ===== Expandable pills ===== */
.hm-extabs-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}
.hm-extabs-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #E8E4DC;
    border-radius: 18px;
    padding: 7px;
    box-shadow: 0 14px 34px rgba(122, 40, 24, 0.10);
}
.hm-extab {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    padding: 11px 13px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #5F5E5A;
    transition: background .4s ease, color .4s ease,
                padding .65s cubic-bezier(.25,.1,.25,1),
                gap .65s cubic-bezier(.25,.1,.25,1);
    white-space: nowrap;
    overflow: hidden;
}
.hm-extab:hover {
    background: #F5F3F0;
    color: #2C2C2A;
}
.hm-extab.is-active {
    background: #DE2918;
    color: #ffffff;
    gap: 8px;
    padding-left: 16px;
    padding-right: 18px;
}
.hm-extab.is-active:hover { color: #ffffff; }
.hm-extab svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
}
.hm-extab-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-6px);
    transition: max-width .65s cubic-bezier(.25,.1,.25,1),
                opacity .55s ease .1s,
                transform .6s cubic-bezier(.25,.1,.25,1);
}
.hm-extab.is-active .hm-extab-label {
    max-width: 240px;
    opacity: 1;
    transform: translateX(0);
}
/* ===== Panelen ===== */
.hm-extabs-panels {
    max-width: 820px;
    margin: 0 auto;
}
.hm-extab-panel { display: none; }
.hm-extab-panel.is-active { display: block; }
.hm-extab-panel h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.2;
    color: #2C2C2A;
    margin: 0 0 14px !important;
    text-transform: none;
}
.hm-extab-panel p {
    font-size: 15px;
    line-height: 1.8;
    color: #5F5E5A;
    margin: 0 0 16px;
}
.hm-extab-panel p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
    /* sectie op 0 — de inner is de enige laag zijruimte: exact 20px */
    .hm-extabs { padding: 60px 0; }
    .hm-extabs-inner { padding: 0 20px; }

    .hm-extabs-title { font-size: 32px; }
    .hm-extab { padding: 10px 11px; font-size: 13px; }
    .hm-extab.is-active .hm-extab-label { max-width: 200px; }
}

.hm-ga-rev {
    background: #FBF6EE;
    padding: 90px 0;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 0 0 100vmax #FBF6EE;
    clip-path: inset(0 -100vmax);
}
.hm-ga-rev * { box-sizing: border-box; }
.hm-ga-rev-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
.hm-ga-rev-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
}
.hm-ga-rev-eyebrow {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 12px;
    display: inline-block;
}
.hm-ga-rev-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    color: #2C2C2A;
    margin: 0 0 18px !important;
    text-transform: none;
    letter-spacing: -0.5px;
}
.hm-ga-rev-score {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.hm-ga-rev-score .hm-ga-rev-stars {
    font-size: 18px;
}
.hm-ga-rev-score-text {
    font-size: 14px;
    color: #5F5E5A;
}
.hm-ga-rev-score-text b {
    color: #2C2C2A;
    font-weight: 700;
}
.hm-ga-rev-stars {
    color: #DE2918;
    letter-spacing: 2px;
    line-height: 1;
}


.hm-ga-rev-slider { position: relative; }
.hm-ga-rev-viewport { overflow: hidden; }
.hm-ga-rev-track {
    display: flex;
    gap: 24px;
    align-items: stretch;
    transition: transform .55s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
}
.hm-ga-rev-card {
    background: #fff;
    border: 1.5px solid #E8E4DC;
    border-radius: 10px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    transition: border-color .25s, box-shadow .25s;
}
.hm-ga-rev-card:hover {
    border-color: #DE2918;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.hm-ga-rev-card-stars {
    color: #DE2918;
    letter-spacing: 2px;
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 1;
}
.hm-ga-rev-quote {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #3A3A38;
    margin: 0 0 24px;
    flex-grow: 1;
}
.hm-ga-rev-person {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hm-ga-rev-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #E8E4DC;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-ga-rev-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hm-ga-rev-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.hm-ga-rev-meta b {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #7A2818;
}
.hm-ga-rev-meta span {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #888780;
}

.hm-ga-rev-nav {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
}
.hm-ga-rev-slider.has-nav .hm-ga-rev-nav { display: flex; }
.hm-ga-rev-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #E0D9CC;
    background: #fff;
    color: #7A2818;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color .2s, color .2s, opacity .2s;
}
.hm-ga-rev-arrow:hover:not(:disabled) { border-color: #DE2918; color: #DE2918; }
.hm-ga-rev-arrow:disabled { opacity: .35; cursor: default; }
.hm-ga-rev-arrow:focus-visible { outline: 2px solid #DE2918; outline-offset: 3px; }
.hm-ga-rev-dots { display: flex; gap: 8px; }
.hm-ga-rev-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #D8CFC0;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.hm-ga-rev-dots button.is-active { background: #DE2918; transform: scale(1.3); }
.hm-ga-rev-dots button:focus-visible { outline: 2px solid #DE2918; outline-offset: 2px; }

@media (max-width: 900px) {
    .hm-ga-rev-title { font-size: 32px; }
	.hm-ga-rev-inner { padding: 0px 20px; }
}
@media (max-width: 640px) {
    .hm-ga-rev { padding: 60px 0; }
}

/* ============================================================
   UTILITY — cream achtergrond van rand tot rand
   De sectie blijft op normale breedte (inhoud compact);
   alleen de cream-kleur loopt links/rechts buiten beeld door
   via een grote schaduw in dezelfde kleur.
   ============================================================ */
.hm-cream-bleed {
    background: #FBF6EE;
    box-shadow: 0 0 0 100vmax #FBF6EE;
    clip-path: inset(0 -100vmax);
}

/* Het thema reset binnen dit blok de left-padding van de li's,
   waardoor de tekst onder het vinkje valt. Hier weer afdwingen. */
.hm-ga-feature .hm-checklist li {
    padding-left: 34px;
}

/* ============================================================
   SGE — ZICHTBAAR IN ELKE AI-ZOEKMACHINE (animatie)
   Mobiel: simpele auto-slider. Geen indicator/logo-balk.
   ============================================================ */

.hm-sge-eng * {
    box-sizing: border-box;
}

.hm-sge-eng {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    background: #7A2818;
    padding: 80px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stage — strak gecentreerd, ook op brede schermen */
.hm-sge-eng-stage {
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-height: 860px;
    margin: 0 auto;
}

/* ===== Centraal blok ===== */
.hm-sge-eng-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    text-align: center;
    width: min(480px, 92%);
    filter: drop-shadow(0 0 45px rgba(22, 10, 6, .95));
}
.hm-sge-eng-head {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 26px;
    opacity: 0;
    transition: opacity .5s ease;
}
.is-title .hm-sge-eng-head {
    opacity: 1;
}

/* rode 'marker' achter een woord, zelfde stijl als de hero */
.hm-sge-eng-mk {
    position: relative;
    display: inline-block;
    z-index: 0;
}
.hm-sge-eng-mk::after {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: 8%;
    height: 36%;
    background: rgba(222, 41, 24, .55);
    transform: skewX(-12deg);
    z-index: -1;
    border-radius: 2px;
}

/* ===== Zoekbalk ===== */
.hm-sge-eng-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    padding: 16px 22px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
}
.is-bar .hm-sge-eng-bar {
    opacity: 1;
    transform: none;
}
.is-enter .hm-sge-eng-bar {
    animation: hmPulse .35s ease;
}
.hm-sge-eng-bar svg {
    width: 22px;
    height: 22px;
    color: #DE2918;
    flex: 0 0 auto;
}
.hm-sge-eng-q {
    font-size: 19px;
    color: #FBF6EE;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.hm-sge-eng-caret {
    display: inline-block;
    width: 2px;
    height: 22px;
    background: #DE2918;
    vertical-align: middle;
    animation: hmBlink 1s step-end infinite;
}

/* ===== Kaarten — naar/uit het midden gezogen ===== */
.hm-sge-eng-card {
    position: absolute;
    z-index: 2;
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 14px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
    opacity: 0;
    transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.16);
    transition: transform .65s cubic-bezier(.45, 0, .18, 1), opacity .5s ease;
}
.is-cards .hm-sge-eng-card {
    transform: none;
    opacity: 1;
}

/* lichte ripple in de timing */
.hm-sge-eng-card.c2 { transition-delay: .05s; }
.hm-sge-eng-card.c3 { transition-delay: .10s; }
.hm-sge-eng-card.c4 { transition-delay: .15s; }
.hm-sge-eng-card.c5 { transition-delay: .20s; }
.hm-sge-eng-card.c6 { transition-delay: .25s; }

/* posities op desktop */
.hm-sge-eng-card.c1 { top: 15%; left: 0; width: 212px; }    /* ChatGPT — links, lang */
.hm-sge-eng-card.c2 { top: 4%; left: 33%; width: 332px; }   /* Google — boven-midden */
.hm-sge-eng-card.c3 { top: 10%; right: 0; width: 232px; }   /* Gemini — rechts */
.hm-sge-eng-card.c4 { bottom: 2%; left: 4%; width: 262px; } /* Perplexity — onder-links */
.hm-sge-eng-card.c5 { bottom: 0; left: 36%; width: 268px; } /* Claude — onder-midden */
.hm-sge-eng-card.c6 { bottom: 2%; right: 0; width: 300px; } /* Bing — onder-rechts */

/* ===== Kaart-inhoud ===== */
.ec-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* logo's: hard begrensd zodat het thema ze niet kan opblazen */
.hm-sge-eng .ec-logo {
    width: auto !important;
    height: auto !important;
    max-width: 118px !important;
    max-height: 24px !important;
    display: block;
    flex: 0 0 auto;
}

.ec-body > * {
    opacity: 0;
    transform: translateY(6px);
}
.is-content .ec-body > * {
    animation: hmReveal .45s ease forwards;
}
.is-content .ec-body > *:nth-child(2) { animation-delay: .05s; }
.is-content .ec-body > *:nth-child(3) { animation-delay: .10s; }
.is-content .ec-body > *:nth-child(4) { animation-delay: .15s; }
.is-content .ec-body > *:nth-child(5) { animation-delay: .20s; }
.is-content .ec-body > *:nth-child(6) { animation-delay: .25s; }
.is-content .ec-body > *:nth-child(7) { animation-delay: .30s; }
.is-content .ec-body > *:nth-child(8) { animation-delay: .35s; }
.is-content .ec-body > *:nth-child(9) { animation-delay: .40s; }
.is-content .ec-body > *:nth-child(10) { animation-delay: .45s; }

.ec-bubble {
    display: block;
    width: fit-content;
    max-width: 85%;
    margin: 0 0 10px auto;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
    font-size: 10px;
    padding: 6px 9px;
    border-radius: 8px;
}
.ec-sub {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 9px;
    line-height: 1.4;
}
.ec-line {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .13);
    margin-bottom: 7px;
}
.ec-hit {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(222, 41, 24, .15);
    border: 1px solid rgba(222, 41, 24, .45);
    border-left: 2px solid #DE2918;
    border-radius: 7px;
    padding: 7px 8px;
    margin-bottom: 9px;
}
.ec-hit-txt b {
    display: block;
    font-size: 11px;
    color: #FF7A4D;
    font-weight: 700;
    margin-bottom: 2px;
}
.ec-hit-txt i {
    font-style: normal;
    font-size: 9.5px;
    color: rgba(255, 255, 255, .55);
}
.ec-btns {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
}
.ec-btns span {
    font-size: 9px;
    color: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 3px 8px;
}
.ec-input {
    font-size: 9.5px;
    color: rgba(255, 255, 255, .4);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 7px 9px;
}
.ec-search {
    font-size: 10px;
    color: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 7px 10px;
    margin-bottom: 10px;
}
.ec-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}
.ec-tabs span {
    font-size: 8.5px;
    color: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 3px 7px;
}
.ec-prodrow {
    display: flex;
    gap: 7px;
}
.ec-prod {
    flex: 1;
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
}
.ec-prod.hit {
    border: 1.5px solid #DE2918;
    background: rgba(222, 41, 24, .1);
}
.ec-prod.hit span {
    font-size: 8px;
    color: #FF7A4D;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
}
.ec-numline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 9px;
}
.ec-numline i {
    font-style: normal;
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
    width: 12px;
    flex: 0 0 auto;
    margin-top: 1px;
}
.ec-numline > .ec-line {
    flex: 1;
    margin: 0;
}
.ec-numline .ec-nl {
    flex: 1;
}
.ec-numline .ec-nl .ec-line {
    margin-bottom: 5px;
}
.ec-numline .ec-nl .ec-line:last-child {
    margin-bottom: 0;
}
.ec-pill {
    display: inline-block;
    font-size: 9px;
    color: #FF7A4D;
    border: 1px solid rgba(222, 41, 24, .5);
    border-radius: 999px;
    padding: 3px 8px;
}

/* oranje 'jouw resultaat'-regels onder de #1-treffer */
.ec-line-hot {
    background: rgba(222, 41, 24, .32);
}

/* skeleton-rij: kleine thumb + tekstregels */
.ec-skel {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 9px;
}
.ec-skel .ec-thumb {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ec-skel .ec-skel-lines {
    flex: 1;
    padding-top: 2px;
}
.ec-skel .ec-skel-lines .ec-line {
    margin-bottom: 5px;
}
.ec-thumbs {
    display: flex;
    gap: 6px;
    margin-bottom: 9px;
}
.ec-thumbs span {
    flex: 1;
    height: 30px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}

/* ===== Keyframes ===== */
@keyframes hmReveal {
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes hmPulse {
    0%   { transform: none; }
    45%  { transform: scale(.985); }
    100% { transform: none; }
}
@keyframes hmBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .hm-sge-eng-head,
    .hm-sge-eng-bar {
        transition: none;
    }
    .hm-sge-eng-card {
        transition: none;
    }
    .ec-body > * {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hm-sge-eng-caret {
        display: none;
    }
}

/* ============================================================
   SGE — MOBIEL (<=860px)
   Vervang hiermee je bestaande @media (max-width: 860px) blok.
   Wijziging t.o.v. je huidige versie:
   - Het "opacity/transform !important"-blok op titel + zoekbalk is
     WEG, zodat die net als op desktop in/uit animeren (fade + enter-puls).
   - De kaartenstrook fadet zacht en licht vertraagd in (de "even wachten"
     na de enter-animatie, vlak voordat de kaarten verschijnen).
   Je JavaScript hoeft niet gewijzigd te worden.
   ============================================================ */
@media (max-width: 860px) {
    .hm-sge-eng {
        display: block;
        padding: 60px 0;
        transform: translateX(-50%);
    }
    .hm-sge-eng-stage {
        min-height: 0;
        max-width: 100%;
    }
    .hm-sge-eng-center {
        position: static;
        transform: none;
        width: auto;
        max-width: 560px;
        margin: 0 auto 30px;
        filter: none;
        padding: 0 18px;
    }

    /* GEEN opacity/transform !important meer:
       titel + zoekbalk animeren nu via is-title / is-bar / is-enter,
       precies zoals op desktop (fade in, enter-puls, fade out). */
    .hm-sge-eng-head {
        font-size: 26px;
    }

    .hm-sge-eng-cards {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 18px 34px;
        scroll-padding: 0 18px;
        /* zachte, licht vertraagde intro → "even wachten" na de enter-puls */
        transition: opacity .45s ease .2s;
    }
    .hm-sge-eng-cards::-webkit-scrollbar {
        display: none;
    }

    .hm-sge-eng-card {
        position: static;
        flex: 0 0 80%;
        max-width: 330px;
        width: auto !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none;
        scroll-snap-align: center;
        box-shadow: 0 10px 22px rgba(0, 0, 0, .30);
    }

    .ec-body > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ============================================================
   SGE OPTIMALISATIE — WAT IS SGE? (uitleg-tabs)
   Horizontale pill-tabs met rood actief-pijltje, tekstrijke
   panelen. Lichte cream-achtergrond, full-bleed.
   ============================================================ */

/* veilige, ingekapselde box-sizing (alleen binnen deze sectie) */
.hm-sge-tabs *{ box-sizing:border-box }

.hm-sge-tabs{
    background:#FBF6EE;
    padding:90px 24px;
    font-family:'Roboto',sans-serif;
    width:100vw;
    margin-left:50%;
    transform:translateX(-50%);
}
.hm-sge-tabs-inner{ max-width:1100px; margin:0 auto }

/* ===== Kop ===== */
.hm-sge-tabs-head{ text-align:center; max-width:760px; margin:0 auto 40px }
.hm-sge-tabs-eyebrow{
    font-family:'Roboto',sans-serif;
    font-size:13px; font-weight:600; letter-spacing:1.5px;
    text-transform:uppercase; color:#DE2918;
    margin-bottom:12px; display:inline-block;
}
.hm-sge-tabs-title{
    font-family:'Oswald',sans-serif;
	font-weight:600;
    font-size:40px;
	line-height:1.1;
	color:#2C2C2A;
    margin:0 0 18px;
	text-transform:none;
	letter-spacing: -0.5px;
}
.hm-sge-tabs-sub{ font-size:15px; line-height:1.7; color:#5F5E5A; margin:0 }

/* ===== Tab-pills ===== */
.hm-sge-tabs-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:48px }
.hm-sge-tabs-tab{
    position:relative;
    appearance:none;
    background:#fff;
    color:#2C2C2A;
    border:1.5px solid #E8E4DC;
    border-radius:40px;
    padding:11px 22px;
    font-family:'Roboto',sans-serif;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s, color .2s, border-color .2s;
}
.hm-sge-tabs-tab:hover{ border-color:#DE2918; color:#DE2918 }
.hm-sge-tabs-tab.is-active{ background:#DE2918; color:#fff; border-color:#DE2918 }
.hm-sge-tabs-tab.is-active:hover{ color:#fff }
.hm-sge-tabs-tab.is-active::after{
    content:'';
    position:absolute;
    bottom:-7px; left:50%;
    transform:translateX(-50%);
    width:0; height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #DE2918;
}

/* ===== Panelen ===== */
.hm-sge-tabs-panels{ max-width:820px; margin:0 auto }
.hm-sge-tabs-panel{ display:none }
.hm-sge-tabs-panel.is-active{ display:block }
.hm-sge-tabs-panel h3{
    font-family:'Oswald',sans-serif; font-weight:600;
    font-size:26px; line-height:1.2; color:#2C2C2A;
    margin:0 0 14px; text-transform:none;
}
.hm-sge-tabs-panel p{ font-size:15px; line-height:1.8; color:#5F5E5A; margin:0 0 16px }
.hm-sge-tabs-panel p:last-child{ margin-bottom:0 }

/* ===== Responsief ===== */
@media(max-width:860px){
    .hm-sge-tabs{ padding:60px 20px }
    .hm-sge-tabs-title{ font-size:32px }
    .hm-sge-tabs-tab{ padding:10px 16px; font-size:13px }
}

.hm-sge-eng .ec-logo.ec-logo--claude{
    max-width:none !important;
    max-height:none !important;
    height:52px !important;     /* groter — pas dit getal aan naar smaak */
}
.hm-sge-eng .ec-logo.ec-logo--perplexity{
    max-width:none !important;
    max-height:none !important;
    height:52px !important;
}

/* ============================================================
   SHOPPING — CARROUSEL (prefix hm-sh-car)
   Stijl van de SGE-zoekbalk: massieve terracotta + stippen,
   glazen zoekbalk, glasachtige kaarten, jouw product in oranje.
   Tijdlijn: kop -> balk -> typen -> enter -> kaarten in -> staan -> uit
   ============================================================ */

/* veilige, ingekapselde box-sizing (alleen binnen deze sectie) */
.hm-sh-car *{ box-sizing:border-box }

/* ===== De band ===== */
.hm-sh-car{
    position:relative;
    overflow:hidden;
    width:100vw;
    margin-left:50%;
    transform:translateX(-50%);
    background:#7A2818;
    padding:80px 24px 88px;
    font-family:'Roboto',sans-serif;
}
.hm-sh-car-inner{
    position:relative;
    z-index:1;
    max-width:1040px;
    margin:0 auto;
}

/* ===== Kop + zoekbalk (gecentreerd) ===== */
.hm-sh-car-center{
    max-width:560px;
    margin:0 auto 30px;
    text-align:center;
}
.hm-sh-car-eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#FCC3BD;
    display:inline-block;
    margin-bottom:14px;
    opacity:0;
    transition:opacity .5s ease;
}
.hm-sh-car-head{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:32px;
    line-height:1.13;
    letter-spacing:-.5px;
    color:#fff;
    margin:0 0 24px;
    opacity:0;
    transition:opacity .5s ease;
}
.hm-sh-car.is-title .hm-sh-car-eyebrow,
.hm-sh-car.is-title .hm-sh-car-head{
    opacity:1;
}

/* rode 'marker' achter een woord */
.hm-sh-car-mk{
    position:relative;
    display:inline-block;
    z-index:0;
}
.hm-sh-car-mk::after{
    content:'';
    position:absolute;
    left:-6px;
    right:-6px;
    bottom:8%;
    height:36%;
    background:rgba(222,41,24,.55);
    transform:skewX(-12deg);
    z-index:-1;
    border-radius:2px;
}

/* glazen zoekbalk */
.hm-sh-car-bar{
    display:flex;
    align-items:center;
    gap:14px;
    max-width:480px;
    margin:0 auto;
    background:rgba(255,255,255,.05);
    border:1.5px solid rgba(255,255,255,.16);
    border-radius:14px;
    padding:15px 22px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 18px 50px rgba(0,0,0,.4);
    opacity:0;
    transform:translateY(10px);
    transition:opacity .5s ease, transform .5s ease;
}
.hm-sh-car.is-bar .hm-sh-car-bar{
    opacity:1;
    transform:none;
}
.hm-sh-car.is-enter .hm-sh-car-bar{
    animation:hmShPulse .35s ease;
}
.hm-sh-car-bar svg{
    width:22px;
    height:22px;
    color:#DE2918;
    flex:0 0 auto;
}
.hm-sh-car-q{
    font-size:18px;
    color:#FBF6EE;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
}
.hm-sh-car-caret{
    display:inline-block;
    width:2px;
    height:21px;
    background:#DE2918;
    vertical-align:middle;
    animation:hmShBlink 1s step-end infinite;
}

/* ===== Sponsored-label ===== */
.hm-sh-car-spon{
    text-align:center;
    font-size:12px;
    font-weight:600;
    letter-spacing:.4px;
    color:rgba(251,246,238,.62);
    margin:22px 0 20px;
    opacity:0;
    transition:opacity .4s ease;
}
.hm-sh-car-spon b{
    color:#FBF6EE;
}
.hm-sh-car.is-cards .hm-sh-car-spon{
    opacity:1;
}

/* ===== Carrousel — glasachtige kaarten ===== */
.hm-sh-car-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
    align-items:stretch;
}
.hm-sh-card{
    background:rgba(255,255,255,.05);
    border:1.5px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:12px;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    box-shadow:0 20px 44px rgba(0,0,0,.30);
    display:flex;
    flex-direction:column;
    opacity:0;
    transform:translateY(26px) scale(.95);
    transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.hm-sh-car.is-cards .hm-sh-card{
    opacity:1;
    transform:none;
}
.hm-sh-car.is-cards .hm-sh-card.c2{ transition-delay:.07s }
.hm-sh-car.is-cards .hm-sh-card.c3{ transition-delay:.14s }
.hm-sh-car.is-cards .hm-sh-card.c4{ transition-delay:.21s }
.hm-sh-car.is-cards .hm-sh-card.c5{ transition-delay:.28s }

.hm-sh-card-img{
    border-radius:9px;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.07);
    margin-bottom:11px;
}
.hm-sh-card-img svg{
    width:46%;
    height:46%;
    color:rgba(255,255,255,.55);
}
.hm-sh-card-name{
    font-size:12.5px;
    font-weight:600;
    color:rgba(255,255,255,.92);
    line-height:1.35;
    margin-bottom:8px;
    min-height:34px;
}
.hm-sh-card-price{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:19px;
    color:#fff;
    line-height:1;
    margin-bottom:7px;
}
.hm-sh-card-meta{
    margin-top:auto;
    font-size:11px;
    color:rgba(255,255,255,.55);
    line-height:1.45;
}
.hm-sh-card-stars{
    color:#E8A33D;
    letter-spacing:1px;
    font-size:11px;
}
.hm-sh-card-shop{
    display:block;
    margin-top:2px;
}

/* ===== Highlight: jouw product ===== */
.hm-sh-card--mine{
    border-color:#FF7A4D;
    background:rgba(222,41,24,.12);
    position:relative;
}
.hm-sh-car.is-cards .hm-sh-card--mine{
    animation:hmShGlow 2.4s ease-in-out 0.6s infinite;
}
.hm-sh-card--mine .hm-sh-card-img{
    background:rgba(255,122,77,.18);
}
.hm-sh-card--mine .hm-sh-card-img svg{
    color:#FF7A4D;
}
.hm-sh-card--mine .hm-sh-card-price{
    color:#FF7A4D;
}
.hm-sh-card-badge{
    position:absolute;
    top:-11px;
    left:50%;
    transform:translateX(-50%);
    background:#FF7A4D;
    color:#fff;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:4px 12px;
    border-radius:20px;
    white-space:nowrap;
}
.hm-sh-card-tag{
    display:inline-block;
    background:#DE2918;
    color:#fff;
    font-size:10px;
    font-weight:700;
    padding:2px 7px;
    border-radius:5px;
    margin-bottom:7px;
    align-self:flex-start;
}

/* ===== Keyframes ===== */
@keyframes hmShPulse{
    0%{ transform:none }
    45%{ transform:scale(.985) }
    100%{ transform:none }
}
@keyframes hmShBlink{
    0%,100%{ opacity:1 }
    50%{ opacity:0 }
}
@keyframes hmShGlow{
    0%,100%{ box-shadow:0 18px 40px rgba(255,122,77,.30) }
    50%{ box-shadow:0 20px 48px rgba(255,122,77,.58) }
}

@media(max-width:860px){
    .hm-sh-car{ padding:60px 0 64px }
    .hm-sh-car-center{ padding:0 18px }
    .hm-sh-car-head{ font-size:27px }
    .hm-sh-car-q{ font-size:16px }
    .hm-sh-car-spon{ padding:0 18px }


    .hm-sh-car-row{
        display:flex;
        grid-template-columns:none;
        gap:12px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:16px 18px 30px;
        scroll-padding:0 18px;
    }
    .hm-sh-car-row::-webkit-scrollbar{ display:none }

    .hm-sh-card{
        flex:0 0 auto;
        width:62%;
        max-width:230px;
        scroll-snap-align:center;
    }

    .hm-sh-card--mine{ order:-1 }

    .hm-sh-card.c5{ display:flex }
}

/* ============================================================
   SHOPPING — WAT IS GOOGLE SHOPPING? (uitleg-tabs, prefix hm-sh-tabs)
   Horizontale pill-tabs met rood actief-pijltje, tekstrijke
   panelen. Lichte cream-achtergrond, full-bleed.
   ============================================================ */

/* veilige, ingekapselde box-sizing (alleen binnen deze sectie) */
.hm-sh-tabs *{ box-sizing:border-box }

.hm-sh-tabs{
    background:#FBF6EE;
    padding:90px 24px;
    font-family:'Roboto',sans-serif;
    width:100vw;
    margin-left:50%;
    transform:translateX(-50%);
}
.hm-sh-tabs-inner{ max-width:1100px; margin:0 auto }

/* ===== Kop ===== */
.hm-sh-tabs-head{ text-align:center; max-width:760px; margin:0 auto 40px }
.hm-sh-tabs-eyebrow{
    font-family:'Roboto',sans-serif;
    font-size:13px; font-weight:600; letter-spacing:1.5px;
    text-transform:uppercase; color:#DE2918;
    margin-bottom:12px; display:inline-block;
}
.hm-sh-tabs-title{
    font-family:'Oswald',sans-serif;
	font-weight:600;
    font-size:40px;
	line-height:1.1;
	color:#2C2C2A;
    margin:0 0 18px;
	text-transform:none;
	letter-spacing: -0.5px;
}
.hm-sh-tabs-sub{ font-size:15px; line-height:1.7; color:#5F5E5A; margin:0 }

/* ===== Tab-pills ===== */
.hm-sh-tabs-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:48px }
.hm-sh-tabs-tab{
    position:relative;
    appearance:none;
    background:#fff;
    color:#2C2C2A;
    border:1.5px solid #E8E4DC;
    border-radius:40px;
    padding:11px 22px;
    font-family:'Roboto',sans-serif;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s, color .2s, border-color .2s;
}
.hm-sh-tabs-tab:hover{ border-color:#DE2918; color:#DE2918 }
.hm-sh-tabs-tab.is-active{ background:#DE2918; color:#fff; border-color:#DE2918 }
.hm-sh-tabs-tab.is-active:hover{ color:#fff }
.hm-sh-tabs-tab.is-active::after{
    content:'';
    position:absolute;
    bottom:-7px; left:50%;
    transform:translateX(-50%);
    width:0; height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #DE2918;
}

/* ===== Panelen ===== */
.hm-sh-tabs-panels{ max-width:820px; margin:0 auto }
.hm-sh-tabs-panel{ display:none }
.hm-sh-tabs-panel.is-active{ display:block }
.hm-sh-tabs-panel h3{
    font-family:'Oswald',sans-serif; font-weight:600;
    font-size:26px; line-height:1.2; color:#2C2C2A;
    margin:0 0 14px; text-transform:none;
}
.hm-sh-tabs-panel p{ font-size:15px; line-height:1.8; color:#5F5E5A; margin:0 0 16px }
.hm-sh-tabs-panel p:last-child{ margin-bottom:0 }

/* ===== Responsief ===== */
@media(max-width:860px){
    .hm-sh-tabs{ padding:60px 20px }
    .hm-sh-tabs-title{ font-size:32px }
    .hm-sh-tabs-tab{ padding:10px 16px; font-size:13px }
}


.page-id-2377 .page-title { display: none !important; }

.page-id-3436 .page-title { display: none !important; }
.page-id-3879 .page-title { display: none !important; }
.page-id-799 .page-title { display: none !important; }
.page-id-1941 .page-title { display: none !important; }
.page-id-2961 .page-title { display: none !important; }
.page-id-3452 .page-title { display: none !important; }


/* ============================================================
   SOCIAL MEDIA ADVERTISING — tabs
   Styling + mobiele opzet 1-op-1 overgenomen van .hm-d-ads
   (Google Advertising), vertaald naar de .hm-sa-classes.
   ============================================================ */
.hm-sa {
    background: #7A2818;
    padding: 60px 0px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
}
.hm-sa-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}
.hm-sa-head {
    max-width: 1200px;
    margin: 0 auto 40px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.hm-sa-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FCC3BD;
    margin-bottom: 12px;
}
.hm-sa-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    color: #fff;
    margin: 0 0 18px;
    line-height: 1.1;
    text-transform: none;
    letter-spacing: -0.5px;
}
.hm-sa-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin: 0;
}

/* ===== Kolommen: knoppen | telefoon | tekst ===== */
.hm-sa-cols {
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ===== Tab-knoppen ===== */
.hm-sa-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hm-sa-tab {
    appearance: none;
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 40px;
    padding: 11px 22px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.hm-sa-tab:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}
.hm-sa-tab.is-active {
    background: #fff;
    color: #7A2818;
    border-color: #fff;
    font-weight: 600;
}

/* ===== Telefoon-afbeelding (wisselt via src) ===== */
.hm-sa-phonewrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 480px;
}
.hm-sa-shot {
    max-width: 100%;
    max-height: 480px;
    width: auto;
    height: auto;
    display: block;
    transition: opacity .4s ease, transform .4s ease;
    /* fade waaiert uit vanuit de rechteronderhoek → de arm(hoek) lost
       op in de achtergrondkleur; dik/intens bij de hoek zelf */
    -webkit-mask-image: radial-gradient(122% 122% at 100% 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 18%, #000 54%);
            mask-image: radial-gradient(122% 122% at 100% 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 18%, #000 54%);
}

/* ===== Tekst-panelen ===== */
.hm-sa-info {
    position: relative;
    min-height: 280px;
}
.hm-sa-info-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.hm-sa-info-panel.on {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}
.hm-sa-info-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.15;
}
.hm-sa-info-text {
    font-size: 14.5px;
    color: rgba(255,255,255,0.88);
    line-height: 1.7;
    margin: 0 0 22px;
}
.hm-sa-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DE2918;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: 10px;
    border: 2px solid #DE2918;
    transition: background .2s, color .2s, border-color .2s, gap .2s;
}
.hm-sa-info-btn:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
    gap: 12px;
}

/* ============================================================
   RESPONSIEF — identiek aan .hm-d-ads
   ============================================================ */
@media (max-width: 1024px) {
    .hm-sa-cols { grid-template-columns: 200px 1fr; }
    .hm-sa-phonewrap { display: none; }
}
@media (max-width: 720px) {
    .hm-sa { padding: 60px 0; }
    .hm-sa-inner { padding: 0 25px; }
    .hm-sa-title { font-size: 32px; }
    .hm-sa-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    /* knoppen: gecentreerde rij bovenaan */
    .hm-sa-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        order: 1;
    }
    .hm-sa-tab { padding: 9px 16px; font-size: 13px; }

    /* afbeelding weer tonen op mobiel, kleiner, tussen knoppen en tekst */
    .hm-sa-phonewrap {
        display: flex;            /* overschrijft de display:none van ≤1024 */
        order: 2;
        min-height: 360px;
    }
    .hm-sa-shot { max-height: 360px; }

    .hm-sa-info { min-height: auto; order: 3; }
    .hm-sa-info-panel { position: relative; }
    .hm-sa-info-panel:not(.on) { display: none; }
}


.hm-seo-rnk *{ box-sizing:border-box; }
.hm-seo-rnk{
    position:relative; overflow:hidden;
    width:100vw; margin-left:50%; transform:translateX(-50%);
    background:#7A2818; padding:64px 24px 76px;
    font-family:'Roboto',sans-serif;
}
.hm-seo-rnk-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; }

.hm-seo-rnk-center{ max-width:560px; margin:0 auto 26px; text-align:center; }
.hm-seo-rnk-eyebrow{ font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FCC3BD; display:inline-block; margin-bottom:14px; opacity:0; transition:opacity .5s ease; }
.hm-seo-rnk-head{ font-family:'Oswald',sans-serif; font-weight:600; font-size:32px; line-height:1.13; letter-spacing:-.5px; color:#fff; margin:0 0 24px; opacity:0; transition:opacity .5s ease; }
.hm-seo-rnk.is-title .hm-seo-rnk-eyebrow,
.hm-seo-rnk.is-title .hm-seo-rnk-head{ opacity:1; }
.hm-seo-rnk-mk{ position:relative; display:inline-block; z-index:0; }
.hm-seo-rnk-mk::after{ content:''; position:absolute; left:-6px; right:-6px; bottom:8%; height:36%; background:rgba(222,41,24,.55); transform:skewX(-12deg); z-index:-1; border-radius:2px; }

.hm-seo-rnk-bar{ display:flex; align-items:center; gap:14px; max-width:480px; margin:0 auto; background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.16); border-radius:14px; padding:15px 22px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 18px 50px rgba(0,0,0,.4); opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.hm-seo-rnk.is-bar .hm-seo-rnk-bar{ opacity:1; transform:none; }
.hm-seo-rnk.is-enter .hm-seo-rnk-bar{ animation:hmSeoPulse .35s ease; }
.hm-seo-rnk-bar svg{ width:22px; height:22px; color:#DE2918; flex:0 0 auto; }
.hm-seo-rnk-q{ font-size:18px; color:#FBF6EE; text-align:left; white-space:nowrap; overflow:hidden; }
.hm-seo-rnk-caret{ display:inline-block; width:2px; height:21px; background:#DE2918; vertical-align:middle; animation:hmSeoBlink 1s step-end infinite; }

.hm-seo-rnk-spon{ text-align:center; font-size:12px; font-weight:600; letter-spacing:.4px; color:rgba(251,246,238,.62); margin:24px 0 20px; opacity:0; transition:opacity .4s ease; }
.hm-seo-rnk-spon b{ color:#FBF6EE; }
.hm-seo-rnk.is-results .hm-seo-rnk-spon{ opacity:1; }

.hm-seo-rnk-serp{ position:relative; }
.hm-seo-rnk-list{ --rh:90px; position:relative; height:calc(var(--rh) * 5); }

.hm-seo-rnk-pos{ position:absolute; left:0; width:34px; height:var(--rh); top:calc(var(--i) * var(--rh)); display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:600; font-size:19px; color:rgba(255,255,255,.3); opacity:0; transition:opacity .4s ease; }
.hm-seo-rnk-pos.p1{ color:#FF7A4D; }
.hm-seo-rnk.is-results .hm-seo-rnk-pos{ opacity:1; }

.hm-seo-rnk-row{ position:absolute; left:46px; right:0; height:calc(var(--rh) - 14px); padding:11px 16px; display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.12); border-radius:13px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); box-shadow:0 14px 30px rgba(0,0,0,.26); transform:translateY(calc(var(--pos,0) * var(--rh) + 7px)); opacity:0; transition:transform .8s cubic-bezier(.5,0,.15,1), opacity .5s ease, border-color .4s ease, background .4s ease; }
.hm-seo-rnk.is-results .hm-seo-rnk-row{ opacity:1; }

.hm-seo-rnk-row.c1{ --pos:0 }
.hm-seo-rnk-row.c2{ --pos:1 }
.hm-seo-rnk-row.c3{ --pos:2 }
.hm-seo-rnk-row.c4{ --pos:3 }
.hm-seo-rnk-row.mine{ --pos:4 }
.hm-seo-rnk.is-climb .hm-seo-rnk-row.mine{ --pos:0 }
.hm-seo-rnk.is-climb .hm-seo-rnk-row.c1{ --pos:1 }
.hm-seo-rnk.is-climb .hm-seo-rnk-row.c2{ --pos:2 }
.hm-seo-rnk.is-climb .hm-seo-rnk-row.c3{ --pos:3 }
.hm-seo-rnk.is-climb .hm-seo-rnk-row.c4{ --pos:4 }

.rr-fav{ width:38px; height:38px; flex:0 0 auto; border-radius:9px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.rr-fav svg{ width:21px; height:21px; color:rgba(255,255,255,.55); }
.rr-txt{ min-width:0; flex:1; }
.rr-url{ font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.rr-title{ font-size:14.5px; font-weight:600; color:#A9C4FF; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rr-desc{ font-size:11.5px; color:rgba(255,255,255,.5); line-height:1.3; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.rr-rise{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; margin-left:10px; font-size:10.5px; font-weight:700; color:#8FE0A6; background:rgba(60,200,120,.12); border:1px solid rgba(120,230,160,.4); border-radius:999px; padding:4px 10px; opacity:0; transform:translateY(4px); transition:opacity .4s ease, transform .4s ease; }
.hm-seo-rnk.is-climb .rr-rise{ opacity:1; transform:none; }

.hm-seo-rnk-row.mine{ border-color:#FF7A4D; background:rgba(222,41,24,.12); }
.hm-seo-rnk-row.mine .rr-title{ color:#FF7A4D; }
.hm-seo-rnk-row.mine .rr-fav{ background:rgba(255,122,77,.18); }
.hm-seo-rnk-row.mine .rr-fav svg{ color:#FF7A4D; }
.hm-seo-rnk-badge{ position:absolute; top:-10px; right:14px; background:#FF7A4D; color:#fff; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:3px 11px; border-radius:20px; white-space:nowrap; opacity:0; transition:opacity .4s ease; }
.hm-seo-rnk.is-results .hm-seo-rnk-badge{ opacity:1; }
.hm-seo-rnk.is-top .hm-seo-rnk-row.mine{ animation:hmSeoGlow 2.4s ease-in-out infinite; }

@keyframes hmSeoPulse{ 0%{transform:none} 45%{transform:scale(.985)} 100%{transform:none} }
@keyframes hmSeoBlink{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes hmSeoGlow{ 0%,100%{ box-shadow:0 14px 30px rgba(255,122,77,.30) } 50%{ box-shadow:0 16px 40px rgba(255,122,77,.6) } }

@media (max-width:680px){
    .hm-seo-rnk{ padding:54px 16px 60px; }
    .hm-seo-rnk-head{ font-size:26px; }
    .hm-seo-rnk-bar{ gap:10px; padding:13px 16px; }
    .hm-seo-rnk-bar svg{ width:19px; height:19px; }
    .hm-seo-rnk-q{ font-size:15px; }
    .hm-seo-rnk-list{ --rh:84px; }          /* iets compacter, mechaniek blijft gelijk */
    .hm-seo-rnk-pos{ width:24px; font-size:16px; }
    .hm-seo-rnk-row{ left:32px; gap:10px; padding:9px 12px; border-radius:11px; }
    .rr-fav{ width:32px; height:32px; border-radius:8px; }
    .rr-fav svg{ width:17px; height:17px; }
    .rr-title{ font-size:13px; }
    .rr-url{ font-size:10px; }
    .rr-desc{ font-size:10.5px; }
    .rr-rise{ font-size:9.5px; padding:3px 8px; margin-left:8px; }
    .hm-seo-rnk-badge{ font-size:9px; padding:3px 9px; right:10px; }
}
@media (prefers-reduced-motion:reduce){
    .hm-seo-rnk-eyebrow,.hm-seo-rnk-head,.hm-seo-rnk-bar,.hm-seo-rnk-spon,.hm-seo-rnk-pos{ opacity:1 !important; transform:none !important; transition:none }
    .hm-seo-rnk-row{ transition:none; opacity:1 !important }
    .hm-seo-rnk-row.mine{ --pos:0 }
    .hm-seo-rnk-row.c1{ --pos:1 } .hm-seo-rnk-row.c2{ --pos:2 }
    .hm-seo-rnk-row.c3{ --pos:3 } .hm-seo-rnk-row.c4{ --pos:4 }
    .rr-rise,.hm-seo-rnk-badge{ opacity:1 !important; transform:none !important }
    .hm-seo-rnk-row.mine{ animation:none !important }
    .hm-seo-rnk-caret{ display:none }
}

/* ============================================================
   DIENSTPAGINA — HERO (één stijl voor alle dienstpagina's)
   ============================================================ */
.hm-dienst-hero{
    background:linear-gradient(135deg,#9A3320 0%,#5A1E10 100%);
    color:#fff;
    width:100vw; margin-left:50%; transform:translateX(-50%);
    margin-top:-120px;            /* onder de transparante header; -10px bij een witte header */
    min-height:550px;
    display:flex; align-items:center; justify-content:center;
    padding: 180px 24px 60px;     /* top ruim genoeg zodat de header er overheen valt */
    text-align:center; position:relative; overflow:hidden; box-sizing:border-box;
}
/* gap regelt de verticale ruimte — geen losse margins meer */
.hm-dienst-hero-inner{
    position:relative; z-index:1; max-width:820px;
    display:flex; flex-direction:column; align-items:center; gap:16px;
}
.hm-dienst-hero-inner #breadcrumbs{
    margin:0; font-family:'Roboto',sans-serif; font-size:15px; line-height:1.4; color:rgba(255,255,255,.85);
}
.hm-dienst-hero-inner #breadcrumbs a{ color:rgba(255,255,255,.85); text-decoration:none; transition:color .2s; }
.hm-dienst-hero-inner #breadcrumbs a:hover{ color:#fff; }
.hm-dienst-hero-inner #breadcrumbs .breadcrumb_last,
.hm-dienst-hero-inner #breadcrumbs .breadcrumb_last strong{ color:#fff; font-weight:700; }
.hm-dienst-hero .hm-dienst-hero-inner h1{
    margin:0; font-family:'Oswald',sans-serif; font-weight:600; font-size:50px;
    line-height:1.1; letter-spacing:-.5px; color:#fff; text-transform:none;
}
.hm-dienst-hero-inner p{
    margin:0; font-family:'Roboto',sans-serif; font-size:15px; line-height:1.65; color:rgba(255,255,255,.9); max-width:620px;
}
.hm-dienst-hero-mk {
    position: relative;
    display: inline-block;
    z-index: 0;
}
.hm-dienst-hero-mk::after {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: 8%;
    height: 36%;
    background: rgba(222, 41, 24, 0.55);
    transform: skewX(-12deg);
    z-index: -1;
    border-radius: 2px;
}

@media (max-width:860px){
    .hm-dienst-hero{ margin-top:-90px; padding:150px 24px 70px; }
    .hm-dienst-hero .hm-dienst-hero-inner h1{ font-size:36px; }
    .hm-dienst-hero-inner p{ font-size:14px; }
    .hm-dienst-hero-inner #breadcrumbs{ font-size:14px; }
}

/* ============================================================
   CONTACT-CTA — terracotta paneel (niet full-width)
   (prefix hm-cta-panel)
   ============================================================ */
.hm-cta-panel{
    background:#ffffff;
    max-width:1200px;      /* de outer wordt nu de container */
    margin:0 auto;
    padding:70px 10px;     /* de 15px buiten-gutter */
    font-family:'Roboto',sans-serif;
}
.hm-cta-panel-box{
    width:100%;            /* vult de 1170 content-area */
    /* max-width:1200px en margin:0 auto eraf — de outer begrenst nu */
    background:linear-gradient(135deg,#9A3320 0%,#5A1E10 100%);
    border-radius:7px;
    padding:72px 15px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.hm-cta-panel-box::before{
    content:''; position:absolute;
    left:-80px; top:50%; transform:translateY(-50%);
    width:460px; height:460px;
    background-image:url("https://heatmedia.nl/wp-content/uploads/2026/06/Ontwerp-zonder-titel-1.png");
    background-repeat:no-repeat; background-position:center; background-size:contain;
    opacity:.07;
    pointer-events:none;
}
.hm-cta-panel-inner{ position:relative; z-index:1; max-width:700px; margin:0 auto; }
.hm-cta-panel-title{
    font-family:'Oswald',sans-serif;
	font-weight:700;
	font-size:40px;
	line-height:1.1;
    color:#FBF6EE;
	margin:0 0 18px;
	letter-spacing: -0.5px;
}
.hm-cta-panel-text{
    font-size:15px;
	line-height:1.7;
	color:rgba(251,246,238,.85);
    max-width:560px;
	margin:0 auto 28px;
}
/* gehighlight woord — rode schuine marker achter de tekst */
.hm-cta-panel-mk{ position:relative; white-space:nowrap; }
.hm-cta-panel-mk::after{
    content:''; position:absolute; z-index:-1;
    left:-6px; right:-6px; top:12%; bottom:8%;
    background:rgba(222,41,24,.55);
    transform:skewX(-6deg);
}
.hm-cta-panel-actions{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.hm-cta-panel-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:#FBF6EE; color:#5A1E10; font-weight:600; font-size:15px;
    padding:9px 22px; border-radius:7px; border:2px solid #FBF6EE; text-decoration:none;
    transition:background .2s, color .2s, gap .2s;
}
.hm-cta-panel-btn:hover{ background:transparent; color:#FBF6EE; gap:12px; }
.hm-cta-panel-btn svg{ width:17px; height:17px; }
.hm-cta-panel-link{
    display:inline-flex; align-items:center; gap:8px;
    color:#FBF6EE; font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:3px;
    transition:gap .2s;
}
.hm-cta-panel-link:hover{ gap:11px; }
.hm-cta-panel-link svg{ width:16px; height:16px; }

@media (max-width:860px){
    .hm-cta-panel{ padding: 50px 20px; }   /* enige laag: exact 20px */
    .hm-cta-panel-box{ padding:48px 24px; }
    .hm-cta-panel-title{ font-size:32px; }
    .hm-cta-panel-actions{ flex-direction:column; gap:16px; }
    .hm-cta-panel-btn{ width:100%; justify-content:center; }
    .hm-cta-panel-box::before{ width:320px; height:320px; left:-100px; }
	.hm-cta-panel-box::before{ width:320px; height:320px; left:-100px; }
}

/* CTA-paneel: de 10px van de Elementor-container weghalen (alle formaten) */
.elementor-element-44005f8,
.elementor-element-44005f8 > .e-con-inner {
    --padding-left: 0;
    --padding-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#cmplz-manage-consent { display: none !important; }

.hm-ga-feature--square .hm-ga-feature-img{
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    object-fit:cover;
}

/* ============================================================
   Remarketing — stappen-schema "Zo werkt remarketing" (hm-rm)
   ============================================================ */
.hm-rm{position:relative;width:100vw;margin-left:50%;transform:translateX(-50%);overflow:hidden;background:linear-gradient(140deg,#B23B22 0%,#5A1E10 78%);padding:84px 28px;}
.hm-rm-inner{position:relative;z-index:1;max-width:980px;margin:0 auto;}

.hm-rm-head{text-align:center;max-width:640px;margin:0 auto 54px;}
.hm-rm-eyebrow{font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#FCC3BD;display:inline-block;margin-bottom:14px;}
.hm-rm-title{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:-.5px;color:#FBF6EE;margin:0;}
.hm-rm-intro{font-family:'Roboto',sans-serif;color:rgba(251,246,238,.82);font-size:16px;line-height:1.6;margin:14px auto 0;max-width:520px;}

.hm-rm-flow{display:flex;align-items:flex-start;justify-content:center;}
.hm-rm-step{flex:0 0 auto;width:clamp(58px,14vw,132px);text-align:center;opacity:0;transform:translateY(10px);transition:opacity .34s ease,transform .34s ease;}
.hm-rm-step.is-on{opacity:1;transform:none;}
.hm-rm-ic{position:relative;width:clamp(50px,9.5vw,88px);height:clamp(50px,9.5vw,88px);border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;background:#FBF6EE;box-shadow:0 9px 22px rgba(0,0,0,.25);}
.hm-rm-ic svg{width:46%;height:46%;stroke:#5A1E10;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hm-rm-step.is-on .hm-rm-ic{animation:hm-rm-ring .85s ease-out;}
@keyframes hm-rm-ring{0%{box-shadow:0 9px 22px rgba(0,0,0,.25),0 0 0 0 rgba(252,195,189,.7);}100%{box-shadow:0 9px 22px rgba(0,0,0,.25),0 0 0 16px rgba(252,195,189,0);}}
.hm-rm-check{position:absolute;right:-2px;top:-2px;width:28px;height:28px;border-radius:50%;background:#1d8f55;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;opacity:0;transform:scale(.4);transition:.3s;}
.hm-rm-check.is-on{opacity:1;transform:scale(1);}
.hm-rm-lbl{margin-top:14px;font-family:'Roboto',sans-serif;font-size:clamp(10px,1.3vw,12px);font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#FBF6EE;line-height:1.3;}
.hm-rm-conn{flex:1;min-width:14px;height:3px;margin-top:clamp(24px,4.7vw,42px);background:rgba(255,255,255,.2);border-radius:2px;position:relative;overflow:hidden;}
.hm-rm-conn::after{content:'';position:absolute;inset:0;background:#FBF6EE;transform:scaleX(0);transform-origin:left;transition:transform .34s ease;}
.hm-rm-conn.is-on::after{transform:scaleX(1);}

.hm-rm-returnwrap{position:relative;margin-top:4px;}
.hm-rm-retsvg{display:block;width:100%;height:84px;overflow:visible;}
.hm-rm-retpath,.hm-rm-retarrow{stroke:#FCC3BD;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.hm-rm-retpath{transition:stroke-dashoffset .85s ease;}
.hm-rm-retarrow{opacity:0;transition:opacity .3s ease .7s;}
.hm-rm-retarrow.is-on{opacity:1;}
.hm-rm-retcap{text-align:center;margin-top:4px;font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(12px,1.6vw,15px);letter-spacing:.5px;text-transform:uppercase;color:#FCC3BD;opacity:0;transform:translateY(6px);transition:.35s;}
.hm-rm-retcap.is-on{opacity:1;transform:none;}

/* ============================================================
   Content marketing — funnel "Van bezoeker naar klant" (hm-cm)
   ============================================================ */
.hm-cm {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  background: linear-gradient(140deg, #B23B22 0%, #5A1E10 78%);
  padding: 84px 28px;
}
.hm-cm-inner {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}
.hm-cm-eyebrow {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FCC3BD;
  display: inline-block;
  margin-bottom: 12px;
}
.hm-cm-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.05;
  color: #FBF6EE;
  margin: 0 0 10px;
}
.hm-cm-intro {
  font-family: 'Roboto', sans-serif;
  color: rgba(251, 246, 238, .8);
  font-size: 16px;
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 40px;
}
.hm-cm-funnel {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 40vw, 380px) 1fr;
  column-gap: 26px;
  row-gap: 0;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}
.hm-cm-level {
  display: contents;
}
.hm-cm-seg {
  height: 92px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 14px;
  text-align: center;
  border: 1.5px solid rgba(252, 195, 189, .25);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.hm-cm-level.is-on .hm-cm-seg {
  opacity: 1;
  transform: none;
}
.hm-cm-seg b {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 2.2vw, 21px);
  color: #FBF6EE;
  letter-spacing: .3px;
}
.hm-cm-seg-ct {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 600;
  color: #FCC3BD;
  line-height: 1.25;
}
.hm-cm-level:nth-of-type(1) .hm-cm-seg {
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
  background: rgba(252, 195, 189, .12);
}
.hm-cm-level:nth-of-type(2) .hm-cm-seg {
  width: 84%;
  clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%);
  background: rgba(252, 195, 189, .2);
}
.hm-cm-level:nth-of-type(3) .hm-cm-seg {
  width: 66%;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  background: rgba(222, 41, 24, .32);
}
.hm-cm-level:nth-of-type(4) .hm-cm-seg {
  width: 48%;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  background: linear-gradient(135deg, #DE2918, #9A2516);
  border-color: rgba(252, 195, 189, .6);
}
.hm-cm-level:nth-of-type(4) .hm-cm-seg-ct {
  color: rgba(251, 246, 238, .92);
}
.hm-cm-level:last-of-type.is-on .hm-cm-seg {
  animation: hm-cm-pulse 1.5s ease-out .3s;
}
@keyframes hm-cm-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 195, 189, .5);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(252, 195, 189, 0);
  }
}
.hm-cm-info {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease .12s, transform .6s ease .12s;
}
.hm-cm-level.is-on .hm-cm-info {
  opacity: 1;
  transform: none;
}
.hm-cm-info.is-right {
  text-align: left;
}
.hm-cm-info.is-left {
  text-align: right;
}
.hm-cm-fase {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FCC3BD;
  margin-bottom: 6px;
}
.hm-cm-desc {
  font-family: 'Roboto', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(251, 246, 238, .8);
}
.hm-cm-cell {
  min-width: 0;
}

/* ============================================================
   MOBIEL (<=680px) — elk niveau een eigen blok:
   trechtervorm bovenaan, toelichting eronder, in de juiste
   volgorde. display:contents wordt uitgezet zodat de niveaus
   niet meer platklappen in de grid.
   ============================================================ */
@media (max-width: 680px) {
  .hm-cm {
    padding: 64px 20px;
  }

  /* funnel als nette verticale kolom */
  .hm-cm-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 440px;
  }

  /* elk niveau weer een eigen blok (geen display:contents meer) */
  .hm-cm-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* lege sier-cellen weg */
  .hm-cm-cell:empty {
    display: none;
  }

  /* volgorde forceren: trechtervorm eerst, toelichting eronder —
     ongeacht of de toelichting links of rechts in de HTML staat */
  .hm-cm-seg {
    order: 1;
  }
  .hm-cm-info {
    order: 2;
    text-align: center !important;
    max-width: 340px;
    margin: 12px auto 26px;
  }
}

/* ===== WEBDESIGN — laptop-mockups (Ons werk) ===== */
.hm-wd{
  position:relative;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  overflow:hidden;
  background:linear-gradient(140deg,#B23B22 0%,#5A1E10 78%);
  padding:84px 20px;
}
.hm-wd-inner{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:0 10px;
}
.hm-wd-head{
  text-align:center;
  max-width:620px;
  margin:0 auto 56px;
}
.hm-wd-eyebrow{
  display:inline-block;
  margin-bottom:14px;
  font-size:13px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#FCC3BD;
}
.hm-wd-title{
  margin:0 0 12px;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(28px,4vw,42px);
  line-height:1.05;
  color:#FBF6EE;
}
.hm-wd-intro{
  margin:0;
  font-size:16px;
  color:rgba(251,246,238,.82);
}

/* grid van 3 laptops */
.hm-wd-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  align-items:start;
}
.hm-wd-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* frame + scherm */
.hm-wd-frame{
  position:relative;
  width:100%;
}
.hm-wd-device{           /* mockup-afbeelding bovenop, met transparant schermgat */
  position:relative;
  z-index:2;
  width:100%;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.45));
}
.hm-wd-shot{             /* screenshot eronder, iets groter dan het gat zodat hij netjes aansluit */
  position:absolute;
  z-index:1;
  left:10.8%;
  top:12.2%;
  width:78.3%;
  height:80.5%;
  overflow:hidden;
  background:#fff;
  border-radius:4px;
}
.hm-wd-scroller{
  position:absolute;
  inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hm-wd-scroller::-webkit-scrollbar{
  width:0;
  height:0;
}
.hm-wd-scroller img{
  width:100%;
  height:auto;
  display:block;
}
.hm-wd-hint{            /* zichtbaar door het schermgat */
  position:absolute;
  z-index:3;
  right:14%;
  bottom:11%;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:20px;
  background:rgba(20,17,15,.78);
  color:#fff;
  font-size:11px;
  font-weight:600;
  pointer-events:none;
}

/* bijschrift */
.hm-wd-cap{
  margin-top:18px;
  text-align:center;
}
.hm-wd-cap b{
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:16px;
  letter-spacing:.3px;
  color:#FBF6EE;
}
.hm-wd-cap span{
  font-size:13px;
  color:#FCC3BD;
}

@media(max-width:900px){
  .hm-wd-grid{
    grid-template-columns:1fr;
    max-width:560px;
    margin:0 auto;
  }
}
body.home .e-flex,
body.home .e-con.e-flex,
body.home div[data-element_type="container"].e-flex {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* ====== CONTACTPAGINA — formulier + zijbalk ====== */
.hm-contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: start;
}

/* --- Formulier-box --- */
.hm-form-box {
    padding: 48px 44px;
    background: #FBF6EE;
    border-radius: 7px;
}

.hm-form-box .hm-section-title {
    margin-bottom: 8px;
    text-align: left;
}

.hm-form-box .hm-intro {
    margin-bottom: 28px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #5F5E5A;
}

.hm-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hm-field label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2C2C2A;
}

.hm-field input,
.hm-field select,
.hm-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ECE6DC;
    border-radius: 7px;
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #2C2C2A;
    transition: border-color .2s;
}

.hm-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F5E5A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hm-field input:focus,
.hm-field select:focus,
.hm-field textarea:focus {
    border-color: #DE2918;
}

.hm-field input::placeholder,
.hm-field textarea::placeholder {
    color: #B0AAA4;
}

.hm-field textarea {
    min-height: 120px;
    line-height: 1.6;
    resize: vertical;
}

.hm-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.hm-form-note {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #5F5E5A;
}

.hm-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    background: #DE2918;
    border: 2px solid #DE2918;
    border-radius: 7px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.hm-btn-submit:hover {
    background: transparent;
    color: #DE2918;
    gap: 12px;
}

/* --- Succes-melding --- */
.hm-success {
    display: none;
    padding: 40px 0;
    text-align: center;
}

.hm-success-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8F5E9;
    border-radius: 50%;
    color: #43A047;
    font-size: 24px;
}

.hm-success h3 {
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #2C2C2A;
}

.hm-success p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #5F5E5A;
}

.hm-info-block {
    margin-bottom: 24px;
    padding: 28px;
    background: #fff;
    border: 1px solid #ECE6DC;
    border-radius: 7px;
}

.hm-info-block:last-child {
    margin-bottom: 0;
}

.hm-info-block h4 {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ECE6DC;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2C2C2A;
}

.hm-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hm-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
}

.hm-info-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DE2918;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
}

.hm-info-text {
    display: flex;
    flex-direction: column;
    padding-top: 1px;
    line-height: 1.4;
}

.hm-info-text strong {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #2C2C2A;
}

.hm-info-value {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #5F5E5A;
}

a.hm-info-item .hm-info-value {
    color: #DE2918;
    transition: color .2s;
}

a.hm-info-item:hover .hm-info-value {
    color: #B92516;
}

/* --- Openingstijden --- */
.hm-hours-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 5px 13px;
    background: #E8F5E9;
    border-radius: 20px;
    color: #2E7D32;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.hm-hours-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43A047;
}

.hm-hours-badge.closed {
    background: #FCE4E4;
    color: #C62828;
}

.hm-hours-badge.closed .dot {
    background: #E53935;
}

.hm-hours-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #5F5E5A;
}

.hm-hours-row strong {
    font-size: 15px;
    font-weight: 600;
    color: #2C2C2A;
}

/* --- Social links --- */
.hm-social-links {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.hm-social-link {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3EDE4;
    border-radius: 50%;
    color: #DE2918;
    font-size: 16px;
    text-decoration: none;
    transition: all .2s;
}

.hm-social-link:hover {
    background: #DE2918;
    color: #fff;
    transform: translateY(-2px);
}

/* --- Responsive sectie 3 --- */
@media (max-width: 900px) {
    .hm-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hm-form-box {
        padding: 32px 20px;
    }
}

@media (max-width: 600px) {
    .hm-form-row {
        grid-template-columns: 1fr;
    }
    .hm-form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .hm-btn-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ====== CONTACTPAGINA — intro + contactkaartjes ====== */

/* --- Sectie-kop --- */
.hm-tag {
    display: inline-block;
    margin-bottom: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #DE2918;
}

.hm-section-head {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.hm-section-title {
    margin: 0 0 18px;
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #2C2C2A;
}

.hm-section-sub {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #5F5E5A;
}

/* --- Kaartjes-grid --- */
.hm-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hm-contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 36px 28px 32px;
    background: #fff;
    border: 1px solid #ECE6DC;
    border-radius: 7px;
    overflow: hidden;
    transition: all .25s ease;
}

.hm-contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #DE2918;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.hm-contact-card:hover {
    transform: translateY(-4px);
}

.hm-contact-card:hover::before {
    transform: scaleX(1);
}

.hm-card-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCEAE7;
    border-radius: 7px;
    color: #DE2918;
    font-size: 22px;
    transition: background .25s;
}

.hm-contact-card:hover .hm-card-icon {
    background: rgba(222, 41, 24, .1);
}

.hm-contact-card h3 {
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #2C2C2A;
}

.hm-contact-card p {
    flex: 1;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.7;
    color: #5F5E5A;
}

.hm-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #DE2918;
    text-decoration: none;
    transition: gap .2s;
}

.hm-card-link:hover {
    gap: 12px;
}

/* --- Responsive --- */
@media (max-width: 860px) {
    .hm-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ====== CONTACTPAGINA — sectie-omhulsel (breedte + ruimte) ====== */
.hm-contact-section {
    max-width: 1200px;
    margin: 0 auto;
	padding: 78px 0px; 
}

.hm-contact-container {
    max-width: 1200px;
    margin: 0 auto;
	padding: 0px 10px; 
}

@media (max-width: 860px) {
    .hm-contact-section {
        padding: 60px 0px;
	.hm-contact-container {
		padding: 0px 20px;
	}
    }
}

/* ====== OVER ONS — algemene band ====== */
.hm-band {
    padding: 90px 0px;
}
.hm-band-inner {
    max-width: 1200px;
    margin: 0 auto;
	padding: 0px 10px;
}
@media (max-width: 860px) {
    .hm-band {
        padding: 60px 20px;
    }
}

/* ====== OVER ONS — stat-rij (sectie 1 + 2) ====== */
.hm-feature-stats {
    display: flex;
    margin-top: 28px;
    font-family: 'Oswald', sans-serif;
}
.hm-feature-stat {
    flex: 1;
    position: relative;
    padding: 0 22px;
}
.hm-feature-stat:first-child {
    padding-left: 0;
}
.hm-feature-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 6%;
    height: 70%;
    width: 1px;
    background: rgba(44, 44, 42, .15);
}
.hm-feature-stat-label {
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #5F5E5A;
}
.hm-feature-stat-value {
    font-size: 17px;
    font-weight: 600;
    color: #2C2C2A;
}
.hm-feature-stat-line {
    width: 40px;
    height: 2px;
    margin-top: 10px;
    background: #DE2918;
}
@media (max-width: 560px) {
    .hm-feature-stats {
        flex-direction: column;
    }
    .hm-feature-stat {
        padding: 12px 0;
        border-bottom: 1px solid rgba(44, 44, 42, .1);
    }
    .hm-feature-stat:last-child {
        border-bottom: none;
    }
    .hm-feature-stat:not(:last-child)::after {
        display: none;
    }
}

/* ====== OVER ONS — Drie redenen ====== */
.hm-reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.hm-reason-card {
    position: relative;
    padding: 36px 30px 34px;
    background: #fff;
    border: 1px solid #ECE6DC;
    border-radius: 7px;
    overflow: hidden;
    transition: all .25s ease;
}
.hm-reason-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #DE2918;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.hm-reason-card:hover {
    transform: translateY(-4px);
}
.hm-reason-card:hover::before {
    transform: scaleX(1);
}
.hm-reason-num {
    display: block;
    margin-bottom: 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: #DE2918;
}
.hm-reason-card h3 {
    margin: 0 0 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #2C2C2A;
}
.hm-reason-divider {
    width: 32px;
    height: 2px;
    margin-bottom: 16px;
    background: #DE2918;
    transition: width .35s ease;
}
.hm-reason-card:hover .hm-reason-divider {
    width: 52px;
}
.hm-reason-card p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.7;
    color: #5F5E5A;
}
@media (max-width: 860px) {
    .hm-reasons-grid {
        grid-template-columns: 1fr;
    }
}
hm-ga-feature--cream {
    background: #FBF6EE;
    box-shadow: 0 0 0 100vmax #FBF6EE;
    clip-path: inset(0 -100vmax);
}

.hm-ga-feature--grey {
    background: #F5F3F0;
    box-shadow: 0 0 0 100vmax #F5F3F0;
    clip-path: inset(0 -100vmax);
}

/* ============================================================
   TEAM — gedeeld (homepage + over ons)
   ============================================================ */
.hm-team {
    background: #FBF6EE;
    padding: 100px 0;
}
.hm-team-inner {
    max-width: 1200px;        /* was 1280px */
    margin: 0 auto;
    padding: 0 10px;          /* was 0 5% */
}
.hm-team-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 48px;
}
.hm-team-title {
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: #2C2C2A;
    letter-spacing: -1px;
    line-height: 1.1;
	margin-bottom: 18px;
    text-transform: none;
}
.hm-team-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #5F5E5A;
    line-height: 1.55;
    margin: 0;
}

/* ---- Grid: gedeelde basis ---- */
.hm-team-grid {
    display: grid;
    gap: 24px;
}
/* Homepage-variant (kaarten = .hm-team-card) → 3 kolommen */
.hm-team-grid:has(.hm-team-card) {
    grid-template-columns: repeat(3, 1fr);
}
/* Over ons-variant (kaarten = .hm-team-member) → 4 kolommen */
.hm-team-grid:has(.hm-team-member) {
    grid-template-columns: repeat(4, 1fr);
}

/* ============================================================
   TEAM — OVER ONS kaarten (.hm-team-member)
   ============================================================ */
.hm-team-member {
    position: relative;
    background: #fff;
    border: 1px solid #ECE6DC;
    border-radius: 7px;
    overflow: hidden;
    transition: all .25s ease;
}
.hm-team-member:hover { transform: translateY(-4px); }
.hm-team-member-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #FBF6EE;
}
.hm-team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hm-team-member-photo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #DE2918;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.hm-team-member:hover .hm-team-member-photo::after { transform: scaleX(1); }
.hm-team-member-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 11px;
    background: #DE2918;
    border-radius: 7px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.hm-team-member-info { padding: 22px 22px 24px; }
.hm-team-member-name {
    margin-bottom: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #2C2C2A;
}
.hm-team-member-role {
    margin-bottom: 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #DE2918;
}
.hm-team-member-skill {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #ECE6DC;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.6;
    color: #5F5E5A;
}

/* ============================================================
   TEAM — Responsive
   ============================================================ */
/* Homepage: horizontale scroll-rij */
@media (max-width: 900px) {
    .hm-team { padding: 56px 0; }
    .hm-team-grid:has(.hm-team-card) {
        display: flex;
        gap: 14px;
        margin: 0 -15px;          /* was -5% — nu afgestemd op de 15px inner-padding */
        overflow-x: auto;
        padding: 4px 15px 16px;   /* was 5% */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .hm-team-grid:has(.hm-team-card)::-webkit-scrollbar { display: none; }
    .hm-team-card {
        flex: 0 0 80%;
        max-width: 320px;
        scroll-snap-align: center;
    }
    .hm-team-photo { height: 220px; }
}
/* Over ons: 4 → 2 → 1 kolom */
@media (max-width: 980px) {
    .hm-team-grid:has(.hm-team-member) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .hm-team-grid:has(.hm-team-member) { grid-template-columns: 1fr; }
}

	
/* ============================================================
   PAGINA-HERO (page.php / Elementor "Standaard") — huisstijl
   Zelfde hoogte/stijl als de dienstpagina-hero (.hm-dienst-hero)
   ============================================================ */

/* Hero-sectie */
.page-title{
    background:linear-gradient(135deg,#9A3320 0%,#5A1E10 100%) !important;
    color:#fff;
    min-height:550px;                    /* gelijk aan de dienstpagina-hero */
    border-radius:0 !important;          /* thema-ronding onderaan weg */
    display:flex; align-items:center; justify-content:center;
    padding:180px 24px 60px !important;  /* gelijk aan de dienstpagina-hero */
    text-align:center; position:relative; overflow:hidden; box-sizing:border-box;
}
/* thema zet de ronding soms op de .valign-wrapper */
.page-title.valign{ border-radius:0 !important; }

/* parallax-achtergrond uit + hero exact gelijk aan de dienstpagina (10px lager) */
.page-title.parallax{
    background-attachment:scroll !important;
    margin-top:-110px !important;
}
.page-title .overlay{ display:none !important; }

/* Inner: gecentreerd, max 820px */
.page-title .col-12{
    position:relative; z-index:1;
    max-width:820px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center; gap:16px;
}

/* Breadcrumb boven de titel */
.page-title #breadcrumbs{
    order:-1; margin:0;
    font-family:'Roboto',sans-serif; font-size:15px; line-height:1.4; color:rgba(255,255,255,.85);
}
.page-title #breadcrumbs a{ color:rgba(255,255,255,.85); text-decoration:none; transition:color .2s; }
.page-title #breadcrumbs a:hover{ color:#fff; }
.page-title #breadcrumbs .breadcrumb_last,
.page-title #breadcrumbs .breadcrumb_last strong{ color:#fff; font-weight:700; }

/* Titel */
.page-title .blog-title{
    margin:0; font-family:'Oswald',sans-serif; font-weight:600; font-size:50px;
    line-height:1.1; letter-spacing:-.5px; color:#fff; text-transform:none;
}
/* Subtitle (alleen als 'subtitle'-veld is ingevuld) */
.page-title .blog-info{
    margin:0; font-family:'Roboto',sans-serif; font-size:15px; line-height:1.65;
    color:rgba(255,255,255,.9); max-width:620px;
}

/* Mobiel */
@media (max-width:860px){
    .page-title{ padding:150px 24px 70px !important; }
    .page-title.parallax{ margin-top:-80px !important; }
    .page-title .blog-title{ font-size:36px; }
    .page-title .blog-info,
    .page-title #breadcrumbs{ font-size:14px; }
}


/* =========================================================================
   HEATMEDIA — HEADER (GECONSOLIDEERD)
   -------------------------------------------------------------------------
   Eén bron voor alle header-CSS. Vervangt alle losse header-regels die nu
   verspreid staan over style.css en het tweede CSS-bestand.

   RESPONSIVE MODEL — één grens:
     >= 1205px  -> volledige desktopheader (logo + nav + telefoon + CTA)
     <= 1204px  -> mobiele header (burger | logo | telefoon) + RMP-drawer

   TWEE OPTIONELE BLOKKEN (zie [OPTIONEEL]-labels) staan dubbel omdat je
   ze allebei in je files had. Gebruik je er maar één, verwijder de andere:
     - LOGO:  tekst-logo (.hm-logo)  ÓF  afbeeldings-logo (.hm-logo-img)
     - MENU:  thema-nav (#menu-main-menu)  ÓF  Max Mega Menu (#mega-menu-…)

   LET OP (JS): er zijn twee scroll-vlaggen in gebruik:
     - .header.is-scrolled   -> stuurt desktop-kleuren
     - body.hm-scrolled      -> stuurt mobiele burger/telefoon-kleuren
   Zorg dat je scroll-script BEIDE togglet (of unificeer naar één klasse).
   ========================================================================= */


/* =========================================================================
   1. HEADER-BALK + SCROLL-STATES + ADMIN-BALK
   ========================================================================= */
.header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #ffffff;
    border-bottom: 1px solid #F0E8D5;
    padding: 0 !important;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Bovenaan de homepage (nog niet gescrold): transparant */
.header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
}
/* Na scrollen: witte balk met schaduw */
.header.is-scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Inner-wrapper van het thema: geen eigen positionering/achtergrond */
.main-menu-area,
.main-menu-area.fixed-menu {
    position: static !important;
    top: auto !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* Naxos slideInDown-animatie uitschakelen */
.main-menu-area.animated,
.main-menu-area.slideInDown,
.main-menu-area.animate {
    animation: none !important;
    -webkit-animation: none !important;
}

div#mainNav { padding: 0; max-width: 100vw; }

/* Legacy mobiele menubalk verbergen (overblijfsel oud menu) */
.menu-bar.d-lg-none { display: none; }

/* WP admin-balk — alleen voor ingelogde beheerders. Header eronder schuiven. */
body.admin-bar #top-page.header { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar #top-page.header { top: 46px !important; }
}

/* Los contactblok (oud mobiel menu) — overal verborgen.
   De drawer heeft zijn eigen contactblok (.hm-drawer-contact).
   Dit moet op ALLE breedtes uit, anders valt het op desktop over de hero. */
.mobilecontainer { display: none !important; }


/* =========================================================================
   2. INNER-LAYOUT
   ========================================================================= */
.hm-hdr-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 16px 10px !important;
    transition: padding .3s ease;
}
.hm-hdr-left {
    display: flex;
    align-items: center;
    gap: 48px;
    flex: 1;
}
.hm-hdr-right {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* =========================================================================
   3a. LOGO — TEKST-VARIANT  [OPTIONEEL: verwijder als je het beeld-logo gebruikt]
   ========================================================================= */
.hm-logo {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: #7A2818;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    transition: color .3s ease;
}
.hm-logo:hover { color: #5A1E10; }
.hm-logo-text { color: inherit; }
.hm-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #DE2918;
    color: #DE2918;
    transform: rotate(45deg);
    margin-left: 8px;
    border-radius: 4px;
    transition: border-color .3s ease, color .3s ease;
}
.hm-logo-badge span {
    transform: rotate(-45deg);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
/* Transparante header bovenaan: tekst-logo wit */
.header:not(.is-scrolled) .hm-logo,
.header:not(.is-scrolled) .hm-logo-text { color: #ffffff; }
.header:not(.is-scrolled) .hm-logo-badge { border-color: #ffffff; color: #ffffff; }


/* =========================================================================
   3b. LOGO — AFBEELDINGS-VARIANT  [OPTIONEEL: verwijder als je het tekst-logo gebruikt]
   ========================================================================= */
.hm-logo-img {
    height: 56px;
    width: auto;
    display: block;
}
/* Standaard (witte/niet-home header): gekleurde versie */
.hm-logo-wit { display: none; }
.hm-logo-kleur { display: block; }
/* Transparante header bovenaan: witte versie */
.header:not(.is-scrolled) .hm-logo-wit { display: block; }
.header:not(.is-scrolled) .hm-logo-kleur { display: none; }


/* =========================================================================
   4. DESKTOP-NAV — THEMA-NAV (#menu-main-menu / .nav-menu)
   [Hoofd-menusysteem. Verwijder sectie 5 als je dit gebruikt.]
   ========================================================================= */
#mega-menu-wrap-header-menu .mega-menu > .mega-menu-item > .mega-menu-link,
.nav-menu li a {
    color: #2C2C2A !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14.5px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 8px 16px !important;
    height: auto !important;
    line-height: 1.5 !important;
    background: transparent !important;
    border: none !important;
    position: relative;
    transition: color .2s !important;
}
.nav-menu li a:hover { color: #DE2918 !important; background: transparent !important; }

/* Tekst zwart houden bij hover (geen rode tekst) — eigen rode onderlijn doet het werk */
#menu-main-menu.nav-menu li a:hover,
#menu-main-menu.nav-menu li a:focus { color: #2C2C2A !important; }

/* Geen thema-underline; wij tekenen de lijn zelf */
#menu-main-menu.nav-menu li a,
#menu-main-menu.nav-menu li a span {
    text-decoration: none !important;
    border-bottom: none !important;
}
#menu-main-menu.nav-menu li a::before,
#menu-main-menu.nav-menu li a span::before,
#menu-main-menu.nav-menu li a span::after { display: none !important; }

/* Rode onderlijn als pseudo-element */
#menu-main-menu.nav-menu > li > a { position: relative; }
#menu-main-menu.nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 3px;
    background: #DE2918;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s ease;
    pointer-events: none;
}
/* Lijn tonen bij hover én bij actief item */
#menu-main-menu.nav-menu > li > a:hover::after,
#menu-main-menu.nav-menu > li.current-menu-item > a::after,
#menu-main-menu.nav-menu > li.current-menu-ancestor > a::after,
#menu-main-menu.nav-menu > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Transparante header bovenaan: menu-tekst wit */
.header:not(.is-scrolled) #mega-menu-wrap-header-menu .mega-menu > .mega-menu-item > .mega-menu-link,
.header:not(.is-scrolled) .nav-menu li a { color: #ffffff !important; }
.header:not(.is-scrolled) #menu-main-menu.nav-menu li a:hover,
.header:not(.is-scrolled) #menu-main-menu.nav-menu li a:focus { color: #ffffff !important; }


/* =========================================================================
   5. DESKTOP-NAV — MAX MEGA MENU  [OPTIONEEL: verwijder als je het thema-menu gebruikt]
   ========================================================================= */
#mega-menu-wrap-header-menu { background: transparent !important; }
#mega-menu-wrap-header-menu .mega-menu > .mega-menu-item > .mega-menu-link:hover {
    color: #DE2918 !important;
    background: transparent !important;
}
a.mega-menu-link {
    font-family: 'Bakbak One' !important;
    font-weight: 100 !important;
    font-size: 18px !important;
}
ul.mega-sub-menu a.mega-menu-link {
    font-family: var(--bs-font-sans-serif) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}
/* Rode actief-balk (Max Mega Menu) */
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link {
    text-decoration: none !important;
    position: relative !important;
}
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-current-menu-ancestor > a.mega-menu-link::after,
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link[aria-current="page"]::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 4px !important;
    height: 3px !important;
    background: #DE2918 !important;
    border-radius: 2px !important;
    z-index: 10 !important;
    pointer-events: none !important;
}
/* Op items met dropdown-pijltje: balk stopt vóór het pijltje */
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item-has-children > a.mega-menu-link[aria-current="page"]::after,
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item-has-children.mega-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item-has-children.mega-current-menu-ancestor > a.mega-menu-link::after {
    right: 31px !important;
}


/* =========================================================================
   6. TELEFOON + CTA (desktop)
   ========================================================================= */
.hm-phone {
    color: #5F5E5A;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .2s;
    white-space: nowrap;
}
.hm-phone:hover { color: #DE2918; }
.hm-phone i { font-size: 14px; }
.header:not(.is-scrolled) .hm-phone { color: rgba(255, 255, 255, 0.9); }
.header:not(.is-scrolled) .hm-phone:hover { color: #ffffff; }

.hm-btn-scan {
    background: #DE2918;
    color: #ffffff !important;
    padding: 7px 16px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #DE2918 !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.hm-btn-scan:hover {
    background: #ffffff;
    color: #DE2918 !important;
    border-color: #DE2918 !important;
}
.hm-btn-scan i { font-size: 13px; }

/* CTA op transparante header: glas met uitgesneden letters */
.header:not(.is-scrolled) .hm-btn-scan {
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.header:not(.is-scrolled) .hm-btn-scan span {
    color: transparent;
    background: rgba(255, 255, 255, 0.9);
    -webkit-background-clip: text;
    background-clip: text;
}
.header:not(.is-scrolled) .hm-btn-scan i { color: #ffffff; }
/* Hover op transparante header: achtergrond echt transparant + witte rand,
   zodat de uitgesneden (frosted) letters zichtbaar blijven i.p.v. weg te
   vallen tegen een witte hover-achtergrond. */
.header:not(.is-scrolled) .hm-btn-scan:hover {
    background: transparent;
    color: #ffffff !important;
    border-color: #ffffff !important;
}


/* =========================================================================
   7. MOBIELE-HEADER ELEMENTEN (basis — getoond vanaf sectie 9 op <=1204px)
   ========================================================================= */
.hm-burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}
.hm-burger-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 26px;
}
.hm-burger-lines span {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background-color: #333333;
    transition: background-color .3s ease;
}
.hm-burger-lines span:nth-child(2) { width: 20px; }
.hm-burger-label,
.hm-phone-label {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #333333;
    transition: color .3s ease;
}
.hm-phone-mobile {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none !important;
    color: #333333;
    transition: color .3s ease;
}
.hm-phone-mobile i { font-size: 20px; line-height: 1; color: inherit; }


/* =========================================================================
   8. HEADER-ZOEKVELD (Ivory Search) — stijl ongewijzigd overgenomen
   ========================================================================= */
.header input:not(.adminbar-input), textarea { height: 32px !important; }
.is-search-icon { padding-top: 4px !important; }
.header .is-form-style input.is-search-submit,
.is-search-icon { height: 35px; }
.is-form-style.is-form-style-3 input.is-search-input { font-family: inherit; }
.is-form-style input.is-search-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid !important;
    border-radius: 0 !important;
    color: #fff !important;
}
.is-form-id-2165 .is-search-icon {
    color: #de2918 !important;
    background-color: #fff;
    border-color: #ffffff8f !important;
    border-radius: 99px;
    width: 35px;
    border: 2px solid;
}
.is-form-id-2165 .is-search-submit path { fill: #000 !important; }
button.is-search-submit { width: 35px !important; height: 35px !important; }
.is-form-style button.is-search-submit { width: 36px !important; }
.is-form-style.is-form-style-3 label { width: calc(100% - 45px) !important; }
.header .is-form-style button.is-search-submit { height: 35px !important; margin-left: 9px; }
input#is-search-input-2165 {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-color: #fef0f0ad !important;
    font-weight: 400 !important;
    color: #fff !important;
}
#is-ajax-search-result-2165, #is-ajax-search-details-2165 {
    border-radius: 5px;
    margin-top: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#is-ajax-search-result-2165 a { font-weight: bold; }
#is-ajax-search-result-2165 a,
#is-ajax-search-details-2165 a:not(.button) { text-transform: none; }
.header .is-search-sections .thumbnail img { border-radius: 5px; }
@media only screen and (min-width: 1205px) {
    .mega-menu-wrap input::placeholder { color: #fff; font-family: inherit; font-weight: 500; }
}
@media only screen and (max-width: 991px) {
    input#is-search-input-2165 { color: #000 !important; }
}


/* =========================================================================
   9. DESKTOP  (>= 1205px)  — mega-dropdown + verankering
   ========================================================================= */
@media (min-width: 1205px) {

    /* Verankering aan de headerbalk voor de full-width mega-dropdown */
    #mainNav { position: relative; }
    #mainNav .hm-hdr-inner,
    #mainNav .hm-hdr-left,
    #mainNav .op-mobile-menu,
    #mainNav #menu-main-menu,
    #mainNav .hm-mega { position: static; }

    #mainNav .hm-mega > .hm-mega-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        background: transparent;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
        z-index: 1000;
    }
    #mainNav .hm-mega:hover > .hm-mega-panel,
    #mainNav .hm-mega.hm-mega-open > .hm-mega-panel,
    #mainNav .hm-mega:focus-within > .hm-mega-panel {
        opacity: 1; visibility: visible; transform: translateY(0);
    }

    .hm-mega-inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
    .hm-mega-card {
        display: inline-flex;
        align-items: stretch;
        background: #fff;
        border-top: 2px solid #DE2918;
        box-shadow: 0 18px 40px rgba(44, 16, 8, 0.10);
        pointer-events: auto;
    }

    /* Linkerkolom: categorie-lijst */
    .hm-mega-cats { padding: 24px 34px; }
    .hm-kc-eyebrow {
        margin: 0 0 16px;
        border: none;
        font-family: 'Roboto', sans-serif;
        font-size: 12px; font-weight: 600;
        letter-spacing: 1.5px; text-transform: uppercase;
        color: #DE2918;
    }
    #mainNav .hm-mega-card .hm-kc-list {
        list-style: none; border: none;
        margin: 0 !important; padding: 0 !important;
        display: grid; grid-template-columns: auto auto; gap: 2px 40px;
    }
    #mainNav .hm-mega-card .hm-kc-item { margin: 0 !important; padding: 0 !important; border: none; }
    #mainNav .hm-mega-card .hm-kc-link {
        display: block;
        margin: 0 !important; padding: 6px 0 !important; text-indent: 0 !important;
        font-family: 'Oswald', sans-serif;
        font-size: 14px; font-weight: 500;
        color: #2C2C2A; text-decoration: none; white-space: nowrap;
        transition: color .15s ease;
    }
    #mainNav .hm-mega-card .hm-kc-link:hover { color: #DE2918; }
    /* Categorie-links donker in beide header-staten */
    #menu-main-menu .hm-mega-card .hm-kc-link,
    .header:not(.is-scrolled) #menu-main-menu .hm-mega-card .hm-kc-link { color: #2C2C2A !important; }
    #menu-main-menu .hm-mega-card .hm-kc-link:hover,
    .header:not(.is-scrolled) #menu-main-menu .hm-mega-card .hm-kc-link:hover { color: #DE2918 !important; }

    /* Rechterkolom A: uitgelicht artikel (Kenniscentrum) */
    .hm-mega-feat { position: relative; width: 300px; padding: 24px 28px; }
    .hm-mega-feat::before {
        content: ""; position: absolute;
        left: 0; top: 24px; bottom: 24px;
        width: 1px; background: #F0E8DB;
    }
    .hm-mega-feat-img {
        display: block; width: 100%; height: 104px;
        object-fit: cover; margin-bottom: 11px; background: #7A2818;
    }
    .hm-mega-feat-tag {
        display: block; margin-bottom: 5px;
        font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 600;
        letter-spacing: .5px; text-transform: uppercase; color: #DE2918;
    }
    .hm-mega-feat-title {
        margin: 0 0 9px;
        font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600;
        line-height: 1.18; color: #2C2C2A;
    }
    #mainNav .hm-mega-card .hm-mega-feat-more,
    #menu-main-menu .hm-mega-card .hm-mega-feat-more,
    #menu-main-menu .hm-mega-card .hm-mega-feat-more:hover,
    .header:not(.is-scrolled) #menu-main-menu .hm-mega-card .hm-mega-feat-more,
    .header:not(.is-scrolled) #menu-main-menu .hm-mega-card .hm-mega-feat-more:hover {
        display: inline-block;
        margin: 0 !important; padding: 0 !important; text-indent: 0 !important;
        font-family: 'Roboto', sans-serif; font-size: 11px !important; font-weight: 600;
        color: #DE2918 !important; text-decoration: none;
    }
    #mainNav .hm-mega-card .hm-mega-feat-more:hover { text-decoration: underline; }

    /* Rechterkolom B: conversiepaneel (Diensten) */
    .hm-mega-card .hm-mega-cta {
        width: 280px;
        background: #7A2818;
        padding: 24px 26px;
        display: flex; flex-direction: column; justify-content: center;
    }
    .hm-mega-cta-eyebrow {
        margin-bottom: 8px;
        font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 600;
        letter-spacing: 1px; text-transform: uppercase; color: #FCC3BD;
    }
    .hm-mega-cta-title {
        margin: 0 0 9px;
        font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600;
        line-height: 1.2; color: #fff;
    }
    .hm-mega-cta-text {
        margin: 0 0 16px;
        font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
    }
    #mainNav .hm-mega-card .hm-mega-cta-btn {
        align-self: flex-start;
        margin: 0 !important;
        padding: 8px 16px !important;
        text-indent: 0 !important;
        border-radius: 7px;
        font-family: 'Roboto', sans-serif;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #fff !important;
        background: #DE2918 !important;
        border: 2px solid #DE2918 !important;
        text-decoration: none !important;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    #mainNav .hm-mega-card .hm-mega-cta-btn:hover {
        background: transparent !important;
        color: #fff !important;
        border-color: #fff !important;
    }
}


/* =========================================================================
   10. MOBIEL  (<= 1204px)  — driedeling + drawer-activatie
   Eén grens. Hier wordt het desktopmenu verborgen en de mobiele
   header (burger | logo | telefoon) ingeschakeld.
   ========================================================================= */
@media (max-width: 1204px) {

    /* --- Desktopmenu's verbergen (ID wint van Bootstrap .d-lg-flex !important) --- */
    ul#menu-main-menu { display: none !important; }
    ul#mega-menu-header-menu { display: none !important; }
    #header .main-menu { display: none !important; }

    /* Custom mega-dropdown nooit tonen op mobiel */
    .hm-mega-panel { display: none !important; }

    /* Losse contactblok dat over de hero viel — uit (drawer heeft eigen contact) */
    .mobilecontainer { display: none !important; }

    /* Plugin-hamburger verbergen — wij gebruiken onze eigen .hm-burger */
    button#rmp_menu_trigger-2659.rmp_menu_trigger { display: none !important; }

    /* Inner als 3-deling: burger links | logo midden | telefoon rechts */
    .hm-hdr-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 18px 20px !important;
    }
    .hm-burger {
        display: inline-flex !important;
        order: 1;
        flex: 1 1 0;
        align-items: flex-start !important;
    }
    .hm-hdr-left {
        order: 2;
        flex: 0 0 auto !important;
        gap: 0 !important;
        justify-content: center !important;
    }
    .hm-phone-mobile {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        order: 3;
        flex: 1 1 0;
        padding-right: 0 !important;
    }
    .hm-phone-mobile .hm-phone-label { align-self: flex-end !important; }
    .hm-phone-mobile i { align-self: flex-end !important; margin-right: 8px; }

    /* Desktop-rechterblok (telefoon + CTA) verbergen op mobiel */
    .hm-hdr-right { display: none !important; }


	input#is-search-input-2165 { padding: 0 5%; }


    body:not(.hm-scrolled) .hm-burger-lines span { background-color: #ffffff; }
    body:not(.hm-scrolled) .hm-burger-label,
    body:not(.hm-scrolled) .hm-phone-mobile,
    body:not(.hm-scrolled) .hm-phone-label { color: #ffffff; }

    body.hm-scrolled .hm-burger-lines span { background-color: #333333; }
    body.hm-scrolled .hm-burger-label,
    body.hm-scrolled .hm-phone-mobile,
    body.hm-scrolled .hm-phone-label { color: #333333; }
}


/* =========================================================================
   11. RMP-DRAWER  (#rmp-container-2659) — schone variant (wit + rode accenten)
   ========================================================================= */

#rmp-container-2659 { z-index: 999999 !important; }


#rmp-container-2659 {
    background: #ffffff !important;
    min-width: 100vw;
    min-height: 100vh;
}


.hm-drawer-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #333333;
    cursor: pointer;
    z-index: 10;
    transition: color .2s ease;
    pointer-events: auto;
}
.hm-drawer-close * { pointer-events: none; }
.hm-drawer-close:hover { color: #DE2918; }

#rmp-container-2659 .rmp-menu { padding: 48px 0 8px !important; }

/* Hoofd-items */
#rmp-container-2659 .rmp-menu > .rmp-menu-item {
    position: relative;
    border-bottom: 1px solid #ECECEC;
    border-left: 4px solid transparent;
    transition: background .2s ease, border-color .2s ease;
}
#rmp-container-2659 .rmp-menu > .rmp-menu-item:last-child { border-bottom: none; }
#rmp-container-2659 .rmp-menu > .rmp-menu-item > a {
    display: block !important;
    padding: 18px 24px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2C2C2A !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    height: auto !important;
    transition: color .2s ease !important;
}

#rmp-container-2659 .rmp-menu > .rmp-menu-item > .rmp-menu-item-link {
    font-size: 16px !important;
}
#rmp-container-2659 .rmp-submenu .rmp-menu-item-link {
    font-size: 14px !important;
}

/* Submenu-items (ingesprongen, subtieler) */
#rmp-container-2659 .rmp-submenu .rmp-menu-item { border: none !important; }
#rmp-container-2659 .rmp-submenu .rmp-menu-item > a {
    display: block !important;
    padding: 11px 24px 11px 40px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #5F5E5A !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    height: auto !important;
    transition: color .2s ease !important;
}
#rmp-container-2659 .rmp-submenu .rmp-menu-item > a:hover { color: #DE2918 !important; }

/* Uitklap-pijltje: vult volledige itemhoogte, pijl gecentreerd */
#rmp-container-2659 .rmp-menu > .rmp-menu-item .rmp-menu-subarrow {
    position: absolute !important;
    top: 0 !important;
    right: 24px !important;
    height: 100% !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#rmp-menu-wrap-2659 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hm-drawer-contact {
    margin-top: 50px;
    padding: 0 24px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: 'Roboto', sans-serif;
}

.hm-drawer-contact .hm-dc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none !important;
}
.hm-drawer-contact .hm-dc-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #DE2918;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-drawer-contact .hm-dc-icon svg { width: 13px; height: 13px; color: #fff; }
.hm-drawer-contact .hm-dc-text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    color: #5F5E5A;
    font-size: 14px;
    padding-top: 1px;
}
.hm-drawer-contact .hm-dc-text strong {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #2C2C2A;
    letter-spacing: .3px;
}
.hm-drawer-contact a.hm-dc-item .hm-dc-text { color: #DE2918; }
.hm-drawer-contact .hm-dc-socials { display: flex; gap: 12px; margin-top: 4px; }
.hm-drawer-contact .hm-dc-socials a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F3EDE4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.hm-drawer-contact .hm-dc-socials svg { width: 15px; height: 15px; color: #DE2918; }
.hm-drawer-contact .hm-dc-socials a:hover { background: #DE2918; }
.hm-drawer-contact .hm-dc-socials a:hover svg { color: #fff; }


#rmp-container-2659 .rmp-menu > .rmp-menu-item.current-menu-item,
#rmp-container-2659 .rmp-menu > .rmp-menu-item.current-menu-ancestor {
    background: #FCEEEC;
    border-left-color: #DE2918;
}
#rmp-container-2659 .rmp-menu > .rmp-menu-item.current-menu-item > a,
#rmp-container-2659 .rmp-menu > .rmp-menu-item.current-menu-ancestor > a {
    color: #DE2918 !important;
}

#rmp-container-2659 .rmp-submenu .rmp-menu-item.current-menu-item > a {
    color: #DE2918 !important;
    font-weight: 600 !important;
}

#rmp_menu_trigger-2659 .responsive-menu-pro-inner,
#rmp_menu_trigger-2659 .responsive-menu-pro-inner::before,
#rmp_menu_trigger-2659 .responsive-menu-pro-inner::after { background-color: #ffffff; }
#rmp_menu_trigger-2659:not(.is-active):hover .responsive-menu-pro-inner,
#rmp_menu_trigger-2659:not(.is-active):hover .responsive-menu-pro-inner::before,
#rmp_menu_trigger-2659:not(.is-active):hover .responsive-menu-pro-inner::after { background-color: #ffffff !important; }

html.rmp-menu-open,
html.rmp-menu-open body {
    overflow: hidden !important;
    height: 100% !important;
}
#rmp-container-2659 {
    overflow-y: auto;
    max-height: 100vh;
    overscroll-behavior: contain;
}

#rmp-container-2659 {
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
#rmp-menu-wrap-2659 {
    min-height: 100%;
}

/* ============================================================
   JURIDISCHE / TEKSTPAGINA — herbruikbaar
   (privacy, algemene voorwaarden, cookiebeleid, enz.)
   ============================================================ */
.hm-legal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 15px;           /* zijkant 15px op desktop */
    font-family: 'Roboto', sans-serif;
    color: #5F5E5A;
}
.hm-legal > *:first-child { margin-top: 0 !important; }
.hm-legal h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #2C2C2A;
    margin: 48px 0 16px !important;   /* thema forceert anders een marge bovenaan de h2 */
    text-transform: none;
}
.hm-legal p {
    font-size: 15.5px;
    line-height: 1.8;
    margin: 0 0 16px;
}
.hm-legal ul,
.hm-legal ol {
    margin: 0 0 16px;
    padding-left: 22px;
}
.hm-legal li {
    font-size: 15.5px;
    line-height: 1.8;
    margin-bottom: 10px;
}
.hm-legal li::marker { color: #DE2918; font-weight: 600; }
.hm-legal strong,
.hm-legal b { color: #2C2C2A; font-weight: 700; }
.hm-legal a {
    color: #DE2918;
    text-decoration: none;
    font-weight: 600;
    word-break: break-word;
}
.hm-legal a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .hm-legal { padding: 50px 25px; }   /* zijkant 25px op mobiel */
    .hm-legal h2 { font-size: 24px; margin-top: 38px !important; }
}

/* ============================================================
   TEKSTPAGINA — subkoppen (h3) binnen hm-legal
   (voor o.a. de moederpagina: dienstnamen + FAQ-vragen)
   ============================================================ */
.hm-legal h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: #2C2C2A;
    margin: 28px 0 12px !important;
    text-transform: none;
}

@media (max-width: 768px) {
    .hm-legal h3 {
        font-size: 19px;
    }
}

/* ---- Basis ---- */
.hm-legal #cmplz-document {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.8;
    color: #5F5E5A;
}
.hm-legal #cmplz-document p { margin: 0 0 16px; line-height: 1.8; color: #5F5E5A; }
.hm-legal #cmplz-document > p:first-child i { color: #888780; font-size: 14px; }
.hm-legal #cmplz-document a { color: #DE2918; font-weight: 600; text-decoration: none; word-break: break-word; }
.hm-legal #cmplz-document a:hover { text-decoration: underline; }
.hm-legal #cmplz-document strong { color: #2C2C2A; }
.hm-legal #cmplz-document summary { list-style: none; }
.hm-legal #cmplz-document summary::-webkit-details-marker { display: none; }

/* ---- Koppen ---- */
.hm-legal #cmplz-document h2 {
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 28px;
    line-height: 1.2; letter-spacing: -0.3px; color: #2C2C2A;
    margin: 48px 0 16px !important; text-transform: none;
}
.hm-legal #cmplz-document h3 {
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 21px;
    line-height: 1.25; letter-spacing: -0.2px; color: #2C2C2A;
    margin: 28px 0 12px !important; text-transform: none;
}
.hm-legal #cmplz-document h4 {
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 14px;
    color: #2C2C2A; margin: 0 0 6px !important; text-transform: none;
}


.hm-legal #cmplz-document ul { margin: 0 0 16px; padding-left: 22px; }
.hm-legal #cmplz-document li { margin-bottom: 10px; line-height: 1.7; }
.hm-legal #cmplz-document li::marker { color: #DE2918; }


.hm-legal #cmplz-document .cmplz-dropdown {
    background: #fff !important;
    border: 1px solid #EAE3D7 !important;
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.hm-legal #cmplz-document .cmplz-service-header,
.hm-legal #cmplz-document .cmplz-service-header > div,
.hm-legal #cmplz-document .cmplz-dropdown[open] .cmplz-service-header { background: #fff !important; }
.hm-legal #cmplz-document .cmplz-service-header { cursor: pointer; list-style: none; padding: 0; }
.hm-legal #cmplz-document .cmplz-service-header::-webkit-details-marker { display: none; }
.hm-legal #cmplz-document .cmplz-service-header > div {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 18px 52px 18px 22px;   
}
.hm-legal #cmplz-document .cmplz-service-header h3 { margin: 0 !important; font-size: 18px; line-height: 1.2; }
.hm-legal #cmplz-document .cmplz-service-header p {
    margin: 0 !important;
    margin-left: auto !important;   
    font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    color: #DE2918; background: #FCEAE7; padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}

/* === Cookietabel === */
.hm-legal #cmplz-document .cmplz-dropdown .cookies-per-purpose {
    width: auto !important;
    margin: 0 20px 20px !important;      
    background: #fff !important;
    background-color: #fff !important;
    gap: 0 !important;
    font-size: 13px !important;     
}


.hm-legal #cmplz-document .cmplz-dropdown .cookies-per-purpose .purpose {
    background: #fff !important;
    background-color: #fff !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #EAE3D7 !important;
}
.hm-legal #cmplz-document .cmplz-dropdown .cookies-per-purpose .purpose h4 {
    margin: 0 !important;
    padding: 12px 14px !important;
    background: none !important;
    color: #2C2C2A !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;   
}

.hm-legal #cmplz-document .name-header,
.hm-legal #cmplz-document .retention-header,
.hm-legal #cmplz-document .function-header {
    background: #F2F2F2 !important;
    color: #2C2C2A !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #E6E6E6 !important;
}

/* cellen */
.hm-legal #cmplz-document .name,
.hm-legal #cmplz-document .retention,
.hm-legal #cmplz-document .function {
    background: #fff !important;
    color: #5F5E5A !important;
    font-size: 13px !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #EDEDED !important;
    word-break: break-word;
}

/* ---- Toestemmingscategorieën (7.1) ---- */
.hm-legal #cmplz-document .cmplz-categories { margin: 12px 0 16px; }
.hm-legal #cmplz-document .cmplz-category {
    background: #fff !important;
    border: 1px solid #EAE3D7 !important;
    border-radius: 7px !important;
    margin-bottom: 10px !important;
    overflow: hidden;
}
.hm-legal #cmplz-document .cmplz-category > summary { background: #fff !important; padding: 16px 20px !important; cursor: pointer; }
.hm-legal #cmplz-document .cmplz-category-title {
    font-family: 'Oswald', sans-serif !important; font-weight: 600 !important; font-size: 18px !important; color: #2C2C2A !important;
}
.hm-legal #cmplz-document .cmplz-description { background: #fff !important; padding: 4px 20px 18px !important; }
.hm-legal #cmplz-document .cmplz-description span {
    color: #5F5E5A !important; font-size: 14px; line-height: 1.7; font-family: 'Roboto', sans-serif !important;
}
.hm-legal #cmplz-document .cmplz-consent-checkbox { accent-color: #DE2918; }   /* vinkjes rood i.p.v. blauw */
.hm-legal #cmplz-document .cmplz-always-active { color: #5F5E5A !important; font-weight: 600; }

/* ---- E-mail spam-afscherming intact houden ---- */
.hm-legal #cmplz-document .cmplz-fmail-domain { display: none; }

.hm-legal #cmplz-document .cmplz-category summary,
.hm-legal #cmplz-document .cmplz-category .cmplz-category-header { background: #fff !important; }

@media (max-width: 768px) {
    .hm-legal #cmplz-document { padding: 0 25px; }
    .hm-legal #cmplz-document h2 { font-size: 24px; }
    .hm-legal #cmplz-document h3 { font-size: 19px; }
}


.hm-stad-svc {
    background: #FBF6EE;
    box-shadow: 0 0 0 100vmax #FBF6EE;
    clip-path: inset(0 -100vmax);
    padding: 90px 0;
    font-family: 'Roboto', sans-serif;
}
.hm-stad-svc-inner { max-width: 1200px; margin: 0 auto; padding: 0 10px; }
.hm-stad-svc-head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.hm-stad-svc-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; color: #DE2918; margin-bottom: 12px;
}
.hm-stad-svc-title {
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 40px;
    line-height: 1.1; letter-spacing: -0.5px; color: #2C2C2A; margin: 0 0 16px;
}
.hm-stad-svc-sub { font-size: 15px; line-height: 1.7; color: #5F5E5A; margin: 0; }
.hm-stad-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hm-stad-svc-card {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #EAE3D7; border-radius: 10px;
    padding: 34px 30px 32px; overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.hm-stad-svc-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: #DE2918; transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.hm-stad-svc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(122,40,24,.1); }
.hm-stad-svc-card:hover::before { transform: scaleX(1); }
.hm-stad-svc-icon {
    width: 52px; height: 52px; border-radius: 12px; background: #FCEAE7; color: #DE2918;
    display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.hm-stad-svc-icon svg { width: 26px; height: 26px; }
.hm-stad-svc-card h3 {
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px;
    letter-spacing: -.3px; color: #2C2C2A; margin: 0 0 12px;
}
.hm-stad-svc-card p { font-size: 14.5px; line-height: 1.7; color: #5F5E5A; margin: 0 0 22px; flex-grow: 1; }
.hm-stad-svc-link {
    display: inline-flex; align-items: center; gap: 8px; color: #DE2918;
    font-size: 14.5px; font-weight: 600; text-decoration: none; transition: gap .2s;
}
.hm-stad-svc-link:hover { gap: 12px; }
.hm-stad-svc-link svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
	.hm-stad-svc-inner { padding: 0 20px; }
    .hm-stad-svc { padding: 60px 0; }
    .hm-stad-svc-grid { grid-template-columns: 1fr; }
    .hm-stad-svc-title { font-size: 30px; }
}
.hm-stad-svc-foot {
    text-align: center;
}
.hm-stad-svc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 44px;
    padding: 9px 22px;
    background: #DE2918;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid #DE2918;
    border-radius: 8px;
    transition: background .2s, color .2s, gap .2s;
}
.hm-stad-svc-btn:hover {
    background: transparent;
    color: #DE2918;
    gap: 12px;
}
.hm-stad-svc-btn svg {
    width: 17px;
    height: 17px;
}
/* ============================================================
   CIJFER-BAND — terracotta, full-width, met H-watermerken
   (prefix hm-stad-stats)
   ============================================================ */
.hm-stad-stats {
    position: relative;
    overflow: hidden;
    background: #7A2818;
    box-shadow: 0 0 0 100vmax #7A2818;
    clip-path: inset(0 -100vmax);
    padding-top: 80px;
    padding-bottom: 80px;
    color: #ffffff;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}
.hm-stad-stats-inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}
.hm-stad-stats-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin: 0 0 12px;
}
.hm-stad-stats-sub {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
    max-width: 560px;
    margin: 0 auto 40px;
}
.hm-stad-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.hm-stad-stat-num {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 46px;
    line-height: 1;
    color: #ffffff;
}
.hm-stad-stat-lab {
    font-size: 13.5px;
    letter-spacing: .5px;
    color: rgba(255,255,255,.82);
    margin-top: 8px;
}
.hm-stad-stats-div {
    height: 1px;
    background: rgba(255,255,255,.18);
    max-width: 1000px;
    margin: 34px auto 0;
}

/* ---- H-watermerken (variant 3 + fade) ---- */
.hm-stad-stats-mark {
    position: absolute;
    background-image: url("https://heatmedia.nl/wp-content/uploads/2026/06/Ontwerp-zonder-titel-1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}
.hm-stad-stats-mark--a {
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 300px;
    opacity: 0.15;
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 45%, transparent 95%);
    mask-image: linear-gradient(to left, #000 0%, #000 45%, transparent 95%);
}
.hm-stad-stats-mark--b {
    left: 24px;
    bottom: 24px;
    width: 190px;
    height: 190px;
    opacity: 0.1;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 95%);
    mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 95%);
}

/* ---- mobiel ---- */
@media (max-width: 720px) {
    .hm-stad-stats {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .hm-stad-stats-title {
        font-size: 28px;
    }
    .hm-stad-stats-row {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .hm-stad-stats-mark {
        display: none;
    }
	.hm-stad-stats-inner {
		padding: 0px 20px;
	}
}
/* ============================================================
   STADSPAGINA — SEO-LIJST (vinkje + term + uitleg)
   ============================================================ */
.hm-stad-seo-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hm-stad-seo-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.hm-stad-seo-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 3px;
    border-radius: 7px;
    background: #DE2918;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-stad-seo-check svg {
    width: 14px;
    height: 14px;
}
.hm-stad-seo-text {
    font-size: 15px;
    line-height: 1.7;
    color: #5F5E5A;
}
.hm-stad-seo-text b {
    color: #2C2C2A;
    font-weight: 600;
}

/* ============================================================
   BLOG — blockquote in huisstijl (overschrijft thema)
   ============================================================ */
.wp-block-quote.wp-block-quote {
    max-width: 760px;
    margin: 36px auto;
    padding: 30px 40px 34px;
    background: #FBF6EE !important;
    background-color: #FBF6EE !important;
    border: 0 !important;
    border-radius: 12px;
}
.wp-block-quote.wp-block-quote::before {
    content: '\201C';
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 0.7;
    color: #DE2918;
    margin: 0 0 4px;
}
.wp-block-quote.wp-block-quote p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1.65;
    color: #2C2C2A !important;
}
.wp-block-quote.wp-block-quote p + p {
    margin-top: 14px;
}
.wp-block-quote.wp-block-quote cite,
.wp-block-quote.wp-block-quote .wp-block-quote__citation {
    display: block;
    margin-top: 18px;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #888780;
}

/* uitlijning-varianten van WordPress */
.wp-block-quote.has-text-align-center {
    text-align: center;
}
.wp-block-quote.has-text-align-right {
    text-align: right;
}

@media (max-width: 768px) {
    .wp-block-quote.wp-block-quote {
        padding: 26px 24px 28px;
    }
    .wp-block-quote.wp-block-quote::before {
        font-size: 46px;
    }
    .wp-block-quote.wp-block-quote p {
        font-size: 17px;
    }
}

/* ============================================================
   TEKSTPAGINA — knop binnen hm-legal (bijv. PDF-link)
   ============================================================ */
.hm-legal .hm-legal-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 8px 0 24px;
    background: #DE2918;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 9px 22px;
    border: 2px solid #DE2918;
    border-radius: 7px;
    transition: background 0.2s, color 0.2s, gap 0.2s;
}
.hm-legal .hm-legal-btn:hover {
    background: transparent;
    color: #DE2918;
    gap: 13px;
    text-decoration: none;
}
.hm-legal .hm-legal-btn svg {
    width: 17px;
    height: 17px;
}

/* ============================================================
   DEVICE MOCKUP — screenshot achter transparant laptop-frame
   ============================================================ */
.hm-mockup {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
.hm-mockup-frame {
    position: relative;
    width: 100%;
    display: block;
    z-index: 2;
    pointer-events: none;
}
.hm-mockup-screen {
    position: absolute;
    left: 11.81%;
    top: 13.23%;
    width: 76.31%;
    height: 78.48%;
    object-fit: cover;
    z-index: 1;
}


/* ===== Sectie ===== */
#hm-crew {
    background: #ffffff;
    padding: 90px 0;
    font-family: 'Roboto', sans-serif;
}

#hm-crew .crew-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ===== Kop ===== */
#hm-crew .crew-head {
    max-width: 600px;
    margin: 0 auto 48px;
    text-align: center;
}

#hm-crew .crew-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
}

#hm-crew .crew-title {
    margin: 0 0 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #2C2C2A;
    text-transform: none;
}

#hm-crew .crew-sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #5F5E5A;
}

/* ===== Grid ===== */
#hm-crew .crew-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ===== Kaart ===== */
#hm-crew .crew-card {
    background: #ffffff;
    border: 1px solid #ECE6DC;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#hm-crew .crew-card:hover {
    transform: translateY(-5px);
    border-color: #DE2918;
    box-shadow: 0 18px 40px rgba(122, 40, 24, 0.10);
}

/* ===== Foto ===== */
#hm-crew .crew-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #FBF6EE;
}

#hm-crew .crew-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.2);
    transition: transform 0.5s ease, filter 0.4s ease;
}

#hm-crew .crew-card:hover .crew-photo img {
    transform: scale(1.05);
    filter: grayscale(0);
}

/* rode lijn die onder de foto opkomt bij hover */
#hm-crew .crew-photo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #DE2918;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

#hm-crew .crew-card:hover .crew-photo::after {
    transform: scaleX(1);
}

/* ===== Tekst ===== */
#hm-crew .crew-body {
    padding: 24px 26px 26px;
}

#hm-crew .crew-name {
    margin: 0 0 3px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.3px;
    color: #2C2C2A;
    text-transform: none;
}

#hm-crew .crew-role {
    display: block;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #DE2918;
}

#hm-crew .crew-skill {
    margin: 0 0 18px;
    padding-top: 16px;
    border-top: 1px solid #ECE6DC;
    font-size: 14px;
    font-style: italic;
    line-height: 1.6;
    color: #5F5E5A;
}

#hm-crew .crew-mail {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #DE2918;
    text-decoration: none;
    transition: color 0.2s ease;
}

#hm-crew .crew-mail:hover {
    color: #B92516;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===== Tablet ===== */
@media (max-width: 860px) {
    #hm-crew {
        padding: 60px 0;
    }
    #hm-crew .crew-title {
        font-size: 32px;
    }
    #hm-crew .crew-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
}

/* Heatmedia 3D laptop in de feature-sectie — voeg toe aan je child-theme style.css */
.hm-ga-feature-visual .hm-laptop3d {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;     /* hoogte volgt de breedte van de kolom */
    min-height: 300px;       /* fallback voor oudere browsers */
    margin: 0;
}
.hm-laptop3d__canvas {
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 768px) {
    .hm-ga-feature-visual .hm-laptop3d { aspect-ratio: 16 / 11; min-height: 260px; }
}


/* ============ WAAROM HEATMEDIA — CHECKLIST ============ */
.hm-why-list {
    list-style: none;
    margin: 22px 0 26px;
    padding: 0;
}
.hm-why-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #2C2C2A;
    margin-bottom: 12px;
}
.hm-why-list li:last-child {
    margin-bottom: 0;
}
.hm-why-list li i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(222, 41, 24, 0.10);
    color: #DE2918;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

/* ============ AANPAK / HOE WIJ WERKEN ============ */
.hm-approach {
    background: #F5F3F0;
    padding: 90px 24px;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.hm-approach-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
.hm-approach-head {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}
.hm-approach-eyebrow {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 14px;
}
.hm-approach-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #2C2C2A;
    margin: 0 0 16px;
}
.hm-approach-intro {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #5F5E5A;
    margin: 0;
}
.hm-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
}
/* Verbindende lijn achter de nummers */
.hm-approach-grid::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: rgba(222, 41, 24, 0.20);
    z-index: 0;
}
.hm-approach-step {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    padding: 0 16px;
    text-align: center;
}
.hm-approach-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #DE2918;
    border: 4px solid #F5F3F0;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #ffffff;
    margin: 0 auto 20px;
}
.hm-approach-step-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 19px;
    color: #2C2C2A;
    margin: 0 0 10px;
}
.hm-approach-step-text {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    color: #5F5E5A;
    margin: 0;
}
@media (max-width: 1024px) {
    .hm-approach-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 22px;
    }
    .hm-approach-grid::before {
        display: none;
    }
    .hm-approach-title {
        font-size: 32px;
    }
}
@media (max-width: 600px) {
    .hm-approach {
        padding: 60px 16px;
    }
    .hm-approach-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ WERKNEMERS ============ */
.hm-werknemers {
    background: #ffffff;
    padding: 90px 0;
}
.hm-werknemers-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
}
.hm-werknemers-eyebrow {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #DE2918;
    margin-bottom: 14px;
}
.hm-werknemers-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    letter-spacing: -0.5px;
    color: #2C2C2A;
    margin: 0 0 16px;
    line-height: 1.15;
}
.hm-werknemers-intro {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #5F5E5A;
    max-width: 620px;
    margin: 0 auto 56px;
}
.hm-werknemers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}
.hm-werknemers-card {
    text-align: center;
}
.hm-werknemers-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 22px;
    background: #F5F3F0;
}
.hm-werknemers-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top;
    display: block;
    transition: transform 0.55s ease;
}
.hm-werknemers-card:hover .hm-werknemers-photo img {
    transform: scale(1.05);
}
.hm-werknemers-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 21px;
    color: #2C2C2A;
    margin: 0 0 6px;
}
.hm-werknemers-role {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #DE2918;
    margin-bottom: 12px;
}
.hm-werknemers-mail {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #5F5E5A;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.hm-werknemers-mail:hover {
    color: #DE2918;
    border-bottom-color: #DE2918;
}

/* CTA-kaart (vierde tegel: 'heb je een vraag aan de rest van het team?') */
.hm-werknemers-card--cta {
    text-decoration: none;
    display: block;
}
.hm-werknemers-photo--cta {
    background: linear-gradient(150deg, #7A2818 0%, #5A1B0F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    margin-bottom: 0;
    transition: transform 0.55s ease, box-shadow 0.3s ease;
}
.hm-werknemers-card--cta:hover .hm-werknemers-photo--cta {
    transform: scale(1.03);
    box-shadow: 0 16px 34px rgba(122, 40, 24, 0.30);
}
.hm-werknemers-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}
.hm-werknemers-cta-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.hm-werknemers-cta-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    color: #ffffff;
}
.hm-werknemers-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #7A2818;
    background: #ffffff;
    padding: 9px 18px;
    border-radius: 7px;
    transition: gap 0.2s ease;
}
.hm-werknemers-card--cta:hover .hm-werknemers-cta-btn {
    gap: 11px;
}

@media (max-width: 1100px) {
    .hm-werknemers-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
        margin: 0 auto;
    }
}
@media (max-width: 900px) {
    .hm-werknemers-title {
        font-size: 32px;
    }
}
@media (max-width: 560px) {
    .hm-werknemers-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
    }
}

/* Werknemers-sectie: Elementor-container-padding neutraliseren,
   zodat de zijruimte exact de 15px van .hm-werknemers-inner is */
.elementor-element-26f35c2,
.elementor-element-26f35c2 > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   GOOGLE ADS — ZOEK/ADVERTENTIE-ANIMATIE (.hm-sad)
   Zit in de hm-ga-feature-visual, i.p.v. de afbeelding.
   Fonts (Oswald + Roboto) worden al site-breed geladen.
   ============================================================ */

.hm-sad {
    --red: #DE2918;
    --ink: #1d1b1a;
    --grey: #8a8781;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', system-ui, sans-serif;
}

.hm-sad * {
    box-sizing: border-box;
}

.hm-sad-stage {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== Zoekbalk ===== */
.hm-sad-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1.5px solid #e6e2dc;
    border-radius: 14px;
    padding: 15px 16px 15px 20px;
    box-shadow: 0 16px 40px rgba(40, 20, 12, .10);
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .5s ease, transform .5s ease;
}

.hm-sad.is-bar .hm-sad-bar {
    opacity: 1;
    transform: none;
}

.hm-sad.is-enter .hm-sad-bar {
    animation: hm-pulse .35s ease;
}

.hm-sad-bar > svg {
    width: 20px;
    height: 20px;
    stroke: var(--red);
    flex: none;
}

.hm-sad-qbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1;
}

.hm-sad-ghost {
    visibility: hidden;
    white-space: nowrap;
    font-size: 16px;
}

.hm-sad-live {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.hm-sad-q {
    font-size: 16px;
    color: var(--ink);
}

.hm-sad-caret {
    width: 2px;
    height: 19px;
    background: var(--red);
    margin-left: 1px;
    animation: hm-caret .8s steps(1) infinite;
}

.hm-sad.is-loading .hm-sad-caret,
.hm-sad.is-content .hm-sad-caret {
    opacity: 0;
    animation: none;
}

.hm-sad-go {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease;
}

.hm-sad.is-enter .hm-sad-go {
    transform: scale(.86);
}

.hm-sad-go svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

/* ===== Laadbalk (verschijnt na 'enter', vóór de resultaten) ===== */
.hm-sad-load {
    width: 100%;
    height: 4px;
    margin-top: 16px;
    border-radius: 999px;
    background: #ececea;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease, height .35s ease, margin-top .35s ease;
}

.hm-sad.is-loading .hm-sad-load {
    opacity: 1;
    transform: none;
}

.hm-sad.is-content .hm-sad-load {
    opacity: 0;
    height: 0;
    margin-top: 0;
}

.hm-sad-load::after {
    content: '';
    display: block;
    height: 100%;
    width: 42%;
    border-radius: 999px;
    background: var(--red);
    animation: hm-load 1.05s ease-in-out infinite;
}

/* ===== Resultaten ===== */
.hm-sad-results {
    width: 100%;
    margin-top: 22px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s ease, transform .55s ease;
}

.hm-sad.is-content .hm-sad-results {
    opacity: 1;
    transform: none;
}

/* ===== Advertentie bovenaan ===== */
.hm-sad-ad {
    border: 1px solid #efe9e4;
    border-left: 3px solid var(--red);
    border-radius: 11px;
    background: #fff;
    padding: 13px 15px;
    margin-bottom: 20px;
    box-shadow: 0 10px 26px rgba(222, 41, 24, .12);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .5s ease .12s, transform .5s ease .12s;
}

.hm-sad.is-content .hm-sad-ad {
    opacity: 1;
    transform: none;
}

.hm-sad-ad-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.hm-sad-ad-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red);
    border: 1px solid rgba(222, 41, 24, .35);
    border-radius: 5px;
    padding: 1px 6px;
}

.hm-sad-ad-url {
    font-size: 12px;
    color: var(--grey);
}

.hm-sad-ad-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
    color: var(--ink);
    margin: 2px 0 4px;
}

.hm-sad-ad-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #6c6862;
}

/* ===== Organische resultaten = grijze balkjes ===== */
.hm-sad-row {
    margin-bottom: 20px;
}

.hm-sad-bar-l {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e8e5e0 25%, #f4f2ef 37%, #e8e5e0 63%);
    background-size: 200% 100%;
    animation: hm-shimmer 1.6s linear infinite;
}

.hm-sad-bar-l.t {
    height: 13px;
    width: 62%;
    margin-bottom: 9px;
    background: linear-gradient(90deg, #ded9d3 25%, #ece8e3 37%, #ded9d3 63%);
    background-size: 200% 100%;
}

.hm-sad-bar-l.a {
    width: 96%;
    margin-bottom: 7px;
}

.hm-sad-bar-l.b {
    width: 80%;
}

/* ===== Keyframes ===== */
@keyframes hm-caret {
    50% {
        opacity: 0;
    }
}

@keyframes hm-pulse {
    0% {
        transform: none;
    }
    45% {
        transform: scale(.985);
    }
    100% {
        transform: none;
    }
}

@keyframes hm-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes hm-load {
    0% {
        transform: translateX(-115%);
    }
    100% {
        transform: translateX(255%);
    }
}

/* ===== Mobiel ===== */
@media (max-width: 480px) {
    .hm-sad {
        padding: 16px;
    }
    .hm-sad-ad-title {
        font-size: 15px;
    }
}

/* ===== Toegankelijk: geen beweging -> toon eindbeeld ===== */
@media (prefers-reduced-motion: reduce) {
    .hm-sad-bar,
    .hm-sad-results,
    .hm-sad-ad {
        opacity: 1 !important;
        transform: none !important;
    }
    .hm-sad-load {
        display: none;
    }
    .hm-sad-caret {
        display: none;
    }
    .hm-sad-bar-l {
        animation: none;
    }
}

/* ============ OVER ONS: DIENSTEN-BAND ============ */
.hm-ov-diensten {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    background: #F5F3F0;   /* afstemmen op jullie --grey-tint */
    padding: 72px 0;
    font-family: 'Roboto', sans-serif;
}
.hm-ov-diensten * { box-sizing: border-box; }
.hm-ov-diensten-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
}
.hm-ov-diensten-title {
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #25241f;
    margin: 0 0 10px;
    line-height: 1.2;
}
.hm-ov-diensten-text {
    font-size: 15px;
    line-height: 1.7;
    color: #55524c;
    margin: 0 auto 26px;
    max-width: 560px;
}
.hm-ov-diensten-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 30px;
}
.hm-ov-diensten-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #25241f;
    background: #ffffff;
    border: 1px solid #ece6dc;
    border-radius: 999px;
    padding: 10px 20px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, gap .2s ease;
}
.hm-ov-diensten-pill svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    opacity: 0;
    margin-right: -14px;                 /* pijltje neemt geen ruimte in tot hover */
    transition: opacity .2s ease, margin .2s ease;
}
.hm-ov-diensten-pill:hover {
    background: #DE2918;
    border-color: #DE2918;
    color: #ffffff;
    gap: 10px;
}
.hm-ov-diensten-pill:hover svg {
    opacity: 1;
    margin-right: 0;
}
.hm-ov-diensten-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DE2918;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 9px 22px;
    border-radius: 7px;
    border: 2px solid #DE2918;
    transition: background .2s, color .2s, gap .2s;
}
.hm-ov-diensten-btn:hover { background: transparent; color: #DE2918; gap: 12px; }
.hm-ov-diensten-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 767px) {
    .hm-ov-diensten { padding: 60px 0; }
    .hm-ov-diensten-title { font-size: 26px; }
}

/* ====== SOLLICITEREN / CONTACT — formulier + zijbalk ====== */
.hm-contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: start;
}

/* --- Formulier-box --- */
.hm-form-box {
    padding: 48px 44px;
    background: #FBF6EE;
    border-radius: 7px;
}

.hm-form-box .hm-section-title {
    margin-bottom: 8px;
    text-align: left;
}

.hm-form-box .hm-intro {
    margin-bottom: 28px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #5F5E5A;
}

.hm-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hm-field label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2C2C2A;
}

.hm-field input,
.hm-field select,
.hm-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ECE6DC;
    border-radius: 7px;
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #2C2C2A;
    transition: border-color .2s;
}

.hm-field select {
    padding-right: 36px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F5E5A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hm-field input:focus,
.hm-field select:focus,
.hm-field textarea:focus {
    border-color: #DE2918;
}

.hm-field input::placeholder,
.hm-field textarea::placeholder {
    color: #B0AAA4;
}

.hm-field textarea {
    min-height: 120px;
    line-height: 1.6;
    resize: vertical;
}

.hm-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.hm-form-note {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #5F5E5A;
}

.hm-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    background: #DE2918;
    border: 2px solid #DE2918;
    border-radius: 7px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.hm-btn-submit:hover {
    background: transparent;
    color: #DE2918;
    gap: 12px;
}

/* --- Succes-melding --- */
.hm-success {
    display: none;
    padding: 40px 0;
    text-align: center;
}

.hm-success-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8F5E9;
    border-radius: 50%;
    color: #43A047;
    font-size: 24px;
}

.hm-success h3 {
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #2C2C2A;
}

.hm-success p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #5F5E5A;
}

/* --- Info-blokken --- */
.hm-info-block {
    margin-bottom: 24px;
    padding: 28px;
    background: #fff;
    border: 1px solid #ECE6DC;
    border-radius: 7px;
}

.hm-info-block:last-child {
    margin-bottom: 0;
}

.hm-info-block h4 {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ECE6DC;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2C2C2A;
}

.hm-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hm-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
}

.hm-info-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DE2918;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
}

.hm-info-text {
    display: flex;
    flex-direction: column;
    padding-top: 1px;
    line-height: 1.4;
}

.hm-info-text strong {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #2C2C2A;
}

.hm-info-value {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #5F5E5A;
}

a.hm-info-item .hm-info-value {
    color: #DE2918;
    transition: color .2s;
}

a.hm-info-item:hover .hm-info-value {
    color: #B92516;
}

/* --- Openingstijden --- */
.hm-hours-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 5px 13px;
    background: #E8F5E9;
    border-radius: 20px;
    color: #2E7D32;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.hm-hours-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43A047;
}

.hm-hours-badge.closed {
    background: #FCE4E4;
    color: #C62828;
}

.hm-hours-badge.closed .dot {
    background: #E53935;
}

.hm-hours-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #5F5E5A;
}

.hm-hours-row strong {
    font-size: 15px;
    font-weight: 600;
    color: #2C2C2A;
}

/* --- Social links --- */
.hm-social-links {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.hm-social-link {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3EDE4;
    border-radius: 50%;
    color: #DE2918;
    font-size: 16px;
    text-decoration: none;
    transition: all .2s;
}

.hm-social-link:hover {
    background: #DE2918;
    color: #fff;
    transform: translateY(-2px);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .hm-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hm-form-box {
        padding: 32px 20px;
    }
}

@media (max-width: 600px) {
    .hm-form-row {
        grid-template-columns: 1fr;
    }
    .hm-form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .hm-btn-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ============ WERKEN BIJ: VACATURES ============ */
.hm-wb-vacatures {
    background: #ffffff;
    padding: 90px 0;
    font-family: 'Roboto', sans-serif;
}
.hm-wb-vacatures * { box-sizing: border-box; }
.hm-wb-vacatures-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
.hm-wb-vacatures-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 48px;
}
.hm-wb-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #DE2918;
    display: inline-block;
    margin-bottom: 12px;
}
.hm-wb-title {
    font-family: 'Oswald', sans-serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: #25241f;
    margin: 0 0 14px;
}
.hm-wb-sub {
    font-size: 15px;
    line-height: 1.75;
    color: #55524c;
    margin: 0;
}
.hm-wb-vac-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.hm-wb-vac {
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid #ece6dc;
    border-radius: 12px;
    padding: 28px 28px 24px;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .25s ease;
}
.hm-wb-vac::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #DE2918;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.hm-wb-vac:hover { border-color: #d9cfc0; }
.hm-wb-vac:hover::before { transform: scaleX(1); }
.hm-wb-vac-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #25241f;
    margin: 0 0 10px;
}
.hm-wb-vac-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.hm-wb-vac-tag {
    font-size: 12.5px;
    font-weight: 600;
    color: #7A2818;
    background: rgba(222, 41, 24, 0.07);
    border-radius: 999px;
    padding: 5px 12px;
}
.hm-wb-vac p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #55524c;
    margin: 0 0 16px;
}
.hm-wb-vac-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #DE2918;
    transition: gap .2s ease;
}
.hm-wb-vac:hover .hm-wb-vac-link { gap: 12px; }
.hm-wb-vac-link svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (max-width: 767px) {
    .hm-wb-vacatures { padding: 70px 0; }
    .hm-wb-title { font-size: 30px; }
    .hm-wb-vac-grid { grid-template-columns: 1fr; }
	.hm-wb-vacatures-inner { padding: 0px 20px; }
}


/* ================================================================
   HEATMEDIA — KLANTCASES (GRID) — CSS v2
   Hoort bij "HTML + Javascript Klantcases v2.txt".
   Wijziging t.o.v. v1: ook het uitklappen op mobiel ("Lees meer")
   draait nu via transform + clip-path (GPU) i.p.v. max-height.
   De knop staat daarom vastgepind op de kaart (absolute) en de
   tekst-container schuift, net als bij de desktop-hover.
================================================================ */

/* ============ KLANTCASES (RESULTATEN) ============ */
.hm-results {
    background: #F5F3F0;
    padding: 90px 0px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.hm-results-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
.hm-results-head {
    max-width: 680px;
    margin-bottom: 48px;
}
.hm-results-eyebrow {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #DE2918;
    margin-bottom: 14px;
}
.hm-results-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #2C2C2A;
    margin: 0 0 16px;
}
.hm-results-intro {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #5F5E5A;
    margin: 0;
}
.hm-results-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
}
.hm-results-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}
.hm-result {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    background-color: #5E1E12;
    min-height: 200px;
    box-shadow: 0 10px 30px rgba(122, 40, 24, 0.10);
    transition: box-shadow 0.5s ease;
    /* beperkt reflow/repaint tot de tegel zelf (sneller op drukke pagina's) */
    contain: layout paint;
}
.hm-result--featured {
    min-height: 440px;
}
/* Basis-gradient: terracotta onder -> transparant boven (altijd zichtbaar) */
.hm-result::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(94, 30, 18, 0.92) 0%, rgba(94, 30, 18, 0.55) 38%, rgba(94, 30, 18, 0.05) 75%, rgba(94, 30, 18, 0) 100%);
    pointer-events: none;
}
/* Extra donkere laag die bij hover (desktop) of open (mobiel) soepel infade't */
.hm-result::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top,
        rgba(94, 30, 18, 0.55) 0%,
        rgba(94, 30, 18, 0.55) 45%,
        rgba(94, 30, 18, 0.35) 70%,
        rgba(94, 30, 18, 0.08) 90%,
        rgba(94, 30, 18, 0) 100%);
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}
/* open (mobiel/toetsenbord): zelfde donkere laag als bij hover */
.hm-result.is-open::after {
    opacity: 1;
}
/* Pill linksboven */
.hm-result-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    font-family: 'Roboto', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    padding: 5px 13px;
    border-radius: 20px;
}
.hm-result-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 26px;
    color: #ffffff;
    /* het schuiven gebeurt op ALLE apparaten via JS met transform +
       clip-path — die animeren op de GPU en blijven vloeiend */
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1),
                clip-path 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform, clip-path;
}
@media (prefers-reduced-motion: reduce) {
    .hm-result-body { transition: none; }
    .hm-result::after { transition: none; }
}
.hm-result-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 26px;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
}
.hm-result--featured .hm-result-name {
    font-size: 34px;
}
/* Beschrijving: geclampt op ~2 regels als rust-/no-JS-stand.
   Zodra JS gemeten heeft krijgt de tekst .hm-fluid (volledig in de DOM)
   en regelt de clip van de body wat zichtbaar is. Geen max-height-animatie. */
.hm-result-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 10px 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-height: 3.3em; /* ~2 regels */
}
.hm-result-desc.hm-fluid {
    -webkit-line-clamp: 99;
    line-clamp: 99;
    max-height: none;
}

/* ===== "Lees meer"-knop: vastgepind op de kaart (schuift niet mee) ===== */
.hm-result-more {
    position: absolute;
    left: 26px;
    bottom: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hm-result-more::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s ease;
}
.hm-result.is-open .hm-result-more::after {
    transform: rotate(225deg) translateY(-2px);
}

/* DESKTOP (muis): schaduw + donkere laag; de knop is hier overbodig
   want uitklappen gebeurt op hover. */
@media (hover: hover) and (pointer: fine) {
    .hm-result:hover {
        box-shadow: 0 22px 50px rgba(122, 40, 24, 0.22);
    }
    .hm-result:hover::after {
        opacity: 1;
    }
    .hm-result-more { display: none !important; }
}

/* ===== Tablet en mobiel: één kolom, alles volle breedte ===== */
@media (max-width: 860px) {
    .hm-results {
        padding: 60px 20px;
    }
    .hm-results-inner {
        padding: 0;
    }
    .hm-results-head {
        margin-bottom: 32px;
    }
    .hm-results-title {
        font-size: 32px;
    }

    /* grid en zijkolom worden één stapel */
    .hm-results-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .hm-results-side {
        grid-template-rows: none;
        gap: 16px;
    }

    /* kaarthoogtes: featured blijft herkenbaar groter */
    .hm-result--featured {
        min-height: 420px;
    }
    .hm-results-side .hm-result {
        min-height: 300px;
    }

    /* teksten krijgen weer normale ruimte */
    .hm-result-body {
        padding: 20px 18px;
    }
    .hm-result-name {
        font-size: 24px;
    }
    .hm-result--featured .hm-result-name {
        font-size: 28px;
    }
    .hm-result-tag {
        top: 14px;
        left: 14px;
        font-size: 11px;
        /* lange tags ("Sportvoeding · SEO + Shopping") netjes laten wrappen */
        max-width: calc(100% - 28px);
        line-height: 1.5;
    }
    .hm-result-more {
        left: 18px;
        bottom: 16px;
    }
}

/* ===== Touch-apparaten: ruimte onderin de body reserveren voor de
   vastgepinde knop, zodat uitgeklapte tekst er nooit achter valt.
   (Na de 860px-regels laten staan; die zetten padding via shorthand.)
   Kaarten zonder uitklapbare tekst krijgen via JS .hm-no-more en
   verliezen de reservering, zodat de tekst daar dicht op de
   onderkant zit. ===== */
@media (hover: none), (pointer: coarse) {
    .hm-result-body {
        padding-bottom: 44px;
    }
    .hm-result.hm-no-more .hm-result-body {
        padding-bottom: 20px;
    }
}

.e-atomic-element.e-flexbox-base {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section.page > .container {
    padding-top: 0 !important;
}

section.page > .container > .row > .col-12 {
    padding-left: 0;
    padding-right: 0;
}

body.page-id-2961 .hm-dienst-hero {
    margin-top: -110px;
}
/* =========================================================================
   Reconstructie-aanvullingen (Heatmedia standalone)
   Klassen die in Elementor's global kit zaten en niet in de HTML-blokken.
   ========================================================================= */

/* Review-carousel pijlen (diensten, service-pagina's) */
.hm-ga-rev-prev,
.hm-ga-rev-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ece6dc;
    background: #fff;
    color: #de2918;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.hm-ga-rev-prev:hover,
.hm-ga-rev-next:hover {
    background: #de2918;
    color: #fff;
}

/* Diensten hero */
.hm-dienst-hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: #2c2c2a;
    margin: 0 0 16px;
}
.hm-dienst-hero-text {
    font-size: 1.1rem;
    color: #5f5e5a;
    line-height: 1.6;
}
@media (max-width: 640px) {
    .hm-dienst-hero-title { font-size: 1.9rem; }
}

/* Feature-varianten */
.hm-ga-feature--gradient {
    background: linear-gradient(135deg, #de2918 0%, #7a2818 100%);
    color: #fff;
}
.hm-ga-feature--cream {
    background: #fbf6ee;
}

/* Contact: adres-item variant */
.hm-info-item--address {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* =========================================================================
   Header + Footer layout (standalone vervanging Naxos/Bootstrap)
   De horizontale menu-layout en de footer-kolommen kwamen uit de Naxos-parent
   en Bootstrap. Hieronder de gerichte vervanging, zonder de volledige
   Bootstrap-bibliotheek.
   ========================================================================= */

/* --- Bootstrap-utility fallbacks (alleen wat header/footer gebruiken) --- */
.container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.list-unstyled { list-style: none; padding-left: 0; margin: 0; }
@media (min-width: 992px) {
    .d-lg-flex { display: flex !important; }
    .d-lg-none { display: none !important; }
}

/* --- Hoofdmenu --- */
.nav-menu { list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; list-style: none; }
.nav-menu li a::before { display: none !important; }

/* Horizontaal alleen op desktop; in de mobiele drawer blijft het verticaal */
@media (min-width: 992px) {
    .nav-menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px;
    }
}

/* Onderliggende submenu's (dropdown) */
.nav-menu li .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 999;
}
.nav-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu li .sub-menu li { display: block; }
.nav-menu li .sub-menu li a { display: block; padding: 8px 18px !important; white-space: nowrap; }

/* Mobiel contactblok in het menu nooit op desktop tonen */
.nav-menu .mobilecontainer { display: none !important; }

/* --- Footer kolommen --- */
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 10px; }
.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 70px 0 50px;
}
.footercol { flex: 1 1 200px; min-width: 180px; }
.footercol .footer-area { margin-bottom: 22px; }
.footercol h2, .footercol h3, .footercol h4, .footercol .widget-title,
.footercol .widgettitle {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    margin: 0 0 18px;
}
.footercol ul { list-style: none; padding: 0; margin: 0; }
.footercol li { margin-bottom: 11px; line-height: 1.4; }
.footercol a { color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s; }
.footercol a:hover { color: #fff; }
.footercol p { color: rgba(255,255,255,.82); margin: 0 0 12px; }
.footercol i { color: #de2918; margin-right: 8px; }

/* Footer onderbalk */
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footerend {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-end-widget, .footer-end-widget2 { color: rgba(255,255,255,.6); font-size: .85rem; }
.footer-end-widget a, .footer-end-widget2 a { color: rgba(255,255,255,.75); }
img.hm-logo-img.hm-logo-kleur {
    border-radius: 8px;
}
@media (max-width: 782px) {
    .footer-widgets { gap: 30px; padding: 44px 0 30px; text-align: center; }
    .footercol { flex: 1 1 100%; }
	.footercol.footercol-contact {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.footerend {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.footercol.footercol-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}
}

/* --- Vaste footer (hardcoded, zonder widgets) --- */
.site-footer {
    background: linear-gradient(150deg, #9A3320 0%, #5A1E10 100%);
    color: #fff;
    position: relative;
}
.footercol-brand .hm-footer-logo img { max-width: 200px; height: auto; display: block; margin-bottom: 22px; }
.hm-footer-socials { display: flex; gap: 12px; }
.hm-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    color: #fff;
    transition: background .2s;
}
.hm-footer-socials a:hover { background: rgba(255,255,255,.24); }
.hm-footer-socials i { color: #fff; margin: 0; }

.footercol h4.footercol-second { margin-top: 30px; }

.footercol-contact .hm-footer-lead { color: rgba(255,255,255,.82); margin-bottom: 20px; }
.hm-footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.hm-footer-contact-item i { color: #de2918; margin-top: 3px; }
.hm-footer-contact-item a, .hm-footer-contact-item span { color: rgba(255,255,255,.85); text-decoration: none; }
.hm-footer-contact-item a:hover { color: #fff; }

.hm-footer-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; max-width: 280px; }
.hm-footer-btn {
    display: block;
    text-align: center;
    padding: 13px 22px;
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.hm-footer-btn--primary { background: #de2918; color: #fff; }
.hm-footer-btn--primary:hover { background: #b81f12; color: #fff; }
.hm-footer-btn--ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; }
.hm-footer-btn--ghost:hover { border-color: #fff; }

/* =========================================================================
   Basis-typografie + correcties (v1.0.4)
   ========================================================================= */

/* Basis font op body zodat ALLE tekst Roboto erft (ontbrak in het thema) */
html, body {
    margin: 0;
    padding: 0;
}
html { overflow-x: clip; }
body {
    font-family: 'Roboto', sans-serif;
    color: #2C2C2A;
    overflow-x: clip;
    max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
}
input, select, textarea {
    font-family: 'Roboto', sans-serif;
}

/* Alle buttons in Roboto (niet Oswald) */
button,
.button,
input[type="submit"],
input[type="button"],
[class*="btn"],
.hm-footer-btn,
.hm-ig-btn,
.hm-ga-feature-btn {
    font-family: 'Roboto', sans-serif !important;
}

/* Afbeeldingen in feature-secties tegen de containerlijn (desktop) */
@media (min-width: 861px) {
    .hm-ga-feature-visual { justify-content: flex-start; }
    .hm-ga-feature--reverse .hm-ga-feature-visual { justify-content: flex-end; }
}

/* Bootstrap grid-fallback (blog gebruikt .row / .col-*) */
.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.row > [class*="col-"] { padding-left: 15px; padding-right: 15px; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 992px) {
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
    .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
.text-center { text-align: center; }
.res-margin { margin-bottom: 30px; }

/* =========================================================================
   Single blog post opmaak
   ========================================================================= */
.blog { padding: 60px 0 70px; }
.blog .container { max-width: 1200px; }
.blog-post {
    display: block;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero-afbeelding (parallax data-image via JS gezet) */
.page-title.parallax {
    background-size: cover;
    background-position: center;
    position: relative;
}
.page-title .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(122,40,24,.86), rgba(44,44,42,.82));
}
.page-title .container { position: relative; z-index: 2; }
.page-title.valign { display: flex; align-items: center; min-height: 380px; padding: 120px 0 60px; }
.blog-category { margin-bottom: 14px; }
.blog-category a { color: #fff; text-transform: uppercase; letter-spacing: .5px; font-size: 13px; font-weight: 600; text-decoration: none; }
.blog-title { color: #fff; font-size: 2.6rem; line-height: 1.15; margin: 0 0 16px; }
.blog-meta-row { display: flex; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,.85); font-size: .95rem; }
.blog-meta-row .hm-hero-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.6); display: inline-block; }
.blogcrumbs { margin-top: 16px; }
.blogcrumbs, .blogcrumbs a { color: rgba(255,255,255,.8); font-size: .85rem; }

/* Post-inhoud: leestypografie */
.blog article {
    font-family: 'Roboto', sans-serif;
    color: #33322F;
    font-size: 17px;
    line-height: 1.75;
}
.blog article p { margin: 0 0 22px; }
.blog article h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.55rem;
    line-height: 1.3;
    color: #2C2C2A;
    margin: 46px 0 14px;
}
.blog article h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.35;
    color: #2C2C2A;
    margin: 34px 0 12px;
}
.blog article h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.08rem;
    color: #2C2C2A;
    margin: 26px 0 10px;
}
.blog article ul, .blog article ol { margin: 0 0 22px; padding-left: 22px; }
.blog article li { margin-bottom: 9px; }
.blog article a { color: #DE2918; text-decoration: underline; text-underline-offset: 2px; }
.blog article img { max-width: 100%; height: auto; border-radius: 10px; margin: 26px 0; }
.blog article blockquote {
    border-left: 4px solid #DE2918;
    margin: 30px 0; padding: 6px 0 6px 24px;
    font-style: italic; color: #5F5E5A;
}
.blog article figure { margin: 26px 0; }

/* Post-footer / navigatie / auteur (zelfde leeskolom) */
.post-footer, .single-post-footer { max-width: 800px; margin: 44px auto 0; padding-top: 24px; border-top: 1px solid #E8E4DC; }
.post-author {
    max-width: 800px;
    margin: 44px auto 0;
    padding: 30px;
    background: #FBF6EE;
    border: 1px solid #EDE6DA;
    border-radius: 12px;
}
.post-author h4, .post-author .h4 { font-size: 1.15rem; margin: 6px 0 8px; }
.post-navigation-wrapper {
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.post-navigation-wrapper a { color: #DE2918; text-decoration: none; font-weight: 600; }
.post-navigation-wrapper img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }

/* --- Reviews-slider: kaartbreedte + containment (v1.0.5) --- */
.hm-ga-rev-inner { max-width: 1200px; margin: 0 auto; padding: 0 10px; }
.hm-ga-rev-track > .hm-ga-rev-card { flex: 0 0 100%; }
@media (min-width: 600px) {
    .hm-ga-rev-track > .hm-ga-rev-card { flex: 0 0 calc(50% - 12px); }
}
@media (min-width: 900px) {
    .hm-ga-rev-track > .hm-ga-rev-card { flex: 0 0 calc(33.333% - 16px); }
}

/* =========================================================================
   v1.0.8 - CF7-formulier, blog-sidebar, afspraak-form-sectie
   ========================================================================= */

/* Algemene wrap (feature/afspraak-secties) */
.hm-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Afspraak-maken: formulier-sectie */
.hm-ap-form { padding: 70px 0; background: #FBF6EE; }
.hm-ap-form .hm-form-box { max-width: 760px; margin: 0 auto; }

/* --- Contact Form 7: opmaak gelijk aan het custom form --- */
.wpcf7 .hm-field .wpcf7-form-control-wrap { display: block; width: 100%; }
.hm-form.wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
.hm-form br { display: none; }
.hm-form > p { margin: 0; }
.wpcf7-form p { margin: 0; }
.wpcf7 .hm-btn-submit { margin-top: 4px; }
.wpcf7-not-valid-tip { color: #DE2918; font-size: 13px; margin-top: 5px; display: block; }
.wpcf7 .hm-field input.wpcf7-not-valid,
.wpcf7 .hm-field textarea.wpcf7-not-valid,
.wpcf7 .hm-field select.wpcf7-not-valid { border-color: #DE2918; }
.wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 14px 18px !important;
    border-radius: 8px;
    font-size: 14px;
    border-width: 1px !important;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #2e7d32 !important; background: #edf7ed; color: #1b5e20; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #DE2918 !important; background: #fdecec; color: #9a2016; }
.wpcf7-spinner { margin: 0 0 0 10px; }

/* =========================================================================
   Blog-sidebar (single post, tweekoloms)
   ========================================================================= */

/* content en sidebar vullen hun kolom (geen 800px-centrering meer) */
.blog .col-lg-8 .blog-post,
.blog .col-lg-8 .post-author,
.blog .col-lg-8 .post-navigation-wrapper { max-width: 100%; margin-left: 0; margin-right: 0; }

.hm-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 28px; }
.hm-sb-block { background: #fff; border: 1px solid #ECE6DC; border-radius: 12px; padding: 24px; }
.hm-sb-title { font-family: 'Oswald', sans-serif; font-size: 1.05rem; font-weight: 600; color: #2C2C2A; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #ECE6DC; }

.hm-sb-searchform { display: flex; }
.hm-sb-searchform input { flex: 1; min-width: 0; border: 1px solid #E0D9CC; border-right: none; border-radius: 8px 0 0 8px; padding: 11px 14px; font-family: 'Roboto', sans-serif; font-size: 14px; }
.hm-sb-searchform input:focus { outline: none; border-color: #DE2918; }
.hm-sb-searchform button { border: none; background: #DE2918; color: #fff; padding: 0 16px; border-radius: 0 8px 8px 0; cursor: pointer; }
.hm-sb-searchform button:hover { background: #b81f12; }

.hm-sb-posts { list-style: none; margin: 0; padding: 0; }
.hm-sb-posts li { margin-bottom: 16px; }
.hm-sb-posts li:last-child { margin-bottom: 0; }
.hm-sb-posts a { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.hm-sb-thumb { flex-shrink: 0; width: 58px; height: 58px; border-radius: 8px; background: #F5F3F0 center/cover no-repeat; }
.hm-sb-post-text { display: flex; flex-direction: column; }
.hm-sb-post-title { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 15px; line-height: 1.3; color: #2C2C2A; transition: color .2s; }
.hm-sb-posts a:hover .hm-sb-post-title { color: #DE2918; }
.hm-sb-post-date { font-size: 12px; color: #8B897F; margin-top: 3px; }

.hm-sb-cats { list-style: none; margin: 0; padding: 0; }
.hm-sb-cats li { border-bottom: 1px solid #F0EBE1; }
.hm-sb-cats li:last-child { border-bottom: none; }
.hm-sb-cats a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; text-decoration: none; color: #55524C; font-size: 15px; transition: color .2s; }
.hm-sb-cats a:hover { color: #DE2918; }
.hm-sb-count { background: #F5F3F0; color: #8B897F; font-size: 12px; padding: 2px 9px; border-radius: 20px; }

.hm-sb-cta { background: linear-gradient(150deg, #9A3320 0%, #5A1E10 100%); border: none; text-align: center; color: #fff; }
.hm-sb-cta h4 { font-family: 'Oswald', sans-serif; font-size: 1.2rem; margin: 0 0 8px; color: #fff; }
.hm-sb-cta p { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 0 18px; }
.hm-sb-cta-btn { display: inline-block; background: #fff; color: #7A2818; font-family: 'Roboto', sans-serif; font-weight: 600; text-decoration: none; padding: 11px 24px; border-radius: 8px; transition: transform .2s; }
.hm-sb-cta-btn:hover { transform: translateY(-2px); }

@media (max-width: 991px) {
    .hm-sidebar { position: static; margin-top: 40px; }
}


/* =========================================================================
   v1.1.3 - Eigen mobiel menu (.hm-mnav) + header-fix. RMP kan uit.
   ========================================================================= */

/* Drawer/overlay bestaan alleen op mobiel */
.hm-mnav, .hm-mnav-overlay { display: none; }

@media (max-width: 1204px) {

    /* Betrouwbare stop op horizontale paginascroll zonder dubbele scrollbar:
       hidden op ALLEEN html (body clip erbij zou 2 scroll-containers geven) */
    html { overflow-x: hidden !important; }
    body { overflow-x: clip !important; max-width: 100% !important; }

    /* --- Oude desktop-/plugin-menu's volledig weg op mobiel --- */
    .op-mobile-menu { display: none !important; }
    ul#menu-main-menu, ul#mega-menu-header-menu, .hm-mega-panel { display: none !important; }
    #rmp-container-2659, #rmp-menu-trigger-2659,
    .rmp-container, .rmp-menu-trigger, .mobilecontainer { display: none !important; }

    /* Header kan nooit breder dan de viewport (fixed, dus niet door clip gevangen) */
    .header, #mainNav, .main-menu-area { max-width: 100vw !important; overflow-x: hidden; }
    /* Cruciaal: zonder border-box telt padding bovenop 100% -> header te breed */
    .header, #mainNav, .main-menu-area, .hm-hdr-inner,
    .hm-hdr-inner * { box-sizing: border-box !important; }

    /* --- Header 3-deling: burger | logo | telefoon --- */
    .hm-hdr-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        max-width: 100%;
        overflow: hidden;
        padding: 14px 14px !important;
    }
    .hm-burger      { display: inline-flex !important; order: 1; flex: 0 0 auto; justify-content: flex-start; }
    .hm-hdr-left    { order: 2; flex: 1 1 auto !important; display: flex !important; justify-content: center !important; gap: 0 !important; min-width: 0; }
    .hm-hdr-right   { display: none !important; }
    .hm-phone-mobile{ display: inline-flex !important; order: 3; flex: 0 0 auto; justify-content: flex-end; }
    .hm-hdr-left .hm-logo-img { height: 38px !important; width: auto !important; max-width: 130px; object-fit: contain; }

    /* --- De off-canvas drawer --- */
    .hm-mnav {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 86%; max-width: 340px;
        background: #ffffff;
        z-index: 1000000;
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.18);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.hm-menu-open .hm-mnav { transform: translateX(0); }

    .hm-mnav-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 20px; border-bottom: 1px solid #ECE6DC;
    }
    .hm-mnav-logo img { height: 30px; width: auto; display: block; }
    .hm-mnav-close {
        position: relative; width: 36px; height: 36px; flex-shrink: 0;
        background: #F5F3F0; border: none; border-radius: 8px; cursor: pointer;
    }
    .hm-mnav-close::before, .hm-mnav-close::after {
        content: ''; position: absolute; top: 50%; left: 50%;
        width: 16px; height: 2px; background: #2C2C2A; border-radius: 2px;
    }
    .hm-mnav-close::before { transform: translate(-50%,-50%) rotate(45deg); }
    .hm-mnav-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }

    /* Menu-items */
    .hm-mnav-body { flex: 1 1 auto; }
    .hm-mnav-list, .hm-mnav-list .sub-menu { list-style: none; margin: 0; padding: 0; }
    .hm-mnav-list li { position: relative; border-bottom: 1px solid #F5F0E8; }
    .hm-mnav-list a {
        display: block; padding: 15px 20px;
        font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 500;
        color: #2C2C2A; text-decoration: none;
    }
    .hm-mnav-list a:hover, .hm-mnav-list a:focus { color: #DE2918; background: #FBF6EE; }
    .hm-mnav-list .current-menu-item > a { color: #DE2918; }

    /* Submenu-accordeon */
    .hm-mnav-list .sub-menu { display: none; background: #FBF6EE; }
    .hm-mnav-list li.hm-open > .sub-menu { display: block; }
    .hm-mnav-list .sub-menu a { padding-left: 34px; font-size: 15px; }
    .hm-mnav-sub {
        position: absolute; top: 0; right: 0; width: 54px; height: 50px;
        background: none; border: none; cursor: pointer; padding: 0;
    }
    .hm-mnav-sub span { position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: #7A2818; border-radius: 2px; transform: translate(-50%,-50%); }
    .hm-mnav-sub span::after { content: ''; position: absolute; left: 5.5px; top: -5.5px; width: 2px; height: 13px; background: #7A2818; border-radius: 2px; transition: opacity .2s; }
    .hm-mnav-list li.hm-open > .hm-mnav-sub span::after { opacity: 0; }

    /* Voettekst van de drawer */
    .hm-mnav-foot { padding: 20px; border-top: 1px solid #ECE6DC; display: flex; flex-direction: column; gap: 12px; }
    .hm-mnav-phone {
        display: inline-flex; align-items: center; gap: 10px;
        color: #2C2C2A; text-decoration: none; font-weight: 600; font-size: 15px;
    }
    .hm-mnav-phone i { color: #DE2918; }
    .hm-mnav-cta {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        background: #DE2918; color: #fff; text-decoration: none;
        font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 15px;
        padding: 13px 18px; border-radius: 9px;
    }
    .hm-mnav-cta:hover { background: #b81f12; }

    /* Overlay */
    .hm-mnav-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(20,10,6,.5);
        opacity: 0; visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 999999;
    }
    .hm-mnav-overlay[hidden] { display: block; }
    body.hm-menu-open .hm-mnav-overlay { opacity: 1; visibility: visible; }

    /* Scroll-lock */
    body.hm-menu-open { overflow: hidden; }

    /* Burger-/telefoonkleur afhankelijk van header-staat */
    body:not(.hm-scrolled) .hm-burger-lines span { background-color: #ffffff; }
    body:not(.hm-scrolled) .hm-burger-label,
    body:not(.hm-scrolled) .hm-phone-mobile,
    body:not(.hm-scrolled) .hm-phone-label { color: #ffffff; }
    body.hm-scrolled .hm-burger-lines span { background-color: #333333; }
    body.hm-scrolled .hm-burger-label,
    body.hm-scrolled .hm-phone-mobile,
    body.hm-scrolled .hm-phone-label { color: #333333; }
}

@media (max-width: 480px) {
    .hm-hdr-inner { padding: 14px 14px !important; }
    .hm-hdr-left .hm-logo-img { height: 32px !important; }
    .hm-burger-label, .hm-phone-label { font-size: 11px !important; }
    .hm-burger-lines span { width: 22px; }
}

/* =========================================================================
   v1.1.9 - box-sizing fixes (formuliervelden + blog-kolommen)
   ========================================================================= */

/* Formuliervelden: zonder border-box liepen width:100% + padding over de cel,
   waardoor velden over elkaar vielen (o.a. op de contactpagina) */
.hm-form-box, .hm-form, .hm-form-row, .hm-field,
.hm-field input, .hm-field select, .hm-field textarea,
.hm-field .wpcf7-form-control-wrap,
.wpcf7-form input, .wpcf7-form select, .wpcf7-form textarea {
    box-sizing: border-box !important;
}

/* Blog-kolommen: zonder border-box duwde de padding col-lg-8/4 over 100%,
   waardoor de sidebar onder de content brak i.p.v. ernaast */
.blog .row > [class*="col-"],
.blog .row > .col-lg-8,
.blog .row > .col-lg-4 {
    box-sizing: border-box !important;
}
@media (min-width: 992px) {
    .blog .row { flex-wrap: nowrap; }
}