/* ═══════════════════════════════════════════════════════════════════════════
   MovingCompare.eu v2.1 — International Moving Calculator
   Mobile-first responsive design with landing page + calculator wizard
   Premium animations, glass-morphism, responsive breakpoints

   ── ANIMATIETAAL (R3-GLOBAAL-20260930) ─────────────────────────────────────
   Eén set duur- en easing-variabelen voor de hele site. Gebruik ALTIJD deze
   tokens in plaats van losse waarden, dan voelt elke pagina hetzelfde aan.

     --mc-dur-1   120ms  micro: hover-kleur, focus, kleine iconen
     --mc-dur-2   200ms  standaard: knoppen, kaart-hover, header krimpen
     --mc-dur-3   320ms  panelen: menu, terug-naar-boven, openklappen
     --mc-dur-4   520ms  binnenkomst: reveal, paginaovergang, hero-beeld
     --mc-ease        cubic-bezier(.2,.7,.2,1)    uitlopen (vrijwel alles)
     --mc-ease-in-out cubic-bezier(.65,0,.35,1)   heen-en-weer (skeleton, overgang)
     --mc-ease-spring cubic-bezier(.34,1.4,.64,1) klein overschot (knop die verschijnt)
     --mc-rise        12px   hoe ver iets omhoog schuift bij een reveal

   Regels:
   1. Inhoud is NOOIT standaard onzichtbaar. Een reveal (.mp-reveal) verbergt
      alleen als <html> de klasse .mc-js heeft (gezet in includes/header.php);
      de footer en mc-global.js tonen alles uiterlijk na 1500 ms (failsafe).
   2. prefers-reduced-motion: duurtokens worden ~0, geen transform-reveals,
      geen paginaovergang, geen smooth scroll.
   3. Paginaovergangen: CSS View Transitions (@view-transition). Browsers zonder
      ondersteuning doen niets; er is bewust geen JS-terugval.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Animatietaal (zie uitleg hierboven) ─────────────────────────────── */
    --mc-dur-1: 120ms; --mc-dur-2: 200ms; --mc-dur-3: 320ms; --mc-dur-4: 520ms;
    --mc-ease-in-out: cubic-bezier(.65,0,.35,1);
    --mc-ease-spring: cubic-bezier(.34,1.4,.64,1);
    --mc-rise: 12px;

    /* ── Merk (afgeleid van logo, zie assets/brand) ─────────────────────── */
    --mc-navy: #14306E;          /* tegel, "moving", koppen — 12,5:1 op wit */
    --mc-navy-deep: #0B1D45;     /* donkere vlakken, footer */
    --mc-blue: #2B5DB0;          /* horizonblauw — "compare", links (6,4:1) */
    --mc-blue-dark: #1F4A94;     /* hover (8,5:1) */
    --mc-mist: #A9C1EE;          /* accent op donker (9:1 op navy-deep) */
    --mc-amber: #F5A524;         /* alleen vlak/decor; tekst erop = navy (6,1:1) */
    --mc-amber-hover: #FFB53D;
    --mc-amber-soft: #FFF4DC;
    --mc-amber-ink: #6B4600;     /* tekst op amber-soft (7,5:1) */
    --mc-ink: #0E1B3D;
    --mc-ink-2: #2E3A57;
    --mc-muted: #55607A;         /* 6,3:1 op wit */
    --mc-line: #E3E8F2;
    --mc-line-strong: #CCD5E6;
    --mc-surface: #FFFFFF;
    --mc-canvas: #F5F7FB;
    --mc-tint: #EEF3FB;
    --mc-focus: 0 0 0 3px #fff, 0 0 0 5px var(--mc-blue);

    /* ruimte (4px-raster) & vorm */
    --mc-s1: 4px; --mc-s2: 8px; --mc-s3: 12px; --mc-s4: 16px; --mc-s5: 24px; --mc-s6: 32px; --mc-s7: 48px; --mc-s8: 64px; --mc-s9: 96px;
    --mc-r-sm: 8px; --mc-r: 12px; --mc-r-lg: 16px; --mc-r-xl: 24px; --mc-pill: 999px;
    --mc-sh-1: 0 1px 2px rgba(14,27,61,.06), 0 1px 3px rgba(14,27,61,.04);
    --mc-sh-2: 0 2px 4px rgba(14,27,61,.04), 0 8px 24px -6px rgba(14,27,61,.10);
    --mc-sh-3: 0 4px 8px rgba(14,27,61,.05), 0 24px 48px -12px rgba(14,27,61,.18);
    --mc-ease: cubic-bezier(.2,.7,.2,1);

    /* typografie-schaal (Major Third, vloeiend) */
    --mc-fs-xs: .78rem; --mc-fs-sm: .875rem; --mc-fs-base: 1rem; --mc-fs-md: 1.125rem;
    --mc-fs-lg: clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
    --mc-fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
    --mc-fs-2xl: clamp(1.85rem, 1.4rem + 2vw, 2.75rem);
    --mc-fs-3xl: clamp(2.2rem, 1.5rem + 3.4vw, 4rem);

    /* bestaande tokens → nieuwe merkwaarden (alle oude class-namen blijven werken) */
    --mp-primary: var(--mc-blue);
    --mp-primary-light: var(--mc-tint);
    --mp-primary-dark: var(--mc-blue-dark);
    --mp-primary-darker: var(--mc-navy);
    --mp-accent: var(--mc-amber); --mp-accent-leesbaar: var(--mc-amber-ink);
    --mp-accent-light: var(--mc-amber-soft);
    --mp-bg: var(--mc-canvas);
    --mp-card: var(--mc-surface);
    --mp-text: var(--mc-ink);
    --mp-muted: var(--mc-muted);
    --mp-border: var(--mc-line);
    --mp-radius: var(--mc-r);
    --mp-shadow: var(--mc-sh-2);
    --mp-shadow-lg: var(--mc-sh-3);
    --mp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mp-glow-green: rgba(43,93,176,.15);
    --mp-glow-amber: rgba(245,165,36,.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }

body {
    font-family: var(--mp-font);
    background: var(--mp-bg);
    color: var(--mp-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
    overflow-x: hidden;
}
h1, h2, h3, h4 { color: inherit; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; }
::selection { background: var(--mc-mist); color: var(--mc-navy-deep); }

/* Zichtbare focus overal (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--mc-blue); outline-offset: 3px; border-radius: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mc-blue); outline-offset: 3px; }
.mp-hero-full :focus-visible, .mp-footer-full :focus-visible, .mp-bottom-cta :focus-visible { outline-color: var(--mc-amber); }

.mp-skip { position: absolute; left: 12px; top: -60px; z-index: 10001; background: var(--mc-navy); color: #fff; padding: 10px 16px; border-radius: var(--mc-r-sm); font-weight: 700; text-decoration: none; transition: top .2s; }
.mp-skip:focus { top: 12px; }
.mp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.mp-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mp-container--narrow { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* ═══ Google Places autocomplete dropdown ═════════════════════════════════ */
.pac-container { z-index: 10000 !important; border-radius: 12px; border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow-lg); margin-top: 4px; font-family: var(--mp-font); }
.pac-item { padding: 10px 14px; font-size: 14px; line-height: 1.4; border-top-color: var(--mp-border); cursor: pointer; }
.pac-item:hover, .pac-item-selected { background: var(--mp-primary-light); }
.pac-icon { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — sticky, licht, met het echte logo
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-header {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(20,48,110,.08);
    padding: 12px 0;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    transition: box-shadow .3s var(--mc-ease), background .3s;
}
.mp-header.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 1px 0 rgba(20,48,110,.06), 0 8px 24px -12px rgba(14,27,61,.18); }
.mp-header-inner {
    display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1200px;
}
.mp-header-right { display: flex; align-items: center; gap: 10px; }
.mp-logo {
    display: inline-flex; align-items: center; flex-shrink: 0;
    height: 36px; text-decoration: none; color: var(--mc-navy);
    text-transform: none; letter-spacing: 0; line-height: 0; border-radius: 6px;
}
.mp-logo img, .mp-logo picture { display: block; height: 100%; width: auto; }
.mp-logo-icon { font-size: 1.3rem; }
.mp-logo-text { font-weight: 500; letter-spacing: -.02em; }
.mp-logo-text strong { font-weight: 800; color: var(--mc-blue); }
/* Pagina's met een eigen (oude) header-markup krijgen via CSS hetzelfde logo */
.mp-logo:not(:has(img)) {
    width: 198px; height: 36px;
    background: url("/assets/brand/logo.svg") no-repeat left center / auto 36px;
}
.mp-logo:not(:has(img)) > .mp-logo-icon { display: none; }
.mp-logo:not(:has(img)) > .mp-logo-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.mp-nav-links {
    display: flex; align-items: center; gap: 2px;
}
.mp-nav-link {
    text-decoration: none; color: var(--mc-ink-2); font-size: .9rem; font-weight: 500;
    padding: 8px 12px; border-radius: var(--mc-r-sm); transition: color .2s, background .2s; white-space: nowrap;
    position: relative;
}
.mp-nav-link:hover { color: var(--mc-navy); background: var(--mc-tint); }
.mp-nav-link.mp-nav-active { color: var(--mc-navy); font-weight: 600; }
.mp-nav-link.mp-nav-active::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--mc-amber);
}

.mp-header-cta {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: .88rem; font-weight: 700;
    background: var(--mc-navy); color: #fff !important; text-decoration: none;
    border-radius: var(--mc-pill); transition: background .2s, transform .2s, box-shadow .2s; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(14,27,61,.2);
}
.mp-header-cta:hover { background: var(--mc-blue-dark); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(20,48,110,.5); }

.mp-header-login {
    text-decoration: none; color: var(--mc-ink-2); font-size: .88rem; font-weight: 600;
    padding: 9px 14px; border-radius: var(--mc-pill); transition: all .2s;
    border: 1px solid var(--mc-line-strong); white-space: nowrap;
}
.mp-header-login:hover { color: var(--mc-navy); border-color: var(--mc-navy); background: #fff; }

.mp-mobile-menu-btn {
    display: none; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--mc-line-strong);
    border-radius: var(--mc-r-sm); width: 44px; height: 44px; padding: 0; cursor: pointer;
    color: var(--mc-navy);
}
.mp-mobile-menu-btn:hover { background: var(--mc-tint); }

.mp-lang { display: flex; gap: 0; background: var(--mc-canvas); border: 1px solid var(--mc-line); border-radius: var(--mc-pill); padding: 3px; }

/* Footer & cookie banner: see UNIVERSAL FOOTER section at bottom of file */
.mp-lang a {
    text-decoration: none; color: var(--mc-muted); font-size: .74rem; font-weight: 700; letter-spacing: .03em;
    padding: 5px 9px; border-radius: var(--mc-pill); transition: all .15s;
    min-width: 32px; text-align: center; line-height: 1.4;
}
.mp-lang a:hover { color: var(--mc-navy); }
.mp-lang a.active { color: #fff; background: var(--mc-navy); }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — Full viewport, TV-commercial quality
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-hero-full {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    background: #060d1a;
    color: #fff;
    padding: 90px 20px 60px;
    position: relative; overflow: hidden;
}
/* Hero image carousel */
.mp-hero-carousel {
    position: absolute; inset: 0; z-index: 0;
}
.mp-hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}
.mp-hero-slide-active { opacity: 1; }
/* Dark overlay over carousel */
.mp-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(150deg, rgba(2,20,24,.88) 0%, rgba(4,40,32,.82) 25%, rgba(6,53,32,.78) 50%, rgba(10,30,58,.85) 75%, rgba(6,13,26,.92) 100%);
    pointer-events: none;
}

/* ── Animated grid background (tech/map feel) ───────────────────────────── */
.mp-hero-full::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background-image:
        radial-gradient(circle, rgba(43,93,176,.25) 1px, transparent 1px),
        radial-gradient(circle, rgba(43,93,176,.15) 1px, transparent 1px);
    background-size: 60px 60px, 90px 90px;
    background-position: 0 0, 30px 30px;
    animation: mpGridPulse 8s ease-in-out infinite;
    opacity: .35;
    pointer-events: none;
}

/* Gradient overlay at bottom */
.mp-hero-full::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to top, var(--mp-bg), transparent);
    pointer-events: none; z-index: 3;
}

/* ── Floating decorative emoji elements ──────────────────────────────────── */
.mp-float {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: .18;
    will-change: transform;
}
.mp-float:nth-child(1) { font-size: 2rem; top: 12%; left: 8%; animation: mpFloatSlow 7s ease-in-out infinite; opacity: .15; }
.mp-float:nth-child(2) { font-size: 2.5rem; top: 25%; right: 6%; animation: mpFloatSlow 9s ease-in-out infinite 1s; opacity: .2; }
.mp-float:nth-child(3) { font-size: 1.5rem; bottom: 20%; left: 12%; animation: mpFloatSlow 6s ease-in-out infinite 0.5s; opacity: .22; }
.mp-float:nth-child(4) { font-size: 3rem; bottom: 30%; right: 10%; animation: mpFloatSlow 11s ease-in-out infinite 2s; opacity: .12; }
.mp-float:nth-child(5) { font-size: 1.8rem; top: 55%; left: 3%; animation: mpFloatSlow 8s ease-in-out infinite 3s; opacity: .25; }

/* Animated background orbs */
.mp-orb {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: .35;
    pointer-events: none; z-index: 0;
    will-change: transform;
}
.mp-orb1 {
    width: 700px; height: 700px; top: -15%; left: -15%;
    background: radial-gradient(circle, rgba(43,93,176,.5), transparent 70%);
    animation: mpOrbMove1 12s ease-in-out infinite;
}
.mp-orb2 {
    width: 550px; height: 550px; top: 20%; right: -10%;
    background: radial-gradient(circle, rgba(43,93,176,.4), transparent 70%);
    animation: mpOrbMove2 15s ease-in-out infinite;
}
.mp-orb3 {
    width: 450px; height: 450px; bottom: -5%; left: 40%;
    background: radial-gradient(circle, rgba(245,165,36,.3), transparent 70%);
    animation: mpOrbMove3 10s ease-in-out infinite;
}
@keyframes mpOrbMove1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(60px, 40px); }
}
@keyframes mpOrbMove2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-40px, -50px); }
}
@keyframes mpOrbMove3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(50px, -30px); }
}

/* Hero layout: left text + right visual */
.mp-hero-layout {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 40px;
    max-width: 1100px; margin: 0 auto; width: 100%;
}
.mp-hero-left { flex: 1; min-width: 0; }
.mp-hero-right { flex: 0 0 420px; }

/* ── Map card visual ──────────────────────────────────────────────────── */
.mp-map-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px; overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0,0,0,.5),
        0 0 80px rgba(43,93,176,.12),
        0 0 40px rgba(43,93,176,.08);
    transform: perspective(800px) rotateY(-4deg) rotateX(2deg);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease;
    animation: mpGlowPulse 4s ease-in-out infinite;
}
.mp-map-card:hover {
    transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1.03);
    box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        0 0 100px rgba(43,93,176,.2),
        0 0 50px rgba(43,93,176,.12);
}

.mp-hero-map-wrap {
    position: relative; width: 100%; height: 340px;
    overflow: hidden; border-radius: 20px;
}
.mp-hero-gmap { width: 100%; height: 100%; border-radius: 20px; }
.mp-hero-map-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* Map overlay badges — glass-morphism */
.mp-hero-map-badge {
    position: absolute; display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    padding: 8px 16px; border-radius: 24px; font-size: .82rem; font-weight: 700; color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
    animation: mpFadeIn .4s ease forwards; opacity: 0;
    transition: all .4s ease;
}
.mp-hero-badge-a { top: 14px; left: 14px; }
.mp-hero-badge-b { top: 14px; right: 14px; }
.mp-hb-pin {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 900; color: #fff; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.mp-hero-badge-a .mp-hb-pin { background: var(--mp-primary); }
.mp-hero-badge-b .mp-hb-pin { background: var(--mp-accent); }

.mp-hero-map-dist {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
    background: rgba(20,48,110,.85);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    padding: 10px 24px; border-radius: 28px; font-size: .88rem; font-weight: 700; color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 20px rgba(20,48,110,.4), inset 0 1px 0 rgba(255,255,255,.15);
    animation: mpFadeIn .4s ease forwards; opacity: 0;
    white-space: nowrap;
}

/* Dead CSS removed: .mp-map-visual, .mp-map-glow, .mp-route-svg/path/dash,
   .mp-marker*, .mp-map-distance, .mp-truck-anim — replaced by interactive Google Maps hero */
@keyframes mpFadeIn { to { opacity: .6; } }

.mp-hero-left { text-align: left; }

.mp-hero-badge {
    display: inline-block; padding: 6px 18px; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    font-size: .82rem; font-weight: 600; letter-spacing: .02em;
    margin-bottom: 20px; -webkit-backdrop-filter: blur(8px);
}

.mp-hero-full h1 {
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 900; letter-spacing: -.05em;
    line-height: 1.1; margin-bottom: 18px;
}
.mp-hero-accent {
    display: block; color: var(--mp-accent);
    text-shadow: 0 2px 24px rgba(245,165,36,.35);
}
.mp-hero-sub {
    font-size: clamp(.95rem, 2.5vw, 1.15rem);
    opacity: .85; max-width: 520px; margin: 0 0 24px;
    line-height: 1.6;
}

/* Hero stats */
.mp-hero-stats {
    display: flex; gap: 20px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.mp-hero-stat {
    font-size: .88rem; font-weight: 600; opacity: .85;
    display: flex; align-items: center; gap: 6px;
}

/* Hero CTA button */
.mp-btn-hero {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
    background: var(--mp-accent-leesbaar); color: #fff !important;
    border: none; border-radius: 14px; cursor: pointer;
    font-family: var(--mp-font); text-decoration: none;
    box-shadow: 0 4px 20px rgba(245,165,36,.4);
    transition: all .25s; margin-bottom: 32px;
}
.mp-btn-hero:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(245,165,36,.5); background: #e3920f; }

/* ── Conversational hero form ──────────────────────────────────────────── */
.mp-hero-conv {
    max-width: 520px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 12px;
}
.mp-conv-step {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px; padding: 14px 18px;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: all .45s cubic-bezier(.4, 0, .2, 1);
    transform-origin: top center;
}
.mp-conv-step.mp-conv-active {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.3);
    box-shadow: 0 4px 24px rgba(0,0,0,.2), 0 0 30px rgba(43,93,176,.08);
}
.mp-conv-step.mp-conv-hidden {
    opacity: 0; max-height: 0; padding: 0 18px; margin: 0;
    overflow: hidden; border: none;
    transform: translateY(-8px) scale(.96);
}
.mp-conv-step.mp-conv-visible {
    opacity: 1; max-height: 200px; padding: 14px 18px;
    animation: mpSlideDown .5s cubic-bezier(.4, 0, .2, 1);
    transform: none;
}
@keyframes mpSlideDown {
    from { opacity: 0; transform: translateY(-10px) scale(.97); max-height: 0; }
    to { opacity: 1; transform: none; max-height: 200px; }
}
.mp-conv-label {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 700; opacity: .9; margin-bottom: 8px;
}
.mp-conv-globe {
    font-size: 1.4rem;
    display: inline-block;
    animation: mpGlobeSpin 4s linear infinite;
}
@keyframes mpGlobeSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.mp-conv-input {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px; padding: 2px;
    transition: all .3s ease;
}
.mp-conv-input:focus-within {
    background: rgba(255,255,255,.22); border-color: var(--mp-accent);
    box-shadow: 0 0 0 3px rgba(245,165,36,.2), 0 0 20px rgba(245,165,36,.1);
}
.mp-conv-icon { padding-left: 12px; font-size: 1.2rem; flex-shrink: 0; }
.mp-conv-input input {
    width: 100%; background: transparent; border: none; outline: none;
    padding: 15px 16px 15px 8px; font-size: 17px; color: #fff;
    font-family: var(--mp-font);
}
.mp-conv-input input::placeholder { color: rgba(255,255,255,.45); }
.mp-conv-route-info {
    text-align: center; padding: 8px 0 12px;
    font-size: .95rem; font-weight: 700; color: var(--mp-accent);
}
.mp-btn-hero-go {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 16px 20px; font-size: 1.05rem; font-weight: 800;
    background: var(--mp-accent-leesbaar); color: #fff !important;
    border: none; border-radius: 14px; cursor: pointer;
    font-family: var(--mp-font); white-space: nowrap;
    transition: all .25s; box-shadow: 0 4px 16px rgba(245,165,36,.35);
    min-height: 52px;
}
.mp-btn-hero-go:hover { background: #e3920f; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(245,165,36,.4); }

/* ── Floating globe widget ────────────────────────────────────────────── */
.mp-globe-widget {
    position: fixed; bottom: 24px; right: 24px; z-index: 500;
    width: 64px; height: 64px;
    cursor: pointer; transition: transform .3s;
}
.mp-globe-widget:hover { transform: scale(1.15); }
.mp-globe-widget:active { transform: scale(.95); }
.mp-globe-spin {
    width: 64px; height: 64px; position: relative;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--mp-primary), #3d6fc4);
    border-radius: 50%; box-shadow: 0 4px 24px rgba(20,48,110,.4);
    animation: mpGlobeFloat 3s ease-in-out infinite;
    will-change: transform;
}
.mp-globe-face {
    font-size: 2rem;
    animation: mpGlobeSpin3D 6s linear infinite;
    display: inline-block;
}
@keyframes mpGlobeSpin3D {
    0% { transform: rotateY(0deg) scale(1); }
    25% { transform: rotateY(90deg) scale(.9); }
    50% { transform: rotateY(180deg) scale(1); }
    75% { transform: rotateY(270deg) scale(.9); }
    100% { transform: rotateY(360deg) scale(1); }
}
.mp-globe-smiley {
    position: absolute; bottom: -4px; right: -4px;
    font-size: 1.3rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
    animation: mpSmileyBounce 2s ease-in-out infinite;
}
@keyframes mpSmileyBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.1); }
}
@keyframes mpGlobeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.mp-globe-pulse {
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--mp-primary);
    animation: mpPulseRing 2s ease-out infinite;
    pointer-events: none;
}
@keyframes mpPulseRing {
    0% { transform: scale(.8); opacity: .6; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS — Shared
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-section { padding: 80px 0; }
.mp-section-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800;
    text-align: center; margin-bottom: 48px; letter-spacing: -.04em;
    color: var(--mp-text);
}
.mp-section-badge {
    display: inline-block; padding: 6px 16px; border-radius: 100px;
    background: var(--mp-primary-light); color: var(--mp-primary);
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 14px;
}
.mp-section-header { text-align: center; margin-bottom: 56px; }
.mp-section-header .mp-section-title { margin-bottom: 0; }

/* Scroll reveal animation — alleen verbergen als JS draait (html.mc-js), anders altijd zichtbaar */
.mp-reveal { transition: opacity var(--mc-dur-4) var(--mc-ease), transform var(--mc-dur-4) var(--mc-ease); }
html.mc-js .mp-reveal:not(.visible) { opacity: 0; transform: translateY(var(--mc-rise)); }
.mp-reveal.visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-trust-strip {
    background: var(--mp-primary-dark);
    padding: 18px 0;
}
.mp-trust-grid {
    display: flex; gap: 0; justify-content: center; align-items: center;
    flex-wrap: wrap;
}
.mp-trust-item {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.9);
    white-space: nowrap;
    padding: 10px 24px;
    border-right: 1px solid rgba(255,255,255,.12);
    transition: color .2s;
}
.mp-trust-item:last-child { border-right: none; }
.mp-trust-item:hover { color: #fff; }
.mp-trust-icon { color: var(--mc-mist); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   STATS SECTION — Big numbers
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-stats-section {
    background: #fff; padding: 64px 0;
    border-bottom: 1px solid var(--mp-border);
}
.mp-stats-big-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0; text-align: center;
}
.mp-stat-big {
    padding: 24px 16px;
    border-right: 1px solid var(--mp-border);
}
.mp-stat-big:last-child { border-right: none; }
.mp-stat-big-num {
    font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900;
    color: var(--mp-primary); letter-spacing: -.05em; line-height: 1;
    margin-bottom: 8px; display: block;
}
.mp-stat-big-label {
    font-size: .88rem; color: var(--mp-muted); font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIA / PARTNERS STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-media-strip {
    background: #f8fafc; padding: 32px 0;
    border-top: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
}
.mp-media-label {
    text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mp-muted); margin-bottom: 20px;
}
.mp-media-logos {
    display: flex; gap: 32px; justify-content: center; align-items: center;
    flex-wrap: wrap;
}
.mp-media-logo {
    font-size: 1rem; font-weight: 800; color: #b0bac4; letter-spacing: -.03em;
    font-family: Georgia, serif; opacity: .7;
    transition: opacity .2s; white-space: nowrap;
}
.mp-media-logo:hover { opacity: 1; color: var(--mp-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — With connecting lines
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-how { background: #fff; }
.mp-how-grid {
    display: flex; gap: 0; justify-content: center; align-items: flex-start;
    flex-wrap: wrap; max-width: 960px; margin: 0 auto;
    position: relative;
}
.mp-how-grid::before {
    content: '';
    position: absolute; top: 44px; left: 15%; right: 15%;
    height: 2px;
    background: linear-gradient(90deg, var(--mp-primary-light), var(--mp-primary), var(--mp-primary-light));
    opacity: .4; z-index: 0;
}
.mp-how-card {
    flex: 1; min-width: 220px; max-width: 280px;
    text-align: center; padding: 0 24px 32px;
    position: relative; z-index: 1;
}
.mp-how-card:hover .mp-how-num-large { transform: translateX(-50%) scale(1.08); box-shadow: 0 8px 32px rgba(20,48,110,.25); }

.mp-how-num-large {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--mp-primary); color: #fff;
    font-size: 1.4rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 4px 20px rgba(20,48,110,.2);
    transition: transform .3s, box-shadow .3s;
    position: relative;
}
.mp-how-num-large::after {
    content: '';
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--mp-primary-light);
}
.mp-how-num {
    display: none;
}
.mp-how-icon {
    margin-bottom: 16px;
    color: var(--mp-primary);
}
.mp-how-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.mp-how-card p { font-size: .88rem; color: var(--mp-muted); line-height: 1.6; }
.mp-how-arrow {
    font-size: 1.5rem; color: var(--mp-primary); opacity: .4;
    flex-shrink: 0; font-weight: 300; padding-top: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURES — Premium cards
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-features { background: #f8fafc; }
.mp-features-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; max-width: 1100px; margin: 0 auto;
}
.mp-feature-card {
    background: #fff; padding: 32px 28px; border-radius: 16px;
    border: 1px solid var(--mp-border);
    box-shadow: 0 2px 12px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
}
.mp-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(20,48,110,.10), 0 4px 12px rgba(0,0,0,.06);
    border-color: rgba(20,48,110,.2);
}
.mp-feat-icon-circle {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--mp-primary-light);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.mp-feature-icon { font-size: 1.8rem; margin-bottom: 14px; }
.mp-feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--mp-text); }
.mp-feature-card p { font-size: .88rem; color: var(--mp-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   POPULAR ROUTES
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-routes { background: #fff; }
.mp-routes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px; max-width: 1100px; margin: 0 auto;
}
.mp-route-card {
    display: block; text-decoration: none; color: var(--mp-text);
    background: var(--mp-bg); padding: 18px 20px; border-radius: 12px;
    border: 1px solid var(--mp-border);
    transition: all .2s;
}
.mp-route-card:hover { border-color: var(--mp-primary); background: var(--mp-primary-light); transform: translateY(-2px); }
.mp-route-from-to { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mp-route-city { font-weight: 700; font-size: .92rem; }
.mp-route-arrow { color: var(--mp-primary); font-weight: 700; }
.mp-route-meta { display: flex; justify-content: space-between; font-size: .82rem; color: var(--mp-muted); }
.mp-route-meta strong { color: var(--mp-primary); font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLS SHOWCASE
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-tools { background: #f8fafc; }
.mp-tools-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; max-width: 1100px; margin: 0 auto;
}
.mp-tool-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--mp-border);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .25s, box-shadow .25s;
}
.mp-tool-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,.1); }
.mp-tool-img {
    width: 100%; height: 160px; overflow: hidden;
}
.mp-tool-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.mp-tool-card:hover .mp-tool-img img { transform: scale(1.08); }
.mp-tool-body { padding: 18px 20px; }
.mp-tool-body h3 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.mp-h3-icon { color: var(--mp-primary); flex-shrink: 0; }
.mp-tool-body p { font-size: .84rem; color: var(--mp-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWS / TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-reviews { background: #fff; }
.mp-reviews-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; max-width: 1100px; margin: 0 auto;
}
.mp-review-card {
    background: #f8fafc; padding: 28px 24px; border-radius: 16px;
    border: 1px solid var(--mp-border);
    border-left: 4px solid var(--mp-primary);
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}
.mp-review-card::before {
    content: '\201C';
    position: absolute;
    top: -10px; right: 12px;
    font-size: 6rem;
    font-family: Georgia, serif;
    color: var(--mp-primary);
    opacity: .06;
    line-height: 1;
    pointer-events: none;
}
.mp-review-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(20,48,110,.10); }
.mp-review-stars { color: var(--mp-accent); font-size: 1.1rem; margin-bottom: 14px; letter-spacing: 2px; }
.mp-review-text {
    font-size: .92rem; line-height: 1.7; color: var(--mp-text);
    margin-bottom: 20px; font-style: italic;
    position: relative; z-index: 1;
}
.mp-review-author {
    display: flex; align-items: center; gap: 12px;
    position: relative; z-index: 1;
}
.mp-review-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    object-fit: cover; border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    flex-shrink: 0;
}
.mp-review-author strong { display: block; font-size: .88rem; font-weight: 700; }
.mp-review-author span { font-size: .8rem; color: var(--mp-muted); }
.mp-review-aggregate {
    text-align: center; margin-bottom: 32px;
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.mp-aggregate-stars { color: var(--mp-accent); font-size: 1.2rem; }
.mp-aggregate-score { font-size: 1.1rem; font-weight: 800; color: var(--mp-text); }
.mp-aggregate-label { font-size: .85rem; color: var(--mp-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   CALCULATOR SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-calc-section {
    background: var(--mp-bg); padding: 48px 0 80px;
}

/* Progress steps */
.mp-progress-wrap {
    background: #fff; border: 1px solid var(--mp-border); border-radius: 14px;
    padding: 14px 8px; margin-bottom: 24px;
    position: sticky; top: 60px; z-index: 99;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.mp-steps { display: flex; gap: 0; justify-content: center; align-items: center; }
.mp-step {
    display: flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600;
    color: var(--mp-muted); padding: 4px 10px; transition: color .3s; white-space: nowrap;
}
.mp-step.active { color: var(--mp-primary); }
.mp-step.done { color: var(--mp-primary); opacity: .6; }
.mp-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--mp-border); color: var(--mp-muted);
    font-size: .82rem; font-weight: 700; flex-shrink: 0; transition: all .25s;
}
.mp-step.active .mp-step-num {
    background: var(--mp-primary); color: #fff;
    box-shadow: 0 0 0 4px var(--mp-primary-light);
}
.mp-step.done .mp-step-num { background: var(--mp-primary-light); color: var(--mp-primary); }
.mp-step + .mp-step::before {
    content: ''; display: block; width: 16px; height: 2px;
    background: var(--mp-border); margin-right: 8px; flex-shrink: 0;
}
.mp-step.done + .mp-step::before { background: var(--mp-primary-light); }

/* Panels */
.mp-panel { display: none; animation: mpFadeIn .3s ease; }
.mp-panel.active { display: block; }

.mp-panel h2 {
    font-size: 1.3rem; font-weight: 700; margin-bottom: 20px;
    letter-spacing: -.02em; display: flex; align-items: center; gap: 8px;
}
.mp-panel-icon { font-size: 1.2rem; }

/* Form fields */
.mp-field { margin-bottom: 18px; }
.mp-field label {
    display: block; font-weight: 600; font-size: .88rem;
    margin-bottom: 6px; color: var(--mp-text);
}
.mp-field input[type="text"],
.mp-field input[type="email"],
.mp-field input[type="tel"],
.mp-field input[type="date"],
.mp-field select {
    width: 100%; font-size: 16px;
    padding: 13px 16px; border: 2px solid var(--mp-border);
    border-radius: var(--mp-radius); font-family: var(--mp-font);
    transition: border-color .2s, box-shadow .2s;
    background: #fff; color: var(--mp-text);
    -webkit-appearance: none; appearance: none; min-height: 50px;
}
.mp-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.mp-field input:focus, .mp-field select:focus {
    outline: none; border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(20,48,110,.12);
}

/* Input with icon */
.mp-input-icon {
    position: relative; display: flex; align-items: center;
}
.mp-icon-pin {
    position: absolute; left: 14px; font-size: 1rem; z-index: 1;
    pointer-events: none;
}
.mp-input-icon input { padding-left: 42px !important; }

/* Row layout */
.mp-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mp-half { flex: 1; min-width: 200px; }
.mp-third { flex: 1; min-width: 160px; }

/* Swap addresses button */
.mp-swap-row { text-align: center; margin: -6px 0 10px; }
.mp-swap-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; font-size: .8rem; font-weight: 600;
    color: var(--mp-primary); background: var(--mp-primary-light);
    border: 1px solid rgba(20,48,110,.15); border-radius: 8px;
    cursor: pointer; font-family: var(--mp-font); transition: all .2s;
}
.mp-swap-btn:hover { background: var(--mp-primary); color: #fff; }
.mp-swap-btn svg { width: 14px; height: 14px; }

/* ── Smart suggestions (after route) ──────────────────────────────────── */
.mp-suggest {
    background: linear-gradient(135deg, var(--mp-primary-light), #f0f9ff);
    border: 1px solid rgba(20,48,110,.15);
    border-radius: 14px; padding: 18px; margin: 18px 0;
    animation: mpSlideDown .4s ease;
}
.mp-suggest-title {
    font-size: .9rem; font-weight: 700; color: var(--mp-primary);
    margin-bottom: 12px; text-align: center;
}
.mp-suggest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mp-suggest-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 8px; border: 2px solid var(--mp-border); border-radius: 12px;
    background: #fff; cursor: pointer; transition: all .2s;
    text-align: center; font-family: var(--mp-font);
}
.mp-suggest-card:hover { border-color: var(--mp-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.mp-suggest-card.active { border-color: var(--mp-primary); background: var(--mp-primary-light); box-shadow: 0 0 0 1px var(--mp-primary); }
.mp-suggest-icon { font-size: 1.8rem; margin-bottom: 4px; }
.mp-suggest-label { font-size: .82rem; font-weight: 700; color: var(--mp-text); }
.mp-suggest-desc { font-size: .68rem; color: var(--mp-muted); line-height: 1.3; margin-top: 2px; }
.mp-suggest-route {
    text-align: center; margin-top: 12px; font-size: .85rem;
    color: var(--mp-muted); font-weight: 500;
}

/* Country badges */
.mp-country-badges {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 10px 0;
}
.mp-country-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--mp-primary-light); color: var(--mp-primary);
    padding: 5px 12px; border-radius: 8px; font-weight: 700; font-size: .85rem;
}
.mp-country-arrow { color: var(--mp-muted); font-size: .9rem; }

/* Route info badge */
.mp-route-info { margin: 14px 0; text-align: center; }
.mp-route-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--mp-accent-light); color: #92400e;
    padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: .92rem;
}

/* Map */
.mp-map-wrap { margin: 14px 0; border-radius: var(--mp-radius); overflow: hidden; box-shadow: var(--mp-shadow); }
#mpMap { width: 100%; height: 260px; border-radius: var(--mp-radius); }

/* Housing grid */
.mp-housing-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
}
.mp-housing-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px 8px 14px; border: 2px solid var(--mp-border); border-radius: var(--mp-radius);
    cursor: pointer; transition: all .2s; text-align: center; background: #fff;
    min-height: 95px; position: relative;
}
.mp-housing-card:active { transform: scale(.97); }
.mp-housing-card:has(input:checked) {
    border-color: var(--mp-primary); background: var(--mp-primary-light);
    box-shadow: 0 0 0 1px var(--mp-primary);
}
.mp-housing-card input { display: none; }
.mp-housing-icon { font-size: 1.8rem; margin-bottom: 4px; }
.mp-housing-label { font-weight: 600; font-size: .82rem; line-height: 1.2; }
.mp-housing-m3 { font-size: .72rem; color: var(--mp-muted); margin-top: 3px; }

/* Furniture grid */
.mp-furniture-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
}
.mp-furniture-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px 6px 12px; border: 2px solid var(--mp-border); border-radius: var(--mp-radius);
    cursor: pointer; transition: all .18s; text-align: center; background: #fff; min-height: 90px;
}
.mp-furniture-card:active { transform: scale(.97); }
.mp-furniture-card:has(input:checked) {
    border-color: var(--mp-primary); background: var(--mp-primary-light);
    box-shadow: 0 0 0 1px var(--mp-primary);
}
.mp-furniture-card input { display: none; }
.mp-furn-icon { font-size: 1.7rem; margin-bottom: 3px; }
.mp-furn-name { font-size: .76rem; font-weight: 600; line-height: 1.2; }
.mp-furn-m3 { font-size: .68rem; color: var(--mp-muted); margin-top: 2px; }

/* Extras grid */
.mp-extras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mp-extra-card {
    display: flex; align-items: center; gap: 12px; padding: 16px;
    border: 2px solid var(--mp-border); border-radius: var(--mp-radius);
    cursor: pointer; transition: all .18s; background: #fff; min-height: 54px;
}
.mp-extra-card:active { transform: scale(.98); }
.mp-extra-card:has(input:checked) {
    border-color: var(--mp-primary); background: var(--mp-primary-light);
    box-shadow: 0 0 0 1px var(--mp-primary);
}
.mp-extra-card input { margin: 0; accent-color: var(--mp-primary); width: 20px; height: 20px; flex-shrink: 0; }
.mp-extra-card span { font-weight: 600; font-size: .88rem; }

/* Volume bar */
.mp-volume-bar {
    background: var(--mp-primary-light); padding: 14px 18px;
    border-radius: var(--mp-radius); font-size: .92rem;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 18px 0; border: 1px solid rgba(20,48,110,.15);
}
.mp-truck-rec { margin-left: auto; font-size: .82rem; color: var(--mp-primary); font-weight: 700; }

/* Date tip */
.mp-tip {
    background: var(--mp-accent-light); padding: 10px 16px; border-radius: 10px;
    font-size: .85rem; color: #92400e; font-weight: 500;
    display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}

/* Price preview */
.mp-price-preview {
    background: linear-gradient(135deg, var(--mp-primary) 0%, var(--mp-primary-dark) 100%);
    color: #fff; text-align: center; padding: 24px 20px;
    border-radius: var(--mp-radius); margin: 20px 0;
    box-shadow: 0 4px 20px rgba(20,48,110,.25);
}
.mp-price-label { font-size: .88rem; opacity: .85; margin-bottom: 4px; font-weight: 500; }
.mp-price-amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.mp-price-vat { font-size: .78rem; opacity: .7; margin-top: 4px; }

/* Nav buttons */
.mp-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 24px; gap: 10px;
}
.mp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 28px; border: none; border-radius: var(--mp-radius);
    font-size: .95rem; font-weight: 700; cursor: pointer;
    font-family: var(--mp-font); transition: all .2s cubic-bezier(.34,1.56,.64,1);
    min-height: 50px; text-decoration: none;
}
.mp-btn:active { transform: scale(.95) !important; }
.mp-btn-next, .mp-btn-submit {
    background: var(--mp-primary); color: #fff !important;
    box-shadow: 0 2px 10px rgba(20,48,110,.25);
}
.mp-btn-next:hover, .mp-btn-submit:hover {
    background: var(--mp-primary-dark); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(20,48,110,.3);
}
.mp-btn-prev {
    background: transparent; color: var(--mp-muted);
    border: 2px solid var(--mp-border); padding: 14px 20px;
}
.mp-btn-prev:hover { background: var(--mp-border); color: var(--mp-text); }

/* Result card */
.mp-result-card {
    background: #fff; border-radius: 16px; box-shadow: var(--mp-shadow-lg);
    padding: 32px 24px; text-align: center;
}
.mp-result-check { font-size: 2.5rem; margin-bottom: 12px; }
.mp-result-price { margin-bottom: 20px; }
.mp-result-label { font-size: .88rem; color: var(--mp-muted); margin-bottom: 4px; }
.mp-result-amount {
    font-size: 3.2rem; font-weight: 800; color: var(--mp-primary);
    letter-spacing: -.04em; line-height: 1.1;
}
.mp-result-vat { font-size: .82rem; color: var(--mp-muted); margin-top: 4px; }

.mp-result-details {
    display: flex; gap: 0; justify-content: center;
    margin-bottom: 20px; padding: 18px 0;
    border-top: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border);
}
.mp-result-row {
    flex: 1; text-align: center; padding: 0 12px;
    border-right: 1px solid var(--mp-border);
}
.mp-result-row:last-child { border-right: none; }
.mp-result-row span {
    display: block; font-size: .72rem; color: var(--mp-muted);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.mp-result-row strong { font-size: 1rem; font-weight: 700; }

.mp-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.mp-btn-pdf {
    background: var(--mp-accent-leesbaar); color: #fff !important;
    padding: 16px 32px; font-size: 1rem;
    box-shadow: 0 2px 10px rgba(245,165,36,.3);
}
.mp-btn-pdf:hover { background: #e3920f; transform: translateY(-1px); }

/* Price breakdown */
.mp-breakdown {
    text-align: left; max-width: 360px; margin: 0 auto 20px;
    border: 1px solid var(--mp-border); border-radius: 12px; overflow: hidden;
}
.mp-bd-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 16px; font-size: .85rem;
    border-bottom: 1px solid var(--mp-border);
}
.mp-bd-row:last-child { border-bottom: none; }
.mp-bd-row span { color: var(--mp-muted); }
.mp-bd-row strong { font-weight: 600; }
.mp-bd-vat { background: #fafafa; }
.mp-bd-total {
    background: var(--mp-primary-light); font-size: .95rem;
    padding: 10px 16px;
}
.mp-bd-total span { color: var(--mp-primary); font-weight: 700; }
.mp-bd-total strong { color: var(--mp-primary); font-size: 1.1rem; font-weight: 800; }

/* AI Advice block */
.mp-advice {
    background: #fff; border-radius: 16px; box-shadow: var(--mp-shadow);
    padding: 24px; margin-top: 16px; text-align: left;
    animation: mpFadeIn .5s ease forwards;
}
.mp-advice h3 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; color: var(--mp-primary); }
.mp-advice-stats {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.mp-advice-stat {
    flex: 1; min-width: 100px; background: var(--mp-bg); border-radius: 10px;
    padding: 10px 14px; text-align: center;
}
.mp-advice-stat-val { font-size: 1.2rem; font-weight: 800; color: var(--mp-primary); display: block; }
.mp-advice-stat-label { font-size: .72rem; color: var(--mp-muted); }
.mp-advice-tips { margin-bottom: 12px; }
.mp-advice-tip {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 0; font-size: .85rem; color: var(--mp-text);
    border-bottom: 1px solid var(--mp-border);
}
.mp-advice-tip:last-child { border-bottom: none; }
.mp-advice-tip-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.mp-advice-saving {
    background: var(--mp-accent-light); padding: 12px 16px; border-radius: 10px;
    font-size: .88rem; font-weight: 600; color: #92400e;
    display: flex; align-items: center; gap: 8px;
}

.mp-price-note { font-size: .8rem; color: var(--mp-muted); max-width: 480px; margin: 0 auto; line-height: 1.6; }
.mp-privacy { font-size: .8rem; color: var(--mp-muted); margin: 12px 0 0; }

/* ── Micro-interactions & animations ──────────────────────────────────────── */
/* Validation states */
.mp-field.mp-valid .mp-input-icon input,
.mp-field.mp-valid input { border-color: var(--mp-primary) !important; }
.mp-field.mp-valid::after { content: '\2713'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mp-primary); font-weight: 700; font-size: 1.1rem; }
.mp-field.mp-valid { position: relative; }
.mp-field.mp-invalid .mp-input-icon input,
.mp-field.mp-invalid input { border-color: #ef4444 !important; animation: mpShake .4s; }

/* Shake animation */
@keyframes mpShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.mp-shake { animation: mpShake .5s ease; }

/* Number flash */
.mp-num-flash { color: var(--mp-primary) !important; transition: color .3s; }

/* Result check bounce */
.mp-result-check { animation: mpCheckBounce .6s ease; }
@keyframes mpCheckBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* (hero animation handled by orbs now) */

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ — Smooth expand/collapse
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-faq { background: #fff; }
.mp-faq-list { max-width: 600px; margin: 0 auto; }
.mp-faq-item {
    border: 1px solid var(--mp-border); border-radius: 12px;
    margin-bottom: 10px; overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
}
.mp-faq-item[open] {
    border-color: var(--mp-primary);
    box-shadow: 0 2px 12px rgba(20,48,110,.08);
}
.mp-faq-item summary {
    padding: 16px 20px; font-weight: 600; font-size: .92rem;
    cursor: pointer; list-style: none; display: flex; align-items: center;
    justify-content: space-between;
    transition: background .3s, color .3s;
    -webkit-user-select: none; user-select: none;
    min-height: 44px;
}
.mp-faq-item summary::-webkit-details-marker { display: none; }
.mp-faq-item summary::after {
    content: '+'; font-size: 1.2rem; font-weight: 300; color: var(--mp-muted);
    transition: transform .3s ease, color .3s;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
}
.mp-faq-item[open] summary::after {
    content: '\2212';
    color: var(--mp-primary);
    transform: rotate(180deg);
}
.mp-faq-item[open] summary { background: var(--mp-primary-light); color: var(--mp-primary); }
.mp-faq-item p {
    padding: 0 20px 16px; font-size: .88rem; color: var(--mp-muted); line-height: 1.6;
    animation: mpFaqExpand .35s ease;
}
@keyframes mpFaqExpand {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM CTA
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-bottom-cta {
    background: linear-gradient(135deg, var(--mp-primary-dark) 0%, var(--mc-navy-deep) 100%);
    color: #fff; text-align: center; padding: 80px 20px;
    position: relative; overflow: hidden;
}
.mp-bottom-cta::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(43,93,176,.15) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .5;
    pointer-events: none;
}
.mp-bottom-cta h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; margin-bottom: 14px; letter-spacing: -.04em; position: relative; }
.mp-bottom-cta p { font-size: 1.05rem; opacity: .8; margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto; position: relative; }
.mp-bottom-cta-badges {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 32px; position: relative;
}
.mp-bottom-cta-badge {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    padding: 8px 20px; border-radius: 100px; font-size: .85rem; font-weight: 600;
    color: rgba(255,255,255,.9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY MOBILE PRICE BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-sticky-price {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--mp-primary);
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 16px rgba(0,0,0,.2);
}
.mp-sticky-inner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #fff; max-width: 500px; margin: 0 auto;
}
.mp-sticky-label { font-size: .8rem; opacity: .85; font-weight: 500; }
.mp-sticky-amount { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; }
.mp-sticky-vat { font-size: .72rem; opacity: .7; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-footer {
    background: var(--mp-text); color: #94a3b8;
    padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
    text-align: center; font-size: .8rem;
}
.mp-footer a { color: #cbd5e1; text-decoration: none; }
.mp-footer a:hover { color: #fff; }

@keyframes mpGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid dot pulse for hero background */
@keyframes mpGridPulse {
    0%, 100% {
        opacity: .3;
        background-position: 0 0, 30px 30px;
    }
    25% {
        opacity: .45;
        background-position: 2px 2px, 32px 32px;
    }
    50% {
        opacity: .35;
        background-position: 0 0, 30px 30px;
    }
    75% {
        opacity: .4;
        background-position: -2px -2px, 28px 28px;
    }
}

/* Gentle up/down float for decorative elements */
@keyframes mpFloatSlow {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-12px) rotate(2deg);
    }
    50% {
        transform: translateY(-6px) rotate(-1deg);
    }
    75% {
        transform: translateY(-18px) rotate(1deg);
    }
}

/* Subtle glow pulse for hero map card */
@keyframes mpGlowPulse {
    0%, 100% {
        box-shadow:
            0 20px 60px rgba(0,0,0,.5),
            0 0 80px rgba(43,93,176,.12),
            0 0 40px rgba(43,93,176,.08);
    }
    50% {
        box-shadow:
            0 20px 60px rgba(0,0,0,.5),
            0 0 100px rgba(43,93,176,.2),
            0 0 50px rgba(43,93,176,.14);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Header nav */
    .mp-nav-links {
        display: none; position: fixed; top: 56px; left: 0; right: 0;
        background: #fff; flex-direction: column; padding: 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 999;
        border-bottom: 2px solid var(--mp-primary);
    }
    .mp-nav-links.mp-nav-open { display: flex; }
    .mp-nav-link { padding: 12px 16px; font-size: .95rem; border-radius: 10px; }
    .mp-mobile-menu-btn { display: block; }
    .mp-header-cta { display: none; }
    .mp-header-login { display: none; }

    /* Hero stacks vertically */
    .mp-hero-full { padding: 80px 16px 40px; min-height: auto; }
    .mp-hero-layout { flex-direction: column; gap: 24px; }
    .mp-hero-left { text-align: center; }
    .mp-hero-right { flex: none; width: 100%; max-width: 480px; margin: 0 auto; }
    .mp-hero-map-wrap { height: 200px; }
    .mp-map-card { transform: none; }
    .mp-hero-sub { text-align: center; margin-left: auto; margin-right: auto; }

    /* Conversational form full width */
    .mp-hero-conv { max-width: 100%; }
    .mp-conv-input input { width: 100%; }

    /* Stats row wraps */
    .mp-hero-stats { justify-content: center; gap: 12px; }

    /* Trust strip 2-column */
    .mp-trust-grid { gap: 10px; }
    .mp-trust-item { flex: 1 1 calc(50% - 10px); min-width: 140px; justify-content: center; }

    /* How-it-works connecting lines hide on tablet */
    .mp-how-grid::before { display: none; }

    /* Reviews 2 col */
    .mp-reviews-grid { grid-template-columns: 1fr 1fr; }

    /* Features 2 col */
    .mp-features-grid { grid-template-columns: 1fr 1fr; }

    /* Tools 2 col */
    .mp-tools-grid { grid-template-columns: 1fr 1fr; }

    /* Stats 2x2 */
    .mp-stats-big-grid { grid-template-columns: 1fr 1fr; }
    .mp-stat-big { border-right: none; border-bottom: 1px solid var(--mp-border); }
    .mp-stat-big:nth-child(2), .mp-stat-big:nth-child(4) { border-bottom: none; }

    /* Footer 2 col */
    .mp-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; padding: 40px 20px 24px; }
    .mp-footer-brand { grid-column: 1 / -1; }
    .mp-cookie-inner { flex-direction: column; text-align: center; }
    .mp-cookie-btns { justify-content: center; }

    /* Floating elements smaller on tablet */
    .mp-float { opacity: .1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (max-width: 600px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .mp-container { padding: 0 14px; }

    /* Header */
    .mp-header { padding: 8px 0; }
    .mp-header-cta { display: none; }

    /* Hero */
    .mp-hero-full { padding: 64px 14px 28px; min-height: auto; }
    .mp-hero-layout { flex-direction: column; gap: 16px; }
    .mp-hero-left { text-align: center; }
    .mp-hero-right { flex: none; width: 100%; }
    .mp-hero-map-wrap { height: 220px; }
    .mp-map-visual { height: 170px; }
    .mp-map-card { transform: none; border-radius: 14px; animation: none; }
    .mp-hero-map-badge { font-size: .7rem; padding: 4px 10px; }
    .mp-hero-map-dist { font-size: .75rem; padding: 6px 14px; }
    .mp-map-distance { font-size: .66rem; padding: 3px 10px; }
    .mp-truck-anim { font-size: 1rem; }
    .mp-hero-full h1 { font-size: clamp(1.4rem, 7vw, 2rem); }
    .mp-hero-badge { font-size: .72rem; padding: 4px 12px; margin-bottom: 10px; }
    .mp-hero-sub { font-size: .85rem; margin: 0 auto 14px; text-align: center; }
    .mp-hero-stats { gap: 8px; justify-content: center; margin-bottom: 14px; }
    .mp-hero-stat { font-size: .75rem; }
    .mp-hero-conv { max-width: 100%; }
    .mp-conv-step { padding: 10px 12px; border-radius: 12px; }
    .mp-conv-input input { padding: 11px 12px 11px 6px; font-size: 15px; }
    .mp-orb { filter: blur(50px); opacity: .2; }
    .mp-float { display: none; }
    .mp-globe-widget { width: 48px; height: 48px; bottom: 14px; right: 14px; }
    .mp-globe-spin { width: 48px; height: 48px; }
    .mp-globe-face { font-size: 1.6rem; }
    .mp-globe-smiley { font-size: 1rem; }

    /* Sections */
    .mp-section { padding: 40px 0; }
    .mp-section-title { font-size: 1.4rem; margin-bottom: 28px; }

    /* How it works */
    .mp-how-grid { flex-direction: column; align-items: center; }
    .mp-how-card { max-width: 100%; width: 100%; }
    .mp-how-card::after { display: none; }
    .mp-how-arrow { transform: rotate(90deg); font-size: 1.2rem; }

    /* Features */
    .mp-features-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .mp-feature-card { padding: 20px 18px; }
    .mp-feat-icon-circle { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; }
    .mp-feature-icon { font-size: 1.5rem; }

    /* Stats */
    .mp-stats-big-grid { grid-template-columns: repeat(2, 1fr); }
    .mp-stat-big { border-right: none; border-bottom: 1px solid var(--mp-border); padding: 20px 12px; }

    /* Suggestions */
    .mp-suggest-grid { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .mp-suggest-card { padding: 10px 4px; }
    .mp-suggest-icon { font-size: 1.4rem; }
    .mp-suggest-label { font-size: .72rem; }
    .mp-suggest-desc { display: none; }
    .mp-suggest { padding: 12px; margin: 12px 0; }

    /* Trust strip */
    .mp-trust-grid { gap: 8px; justify-content: center; }
    .mp-trust-item {
        font-size: .78rem; flex: 1 1 calc(50% - 8px);
        padding: 10px 12px; min-width: 130px;
    }

    /* Tools */
    .mp-tools-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .mp-tool-img { height: 100px; }
    .mp-tool-body { padding: 10px 12px; }
    .mp-tool-body h3 { font-size: .82rem; }
    .mp-tool-body p { font-size: .75rem; }

    /* Reviews */
    .mp-reviews-grid { grid-template-columns: 1fr; gap: 12px; }

    /* Routes */
    .mp-routes-grid { grid-template-columns: 1fr; gap: 8px; }

    /* Calculator */
    .mp-calc-section { padding: 32px 0 100px; }
    .mp-progress-wrap { top: 50px; padding: 10px 4px; margin-bottom: 18px; }
    .mp-step-label { display: none; }
    .mp-step { padding: 4px 6px; }
    .mp-step + .mp-step::before { width: 12px; margin-right: 6px; }

    .mp-panel h2 { font-size: 1.1rem; margin-bottom: 14px; }
    .mp-field { margin-bottom: 14px; }
    .mp-row { flex-direction: column; gap: 0; }
    .mp-half, .mp-third { min-width: 100%; }

    /* Housing: 2 cols */
    .mp-housing-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mp-housing-card { padding: 14px 6px 12px; min-height: 85px; }
    .mp-housing-icon { font-size: 1.5rem; }

    /* Furniture: 2 cols */
    .mp-furniture-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
    .mp-furniture-card { padding: 12px 6px 10px; min-height: 82px; }

    /* Extras: 1 col */
    .mp-extras-grid { grid-template-columns: 1fr; gap: 8px; }

    /* Volume bar */
    .mp-volume-bar { flex-direction: column; align-items: flex-start; gap: 3px; }
    .mp-truck-rec { margin-left: 0; }

    /* Price preview */
    .mp-price-preview { padding: 18px 14px; }
    .mp-price-amount { font-size: 2rem; }

    #mpMap { height: 200px; }

    /* Nav full-width on mobile */
    .mp-nav { flex-direction: column-reverse; gap: 6px; }
    .mp-btn-next, .mp-btn-submit { width: 100%; padding: 16px; font-size: 1rem; border-radius: 14px; min-height: 50px; }
    .mp-btn-prev { width: 100%; border: none; background: transparent; color: var(--mp-muted); font-size: .88rem; padding: 10px; min-height: 44px; }

    /* Result */
    .mp-result-card { padding: 22px 14px; }
    .mp-result-amount { font-size: 2.4rem; }
    .mp-result-actions { flex-direction: column; }
    .mp-btn-pdf { width: 100%; padding: 16px; border-radius: 14px; min-height: 50px; }

    /* FAQ */
    .mp-faq-item summary { padding: 14px 16px; font-size: .88rem; min-height: 48px; }

    /* Bottom CTA */
    .mp-bottom-cta { padding: 40px 16px; }
    .mp-bottom-cta .mp-btn-hero { width: 100%; min-height: 50px; }

    /* Footer */
    .mp-footer-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
    .mp-footer-brand { grid-column: 1 / -1; }
    .mp-cookie-inner { flex-direction: column; text-align: center; }

    /* Disable hover effects on touch devices */
    .mp-feature-card:hover,
    .mp-how-card:hover,
    .mp-tool-card:hover,
    .mp-review-card:hover,
    .mp-route-card:hover,
    .mp-trust-item:hover {
        transform: none;
        box-shadow: none;
    }
    /* Keep active/tap feedback */
    .mp-feature-card:active,
    .mp-how-card:active { transform: scale(.98); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small phone (max-width: 480px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Hero adjustments */
    .mp-hero-full { padding: 60px 12px 24px; }
    .mp-hero-full h1 { font-size: clamp(1.3rem, 6.5vw, 1.75rem); }
    .mp-hero-map-wrap { height: 180px; }
    .mp-hero-badge { font-size: .68rem; padding: 3px 10px; }
    .mp-hero-sub { font-size: .82rem; }
    .mp-conv-step { padding: 8px 10px; }
    .mp-conv-input input { font-size: 16px; padding: 10px 10px 10px 6px; }
    .mp-btn-hero-go { padding: 14px 16px; font-size: .95rem; }

    /* Calculator full-width inputs */
    .mp-field input[type="text"],
    .mp-field input[type="email"],
    .mp-field input[type="tel"],
    .mp-field input[type="date"],
    .mp-field select {
        font-size: 16px;
        padding: 14px 16px;
        min-height: 52px;
    }

    /* Housing grid: 2 columns */
    .mp-housing-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .mp-housing-card { padding: 12px 4px 10px; min-height: 80px; }
    .mp-housing-icon { font-size: 1.3rem; }
    .mp-housing-label { font-size: .75rem; }

    /* Furniture grid: 2 columns */
    .mp-furniture-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .mp-furniture-card { padding: 10px 4px 8px; min-height: 76px; }
    .mp-furn-icon { font-size: 1.4rem; }
    .mp-furn-name { font-size: .72rem; }

    /* Features: single column */
    .mp-features-grid { grid-template-columns: 1fr; }

    /* Tools: single column */
    .mp-tools-grid { grid-template-columns: 1fr; }

    /* Blog / route cards: single column */
    .mp-routes-grid { grid-template-columns: 1fr; }

    /* Trust items full width */
    .mp-trust-item { flex: 1 1 100%; }

    /* Footer stacks */
    .mp-footer-inner { grid-template-columns: 1fr; gap: 16px; }
    .mp-footer-brand { grid-column: auto; }

    /* Sticky price safe area */
    .mp-sticky-price {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    /* Sections tighter */
    .mp-section { padding: 32px 0; }
    .mp-section-title { font-size: 1.25rem; margin-bottom: 24px; }

    /* Result page */
    .mp-result-amount { font-size: 2rem; }
    .mp-result-card { padding: 18px 12px; }
    .mp-result-details { flex-wrap: wrap; }
    .mp-result-row { flex: 1 1 33%; min-width: 80px; padding: 0 8px; }

    /* Globe widget smaller */
    .mp-globe-widget { width: 44px; height: 44px; bottom: 12px; right: 12px; }
    .mp-globe-spin { width: 44px; height: 44px; }
    .mp-globe-face { font-size: 1.4rem; }

    /* Cookie banner compact */
    .mp-cookie-inner p { font-size: .75rem; }
    .mp-cookie-accept, .mp-cookie-reject { padding: 8px 14px; font-size: .78rem; min-height: 44px; }
}

/* ═══ Very small: 360px ═══ */
@media (max-width: 360px) {
    .mp-hero-full h1 { font-size: 1.4rem; }
    .mp-hero-full { padding: 56px 10px 20px; }
    .mp-hero-map-wrap { height: 160px; }
    .mp-features-grid { grid-template-columns: 1fr; }
    .mp-tools-grid { grid-template-columns: 1fr; }
    .mp-result-amount { font-size: 1.8rem; }
    .mp-suggest-grid { grid-template-columns: 1fr 1fr; }
    .mp-conv-label { font-size: .78rem; }
}

/* ═══ Desktop 900px+ ═══ */
@media (min-width: 900px) {
    .mp-header-cta { display: inline-flex; }
    .mp-hero-full { padding: 120px 20px 80px; }
    .mp-container { padding: 0 24px; }
}

/* ═══ Header nav links ═══ */
.mp-nav-links { display: none; gap: 4px; }
.mp-nav-links a { text-decoration: none; color: var(--mp-muted); font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; transition: all .15s; }
.mp-nav-links a:hover { color: var(--mp-primary); background: var(--mp-primary-light); }
@media (min-width: 768px) { .mp-nav-links { display: flex; } }

/* Hide sticky price bar on desktop */
@media (min-width: 601px) { .mp-sticky-price { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERSAL FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-footer-full { background: var(--mc-navy-deep); color: #94a3b8; padding: 48px 0 0; }
.mp-footer-inner {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px; max-width: 1100px; margin: 0 auto; padding: 0 24px 32px;
}
.mp-footer-brand { margin-bottom: 16px; }
.mp-footer-logo { font-size: 1.3rem; font-weight: 400; color: #fff; }
.mp-footer-logo strong { font-weight: 800; color: var(--mp-primary); }
.mp-footer-slogan { font-size: .82rem; color: #64748b; margin-top: 6px; }
.mp-footer-social { font-size: .82rem; margin-top: 12px; }
.mp-footer-social a { color: #94a3b8; text-decoration: none; }
.mp-footer-social a:hover { color: var(--mp-primary); }
.mp-footer-col h4 { color: #e2e8f0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.mp-footer-col ul { list-style: none; padding: 0; }
.mp-footer-col li { margin-bottom: 8px; }
.mp-footer-col a { color: #94a3b8; text-decoration: none; font-size: .85rem; transition: color .15s; }
.mp-footer-col a:hover { color: var(--mp-primary); }
.mp-footer-bottom {
    border-top: 1px solid #1e293b; padding: 16px 24px;
    text-align: center; font-size: .78rem; max-width: 1100px; margin: 0 auto;
}
.mp-footer-bottom a { color: var(--mp-primary); text-decoration: none; }
.mp-footer-bottom a:hover { color: var(--mc-mist); }
.mp-footer-legal { color: #475569; font-size: .72rem; margin-top: 4px; }

/* Cookie banner */
.mp-cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: #1e293b; border-top: 1px solid #334155;
    padding: 14px 20px; box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.mp-cookie-inner {
    display: flex; align-items: center; gap: 16px; max-width: 900px; margin: 0 auto;
    flex-wrap: wrap;
}
.mp-cookie-inner p { flex: 1; min-width: 200px; font-size: .82rem; color: #94a3b8; margin: 0; }
.mp-cookie-inner a { color: var(--mp-primary); }
.mp-cookie-btns { display: flex; gap: 8px; }
.mp-cookie-accept {
    padding: 8px 18px; background: var(--mp-primary); color: #fff; border: none;
    border-radius: 8px; font-weight: 700; font-size: .82rem; cursor: pointer; font-family: inherit;
    min-height: 44px;
}
.mp-cookie-reject {
    padding: 8px 18px; background: transparent; color: #94a3b8; border: 1px solid #334155;
    border-radius: 8px; font-weight: 600; font-size: .82rem; cursor: pointer; font-family: inherit;
    min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH / MOBILE POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure minimum touch targets globally */
@media (pointer: coarse) {
    .mp-housing-card,
    .mp-furniture-card,
    .mp-extra-card,
    .mp-suggest-card,
    .mp-route-card,
    .mp-faq-item summary,
    .mp-lang a,
    .mp-btn,
    .mp-btn-hero,
    .mp-btn-hero-go,
    .mp-swap-btn,
    .mp-cookie-accept,
    .mp-cookie-reject {
        min-height: 44px;
    }

    /* No hover elevation on touch */
    .mp-feature-card:hover::before { opacity: 0; }
    .mp-map-card { animation: none; }
}

/* iOS safe area padding for bottom elements */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mp-footer-full {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mp-bottom-cta {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

/* Scroll snap for landing page sections (optional, smooth UX) */
@media (min-height: 600px) and (min-width: 769px) {
    .mp-hero-full,
    .mp-trust-strip,
    .mp-how,
    .mp-features,
    .mp-reviews,
    .mp-faq,
    .mp-bottom-cta {
        scroll-snap-align: start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: Reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Matched Movers (result panel) ────────────────────────────────────────── */
.mp-matched-movers { margin-top: 16px; }
.mp-matched-movers h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; color: var(--mp-primary); }
.mp-matched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mp-matched-card { display: block; background: #fff; border: 1px solid var(--mp-border); border-radius: 12px; padding: 14px; text-decoration: none; color: var(--mp-text); transition: all .2s; }
.mp-matched-card:hover { border-color: var(--mp-primary); transform: translateY(-2px); box-shadow: var(--mp-shadow); }
.mp-matched-card strong { display: block; font-size: .88rem; margin-bottom: 4px; }
.mp-matched-rating { display: block; font-size: .8rem; color: var(--mp-accent); }
.mp-matched-city { display: block; font-size: .75rem; color: var(--mp-muted); }

/* ── City Landing Page ───────────────────────────────────────────────────── */
.stad-hero { background: linear-gradient(135deg, var(--mc-navy-deep), var(--mc-navy), #0a1e3a); color: #fff; padding: 90px 20px 40px; text-align: center; }
.stad-hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; margin-bottom: 8px; }
.stad-hero p { opacity: .8; font-size: 1rem; }
.stad-stats { display: flex; gap: 20px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.stad-stat { background: rgba(255,255,255,.12); padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: .9rem; }
.stad-stat small { display: block; font-weight: 400; font-size: .75rem; opacity: .75; }
.stad-cta-box { text-align: center; margin: 32px 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .mp-hero-slide { transition: opacity 0.01ms !important; }
    .mp-orb, .mp-float, .mp-globe-spin, .mp-globe-face,
    .mp-globe-smiley, .mp-globe-pulse, .mp-conv-globe { animation: none !important; }
    .mp-map-card { transform: none !important; }
    .mp-reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SVG ICON FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* Float elements → CSS circles instead of emoji */
.mp-float {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(43,93,176,.15);
    backdrop-filter: blur(4px);
}
.mp-float.mp-float-1 { background: rgba(43,93,176,.12); }
.mp-float.mp-float-2 { background: rgba(245,165,36,.12); width:80px;height:80px; }
.mp-float.mp-float-3 { background: rgba(99,102,241,.1); width:45px;height:45px; }
.mp-float.mp-float-4 { background: rgba(43,93,176,.08); width:90px;height:90px; }
.mp-float.mp-float-5 { background: rgba(245,165,36,.1); width:55px;height:55px; }

/* Feature icon SVG sizing */
.mp-feature-icon { display:flex; align-items:center; justify-content:center; width:52px; height:52px; background: rgba(20,48,110,.08); border-radius:14px; margin-bottom:12px; }
.mp-feature-icon svg { flex-shrink:0; }

/* How icon SVG sizing */
.mp-how-icon { display:flex; align-items:center; justify-content:center; width:52px; height:52px; background: rgba(20,48,110,.08); border-radius:50%; margin:0 auto 12px; }

/* Trust icon sizing */
.mp-trust-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background: rgba(20,48,110,.08); border-radius:8px; flex-shrink:0; }

/* Conv globe SVG */
.mp-conv-globe { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; opacity:.8; }

/* Conv icon (pin) SVG */
.mp-conv-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Icon pin in input */
.mp-icon-pin { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Logo icon SVG */
.mp-logo-icon { display:inline-flex; align-items:center; justify-content:center; }

/* Hero stat SVG */
.mp-hero-stat svg { flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION OVERLAY
   ═══════════════════════════════════════════════════════════════════════ */
.mp-mobile-nav-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: #fff;
    display: flex; flex-direction: column;
    padding: 24px 24px 40px;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
}
.mp-mobile-nav-overlay.mp-mobile-nav-open { transform: translateX(0); }
.mp-mobile-nav-close {
    align-self: flex-end; background: none; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 8px 12px; font-size: 1rem; cursor: pointer;
    color: #64748b; margin-bottom: 24px;
}
.mp-mobile-nav-overlay nav { display:flex; flex-direction:column; gap:4px; }
.mp-mobile-nav-overlay nav a {
    display:block; padding:16px 20px; text-decoration:none;
    color: #0f172a; font-size: 1.1rem; font-weight: 600;
    border-radius: 12px; transition: background .15s;
    border-bottom: 1px solid #f1f5f9;
}
.mp-mobile-nav-overlay nav a:hover { background: #eff6ff; color: var(--mp-primary); }
.mp-mobile-nav-overlay nav a:last-child {
    margin-top: 16px; background: var(--mp-primary); color: #fff !important;
    text-align: center; border: none; font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   REVIEWS CAROUSEL — touch-friendly on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .mp-reviews-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 16px;
        scrollbar-width: none;
    }
    .mp-reviews-grid::-webkit-scrollbar { display: none; }
    .mp-review-card {
        flex: 0 0 85vw;
        max-width: 320px;
        scroll-snap-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOOLS GRID — better responsive
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .mp-tools-grid {
        grid-template-columns: 1fr !important;
    }
    .mp-footer-inner {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TRUST STRIP — better mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .mp-trust-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .mp-trust-item {
        flex-direction: column !important;
        text-align: center;
        padding: 12px 8px;
        font-size: .78rem;
    }
    .mp-trust-icon {
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO LAYOUT — better tablet
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (min-width: 601px) {
    .mp-hero-layout {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .mp-hero-left { max-width: 600px; text-align: center; }
    .mp-hero-right { width: 100%; max-width: 500px; }
    .mp-hero-sub { max-width: 100%; }
    .mp-hero-stats { justify-content: center; }
    .mp-hero-conv { max-width: 480px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CALCULATOR — better mobile steps
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .mp-step-label { display: none; }
    .mp-step-num { width: 32px; height: 32px; font-size: .85rem; }
    .mp-panel h2 { font-size: 1.1rem; }
    .mp-housing-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .mp-furniture-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .mp-extras-grid { grid-template-columns: 1fr 1fr !important; }
    .mp-row { flex-direction: column !important; }
    .mp-half, .mp-third { min-width: 100% !important; }
    .mp-result-details { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION HEADER — max-width for large screens
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    .mp-container { max-width: 1100px; }
    .mp-hero-layout { max-width: 1100px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   INLINE SVG ICONS — h3 headings & panel icons
   ═══════════════════════════════════════════════════════════════════════ */
.mp-h3-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    color: var(--mp-primary);
    flex-shrink: 0;
}
.mp-tool-body h3 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mp-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--mp-primary-light);
    border-radius: 8px;
    color: var(--mp-primary);
    vertical-align: middle;
    margin-right: 8px;
}
.mp-suggest-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--mp-primary-light), #d6e2f5);
    border-radius: 50%;
    color: var(--mp-primary);
    margin: 0 auto 8px;
}
.mp-advice h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mp-primary);
}
.mp-advice h3 svg { color: var(--mp-accent); }
.mp-extra-card span svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.mp-result-check {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO STATS — Counter + trust badges
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-hero-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.mp-stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}
.mp-stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.mp-stat-label {
    font-size: .75rem;
    color: rgba(255,255,255,.75);
    margin-top: 2px;
    letter-spacing: .5px;
}

/* Counter pulse on hover */
@keyframes mp-count-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.mp-stats-item:hover .mp-count { animation: mp-count-pulse .4s ease; display: inline-block; }

/* Hero trust badges row */
.mp-hero-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.mp-hero-trust-badges span {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW-IT-WORKS — Large numbered circles
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-how-num-large {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mp-primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(20,48,110,.35);
    border: 3px solid #fff;
}
/* Dashed connecting line between steps on desktop */
@media (min-width: 768px) {
    .mp-how-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 24px;
        right: -30px;
        width: 44px;
        height: 2px;
        border-top: 2px dashed #b9cbeb;
        z-index: 1;
    }
    .mp-how-step { position: relative; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURES — Icon circle + left border
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-feat-icon-circle {
    width: 48px;
    height: 48px;
    background: var(--mp-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.mp-feat-card {
    border-left: 3px solid var(--mp-primary) !important;
}
.mp-feat-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(20,48,110,.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWS — Aggregate score banner
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-review-aggregate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #eff6ff, var(--mp-primary-light));
    border: 1px solid #b9cbeb;
    border-radius: 50px;
    padding: 10px 24px;
    margin: 0 auto 28px;
    width: fit-content;
    flex-wrap: wrap;
}
.mp-aggregate-stars {
    color: var(--mp-accent);
    font-size: 1.1rem;
    letter-spacing: 2px;
}
.mp-aggregate-score {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--mp-primary);
}
.mp-aggregate-label {
    font-size: .85rem;
    color: var(--mp-primary-darker);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOFTWARE TEASER SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-software-teaser {
    background: var(--mp-primary);
    color: #fff;
    padding: 64px 24px;
    text-align: center;
}
.mp-software-teaser .mp-container {
    max-width: 640px;
    margin: 0 auto;
}
.mp-software-teaser h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    margin-bottom: 12px;
    color: #fff;
}
.mp-software-teaser p {
    opacity: .87;
    margin-bottom: 28px;
    font-size: 1rem;
    line-height: 1.6;
}
.mp-btn-white {
    background: #fff;
    color: var(--mp-primary);
    font-weight: 700;
    font-size: .95rem;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.mp-btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    color: var(--mp-primary);
}

/* mobiele hamburger — opent #mpMobileMenu overlay (nav was onbereikbaar op mobiel) */
.mp-mobile-nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--mp-primary);padding:6px;line-height:0;align-items:center;justify-content:center}
@media(max-width:767px){.mp-mobile-nav-toggle{display:inline-flex}}


/* mc-hero-both-visible — always show From + To + CTA in hero */
.mp-hero-conv .mp-conv-step.mp-conv-hidden { display: none !important; }
.mp-hero-conv .mp-conv-step.mp-conv-visible { display: block !important; opacity: 1 !important; transform: none !important; margin-top: 10px; }
.mp-hero-conv .mp-conv-step#mpConvA { margin-top: 0; }
.mp-hero-conv .mp-btn-hero-go { width: 100%; margin-top: 8px; }


/* ═══════════════════════════════════════════════════════════════════════════
   MERKLAAG v3 (2026-09-30) — nieuwe huisstijl "Twee huizen, één m"
   Navy #14306E · Horizonblauw #2B5DB0 · Amber #F5A524 (nooit als tekst op licht)
   Alle bestaande class-namen blijven; deze laag verandert alleen de vormgeving.
   Regels met een `body`-voorvoegsel winnen van de <style>-blokken in de pagina's.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Oude blauwe tinten die nog als attribuut in de markup staan ─────────── */
[stroke="#2563eb" i] { stroke: var(--mc-blue); }
[fill="#2563eb" i] { fill: var(--mc-blue); }
[style*="background:#2563eb" i] { background: var(--mc-navy) !important; }
[style*="color:#2563eb" i] { color: var(--mc-blue) !important; }
[style*="border:2px solid #2563eb" i] { border-color: var(--mc-line-strong) !important; }
[style*="border-left:4px solid #2563eb" i] { border-left-color: var(--mc-amber) !important; }

/* ── Header (ook op pagina's met een eigen header-blok) ─────────────────── */
body .mp-header { background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(20,48,110,.08); padding: 12px 0; }
body .mp-header.scrolled { background: rgba(255,255,255,.97); }
body .mp-logo { color: var(--mc-navy); font-size: inherit; }
body .mp-header-cta { background: var(--mc-navy); color: #fff !important; border-radius: var(--mc-pill); padding: 10px 18px; font-size: .88rem; }
body .mp-header-cta:hover { background: var(--mc-blue-dark); }
body .mp-lang a { color: var(--mc-muted); background: transparent; }
body .mp-lang a:hover { color: var(--mc-navy); background: transparent; }
body .mp-lang a.active { background: var(--mc-navy); color: #fff; }
.mp-nav-links a { color: var(--mc-ink-2); font-weight: 500; font-size: .9rem; padding: 8px 12px; }
.mp-nav-links a:hover { color: var(--mc-navy); background: var(--mc-tint); }
.mp-nav-links { display: none; }
.mp-mobile-nav-toggle { color: var(--mc-navy); width: 44px; height: 44px; border: 1px solid var(--mc-line-strong); border-radius: var(--mc-r-sm); background: #fff; }
@media (min-width: 1024px) { .mp-nav-links { display: flex; } }
@media (max-width: 1023px) {
    .mp-mobile-menu-btn { display: inline-flex; }
    .mp-mobile-nav-toggle { display: inline-flex; }
    .mp-header-login { display: none; }
}
@media (max-width: 767px) {
    .mp-header-cta { display: none !important; }
    .mp-header-right > .mp-lang { display: none; }
    .mp-header-inner { gap: 12px; }
    body .mp-header { padding: 10px 0; }
    .mp-logo, body .mp-logo { height: 32px; }
    .mp-logo:not(:has(img)) { width: 176px; height: 32px; background-size: auto 32px; }
}
/* index.php heeft geen hamburger-knop binnen 768–1023: toon daar de taalkeuze */
@media (min-width: 768px) and (max-width: 1023px) { .mp-header-right > .mp-lang { display: flex; } }

/* ── Mobiel menu ──────────────────────────────────────────────────────── */
.mp-mobile-nav-overlay { background: #fff; padding: 16px 20px 32px; visibility: hidden; transition: transform .32s var(--mc-ease), visibility 0s linear .32s; transform: translateX(100%); }
.mp-mobile-nav-overlay.mp-mobile-nav-open { visibility: visible; transform: none; transition: transform .32s var(--mc-ease), visibility 0s; }
.mp-mobile-nav-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--mc-line); }
.mp-mobile-nav-top .mp-logo { height: 32px; }
.mp-mobile-nav-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; align-self: flex-end; background: #fff; border: 1px solid var(--mc-line-strong); border-radius: var(--mc-r-sm); color: var(--mc-navy); font-size: 1.1rem; cursor: pointer; }
.mp-mobile-nav-top .mp-mobile-nav-close { align-self: center; }
.mp-mobile-nav-overlay nav { gap: 0; }
.mp-mobile-nav-overlay nav a { padding: 16px 4px; color: var(--mc-ink); font-size: 1.15rem; font-weight: 600; border-radius: 0; border-bottom: 1px solid var(--mc-line); display: flex; justify-content: space-between; align-items: center; }
.mp-mobile-nav-overlay nav a::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--mc-line-strong); border-top: 2px solid var(--mc-line-strong); transform: rotate(45deg); }
.mp-mobile-nav-overlay nav a:hover { background: transparent; color: var(--mc-blue); }
.mp-mobile-nav-overlay nav a:last-child, .mp-mobile-nav-overlay nav a.mp-mobile-nav-cta {
    margin-top: 20px; background: var(--mc-amber); color: var(--mc-navy) !important; justify-content: center;
    border: none; border-radius: var(--mc-pill); font-size: 1rem; font-weight: 700; padding: 16px 20px; box-shadow: 0 8px 20px -8px rgba(245,165,36,.7);
}
.mp-mobile-nav-overlay nav a:last-child::after, .mp-mobile-nav-overlay nav a.mp-mobile-nav-cta::after { display: none; }
.mp-mobile-nav-overlay nav a.mp-mobile-nav-cta ~ a { margin-top: 0; }
.mp-mobile-nav-lang { margin-top: 24px; display: flex; justify-content: center; }

/* ── Knoppen: één systeem ─────────────────────────────────────────────── */
.mp-btn { border-radius: var(--mc-pill); font-weight: 700; letter-spacing: -.005em; transition: background .2s, transform .2s var(--mc-ease), box-shadow .2s; }
.mp-btn:focus-visible, .mp-btn-hero:focus-visible, .mp-btn-hero-go:focus-visible { outline: 3px solid var(--mc-navy); outline-offset: 3px; }
.mp-btn-hero, .mp-btn-hero-go, .mp-btn-pdf {
    background: var(--mc-amber); color: var(--mc-navy) !important; border-radius: var(--mc-pill); font-weight: 800;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 24px -10px rgba(245,165,36,.8);
}
.mp-btn-hero:hover, .mp-btn-hero-go:hover, .mp-btn-pdf:hover { background: var(--mc-amber-hover); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 28px -10px rgba(245,165,36,.9); }
.mp-btn-next, .mp-btn-submit { background: var(--mc-navy); box-shadow: 0 8px 20px -10px rgba(20,48,110,.7); }
.mp-btn-next:hover, .mp-btn-submit:hover { background: var(--mc-blue-dark); box-shadow: 0 10px 24px -10px rgba(20,48,110,.8); }
.mp-btn-prev { border: 1.5px solid var(--mc-line-strong); color: var(--mc-ink-2); background: #fff; }
.mp-btn-prev:hover { background: var(--mc-tint); color: var(--mc-navy); }
.mp-btn-white { color: var(--mc-navy); border-radius: var(--mc-pill); }
.mp-btn-white:hover { color: var(--mc-navy); }

/* ── Home-hero ────────────────────────────────────────────────────────── */
.mp-hero-full { background: var(--mc-navy-deep); padding-top: 120px; }
.mp-hero-overlay {
    background:
        radial-gradient(900px 500px at 88% 12%, rgba(245,165,36,.16), transparent 60%),
        linear-gradient(100deg, rgba(11,29,69,.96) 0%, rgba(11,29,69,.90) 42%, rgba(20,48,110,.72) 70%, rgba(20,48,110,.55) 100%);
}
.mp-hero-full::before {
    background-image: linear-gradient(rgba(169,193,238,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(169,193,238,.07) 1px, transparent 1px);
    background-size: 56px 56px; background-position: -1px -1px; animation: none; opacity: 1; z-index: 1;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 30%, transparent 75%);
}
.mp-hero-full::after { height: 96px; }
.mp-orb, .mp-float { display: none; }
.mp-hero-badge {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(169,193,238,.28);
    color: #E6EDFA; font-size: .8rem; font-weight: 600; letter-spacing: .01em; padding: 6px 14px 6px 12px;
}
.mp-hero-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mc-amber); box-shadow: 0 0 0 4px rgba(245,165,36,.18); }
.mp-hero-full h1 { font-size: var(--mc-fs-3xl); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin-bottom: 20px; color: #fff; }
.mp-hero-accent { color: var(--mc-amber); text-shadow: none; }
.mp-hero-sub { color: #D5DFF2; opacity: 1; font-size: var(--mc-fs-md); max-width: 540px; }
.mp-hero-stats { display: none; }
.mp-hero-trust-badges { gap: 8px 20px; margin-bottom: 28px; }
.mp-hero-trust-badges span { background: none; border: 0; padding: 0; color: #D5DFF2; font-size: .88rem; font-weight: 500; backdrop-filter: none; }

/* Zoekkaart: witte, rustige vergelijker-kaart */
.mp-hero-conv {
    max-width: 540px; margin: 0; gap: 0; background: #fff; color: var(--mc-ink);
    border-radius: var(--mc-r-xl); padding: 20px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.mp-conv-step, .mp-conv-step.mp-conv-active { background: transparent; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
.mp-hero-conv .mp-conv-step.mp-conv-visible { padding: 0; margin-top: 14px; }
.mp-conv-label { color: var(--mc-ink-2); opacity: 1; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.mp-conv-label svg { color: var(--mc-blue); }
.mp-conv-globe { animation: none; opacity: 1; }
.mp-conv-input { background: var(--mc-canvas); border: 1.5px solid var(--mc-line); border-radius: var(--mc-r); padding: 0 0 0 4px; }
.mp-conv-input:focus-within { background: #fff; border-color: var(--mc-blue); box-shadow: 0 0 0 4px rgba(43,93,176,.14); }
.mp-conv-input input { color: var(--mc-ink); font-size: 16px; padding: 15px 14px 15px 6px; }
.mp-conv-input input::placeholder { color: #7A849B; }
.mp-conv-route-info { color: var(--mc-navy); }
.mp-hero-conv .mp-btn-hero-go { margin-top: 4px; min-height: 56px; font-size: 1.05rem; }

.mp-map-card { transform: none; animation: none; border-radius: var(--mc-r-xl); padding: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(169,193,238,.22); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.mp-map-card:hover { transform: none; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.mp-hero-map-wrap, .mp-hero-gmap { border-radius: 18px; }
.mp-hero-badge-a .mp-hb-pin { background: var(--mc-blue); }
.mp-hero-badge-b .mp-hb-pin { background: var(--mc-amber); color: var(--mc-navy); }
.mp-hero-map-dist { background: rgba(11,29,69,.88); box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* ── Secties, koppen, labels ──────────────────────────────────────────── */
.mp-section { padding: var(--mc-s9) 0; }
.mp-section-title { font-size: var(--mc-fs-2xl); font-weight: 800; letter-spacing: -.03em; color: var(--mc-navy); }
.mp-section-badge { background: transparent; color: var(--mc-blue); padding: 0; letter-spacing: .12em; font-size: .75rem; display: inline-flex; align-items: center; gap: 8px; }
.mp-section-badge::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--mc-amber); }
.mp-section-header { margin-bottom: var(--mc-s7); }

.mp-trust-strip { background: var(--mc-navy); padding: 6px 0; }
.mp-trust-item { color: #E6EDFA; font-weight: 500; border-right-color: rgba(169,193,238,.18); }
.mp-trust-icon { background: rgba(169,193,238,.12); color: var(--mc-mist); border-radius: 10px; }
.mp-trust-icon svg { stroke: var(--mc-mist); }

.mp-stats-section { background: #fff; }
.mp-stat-big-num { color: var(--mc-navy); font-weight: 800; }

.mp-how { background: #fff; }
.mp-how-grid::before { background: none; border-top: 2px dashed var(--mc-line-strong); height: 0; opacity: 1; top: 34px; }
.mp-how-card { padding-top: 12px; }
.mp-how-num-large { background: var(--mc-navy); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--mc-amber), 0 8px 18px -6px rgba(20,48,110,.5); }
.mp-how-icon { background: var(--mc-tint); }
.mp-how-step:not(:last-child)::after { border-top-color: var(--mc-line-strong); }
.mp-how-card h3, .mp-feature-card h3, .mp-tool-body h3 { color: var(--mc-navy); letter-spacing: -.015em; }

.mp-features { background: var(--mc-canvas); }
.mp-feature-card, .mp-feat-card { border: 1px solid var(--mc-line) !important; border-radius: var(--mc-r-lg); box-shadow: var(--mc-sh-1); padding: 28px; }
.mp-feature-card:hover, .mp-feat-card:hover { transform: translateY(-3px) !important; box-shadow: var(--mc-sh-2) !important; border-color: var(--mc-line-strong) !important; }
.mp-feat-icon-circle, .mp-feature-icon { background: var(--mc-tint); border-radius: 12px; }

.mp-tools { background: #fff; }
.mp-tool-card { border-radius: var(--mc-r-lg); box-shadow: var(--mc-sh-1); }
.mp-tool-card:hover { transform: translateY(-3px); box-shadow: var(--mc-sh-2); }
.mp-tool-img { background: linear-gradient(135deg, var(--mc-tint), #fff); }
.mp-tool-body { padding: 20px 22px 22px; }

.mp-routes { background: var(--mc-canvas); }
.mp-route-card { background: #fff; border-radius: var(--mc-r-lg); box-shadow: var(--mc-sh-1); padding: 20px 22px; }
.mp-route-card:hover { background: #fff; border-color: var(--mc-blue); box-shadow: var(--mc-sh-2); }
.mp-route-arrow { color: var(--mc-amber); }
.mp-route-meta strong { color: var(--mc-navy); }

.mp-review-card { border-left-color: var(--mc-amber); border-radius: var(--mc-r-lg); }
.mp-review-aggregate { background: var(--mc-tint); border-color: var(--mc-line); }
.mp-aggregate-label { color: var(--mc-muted); }
.mp-aggregate-score { color: var(--mc-navy); }

/* ── Calculator ───────────────────────────────────────────────────────── */
.mp-calc-section { background: linear-gradient(180deg, var(--mc-canvas), #fff); padding: 64px 0 96px; }
.mp-progress-wrap { border-radius: var(--mc-pill); box-shadow: var(--mc-sh-2); border-color: var(--mc-line); top: 72px; }
.mp-step.active { color: var(--mc-navy); }
.mp-step.active .mp-step-num { background: var(--mc-navy); box-shadow: 0 0 0 4px rgba(245,165,36,.35); }
.mp-step.done .mp-step-num { background: var(--mc-tint); color: var(--mc-blue); }
.mp-panel.active { background: #fff; border: 1px solid var(--mc-line); border-radius: var(--mc-r-xl); padding: clamp(20px, 3vw, 36px); box-shadow: var(--mc-sh-2); }
.mp-panel h2 { color: var(--mc-navy); font-size: var(--mc-fs-lg); font-weight: 800; }
.mp-panel-icon { background: var(--mc-tint); color: var(--mc-blue); border-radius: 10px; }
.mp-field label { color: var(--mc-ink-2); font-weight: 600; }
.mp-field input[type="text"], .mp-field input[type="email"], .mp-field input[type="tel"], .mp-field input[type="date"], .mp-field select {
    border: 1.5px solid var(--mc-line-strong); background-color: #fff; border-radius: var(--mc-r);
}
.mp-field input:hover, .mp-field select:hover { border-color: #AEBBD6; }
.mp-field input:focus, .mp-field select:focus { border-color: var(--mc-blue); box-shadow: 0 0 0 4px rgba(43,93,176,.14); }
.mp-housing-card, .mp-furniture-card, .mp-extra-card, .mp-suggest-card { border: 1.5px solid var(--mc-line); border-radius: var(--mc-r); }
.mp-housing-card:hover, .mp-furniture-card:hover, .mp-extra-card:hover { border-color: #AEBBD6; }
.mp-housing-card:has(input:checked), .mp-furniture-card:has(input:checked), .mp-extra-card:has(input:checked), .mp-suggest-card.active {
    border-color: var(--mc-navy); background: var(--mc-tint); box-shadow: 0 0 0 1px var(--mc-navy);
}
.mp-housing-card:has(input:focus-visible), .mp-furniture-card:has(input:focus-visible), .mp-extra-card:has(input:focus-visible) { outline: 2px solid var(--mc-blue); outline-offset: 2px; }
.mp-housing-card input, .mp-furniture-card input { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mp-suggest-icon { background: var(--mc-tint); color: var(--mc-blue); }
.mp-swap-btn { border-radius: var(--mc-pill); border-color: var(--mc-line-strong); background: #fff; color: var(--mc-navy); }
.mp-swap-btn:hover { background: var(--mc-navy); color: #fff; }
.mp-route-badge, .mp-tip, .mp-advice-saving { background: var(--mc-amber-soft); color: var(--mc-amber-ink); }
.mp-volume-bar { background: var(--mc-tint); border-color: var(--mc-line); }
.mp-price-preview { background: linear-gradient(135deg, var(--mc-navy) 0%, var(--mc-navy-deep) 100%); border-radius: var(--mc-r-lg); box-shadow: 0 16px 32px -16px rgba(11,29,69,.7); position: relative; overflow: hidden; }
.mp-price-preview::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--mc-amber); }
.mp-result-card { border-radius: var(--mc-r-xl); border: 1px solid var(--mc-line); }
.mp-result-amount { color: var(--mc-navy); }
.mp-advice h3, .mp-matched-movers h3 { color: var(--mc-navy); }
.mp-advice-stat-val { color: var(--mc-navy); }
.mp-bd-total, .mp-bd-total span, .mp-bd-total strong { color: var(--mc-navy); }
.mp-sticky-price { background: var(--mc-navy); }
.mp-field.mp-valid .mp-input-icon input, .mp-field.mp-valid input { border-color: #1F7A4D !important; }
.mp-field.mp-valid::after { color: #1F7A4D; }
.mp-matched-card { border-radius: var(--mc-r); }
.mp-matched-rating { color: var(--mc-amber-ink); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.mp-faq-list { max-width: 760px; }
.mp-faq-item { background: #fff; border-radius: var(--mc-r); border-color: var(--mc-line); }
.mp-faq-item summary { font-size: 1rem; color: var(--mc-navy); padding: 18px 20px; }
.mp-faq-item summary::after { border-radius: 50%; background: var(--mc-tint); color: var(--mc-blue); font-weight: 500; }
.mp-faq-item[open] { border-color: var(--mc-line-strong); box-shadow: var(--mc-sh-1); }
.mp-faq-item[open] summary { background: transparent; color: var(--mc-navy); }
.mp-faq-item[open] summary::after { background: var(--mc-navy); color: #fff; }
.mp-faq-item p { color: var(--mc-ink-2); font-size: .95rem; }

/* ── Donkere CTA-vlakken ──────────────────────────────────────────────── */
.mp-bottom-cta, .mp-software-teaser {
    background:
        radial-gradient(600px 300px at 85% 0%, rgba(245,165,36,.18), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, rgba(43,93,176,.45), transparent 60%),
        var(--mc-navy-deep);
    color: #fff;
}
.mp-bottom-cta::before { background-image: linear-gradient(rgba(169,193,238,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(169,193,238,.06) 1px, transparent 1px); background-size: 56px 56px; opacity: 1; }
.mp-bottom-cta p, .mp-software-teaser p { color: #D5DFF2; opacity: 1; }
.mp-bottom-cta-badge { background: rgba(255,255,255,.06); border-color: rgba(169,193,238,.25); color: #E6EDFA; }
.mp-software-teaser { padding: 80px 24px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.mp-footer-full { background: var(--mc-navy-deep); color: #B7C3DC; padding-top: 64px; position: relative; }
.mp-footer-full::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--mc-navy) 0 70%, var(--mc-amber) 70% 100%); }
.mp-footer-logo { display: block; width: 184px; height: 34px; background: url("/assets/brand/logo-wit.svg") no-repeat left center / auto 34px; font-size: 0; color: transparent; overflow: hidden; }
.mp-footer-logo i { display: none; }
.mp-footer-slogan { color: #B7C3DC; font-size: .88rem; margin-top: 12px; }
.mp-footer-social a, .mp-footer-col a { color: #C4D2EE; }
.mp-footer-social a:hover, .mp-footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mp-footer-col h4 { color: #fff; font-size: .75rem; letter-spacing: .12em; }
.mp-footer-bottom { border-top-color: rgba(169,193,238,.14); color: #8C9BBB; }
.mp-footer-bottom a { color: var(--mc-mist); }
.mp-footer-bottom a:hover { color: #fff; }
.mp-footer-legal { color: #8C9BBB; }
body .mp-footer { background: var(--mc-navy-deep); color: #B7C3DC; border-bottom: 1px solid rgba(169,193,238,.12); }
body .mp-footer a { color: #C4D2EE; }
body .mp-footer a:hover { color: #fff; }

/* ── Cookiebanner: zwevende kaart ─────────────────────────────────────── */
.mp-cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; border-radius: var(--mc-r-lg); background: var(--mc-navy-deep); border: 1px solid rgba(169,193,238,.2); box-shadow: 0 24px 48px -12px rgba(0,0,0,.45); padding: 16px 20px; }
.mp-cookie-inner p { color: #D5DFF2; }
.mp-cookie-inner a { color: var(--mc-mist); }
.mp-cookie-accept { background: var(--mc-amber); color: var(--mc-navy); border-radius: var(--mc-pill); }
.mp-cookie-accept:hover { background: var(--mc-amber-hover); }
.mp-cookie-reject { color: #E6EDFA; border-color: rgba(169,193,238,.35); border-radius: var(--mc-pill); }
.mp-cookie-reject:hover { border-color: #fff; }

/* ═══ Binnenpagina's: gedeelde hero ═════════════════════════════════════ */
body .vst-hero, body .tariff-hero, body .land-hero, body .vp-hero, body .contact-hero, body .stad-hero {
    background:
        radial-gradient(700px 360px at 92% -10%, rgba(245,165,36,.20), transparent 60%),
        radial-gradient(900px 500px at -10% 120%, rgba(43,93,176,.55), transparent 60%),
        linear-gradient(160deg, var(--mc-navy-deep) 0%, var(--mc-navy) 100%);
    color: #fff; position: relative; overflow: hidden;
}
body .vst-hero::after, body .tariff-hero::after, body .land-hero::after, body .contact-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(169,193,238,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(169,193,238,.06) 1px, transparent 1px);
    background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%);
}
body .vst-hero > *, body .tariff-hero > *, body .land-hero > *, body .contact-hero > * { position: relative; z-index: 1; }
body .vst-hero h1, body .tariff-hero h1, body .land-hero h1, body .vp-hero h1, body .contact-hero h1 { letter-spacing: -.03em; font-weight: 800; }
body .vst-hero p, body .tariff-hero p, body .land-hero p, body .contact-hero p { color: #D5DFF2; opacity: 1; }
body .vp-hero::before { background: radial-gradient(circle, rgba(245,165,36,.14), transparent 70%); }

/* Gedeelde tabelstijl */
body .vst-table thead, body .domestic-table thead th, body .tariff-table thead th, body .costs-table thead th { background: var(--mc-navy); color: #fff; }
body .tariff-table thead th:hover { background: var(--mc-blue-dark); }
body .vst-td-price, body .domestic-table .dt-price, body .price-cell, body .costs-price, body .vst-stat-val { color: var(--mc-blue); }
body .domestic-table tbody tr:nth-child(even) { background: var(--mc-canvas); }
body .domestic-table tbody tr:hover, body .tariff-table tbody tr:hover, body .costs-table tbody tr:hover, body .vst-table tbody tr:hover td { background: var(--mc-tint); }
body .vst-table, body .domestic-table-wrap, body .tariff-table-wrap, body .costs-table-wrap { border-radius: var(--mc-r-lg); border-color: var(--mc-line); box-shadow: var(--mc-sh-1); }

/* Gedeelde kaarten & CTA-vlakken */
body .cta-section { background: radial-gradient(600px 300px at 85% 0%, rgba(245,165,36,.18), transparent 60%), var(--mc-navy-deep); }
body .cta-section p { color: #D5DFF2; opacity: 1; }
body .cta-btn { background: var(--mc-amber); color: var(--mc-navy); border-radius: var(--mc-pill); font-weight: 800; }
body .cta-btn:hover { background: var(--mc-amber-hover); }
body .mp-section-title { color: var(--mc-navy); letter-spacing: -.03em; }
body .mp-section-sub { color: var(--mc-muted); }

/* ── Stadspagina ──────────────────────────────────────────────────────── */
body .vst-btn-hero-primary { background: var(--mc-amber); color: var(--mc-navy); border-radius: var(--mc-pill); }
body .vst-btn-hero-outline { border-radius: var(--mc-pill); border-color: rgba(169,193,238,.45); }
body .vst-badge { background: rgba(255,255,255,.08); border-color: rgba(169,193,238,.28); }
body .vst-section-title { color: var(--mc-navy); letter-spacing: -.02em; }
body .vst-section-sub, body .vst-stat-label, body .dir-loc { color: var(--mc-muted); }
body .vst-tip-icon { background: var(--mc-amber-soft); }
body .vst-tip-icon path { stroke: var(--mc-amber-ink); }
body .vst-tip-card, body .vst-faq-item, body .dir-card { border-color: var(--mc-line); border-radius: var(--mc-r-lg); }
body .dir-card { box-shadow: var(--mc-sh-1); }
body .dir-card:hover { border-color: var(--mc-line-strong); box-shadow: var(--mc-sh-2); transform: translateY(-2px); }
body .dir-card-featured { border-color: var(--mc-amber); box-shadow: 0 0 0 1px var(--mc-amber); }
body .dir-badge-verified { background: var(--mc-tint); color: var(--mc-blue); }
body .dir-badge-unclaimed { background: var(--mc-canvas); color: var(--mc-muted); }
body .dir-btn-primary { background: var(--mc-navy); border-radius: var(--mc-pill); }
body .dir-btn-primary:hover { background: var(--mc-blue-dark); }
body .dir-btn-outline { border-color: var(--mc-line-strong); border-radius: var(--mc-pill); color: var(--mc-navy); }
body .dir-btn-outline:hover { border-color: var(--mc-navy); }
body .vst-cta-block { background: var(--mc-tint); border-color: var(--mc-line); }
body .vst-cta-main-btn { background: var(--mc-amber); color: var(--mc-navy); border-radius: var(--mc-pill); }
body .vst-cta-main-btn:hover { box-shadow: 0 12px 24px -10px rgba(245,165,36,.8); }
body .vst-faq-a a, body .vst-back { color: var(--mc-blue); }
body .vst-nearby-link { border-color: var(--mc-line); border-radius: var(--mc-pill); }
body .vst-nearby-link:hover { background: var(--mc-tint); border-color: var(--mc-blue); color: var(--mc-navy); }
body .vst-nearby-link.current { background: var(--mc-navy); border-color: var(--mc-navy); color: #fff; }

/* ── Tarieven ─────────────────────────────────────────────────────────── */
body .tariff-hero-stat { background: rgba(255,255,255,.07); border-color: rgba(169,193,238,.25); color: #E6EDFA; border-radius: var(--mc-pill); }
body .calc-card { border-color: var(--mc-line); border-radius: var(--mc-r-xl); box-shadow: var(--mc-sh-2); }
body .calc-field label { color: var(--mc-ink-2); }
body .calc-field select { border-color: var(--mc-line-strong); background-color: #fff; border-radius: var(--mc-r); }
body .calc-field select:focus { border-color: var(--mc-blue); box-shadow: 0 0 0 4px rgba(43,93,176,.14); }
body .calc-field input[type="range"] { accent-color: var(--mc-navy); }
body .calc-field input[type="range"]::-webkit-slider-thumb { background: var(--mc-navy); box-shadow: 0 0 0 3px var(--mc-amber); }
body .calc-field input[type="range"]::-moz-range-thumb { background: var(--mc-navy); }
body .calc-field input[type="range"]::-webkit-slider-runnable-track { background: var(--mc-line-strong); }
body .volume-display strong { color: var(--mc-navy); }
body .calc-radio { border-color: var(--mc-line-strong); border-radius: var(--mc-r); }
body .calc-radio:has(input:checked) { border-color: var(--mc-navy); background: var(--mc-tint); color: var(--mc-navy); }
body .calc-btn { background: var(--mc-navy); border-radius: var(--mc-pill); }
body .calc-btn:hover { background: var(--mc-blue-dark); box-shadow: 0 10px 22px -10px rgba(20,48,110,.8); }
body .calc-result { background: var(--mc-tint); border: 1px solid var(--mc-line-strong); border-radius: var(--mc-r-lg); }
body .calc-result-title { color: var(--mc-navy); }
body .calc-result-route, body .calc-result-price { color: var(--mc-navy); }
body .faq-section { background: var(--mc-canvas); }
body .faq-item { border-color: var(--mc-line); border-radius: var(--mc-r); }
body .faq-q { color: var(--mc-navy); }
body .faq-q:hover { background: var(--mc-canvas); }
body .faq-q-icon { background: var(--mc-tint); color: var(--mc-blue); }
body .faq-item.open .faq-q-icon { background: var(--mc-navy); color: #fff; }
body .country-card { border-color: var(--mc-line); border-radius: var(--mc-r-lg); }
body .country-card:hover { border-color: var(--mc-line-strong); box-shadow: var(--mc-sh-2); }
body .country-name { color: var(--mc-navy); }
body .country-tag { color: var(--mc-blue); }

/* ── Landpagina ───────────────────────────────────────────────────────── */
body .facts-card { border-color: var(--mc-line); border-radius: var(--mc-r-xl); box-shadow: var(--mc-sh-2); }
body .facts-card h2 { color: var(--mc-navy); }
body .fact-label { color: var(--mc-muted); }
body .fact-value { color: var(--mc-ink); }
body .fact-badge-yes { background: #E3F4EA; color: #17613D; }
body .docs-check { border-color: var(--mc-line-strong); border-radius: 6px; }
body .docs-check.checked { background: var(--mc-navy); border-color: var(--mc-navy); }
body .tip-card, body .blog-item { border-color: var(--mc-line); border-radius: var(--mc-r-lg); box-shadow: var(--mc-sh-1); }
body .tip-card:hover, body .blog-item:hover { border-color: var(--mc-line-strong); box-shadow: var(--mc-sh-2); }
body .tip-num { background: var(--mc-navy); color: #fff; border-radius: 10px; }
body .blog-item-title { color: var(--mc-navy); }
body .other-card { background: #fff; border-color: var(--mc-line); border-radius: var(--mc-r); }
body .other-card:hover { background: var(--mc-tint); border-color: var(--mc-blue); color: var(--mc-navy); }

/* ── Verhuizersprofiel ────────────────────────────────────────────────── */
body .vp-logo-wrap { background: rgba(255,255,255,.08); border-color: rgba(169,193,238,.25); border-radius: var(--mc-r-lg); }
body .vp-badge-verified { background: rgba(169,193,238,.14); color: #DCE6F8; border-color: rgba(169,193,238,.3); }
body .vp-badge-claimed { background: rgba(169,193,238,.14); color: #DCE6F8; border-color: rgba(169,193,238,.3); }
body .vp-badge-featured { background: rgba(245,165,36,.18); color: #FFD89A; border-color: rgba(245,165,36,.35); }
body .vp-hero-btn { border-radius: var(--mc-pill); }
body .vp-hero-btn-primary { background: var(--mc-amber); color: var(--mc-navy) !important; }
body .vp-hero-btn-primary:hover { background: var(--mc-amber-hover); }
body .vp-hero-btn-outline { border-color: rgba(169,193,238,.35); background: rgba(255,255,255,.06); }
body .vp-card, body .vp-rel-card { border: 1px solid var(--mc-line); border-radius: var(--mc-r-lg); box-shadow: var(--mc-sh-1); }
body .vp-rel-card:hover { border-color: var(--mc-line-strong); box-shadow: var(--mc-sh-2); }
body .vp-card-title { color: var(--mc-navy); }
body .vp-info-value a, body .vp-side a[href^="tel"], body .vp-side a[href^="http"] { color: var(--mc-blue); }
body .vp-claim-cta { background: var(--mc-amber-soft); border: 1px solid #F3D9A4; border-radius: var(--mc-r-lg); }
body .vp-claim-cta span { color: var(--mc-amber-ink); }
body .vp-claim-cta a { background: var(--mc-navy); border-radius: var(--mc-pill); }
body .vp-claim-cta a:hover { background: var(--mc-blue-dark); }
body .vp-side-cta-primary { background: var(--mc-navy); border-radius: var(--mc-pill); }
body .vp-side-cta-outline { border-radius: var(--mc-pill); border-color: var(--mc-line-strong); color: var(--mc-navy); }
body .vp-side-cta-accent { background: var(--mc-amber-soft); color: var(--mc-amber-ink); border-color: #F3D9A4; border-radius: var(--mc-pill); }
body .vp-side-cta-accent:hover { background: #FBE3B3; }
body .vp-review-reply { background: var(--mc-tint); border-left-color: var(--mc-blue); }
body .vp-review-reply-head { color: var(--mc-blue); }

/* ── Contact ──────────────────────────────────────────────────────────── */
body .contact-card { border: 1px solid var(--mc-line); border-radius: var(--mc-r-lg); box-shadow: var(--mc-sh-1); transition: box-shadow .2s, transform .2s; }
body .contact-card:hover { box-shadow: var(--mc-sh-2); transform: translateY(-2px); }
body .contact-icon { color: var(--mc-blue); }
body .contact-card a { color: var(--mc-blue); }

/* ── Chatknop & chatvenster uit footer.php ────────────────────────────── */
body .mp-chat-msg.user { background: var(--mc-navy); }
body .mp-chat-input:focus { border-color: var(--mc-blue); }
body .mp-chat-send { background: var(--mc-navy); }

/* ── Mobiel ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mp-hero-full { padding-top: 96px; }
    .mp-hero-conv { margin: 0 auto; }
    .mp-hero-trust-badges { justify-content: center; }
}
@media (max-width: 600px) {
    .mp-hero-full { padding: 84px 16px 32px; }
    .mp-hero-full h1 { font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.06; }
    .mp-hero-sub { font-size: 1rem; color: #D5DFF2; }
    .mp-hero-badge { font-size: .75rem; }
    .mp-hero-conv { padding: 16px; border-radius: 20px; }
    .mp-hero-trust-badges { gap: 6px 14px; margin-bottom: 20px; }
    .mp-hero-trust-badges span { font-size: .82rem; }
    .mp-section { padding: 56px 0; }
    .mp-section-title { font-size: 1.65rem; }
    .mp-progress-wrap { border-radius: var(--mc-r-lg); top: 60px; }
    .mp-panel.active { border-radius: var(--mc-r-lg); padding: 18px; }
    .mp-cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 14px; }
    .mp-footer-full { padding-top: 48px; }
    .mp-footer-inner { padding: 0 20px 28px !important; }
}
@media (max-width: 480px) {
    .mp-section { padding: 48px 0; }
    .mp-section-title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-mobile-nav-overlay { transition: none; }
}

/* ── Verfijning na eerste render ──────────────────────────────────────── */
body .mp-header { background: rgba(255,255,255,.97); }
.mp-hero-overlay {
    background:
        radial-gradient(900px 500px at 88% 12%, rgba(245,165,36,.14), transparent 60%),
        linear-gradient(100deg, rgba(11,29,69,.97) 0%, rgba(11,29,69,.92) 45%, rgba(20,48,110,.82) 72%, rgba(20,48,110,.74) 100%);
}
.mp-conv-input .mp-conv-icon { padding: 0; margin-left: 12px; width: 18px; height: 18px; }
.mp-input-icon .mp-icon-pin { width: 18px; height: 18px; }
/* Hoe werkt het: icoon in het midden, nummer als klein label */
.mp-how-arrow, .mp-how-step:not(:last-child)::after { display: none !important; }
.mp-how-card { padding: 0 24px 16px; }
.mp-how-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: #fff; border: 1.5px solid var(--mc-line-strong); box-shadow: var(--mc-sh-1); position: relative; }
.mp-how-icon svg { width: 28px; height: 28px; }
.mp-how-grid::before { top: 32px; left: 18%; right: 18%; }
.mp-how-num-large { top: -8px; left: calc(50% + 18px); transform: none; width: 28px; height: 28px; font-size: .8rem; border-width: 2px; box-shadow: 0 4px 10px -2px rgba(20,48,110,.5); margin: 0; }
.mp-how-card:hover .mp-how-num-large { transform: none; }
body .mp-chat-fab { background: var(--mc-navy); box-shadow: 0 10px 24px -8px rgba(11,29,69,.6), 0 0 0 3px rgba(245,165,36,.0); }
body .mp-chat-fab:hover { background: var(--mc-blue-dark); }
body .mp-chat-header { background: var(--mc-navy); }
body .vp-hero::before { background: radial-gradient(circle, rgba(169,193,238,.12), transparent 70%); }
@media (max-width: 600px) { body .mp-chat-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; font-size: 24px; } }
/* Header past op 1024–1279: CTA wijkt (Calculator staat in het menu), bredere header-container */
.mp-header .mp-container.mp-header-inner { max-width: 1240px; }
@media (min-width: 1024px) and (max-width: 1279px) { .mp-header-right > .mp-header-cta { display: none !important; } }
/* Taalkeuze in het mobiele menu: niet als menuregel of CTA stylen */
.mp-mobile-nav-overlay nav .mp-mobile-nav-lang .mp-lang a {
    display: inline-block; margin: 0; padding: 8px 16px; min-width: 52px; font-size: .85rem; font-weight: 700;
    border: 0; border-radius: var(--mc-pill); background: transparent; color: var(--mc-muted) !important; box-shadow: none; text-align: center;
}
.mp-mobile-nav-overlay nav .mp-mobile-nav-lang .mp-lang a::after { display: none; }
.mp-mobile-nav-overlay nav .mp-mobile-nav-lang .mp-lang a.active { background: var(--mc-navy); color: #fff !important; }
.mp-mobile-nav-overlay { z-index: 10000; }

/* ═══ Review-ronde 30-09: reparaties na UI-controle ═════════════════════ */
/* Calculator: keuzekaarten waren display:block door ".mp-field label" → icoon, naam en m³ liepen door elkaar */
.mp-field .mp-housing-card, .mp-field .mp-furniture-card { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mp-field .mp-extra-card { display: flex; align-items: center; gap: 12px; }
.mp-extra-card span { display: inline-flex; align-items: center; gap: 6px; }
.mp-extra-card span svg { margin: 0; color: var(--mc-blue); }
.mp-housing-m3, .mp-furn-m3 { white-space: nowrap; }
.mp-volume-bar #mpVolume { font-weight: 800; color: var(--mc-navy); }
@media (max-width: 768px) { .mp-volume-bar { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px; } .mp-truck-rec { flex-basis: 100%; } }
/* Stap 3-icoon was een FontAwesome-<i> zonder FontAwesome → leeg vlak */
.mp-panel-icon i.fa-calendar, .mp-panel-icon i.fa-house { display: inline-block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--mc-ico) center / contain no-repeat; mask: var(--mc-ico) center / contain no-repeat; }
.mp-panel-icon i.fa-calendar::before, .mp-panel-icon i.fa-house::before { content: none; }
.mp-panel-icon i.fa-calendar { --mc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2zm12 8H5v10h14V10z'/%3E%3C/svg%3E"); }
.mp-panel-icon i.fa-house { --mc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
.mp-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; }

/* Homepage: "Waarom"-rij had 4 kaarten in 3 kolommen (weeskaart) */
@media (min-width: 1024px) { .mp-features-grid { grid-template-columns: repeat(4, 1fr); max-width: 1200px; } }
@media (min-width: 640px) and (max-width: 1023px) { .mp-features-grid { grid-template-columns: repeat(2, 1fr); } }
/* Hero vervaagde naar wit en sprong dan naar de navy trustbalk */
.mp-hero-full::after { display: none; }
/* Minder leegte tussen routes en calculator */
.mp-calc-section { padding-top: 32px; }
/* Pijl in routekaarten: amber op wit = 2,0:1 → horizonblauw */
.mp-route-arrow { color: var(--mc-blue); }
/* Grijze tekst uit inline stijlen (#64748b = 4,3:1 op canvas) → muted */
[style*="color:#64748b" i] { color: var(--mc-muted) !important; }

/* Chatknop: groene puls-ring (oud thema) en te lichte rode badge */
@keyframes mc-pulse { 0% { box-shadow: 0 10px 24px -8px rgba(11,29,69,.6), 0 0 0 0 rgba(245,165,36,.55); } 70% { box-shadow: 0 10px 24px -8px rgba(11,29,69,.6), 0 0 0 14px rgba(245,165,36,0); } 100% { box-shadow: 0 10px 24px -8px rgba(11,29,69,.6), 0 0 0 0 rgba(245,165,36,0); } }
body .mp-chat-fab.pulse { animation-name: mc-pulse; }
body .mp-chat-fab .mp-chat-badge { background: #C62828; }
body .mp-chat-msg.user a { color: var(--mc-mist); }

/* Homepage (eigen header): taalkeuze ook op mobiel, logo boven in het menu */
@media (max-width: 767px) {
    .mp-header-right:has(> .mp-mobile-nav-toggle) > .mp-lang { display: flex; }
    .mp-header-right:has(> .mp-mobile-nav-toggle) > .mp-lang a { padding: 5px 8px; min-width: 0; font-size: .72rem; }
    .mp-header-right:has(> .mp-mobile-nav-toggle) { gap: 8px; }
}
@media (max-width: 379px) { .mp-header-right:has(> .mp-mobile-nav-toggle) > .mp-lang { display: none; } }
#mpMobileMenu:not(:has(.mp-mobile-nav-top))::before {
    content: ''; position: absolute; top: 22px; left: 20px; width: 176px; height: 32px;
    background: url("/assets/brand/logo.svg") no-repeat left center / auto 32px;
}

/* Blog: hero stond nog op het oude felblauw, badges in 6 losse kleuren */
body .blog-hero {
    background: radial-gradient(700px 360px at 92% -10%, rgba(245,165,36,.18), transparent 60%), linear-gradient(160deg, var(--mc-navy-deep) 0%, var(--mc-navy) 100%);
}
body .blog-hero p { color: #D5DFF2; opacity: 1; }
body .cat-tab { background: rgba(255,255,255,.08); border-color: rgba(169,193,238,.3); color: #E6EDFA; }
body .cat-tab:hover { background: rgba(255,255,255,.16); }
body .cat-tab.active { background: #fff; color: var(--mc-navy); border-color: #fff; }
body .blog-search input { background: rgba(255,255,255,.1); border: 1px solid rgba(169,193,238,.3); }
body .blog-search input::placeholder { color: #C4D2EE; }
body .blog-card-badge { background: var(--mc-tint) !important; color: var(--mc-navy); letter-spacing: .06em; }
body .sidebar-views, body .sidebar-cat-count { color: var(--mc-muted); }
body .sidebar-list li a:hover { color: var(--mc-blue); }

/* Voor verhuizers: nog helemaal oud thema (felblauw + groen) */
body .vv-hero { background: radial-gradient(700px 360px at 92% -10%, rgba(245,165,36,.18), transparent 60%), radial-gradient(900px 500px at -10% 120%, rgba(43,93,176,.55), transparent 60%), linear-gradient(160deg, var(--mc-navy-deep) 0%, var(--mc-navy) 100%); }
body .vv-hero h1 { letter-spacing: -.03em; }
body .vv-hero h1 span { color: var(--mc-amber); }
body .vv-hero p { color: #D5DFF2; opacity: 1; }
body .vv-badge { background: rgba(255,255,255,.08); border-color: rgba(169,193,238,.3); color: #E6EDFA; }
body .vv-hero-cta { background: var(--mc-amber); color: var(--mc-navy); }
body .vv-hero-cta:hover { background: var(--mc-amber-hover); }
body .vv-section-title, body .vv-step h3, body .vv-benefit h3, body .vv-plan-name, body .vv-reg-benefits h2, body .vv-form-card h2, body .vv-faq-q, body .vv-success h2 { color: var(--mc-navy); }
body .vv-section-sub, body .vv-step p, body .vv-benefit p, body .vv-plan-desc, body .vv-plan-price span, body .vv-reg-perk-text span, body .vv-form-login, body .vv-faq-a { color: var(--mc-muted); }
body .vv-steps::before { background: repeating-linear-gradient(90deg, var(--mc-line-strong) 0 8px, transparent 8px 16px); }
body .vv-step-num { background: var(--mc-navy); box-shadow: 0 4px 12px -2px rgba(20,48,110,.45); }
body .vv-step, body .vv-benefit, body .vv-plan, body .vv-faq-item, body .vv-form-card { border-color: var(--mc-line); border-radius: var(--mc-r-lg); }
body .vv-benefit-icon, body .vv-success-icon { background: var(--mc-tint); color: var(--mc-blue); }
body .vv-plan-price { color: var(--mc-navy); }
body .vv-plan-features li svg, body .vv-reg-perk svg, body .vv-faq-q svg { color: var(--mc-blue); }
body .vv-plan.popular { border-color: var(--mc-navy); box-shadow: var(--mc-sh-3); }
body .vv-popular-badge { background: var(--mc-amber); color: var(--mc-navy); }
body .vv-plan-btn { border-radius: var(--mc-pill); }
body .vv-plan-btn.outline { border-color: var(--mc-navy); color: var(--mc-navy); }
body .vv-plan-btn.outline:hover { background: var(--mc-tint); }
body .vv-plan-btn.solid, body .vv-submit { background: var(--mc-navy); border-color: var(--mc-navy); color: #fff; }
body .vv-plan-btn.solid:hover, body .vv-submit:hover { background: var(--mc-blue-dark); }
body .vv-reg-perk { background: var(--mc-tint); border-color: var(--mc-line); }
body .vv-form-group input:focus { border-color: var(--mc-blue); box-shadow: 0 0 0 3px rgba(43,93,176,.18); }
body .vv-form-login a, body .vv-success a, body .vv-form-error a { color: var(--mc-blue); }
/* Niet-onderbouwde cijfers en partnerquotes verborgen (zie verslag): 10.000+/maand, 4.8/5, "1.247 leads", 3 namen met sterren */
body .vv-stats, body .vv-hero-pulse, body .vv-reviews { display: none; }

/* Verhuiskosten: groen uitgelicht bedrag (oud thema) */
body .vk-answer { background: rgba(255,255,255,.07); border-color: rgba(169,193,238,.3); }
body .vk-answer strong { color: var(--mc-amber); }
body .vk-content h2 { color: var(--mc-navy); }
body .vk-table th { background: var(--mc-navy); }
body .vk-table .price { color: var(--mc-blue); }

/* Vergelijk: groenige CTA-strook */
body .vgl-bottom-cta { background: var(--mc-canvas); border-top: 1px solid var(--mc-line); }

/* 404: verloop van blauw naar amber was onleesbaar grijs */
body .e404-box { background: none; -webkit-text-fill-color: var(--mc-navy); color: var(--mc-navy); letter-spacing: -.04em; }
body .e404-links a { border-radius: var(--mc-pill); }
body .e404-btn { background: var(--mc-navy); }
/* Hoe werkt het, mobiel: stappen plakten tegen elkaar (icoon direct onder vorige tekst) */
@media (max-width: 767px) { .mp-how-grid { row-gap: 32px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   R3-GLOBAAL-20260930 — sitebrede verfijning (header, overgangen, footer,
   voortgangsbalk, terug-naar-boven, skeleton). Staat bewust ONDERAAN zodat het
   de eerdere lagen overschrijft. Animatietaal: zie de kop van dit bestand.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header: bovenaan rustig wit, bij scrollen compacter met blur ────────── */
html body .mp-header {
    background: rgba(255,255,255,.94);
    padding: 12px 0;
    border-bottom: 1px solid rgba(20,48,110,.07);
    transition: padding var(--mc-dur-2) var(--mc-ease), background-color var(--mc-dur-2) var(--mc-ease),
                box-shadow var(--mc-dur-2) var(--mc-ease), border-color var(--mc-dur-2) var(--mc-ease);
    view-transition-name: mc-header;
}
html body .mp-header .mp-logo { transition: height var(--mc-dur-2) var(--mc-ease); }
html body .mp-header.scrolled {
    padding: 6px 0;
    background: rgba(255,255,255,.74);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border-bottom-color: rgba(20,48,110,.10);
    box-shadow: 0 10px 30px -18px rgba(14,27,61,.35);
}
html body .mp-header.scrolled .mp-logo { height: 30px; }
html body .mp-header.scrolled .mp-header-cta { padding: 8px 16px; }
html body .mp-header.scrolled .mp-header-login { padding: 7px 13px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body .mp-header.scrolled { background: rgba(255,255,255,.97); }
}
@media (max-width: 767px) {
    html body .mp-header { padding: 10px 0; }
    html body .mp-header.scrolled { padding: 6px 0; }
    html body .mp-header.scrolled .mp-logo { height: 28px; }
    html body .mp-header.scrolled .mp-mobile-menu-btn { width: 40px; height: 40px; }
}
.mp-mobile-menu-btn { transition: width var(--mc-dur-2) var(--mc-ease), height var(--mc-dur-2) var(--mc-ease), background-color var(--mc-dur-1); }

/* ── Voortgangsbalk (alleen lange pagina's; JS zet hem in de header) ─────── */
.mc-progress {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
    background: var(--mc-amber); transform-origin: 0 50%; transform: scaleX(var(--mc-p, 0));
    transition: opacity var(--mc-dur-2) var(--mc-ease);
}
.mc-progress[hidden] { display: none; }

/* ── Terug naar boven (JS maakt de knop; zonder JS bestaat hij niet) ─────── */
.mc-totop {
    position: fixed; right: 30px; bottom: calc(100px + var(--mc-totop-lift, 0px)); z-index: 9990;
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--mc-line-strong);
    background: rgba(255,255,255,.92); color: var(--mc-navy); cursor: pointer;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--mc-sh-2);
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(.92);
    transition: opacity var(--mc-dur-3) var(--mc-ease), transform var(--mc-dur-3) var(--mc-ease-spring),
                visibility 0s linear var(--mc-dur-3), background-color var(--mc-dur-1), border-color var(--mc-dur-1);
}
.mc-totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mc-totop:hover { background: #fff; border-color: var(--mc-navy); }
.mc-totop:focus-visible { outline: 2px solid var(--mc-blue); outline-offset: 3px; }
.mc-totop svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .mc-totop { right: 20px; bottom: calc(80px + var(--mc-totop-lift, 0px)); width: 44px; height: 44px; } }

/* ── Paginaovergangen (View Transitions; niet-ondersteund = gewone navigatie) */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: mc-vt-out var(--mc-dur-2) var(--mc-ease-in-out) both; }
    ::view-transition-new(root) { animation: mc-vt-in var(--mc-dur-3) var(--mc-ease) both; }
    ::view-transition-group(mc-header) { animation-duration: var(--mc-dur-2); }
}
@keyframes mc-vt-out { to { opacity: 0; } }
@keyframes mc-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ── Skeleton: vlak met glans zolang een beeld/blok nog laadt ────────────── */
.mc-skel, [data-mc-skel]:not(.is-loaded) {
    background-color: #E7ECF5;
    background-image: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 80%);
    background-size: 220% 100%; background-repeat: no-repeat;
    animation: mc-shimmer 1.3s var(--mc-ease-in-out) infinite;
}
.mc-skel--dark, [data-mc-skel="dark"]:not(.is-loaded) {
    background-color: var(--mc-navy);
    background-image: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(169,193,238,.12) 50%, rgba(255,255,255,0) 80%);
}
@keyframes mc-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ── Footer: rijker, met logo, routes, landen en de SellYourOwnHouse-kaart ── */
.mp-footer-full { background: var(--mc-navy-deep); color: #B5C3DE; padding: 64px 0 0; position: relative; }
.mp-footer-full::before { /* [POLIJST-20260930] 48px accentbalk op de linkerrand van de footerkolom */
    content: ''; position: absolute; top: 0; height: 4px; width: 48px; border-radius: 0 0 2px 2px;
    left: max(20px, calc(50% - 596px)); background: var(--mc-amber);
}
.mp-footer-full .mp-footer-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px;
    max-width: 1200px; margin: 0 auto; padding: 0 20px 40px;
}
.mp-footer-full .mp-footer-lead { grid-column: 1 / -1; }
@media (min-width: 720px) { .mp-footer-full .mp-footer-inner { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) {
    .mp-footer-full .mp-footer-inner { grid-template-columns: 1.55fr 1fr 1fr 1.2fr .85fr; gap: 28px; }
    .mp-footer-full .mp-footer-lead { grid-column: auto; }
}
.mp-footer-full .mp-footer-lead { display: flex; flex-direction: column; gap: 18px; max-width: 420px; }
.mp-footer-full .mp-footer-logo { display: inline-block; line-height: 0; background: none; width: auto; height: auto; overflow: visible; }
.mp-footer-full .mp-footer-logo img { height: 34px; width: auto; display: block; }
.mp-footer-full .mp-footer-slogan { color: #C9D5EC; font-size: .92rem; line-height: 1.6; margin: 0; }
.mp-footer-full .mp-footer-mail { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; width: fit-content; }
.mp-footer-full .mp-footer-mail svg { width: 18px; height: 18px; color: var(--mc-mist); flex-shrink: 0; }
.mp-footer-full .mp-footer-mail:hover { color: var(--mc-mist); }
.mp-footer-full .mp-footer-col h4 {
    color: #fff; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 16px;
}
.mp-footer-full .mp-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mp-footer-full .mp-footer-col li { margin: 0; }
.mp-footer-full .mp-footer-col li > a {
    display: inline-block; padding: 6px 0; line-height: 1.45;
    color: #B5C3DE; font-size: .88rem; text-decoration: none;
    transition: color var(--mc-dur-1) var(--mc-ease), transform var(--mc-dur-2) var(--mc-ease);
}
.mp-footer-full .mp-footer-col li > a:hover { color: #fff; transform: translateX(2px); }
.mp-footer-full .mp-footer-routes a { overflow-wrap: anywhere; }
.mp-footer-full .mp-footer-routes .mc-arrow { color: var(--mc-amber); }
/* SellYourOwnHouse — zusterdienst; alleen MC-kleuren (merkregel: niet mengen) */
.mc-syoh-card {
    display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
    padding: 16px 18px; border-radius: var(--mc-r-lg); text-decoration: none;
    background: rgba(255,255,255,.05); border: 1px solid rgba(169,193,238,.22); color: #fff;
    transition: background-color var(--mc-dur-2) var(--mc-ease), border-color var(--mc-dur-2) var(--mc-ease), transform var(--mc-dur-2) var(--mc-ease);
}
.mc-syoh-card:hover { background: rgba(255,255,255,.09); border-color: rgba(169,193,238,.45); transform: translateY(-2px); }
.mc-syoh-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(169,193,238,.14); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.mc-syoh-ico svg { width: 24px; height: 24px; }
.mc-syoh-card strong { display: block; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.mc-syoh-card small { display: block; font-size: .8rem; color: #C9D5EC; line-height: 1.45; margin-top: 2px; }
.mc-syoh-go { color: var(--mc-amber); font-size: 1.1rem; transition: transform var(--mc-dur-2) var(--mc-ease); }
.mc-syoh-card:hover .mc-syoh-go { transform: translateX(3px); }
.mp-footer-full .mp-footer-bottom {
    max-width: 1200px; margin: 0 auto; padding: 18px 20px 24px; border-top: 1px solid rgba(169,193,238,.16);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; text-align: left;
    font-size: .78rem; color: #9FB0D1;
}
.mp-footer-full .mp-footer-bottom p { margin: 0; }
.mp-footer-full :focus-visible { outline-color: var(--mc-amber); }
@media (max-width: 719px) {
    .mp-footer-full { padding-top: 48px; }
    .mp-footer-full .mp-footer-inner { padding: 0 16px 32px !important; gap: 28px 20px; }
    .mp-footer-full .mp-footer-routes { grid-column: 1 / -1; }
    .mp-footer-full .mp-footer-bottom { padding: 16px 16px 88px; flex-direction: column; } /* ruimte voor de chatknop */
}

/* ── Chatknop: merkkleuren + lijnicoon i.p.v. emoji ──────────────────────── */
html body .mp-chat-fab { background: var(--mc-navy); color: #fff; transition: transform var(--mc-dur-2) var(--mc-ease), background-color var(--mc-dur-1); }
html body .mp-chat-fab:hover { background: var(--mc-blue-dark); transform: translateY(-2px); }
.mp-chat-fab svg { width: 26px; height: 26px; }
html body .mp-chat-msg.user, html body .mp-chat-send { background: var(--mc-navy); }
html body .mp-chat-send:hover { background: var(--mc-blue-dark); }
html body .mp-chat-send:disabled { background: var(--mc-line-strong); }
html body .mp-chat-input:focus { border-color: var(--mc-blue); }

/* ── Minder beweging ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root { --mc-dur-1: 1ms; --mc-dur-2: 1ms; --mc-dur-3: 1ms; --mc-dur-4: 1ms; --mc-rise: 0px; }
    .mc-skel, [data-mc-skel]:not(.is-loaded) { animation: none; }
    .mc-totop, .mc-syoh-card, .mp-footer-full .mp-footer-col li > a { transform: none !important; }
}

/* ── [POLIJST-20260930] Cookiebalk: nooit meer over de hoofdknop ─────────────── */
.mp-ck-short { display: none; }
html.mp-has-cookiebar body { padding-bottom: 104px; }
@media (max-width: 640px) {
    .mp-cookie-banner { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none; border-radius: 16px 16px 0 0 !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; border-width: 1px 0 0; }
    .mp-cookie-inner { flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 10px; text-align: left !important; }
    .mp-cookie-inner p { min-width: 0; font-size: .8rem !important; line-height: 1.3; }
    .mp-cookie-btns { gap: 6px; flex-shrink: 0; }
    .mp-cookie-accept, .mp-cookie-reject { min-height: 40px !important; padding: 6px 12px !important; font-size: .78rem !important; white-space: nowrap; }
    .mp-ck-long { display: none; }
    .mp-ck-short { display: inline; }
    html.mp-has-cookiebar body { padding-bottom: 72px; }
}
html.mp-has-cookiebar #mp-chat-bubble { bottom: 112px !important; transition: bottom .2s; }
@media (max-width: 640px) { html.mp-has-cookiebar #mp-chat-bubble { bottom: 80px !important; } }

/* ── [POLIJST2-20260930] Cookiebalk als compacte kaart + minder zwevende lagen ─────────────────
   Desktop: kaart van max. 400 px rechtsonder (de hero-knop staat links, de chatknop wijkt zolang de kaart er is).
   Tablet/mobiel: smalle balk over de volle breedte, body houdt ruimte vrij. */
/* [POLIJST3-20260930] Desktop: smalle balk (±56 px) over de volle breedte onderaan i.p.v. een kaart van 400×115 die
   prijstabellen en de zijbalk-CTA bedekte; body houdt onderaan ruimte vrij. */
@media (min-width: 1024px) {
    .mp-cookie-banner { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none; width: auto; margin: 0; border-radius: 0 !important; border-width: 1px 0 0; padding: 8px 24px !important; box-shadow: 0 -10px 30px -12px rgba(0,0,0,.35); }
    .mp-cookie-inner { flex-direction: row !important; flex-wrap: nowrap; align-items: center !important; justify-content: space-between; gap: 20px !important; text-align: left !important; max-width: 1192px; margin: 0 auto; }
    .mp-cookie-inner p { min-width: 0 !important; font-size: .82rem !important; line-height: 1.4; }
    .mp-cookie-btns { justify-content: flex-end !important; gap: 8px; flex-shrink: 0; }
    .mp-cookie-accept, .mp-cookie-reject { min-height: 38px !important; padding: 6px 16px !important; font-size: .8rem !important; white-space: nowrap; }
    html.mp-has-cookiebar body { padding-bottom: 60px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
    .mp-cookie-banner { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none; margin: 0; border-radius: 16px 16px 0 0 !important; border-width: 1px 0 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
    .mp-cookie-inner { flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 14px; text-align: left !important; max-width: none; }
    .mp-cookie-inner p { min-width: 0; font-size: .8rem !important; line-height: 1.35; }
    .mp-cookie-btns { flex-shrink: 0; gap: 8px; }
    .mp-cookie-accept, .mp-cookie-reject { min-height: 40px !important; padding: 6px 14px !important; font-size: .8rem !important; white-space: nowrap; }
    html.mp-has-cookiebar body { padding-bottom: 76px; }
}
/* Eén zwevende laag tegelijk: de chatknop wacht tot de cookiekaart weg is en wijkt voor de sticky CTA (mobiel). */
html.mp-has-cookiebar body .mp-chat-fab, html.mp-has-cookiebar #mp-chat-bubble { display: none !important; }
@media (max-width: 760px) {
    .mc-totop { display: none !important; }
    html.mch-mcta-on body .mp-chat-fab, html.mch-mcta-on #mp-chat-bubble { display: none !important; }
}
@media (max-width: 760px) {
    html:has(#mpStickyPrice:not([style*="none"])) body .mp-chat-fab { display: none !important; }
}

/* ── [POLIJST2-20260930] Eén containerbreedte voor header, hero's, secties en footer (linkerlijn springt niet meer) ── */
:root { --mc-container: 1192px; --mc-gutter: 20px; }
@media (min-width: 1024px) {
    .mp-container:not(.mp-container--narrow), .st-wrap:not(.st-wrap--narrow), html body .vp-layout, html body .mcp-hero-inner, html body .mcp-wrap,
    html body .cor-wrap, .mp-footer-full .mp-footer-inner, html body .mp-header .mp-container.mp-header-inner {
        max-width: calc(var(--mc-container) + 2 * var(--mc-gutter)); padding-left: var(--mc-gutter); padding-right: var(--mc-gutter); box-sizing: border-box;
    }
    html body .vp-hero-inner { max-width: var(--mc-container); }
    .land-body .mp-container.lnd-hero-inner, .land-body .mp-container { padding-left: var(--mc-gutter); padding-right: var(--mc-gutter); }
}

/* COOKIELINK-TIKBAAR-20260930 — de link naar het cookiebeleid was op mobiel 38×15 px ("(beleid)"): nauwelijks te raken.
   Tikvlak nu ≥ 44 px hoog; de negatieve marge houdt de balk even hoog. */
.mp-cookie-inner a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:-12px -2px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:#fff}
.mp-cookie-inner a:focus-visible{outline:2px solid var(--mc-amber,#f5a524);outline-offset:2px;border-radius:6px}
.mp-cookie-accept,.mp-cookie-reject{min-height:44px}

/* ── HEADER2-20260930 — functionelere header ─────────────────────────────────
   Desktop: "Landen" als uitklapmenu (hover + klik + toetsenbord). Mobiel: altijd een "Bereken"-knop in de balk,
   menu met uitleg per onderdeel, landen als chips, contact. */
.mc-dd { position: relative; display: inline-flex; }
.mc-dd-knop { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--mc-ink-2); font-weight: 500; font-size: .9rem; padding: 8px 12px; border-radius: 8px; }
.mc-dd-knop:hover, .mc-dd-open .mc-dd-knop { color: var(--mc-navy); background: var(--mc-tint); }
.mc-dd-knop svg { transition: transform .2s; }
.mc-dd-open .mc-dd-knop svg, .mc-dd:hover .mc-dd-knop svg { transform: rotate(180deg); }
.mc-dd-paneel { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 10px; background: #fff; border: 1px solid var(--mc-line); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(15,23,42,.25); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s linear .18s; z-index: 1000; }
.mc-dd-paneel::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }  /* brug: hover blijft bij het naar beneden bewegen */
.mc-dd:hover .mc-dd-paneel, .mc-dd:focus-within .mc-dd-paneel, .mc-dd-open .mc-dd-paneel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity .18s, transform .18s, visibility 0s; }
.mp-nav-links .mc-dd-paneel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: .92rem; color: var(--mc-ink); font-weight: 500; white-space: nowrap; }
.mc-dd-paneel a span { font-size: 1.2rem; line-height: 1; }
.mp-nav-links .mc-dd-paneel a:hover, .mp-nav-links .mc-dd-paneel a:focus-visible { background: var(--mc-tint); color: var(--mc-navy); }

/* Mobiel: primaire actie altijd één tik weg */
.mc-mobiel-cta { display: none; }
@media (max-width: 767px) {
    .mc-mobiel-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-right: 8px; border-radius: var(--mc-pill, 999px); background: var(--mc-amber, #f5a524); color: var(--mc-navy, #0f2a5c) !important; font-weight: 800; font-size: .9rem; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(245,165,36,.8); white-space: nowrap; }
    .mp-header-right { display: flex; align-items: center; }
}

/* Mobiel menu: uitleg onder elk onderdeel */
.mp-mobile-nav-overlay { overflow-y: auto; }
.mp-mobile-nav-overlay nav a.mp-mobile-nav-cta { margin: 8px 0 12px; }
.mc-rij { display: flex; flex-direction: column; gap: 2px; }
.mc-rij small { font-size: .8rem; font-weight: 500; color: var(--mc-muted, #64748b); }
.mc-chips-kop { margin: 20px 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-muted, #64748b); }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 🪤 `nav a:last-child` maakt van elke laatste link een oranje knop — hier bewust teruggedraaid */
.mp-mobile-nav-overlay nav .mc-chips a, .mp-mobile-nav-overlay nav .mc-chips a:last-child { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--mc-line, #e2e8f0); border-radius: 999px; background: #fff; box-shadow: none; font-size: .9rem; font-weight: 600; color: var(--mc-ink) !important; justify-content: flex-start; }
.mp-mobile-nav-overlay nav .mc-chips a::after, .mp-mobile-nav-overlay nav .mc-contact a::after { display: none; }
.mc-contact { margin-top: 20px; font-size: .9rem; color: var(--mc-muted, #64748b); }
.mp-mobile-nav-overlay nav .mc-contact a, .mp-mobile-nav-overlay nav .mc-contact a:last-child { display: inline; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: .9rem; font-weight: 700; color: var(--mc-blue, #1d4ed8) !important; }

/* PRIJS-VOOR-GEGEVENS-20260930 — de cookiebalk (z 9999, ±61 px) lag op mobiel precies over de zwevende prijsbalk.
   Zolang hij zichtbaar is (html.mp-has-cookiebar) schuift de prijsbalk erboven. */
html.mp-has-cookiebar .mp-sticky-price { bottom: 64px; }
@media (max-width: 360px) { html.mp-has-cookiebar .mp-sticky-price { bottom: 94px; } }
/* ── [COMPACT-20260930] Footer mobiel (< 600 px): minder lucht, routes in twee kolommen, juridisch naast landen-rij.
      Alle links blijven staan; tikdoel blijft ≥ 32 px hoog. De SellYourOwnHouse-kaart vervalt alleen op pagina's die
      zelf al een zusterblok tonen (home, routegids). ── */
@media (max-width: 599px) {
    .mp-footer-full { padding-top: 32px; }
    .mp-footer-full .mp-footer-inner { gap: 22px 16px; padding-bottom: 20px !important; }
    .mp-footer-full .mp-footer-lead { gap: 12px; }
    .mp-footer-full .mp-footer-col h4 { margin-bottom: 8px; }
    .mp-footer-full .mp-footer-col ul { gap: 0; }
    .mp-footer-full .mp-footer-col li > a { padding: 5px 0; line-height: 1.35; min-height: 32px; box-sizing: border-box; }
    .mp-footer-full .mp-footer-routes ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .mp-footer-full .mp-footer-routes li > a { font-size: .84rem; }
    .mp-footer-full .mp-footer-inner > .mp-footer-col:last-child:not(.mp-footer-routes):not(.mp-footer-lead) { grid-column: 1 / -1; }
    .mp-footer-full .mp-footer-inner > .mp-footer-col:last-child:not(.mp-footer-routes):not(.mp-footer-lead) ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .mp-footer-full .mp-footer-bottom { padding-top: 14px; padding-bottom: 80px; }
    body:has(.mch-syoh, .cor-syoh) .mp-footer-full .mc-syoh-card { display: none; }
}