.nav-founding-link{background:var(--navy)!important;color:#fff!important;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;transition:background .18s,transform .18s;display:inline-flex;align-items:center;gap:6px;text-transform:lowercase} .nav-founding-link:hover{background:#0a1218!important;transform:translateY(-1px)} #page-actie{background:var(--cream)} #page-actie .fp-inner{max-width:1160px;margin:0 auto;padding:0 24px} #page-actie .fp-banner{background:var(--navy);color:rgba(255,255,255,.85);text-align:center;font-size:12.5px;padding:11px 18px;border-radius:var(--r);margin:124px 0 0;line-height:1.5} #page-actie .fp-banner b{color:#fff} #page-actie .fp-banner .pin{color:var(--orange);font-weight:700} #page-actie .fp-hero{padding:124px 0 88px;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center} #page-actie .fp-h1{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--navy)} #page-actie .fp-h1 .accent{color:var(--orange)} #page-actie .fp-lede{margin-top:18px;font-size:17.5px;color:var(--text2);max-width:31em;line-height:1.65} #page-actie .fp-cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px} #page-actie .fp-btn{font-family:var(--font);font-weight:700;font-size:14px;text-decoration:none;padding:15px 28px;border-radius:var(--r);display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;transition:background .18s,transform .18s,border-color .18s} #page-actie .fp-btn-orange{background:var(--orange);color:#fff} #page-actie .fp-btn-orange:hover{background:#C94010;transform:translateY(-2px)} #page-actie .fp-btn-ghost{background:none;border:1.5px solid var(--border2);color:var(--navy);font-weight:600} #page-actie .fp-btn-ghost:hover{border-color:var(--orange);color:var(--orange)} #page-actie .fp-free{font-size:12.5px;color:var(--text2);margin-top:13px;display:flex;align-items:center;gap:7px} #page-actie .fp-free::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block} #page-actie .fp-counter{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:0 24px 60px rgba(15,25,35,.18)} #page-actie .fp-counter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px} #page-actie .fp-counter-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)} #page-actie .fp-counter-num{font-weight:800;font-size:30px;letter-spacing:-.02em} #page-actie .fp-counter-num .of{color:rgba(255,255,255,.4);font-weight:600;font-size:20px} #page-actie .fp-cells{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} #page-actie .fp-cell{aspect-ratio:1;border-radius:8px;border:1.5px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.3);transition:background .4s,color .4s,border-color .4s} #page-actie .fp-cell.filled{background:var(--orange);border-color:var(--orange);color:#fff} #page-actie .fp-counter-foot{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.5} #page-actie .fp-counter-foot b{color:#fff;font-weight:700} #page-actie .fp-deadline{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)} #page-actie .fp-countdown{margin-top:12px;display:flex;gap:8px} #page-actie .fp-cd-unit{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 0;flex:1;text-align:center} #page-actie .fp-cd-unit b{display:block;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1} #page-actie .fp-cd-unit span{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)} #page-actie .fp-logos-wrap{margin:8px 0 0} #page-actie .fp-sec{padding:58px 0;border-top:1px solid var(--border)} #page-actie .fp-note{font-size:14px;color:var(--text2);margin-top:6px;max-width:44em;line-height:1.6} #page-actie .fp-note b{color:var(--navy);font-weight:600} #page-actie .fp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} #page-actie .fp-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px 28px;position:relative;transition:border-color .18s,transform .18s} #page-actie .fp-card:hover{border-color:var(--orange);transform:translateY(-3px)} #page-actie .fp-card .fp-n{position:absolute;top:20px;right:22px;font-size:12px;font-weight:700;color:var(--border2)} #page-actie .fp-card .fp-ic{width:42px;height:42px;border-radius:10px;background:var(--orange-l);display:flex;align-items:center;justify-content:center;margin-bottom:15px} #page-actie .fp-card .fp-tag{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--orange);text-transform:uppercase} #page-actie .fp-card h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:9px 0 8px;line-height:1.25;color:var(--navy)} #page-actie .fp-card p{font-size:14.5px;color:var(--text2);line-height:1.55} /* cijfers per klant */ #page-actie .fp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px} #page-actie .fp-stat{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 22px} #page-actie .fp-stat .ic{width:38px;height:38px;border-radius:10px;background:var(--orange-l);display:flex;align-items:center;justify-content:center;margin-bottom:14px} #page-actie .fp-stat .k{font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1} #page-actie .fp-stat .v{font-size:13px;color:var(--text2);margin-top:7px;line-height:1.4} #page-actie .fp-trust{margin-top:18px;font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px} #page-actie .fp-trust::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block} #page-actie .fp-ws{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--orange-l);border:1px solid rgba(232,82,26,.18);border-radius:var(--r-lg);padding:28px 32px;margin-top:30px} #page-actie .fp-ws h3{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:6px} #page-actie .fp-ws p{font-size:14.5px;color:var(--text2);max-width:48em;line-height:1.6} #page-actie .fp-ws .price{font-size:18px;font-weight:800;color:var(--orange);white-space:nowrap} /* pakketten teaser */ #page-actie .fp-pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} #page-actie .fp-pkg{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px;transition:border-color .18s,transform .18s} #page-actie .fp-pkg.feat{background:var(--navy);border-color:var(--navy)} #page-actie .fp-pkg:hover{border-color:var(--orange);transform:translateY(-3px)} #page-actie .fp-pkg h3{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:7px} #page-actie .fp-pkg.feat h3{color:#fff} #page-actie .fp-pkg p{font-size:14px;color:var(--text2);line-height:1.55} #page-actie .fp-pkg.feat p{color:rgba(255,255,255,.62)} #page-actie .fp-pkg .badge{position:absolute;top:18px;right:18px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:100px;text-transform:uppercase} #page-actie .fp-pkgs-cta{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} /* zo werkt het */ #page-actie .fp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} #page-actie .fp-step{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px} #page-actie .fp-step .num{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px} #page-actie .fp-step h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px} #page-actie .fp-step p{font-size:14px;color:var(--text2);line-height:1.55} /* faq */ #page-actie .fp-faq{margin-top:28px;display:flex;flex-direction:column;gap:10px;max-width:780px} #page-actie .fp-faq .faq-a ul{margin:8px 0 0;padding-left:18px} #page-actie .fp-faq .faq-a li{padding:2px 0} /* formulier */ #page-actie .fp-formwrap{position:relative;overflow:hidden;background:var(--navy);border-radius:var(--r-lg);padding:50px clamp(24px,5vw,54px)} #page-actie .fp-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.05);pointer-events:none} #page-actie .fp-form-grid{position:relative;z-index:2;display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start} #page-actie .fp-form-intro h2{font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#fff} #page-actie .fp-form-intro p{margin-top:14px;color:rgba(255,255,255,.62);font-size:15px;line-height:1.65} #page-actie .fp-reassure{margin-top:20px;border-left:2px solid var(--orange);padding-left:15px;font-size:13px;color:rgba(255,255,255,.78);line-height:1.55} #page-actie form.fp-form{display:grid;grid-template-columns:1fr 1fr;gap:15px} #page-actie .fp-fg{display:flex;flex-direction:column;gap:6px} #page-actie .fp-fg.full{grid-column:1/-1} #page-actie .fp-fg label{font-size:12px;font-weight:600;color:rgba(255,255,255,.6)} #page-actie .fp-form input,#page-actie .fp-form select,#page-actie .fp-form textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:13px 14px;color:#fff;font-family:var(--font);font-size:14.5px;width:100%} #page-actie .fp-form input::placeholder,#page-actie .fp-form textarea::placeholder{color:rgba(255,255,255,.4)} #page-actie .fp-form input:focus,#page-actie .fp-form select:focus,#page-actie .fp-form textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent} #page-actie .fp-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff80' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center} #page-actie .fp-form textarea{resize:vertical;min-height:64px} #page-actie .fp-choice{grid-column:1/-1;display:flex;flex-direction:column;gap:8px} #page-actie .fp-choice-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.6)} #page-actie .fp-chips{display:flex;gap:10px;flex-wrap:wrap} #page-actie .fp-chip{flex:1;min-width:200px;display:flex;align-items:flex-start;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:13px 15px;cursor:pointer;transition:border-color .18s,background .18s} #page-actie .fp-chip:hover{border-color:rgba(255,255,255,.4)} #page-actie .fp-chip input{accent-color:var(--orange);margin-top:3px;width:auto} #page-actie .fp-chip.sel{border-color:var(--orange);background:rgba(232,82,26,.12)} #page-actie .fp-chip .ct{font-size:14px;font-weight:600;color:#fff;line-height:1.3} #page-actie .fp-chip .cs{display:block;font-size:12px;font-weight:400;color:rgba(255,255,255,.55);margin-top:2px} #page-actie .fp-submit{grid-column:1/-1;background:var(--orange);color:#fff;border:none;font-family:var(--font);font-weight:700;font-size:15px;padding:16px;border-radius:var(--r);cursor:pointer;transition:background .18s,transform .18s} #page-actie .fp-submit:hover{background:#C94010;transform:translateY(-2px)} #page-actie .fp-form-foot{grid-column:1/-1;font-size:11px;color:rgba(255,255,255,.4);text-align:center} #page-actie .fp-success{display:none;text-align:center;padding:24px 10px} #page-actie .fp-success.show{display:block} #page-actie .fp-success .fp-check{width:54px;height:54px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;margin:0 auto 16px} #page-actie .fp-success h3{font-size:23px;font-weight:700;color:#fff} #page-actie .fp-success p{color:rgba(255,255,255,.65);margin-top:10px;max-width:32em;margin-inline:auto;font-size:14.5px} @media(max-width:880px){ #page-actie .fp-hero{grid-template-columns:1fr;gap:32px;padding-top:100px} #page-actie .fp-grid,#page-actie .fp-steps,#page-actie .fp-pkgs{grid-template-columns:1fr} #page-actie .fp-stats{grid-template-columns:repeat(2,1fr)} #page-actie .fp-form-grid{grid-template-columns:1fr;gap:28px} #page-actie form.fp-form{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){#page-actie *{transition:none!important}} /* ---- full-bleed gekleurde banden ---- */ #page-actie .fp-logos-wrap{margin:0} #page-actie .fp-band{width:100%} #page-actie .fp-band-navy{background:var(--navy)} #page-actie .fp-band-orange{background:var(--orange)} #page-actie .fp-band-inner{max-width:1160px;margin:0 auto;padding:54px 24px} #page-actie .fp-band-navy .fp-band-inner{padding-top:34px;padding-bottom:52px} #page-actie .fp-band-navy .eyebrow{color:rgba(255,255,255,.5)} #page-actie .fp-band-navy .eyebrow .eyebrow-line{background:rgba(255,255,255,.35)} #page-actie .fp-band-navy .section-h{color:#fff} #page-actie .fp-band-navy .fp-note{color:rgba(255,255,255,.62)} #page-actie .fp-band-navy .fp-note b{color:#fff} #page-actie .fp-band-navy .fp-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)} #page-actie .fp-band-navy .fp-card:hover{border-color:var(--orange)} #page-actie .fp-band-navy .fp-card h3{color:#fff} #page-actie .fp-band-navy .fp-card p{color:rgba(255,255,255,.62)} #page-actie .fp-band-navy .fp-card .fp-n{color:rgba(255,255,255,.22)} #page-actie .fp-band-navy .fp-card .fp-ic{background:rgba(232,82,26,.18)} /* ---- employer branding content callout ---- */ #page-actie .fp-content{margin-top:20px;background:rgba(232,82,26,.12);border:1px solid rgba(232,82,26,.4);border-radius:var(--r-lg);padding:24px 26px} #page-actie .fp-content-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)} #page-actie .fp-content h3{color:#fff;font-size:18px;font-weight:700;margin:7px 0 18px;letter-spacing:-.01em} #page-actie .fp-content-items{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} #page-actie .fp-citem{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:15px 17px} #page-actie .fp-citem .qty{font-size:26px;font-weight:800;color:var(--orange);letter-spacing:-.02em;line-height:1;flex:none} #page-actie .fp-citem .lbl{font-size:14px;font-weight:600;color:#fff;line-height:1.3} #page-actie .fp-citem .lbl span{display:block;color:rgba(255,255,255,.5);font-size:12px;font-weight:400;margin-top:2px} #page-actie .fp-subnote{color:rgba(255,255,255,.6);font-size:14px;margin:26px 0 0} /* ---- oranje band (W&S) ---- */ #page-actie .fp-band-orange .eyebrow{color:rgba(255,255,255,.85)} #page-actie .fp-band-orange .eyebrow .eyebrow-line{background:rgba(255,255,255,.6)} #page-actie .fp-band-orange{position:relative;overflow:hidden} #page-actie .fp-band-orange .fp-band-inner{position:relative;z-index:2} #page-actie .fp-or-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.13);pointer-events:none} #page-actie .fp-band-orange .section-h{color:#fff;margin-bottom:6px} #page-actie .fp-ws-band{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:36px} #page-actie .fp-ws-left p{color:#fff;font-size:15.5px;line-height:1.65;max-width:34em} #page-actie .fp-ws-card{background:#fff;border-radius:var(--r-lg);padding:32px 32px 34px;box-shadow:0 22px 55px rgba(15,25,35,.22)} #page-actie .fp-ws-price{font-size:40px;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--border)} #page-actie .fp-ws-price span{font-size:14px;font-weight:600;color:var(--text2);letter-spacing:0} #page-actie .fp-ws-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px} #page-actie .fp-ws-list li{position:relative;padding-left:29px;font-size:14.5px;font-weight:500;color:var(--navy);line-height:1.4} #page-actie .fp-ws-list li::before{content:"\2713";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center} @media(max-width:880px){ #page-actie .fp-content-items{grid-template-columns:1fr} #page-actie .fp-ws-band{grid-template-columns:1fr} } #page-actie .fp-feats{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px} #page-actie .fp-feats li{position:relative;padding-left:27px;font-size:13.5px;color:var(--navy);line-height:1.4} #page-actie .fp-feats li::before{content:"\2713";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1} #page-actie .fp-pkg.feat .fp-feats li{color:rgba(255,255,255,.88)} #page-actie .fp-btn-navy{background:var(--navy);color:#fff} #page-actie .fp-btn-navy:hover{background:#0a1218;transform:translateY(-2px)} #page-actie .logo-strip-label{font-size:11px;color:rgba(255,255,255,.5)} #page-actie .fp-quote{max-width:840px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:38px 44px 32px;position:relative} #page-actie .fp-quote-mark{font-family:Georgia,'Times New Roman',serif;font-size:72px;line-height:.5;color:var(--orange);height:30px} #page-actie .fp-quote blockquote{margin:0;font-size:16px;line-height:1.7;font-weight:500;letter-spacing:0;color:var(--navy)} #page-actie .fp-quote-by{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--border)} #page-actie .fp-quote-avatar{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none;letter-spacing:.02em} #page-actie .fp-quote-meta strong{display:block;font-size:15px;color:var(--navy)} #page-actie .fp-quote-meta span{font-size:13.5px;color:var(--text2)} #page-actie .fp-phone{margin-top:14px;font-size:13px;color:rgba(255,255,255,.6)} #page-actie .fp-phone a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.3)} #page-actie .fp-pkg-price{font-size:27px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin:2px 0 2px;display:flex;align-items:baseline;gap:8px} #page-actie .fp-pkg-price span{font-size:12.5px;font-weight:600;color:var(--text2);letter-spacing:0} #page-actie .fp-pkg.feat .fp-pkg-price{color:#fff} #page-actie .fp-pkg.feat .fp-pkg-price span{color:rgba(255,255,255,.55)} #page-actie .fp-content-note{margin-top:16px;font-size:13px;color:rgba(255,255,255,.62)} #page-actie .fp-content-note b{color:#fff;font-weight:600} #page-actie .fp-pkg-note{margin-top:18px;font-size:12.5px;color:var(--text2)} :root { --navy: #0F1923; --navy2: #1A2A38; --orange: #E8521A; --orange-l:#FDF0EA; --cream: #F5F1EB; --cream2: #EDE8E0; --white: #FFFFFF; --text: #0F1923; --text2: #4A5568; --text3: #687686; --border: rgba(15,25,35,.10); --border2: rgba(15,25,35,.18); --font: 'Sora', system-ui, sans-serif; --r: 10px; --r-lg: 16px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font); background: var(--cream); color: var(--text); line-height: 1.6; max-width: 100vw; overflow-x: hidden; } /* NAV */ nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; height: 70px; background: rgba(245,241,235,.96); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; cursor: pointer; } .nav-wordmark { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; } .nav-wordmark span { color: var(--orange); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--text2); text-decoration: none; transition: color .18s; cursor: pointer; text-transform: lowercase; } .nav-links a:hover, .nav-links a.active { color: var(--navy); font-weight: 600; } .nav-cta { background: var(--orange) !important; color: var(--white) !important; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: background .18s, transform .18s; display: inline-flex; align-items: center; gap: 6px; text-transform: lowercase; } .nav-cta:hover { background: #c94010 !important; transform: translateY(-1px); } .hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; } .hamburger span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; display: block; } .mobile-menu { display: none; position: fixed; top: 70px; left: 0; right: 0; z-index: 199; background: rgba(245,241,235,.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 24px; flex-direction: column; gap: 4px; } .mobile-menu.open { display: flex; } .mobile-menu a { font-size: 15px; font-weight: 500; color: var(--text2); text-decoration: none; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .mobile-menu a:last-child { border-bottom: none; color: var(--orange); font-weight: 700; } /* PAGES */ .page { display: none; } .page.active { display: block; } /* BUTTONS */ .btn-primary { background: var(--navy); color: var(--white); padding: 14px 28px; border-radius: var(--r); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .18s, transform .18s; cursor: pointer; border: none; } .btn-outline { background: var(--white); color: var(--navy); padding: 13px 27px; border-radius: var(--r); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .18s, border-color .18s, transform .18s; cursor: pointer; border: 1.5px solid var(--navy); } .btn-outline:hover { background: var(--navy); color: var(--white); transform: translateY(-1px); } .btn-primary:hover { background: var(--orange); transform: translateY(-2px); } .btn-orange { background: var(--orange); color: var(--white); padding: 14px 28px; border-radius: var(--r); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .18s, transform .18s; cursor: pointer; border: none; } .btn-orange:hover { background: #c94010; transform: translateY(-2px); } .btn-ghost { font-size: 14px; font-weight: 600; color: var(--text2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .18s, gap .18s; cursor: pointer; background: none; border: none; } .btn-ghost:hover { color: var(--navy); gap: 10px; } /* HERO */ .hero { min-height: 100vh; padding: 130px 60px 80px; background: var(--cream); display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 48px; align-items: center; max-width: 1280px; margin: 0 auto; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; } .hero-eyebrow-line { display: none; } /* Google Reviews Badge */ .google-reviews { display: inline-flex; align-items: center; gap: 12px; background: var(--navy); border: 1px solid rgba(255,255,255,.08); border-radius: 50px; padding: 10px 20px; margin-bottom: 24px; } .gr-logo { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase; } .gr-divider { width: 1px; height: 16px; background: rgba(255,255,255,.15); } .gr-stars { color: #FBBC04; font-size: 13px; letter-spacing: 2px; line-height: 1; } .gr-score { font-size: 14px; font-weight: 700; color: var(--white); letter-spacing: -.01em; } .gr-count { font-size: 11px; color: rgba(255,255,255,.4); } /* Google Reviews inline (dark section) */ .gr-inline { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 50px; padding: 8px 16px; margin-bottom: 32px; } .gr-inline .gr-logo { color: rgba(255,255,255,.4); } .gr-inline .gr-score { color: var(--white); } .gr-inline .gr-count { color: rgba(255,255,255,.35); } .hero h1 { font-size: clamp(30px, 3.3vw, 44px); font-weight: 700; color: var(--navy); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 24px; } .hero h1 .accent { color: var(--orange); } .hero-sub { font-size: 17px; color: var(--text2); line-height: 1.7; max-width: 460px; margin-bottom: 40px; } .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border2); padding-top: 40px; } .hero-stat { padding-right: 24px; } .hero-stat + .hero-stat { padding-left: 24px; border-left: 1px solid var(--border); } .stat-n { font-size: 34px; font-weight: 700; color: var(--navy); letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; } .stat-n .o { color: var(--orange); } .stat-l { font-size: 12px; color: var(--text3); font-weight: 500; line-height: 1.4; } .hero-right { position: relative; } .hero-img-wrap { border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; background: var(--navy2); position: relative; } .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 60%, #2D4A6B 100%); display: flex; align-items: flex-end; padding: 32px; } .hero-card-float { position: absolute; bottom: -24px; left: -32px; background: var(--white); border-radius: var(--r-lg); padding: 18px 22px; border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(15,25,35,.12); min-width: 200px; } .hcf-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; } .hcf-val { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; } .hcf-sub { font-size: 11px; color: var(--orange); font-weight: 600; margin-top: 2px; } .hero-tag-float { position: absolute; top: 28px; right: -20px; background: var(--orange); color: var(--white); padding: 10px 16px; border-radius: var(--r); font-size: 12px; font-weight: 700; line-height: 1.3; } /* ═══ HERO ACHTERGROND-VIDEO ═══ */ .hero-wrap { position: relative; width: 100%; overflow: hidden; background: var(--navy); } .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(105deg, rgba(15,25,35,.94) 0%, rgba(15,25,35,.82) 42%, rgba(15,25,35,.55) 100%); } .hero-wrap .hero { background: transparent; position: relative; z-index: 3; } .hero-wrap .hero h1 { color: #fff; } .hero-wrap .hero-sub { color: rgba(255,255,255,.82); } .hero-wrap .hero-left span { color: rgba(255,255,255,.92) !important; } .hero-wrap .hero-left strong { color: #fff !important; } .hero-wrap .hero-eyebrow { color: var(--orange); } .hero-wrap .btn-primary { background: rgba(255,255,255,.10); color: #fff; border: 1.5px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); } .hero-wrap .btn-primary:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); } .hero-wrap .hero-right { min-height: 520px; } @media (prefers-reduced-motion: reduce) { .hero-bg-video { display: none; } } .hero-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: 1; } .hero-wrap .hero { grid-template-columns: 1fr; } .hero-wrap .hero-left { max-width: 680px; } /* HERO-FOTO als grote rechterhelft (van de navbalk tot de navy-sectie) */ .hero-band { position: relative; width: 100%; background: var(--cream); overflow: hidden; } .hero-photo-half { position: absolute; top: 70px; right: 0; bottom: 0; width: 50%; object-fit: cover; object-position: center 28%; z-index: 1; } .hero-band .hero { position: relative; z-index: 2; background: transparent; } .hero-band .hero-right { display: block; } /* ═══ MEGA-MENU (preview op hover) ═══ */ .mega-backdrop { position: fixed; inset: 0; z-index: 180; background: rgba(13,25,35,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .mega-backdrop.open { opacity: 1; visibility: visible; } .nav-shell { position: fixed; top: 0; left: 0; right: 0; z-index: 200; overflow: hidden; transition: margin .42s cubic-bezier(.16,1,.3,1), border-radius .42s ease, background .35s ease, box-shadow .42s ease; } .nav-shell.open { margin: 12px; border-radius: 24px; background: #fff; box-shadow: 0 40px 90px -24px rgba(15,25,35,.5); } .nav-shell.open nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .megamenu { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .45s cubic-bezier(.16,1,.3,1), opacity .35s ease; } .nav-shell.open .megamenu { max-height: 78vh; opacity: 1; overflow-y: auto; } .megamenu-inner { max-width: none; margin: 0 auto; padding: 56px 76px 68px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 96px; } .mega-left { min-width: 0; } .mega-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--orange); margin-bottom: 18px; } .mega-intro { font-size: 15px; color: var(--text2); line-height: 1.7; max-width: 540px; margin: 0 0 44px; } .mega-links { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 68px; } .mega-link { cursor: pointer; text-decoration: none; display: block; } .mega-link h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 10px; transition: color .16s; } .mega-link p { font-size: 15px; color: var(--text2); line-height: 1.7; } .mega-link:hover h4 { color: var(--orange); } .mega-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 56px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--navy); text-decoration: none; cursor: pointer; transition: gap .18s ease, color .18s ease; } .mega-cta:hover { gap: 20px; color: var(--orange); } .mega-cta .mega-cta-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .mega-cards { display: grid; grid-template-columns: 1fr; gap: 24px; align-content: start; } .mega-cards-2 { grid-template-columns: 1fr 1fr; } .mega-card { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; min-height: 230px; display: flex; align-items: flex-end; padding: 28px; background: var(--navy); } .mega-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .mega-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,25,35,0) 32%, rgba(15,25,35,.82) 100%); } .mega-card-label { position: relative; z-index: 2; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; padding-right: 52px; } .mega-card-arrow { position: absolute; right: 24px; bottom: 24px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 18px; transition: transform .18s, background .18s, color .18s; } .mega-card:hover .mega-card-arrow { transform: translateX(3px); background: var(--orange); color: #fff; } .mega-link h4 { text-transform: lowercase; } .mega-card-label { text-transform: lowercase; } .mega-cards-1 .mega-card { min-height: 420px; } @media (max-width: 960px) { .megamenu { display: none !important; } } /* LOGO STRIP */ .logo-strip { background: var(--navy); padding: 36px 60px; } .logo-strip-inner { width: 100%; padding: 0 60px; box-sizing: border-box; } .logo-strip-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 24px; } .logo-strip-logos { display: flex; align-items: center; justify-content: space-between; gap: 0; flex-wrap: wrap; width: 100%; } .logo-item { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: -.01em; white-space: nowrap; padding: 8px 28px; border-right: 1px solid rgba(255,255,255,.1); transition: color .18s; } .logo-item:first-child { padding-left: 0; } .logo-item:last-child { border-right: none; } .logo-item:hover { color: rgba(255,255,255,.9); } /* SECTIONS */ section { padding: 96px 60px; } /* JARGON TOOLTIP */ .jargon { position: relative; cursor: help; border-bottom: 1px dotted currentColor; } .jargon-i { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 3px; vertical-align: super; font-size: 9px; font-weight: 700; font-style: normal; line-height: 1; border-radius: 50%; background: var(--orange); color: #fff; cursor: pointer; user-select: none; transform: translateY(1px); } .jargon-pop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 500; width: 240px; max-width: 78vw; padding: 12px 14px; background: var(--navy); color: rgba(255,255,255,.92); border-radius: 10px; font-size: 12.5px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 32px rgba(15,25,35,.40); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s, transform .16s, visibility .16s; pointer-events: none; } .jargon-pop strong { color: var(--orange); display: block; margin-bottom: 3px; font-size: 12px; } .jargon-pop::after { content: ""; position: absolute; top: 100%; left: 14px; border: 6px solid transparent; border-top-color: var(--navy); } .jargon:hover .jargon-pop, .jargon.open .jargon-pop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .section-inner { max-width: 1160px; margin: 0 auto; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; } .eyebrow-line { display: none; } .section-h { font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; color: var(--navy); letter-spacing: -.025em; line-height: 1.15; margin-bottom: 16px; } .section-sub { font-size: 16px; color: var(--text2); max-width: 520px; line-height: 1.7; margin-bottom: 56px; } /* GROEIPAD */ .growth { background: var(--navy); } .growth .eyebrow { color: rgba(255,255,255,.45); } .growth .eyebrow-line { background: rgba(255,255,255,.3); } .growth .section-h { color: var(--white); } .growth .section-sub { color: rgba(255,255,255,.6); max-width: 560px; } .growth-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; } .growth-step { background: var(--navy2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); padding: 28px 24px; position: relative; transition: transform .2s, border-color .2s; } .growth-step:hover { transform: translateY(-4px); border-color: rgba(232,82,26,.5); } .gs-num { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--orange); margin-bottom: 14px; } .gs-level { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: -.02em; margin-bottom: 8px; } .gs-when { display: inline-block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.85); background: rgba(232,82,26,.2); border: 1px solid rgba(232,82,26,.4); padding: 3px 10px; border-radius: 100px; margin-bottom: 16px; } .gs-desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.7; } .gs-arrow { position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--orange); font-size: 22px; z-index: 2; } .growth-step:last-child .gs-arrow { display: none; } .growth-branch-label { text-align: center; color: rgba(255,255,255,.5); font-size: 13px; font-weight: 600; letter-spacing: .04em; margin: 48px 0 28px; text-transform: uppercase; } .growth-branches { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: stretch; } .gb-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 26px 24px; position: relative; } .gb-step { background: var(--navy2); border-color: rgba(255,255,255,.08); display: flex; flex-direction: column; justify-content: center; } .gb-endpoints { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .gb-arrow { position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--orange); font-size: 22px; z-index: 2; } .gb-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(232,82,26,.15); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--orange); } .gb-title { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 8px; letter-spacing: -.01em; } .gb-desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.7; } @media (max-width: 860px) { .growth-track, .growth-branches, .gb-endpoints { grid-template-columns: 1fr; } .gs-arrow, .gb-arrow { display: none !important; } } /* PROBLEM */ .problem { background: var(--navy); } .problem .eyebrow { color: rgba(255,255,255,.4); } .problem .eyebrow-line { background: rgba(255,255,255,.25); } .problem .section-h { color: var(--white); } .problem .section-sub { color: rgba(255,255,255,.5); } .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.06); border-radius: var(--r-lg); overflow: hidden; } .problem-card { background: var(--navy); padding: 36px 32px; transition: background .2s; } .problem-card:hover { background: var(--navy2); } .problem-num { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--orange); margin-bottom: 16px; } .problem-card h3 { font-size: 19px; font-weight: 700; color: var(--white); margin-bottom: 10px; letter-spacing: -.01em; line-height: 1.3; } .problem-card p { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.7; } /* HOW */ .how { background: var(--white); } .phases { display: flex; flex-direction: column; } .phase { display: grid; grid-template-columns: 56px 1fr 340px; gap: 48px; align-items: start; padding: 48px 0; border-bottom: 1px solid var(--border); } .phase:last-child { border-bottom: none; } .phase-num { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--orange); padding-top: 5px; } .phase h3 { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; margin-bottom: 10px; } .phase p { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 18px; } .phase-tags { display: flex; flex-wrap: wrap; gap: 7px; } .ptag { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 100px; background: var(--cream); color: var(--text2); border: 1px solid var(--border2); } .phase-box { background: var(--cream); border-radius: var(--r-lg); border: 1px solid var(--border); padding: 20px; } .phase-box-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text2); padding: 8px 0; border-bottom: 1px solid var(--border); } .phase-box-item:last-child { border-bottom: none; } .pbi-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: var(--white); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } /* PACKAGES */ .packages { background: var(--cream); } .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pkg { background: var(--white); border: 1.5px solid var(--border2); border-radius: var(--r-lg); padding: 36px 30px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; } .pkg:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(15,25,35,.1); } .pkg.featured { background: var(--navy); border-color: var(--navy); } .pkg-badge { position: absolute; top: 20px; right: 20px; background: var(--orange); color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 100px; } .pkg-name { font-size: 24px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; margin-bottom: 4px; } .pkg.featured .pkg-name { color: var(--white); } .pkg-sub { font-size: 13px; color: var(--text3); margin-bottom: 24px; } .pkg.featured .pkg-sub { color: rgba(255,255,255,.4); } .pkg-price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 28px; } .pkg-amount { font-size: 38px; font-weight: 700; color: var(--navy); letter-spacing: -.03em; } .pkg.featured .pkg-amount { color: var(--white); } .pkg-per { font-size: 13px; color: var(--text3); } .pkg.featured .pkg-per { color: rgba(255,255,255,.35); } .pkg-divider { height: 1px; background: var(--border); margin-bottom: 24px; } .pkg.featured .pkg-divider { background: rgba(255,255,255,.1); } .pkg-feats { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } .pkg-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text2); } .pkg.featured .pkg-feat { color: rgba(255,255,255,.7); } .feat-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--orange-l); color: var(--orange); font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pkg.featured .feat-dot { background: rgba(232,82,26,.25); color: #FF8C5A; } .pkg-cta { display: block; text-align: center; text-decoration: none; padding: 13px; border-radius: var(--r); font-size: 13px; font-weight: 700; transition: all .18s; cursor: pointer; } .pkg-cta.outline { border: 1.5px solid var(--border2); color: var(--navy); background: transparent; } .pkg-cta.outline:hover { border-color: var(--orange); color: var(--orange); } .pkg-cta.filled { background: var(--orange); color: var(--white); border: none; } .pkg-cta.filled:hover { background: #c94010; } .pkg-note { text-align: center; font-size: 12px; color: var(--text3); margin-top: 24px; } /* ADDONS */ .addons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .addon { background: var(--white); border: 1px solid var(--border2); border-radius: var(--r-lg); padding: 24px; transition: border-color .18s, transform .18s; } .addon:hover { border-color: var(--orange); transform: translateY(-2px); } .addon-name { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .addon-desc { font-size: 12px; color: var(--text3); line-height: 1.6; margin-bottom: 14px; } .addon-price { font-size: 13px; font-weight: 600; color: var(--orange); } /* COMPARISON */ .comparison { background: var(--white); } .comp-table { width: 100%; border-collapse: collapse; } .comp-table th { padding: 18px 20px; text-align: left; font-size: 12px; font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--border2); letter-spacing: -.01em; } .comp-table th.hi { background: var(--navy); color: var(--white); border-radius: 10px 10px 0 0; border-bottom-color: transparent; } .comp-table td { padding: 15px 20px; font-size: 13px; color: var(--text2); border-bottom: 1px solid var(--border); background: var(--white); } .comp-table td.hi { background: #F0F4F8; font-weight: 700; color: var(--navy); } .comp-table tr:last-child td { border-bottom: none; } .yes { color: var(--orange); font-weight: 800; font-size: 15px; } .no { color: var(--text3); font-size: 15px; } /* WHY */ .why { background: var(--cream); } .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .why-visual { background: var(--navy); border-radius: 20px; padding: 36px; } .why-visual-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; flex-shrink: 0; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} } .metric-cards { display: flex; flex-direction: column; gap: 10px; } .mc { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; transition: background .18s; } .mc:hover { background: rgba(255,255,255,.1); } .mc-label { font-size: 13px; color: rgba(255,255,255,.6); } .mc-right { display: flex; align-items: center; gap: 10px; } .mc-val { font-size: 20px; font-weight: 700; color: var(--white); letter-spacing: -.02em; } .mc-delta { font-size: 10px; font-weight: 700; color: var(--orange); background: rgba(232,82,26,.2); padding: 2px 7px; border-radius: 100px; } .why-points { display: flex; flex-direction: column; gap: 32px; } .wp-num { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--orange); margin-bottom: 8px; } .wp-h { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; margin-bottom: 8px; } .wp-p { font-size: 14px; color: var(--text2); line-height: 1.7; } /* TESTIMONIALS */ .testimonials { background: var(--navy); padding: 96px 60px; } .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; } .testi { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); padding: 32px; transition: background .2s; } .testi:hover { background: rgba(255,255,255,.07); } .testi-stars { color: #FBBC04; font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; } .testi-quote { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.8; margin-bottom: 24px; } .testi-author { display: flex; align-items: center; gap: 12px; } .testi-av { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: var(--white); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .testi-name { font-size: 13px; font-weight: 600; color: var(--white); } .testi-role { font-size: 11px; color: rgba(255,255,255,.35); } .results-strip { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-lg); padding: 32px 40px; flex-wrap: wrap; gap: 24px; } .rs-item { text-align: center; flex: 1; min-width: 80px; } .rs-item + .rs-item { border-left: 1px solid rgba(255,255,255,.08); } .rs-num { font-size: 28px; font-weight: 700; color: var(--white); letter-spacing: -.03em; } .rs-label { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 4px; } /* TIMELINE */ .timeline { background: var(--white); } .tl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .tl-num-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .tl-num { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tl-arrow { color: var(--text3); font-size: 16px; } .tl-duration { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--orange); text-transform: uppercase; margin-bottom: 8px; } .tl-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .tl-desc { font-size: 12px; color: var(--text2); line-height: 1.7; } /* FAQ */ .faq { background: var(--white); } .faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .faq-item { border: 1px solid var(--border2); border-radius: var(--r); overflow: hidden; transition: border-color .18s; } .faq-item:hover { border-color: var(--orange); } .faq-item.open { border-color: var(--navy); } .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--navy); background: var(--white); user-select: none; gap: 12px; letter-spacing: -.01em; } .faq-icon { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text3); flex-shrink: 0; transition: all .22s; } .faq-item.open .faq-icon { background: var(--navy); color: var(--white); border-color: var(--navy); transform: rotate(45deg); } .faq-a { font-size: 13px; color: var(--text2); line-height: 1.75; max-height: 0; overflow: hidden; padding: 0 22px; transition: max-height .3s ease, padding .3s; } .faq-item.open .faq-a { max-height: 300px; padding: 0 22px 20px; } /* CTA SECTION */ .cta-section { background: var(--navy); padding: 100px 60px; text-align: center; position: relative; overflow: hidden; } .cta-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.04); pointer-events: none; } .cta-inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; } .cta-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); } .cta-section h2 { font-size: clamp(30px, 4vw, 50px); font-weight: 700; color: var(--white); letter-spacing: -.03em; line-height: 1.15; margin-bottom: 18px; } .cta-section p { font-size: 16px; color: rgba(255,255,255,.6); margin-bottom: 44px; line-height: 1.7; } .cta-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .cta-btn-a { background: var(--orange); color: var(--white); padding: 15px 30px; border-radius: var(--r); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .18s, transform .18s; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; } .cta-btn-a:hover { background: #c94010; transform: translateY(-2px); } .cta-btn-b { border: 1.5px solid rgba(255,255,255,.2); color: var(--white); padding: 15px 30px; border-radius: var(--r); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .18s; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: none; } .cta-btn-b:hover { border-color: rgba(255,255,255,.6); } .cta-note { font-size: 12px; color: rgba(255,255,255,.3); margin-top: 24px; } /* MODAL */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(15,25,35,.8); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 24px; } .modal-overlay.open { display: flex; } .modal-box { background: var(--white); border-radius: 20px; max-width: 540px; width: 100%; padding: 48px; position: relative; animation: modalIn .3s ease; max-height: 90vh; overflow-y: auto; } .booking-box { max-width: 720px; padding: 40px; } @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } } .modal-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%; background: var(--cream2); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text2); transition: background .18s; } .modal-close:hover { background: var(--cream); } .modal-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; } .modal-box h2 { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; margin-bottom: 8px; } .modal-box > p { font-size: 14px; color: var(--text2); line-height: 1.6; margin-bottom: 28px; } .modal-form { display: flex; flex-direction: column; gap: 14px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 12px; font-weight: 600; color: var(--navy); } .form-group input, .form-group select, .form-group textarea { padding: 11px 14px; border: 1.5px solid var(--border2); border-radius: var(--r); font-family: var(--font); font-size: 13px; color: var(--navy); background: var(--cream); outline: none; transition: border-color .18s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--orange); background: var(--white); } .form-group textarea { resize: vertical; min-height: 80px; } .form-submit { background: var(--orange); color: var(--white); padding: 14px; border-radius: var(--r); font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: background .18s, transform .18s; } .form-submit:hover { background: #c94010; transform: translateY(-1px); } .form-note { font-size: 11px; color: var(--text3); text-align: center; } .form-success { display: none; text-align: center; padding: 20px 0; } .form-success-icon { font-size: 48px; margin-bottom: 16px; } .form-success h3 { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .form-success p { font-size: 14px; color: var(--text2); } /* ABOUT */ .about-hero-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-right-card { background: var(--navy); border-radius: 20px; padding: 40px; } .about-right-card h3 { font-size: 22px; font-weight: 700; color: var(--white); margin-bottom: 8px; } .about-right-card > p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 24px; } .about-values { display: flex; flex-direction: column; } .about-val { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .about-val:last-child { border-bottom: none; } .av-label { font-size: 12px; font-weight: 700; color: var(--orange); min-width: 110px; padding-top: 2px; } .av-text { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.6; } .mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .mission-card { padding: 32px; background: var(--cream); border-radius: var(--r-lg); border: 1px solid var(--border2); } .mc2-icon { font-size: 28px; margin-bottom: 16px; } .mc2-title { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .mc2-text { font-size: 13px; color: var(--text2); line-height: 1.7; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .team-card { background: var(--white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border2); transition: transform .2s, box-shadow .2s; } .team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(15,25,35,.1); } .team-avatar { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: var(--white); } .team-info { padding: 20px; } .team-name { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 2px; } .team-role { font-size: 12px; color: var(--orange); font-weight: 600; margin-bottom: 8px; } .team-bio { font-size: 12px; color: var(--text2); line-height: 1.6; } .history-list { display: flex; flex-direction: column; max-width: 680px; } .history-item { display: grid; grid-template-columns: 100px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .history-item:last-child { border-bottom: none; } .history-year { font-size: 13px; font-weight: 700; color: var(--orange); } .history-milestones { display: flex; flex-direction: column; gap: 8px; } .history-milestone { font-size: 14px; color: rgba(255,255,255,.7); display: flex; align-items: flex-start; gap: 8px; } .history-milestone::before { content: ''; color: var(--orange); flex-shrink: 0; font-size: 12px; margin-top: 2px; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .value-card { padding: 36px 28px; border-radius: var(--r-lg); border: 1px solid var(--border2); background: var(--cream); } .value-title { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .value-desc { font-size: 13px; color: var(--text2); line-height: 1.7; } /* SCAN PAGE */ .scan-form-card { background: var(--white); border-radius: 20px; padding: 40px; border: 1px solid var(--border2); box-shadow: 0 8px 40px rgba(15,25,35,.08); } .scan-form-card h2 { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .scan-form-card > p { font-size: 13px; color: var(--text2); margin-bottom: 24px; } .scan-benefits { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; } .scan-benefit { display: flex; align-items: flex-start; gap: 14px; } .sb-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--orange-l); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .sb-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .sb-desc { font-size: 13px; color: var(--text2); line-height: 1.6; } .scan-trust { background: var(--navy); border-radius: var(--r-lg); padding: 24px; } .scan-trust-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; } .scan-trust-items { display: flex; flex-wrap: wrap; gap: 12px; } .st-item { font-size: 12px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 6px; } .st-item::before { content: '\2713'; color: var(--orange); font-weight: 700; } /* WERKEN BIJ */ .vacatures-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 780px; } .vacature-card { background: var(--white); border: 1.5px solid var(--border2); border-radius: var(--r-lg); padding: 32px; transition: border-color .2s, transform .2s; cursor: pointer; } .vacature-card:hover { border-color: var(--orange); transform: translateY(-3px); } .vac-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); background: var(--orange-l); padding: 4px 10px; border-radius: 100px; margin-bottom: 14px; } .vac-title { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; margin-bottom: 10px; } .vac-desc { font-size: 13px; color: var(--text2); line-height: 1.7; margin-bottom: 20px; } .vac-meta { display: flex; gap: 16px; flex-wrap: wrap; } .vac-m { font-size: 11px; color: var(--text3); font-weight: 500; display: flex; align-items: center; gap: 5px; } .vac-cta { margin-top: 20px; font-size: 13px; font-weight: 700; color: var(--orange); display: inline-flex; align-items: center; gap: 6px; transition: gap .18s; } .vacature-card:hover .vac-cta { gap: 10px; } /* CONTACT */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact-info { display: flex; flex-direction: column; gap: 32px; } .contact-info-item { display: flex; align-items: flex-start; gap: 16px; } .ci-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--orange-l); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .ci-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; } .ci-value { font-size: 15px; font-weight: 600; color: var(--navy); } .ci-sub { font-size: 12px; color: var(--text2); margin-top: 2px; } .contact-form-card { background: var(--white); border-radius: 20px; padding: 40px; border: 1px solid var(--border2); box-shadow: 0 4px 24px rgba(15,25,35,.06); } .contact-form-card h2 { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .contact-form-card > p { font-size: 13px; color: var(--text2); margin-bottom: 24px; } /* FOOTER */ footer { background: #080F14; color: rgba(255,255,255,.35); padding: 56px 60px 36px; } .footer-inner { max-width: 1160px; margin: 0 auto; } .footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand p { font-size: 13px; color: rgba(255,255,255,.35); line-height: 1.7; margin-top: 12px; max-width: 260px; } .footer-logo { font-size: 18px; font-weight: 700; color: var(--white); letter-spacing: -.01em; cursor: pointer; } .footer-logo span { color: var(--orange); } .footer-social { display: flex; gap: 10px; margin-top: 20px; } .footer-social a { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; transition: background .18s, border-color .18s; text-decoration: none; } .footer-social a:hover { background: var(--orange); border-color: var(--orange); } .footer-social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.6); } .footer-social a:hover svg { fill: var(--white); } .footer-col h4 { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; } .footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,.4); text-decoration: none; margin-bottom: 10px; transition: color .18s; cursor: pointer; } .footer-col a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; } .footer-bottom a { color: rgba(255,255,255,.35); text-decoration: none; transition: color .18s; } .footer-bottom a:hover { color: var(--white); } /* FLOATING CTA */ .floating-cta { position: fixed; bottom: 32px; right: 32px; z-index: 100; background: var(--orange); color: var(--white); padding: 13px 22px; border-radius: 50px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; box-shadow: 0 8px 24px rgba(232,82,26,.4); display: flex; align-items: center; gap: 8px; transition: transform .2s, box-shadow .2s; animation: floatIn 1s ease 1.5s both; font-family: var(--font); } .floating-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232,82,26,.5); } @keyframes floatIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* REVEAL */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @keyframes pijlerPulse { 0%,45%,100%{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); } 12%,28%{ background:var(--navy); border-color:var(--navy); } } .pijler-ico { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; color:#fff; animation:pijlerPulse 4.5s ease-in-out infinite; } .pijler-ico.d2 { animation-delay:1.5s; } .pijler-ico.d3 { animation-delay:3s; } @media (prefers-reduced-motion: reduce){ .pijler-ico{ animation:none; } } /* MOBILE */ /* ═══════════════════════════════════════════ TABLET ≤960px ═══════════════════════════════════════════ */ @media(max-width:960px){ nav{padding:0 24px;} .nav-links{display:none;} .nav-links.open{ display:flex!important;flex-direction:column!important; position:fixed!important;top:64px!important;left:0!important;right:0!important; background:var(--navy)!important;padding:24px 24px 32px!important; z-index:400!important;gap:18px!important; box-shadow:0 8px 32px rgba(0,0,0,.3);max-height:calc(100vh - 64px)!important;overflow-y:auto!important;} .nav-links.open a{font-size:16px!important;color:white!important;padding:8px 0;} .hamburger{display:flex;} .hero{grid-template-columns:1fr;padding:80px 24px 48px;gap:40px;} .hero-right{display:none!important;} .hero-photo-half{display:none!important;} section{padding:56px 24px;} .logo-strip{padding:28px 24px;} .logo-strip-inner{padding:0;} .footer-top{grid-template-columns:1fr 1fr;gap:32px;} .footer-brand{grid-column:1/-1;} .problem-grid,.testi-grid,.mission-grid,.why-grid,.faq-cols{grid-template-columns:1fr;} [style*="grid-template-columns:1fr 280px"]{grid-template-columns:1fr!important;} [style*="padding:64px 60px"]{padding:48px 24px!important;} [style*="padding:72px 60px"]{padding:56px 24px 40px!important;} [style*="padding:88px 60px"]{padding:72px 24px 48px!important;} [style*="padding:56px 60px"]{padding:40px 24px!important;} [style*="padding:96px 60px"]{padding:56px 24px!important;} } /* ═══════════════════════════════════════════ MOBILE ≤640px ═══════════════════════════════════════════ */ @media(max-width:640px){ /* NAV */ nav{padding:0 16px;} .nav-links{display:none!important;} .nav-links.open{ display:flex!important;flex-direction:column!important; position:fixed!important;top:64px!important;left:0!important;right:0!important; background:var(--navy)!important;padding:24px 24px 32px!important; z-index:400!important;gap:20px!important; box-shadow:0 8px 32px rgba(0,0,0,.3);} .nav-links.open a{font-size:16px!important;color:white!important;padding:8px 0;} .hamburger{display:flex!important;} /* HERO */ .hero{padding:72px 16px 40px!important;gap:24px!important;} .hero-right{display:none!important;} h1{font-size:clamp(26px,7vw,36px)!important;line-height:1.15!important;} .hero h1{font-size:clamp(22px,5.6vw,30px)!important;line-height:1.12!important;} .hero-sub{font-size:15px!important;} /* LOGO STRIP */ .logo-strip{padding:16px 0!important;overflow:hidden!important;} .logo-strip-inner{padding:0!important;} .logo-strip-logos{ display:flex!important;flex-wrap:nowrap!important; width:max-content!important;animation:logoScroll 22s linear infinite;} .logo-strip-logos div{flex:none!important;padding:0 24px!important;} .logo-strip-logos img{height:18px!important;} /* SECTION PADDING */ .section-inner{padding:0 16px!important;} section{padding:40px 0!important;} [style*="padding:64px 60px"]{padding:36px 16px!important;} [style*="padding:72px 60px"]{padding:52px 16px 32px!important;} [style*="padding:88px 60px"]{padding:68px 16px 40px!important;} [style*="padding:56px 60px"]{padding:36px 16px!important;} [style*="padding:48px 60px"]{padding:28px 16px!important;} [style*="padding:96px 60px"]{padding:48px 16px!important;} [style*="padding:40px;display:grid"]{padding:20px 16px!important;} /* ─── DIENSTEN FASE GRIDS ─── */ .fase2-grid, .reveal[style*="grid-template-columns:1fr 1fr;gap:48px;align-items:center"]{ display:flex!important;flex-direction:column!important; gap:24px!important;padding:28px 0!important;} /* ─── PAKKETTEN CAROUSEL ─── */ [style*="grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px"]{ display:flex!important;overflow-x:auto!important; scroll-snap-type:x mandatory!important; -webkit-overflow-scrolling:touch!important; gap:12px!important;padding-bottom:16px!important;scrollbar-width:none!important;} [style*="grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px"]::-webkit-scrollbar{display:none;} [style*="grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px"]>div{ min-width:calc(100vw - 48px)!important; max-width:calc(100vw - 48px)!important; scroll-snap-align:start!important;flex-shrink:0!important;} .swipe-hint{display:flex!important;} /* ─── REVIEWS carousel ─── */ .testi-grid{ display:flex!important;overflow-x:auto!important; scroll-snap-type:x mandatory!important; -webkit-overflow-scrolling:touch!important; gap:12px!important;padding-bottom:12px!important;scrollbar-width:none!important; grid-template-columns:unset!important;} .testi-grid::-webkit-scrollbar{display:none;} .testi{ min-width:calc(100vw - 48px)!important; max-width:calc(100vw - 48px)!important; scroll-snap-align:start!important;flex-shrink:0!important;} /* ─── DIENSTEN ADD-ONS ─── */ [style*="grid-template-columns:repeat(5,1fr);gap:12px"]{ grid-template-columns:1fr 1fr!important;gap:10px!important;} /* ─── OVER ONS WAARDEN → 1 kolom ─── */ .reveal[style*="grid-template-columns:repeat(4,1fr);gap:20px"]{ grid-template-columns:1fr!important;gap:12px!important;} /* ─── OVER ONS TEAM → 2 kolommen ─── */ .reveal[style*="grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px"]{ grid-template-columns:1fr 1fr!important;gap:12px!important;} /* ─── ABOUT HERO → foto onder tekst ─── */ [style*="grid-template-columns:1fr 1fr;gap:72px"]{ display:flex!important;flex-direction:column!important;gap:24px!important;} [style*="padding:100px 60px 80px"]{padding:72px 16px 40px!important;} .res-hero-stats{grid-template-columns:repeat(3,1fr)!important;gap:16px!important;} .res-hero-stats > div > div:first-child{font-size:24px!important;} /* ─── WB HERO BUTTONS → gelijke breedte ─── */ .wb-hero-btns{ flex-direction:column!important;gap:10px!important;margin-bottom:32px!important;} .wb-hero-btns .btn-orange, .wb-hero-btns .btn-primary, .wb-hero-btns .wb-hero-btn-2{ width:100%!important;justify-content:center!important;text-align:center!important;} /* WB HERO uitlijning op mobiel */ .wb-hero-wrap{padding:64px 16px 0!important;} .wb-hero-inner{padding:48px 0!important;} /* ─── WB STATS BAR → 2×2 grid ─── */ .wb-stats-bar{ display:grid!important;grid-template-columns:1fr 1fr!important; gap:20px 12px!important;padding-top:24px!important;} .wb-stats-bar>div{padding-right:0!important;} /* ─── WB FOTO CAROUSEL → 1 foto per keer ─── */ #fotoTrack{ grid-template-columns:1fr!important; height:240px!important;overflow:hidden!important;} .foto-set[style*="display:flex"]{ height:240px!important;overflow:hidden!important; border-radius:16px!important;} .foto-set[style*="display:flex"]>div{display:none!important;} .foto-set[style*="display:flex"]>div:first-child{ display:block!important;height:240px!important;position:relative!important;} .foto-set[style*="display:flex"]>div:first-child>div{ position:absolute!important;inset:0!important;} .foto-set[style*="display:flex"] img{ width:100%!important;height:100%!important;object-fit:cover!important;} /* ─── WB ARBEIDSVOORWAARDEN → 1 kolom ─── */ .reveal[style*="grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px"]{ grid-template-columns:1fr!important;gap:12px!important;} /* ─── WB VACATURES ─── */ .reveal[style*="flex-direction:column;gap:16px;max-width:860px"]{ max-width:100%!important;} /* ─── CONTACT → formulier onder info ─── */ .contact-grid{ display:flex!important;flex-direction:column!important;gap:32px!important;} .contact-info{padding-top:0!important;} [style*="margin-top:64px"][style*="grid-template-columns:1fr 1fr;gap:48px"]{ grid-template-columns:1fr!important;gap:20px!important;padding:24px 16px!important;} iframe{width:100%!important;height:220px!important;} /* ─── GENERAL GRID OVERRIDES ─── */ .problem-grid,.mission-grid,.why-grid,.faq-cols{grid-template-columns:1fr!important;} [style*="grid-template-columns:1fr 1fr;gap:24px"], [style*="grid-template-columns:1fr 1fr;gap:20px"], [style*="grid-template-columns:1fr 1fr;gap:16px"], [style*="grid-template-columns:1fr 1fr;gap:12px"], [style*="grid-template-columns:1fr 280px"]{grid-template-columns:1fr!important;} [style*="position:sticky"]{position:relative!important;top:auto!important;} [style*="display:grid;grid-template-columns:1fr 280px"]{display:block!important;} /* ─── FOOTER ─── */ .footer-top{grid-template-columns:1fr!important;gap:20px!important;} .footer-brand{grid-column:1!important;} footer{padding:32px 16px 20px!important;} /* ─── MODAL ─── */ .modal-box{margin:12px!important;padding:20px 16px!important; max-height:calc(100vh - 24px)!important;overflow-y:auto!important;} .form-row{grid-template-columns:1fr!important;} .section-h{font-size:clamp(22px,6vw,32px)!important;} } @media(max-width:640px){.wb-stats-bar{display:none!important;}} @media(max-width:640px){#fotoTrack{height:240px!important;overflow:visible!important;}} .case-card:hover{box-shadow:0 8px 24px rgba(15,25,35,.10)!important;transform:translateY(-3px);} .case-card:hover .case-arrow{transform:translateX(4px);} @media(max-width:980px){.cases-grid{grid-template-columns:repeat(2,1fr)!important;}} @media(max-width:640px){.cases-grid{grid-template-columns:1fr!important;gap:16px!important;}} /* Ensure home page visible immediately before JS loads */ #page-home { display: block; } #pakketten .jargon,#pakketten-diensten .jargon{display:flex;align-items:center;flex:1;min-width:0;} #pakketten .jargon-i,#pakketten-diensten .jargon-i{margin-left:auto;flex-shrink:0;} #pakketten .jargon-pop,#pakketten-diensten .jargon-pop{flex:none;} @media(max-width:820px){ .proc-strip{flex-direction:column!important;gap:24px!important;} .proc-arrow{transform:rotate(90deg);align-self:center!important;margin:0!important;} } .deliverables-grid{grid-template-columns:repeat(3,1fr);} @media(max-width:900px){.deliverables-grid{grid-template-columns:1fr!important;gap:28px!important;}} @media(max-width:640px){section [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}} /* responsive fixes: 3-koloms grids, logo-marquee, tooltips */ @media(max-width:900px){[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}} @media(max-width:600px){[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;} [style*="grid-template-columns:1fr 1fr 1fr"]:not(.foto-set){grid-template-columns:1fr!important;}} .fp-logos-wrap{overflow:hidden;max-width:100%;} #mobileNav{position:fixed;inset:0;z-index:9999;background:var(--navy);color:#fff;display:none;flex-direction:column;padding:18px 22px 26px;overflow-y:auto;-webkit-overflow-scrolling:touch;} #mobileNav.open{display:flex;} .mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .mnav-logo{font-size:20px;font-weight:700;color:#fff;} .mnav-logo span{color:var(--orange);} .mnav-close{background:none;border:none;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:4px 8px;font-family:inherit;} .mnav-links{display:flex;flex-direction:column;height:auto;min-height:0;align-items:stretch;padding:0;background:transparent;box-shadow:none;border:none;} .mnav-links>a,.mnav-parent{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;color:#fff;font-size:18px;font-weight:600;padding:15px 2px;cursor:pointer;font-family:inherit;text-transform:none;} .mnav-chev{font-size:13px;color:var(--orange);transition:transform .2s;} .mnav-group.open .mnav-chev{transform:rotate(180deg);} .mnav-sub{display:none;flex-direction:column;padding:2px 0 10px 14px;} .mnav-group.open .mnav-sub{display:flex;} .mnav-sub a{color:rgba(255,255,255,.82);font-size:15.5px;padding:10px 2px;cursor:pointer;} .mnav-cta{margin-top:24px;display:flex;flex-direction:column;gap:12px;} .mnav-cta .mnav-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:16px 24px;border-radius:var(--r);font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;border:none;} .mnav-cta .mnav-btn-secondary{background:rgba(255,255,255,.10);color:#fff;border:1.5px solid rgba(255,255,255,.35);} .mnav-cta .mnav-btn-primary{background:var(--orange);color:#fff;} @media(min-width:961px){#mobileNav{display:none!important;}} .mobile-sub{display:none;} .nav-links.open .mobile-sub{display:flex!important;flex-direction:column;gap:12px;margin:2px 0 6px;padding:2px 0 6px 16px;border-left:2px solid rgba(255,255,255,.18);} .nav-links.open .mobile-sub a{font-size:14px!important;color:rgba(255,255,255,.78)!important;padding:2px 0!important;} @media(max-width:860px){[style*="grid-template-columns:1fr 360px"]{grid-template-columns:1fr!important;}} @media(max-width:640px){.jargon-pop{left:auto!important;right:0!important;max-width:84vw!important;}} @media(max-width:900px){.activate-grid{grid-template-columns:1fr!important;}} /* ═══════════════════════════════════════════════════════ LUXE-LAAG + PUNT/CIRKEL-MOTIEF (de "." van Louie.works) ═══════════════════════════════════════════════════════ */ /* (geen punt in de eyebrow; geen kleine oranje cirkels) */ /* rijkere, diepere donkere secties */ .testimonials, .growth { background: radial-gradient(125% 150% at 50% -25%, #16262F 0%, var(--navy) 62%); } .cta-section { background: radial-gradient(95% 130% at 50% 0%, #17272F 0%, var(--navy) 64%); } footer { background: radial-gradient(110% 150% at 50% 0%, #0B141A 0%, #080F14 72%); } /* zeer subtiele, grote cirkel-omlijningen (deels buiten beeld = halve cirkel) */ .problem, .testimonials { position: relative; overflow: hidden; } .problem .section-inner, .testimonials .section-inner { position: relative; z-index: 1; } .problem::before, .testimonials::before { content: ""; position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.03); } .problem::before { width: 680px; height: 680px; top: -300px; right: -260px; } .testimonials::before { width: 820px; height: 820px; bottom: -380px; left: -320px; } /* grote, zachte ring achter de hero (deels buiten beeld) */ .hero-band::before { content: ""; position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; width: 760px; height: 760px; top: -320px; left: -320px; border: 1px solid rgba(15,25,35,.035); } /* footer-ring */ footer { position: relative; overflow: hidden; } .footer-inner { position: relative; z-index: 1; } footer::before { content: ""; position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; width: 560px; height: 560px; top: -260px; right: -220px; border: 1px solid rgba(255,255,255,.025); } /* CTA: subtiele concentrische ringen (deels buiten beeld) */ .cta-section .cta-ring { top: 50%; left: 50%; transform: translate(-50%,-50%); border-color: rgba(255,255,255,.03); } .cta-section .cta-ring.r1 { width: 360px; height: 360px; } .cta-section .cta-ring.r2 { width: 620px; height: 620px; } .cta-section .cta-ring.r3 { width: 900px; height: 900px; } /* premium kaarten: zachtere lift + fijnere schaduw */ .problem-card, .testi, .pkg, .mega-card, .team-card, .value-card, .mission-card, .growth-step, .addon, .vacature-card, .case-card { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .25s ease, background .25s ease; } .pkg:hover, .team-card:hover, .value-card:hover, .mission-card:hover, .vacature-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -22px rgba(15,25,35,.30); } /* premium knoppen */ .btn-orange, .cta-btn-a, .form-submit { box-shadow: 0 10px 26px -12px rgba(232,82,26,.55); } .btn-primary { box-shadow: 0 10px 26px -14px rgba(15,25,35,.45); } .btn-orange:hover, .cta-btn-a:hover, .form-submit:hover { box-shadow: 0 16px 34px -12px rgba(232,82,26,.62); } /* ── subtiele sier-cirkels: achter de tekst, afwisselend per kolom ── */ .problem-card, .testi, .mission-card, .value-card, .about-right-card { position: relative; overflow: hidden; } .problem-card > *, .testi > *, .mission-card > *, .value-card > *, .about-right-card > * { position: relative; z-index: 1; } .problem-card::after, .testi::after, .mission-card::after, .value-card::after, .about-right-card::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; width: 150px; height: 150px; } .problem-card::after { background: rgba(232,82,26,.07); } .mission-card::after, .problem-card::after { content: none !important; display: none !important; } .testi::after { background: rgba(255,255,255,.05); } .mission-card::after { border: 1px solid rgba(232,82,26,.18); background: transparent; } .value-card::after { background: rgba(232,82,26,.06); } .about-right-card::after { background: rgba(255,255,255,.05); top: -84px; right: -84px; } /* afwisselende hoeken per kolom (3-koloms grids) */ .problem-card:nth-child(3n+1)::after, .testi:nth-child(3n+1)::after, .mission-card:nth-child(3n+1)::after, .value-card:nth-child(3n+1)::after { top: -84px; right: -84px; } .problem-card:nth-child(3n+2)::after, .testi:nth-child(3n+2)::after, .mission-card:nth-child(3n+2)::after, .value-card:nth-child(3n+2)::after { bottom: -84px; left: -84px; } .problem-card:nth-child(3n+3)::after, .testi:nth-child(3n+3)::after, .mission-card:nth-child(3n+3)::after, .value-card:nth-child(3n+3)::after { bottom: -84px; right: -84px; } /* lw-a11y */ :where(img[width][height]){height:auto} [role=button]:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #E8521A;outline-offset:2px;border-radius:4px} /* ── Audit-fixes 2026-09 ── */ /* Mobiele menulinks zijn nu echte links (href): geen onderstreping. */ #mobileNav a{text-decoration:none;} /* Knoppen gebruikten het systeemfont (Arial) i.p.v. het merkfont. */ button,input,select,textarea{font-family:inherit;} /* Uitleg-tooltips ook zichtbaar bij toetsenbordfocus */ .jargon:focus-within .jargon-pop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} /* Megamenu-kaarten en -CTA zijn nu echte links */ a.mega-card{text-decoration:none;color:inherit;} a.mega-cta{text-decoration:none;} /* ── Rekentool flexkosten (/rekentool/) ── */ #page-rekentool{--rt-flex:#1A2A38;--rt-pkg:#E8521A;--rt-ads:#F2A27F;} #page-rekentool .rt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start;} #page-rekentool .rt-card{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;} #page-rekentool .rt-results{display:flex;flex-direction:column;gap:20px;} #page-rekentool .rt-inputs{position:sticky;top:24px;display:flex;flex-direction:column;gap:22px;} #page-rekentool .rt-h2{font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin-bottom:4px;} #page-rekentool .rt-field{border:0;min-width:0;} #page-rekentool .rt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;} #page-rekentool .rt-row label,#page-rekentool legend{font-size:14px;font-weight:600;color:var(--navy);} #page-rekentool legend{margin-bottom:10px;} #page-rekentool .rt-num{width:92px;padding:8px 10px;border:1.5px solid var(--border2);border-radius:8px;background:var(--white);font-size:15px;font-weight:700;color:var(--navy);text-align:right;} #page-rekentool .rt-num:focus{border-color:var(--orange);outline:none;} #page-rekentool .rt-euro{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--text2);} #page-rekentool .rt-range{width:100%;accent-color:var(--orange);height:24px;cursor:pointer;} #page-rekentool .rt-help{font-size:12.5px;color:var(--text3);line-height:1.5;margin-top:4px;} #page-rekentool .rt-pkgs{display:flex;gap:8px;flex-wrap:wrap;} #page-rekentool .rt-pkgs legend{width:100%;} #page-rekentool .rt-pkg{flex:1 1 120px;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--border2);border-radius:10px;background:var(--white);cursor:pointer;} #page-rekentool .rt-pkg input{accent-color:var(--orange);margin-top:4px;} #page-rekentool .rt-pkg strong{display:block;font-size:13.5px;color:var(--navy);} #page-rekentool .rt-pkg small{display:block;font-size:12px;color:var(--text3);} #page-rekentool .rt-pkg:has(input:checked){border-color:var(--orange);background:var(--orange-l);} #page-rekentool .rt-kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);} #page-rekentool .rt-hero{background:var(--navy);border-color:var(--navy);} #page-rekentool .rt-hero .rt-kicker{color:rgba(255,255,255,.6);} #page-rekentool .rt-big{font-size:clamp(40px,6vw,64px);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.1;margin:6px 0 4px;font-variant-numeric:tabular-nums;} #page-rekentool .rt-sub{font-size:14px;color:rgba(255,255,255,.7);} #page-rekentool .rt-bars{display:flex;flex-direction:column;gap:18px;margin:18px 0 16px;} #page-rekentool .rt-bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label val" "bar bar";gap:6px 12px;align-items:end;} #page-rekentool .rt-bar-label{grid-area:label;} #page-rekentool .rt-bar-val{grid-area:val;} #page-rekentool .rt-bar-track{grid-area:bar;} #page-rekentool .rt-bar-label{font-size:13px;font-weight:600;color:var(--text2);line-height:1.3;} #page-rekentool .rt-bar-val{font-size:14px;font-weight:700;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums;} #page-rekentool .rt-bar-track{display:flex;height:40px;align-items:stretch;gap:2px;} #page-rekentool .rt-bar{position:relative;height:100%;min-width:0;transition:width .35s ease;border-radius:0;outline-offset:2px;} #page-rekentool .rt-bar-flex{background:var(--rt-flex);border-radius:0 4px 4px 0;} #page-rekentool .rt-bar-pkg{background:var(--rt-pkg);} #page-rekentool .rt-bar-ads{background:var(--rt-ads);border-radius:0 4px 4px 0;} #page-rekentool .rt-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:12px;line-height:1.4;padding:7px 10px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;z-index:5;} #page-rekentool .rt-bar:hover .rt-tip,#page-rekentool .rt-bar:focus .rt-tip{opacity:1;visibility:visible;} #page-rekentool .rt-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--text2);} #page-rekentool .rt-legend li{display:flex;align-items:center;gap:7px;} #page-rekentool .rt-sw{width:12px;height:12px;border-radius:3px;display:inline-block;} #page-rekentool .rt-sw-flex{background:var(--rt-flex);} #page-rekentool .rt-sw-pkg{background:var(--rt-pkg);} #page-rekentool .rt-sw-ads{background:var(--rt-ads);} #page-rekentool .rt-verdict{background:var(--white);border:2px solid var(--orange);} #page-rekentool .rt-verdict.rt-neg{border-color:var(--border2);} #page-rekentool .rt-verdict-num{font-size:clamp(32px,4.4vw,46px);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.15;margin:4px 0 8px;font-variant-numeric:tabular-nums;} #page-rekentool .rt-verdict-text{font-size:15px;color:var(--text2);line-height:1.6;} #page-rekentool .rt-breakeven{font-size:14px;color:var(--navy);font-weight:600;margin-top:10px;} #page-rekentool .rt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px;} #page-rekentool .rt-link{font-size:14px;font-weight:700;color:var(--orange);text-decoration:none;} #page-rekentool .rt-details summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--navy);} #page-rekentool .rt-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px;} #page-rekentool .rt-table th{text-align:left;font-weight:600;color:var(--text2);padding:8px 0;border-bottom:1px solid var(--border);vertical-align:top;width:42%;} #page-rekentool .rt-table td{padding:8px 0;border-bottom:1px solid var(--border);color:var(--navy);font-variant-numeric:tabular-nums;} #page-rekentool .rt-note{font-size:12.5px;color:var(--text3);line-height:1.6;} @media (max-width:960px){ #page-rekentool .rt-grid{grid-template-columns:1fr;} #page-rekentool .rt-inputs{position:static;} } @media (max-width:640px){ #page-rekentool .rt-card{padding:20px;} } .logo-strip-logos img{object-fit:contain} /* W&S actie: reviews licht, dienstverlening als lichte kaart (kleurritme creme-navy-wit-creme) */ #page-actie .fp-reviews{background:var(--white)} #page-actie .fp-reviews::before{display:none} #page-actie .fp-reviews .section-h{color:var(--navy)} #page-actie .fp-reviews .testi-grid{margin-bottom:0} #page-actie .fp-reviews .testi{background:var(--cream);border-color:var(--border)} #page-actie .fp-reviews .testi:hover{background:var(--cream);border-color:var(--orange)} #page-actie .fp-reviews .testi::after{background:rgba(15,25,35,.035)} #page-actie .fp-reviews .testi-quote{color:var(--text2)} #page-actie .fp-reviews .testi-name{color:var(--navy)} #page-actie .fp-reviews .testi-role{color:var(--text3)} #page-actie .fp-dienst{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap} #page-actie .fp-dienst h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--navy);margin:10px 0 6px} #page-actie .fp-dienst p{font-size:15px;color:var(--text2);line-height:1.6;max-width:36em} @media (max-width:640px){#page-actie .fp-dienst{padding:26px 22px}} #page-actie .fp-reviews{padding:76px 0} #page-actie .fp-reviews .section-inner{max-width:1160px;margin:0 auto;padding:0 24px!important} #page-actie .fp-dienst > div{flex:1 1 380px} #page-actie .fp-dienst .fp-btn{flex-shrink:0} /* ===== ONZE AANPAK – interactieve carrousel (RPO) + stappenkaarten (home) ===== */ :root{--petrol:#0E7C7B;--petrol-l:#E3F1F0;--orange-d:#B83E0F;--peach:#F4A07E;--ok:#1D6B47} .lwa-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px} .lwa-head .section-h{margin-bottom:0} .lwa-head .section-sub{margin:0;max-width:440px} .lwa{--lwa-dur:9000ms} .lwa-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px} .lwa-tab{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:18px 20px 20px;border-radius:var(--r-lg);border:1.5px solid var(--border2);background:var(--white);color:var(--navy);font-family:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,color .2s} .lwa-tab:hover{border-color:var(--navy)} .lwa-tab:focus-visible{outline:3px solid var(--orange);outline-offset:2px} .lwa-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;background:var(--cream);color:var(--navy);transition:background .2s,color .2s} .lwa-tab-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .lwa-tab-t{font-size:16px;font-weight:700;letter-spacing:-.01em} .lwa-tab-s{font-size:13px;color:var(--text3)} .lwa-tab.is-active{background:var(--navy);border-color:var(--navy);color:var(--white)} .lwa-tab.is-active .lwa-num{background:var(--orange);color:var(--white)} .lwa-tab.is-active .lwa-tab-s{color:rgba(255,255,255,.7)} .lwa-bar{position:absolute;left:0;right:0;bottom:0;height:4px} .lwa-bar span{display:block;height:100%;width:0;background:var(--orange)} .lwa-tab.is-done .lwa-bar span{width:100%} .lwa-tab.is-active .lwa-bar{background:rgba(255,255,255,.12)} .lwa-tab.is-active .lwa-bar span{width:100%} .lwa.is-playing .lwa-tab.is-active .lwa-bar span{animation:lwaFill var(--lwa-dur) linear both} @keyframes lwaFill{from{width:0}to{width:100%}} .lwa-stage{background:var(--cream);border-radius:20px;padding:44px;touch-action:pan-y} .lwa-panel{display:grid;grid-template-columns:340px minmax(0,1fr);gap:40px;align-items:stretch} .lwa-panel[hidden]{display:none} .lwa-panel.is-in .lwa-copy{animation:lwaIn .5s cubic-bezier(.2,.7,.2,1) both} .lwa-panel.is-in .lwa-vis{animation:lwaIn .6s .08s cubic-bezier(.2,.7,.2,1) both} @keyframes lwaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .lwa-copy{display:flex;flex-direction:column;gap:18px} .lwa-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d)} .lwa-h{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.12;color:var(--navy);margin:0} .lwa-p{font-size:15px;line-height:1.7;color:var(--text2);margin:0} .lwa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .lwa-list li{position:relative;padding-left:30px;font-size:15px;font-weight:500;color:var(--navy);line-height:1.45} .lwa-list li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8521A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")} .lwa-stat{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-lg);background:var(--white)} .lwa-stat strong{font-size:34px;font-weight:800;color:var(--orange-d);line-height:1;letter-spacing:-.02em} .lwa-stat span{font-size:14px;font-weight:600;line-height:1.35;color:var(--navy)} /* Visual 1 – scan */ .lwa-scan{background:var(--navy);border-radius:var(--r-lg);padding:24px;color:var(--white);display:flex;flex-direction:column;gap:14px} .lwa-scan-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .lwa-scan-top>div{display:flex;flex-direction:column;gap:4px} .lwa-over{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--peach)} .lwa-scan-title{font-size:20px;font-weight:700;letter-spacing:-.01em} .lwa-live{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;background:rgba(255,255,255,.08);font-size:12px;font-weight:600} .lwa-live i,.lwa-auto i{width:8px;height:8px;border-radius:50%;background:#5BD6A0;animation:lwaPulse 1.6s ease-in-out infinite} @keyframes lwaPulse{0%,100%{opacity:1}50%{opacity:.35}} .lwa-scan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .lwa-glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px} .lwa-glass-h{font-size:13px;font-weight:600;color:rgba(255,255,255,.75)} .lwa-meter{display:flex;flex-direction:column;gap:6px;font-size:13px} .lwa-meter b{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.1)} .lwa-meter i{display:block;height:100%;border-radius:4px;background:var(--orange)} .lwa-meter.lwa-soft i{background:var(--peach)} .lwa-chips{display:flex;flex-wrap:wrap;gap:6px} .lwa-chips span{padding:6px 11px;border-radius:100px;background:rgba(255,255,255,.12);font-size:12px;font-weight:600} .lwa-chips span.on{background:var(--white);color:var(--navy)} .lwa-dl{margin:0;display:flex;flex-direction:column;gap:8px;font-size:13px} .lwa-dl div{display:flex;justify-content:space-between;gap:10px} .lwa-dl dt{color:rgba(255,255,255,.75)} .lwa-dl dd{margin:0;font-weight:700} .lwa-plan{background:var(--white);color:var(--navy);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:16px} .lwa-plan-ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--orange-l);color:var(--orange-d);display:flex;align-items:center;justify-content:center} .lwa-plan-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .lwa-plan-txt small{font-size:12px;font-weight:600;color:var(--text2)} .lwa-plan-txt strong{font-size:14px;line-height:1.4} .lwa-ok{flex-shrink:0;padding:7px 11px;border-radius:8px;background:#E7F7EF;color:var(--ok);font-size:12px;font-weight:700} /* Visual 2 – campagnewand */ .lwa-wall-wrap{display:flex;flex-direction:column;gap:14px} .lwa-screen{flex:1;background:#0B1017;border-radius:18px;padding:10px;box-shadow:0 30px 60px -28px rgba(11,16,23,.6)} .lwa-screen-in{height:100%;border-radius:10px;overflow:hidden;background:#111A24;display:flex;flex-direction:column} .lwa-screen-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;background:var(--petrol);color:var(--white)} .lwa-screen-h strong{font-size:15px;font-weight:800;letter-spacing:.06em} .lwa-screen-h span{font-size:12px;font-weight:600} .lwa-wall{flex:1;min-height:340px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;padding:8px} .lwa-t{border-radius:8px;overflow:hidden;min-width:0} .lwa-t small{font-size:10px;font-weight:700;letter-spacing:.08em} .lwa-t-feed{background:var(--white);display:flex;flex-direction:column} .lwa-ph{flex:1;min-height:80px;position:relative;background:#2C4A63;display:flex;align-items:flex-end;justify-content:center} .lwa-ph svg{width:70%;max-width:84px;fill:#436A8A} .lwa-ph em{position:absolute;top:8px;left:8px;padding:3px 7px;border-radius:4px;background:var(--orange);color:var(--white);font-size:10px;font-weight:700;font-style:normal} .lwa-t-feed p{margin:0;padding:8px 10px;font-size:12px;font-weight:700;line-height:1.3;color:var(--navy)} .lwa-t-story{grid-row:span 2;background:var(--orange);color:var(--white);padding:14px;display:flex;flex-direction:column;justify-content:space-between} .lwa-story-bars{display:flex;gap:3px}.lwa-story-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}.lwa-story-bars i:first-child{background:var(--white)} .lwa-t-story>svg{width:80%;max-width:110px;align-self:center;fill:rgba(255,255,255,.28)} .lwa-t-story>div{display:flex;flex-direction:column;gap:8px} .lwa-t-story strong{font-size:clamp(13px,1.3vw,18px);overflow-wrap:anywhere;font-weight:800;line-height:1.08} .lwa-t-story span{font-size:13px;font-weight:600} .lwa-t-story em,.lwa-t-salary em{align-self:flex-start;font-style:normal;font-size:11px;font-weight:700;padding:7px 11px;border-radius:100px;background:var(--white);color:var(--navy)} .lwa-t-salary{background:var(--white);color:var(--navy);padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:6px} .lwa-t-salary small{color:var(--text2)} .lwa-t-salary strong{font-size:clamp(15px,1.5vw,20px);font-weight:800;line-height:1.05} .lwa-t-salary strong span{display:block;font-size:12px;font-weight:600} .lwa-t-salary em{border-radius:6px;background:var(--navy);color:var(--white)} .lwa-t-reel{grid-row:span 2;position:relative;background:var(--navy2);color:var(--white);padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px} .lwa-play{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center} .lwa-play svg{width:22px;fill:var(--navy)} .lwa-t-reel small{color:var(--peach)} .lwa-t-reel strong{font-size:clamp(13px,1.3vw,17px);font-weight:800;line-height:1.15} .lwa-t-quote{background:var(--cream);color:var(--navy);padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:4px} .lwa-t-quote b{font-size:32px;font-weight:800;line-height:.6;color:var(--orange)} .lwa-t-quote strong{font-size:12px;line-height:1.35} .lwa-t-quote small{font-weight:500;letter-spacing:0;color:var(--text2)} .lwa-t-car{background:var(--white);display:flex;flex-direction:column} .lwa-t-car>div{flex:1;background:var(--petrol);color:var(--white);padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:8px} .lwa-t-car strong{font-size:14px;font-weight:800;line-height:1.15} .lwa-t-car>small{padding:7px 10px;color:var(--text2);letter-spacing:0} .lwa-dots{display:flex;gap:4px}.lwa-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}.lwa-dots i:first-child{background:var(--white)} .lwa-chips-light{justify-content:center} .lwa-chips-light span{background:var(--white);color:var(--navy);padding:8px 14px;font-size:13px} /* Visual 3 – ATS */ .lwa-ats-wrap{background:#E3EAEA;border-radius:var(--r-lg);padding:12px;display:flex} .lwa-ats{flex:1;background:var(--white);border:1px solid #DCE2E9;border-radius:12px;overflow:hidden;display:flex;flex-direction:column} .lwa-ats-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid #E4E9EF} .lwa-ats-h>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .lwa-ats-h strong{font-size:14px} .lwa-muted{font-size:12px;color:var(--text3)} .lwa-winbtn{display:flex;gap:5px}.lwa-winbtn i{width:10px;height:10px;border-radius:50%;background:#E4E9EF} .lwa-auto{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ok)} .lwa-auto i{background:#2FB67A} .lwa-ats-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 240px} .lwa-pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px;background:#F7F9FB} .lwa-col{display:flex;flex-direction:column;gap:8px;min-width:0} .lwa-col-h{display:flex;justify-content:space-between;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3)} .lwa-col-ok .lwa-col-h{color:var(--petrol)} .lwa-cand{display:flex;align-items:center;gap:7px;padding:8px;border-radius:8px;background:var(--white);border:1px solid #E4E9EF;min-width:0} .lwa-cand.is-sel{border:2px solid var(--orange);padding:7px} .lwa-cand span{display:flex;flex-direction:column;font-size:13px;font-weight:700;min-width:0} .lwa-cand small{font-size:11px;font-weight:500;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lwa-cand small.ok{color:var(--ok);font-weight:600} .lwa-ats i[class^="c-"]{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700} .c-b{background:#DCE7F5;color:#2A5A92}.c-o{background:#F5E3DC;color:#A33A10}.c-g{background:#E2EFE8;color:var(--ok)}.c-p{background:#EDE6F7;color:#5B3E92}.c-n{background:var(--navy);color:var(--white)} .lwa-profile{border-left:1px solid #E4E9EF;padding:14px;display:flex;flex-direction:column;gap:12px} .lwa-prof-h{display:flex;align-items:center;gap:10px} .lwa-prof-h i{width:38px!important;height:38px!important;font-size:14px!important} .lwa-prof-h span{display:flex;flex-direction:column} .lwa-prof-h strong{font-size:14px} .lwa-prof-h small{font-size:11px;color:var(--text3)} .lwa-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--text3)} .lwa-timeline li{display:flex;align-items:center;gap:8px} .lwa-timeline li::before{content:"";width:6px;height:6px;border-radius:50%;background:#9AA8B6;flex-shrink:0} .lwa-timeline li.hot{color:var(--navy);font-weight:600} .lwa-timeline li.hot::before{background:var(--orange)} .lwa-timeline b{margin-left:auto;white-space:nowrap;padding:2px 6px;border-radius:4px;background:var(--orange-l);color:var(--orange-d)} .lwa-ko{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:8px;background:#F7F9FB;font-size:12px} .lwa-ko small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3)} .lwa-ko span{display:flex;justify-content:space-between;gap:8px} .lwa-ko b{color:var(--ok)} .lwa-book{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:none;border-radius:var(--r);background:var(--navy);color:var(--white);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s} .lwa-book:hover{background:var(--navy2)} .lwa-book.is-done{background:var(--ok)} /* Bediening */ .lwa-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;flex-wrap:wrap} .lwa-arrows{display:flex;align-items:center;gap:10px} .lwa-arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--navy);background:transparent;color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s} .lwa-arrow:hover{background:var(--navy);color:var(--white)} .lwa-count{margin-left:6px;font-size:14px;font-weight:600;color:var(--text2)} .lwa-pips{display:none;gap:6px;align-items:center} .lwa-pips i{width:8px;height:8px;border-radius:4px;background:var(--border2);transition:width .2s,background .2s} .lwa-pips i.on{width:22px;background:var(--orange)} @media (max-width:1024px){ .lwa-panel{grid-template-columns:1fr;gap:28px} .lwa-stage{padding:32px} } @media (max-width:760px){ .lwa-head{margin-bottom:28px;gap:14px} .lwa-tabs{gap:8px} .lwa-tab{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 10px 14px;border-radius:12px} .lwa-num{width:28px;height:28px;font-size:13px} .lwa-tab-t{font-size:12px;line-height:1.25} .lwa-tab-s{display:none} .lwa-bar{height:3px} .lwa-stage{padding:20px;border-radius:16px} .lwa-scan{padding:16px} .lwa-scan-grid{grid-template-columns:1fr} .lwa-live,.lwa-ok{display:none} .lwa-plan{padding:12px} .lwa-plan-ico{display:none} .lwa-screen{padding:7px;border-radius:14px} .lwa-screen-h span{display:none} .lwa-wall{min-height:280px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px} .lwa-t-quote{display:none} .lwa-t-feed p,.lwa-t-quote strong{font-size:10px;padding:6px} .lwa-t-car strong{font-size:11px} .lwa-t-car>small{display:none} .lwa-t-story{padding:10px} .lwa-t-story span,.lwa-t-story em{display:none} .lwa-t-story{padding:8px} .lwa-t-story strong{font-size:11px;overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto} .lwa-t-reel small{display:none} .lwa-t-reel strong{font-size:10px} .lwa-play{top:38%} .lwa-t-salary strong{font-size:12px} .lwa-t-salary{padding:8px} .lwa-t-salary em{display:none} .lwa-t-reel{padding:8px} .lwa-play{width:34px;height:34px}.lwa-play svg{width:14px} .lwa-chips-light{display:none} .lwa-ats-wrap{padding:8px} .lwa-ats-body{grid-template-columns:1fr} .lwa-pipe{padding:10px} .lwa-cand{display:none} .lwa-col-h{flex-direction:column-reverse;gap:2px;padding:8px;border-radius:8px;background:var(--white);border:1px solid #E4E9EF;font-size:9px;letter-spacing:0;text-transform:none} .lwa-col-h b{font-size:18px;color:var(--navy)} .lwa-col-ok .lwa-col-h{background:var(--petrol-l);border-color:#B9DCDA} .lwa-col-ok .lwa-col-h b{color:#0B6564} .lwa-profile{border-left:none;border-top:1px solid #E4E9EF} .lwa-muted,.lwa-winbtn{display:none} .lwa-count{display:none} .lwa-pips{display:flex;margin:0 6px} .lwa-arrows{width:100%;justify-content:space-between} .lwa-arrow-next{order:3;background:var(--navy);color:var(--white)} .lwa-cta{width:100%;justify-content:center;min-height:52px} } @media (prefers-reduced-motion:reduce){ .lwa-panel.is-in .lwa-copy,.lwa-panel.is-in .lwa-vis,.lwa.is-playing .lwa-tab.is-active .lwa-bar span,.lwa-live i,.lwa-auto i{animation:none} } /* Home – vereenvoudigde stappenkaarten */ .lwh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .lwh-card{display:flex;flex-direction:column;background:var(--cream);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--navy);transition:transform .2s,box-shadow .2s} .lwh-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(15,25,35,.45)} .lwh-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px} .lwh-vis{height:170px;margin:12px 12px 0;border-radius:14px;padding:18px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;justify-content:center} .lwh-v1{background:var(--navy);color:var(--white)} .lwh-over{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--peach)} .lwh-m{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.1)} .lwh-m i{display:block;height:100%;border-radius:4px;background:var(--orange)} .lwh-m.lwh-soft i{background:var(--peach)} .lwh-pill{align-self:flex-start;margin-top:4px;padding:5px 10px;border-radius:100px;background:var(--white);color:var(--navy);font-size:11px;font-weight:700} .lwh-v2{background:#0B1017;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;padding:8px} .lwh-v2 span{border-radius:6px;display:flex;align-items:flex-end;padding:8px;min-width:0} .lwh-v2 b{font-size:11px;font-weight:800;line-height:1.15} .lwh-w1{grid-row:span 2;background:var(--orange);color:var(--white)} .lwh-w2{background:var(--navy2);align-items:center!important;justify-content:center} .lwh-w2 em{width:0;height:0;border-left:12px solid var(--white);border-top:8px solid transparent;border-bottom:8px solid transparent} .lwh-w3{background:var(--white);color:var(--navy)} .lwh-w4{grid-column:span 2;background:var(--petrol);color:var(--white)} .lwh-v3{background:var(--white);border:1px solid #E4E9EF;gap:7px} .lwh-fast{align-self:flex-start;padding:5px 10px;border-radius:6px;background:var(--orange-l);color:var(--orange-d);font-size:12px;font-weight:800} .lwh-row{display:flex;justify-content:space-between;font-size:12px;padding:6px 10px;border-radius:6px;background:#F7F9FB} .lwh-row b{color:var(--ok)} .lwh-q{font-size:12px;font-weight:700;color:var(--petrol)} .lwh-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1} .lwh-num{width:34px;height:34px;border-radius:50%;background:var(--orange);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800} .lwh-body h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.015em} .lwh-body p{margin:0;font-size:14px;line-height:1.65;color:var(--text2);flex:1} .lwh-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--navy);transition:gap .2s} .lwh-card:hover .lwh-more{gap:10px;color:var(--orange-d)} @media (max-width:900px){.lwh-grid{grid-template-columns:1fr;gap:14px}.lwh-card{flex-direction:row}.lwh-vis{width:132px;height:auto;flex-shrink:0;margin:10px 0 10px 10px;padding:12px}.lwh-body{padding:16px 18px}.lwh-body p{font-size:13px}.lwh-v2 b,.lwh-over,.lwh-pill,.lwh-q{font-size:9px}.lwh-row{font-size:10px;padding:4px 6px}.lwh-fast{font-size:10px}} @media (max-width:420px){.lwh-card{flex-direction:column}.lwh-vis{width:auto;height:130px;margin:10px 10px 0}} /* ===== PRIJZEN: rekenvoorbeeld, garanties, W&S-instap ===== */ .lwp-reken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:stretch;margin:8px 0 8px} .lwp-reken-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:3px} .lwp-reken-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)} .lwp-reken-item strong{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.01em} .lwp-reken-item small{font-size:12px;color:var(--text2);line-height:1.45} .lwp-reken-us{background:var(--navy);border-color:var(--navy)} .lwp-reken-us .lwp-reken-k{color:#F4A07E} .lwp-reken-us strong{color:var(--white)} .lwp-reken-us small{color:rgba(255,255,255,.75)} .lwp-reken-link{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:0 6px;font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap;transition:gap .2s,color .2s} .lwp-reken-link:hover{gap:10px;color:#B83E0F} .lwp-risk{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;margin-top:28px} .lwp-risk-main{background:var(--white);border-radius:20px;padding:30px 32px;border:1.5px solid var(--border2)} .lwp-risk-h{font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin-bottom:16px} .lwp-risk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .lwp-risk-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--text2)} .lwp-risk-list li svg{flex-shrink:0;margin-top:2px;color:var(--orange)} .lwp-risk-list strong{color:var(--navy)} .lwp-ws{background:var(--orange-l);border:1.5px solid rgba(232,82,26,.35);border-radius:20px;padding:28px 30px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--navy);transition:transform .2s,border-color .2s} .lwp-ws:hover{transform:translateY(-3px);border-color:var(--orange)} .lwp-ws-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#B83E0F} .lwp-ws strong{font-size:22px;font-weight:700;letter-spacing:-.02em} .lwp-ws-p{font-size:14px;line-height:1.6;color:var(--text2);flex:1} .lwp-ws-cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#B83E0F} .lwp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .lwp-step{background:var(--navy2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:10px} .lwp-step-n{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800} .lwp-step strong{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.3} .lwp-step p{margin:0;font-size:14px;line-height:1.65;color:rgba(255,255,255,.75)} .lwp-risk-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .lwp-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);border-radius:var(--r);padding:13px 24px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s} .lwp-ghost:hover{border-color:#fff} #page-actie .fp-grid.fp-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1100px){ .lwp-reken{grid-template-columns:repeat(3,minmax(0,1fr))} .lwp-reken-link{grid-column:1/-1;justify-self:start;padding:4px 0} #page-actie .fp-grid.fp-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:860px){ .lwp-reken{grid-template-columns:1fr} .lwp-risk{grid-template-columns:1fr} .lwp-steps{grid-template-columns:1fr} .lwp-risk-main{padding:24px 22px} .lwp-ws{padding:24px 22px} } @media (max-width:880px){#page-actie .fp-grid.fp-grid-4{grid-template-columns:1fr}} /* --- homepage update 2026-09 --- */ h1 .hero-eyebrow{display:flex;font-size:11px;line-height:1.4;letter-spacing:.12em;font-weight:700;margin-bottom:16px} .jargon-i::before{content:"i"} .lw-testi-link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:13px;font-weight:600;color:var(--orange);text-decoration:none} .lw-testi-link:hover{text-decoration:underline} .lw-home-cases .case-card:hover{box-shadow:0 8px 24px rgba(15,25,35,.10)!important;transform:translateY(-2px)} @media(max-width:1024px){.lw-home-cases{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:640px){.lw-home-cases{grid-template-columns:1fr!important}} .lw-sticky-cta{display:none} @media(max-width:768px){ .lw-sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:900;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(15,25,35,.94);backdrop-filter:blur(8px);transform:translateY(110%);transition:transform .25s ease} .lw-sticky-cta.on{transform:none} .lw-sticky-cta .btn-orange{width:100%} } /* --- simplified homepage 2026-09 --- */ .s-sec{padding:96px 60px} .s-sec .section-sub{margin-bottom:40px} .s-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--orange);text-decoration:none} .s-link:hover{text-decoration:underline} .s-more{margin-top:28px} .s-check{width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700} .s-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:28px 0 40px;padding-bottom:40px;border-bottom:1px solid var(--border)} .s-stat strong{display:block;font-size:clamp(32px,4vw,44px);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.1} .s-stat span{font-size:14px;color:var(--text2)} .s-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .s-case{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;transition:box-shadow .2s,transform .2s} .s-case:hover{box-shadow:0 8px 24px rgba(15,25,35,.10);transform:translateY(-2px)} .s-case img{height:34px;width:auto;max-width:150px;object-fit:contain;object-position:left;margin-bottom:6px} .s-case-num{font-size:14px;color:var(--text2)} .s-case-num strong{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-right:4px} .s-case p{font-size:14px;color:var(--text2);line-height:1.6;margin:0;flex:1} .s-quote{margin:48px 0 0;max-width:760px} .s-quote blockquote{margin:0 0 14px;font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--navy);font-weight:500} .s-quote figcaption{font-size:14px;color:var(--text2)} .s-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .s-pack{position:relative;background:var(--white);border:1.5px solid var(--border2);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column} .s-pack-hl{border:2px solid var(--orange)} .s-pack-dark{background:var(--navy);border-color:var(--navy);color:#fff} .s-pack h3{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 8px} .s-pack-dark h3{color:var(--orange)} .s-price{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px;margin-bottom:10px} .s-price span{font-size:13px;font-weight:600;color:var(--text3);letter-spacing:0} .s-pack-dark .s-price{color:#fff}.s-pack-dark .s-price span{color:rgba(255,255,255,.55)} .s-pack p{font-size:14px;color:var(--text2);line-height:1.6;margin:0 0 18px} .s-pack-dark p{color:rgba(255,255,255,.7)} .s-pack ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;flex:1} .s-pack li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text2);line-height:1.45} .s-pack-dark li{color:rgba(255,255,255,.85)} .s-pack button{width:100%} .s-badge{position:absolute;top:-12px;left:28px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px} .s-packs-foot{margin-top:28px;display:flex;flex-direction:column;gap:14px} .s-packs-foot p{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;color:var(--text2);line-height:1.5} .s-packs-links{display:flex;flex-wrap:wrap;gap:12px 28px} .s-faq{max-width:820px;margin-top:32px} @media(max-width:900px){.s-cases,.s-packs{grid-template-columns:1fr}.s-pack-hl{margin-top:8px}} @media(max-width:768px){.s-sec{padding:64px 20px}.s-stats{gap:12px}.s-stat strong{font-size:22px}.s-stat span{font-size:12px;display:block;line-height:1.35}} /* --- campagne-mockups in de 3 stappen --- */ .cm{position:relative;height:300px;margin:12px 12px 0;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#e9e2d6,#d9cfbf);display:flex;justify-content:center} .cm-tag{position:absolute;top:10px;left:10px;z-index:3;background:rgba(15,25,35,.75);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px} .cm-phone{position:relative;margin-top:26px;width:200px;height:380px;border:6px solid #0F1923;border-bottom:0;border-radius:28px 28px 0 0;overflow:hidden;background:#fff;box-shadow:0 20px 40px -18px rgba(15,25,35,.55);font-family:inherit;text-align:left} .cm-av{width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .cm-av-dark{background:#0F1923} /* reel */ .cm-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cm-reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0,transparent 20%,transparent 50%,rgba(0,0,0,.7) 70%)} .cm-reel>div{position:absolute;z-index:2;color:#fff} .cm-reel-top{top:12px;left:12px;font-size:13px;font-weight:700} .cm-reel-side{right:8px;top:100px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px} .cm-reel-side span{margin-bottom:6px} .cm-sub{left:12px;right:44px;top:40px;background:#fff;color:#0F1923!important;font-size:11px;font-weight:700;line-height:1.3;padding:5px 7px;border-radius:6px;text-align:center} .cm-reel-foot{left:10px;right:40px;top:200px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:10px} .cm-reel-foot b{font-size:10px} .cm-follow{border:1px solid rgba(255,255,255,.8);border-radius:5px;padding:1px 6px;font-size:9px;font-weight:600} .cm-reel-foot p{margin:2px 0 0;width:100%;font-size:10px;line-height:1.35;color:#fff} /* feed ad */ .cm-feed-head{display:flex;align-items:center;gap:7px;padding:8px 10px 5px} .cm-feed-head b{display:block;font-size:10px;color:#0F1923;line-height:1.2} .cm-feed-head small{font-size:8.5px;color:#65676b} .cm-feed-text{margin:0;padding:0 10px 8px;font-size:9.5px;line-height:1.4;color:#1c1e21} .cm-creative{background:var(--orange);color:#fff;padding:10px 12px 10px;display:flex;flex-direction:column;gap:1px} .cm-creative small{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9} .cm-creative strong{font-size:15px;white-space:nowrap;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:4px} .cm-creative>span{font-size:10px;opacity:.9} .cm-creative ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px} .cm-creative li{font-size:10px;font-weight:600;padding-left:14px;position:relative} .cm-creative li::before{content:"✓";position:absolute;left:0;font-weight:800} .cm-feed-cta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;background:#f0f2f5} .cm-feed-cta small{display:block;font-size:7.5px;color:#65676b} .cm-feed-cta b{font-size:8.5px;color:#0F1923;white-space:nowrap} .cm-feed-cta>span{background:var(--orange);color:#fff;font-size:8.5px;font-weight:700;padding:5px 8px;border-radius:5px;white-space:nowrap} /* chat */ .cm-chat{background:#efe7dc} .cm-chat-head{display:flex;align-items:center;gap:7px;padding:9px 10px;background:#0F1923;color:#fff} .cm-chat-head b{display:block;font-size:10px;line-height:1.2} .cm-chat-head small{font-size:8.5px;opacity:.7} .cm-chat-body{padding:8px;display:flex;flex-direction:column;gap:5px} .cm-chip{align-self:center;background:#fff3cd;color:#6b5200;font-size:8.5px;font-weight:700;padding:3px 8px;border-radius:6px;margin-bottom:2px} .cm-chat-body p{margin:0;max-width:82%;font-size:9.5px;line-height:1.35;color:#1c1e21;padding:5px 7px 12px;border-radius:8px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08)} .cm-chat-body p i{position:absolute;right:6px;bottom:2px;font-size:7px;font-style:normal;color:#8a8f94} .cm-chat-body .in{background:#fff;align-self:flex-start;border-top-left-radius:2px} .cm-chat-body .out{background:#ffe3d6;align-self:flex-end;border-top-right-radius:2px;min-width:52px} /* Ruben bij slot-CTA */ .cta-person{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px} .cta-person img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.25);flex-shrink:0} .cta-person p{margin:0;max-width:360px;text-align:left;font-size:14px;line-height:1.5;color:rgba(255,255,255,.75)} .cta-person strong{color:#fff} /* job ad v2 */ .cm-dots{margin-left:auto;color:#65676b;font-size:12px;letter-spacing:1px} .cm-ad{position:relative} .cm-ad-photo{position:relative;height:98px;overflow:hidden;background:#cfd8e3} .cm-ad-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block} .cm-ad-pill{position:absolute;top:8px;left:8px;background:#fff;color:#0F1923;font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18)} .cm-ad-sticker{position:absolute;right:8px;top:62px;z-index:2;background:var(--orange);color:#fff;border-radius:10px;padding:6px 9px;font-size:8px;line-height:1.2;text-align:right;transform:rotate(-3deg);box-shadow:0 6px 14px -4px rgba(232,82,26,.6)} .cm-ad-sticker b{display:block;font-size:12.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap} .cm-ad-panel{background:#0F1923;color:#fff;padding:10px 10px 9px} .cm-ad-panel strong{display:block;max-width:58%;font-size:15px;font-weight:800;line-height:1.1;letter-spacing:-.01em} .cm-ad-panel em{font-style:normal;font-weight:600;font-size:10px;color:var(--orange)} .cm-ad-usps{display:flex;flex-wrap:nowrap;gap:3px;margin-top:7px} .cm-ad-usps span{font-size:7.5px;white-space:nowrap;font-weight:700;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:3px 5px} .cm-ad-usps span::before{content:"✓ ";color:var(--orange)} .cm-ad-img img{display:block;width:100%;height:auto} /* --- v13: kop met link boven kolom 3 --- */ .s-head3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:end;margin-bottom:40px} .s-head3-main{grid-column:1 / 3} .s-head3 .section-sub{margin-bottom:0} .s-head3 .section-h{margin-bottom:12px} .s-head3-link{grid-column:3;justify-self:start;padding-bottom:4px} @media(max-width:900px){.s-head3{grid-template-columns:1fr;gap:12px}.s-head3-main,.s-head3-link{grid-column:1}} /* logostrook in de hero-kleur */ .lw-logos .logo-strip-label{color:var(--text3)} .lw-logos .section-inner{border-top:1px solid var(--border);padding-top:28px} /* donkere resultatensectie */ .s-dark{background:var(--navy);color:#fff} .s-dark .section-h{color:#fff} .s-dark .s-stats{border-bottom-color:rgba(255,255,255,.1);margin-top:0} .s-dark .s-stat strong{color:#fff} .s-dark .s-stat span{color:rgba(255,255,255,.6)} .s-dark .s-link{color:#ff7a45} .s-proof{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px} .s-box{position:relative;background:#162332;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px 30px 24px;overflow:hidden;min-height:340px;display:flex;flex-direction:column} .s-box-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:18px} /* reviews: fade */ .rv-track{position:relative;flex:1;min-height:230px} .rv-slide{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;opacity:0;transform:translateX(24px);transition:opacity .6s ease,transform .6s ease;pointer-events:none} .rv-slide.is-active{opacity:1;transform:none;pointer-events:auto} .rv-stars{color:#f4b942;display:flex;gap:2px;margin-bottom:14px} .rv-slide blockquote{margin:0 0 20px;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#fff;font-weight:500;flex:1} .rv-slide figcaption{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .rv-av{width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .rv-slide figcaption strong{display:block;font-size:14px;color:#fff} .rv-slide figcaption small{font-size:12px;color:rgba(255,255,255,.55)} .rv-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#ff7a45;text-decoration:none} .rv-foot{display:flex;align-items:center;gap:16px;margin-top:22px} .rv-dots,.cs-tabs{display:flex;gap:8px} .rv-dot{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.25);cursor:pointer;transition:width .3s,background .3s} .rv-dot.is-active{width:26px;background:var(--orange)} .rv-progress{flex:1;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden} .rv-progress i{display:block;height:100%;width:0;background:var(--orange)} .rv.run .rv-progress i{animation:lwbar var(--dur,7000ms) linear forwards} @keyframes lwbar{from{width:0}to{width:100%}} /* cases: verticale slider met tellende cijfers */ .cs{background:linear-gradient(160deg,#1b2a3b,#131f2c)} .cs-window{position:relative;height:210px;overflow:hidden;flex:none} .cs-track{transition:transform .7s cubic-bezier(.65,0,.35,1)} .cs-slide{height:210px;display:flex;flex-direction:column;color:#fff;text-decoration:none;opacity:.25;transition:opacity .5s} .cs-slide.is-active{opacity:1} .cs-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} .cs-top img{height:28px;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9} .cs-sector{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:3px 9px;white-space:nowrap} .cs-num{display:flex;align-items:baseline;gap:10px;margin-bottom:8px} .cs-num strong{font-size:clamp(48px,5vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums} .cs-num span{font-size:15px;color:rgba(255,255,255,.75)} .cs-slide p{margin:0 0 12px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.7)} .cs-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#ff7a45;margin-top:auto} .cs-tabs{margin-top:18px;flex-wrap:wrap} .cs-tab{height:34px;min-width:44px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:border-color .3s,background .3s} .cs-tab img{height:14px;width:auto;max-width:56px;filter:brightness(0) invert(1);opacity:.5;transition:opacity .3s} .cs-tab.is-active{border-color:var(--orange);background:rgba(232,82,26,.12)} .cs-tab.is-active img{opacity:1} .cs-tab::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange)} .cs.run .cs-tab.is-active::after{animation:lwbar var(--dur,4000ms) linear forwards} @media(max-width:900px){.s-proof{grid-template-columns:1fr}.rv-track{min-height:300px}} @media(max-width:480px){.s-box{padding:22px 20px}.rv-track{min-height:360px}.rv-link{margin-left:52px}} @media(prefers-reduced-motion:reduce){.rv-slide,.cs-track,.cs-slide{transition:none}} @media(max-width:768px){.s-stat strong{white-space:nowrap;font-size:20px}} /* --- v14: pakketten-voet --- */ .px-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--white);border:1px solid var(--border);border-radius:18px;overflow:hidden} .px-item{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;text-decoration:none;color:var(--navy);transition:background .2s} .px-item+.px-item{border-left:1px solid var(--border)} .px-item:hover{background:#fbf8f3} .px-ic{width:40px;height:40px;border-radius:12px;background:var(--cream);color:var(--orange);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .px-txt{display:flex;flex-direction:column;gap:3px} .px-txt strong{font-size:15px;font-weight:700} .px-txt>span{font-size:13.5px;color:var(--text2);line-height:1.5} .px-txt em{font-style:normal;font-size:13px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:6px;margin-top:6px} .px-txt em svg{color:var(--orange);transition:transform .2s} .px-item:hover em svg{transform:translateX(3px)} .px-risk{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;font-size:13.5px;color:var(--text2)} .px-risk .s-check{width:18px;height:18px;font-size:10px} @media(max-width:900px){.px-panel{grid-template-columns:1fr}.px-item+.px-item{border-left:0;border-top:1px solid var(--border)}.px-risk{justify-content:flex-start;align-items:flex-start;text-align:left}} /* --- v14: expertise --- */ #expertise{padding-bottom:0} .xp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .xp-card{background:var(--cream);border-radius:20px;padding:28px 26px} .xp-ic{width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px} .xp-card h3{font-size:19px;font-weight:700;color:var(--navy);margin:0 0 8px} .xp-card p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0} .xp-ticker{margin-top:56px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;padding:18px 0;background:var(--white);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .xp-ticker-track{display:flex;width:max-content;animation:xpscroll 45s linear infinite} .xp-ticker:hover .xp-ticker-track{animation-play-state:paused} .xp-ticker-track span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-size:15px;font-weight:600;color:var(--navy);white-space:nowrap} .xp-ticker-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)} @keyframes xpscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:900px){.xp-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.xp-ticker-track{animation:none}} /* --- v15: expertise met foto, pakketten zonder prijs --- */ .xp-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:48px} .xp-intro .section-sub{margin-bottom:20px} .xp-photo{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 24px 50px -30px rgba(15,25,35,.45)} .xp-photo img{width:100%;height:100%;object-fit:cover;display:block} #expertise .xp-card{background:var(--white)} #expertise .xp-ticker{background:transparent} .s-pack h3{margin-bottom:10px} @media(max-width:900px){.xp-intro{grid-template-columns:1fr;gap:28px}} /* --- v16: hero met foto (subpagina's) --- */ .lw-hero2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center} .lw-hero2-photo{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/4.2;max-height:520px;box-shadow:0 30px 60px -35px rgba(15,25,35,.5)} .lw-hero2-photo img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:900px){.lw-hero2{grid-template-columns:1fr;gap:32px}.lw-hero2-photo{aspect-ratio:4/3;max-height:none}} /* --- v16: branches --- */ .br-sec{background:var(--white);padding:96px 60px} .br-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start} .br-intro .section-sub{margin-bottom:28px} .br-photo{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:3/2} .br-photo img{width:100%;height:100%;object-fit:cover;object-position:70% center;display:block} .br-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .br-card{display:flex;gap:14px;align-items:flex-start;background:var(--cream);border-radius:18px;padding:22px 22px 20px} .br-ic{width:42px;height:42px;border-radius:12px;background:var(--white);color:var(--orange);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .br-card h3{font-size:16px;font-weight:700;color:var(--navy);margin:2px 0 6px} .br-card p{font-size:14px;line-height:1.55;color:var(--text2);margin:0} .br-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--orange);text-decoration:none} .br-link:hover{text-decoration:underline} @media(max-width:900px){.br-sec{padding:64px 20px}.br-wrap{grid-template-columns:1fr;gap:32px}} @media(max-width:560px){.br-grid{grid-template-columns:1fr}} /* --- v17: teammozaïek over-ons --- */ .tm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:200px;grid-auto-flow:dense;gap:14px;margin-top:8px} .tm{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--cream)} .tm.big{grid-column:span 2;grid-row:span 2} .tm.wide{grid-column:span 2} .tm.tall{grid-row:span 2} .tm img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease} .tm:hover img{transform:scale(1.04)} .tm figcaption{position:absolute;left:12px;bottom:12px;background:rgba(15,25,35,.78);backdrop-filter:blur(6px);color:#fff;border-radius:10px;padding:8px 12px;line-height:1.25} .tm figcaption strong{display:block;font-size:13px} .tm figcaption span{font-size:11.5px;color:rgba(255,255,255,.7)} @media(max-width:900px){.tm-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:160px;gap:10px}} /* --- v17: uitspraak i.p.v. ticker --- */ #expertise{padding-bottom:96px} .xp-quote-wrap{padding-top:0!important} .xp-quote{margin:56px 0 0;padding:36px 0 0;border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end} .xp-quote blockquote{margin:0;font-size:clamp(20px,2.2vw,28px);line-height:1.4;font-weight:600;color:var(--navy);letter-spacing:-.01em;max-width:860px} .xp-quote figcaption{display:flex;align-items:center;gap:12px;white-space:nowrap} .xp-quote figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover} .xp-quote figcaption strong{display:block;font-size:14px;color:var(--navy)} .xp-quote figcaption span{font-size:13px;color:var(--text3)} @media(max-width:768px){#expertise{padding-bottom:64px}.xp-quote{grid-template-columns:1fr;gap:18px}} /* --- v18: teamcarrousel --- */ .tc{position:relative;margin-top:8px} .tc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px} .tc-track::-webkit-scrollbar{display:none} .tc-slide{position:relative;flex:0 0 calc((100% - 48px)/4);aspect-ratio:3/4;margin:0;border-radius:18px;overflow:hidden;scroll-snap-align:start;background:var(--cream)} .tc-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease} .tc-slide:hover img{transform:scale(1.04)} .tc-slide figcaption{position:absolute;left:12px;bottom:12px;background:rgba(15,25,35,.78);backdrop-filter:blur(6px);color:#fff;border-radius:10px;padding:8px 12px;line-height:1.25} .tc-slide figcaption strong{display:block;font-size:13px} .tc-slide figcaption span{font-size:11.5px;color:rgba(255,255,255,.7)} .tc-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px} .tc-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border2);background:var(--white);color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s} .tc-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)} @media(max-width:900px){.tc-slide{flex-basis:calc((100% - 16px)/2)}} @media(max-width:520px){.tc-slide{flex-basis:78%}} /* v19: foto's in eigen verhouding */ .tc-track{height:400px} .tc-slide{flex:0 0 auto!important;height:100%;width:auto} .tc-slide img{object-position:center!important} @media(max-width:900px){.tc-track{height:320px}} @media(max-width:520px){.tc-track{height:280px}} /* --- v20: mobiel/tablet --- */ html,body{overflow-x:clip} .contact-grid>*{min-width:0} @media(max-width:600px){.contact-form-card{padding:24px 20px}} .jargon-pop{max-width:min(240px,calc(100vw - 32px))} .jargon-pop{display:none} .jargon:hover .jargon-pop,.jargon.open .jargon-pop,.jargon:focus-within .jargon-pop{display:block} /* stappenkaarten tablet/telefoon */ @media(min-width:601px) and (max-width:900px){ .lwh-card{flex-direction:row;align-items:stretch} .lwh-card .cm{width:260px;flex-shrink:0;height:auto;min-height:300px;margin:12px 0 12px 12px} .lwh-body{padding:22px 24px;display:flex;flex-direction:column;justify-content:center} .lwh-body p{font-size:14.5px} } @media(max-width:600px){ .lwh-card{flex-direction:column} .lwh-card .cm{width:auto;height:300px;margin:12px 12px 0} } /* hero-foto ook op telefoon */ @media(max-width:768px){ .hero-right{display:block!important;margin-top:28px} .hero-img-wrap{aspect-ratio:4/3;max-height:280px;overflow:hidden;border-radius:18px} .hero-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 30%} } @media(max-width:768px){h1 .hero-eyebrow{margin-top:18px}} /* --- v21: sectie Eli --- */ .eli-sec{background:var(--white)} #expertise{padding-bottom:96px} .eli-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:72px;align-items:center} .eli-quote{margin:0;position:relative} .eli-mark{display:block;font-size:88px;line-height:1;height:44px;font-weight:800;color:var(--orange);margin-bottom:8px} .eli-quote blockquote{margin:0 0 28px;font-size:clamp(24px,2.7vw,36px);line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--navy)} .eli-quote figcaption{display:flex;flex-direction:column;gap:2px;padding-left:16px;border-left:3px solid var(--orange)} .eli-quote figcaption strong{font-size:16px;color:var(--navy)} .eli-quote figcaption span{font-size:14px;color:var(--text3)} .eli-photo{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:2/3;max-height:560px;box-shadow:0 30px 60px -35px rgba(15,25,35,.5)} .eli-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block} @media(max-width:900px){.eli-wrap{grid-template-columns:1fr;gap:36px}.eli-photo{aspect-ratio:4/5;max-height:480px;max-width:420px}} /* ── Werkwijze-animatie (homepage #hoe-het-werkt) ───────────────────────── */ .lwf{--lwf-bg:#FFFFFF;--lwf-surface:#F5F1EB;--lwf-fg:#0F1923;--lwf-fg-2:#4A5568;--lwf-muted:#A9AEBA;--lwf-line:#E4DED4; --lwf-accent:#E8521A;--lwf-accent-soft:#FDF0EA;--lwf-sub-bg:#0F1923;--lwf-sub-fg:#FFFFFF;--lwf-sub-fg-2:#C3CAD3;font-family:var(--font);color:var(--lwf-fg)} .lwf ol{list-style:none} .lwf-phase h3{font-family:var(--font)} .lwf-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:start} .lwf-list{display:flex;flex-direction:column;gap:22px;min-width:0} .lwf-phase h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lwf-fg-2);margin:0 0 6px} .lwf-phase ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .lwf-step{all:unset;box-sizing:border-box;display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 14px;width:100%; padding:12px 14px;border-radius:14px;cursor:pointer;transition:background .25s} .lwf-step:hover{background:color-mix(in srgb,var(--lwf-surface) 70%,transparent)} .lwf-step:focus-visible{outline:2px solid var(--lwf-accent);outline-offset:2px} .lwf-num{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px; border:1.5px solid var(--lwf-line);color:var(--lwf-fg-2);font-variant-numeric:tabular-nums;transition:all .3s} .lwf-title{font-family:var(--font);font-weight:600;font-size:19px;line-height:1.25;align-self:center;color:var(--lwf-fg-2);transition:color .3s} .lwf-desc{color:var(--lwf-fg-2);font-size:15px;line-height:1.5;margin:0;opacity:.8;transition:opacity .3s} .lwf-bar{grid-column:2;height:3px;border-radius:2px;background:var(--lwf-line);overflow:hidden;margin-top:8px;opacity:0;transition:opacity .3s} .lwf-bar i{display:block;height:100%;width:100%;background:var(--lwf-accent);transform:scaleX(0);transform-origin:left} .lwf-step[aria-current="step"]{background:var(--lwf-surface);box-shadow:0 1px 0 var(--lwf-line),0 8px 24px -16px rgba(20,22,30,.35)} .lwf-step[aria-current="step"] .lwf-num{background:var(--lwf-accent);border-color:var(--lwf-accent);color:#fff;transform:scale(1.06)} .lwf-step[aria-current="step"] .lwf-title{color:var(--lwf-fg)} .lwf-step[aria-current="step"] .lwf-desc{opacity:1;color:var(--lwf-fg)} .lwf-step[aria-current="step"] .lwf-bar{opacity:1} .lwf-stage{position:sticky;top:96px;background:var(--lwf-surface);border:1px solid var(--lwf-line); border-radius:22px;overflow:hidden;min-width:0;margin:0} .lwf-canvas-box{position:relative;aspect-ratio:4/3;max-width:100%;width:100%} .lwf-stage canvas{display:block;width:100%;height:100%} .lwf-subs{background:var(--lwf-sub-bg);color:var(--lwf-sub-fg);padding:14px 20px 15px;text-align:center;min-height:5.4em; display:flex;flex-direction:column;justify-content:center;gap:2px} .lwf-subs p{margin:0;text-wrap:balance} .lwf-sub-what{font-weight:700;font-size:17px;line-height:1.35} .lwf-sub-why{color:var(--lwf-sub-fg-2);font-size:15px;line-height:1.4} .lwf-subs.in p{animation:lwfSubIn .5s cubic-bezier(.2,.8,.2,1) both} .lwf-subs.in .lwf-sub-why{animation-delay:.18s} @keyframes lwfSubIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .lwf-stage-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px} .lwf-now{font-size:14px;color:var(--lwf-fg-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lwf-now b{color:var(--lwf-fg);font-weight:600} .lwf-play{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600; padding:7px 14px;border-radius:999px;border:1px solid var(--lwf-line);color:var(--lwf-fg);cursor:pointer;flex:none} .lwf-play:hover{border-color:var(--lwf-fg-2)} .lwf-play:focus-visible{outline:2px solid var(--lwf-accent);outline-offset:2px} .lwf-play svg{width:12px;height:12px;fill:currentColor} @media (max-width:860px){ .lwf-grid{grid-template-columns:minmax(0,1fr);gap:24px} .lwf-stage{position:relative;top:0;order:-1} .lwf-title{font-size:17px} .lwf-sub-what{font-size:15.5px}.lwf-sub-why{font-size:14px} } @media (prefers-reduced-motion: reduce){.lwf-step,.lwf-num,.lwf-title,.lwf-desc,.lwf-bar{transition:none}.lwf-subs.in p{animation:none}} .lwf-wrap{margin-top:80px;padding-top:64px;border-top:1px solid var(--border)} .lwf-intro{max-width:640px;margin-bottom:36px} .lwf-intro .eyebrow{color:var(--orange)} .lwf-intro-h{font-size:clamp(24px,2.8vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--navy);text-wrap:balance} .lwf-intro-p{margin-top:12px;font-size:16px;line-height:1.7;color:var(--text2)} @media(max-width:860px){.lwf-wrap{margin-top:56px;padding-top:44px}} /* rustiger: alleen titels in de lijst, uitleg staat in de ondertiteling */ .lwf-list{gap:0} .lwf-list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .lwf-step{padding:9px 14px;grid-template-columns:30px minmax(0,1fr);row-gap:0} .lwf-num{width:30px;height:30px;font-size:14px;grid-row:span 1} .lwf-title{font-size:17px} .lwf-desc{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .lwf-bar{margin-top:6px} .lwf-intro{margin-bottom:28px} .lwf-stage-foot{position:absolute;top:12px;right:12px;padding:0;border:0;z-index:1} .lwf-now{display:none} .lwf-play{background:var(--lwf-bg);font-size:13px;padding:6px 12px;opacity:.85} .lwf-play:hover{opacity:1} /* stappenlijst als tijdlijn */ .lwf-list{position:relative;align-self:center} .lwf-rail{position:absolute;left:15px;top:24px;bottom:24px;width:2px;border-radius:2px;background:var(--lwf-line)} .lwf-rail i{display:block;width:100%;height:0;border-radius:2px;background:var(--lwf-accent)} .lwf-list ol{position:relative;gap:0} .lwf-step,.lwf-step:hover,.lwf-step[aria-current="step"]{background:none;box-shadow:none} .lwf-step{grid-template-columns:32px minmax(0,1fr);column-gap:18px;align-items:center;padding:10px 0;border-radius:8px} .lwf-num{width:32px;height:32px;font-size:12.5px;font-weight:700;background:var(--lwf-bg);border:2px solid var(--lwf-line);color:var(--text3);transition:background .3s,border-color .3s,color .3s,box-shadow .3s} .lwf-step.is-done .lwf-num{border-color:var(--lwf-accent);color:var(--lwf-accent)} .lwf-step[aria-current="step"] .lwf-num{background:var(--lwf-accent);border-color:var(--lwf-accent);color:#fff;transform:none;box-shadow:0 0 0 6px var(--lwf-accent-soft)} .lwf-title{font-size:16px;font-weight:500;color:var(--text3);transition:color .3s,font-size .3s} .lwf-step.is-done .lwf-title{color:var(--text2)} .lwf-step:hover .lwf-title{color:var(--navy)} .lwf-step[aria-current="step"] .lwf-title{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.01em} .lwf-bar{display:none} @media(max-width:860px){.lwf-step[aria-current="step"] .lwf-title{font-size:18px}} @media(prefers-reduced-motion:reduce){.lwf-num,.lwf-title{transition:none}}