/**
 * Developercode — opmaak van de sitekop.
 *
 * Stond als <style> boven in inc/header/templates/header.php: ruim twaalfhonderd
 * regels die bij elke paginaweergave opnieuw over de lijn gingen en die geen
 * browser ooit kon cachen. De inhoud is ongewijzigd overgenomen.
 */

:root {
    --header-primary: #147BE1;
    --header-primary-light: #4a9ff5;
    --header-primary-deep: #0f5cb8;
    --header-secondary: #032038;
    --header-white: #ffffff;
    --header-gray: #64748b;
    --header-light-bg: #f8fafc;
    --header-line: #e5e7eb;
    --header-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --header-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================
   HEADER WRAPPER
========================================== */
.lc-header {
    position: relative;
    z-index: 9999;
}

.lc-header--transparent {
    background: transparent;
}

/* ==========================================
   TOP BAR (USP Bar) - Minimal, transparent
========================================== */
.lc-topbar {
    background: transparent;
    padding: 10px 0;
    transition: all 0.3s ease;
}

.lc-topbar__container {
    /* Zelfde rail als .dcx-shell--wide (hero + footer): 1560px met clamp-goot. */
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.lc-topbar__usps {
    display: flex;
    align-items: center;
    gap: 24px;
}

.lc-topbar__usp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--header-secondary);
}

.lc-topbar__usp--link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.lc-topbar__usp--link:hover {
    color: var(--header-primary);
}

.lc-topbar__usp-icon {
    width: 14px;
    height: 14px;
    color: var(--header-primary);
}

.lc-topbar__divider {
    width: 1px;
    height: 12px;
    background: rgba(3, 32, 56, 0.15);
}
/* ==========================================
   MAIN HEADER
========================================== */
.lc-header__main {
    padding: 0px 0;
    transition: padding 0.3s ease;
}

.lc-header__container {
    /* Zelfde rail als .dcx-shell--wide (hero + footer): 1560px met clamp-goot. */
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

/* Logo */
.lc-header__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    z-index: 10;
    /* Duwt de navigatie en de CTA naar de rechterkant van de header. */
    margin-right: auto;
}

.lc-header__logo img {
    height: 50px;
    width: auto;
    transition: all 0.3s ease;
}

.lc-header__logo-text {
    font-size: 24px;
    font-weight: 800;
    color: var(--header-secondary);
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

.lc-header__logo-accent {
    color: var(--header-primary);
}

/* Navigation */
.lc-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.lc-header__nav-item {
    position: relative;
}

.lc-header__nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--header-secondary);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.lc-header__nav-link:hover {
    color: var(--header-primary);
    background: rgba(20, 123, 225, 0.08);
}

.lc-header__nav-link svg {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
}

.lc-header__nav-item:hover .lc-header__nav-link svg {
    transform: rotate(180deg);
}

/* Active indicator */
.lc-header__nav-link--active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: linear-gradient(90deg, var(--header-primary), var(--header-primary-light));
    border-radius: 2px;
}

/* Right Actions */
.lc-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Zelfde pill-knop als .dc-hero__cta op de homepage: label, tekst en een
   witte cirkel met pijl, met de lichtveeg bij hover. */
.lc-header__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 8px 14px;
    border-radius: 999px;
    color: var(--header-white);
    background: var(--header-primary);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 18px 40px -14px rgba(20, 123, 225, .55);
    transition: transform .18s var(--header-ease),
                box-shadow .34s var(--header-ease),
                background-color .18s var(--header-ease);
}

.lc-header__cta:hover {
    background: var(--header-primary-deep);
    color: var(--header-white);
    transform: translateY(-2px);
    box-shadow: 0 24px 50px -14px rgba(20, 123, 225, .7);
}

.lc-header__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .24) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--header-ease);
}

.lc-header__cta:hover::after {
    transform: translateX(120%);
}

.lc-header__cta-tag {
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-family: var(--header-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lc-header__cta-text {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.lc-header__cta-go {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--header-white);
    color: var(--header-primary);
}

.lc-header__cta-go svg {
    width: 16px;
    height: 16px;
    transition: transform .34s var(--header-ease);
}

.lc-header__cta:hover .lc-header__cta-go svg {
    transform: translateX(3px);
}

/* Mobile Toggle - Modern Black Design */
.lc-header__mobile-toggle {
    --toggle-color: #0a0a0a;
    --toggle-size: 48px;
    --bar-width: 24px;
    --bar-height: 2px;
    --bar-spacing: 7px;

    display: none;
    position: relative;
    width: var(--toggle-size);
    height: var(--toggle-size);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.lc-header__mobile-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.lc-header__mobile-toggle:active {
    transform: scale(0.95);
}

.lc-header__mobile-toggle span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: var(--bar-width);
    height: var(--bar-height);
    background: var(--toggle-color);
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.lc-header__mobile-toggle span:nth-child(1) {
    top: calc(50% - var(--bar-spacing) - var(--bar-height) / 2);
}

.lc-header__mobile-toggle span:nth-child(2) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: calc(var(--bar-width) * 0.7);
    margin-left: calc(var(--bar-width) * 0.15);
}

.lc-header__mobile-toggle span:nth-child(3) {
    top: calc(50% + var(--bar-spacing) - var(--bar-height) / 2);
}

/* Active State - Smooth X Animation */
.lc-header__mobile-toggle.is-active span:nth-child(1) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.lc-header__mobile-toggle.is-active span:nth-child(2) {
    width: 0;
    opacity: 0;
}

.lc-header__mobile-toggle.is-active span:nth-child(3) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

/* Focus State for Accessibility */
.lc-header__mobile-toggle:focus-visible {
    outline: 2px solid var(--toggle-color);
    outline-offset: 4px;
}

/* Altijd zwart, ook op de transparante header. */
.lc-header--transparent .lc-header__mobile-toggle span {
    background: var(--toggle-color);
}

/* ==========================================
   MEGA MENU
========================================== */
.lc-megamenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 880px;
    background: var(--header-white);
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.lc-header__nav-item:hover .lc-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Nu de navigatie rechts staat, zou een gecentreerd menu bij de laatste
   items buiten beeld vallen. Die hangen we aan de rechterkant. */
.lc-megamenu--end {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(10px);
}

/* Menu's met twee kolommen naast het promoblok hebben meer breedte nodig. */
.lc-megamenu--wide {
    width: 1060px;
}

/* Rechts verankerd loopt een breed menu richting de linkerrand, dus daar
   houden we het iets compacter. */
.lc-megamenu--wide.lc-megamenu--end {
    width: 960px;
}

.lc-header__nav-item:hover .lc-megamenu--end {
    transform: translateX(0) translateY(0);
}

.lc-megamenu__inner {
    padding: 30px;
}

/* Menu-inhoud links, promoblok met foto rechts. */
.lc-megamenu__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    align-items: stretch;
}

.lc-megamenu__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lc-megamenu__main .lc-megamenu__footer {
    margin-top: auto;
}

.lc-megamenu__section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--header-gray);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

/* Mega Menu Grid Layout */
.lc-megamenu__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 24px;
}

.lc-megamenu__grid--single {
    grid-template-columns: 1fr;
}

.lc-megamenu__column-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--header-secondary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--header-primary);
    display: inline-block;
}

/* Mega Menu Item Cards */
.lc-megamenu__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.lc-megamenu__item:hover {
    background: var(--header-light-bg);
}

.lc-megamenu__item-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--header-primary), var(--header-primary-light));
    border-radius: 12px;
    color: var(--header-white);
    transition: all 0.3s ease;
}

.lc-megamenu__item:hover .lc-megamenu__item-icon {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(20, 123, 225, 0.3);
}

.lc-megamenu__item-icon svg {
    width: 22px;
    height: 22px;
}

.lc-megamenu__item-content {
    flex: 1;
}

.lc-megamenu__item-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--header-secondary);
    margin: 0 0 4px 0;
    transition: color 0.3s ease;
}

.lc-megamenu__item:hover .lc-megamenu__item-title {
    color: var(--header-primary);
}

.lc-megamenu__item-desc {
    font-size: 13px;
    color: var(--header-gray);
    margin: 0;
    line-height: 1.4;
}

/* Simple mega menu (for smaller dropdowns) */
.lc-megamenu--simple {
    width: 280px;
    padding: 16px;
}

.lc-megamenu--simple .lc-megamenu__inner {
    padding: 0;
}

.lc-megamenu__simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lc-megamenu__simple-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--header-secondary);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.lc-megamenu__simple-link:hover {
    background: var(--header-light-bg);
    color: var(--header-primary);
}

.lc-megamenu__simple-link svg {
    width: 18px;
    height: 18px;
    color: var(--header-primary);
}

/* Bottom CTA bar */
.lc-megamenu__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.lc-megamenu__footer-text {
    font-size: 14px;
    color: var(--header-gray);
}

.lc-megamenu__footer-text strong {
    color: var(--header-secondary);
}

.lc-megamenu__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--header-primary);
    text-decoration: none;
    transition: gap 0.3s ease;
}

.lc-megamenu__footer-link:hover {
    gap: 12px;
}

.lc-megamenu__footer-link svg {
    width: 16px;
    height: 16px;
}

/* ==========================================
   MEGA MENU PROMO (foto + USP's + CTA)
========================================== */
.lc-megamenu__promo {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--header-line);
    border-radius: 16px;
    background: var(--header-light-bg);
}

.lc-megamenu__promo-media {
    position: relative;
    margin: 0;
    height: 158px;
    background: var(--header-secondary);
}

.lc-megamenu__promo-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lc-megamenu__promo-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    font-family: var(--header-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--header-secondary);
}

.lc-megamenu__promo-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.lc-megamenu__promo-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--header-secondary);
}

.lc-megamenu__promo-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.lc-megamenu__promo-usp {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--header-gray);
}

.lc-megamenu__promo-usp svg {
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin-top: 2px;
    color: var(--header-primary);
}

/* Dezelfde pill als de header- en hero-knop, op menubreedte. */
.lc-megamenu__promo-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    background: var(--header-primary);
    color: var(--header-white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 14px 30px -12px rgba(20, 123, 225, .55);
    transition: transform .18s var(--header-ease),
                box-shadow .34s var(--header-ease),
                background-color .18s var(--header-ease);
}

.lc-megamenu__promo-cta:hover {
    background: var(--header-primary-deep);
    color: var(--header-white);
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -12px rgba(20, 123, 225, .7);
}

.lc-megamenu__promo-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .24) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--header-ease);
}

.lc-megamenu__promo-cta:hover::after {
    transform: translateX(120%);
}

.lc-megamenu__promo-cta-go {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--header-white);
    color: var(--header-primary);
}

.lc-megamenu__promo-cta-go svg {
    width: 15px;
    height: 15px;
    transition: transform .34s var(--header-ease);
}

.lc-megamenu__promo-cta:hover .lc-megamenu__promo-cta-go svg {
    transform: translateX(3px);
}

/* ==========================================
   MOBILE MENU
========================================== */
.lc-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background: var(--header-white);
    z-index: 10000;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.lc-mobile-menu.is-active {
    right: 0;
}

.lc-mobile-menu__overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 32, 56, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lc-mobile-menu__overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.lc-mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.lc-mobile-menu__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lc-mobile-menu__logo img {
    height: 40px;
    width: auto;
}

.lc-mobile-menu__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-light-bg);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lc-mobile-menu__close:hover {
    background: var(--header-primary);
    color: var(--header-white);
}

.lc-mobile-menu__close svg {
    width: 20px;
    height: 20px;
}

.lc-mobile-menu__nav {
    padding: 24px;
}

.lc-mobile-menu__item {
    border-bottom: 1px solid #f1f5f9;
}

.lc-mobile-menu__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--header-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.lc-mobile-menu__link:hover {
    color: var(--header-primary);
}

.lc-mobile-menu__link svg {
    width: 18px;
    height: 18px;
    color: #cbd5e1;
    transition: all 0.3s ease;
}

.lc-mobile-menu__item.is-open .lc-mobile-menu__link svg {
    transform: rotate(180deg);
    color: var(--header-primary);
}

/* Mobile submenu */
.lc-mobile-submenu {
    display: none;
    padding-bottom: 16px;
}

.lc-mobile-menu__item.is-open .lc-mobile-submenu {
    display: block;
}

.lc-mobile-submenu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--header-gray);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.lc-mobile-submenu__link:hover {
    background: var(--header-light-bg);
    color: var(--header-primary);
}

.lc-mobile-submenu__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-light-bg);
    border-radius: 8px;
    color: var(--header-primary);
}

.lc-mobile-submenu__icon svg {
    width: 18px;
    height: 18px;
}

.lc-mobile-submenu__desc {
    font-size: 12px;
    color: var(--header-gray);
    display: block;
    margin-top: 2px;
}

/* Mobile CTA */
.lc-mobile-menu__cta {
    margin: 24px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--header-white);
    background: linear-gradient(135deg, var(--header-primary), var(--header-primary-light));
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(20, 123, 225, 0.3);
}

.lc-mobile-menu__cta svg {
    width: 18px;
    height: 18px;
}

/* Mobile contact info */
.lc-mobile-menu__contact {
    padding: 24px;
    border-top: 1px solid #e5e7eb;
}

.lc-mobile-menu__contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 14px;
    color: var(--header-gray);
    text-decoration: none;
}

.lc-mobile-menu__contact-item svg {
    width: 20px;
    height: 20px;
    color: var(--header-primary);
}

/* ==========================================
   RESPONSIVE
========================================== */
/* Vanaf hier wordt de balk krap: navigatie en CTA dichter op elkaar. */
@media (max-width: 1340px) {
    .lc-header__container {
        gap: 12px;
    }

    .lc-header__nav-link {
        padding: 12px 12px;
    }

    .lc-header__nav {
        gap: 2px;
    }
}

@media (max-width: 1200px) {
    .lc-megamenu {
        width: 720px;
    }

    .lc-megamenu--wide {
        width: 900px;
    }

    .lc-megamenu__body {
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 22px;
    }

    .lc-megamenu__promo-media {
        height: 130px;
    }

    .lc-header__cta-tag {
        display: none;
    }
}

@media (max-width: 1024px) {
    .lc-header__nav {
        display: none;
    }

    .lc-header__mobile-toggle {
        display: flex;
    }

    .lc-topbar {
        display: none;
    }
}

@media (max-width: 768px) {
    .lc-topbar {
        display: none;
    }

    .lc-header__cta {
        display: none;
    }

    .lc-mobile-menu {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .lc-header__logo img {
        height: 40px;
    }

    .lc-header__logo-text {
        font-size: 20px;
    }
}


/* ==========================================
   DIENSTEN MEGA MENU — vier sporen naast elkaar
   ------------------------------------------
   De navigatie gaat niet meer over pakketten maar over diensten. Vier
   kolommen, elk met een eigen merkteken, en rechts één kaart die de
   bezoeker naar de gratis homepage brengt. Breder dan de oude menu's,
   want vier sporen naast elkaar hebben ruimte nodig om leesbaar te zijn.
========================================== */
.lc-megamenu--services {
    width: min(1180px, calc(100vw - 48px));
}

.lc-megamenu--services .lc-megamenu__body {
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 34px;
}

.lc-mm-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.lc-mm-col__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e6eaf1;
}

.lc-mm-col__mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: #eaf3fd;
    color: #147be1;
}

.lc-mm-col__mark svg { width: 15px; height: 15px; }

/* Elk spoor zijn eigen tint, zodat de kolommen uit elkaar te houden zijn
   zonder dat het menu een kleurenwaaier wordt. */
.lc-mm-col--software .lc-mm-col__mark { background: #eef1f6; color: #2b3646; }
.lc-mm-col--groei .lc-mm-col__mark    { background: #e7f8f1; color: #10b981; }
.lc-mm-col--ai .lc-mm-col__mark       { background: #eaf3fd; color: #147be1; }

.lc-mm-col__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #5b6675;
    margin: 0;
}

.lc-mm-col__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }

.lc-mm-link {
    display: block;
    padding: 9px 10px;
    margin-left: -10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .18s ease;
}

.lc-mm-link:hover,
.lc-mm-link:focus-visible { background: #f4f7fc; }

.lc-mm-link__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.012em;
    color: #12151c;
    line-height: 1.3;
}

.lc-mm-link:hover .lc-mm-link__title { color: #147be1; }

.lc-mm-link__desc {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: #5b6675;
}

/* De conversiekaart rechts. Eén boodschap, één knop. */
.lc-mm-cta {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #0e1622;
    color: rgba(255, 255, 255, .72);
}

.lc-mm-cta__media { margin: 0; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

.lc-mm-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lc-mm-cta__badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(14, 22, 34, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
}

.lc-mm-cta__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.lc-mm-cta__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.018em;
    color: #fff;
}

.lc-mm-cta__text { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .62); }

.lc-mm-cta__btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 999px;
    background: #147be1;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease;
}

.lc-mm-cta__btn:hover { background: #0f5cb8; color: #fff; }
.lc-mm-cta__btn svg { width: 15px; height: 15px; flex: none; }

/* De voetregel van het menu: één zin en één afwijkende route, voor wie
   nog niet weet welke dienst bij zijn vraag hoort. */
.lc-mm-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e6eaf1;
}

.lc-mm-foot__text { margin: 0; font-size: 13px; color: #5b6675; }
.lc-mm-foot__text strong { color: #12151c; font-weight: 600; }

.lc-mm-foot__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #147be1;
    text-decoration: none;
}

.lc-mm-foot__link svg { width: 14px; height: 14px; transition: transform .2s ease; }
.lc-mm-foot__link:hover svg { transform: translateX(3px); }

/* Het eenvoudige Kennis-menu: geen kolommen, alleen een korte lijst. */
.lc-megamenu--kennis { width: 340px; }
.lc-megamenu--kennis .lc-megamenu__inner { padding: 20px; }

@media (max-width: 1240px) {
    .lc-megamenu--services .lc-megamenu__body { grid-template-columns: minmax(0, 1fr); }
    .lc-megamenu--services .lc-mm-cta { display: none; }
}