:root{ --color-red:#E30613;--color-red-dark:#b8040f;--color-black:#000000;--color-dark:#111111;--color-dark2:#1a1a1a;--color-dark3:#1e1e1e;--color-white:#ffffff;--color-gray:#666666;--color-gray-light:#f5f5f5;--color-gray-border:#e0e0e0;--font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--font-display:'Outfit', sans-serif;--transition:all 0.25s ease;--shadow:0 2px 8px rgba(0,0,0,0.08);--shadow-md:0 4px 16px rgba(0,0,0,0.12);--shadow-lg:0 8px 32px rgba(0,0,0,0.16);--radius:6px;--radius-lg:12px;} *, *::before, *::after{ box-sizing:border-box;margin:0;padding:0;} html{ scroll-behavior:smooth;overflow-x:hidden;} body{ font-family:var(--font-family);background:var(--color-white);color:var(--color-black);line-height:1.6;overflow-x:hidden;} img{ max-width:100%;height:auto;display:block;} a{ text-decoration:none;color:inherit;transition:var(--transition);} ul{ list-style:none;} h1, h2, h3, h4, h5, h6, .logo-name, .hero-title, .section-heading, .section-heading-light, .ms-spotlight-name, .ms-card-name, .stat-number, .wk-number, .cta-text-block h2, .spotlight-text h2{ font-family:var(--font-display);} .container{ width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem;} .btn{ display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.75rem;font-size:0.875rem;font-weight:700;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:var(--transition);text-transform:uppercase;letter-spacing:0.75px;white-space:nowrap;} .btn-primary{ background:var(--color-red);color:var(--color-white);border-color:var(--color-red);} .btn-primary:hover{ background:var(--color-red-dark);border-color:var(--color-red-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(227,6,19,0.3);} .btn-outline{ display:inline-flex;align-items:center;gap:0.5rem;background:transparent;color:var(--color-black);border-color:var(--color-black);} .btn-outline:hover{ border-color:var(--color-red);color:var(--color-red);background:transparent;} .btn-hero-outline{ background:rgba(255,255,255,0.12);color:var(--color-white);border-color:rgba(255,255,255,0.9);} .btn-hero-outline:hover{ background:rgba(255,255,255,0.25);border-color:var(--color-white);} .btn-white{ background:var(--color-white);color:var(--color-red);border-color:var(--color-white);font-weight:700;} .btn-white:hover{ background:var(--color-gray-light);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.15);} .btn-lg{ padding:0.9rem 2.25rem;font-size:0.95rem;} .topbar{ background:var(--color-red);color:var(--color-white);font-size:0.8rem;font-weight:500;padding:0.5rem 0;} .topbar-inner{ display:flex;align-items:center;justify-content:space-between;} .topbar-left{ display:flex;gap:1.5rem;} .topbar-left span{ display:flex;align-items:center;gap:0.4rem;color:rgba(255,255,255,0.9);} .topbar-left svg{ width:14px;height:14px;flex-shrink:0;} .topbar-left strong{ color:var(--color-white);} .topbar-right a{ color:var(--color-white);font-weight:600;font-size:0.8rem;letter-spacing:0.5px;} .topbar-right a:hover{ text-decoration:underline;} .header{ position:sticky;top:0;z-index:1000;background:rgba(255, 255, 255, 0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(224, 224, 224, 0.5);box-shadow:0 4px 20px rgba(0,0,0,0.03);transition:var(--transition);} .header-inner{ display:flex;align-items:center;justify-content:space-between;height:68px;} .logo{ display:flex;align-items:center;gap:0.6rem;} .logo-img{ height:44px;width:auto;} .logo-text{ display:flex;flex-direction:column;line-height:1.1;} .logo-name{ font-size:1.35rem;font-weight:900;color:var(--color-red);letter-spacing:1px;} .logo-tagline{ font-size:0.6rem;font-weight:600;color:#555555;text-transform:uppercase;letter-spacing:1.5px;} .nav{ display:flex;align-items:center;gap:2rem;} .nav-list{ display:flex;align-items:center;gap:0.25rem;} .nav-link{ font-size:0.875rem;font-weight:600;color:var(--color-black);padding:0.4rem 0.75rem;border-radius:var(--radius);} .nav-link:hover, .nav-link.active{ color:var(--color-red);} .nav-dropdown{ position:relative;padding-bottom:10px;margin-bottom:-10px;} .dropdown-menu{ visibility:hidden;position:absolute;top:100%;left:0;min-width:220px;background:var(--color-white);border:1px solid var(--color-gray-border);border-top:3px solid var(--color-red);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:100;padding:0.5rem 0;opacity:0;transform:translateY(10px);transition:all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);pointer-events:none;} .nav-dropdown:hover .dropdown-menu{ visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;} .nav-dropdown::after{ content:'';position:absolute;top:100%;left:0;width:100%;height:12px;z-index:99;} .dropdown-menu li a{ display:block;padding:0.6rem 1.25rem;font-size:0.875rem;font-weight:500;color:var(--color-black);} .dropdown-menu li a:hover{ background:var(--color-gray-light);color:var(--color-red);} .mobile-menu-btn{ display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px;} .mobile-menu-btn span{ display:block;width:26px;height:2px;background:var(--color-black);transition:var(--transition);} .mobile-menu-btn.active span:nth-child(1){ transform:rotate(45deg) translate(5px, 5px);} .mobile-menu-btn.active span:nth-child(2){ opacity:0;} .mobile-menu-btn.active span:nth-child(3){ transform:rotate(-45deg) translate(5px, -5px);} .mobile-nav{ display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--color-white);padding:5rem 1.5rem 2rem;z-index:998;overflow-y:auto;border-top:3px solid var(--color-red);} .mobile-nav.active{ display:block;} .mobile-nav-list{ display:flex;flex-direction:column;gap:0;margin-bottom:2rem;} .mobile-nav-link{ font-size:1.2rem;font-weight:700;color:var(--color-black);padding:1rem 0;border-bottom:1px solid var(--color-gray-border);display:block;} .mobile-nav-link:hover{ color:var(--color-red);} .mobile-nav-dropdown-btn{ width:100%;display:flex;align-items:center;justify-content:space-between;font-size:1.2rem;font-weight:700;color:var(--color-black);padding:1rem 0;border-bottom:1px solid var(--color-gray-border);background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;font-family:var(--font-family);text-align:left;} .mobile-nav-dropdown-btn:hover{ color:var(--color-red);} .mobile-nav-dropdown-btn svg{ width:18px;height:18px;flex-shrink:0;transition:transform 0.25s;color:var(--color-gray);} .mobile-nav-dropdown-item.open .mobile-nav-dropdown-btn svg{ transform:rotate(180deg);color:var(--color-red);} .mobile-nav-sub{ display:none;padding:0.5rem 0 0.75rem 1rem;border-bottom:1px solid var(--color-gray-border);} .mobile-nav-dropdown-item.open .mobile-nav-sub{ display:block;} .mobile-nav-sub a{ display:block;font-size:0.95rem;font-weight:600;color:var(--color-gray);padding:0.5rem 0;text-decoration:none;transition:color 0.2s;} .mobile-nav-sub a:hover{ color:var(--color-red);} .hero{ position:relative;min-height:95vh;display:flex;align-items:center;overflow:hidden;background:url('../images/hero_home.webp') center/cover no-repeat;} .hero-bg-overlay{ position:absolute;inset:0;background:linear-gradient(90deg, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.7) 45%, rgba(17,17,17,0.1) 100%);z-index:1;} .hero::after{ display:none;} .hero-red-shape{ display:none;} .hero .container{ position:relative;z-index:2;padding-top:3rem;padding-bottom:4rem;} .hero-content{ max-width:680px;} .hero-eyebrow{ display:inline-block;font-size:0.75rem;font-weight:700;color:var(--color-red);text-transform:uppercase;letter-spacing:2.5px;margin-bottom:1.25rem;padding:0.35rem 0.85rem;border:1px solid rgba(227,6,19,0.4);border-radius:2px;} .hero-title{ font-size:clamp(2.4rem, 5.5vw, 4.2rem);font-weight:900;line-height:1.05;color:var(--color-white);margin-bottom:1.5rem;letter-spacing:-1px;} .hero-subtitle{ font-size:1.05rem;color:rgba(255,255,255,0.95);line-height:1.7;margin-bottom:2.5rem;max-width:540px;} .hero-actions{ display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem;} .hero-badges{ display:flex;gap:1.5rem;flex-wrap:wrap;} .hero-badge{ display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.95);} .hero-badge svg{ width:16px;height:16px;color:var(--color-red);flex-shrink:0;} .services-section{ background-color:var(--color-gray-light);background-image:radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);background-size:24px 24px;padding:6rem 0;} .section-intro{ text-align:center;max-width:560px;margin:0 auto 4rem;} .section-heading{ font-size:clamp(1.8rem, 3.5vw, 2.5rem);font-weight:800;color:var(--color-black);margin:0.5rem 0 1rem;line-height:1.2;} .section-sub{ color:#444444;font-size:1.05rem;} .label-red{ display:inline-block;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--color-red);} .ms-spotlight{ display:flex;align-items:stretch;background:linear-gradient(135deg, var(--color-dark2) 0%, var(--color-black) 100%);border-radius:16px;overflow:hidden;margin-bottom:4rem;box-shadow:0 15px 40px rgba(0,0,0,0.15);position:relative;z-index:1;} .ms-spotlight-image{ background-image:url('../images/renovatie.webp');background-size:cover;background-position:center;} .ms-spotlight-image.img-deco{ background-image:url('../images/handdecoratie.webp');} .ms-spotlight-image::before{ content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%);z-index:-1;} .ms-spotlight-text{ flex:1;padding:4rem;position:relative;z-index:2;} .ms-spotlight-badge{ display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--color-white);background:var(--color-red);padding:0.4rem 0.8rem;border-radius:4px;margin-bottom:1.25rem;} .ms-spotlight-name{ font-size:2.5rem;font-weight:900;color:var(--color-white);margin-bottom:1rem;line-height:1.1;font-family:var(--font-display);} .ms-spotlight-desc{ font-size:1rem;color:rgba(255,255,255,0.7);line-height:1.8;margin-bottom:2rem;max-width:540px;} .ms-spotlight-link{ display:inline-flex;align-items:center;gap:0.6rem;background:var(--color-white);color:var(--color-red);padding:0.8rem 2rem;border-radius:var(--radius);font-size:0.85rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;transition:var(--transition);} .ms-spotlight-link:hover{ background:var(--color-red);color:var(--color-white);transform:translateY(-2px);box-shadow:0 10px 20px rgba(227,6,19,0.3);} .ms-spotlight-side{ width:240px;flex-shrink:0;background:rgba(227,6,19,0.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;border-left:1px solid rgba(255,255,255,0.05);color:rgba(255,255,255,0.3);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;text-align:center;} .ms-spotlight-side svg{ width:90px;height:90px;opacity:0.5;} .ms-category{ margin-bottom:4rem;} .ms-cat-label{ display:flex;align-items:center;gap:1rem;font-size:0.8rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--color-dark);margin-bottom:1.5rem;} .ms-cat-label::before{ content:'';display:block;width:40px;height:3px;background:var(--color-red);flex-shrink:0;} .ms-row{ display:grid;gap:1.5rem;margin-bottom:1.5rem;} .ms-row-2-1{ grid-template-columns:2fr 1fr;} .ms-row-1-2{ grid-template-columns:1fr 2fr;} .ms-row-3{ grid-template-columns:repeat(3, 1fr);} .ms-card{ display:flex;flex-direction:column;border-radius:16px;padding:2.5rem;text-decoration:none;color:var(--color-black);transition:transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;position:relative;overflow:hidden;background:rgba(255, 255, 255, 0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 15px rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.03);z-index:1;} .ms-card-image{ background-color:var(--color-dark);background-size:cover;background-position:center;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;color:var(--color-white);} .ms-card-image::before{ content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);z-index:-1;transition:background 0.4s ease;} .ms-card-image:hover::before{ background:linear-gradient(to top, rgba(227,6,19,0.85) 0%, rgba(0,0,0,0.6) 100%);} .ms-card-image .ms-card-name, .ms-card-image .ms-card-desc, .ms-card-image .ms-card-link{ color:var(--color-white);} .ms-card-image .ms-card-desc{ color:rgba(255,255,255,0.8);} .ms-card-image .ms-card-link{ color:var(--color-white);} .ms-card-image .ms-card-step{ color:var(--color-white);opacity:0.3;} .ms-card-image:hover .ms-card-step{ opacity:1;} .img-renov{ background-image:url('../images/diensten/renovatie-service.webp');} .img-stuc{ background-image:url('../images/diensten/stucwerk-service.webp');} .img-paint{ background-image:url('../images/diensten/schilderwerk-service.webp');} .img-sloop{ background-image:url('../images/sloopwerk.webp');} .img-plumbing{ background-image:url('../images/loodgieterswerk.webp');} .img-electra{ background-image:url('../images/elektra.webp');} .img-maint{ background-image:url('../images/vve_onderhoud.webp');} .img-floor{ background-image:url('../images/diensten/pvc-vloeren.webp');} .img-floor-prep{ background-image:url('../images/vloeren.webp');} .img-deco{ background-image:url('../images/handdecoratie.webp');} .img-tile{ background-image:url('../images/tegelwerk.webp');} .img-bathroom{ background-image:url('../images/tegelwerk.webp');} .ms-card:hover{ transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,0.2);} .ms-card-big:hover, .ms-card-sm:hover, .ms-card-dark:hover, .ms-card-accent:hover, .ms-card-hd:hover{ transform:translateY(-8px) scale(1.02);} .ms-card-big{ border-top:3px solid transparent;} .ms-card-big:hover{ border-top-color:var(--color-red);} .ms-card-accent:not(.ms-card-image){ background:linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);border:none;} .ms-card-accent.ms-card-image::before{ background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);} .ms-card-accent.ms-card-image:hover::before{ background:linear-gradient(to top, rgba(180,4,12,0.85) 0%, rgba(0,0,0,0.6) 100%);} .ms-card-accent:hover{ box-shadow:0 20px 40px rgba(227,6,19,0.25);} .ms-card-accent .ms-card-link{ color:var(--color-white);} .ms-card-accent .ms-card-name{ color:var(--color-white);} .ms-card-accent .ms-card-desc{ color:rgba(255,255,255,0.85);} .ms-card-dark:not(.ms-card-image){ background:linear-gradient(135deg, var(--color-dark2) 0%, #2a2a2a 100%);border:1px solid rgba(255,255,255,0.05);} .ms-card-dark.ms-card-image{ border:none;} .ms-card-dark.ms-card-image::before{ background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.35) 100%);} .ms-card-dark.ms-card-image:hover::before{ background:linear-gradient(to top, rgba(180,4,12,0.85) 0%, rgba(0,0,0,0.6) 100%);} .ms-card-dark:hover{ box-shadow:0 20px 40px rgba(227,6,19,0.3);border-color:rgba(227,6,19,0.3);} .ms-card-dark .ms-card-name{ color:var(--color-white);} .ms-card-dark .ms-card-desc{ color:rgba(255,255,255,0.65);} .ms-card-dark .ms-card-link{ color:var(--color-white);} .ms-card-sm{ min-height:220px;} .ms-card-hd:not(.ms-card-image){ background:linear-gradient(135deg, #111 0%, #1a1a1a 100%);} .ms-card-step{ font-family:var(--font-display);font-size:3.5rem;font-weight:900;color:var(--color-red);line-height:0.8;margin-bottom:1.5rem;position:relative;opacity:0.2;transition:all 0.4s ease;} .ms-card-step::after{ content:'';display:block;width:0;height:3px;background:var(--color-red);margin-top:15px;transition:width 0.4s ease;} .ms-card:hover .ms-card-step{ opacity:1;transform:translateX(10px);} .ms-card:hover .ms-card-step::after{ width:40px;} .ms-card-step-white{ color:var(--color-white);opacity:0.3;} .ms-card-step-white::after{ background:var(--color-white);} .ms-card:hover .ms-card-step-white{ opacity:1;} .ms-card-cat{ font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--color-red);margin-bottom:0.5rem;} .ms-card-cat-light{ color:rgba(255,255,255,0.6);} .ms-card-name{ font-size:1.3rem;font-weight:800;color:var(--color-black);margin-bottom:0.75rem;line-height:1.2;font-family:var(--font-display);} .ms-card-name-white{ color:var(--color-white);} .ms-card-desc{ font-size:0.9rem;color:var(--color-gray);line-height:1.7;flex:1;margin-bottom:1.5rem;} .ms-card-desc-white{ color:rgba(255,255,255,0.85);} .ms-card-desc-muted{ color:rgba(255,255,255,0.5);} .ms-card-link{ display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--color-red);margin-top:auto;transition:gap 0.2s;} .ms-card-link:hover{ gap:0.8rem;} .ms-card-link-white{ color:var(--color-white);} .ms-stat-block{ background:var(--color-white);border-radius:16px;padding:2.5rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.03);} .ms-stat-inner{ text-align:center;} .ms-stat-num{ font-family:var(--font-display);font-size:4rem;font-weight:900;color:var(--color-red);line-height:1;margin-bottom:0.5rem;} .ms-stat-label{ font-size:0.9rem;font-weight:600;color:var(--color-gray);line-height:1.5;margin-bottom:1.25rem;} .ms-stat-cta{ font-size:0.8rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--color-red);} @media (max-width:1024px){ .ms-row-2-1, .ms-row-1-2{ grid-template-columns:1fr;} .ms-row-3{ grid-template-columns:1fr;} .ms-spotlight{ flex-direction:column;} .ms-spotlight-side{ width:100%;padding:2rem;border-left:none;border-top:1px solid rgba(255,255,255,0.05);} } .stats-section{ background:var(--color-dark);padding:4rem 0;} .stats-grid{ display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:0;} .stat-item{ text-align:center;padding:1rem 2rem;} .stat-number{ display:block;font-size:clamp(2.2rem, 4vw, 3rem);font-weight:900;color:var(--color-red);line-height:1;margin-bottom:0.4rem;} .stat-label{ display:block;font-size:0.8rem;font-weight:500;color:rgba(255,255,255,0.55);text-transform:uppercase;letter-spacing:1px;} .stat-divider{ width:1px;height:60px;background:rgba(255,255,255,0.1);} .over-ons-section{ background:var(--color-white);padding:6rem 0;} .over-ons-inner{ display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;} .over-ons-text .label-red{ margin-bottom:0.75rem;display:block;} .over-ons-text h2{ font-size:clamp(1.7rem, 3vw, 2.3rem);font-weight:800;color:var(--color-black);margin-bottom:1.5rem;line-height:1.2;} .over-ons-text p{ color:var(--color-gray);font-size:1rem;line-height:1.75;margin-bottom:1rem;} .over-ons-text p strong{ color:var(--color-black);} .over-ons-checks{ display:flex;flex-direction:column;gap:0.6rem;margin-top:1.5rem;} .over-ons-checks li{ display:flex;align-items:center;gap:0.6rem;font-size:0.9rem;font-weight:600;color:var(--color-black);} .over-ons-checks li svg{ width:16px;height:16px;color:var(--color-red);flex-shrink:0;} .over-ons-info-block{ background:var(--color-dark);border-radius:var(--radius-lg);padding:2rem;display:flex;flex-direction:column;gap:0;} .info-block-item{ display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 0;border-bottom:1px solid rgba(255,255,255,0.07);} .info-block-item:last-child{ border-bottom:none;padding-bottom:0;} .info-block-item:first-child{ padding-top:0;} .info-block-item svg{ width:18px;height:18px;color:var(--color-red);flex-shrink:0;margin-top:2px;} .info-block-item strong{ display:block;font-size:0.8rem;font-weight:700;color:rgba(255,255,255,0.9);margin-bottom:0.2rem;} .info-block-item span{ font-size:0.8rem;color:rgba(255,255,255,0.75);line-height:1.4;} .info-block-item a{ font-size:0.8rem;color:rgba(255,255,255,0.75);line-height:1.4;text-decoration:none;} .info-block-item a:hover{ color:var(--color-red);} .spotlight-section{ background:var(--color-red);padding:6rem 0;overflow:hidden;position:relative;} .spotlight-section::before{ content:'';position:absolute;top:-30%;right:-5%;width:50%;height:160%;background:rgba(0,0,0,0.12);clip-path:polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);} .spotlight-inner{ display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:1;} .spotlight-eyebrow{ display:block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:rgba(255,255,255,0.65);margin-bottom:1rem;} .spotlight-text h2{ font-size:clamp(2rem, 4vw, 3rem);font-weight:900;color:var(--color-white);margin-bottom:1.5rem;line-height:1.1;} .spotlight-text p{ color:rgba(255,255,255,0.8);font-size:1.05rem;line-height:1.75;margin-bottom:2.5rem;} .spotlight-visual{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;position:relative;} .spotlight-deco-1{ position:absolute;width:200px;height:200px;border-radius:50%;border:2px solid rgba(255,255,255,0.12);top:50%;left:50%;transform:translate(-50%, -50%);} .spotlight-deco-2{ position:absolute;width:300px;height:300px;border-radius:50%;border:1px solid rgba(255,255,255,0.06);top:50%;left:50%;transform:translate(-50%, -50%);} .spotlight-icon{ width:140px;height:140px;background:rgba(0,0,0,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;} .spotlight-icon svg{ width:80px;height:80px;} .spotlight-visual > span{ font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.55);text-transform:uppercase;letter-spacing:2px;position:relative;z-index:1;} .werkwijze-section{ background:var(--color-dark3);padding:6rem 0;} .section-intro-light{ text-align:center;max-width:560px;margin:0 auto 4rem;} .label-light{ display:inline-block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--color-red);margin-bottom:0.75rem;} .section-heading-light{ font-size:clamp(1.7rem, 3vw, 2.3rem);font-weight:800;color:var(--color-white);margin-bottom:0.75rem;line-height:1.2;} .section-sub-light{ color:rgba(255,255,255,0.45);font-size:1rem;} .werkwijze-grid{ display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:center;} .werkwijze-card{ background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center;position:relative;overflow:hidden;} .werkwijze-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-red);transform:scaleX(0);transition:var(--transition);transform-origin:left;} .werkwijze-card:hover::before{ transform:scaleX(1);} .wk-number{ position:absolute;top:1rem;right:1.25rem;font-size:3.5rem;font-weight:900;color:rgba(255,255,255,0.04);line-height:1;user-select:none;} .wk-icon{ width:52px;height:52px;background:rgba(227,6,19,0.15);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;} .wk-icon svg{ width:26px;height:26px;color:var(--color-red);} .werkwijze-card h3{ font-size:1.1rem;font-weight:700;color:var(--color-white);margin-bottom:0.75rem;} .werkwijze-card p{ font-size:0.875rem;color:rgba(255,255,255,0.5);line-height:1.7;} .werkwijze-arrow{ padding:0 1.5rem;display:flex;align-items:center;justify-content:center;} .werkwijze-arrow svg{ width:24px;height:24px;color:var(--color-red);opacity:0.6;} .cta-banner{ background:var(--color-red);padding:5rem 0;} .cta-inner{ display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;} .cta-text-block h2{ font-size:clamp(1.6rem, 3vw, 2.2rem);font-weight:800;color:var(--color-white);margin-bottom:0.5rem;} .cta-text-block p{ color:rgba(255,255,255,0.82);font-size:1rem;} .footer{ background:var(--color-dark2);color:var(--color-white);padding:5rem 0 2.5rem;} .footer-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:3rem;margin-bottom:3.5rem;} .footer-logo-wrap{ display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;background:var(--color-white);padding:0.6rem 1rem;border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,0.15);} .footer-logo-img{ height:65px;width:auto;} .footer-logo-name{ display:block;font-size:0.85rem;font-weight:800;color:var(--color-black);line-height:1.3;} .footer-logo-sub{ font-size:0.7rem;color:var(--color-gray);} .footer-tagline{ color:rgba(255,255,255,0.45);font-size:0.875rem;line-height:1.7;} .footer-title{ font-size:0.75rem;font-weight:700;color:var(--color-white);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1.5rem;} .footer-list{ display:flex;flex-direction:column;gap:0.75rem;} .footer-list li, .footer-list a{ font-size:0.875rem;color:rgba(255,255,255,0.45);transition:var(--transition);} .footer-list a:hover{ color:var(--color-red);} .footer-contact-list li{ display:flex;align-items:center;gap:0.6rem;} .footer-contact-list svg{ width:15px;height:15px;flex-shrink:0;color:var(--color-red);} .footer-bottom{ padding-top:2rem;border-top:1px solid rgba(255,255,255,0.07);text-align:center;} .footer-bottom p{ font-size:0.8rem;color:rgba(255,255,255,0.25);} @keyframes fadeInUp{ from{ opacity:0;transform:translateY(20px);} to{ opacity:1;transform:translateY(0);} } .fade-in{ opacity:0;transform:translateY(20px);transition:opacity 0.5s ease, transform 0.5s ease;} .fade-in.visible{ opacity:1;transform:translateY(0);} .reveal{ opacity:0;transform:translateY(24px);transition:opacity .55s ease, transform .55s ease;} .reveal.visible{ opacity:1;transform:translateY(0);} .dienst-hero{ position:relative;min-height:52vh;display:flex;align-items:center;background:var(--color-dark) url('../images/hero_home.webp') center/cover no-repeat;padding:7rem 0 4rem;} .hero-renovatie{ background-image:url('../images/diensten/renovatie-service.webp');} .hero-stucwerk{ background-image:url('../images/diensten/stucwerk-service.webp');} .hero-schilderwerk{ background-image:url('../images/diensten/schilderwerk-service.webp');} .hero-sloopwerk{ background-image:url('../images/sloopwerk.webp');} .hero-loodgieters{ background-image:url('../images/loodgieterswerk.webp');} .hero-elektra{ background-image:url('../images/elektra.webp');} .hero-vve{ background-image:url('../images/vve_onderhoud.webp');} .hero-vloeren{ background-image:url('../images/diensten/pvc-vloeren.webp');} .hero-tegelwerk{ background-image:url('../images/tegelwerk.webp');} .hero-handdeco{ background-image:url('../images/handdecoratie.webp');} .hero-badkamer{ background-image:url('../images/tegelwerk.webp');} .dienst-hero-overlay{ position:absolute;inset:0;background:linear-gradient(110deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 60%, rgba(227,6,19,.08) 100%);z-index:1;} .dienst-hero .container{ position:relative;z-index:2;} .dienst-hero-content{ max-width:700px;} .dienst-hero-breadcrumb{ font-size:.75rem;color:rgba(255,255,255,.35);margin-bottom:1rem;display:block;} .dienst-hero-breadcrumb a{ color:rgba(255,255,255,.35);text-decoration:none;} .dienst-hero-breadcrumb a:hover{ color:var(--color-red);} .dienst-hero-title{ font-size:clamp(2.2rem, 5vw, 3.8rem);font-weight:900;color:var(--color-white);line-height:1.05;margin-bottom:1rem;letter-spacing:-1px;} .dienst-hero-sub{ font-size:1.05rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:2rem;max-width:560px;} .dienst-hero-actions{ display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem;} .dienst-hero-badges{ display:flex;gap:1.5rem;flex-wrap:wrap;} .dienst-hero-badges span{ display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.6);} .dienst-hero-badges span svg{ width:14px;height:14px;color:var(--color-red);flex-shrink:0;} .dienst-inhoud{ background:var(--color-white);padding:5rem 0;} .dienst-inhoud-inner{ display:grid;grid-template-columns:1fr 380px;gap:4rem;align-items:start;} .dienst-inhoud-text h2{ font-size:clamp(1.6rem, 2.5vw, 2rem);font-weight:800;color:var(--color-black);margin:.5rem 0 1.25rem;line-height:1.2;} .dienst-inhoud-text p{ color:var(--color-gray);font-size:1rem;line-height:1.75;margin-bottom:1rem;} .dienst-inhoud-text p strong{ color:var(--color-black);} .dienst-subdiensten{ margin-top:2.5rem;} .dienst-subdiensten h3{ font-size:1rem;font-weight:800;color:var(--color-black);margin-bottom:1.25rem;} .dienst-list{ display:flex;flex-direction:column;gap:.85rem;list-style:none;padding:0;margin:0;} .dienst-list li{ display:flex;align-items:flex-start;gap:.85rem;} .dienst-list li svg{ width:16px;height:16px;color:var(--color-red);flex-shrink:0;margin-top:3px;} .dienst-list li div{ flex:1;} .dienst-list li strong{ display:block;font-size:.9rem;font-weight:700;color:var(--color-black);margin-bottom:.1rem;} .dienst-list li span{ font-size:.82rem;color:var(--color-gray);line-height:1.5;} .dienst-cta-block{ background:var(--color-dark);border-radius:var(--radius-lg);margin-bottom:1.5rem;} .dienst-cta-block-inner{ padding:2rem;} .dienst-cta-block-inner h3{ font-size:1.15rem;font-weight:800;color:var(--color-white);margin-bottom:.5rem;} .dienst-cta-block-inner p{ font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:1.5rem;line-height:1.6;} .dienst-cta-block-inner .btn-outline{ color:var(--color-white);border-color:rgba(255,255,255,.4);background:transparent;} .dienst-cta-block-inner .btn-outline:hover{ border-color:var(--color-white);background:rgba(255,255,255,.08);color:var(--color-white);} .dienst-cta-block-details{ margin-top:1.5rem;display:flex;flex-direction:column;gap:.6rem;border-top:1px solid rgba(255,255,255,.07);padding-top:1.25rem;} .dienst-cta-block-details span{ display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:rgba(255,255,255,.4);} .dienst-cta-block-details span svg{ width:14px;height:14px;color:var(--color-red);flex-shrink:0;} .dienst-andere-diensten{ background:var(--color-gray-light);border:1px solid var(--color-gray-border);border-radius:var(--radius-lg);padding:1.5rem;} .dienst-andere-diensten h4{ font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--color-gray);margin-bottom:1rem;} .dienst-andere-diensten ul{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;} .dienst-andere-diensten ul li a{ font-size:.88rem;font-weight:600;color:var(--color-black);text-decoration:none;transition:color .2s;} .dienst-andere-diensten ul li a:hover{ color:var(--color-red);} .waarom-hass{ background:var(--color-gray-light);padding:5rem 0;} .waarom-hass-title{ text-align:center;max-width:480px;margin:0 auto 3rem;} .waarom-hass-title h2{ font-size:clamp(1.5rem, 2.5vw, 2rem);font-weight:800;color:var(--color-black);margin:.4rem 0 0;} .waarom-grid{ display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5rem;} .waarom-item{ background:var(--color-white);border:1px solid var(--color-gray-border);border-radius:var(--radius-lg);padding:1.75rem;text-align:center;} .waarom-icon{ width:52px;height:52px;background:rgba(227,6,19,.08);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;} .waarom-icon svg{ width:24px;height:24px;color:var(--color-red);} .waarom-item strong{ display:block;font-size:.9rem;font-weight:800;color:var(--color-black);margin-bottom:.5rem;} .waarom-item span{ font-size:.82rem;color:var(--color-gray);line-height:1.6;} .diensten-hero{ background:var(--color-dark) url('../images/hero_home.webp') center/cover no-repeat;padding:7rem 0 4rem;text-align:center;position:relative;overflow:hidden;} .diensten-hero::before{ content:'';position:absolute;inset:0;background:rgba(0,0,0,0.7);z-index:1;} .diensten-hero::after{ content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%, rgba(227,6,19,.07) 0%, transparent 65%);z-index:1;} .diensten-hero .container{ position:relative;z-index:2;} .diensten-hero h1{ font-size:clamp(2rem, 4vw, 3.2rem);font-weight:900;color:var(--color-white);margin:.75rem 0 1rem;} .diensten-hero p{ color:rgba(255,255,255,.55);font-size:1.05rem;max-width:520px;margin:0 auto;} .contact-grid{ display:grid;grid-template-columns:1fr 380px;gap:4rem;align-items:start;} .contact-form-section{ background:var(--color-white);padding:5rem 0;} .contact-form h2{ font-size:clamp(1.5rem, 2.5vw, 2rem);font-weight:800;color:var(--color-black);margin:.4rem 0 1.5rem;} .form-group{ margin-bottom:1.25rem;} .form-group label{ display:block;font-size:.82rem;font-weight:700;color:var(--color-black);margin-bottom:.4rem;} .form-group input, .form-group select, .form-group textarea{ width:100%;padding:.8rem 1rem;border:1.5px solid var(--color-gray-border);border-radius:var(--radius);font-family:inherit;font-size:.9rem;color:var(--color-black);background:var(--color-white);transition:border-color .2s;outline:none;} .form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--color-red);} .form-group textarea{ resize:vertical;min-height:130px;} .form-row{ display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .contact-info-block{ background:var(--color-dark);border-radius:var(--radius-lg);padding:2rem;position:sticky;top:120px;} .contact-info-block h3{ font-size:1rem;font-weight:800;color:var(--color-white);margin-bottom:1.5rem;} .contact-info-item{ display:flex;align-items:flex-start;gap:.85rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.06);} .contact-info-item:last-child{ border-bottom:none;padding-bottom:0;} .contact-info-item svg{ width:18px;height:18px;color:var(--color-red);flex-shrink:0;margin-top:2px;} .contact-info-item strong{ display:block;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.9);margin-bottom:.2rem;} .contact-info-item span, .contact-info-item a{ font-size:.82rem;color:rgba(255,255,255,.45);text-decoration:none;} .contact-info-item a:hover{ color:var(--color-red);} .faq-section{ background:var(--color-gray-light);padding:5rem 0;} .faq-list{ max-width:800px;margin:2.5rem auto 0;} .faq-item{ border-bottom:1px solid var(--color-gray-border);} .faq-question{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:.95rem;font-weight:700;color:var(--color-black);} .faq-question svg{ width:18px;height:18px;color:var(--color-red);flex-shrink:0;transition:transform .25s;} .faq-item.open .faq-question svg{ transform:rotate(45deg);} .faq-answer{ display:none;padding:0 0 1.25rem;font-size:.88rem;color:var(--color-gray);line-height:1.75;} .faq-item.open .faq-answer{ display:block;} .twee-bedrijven-grid{ display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;} .reviews-grid{ display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem;} @media (max-width:1024px){ .dienst-inhoud-inner{ grid-template-columns:1fr;} .dienst-inhoud-side{ display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;} .dienst-cta-block{ margin-bottom:0;} .waarom-grid{ grid-template-columns:repeat(2, 1fr);} .contact-grid{ grid-template-columns:1fr;} .contact-info-block{ position:static;} } @media (max-width:768px){ .dienst-hero{ padding:6rem 0 3rem;min-height:auto;} .dienst-hero-actions{ flex-direction:column;} .dienst-hero-actions .btn{ width:100%;justify-content:center;} .dienst-inhoud-side{ grid-template-columns:1fr;} .waarom-grid{ grid-template-columns:1fr;} .form-row{ grid-template-columns:1fr;} .reviews-grid{ grid-template-columns:1fr;} .twee-bedrijven-grid{ grid-template-columns:1fr;} } @media (max-width:1024px){ .ms-row-2-1, .ms-row-1-2{ grid-template-columns:1fr;} .ms-row-3{ grid-template-columns:1fr;} .ms-spotlight{ flex-direction:column;} .ms-spotlight-side{ display:none;} .stats-grid{ grid-template-columns:repeat(2, 1fr);gap:1rem;} .stat-divider{ display:none;} .stat-item{ background:rgba(255,255,255,0.03);border-radius:var(--radius);} .over-ons-inner{ gap:3rem;} .spotlight-inner{ gap:3rem;} .werkwijze-grid{ grid-template-columns:1fr;gap:1.5rem;} .werkwijze-arrow{ transform:rotate(90deg);justify-content:center;padding:0;} .footer-grid{ grid-template-columns:1fr 1fr;gap:2.5rem;} } @media (max-width:768px){ *, *::before, *::after{ max-width:100%;} .nav{ display:none;} .mobile-menu-btn{ display:flex;} .topbar-right{ display:none;} .hero{ min-height:auto;padding:4rem 0 3rem;} .hero-eyebrow{ color:var(--color-white);border-color:rgba(255,255,255,0.4);} .hero-actions{ flex-direction:column;} .hero-actions .btn{ width:100%;justify-content:center;} .hero-title{ font-size:clamp(1.8rem, 8vw, 2.5rem);} .hero-badges{ flex-direction:column;gap:0.75rem;} .hero-badge{ font-size:0.75rem;} .ms-row, .ms-row-3, .ms-row-2-1, .ms-row-1-2{ grid-template-columns:1fr !important;} .ms-card{ padding:1.5rem;} .ms-spotlight{ flex-direction:column;} .ms-spotlight-text{ padding:2rem 1.5rem;} .ms-stat-block{ min-height:auto;padding:2rem;} .over-ons-inner{ grid-template-columns:1fr;} .spotlight-inner{ grid-template-columns:1fr;} .spotlight-visual{ display:none;} .cta-inner{ flex-direction:column;text-align:center;} .cta-inner .btn{ width:100%;justify-content:center;} .footer-grid{ grid-template-columns:1fr;gap:2rem;} .container{ padding:0 1rem;} img, video, iframe{ max-width:100%;height:auto;} body.home{ overflow-x:hidden;} } @media (max-width:600px){ .stats-grid{ grid-template-columns:1fr 1fr;gap:0.75rem;} .stat-item{ padding:0.75rem 0.5rem;} .stat-label{ font-size:0.65rem;letter-spacing:0.5px;line-height:1.3;} .stat-number{ font-size:1.8rem;} .topbar-left{ gap:0.75rem;flex-direction:row;align-items:center;flex-wrap:nowrap;white-space:nowrap;} .topbar-left span{ font-size:0.7rem;line-height:1.2;} .ms-spotlight-text{ padding:2rem;} } .portfolio-section{ background:var(--color-white);padding:5rem 0 6rem;} .portfolio-grid{ display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem;} .portfolio-item{ position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--color-dark);} .portfolio-item img{ width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);} .portfolio-overlay{ position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);padding:2rem 1.5rem;display:flex;flex-direction:column;justify-content:flex-end;opacity:1;transition:background 0.4s ease;} .portfolio-item:hover img{ transform:scale(1.05);} .portfolio-item:hover .portfolio-overlay{ background:linear-gradient(to top, rgba(227,6,19,0.95) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);} .portfolio-overlay h3{ color:var(--color-white);font-size:1.25rem;font-weight:800;margin-bottom:0.4rem;font-family:var(--font-display);transform:translateY(10px);transition:transform 0.4s ease;} .portfolio-overlay p{ color:rgba(255,255,255,0.8);font-size:0.85rem;line-height:1.5;transform:translateY(10px);opacity:0.8;transition:all 0.4s ease;} .portfolio-item:hover .portfolio-overlay h3, .portfolio-item:hover .portfolio-overlay p{ transform:translateY(0);opacity:1;} @media (max-width:1024px){ .portfolio-grid{ grid-template-columns:repeat(2, 1fr);} } @media (max-width:768px){ .portfolio-grid{ grid-template-columns:1fr;} } @media (max-width:480px){ .container{ padding:0 0.75rem;} .hero-title{ font-size:clamp(1.5rem, 7vw, 2rem);} .section-heading{ font-size:clamp(1.4rem, 6vw, 1.8rem);} .btn{ padding:0.6rem 1.25rem;font-size:0.8rem;} .topbar-left{ flex-wrap:wrap;gap:0.5rem;} .topbar-left span{ font-size:0.7rem;} .mobile-nav{ padding:4rem 1rem 2rem;} .hero-badge{ font-size:0.75rem;} .hero-badges{ gap:1rem;} .ms-card{ padding:1.5rem;} .portfolio-overlay{ padding:1rem;} .portfolio-overlay h3{ font-size:1rem;} } .wrapper, #wrapper, .page-wrapper{ overflow-x:hidden;width:100%;}