/* ============================================================
   SHIFT & LIFT — lichte variant: wit als basis, oranje als accent,
   zwart alleen voor tekst. Staat als laatste stylesheet, dus overschrijft
   de donkere kleuren. Terug naar donker? Haal de <link> naar dit bestand weg.
   ============================================================ */
:root{
  --l-bg:#ffffff;
  --l-zacht:#fff7f0;      /* heel licht oranje voor afwisselende blokken */
  --l-grijs:#f6f5f3;
  --l-lijn:#e7e4df;
  --l-tekst:#172554;
  --l-tekst-2:#475569;
}
html{background:var(--l-bg)}
body{background:var(--l-bg)}

/* ---------- hero (home + diensten/steden) ---------- */
.hero,.stadshero{background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--l-zacht) 100%); color:var(--l-tekst)}
.hero::after,.stadshero::after{background:radial-gradient(circle at center, rgba(242,106,0,.10), transparent 62%)}
.streaks{opacity:.35}
h1.hero-h,.stadshero .stad-h1{color:var(--l-tekst)}
.hero-sub,.stadshero .hero-sub{color:var(--l-tekst-2)}
.trustline{background:#fff; border-color:var(--l-lijn); color:var(--l-tekst); box-shadow:0 2px 8px rgba(15,23,42,.04)}
.cta-kicker{color:var(--l-tekst-2)}
.hero-label{color:var(--l-tekst)}
.hero-in{border-color:var(--l-lijn); background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.05)}
.hero-in:focus{border-color:var(--orange)}
.hero-err{color:#c2410c}
.cta-hero{box-shadow:0 6px 0 rgba(160,60,0,.25), 0 14px 30px rgba(242,106,0,.28)}
.cta-block .cta-call,.cta-call{color:var(--l-tekst); background:#fff; border-color:var(--l-lijn)}
.cta-call-nr{color:var(--l-tekst)}
.cta-call:hover,.cta-block .cta-call:hover{color:var(--l-tekst)}
.cta-second{color:var(--l-tekst-2); border-bottom-color:var(--l-lijn)}
.cta-second:hover{color:var(--orange)}
.hero-note,.stadshero .hero-note{color:var(--l-tekst-2)}
.hero-note a,.stadshero .hero-note a{color:var(--l-tekst)}
.stadshero .kruimels{color:var(--l-tekst-2)}
.stadshero .kruimels a{color:var(--l-tekst); border-bottom-color:var(--l-lijn)}

/* ---------- knoppen ---------- */

/* "Wie is Shift & Lift" blijft zwart (stijl.css), voor wat contrast */
.svc-more{background:var(--l-zacht); color:var(--l-tekst); border:1px solid #f7d7bd}
.svc-more h3{color:var(--l-tekst)}
.svc-more a:hover{color:var(--orange-deep); border-bottom-color:var(--orange-deep)}
.svc-ico{background:var(--l-zacht); border:1px solid #f7d7bd}

.price-card{background:#fff; color:var(--l-tekst); border:1px solid var(--l-lijn); border-top:4px solid var(--orange)}
.price-card h2{color:var(--l-tekst)}
.price-points li{color:var(--l-tekst)}


/* footer blijft zwart (stijl.css) */

/* ---------- vaste mobiele balk + bel-melding ---------- */
.beltoast{background:#fff; border-color:var(--l-lijn); color:var(--l-tekst); box-shadow:0 12px 40px rgba(15,23,42,.15)}
.beltoast .nr a{color:var(--l-tekst)}
.beltoast .nr small{color:var(--muted)}
.beltoast button.dicht{color:var(--muted)}

/* ---------- fijnafstelling ---------- */
.hero-label{color:var(--l-tekst) !important}
.hero-plaats{color:var(--l-tekst-2) !important}
.feiten{background:var(--l-lijn); border-color:var(--l-lijn)}
.feiten div{background:#fff}
.feiten span{color:var(--muted)}
.feiten strong{color:var(--l-tekst)}

/* chatknoppen: wit met oranje rand i.p.v. zwart */
.slc-cta,.slc-knop{background:#fff !important; color:var(--l-tekst) !important; border:1.5px solid var(--orange) !important}
.slc-cta:hover,.slc-knop:hover{background:var(--l-zacht) !important}
.slc-cta small,.slc-knop small{color:var(--l-tekst-2) !important}
.slc-kop{background:#0f172a !important; color:#fff !important}
.slc-kop small{color:#cbd5e1 !important}

/* bus-foto heeft een donkere achtergrond: als nette foto met ronde hoeken tonen i.p.v. vervagen in wit */
.hero-bus img{-webkit-mask-image:none !important; mask-image:none !important; border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.18)}
.hero-bus{margin-left:0; margin-right:0}
.footer .lockup .word{color:var(--cream)}
.slc-teaser b{font:800 19px/1.1 var(--display); text-transform:uppercase; color:var(--l-tekst)}
.slc-teaser small{font:500 13.5px/1.35 var(--body); color:var(--l-tekst-2)}

/* ---------- meer zwart: header, werkwijze, verhuizing-prijskaart, onderste CTA en footer zijn zwart ---------- */
#werkwijze{background:var(--ink) !important; color:var(--cream)}
#werkwijze .h-sec,#werkwijze h3{color:#fff}
#werkwijze .step{border-color:#273449}
#werkwijze .step p{color:#bdbab6}
#werkwijze .step-n{color:var(--orange)}
#werkwijze .btn-dark{background:linear-gradient(180deg,var(--orange-hot),var(--orange) 55%,var(--orange-deep)); color:#fff}
.svc-ico{background:var(--ink); border-color:var(--ink)}
.header,.header.vast{background:#0f172a !important; border-bottom:1px solid #273449}

/* ==========================================================================
   ONTWERP 2.0 — één rustig systeem
   - Koppen: gewone zinsopbouw (geen hoofdletters), strak lettertype
   - Kleuren: wit + lichtgrijs als basis, diep antraciet voor header/vlakken,
     oranje alleen voor de belangrijkste knop en accenten
   - Knoppen: zacht afgerond, geen 'flyer'-schaduwen
   ========================================================================== */
:root{
  --ink:#0f172a; --ink-2:#1e293b; --ink-3:#334155;
  --paper:#f6f7f9; --line:#e5e7eb; --muted:#4b5563;
  --l-tekst:#172554; --l-tekst-2:#475569; --l-zacht:#fff6ef; --l-grijs:#f6f7f9; --l-lijn:#e5e7eb;
  --r:10px;
}
html{background:#fff}
body{color:var(--l-tekst)}
h1,h2,h3,h4{font-family:var(--body); text-transform:none; letter-spacing:-.015em; line-height:1.12; font-weight:700}
h1.hero-h,.stadshero .stad-h1{font-size:clamp(36px,9.5vw,64px); line-height:1.03; letter-spacing:-.025em; font-weight:700}
h1.hero-h em{color:var(--orange)}
.h-sec{font-size:clamp(28px,6.4vw,42px); max-width:20ch}
.eyebrow{font-family:var(--body); text-transform:uppercase; font-size:13px; letter-spacing:.12em; font-weight:700}
.svc-item h3,.why-item h3,.step h3,.tier h3,.usp-item h3,.usp-item h2,.over-samen .why-item h3{font-size:20px; letter-spacing:-.01em}
.tier h3{font-size:clamp(26px,3vw,32px)}
.faq summary{font-family:var(--body); text-transform:none; font-weight:600; font-size:18px; line-height:1.35}
.mobmenu a{font-family:var(--body); text-transform:none; font-weight:600; font-size:20px}
.footer h4,.footer h2{font-family:var(--body); text-transform:none; font-size:16px; letter-spacing:0}

/* knoppen */
.btn,.cta-hero .big,.btn-wa{font-family:var(--body); text-transform:none; letter-spacing:0}
.btn{border-radius:10px; font-weight:700}
.btn-wa,.cta-hero{box-shadow:0 8px 20px rgba(242,106,0,.25) !important}
.btn-wa:hover,.cta-hero:hover{box-shadow:0 10px 26px rgba(242,106,0,.35) !important}
.cta-hero{border-radius:12px}
.cta-hero .big{font-weight:700; font-size:clamp(22px,5.6vw,26px)}
.cta-hero::before{display:none}
.btn-dark{background:var(--ink)}
.dock .btn-wa{box-shadow:none !important}

/* header: antraciet, rustig */
.header,.header.vast{background:var(--ink) !important; border-bottom:1px solid rgba(255,255,255,.06)}
.nav a{color:#cbd5e1; font-weight:600}
.nav a:hover{color:#fff}

/* hero */
.hero,.stadshero{background:linear-gradient(180deg,#fff 0%,#fff 60%,var(--paper) 100%)}
.hero::after,.stadshero::after,.streaks{display:none}
.trustline{border-radius:999px}
.hero-sub{color:var(--l-tekst-2)}
.cta-kicker{font-family:var(--body); text-transform:none; font-size:16px; font-weight:700; color:var(--l-tekst); letter-spacing:0}
.hero-label{font-family:var(--body); text-transform:none; font-size:14px; letter-spacing:0; font-weight:600}
.hero-in{border-radius:10px; border:1.5px solid var(--line); font-weight:500}
.cta-block .cta-call,.cta-call{border-radius:10px}
.cta-call-nr{font-family:var(--body); font-size:20px; letter-spacing:0}

/* vertrouwensbalk (was de oranje schuine band) */
.usp{background:#fff; color:var(--l-tekst); clip-path:none; margin-top:0; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.usp-item h3,.usp-item h2{color:var(--l-tekst); font-size:16px}
.usp-item p{color:var(--l-tekst-2); font-weight:400; font-size:14.5px}
.usp-item svg{color:var(--orange)}

/* secties */
.section{padding:72px 0}
#diensten,#reviews,#faq{background:#fff !important}
#prijzen{background:var(--paper)}
.svc-item{border-radius:12px; border:1px solid var(--line); margin-bottom:10px; background:#fff; padding:18px}
.svc{border-top:0}
.svc-item:hover{border-color:#fdba74}
.svc-ico{border-radius:10px; background:var(--l-zacht); border:0}
.svc-ico svg{color:var(--orange)}
.svc-more{border-radius:12px}
.tier,.price-card,.rev,.rev-score,.pt-kaart{border-radius:14px}
.tier{box-shadow:0 1px 2px rgba(15,23,42,.04)}
.rev{box-shadow:0 1px 2px rgba(15,23,42,.04)}
.step{border-color:rgba(255,255,255,.12) !important}
#werkwijze .step-n{font-size:36px}
.bigcta{background:var(--ink)}
.bigcta::before{background:radial-gradient(ellipse at 15% 0%, rgba(242,106,0,.18), transparent 58%)}
.footer{background:#0b1120}
.legal{border-top-color:rgba(255,255,255,.08)}

/* chat: rustiger */
.slc-teaser b{font-family:var(--body); text-transform:none; font-size:16px; letter-spacing:0}
.slc-knop b,.slc-dock b{font-family:var(--body); text-transform:none; letter-spacing:0}
.hdr-tel{display:none; color:#e2e8f0; text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap; margin-left:auto; margin-right:14px}
.hdr-tel:hover{color:#fff}
@media (min-width:1100px){ .hdr-tel{display:inline-block} }
.header .hdr-cta{white-space:nowrap; font-size:15px; padding:10px 16px}
.dock .call b,.slc-dock b{text-transform:none; font-family:var(--body); font-size:12.5px; letter-spacing:0}
.usp-grid{grid-template-columns:1fr 1fr; gap:16px 18px}
@media (min-width:900px){ .usp-grid{grid-template-columns:repeat(4,1fr)} }
.usp-item{gap:10px}
.usp-item svg{width:22px; height:22px; margin-top:1px}
.usp-item h3,.usp-item h2{font-size:15px}
.usp-item p{font-size:13.5px; margin-top:2px}

/* ---------- header: geen overloop op laptops ---------- */
@media (min-width:900px) and (max-width:1279px){
  .nav{display:none}
  .burger{display:grid}
  .mobmenu.open{display:block !important}
  .header .hdr-cta{margin-left:auto}
}
@media (min-width:1280px) and (max-width:1439px){ .nav{gap:18px} .nav a{font-size:15px} }
.hdr-tel{display:none !important}
@media (min-width:1520px){ .hdr-tel{display:inline-block !important} }
/* prijsknop opent de rekenmodule, niet WhatsApp: geen WhatsApp-icoon */
.header .hdr-cta .wa-ico,.dock .btn-wa .wa-ico{display:none}

/* chatwolkje en chatknop: navy met oranje (zoals de oude zwart-oranje stijl) */
.slc-knop,.slc-cta{background:#0f172a !important; color:#fff !important; border:2px solid var(--orange,#f26a00) !important}
.slc-knop:hover,.slc-cta:hover{background:#1e293b !important}
.slc-knop small,.slc-cta small{color:#cbd5e1 !important}
.slc-teaser{background:#0f172a !important; color:#fff !important; border:2px solid var(--orange,#f26a00) !important; box-shadow:0 12px 32px rgba(15,23,42,.45) !important}
.slc-teaser b{color:#fff !important}
.slc-teaser small{color:#cbd5e1 !important}
.slc-teaser .slc-teaser-x{color:var(--orange,#f26a00) !important}
@media (min-width:900px){ body:has(.dock.show) .slc-knop{bottom:calc(20px + env(safe-area-inset-bottom)) !important} .slc-teaser{bottom:calc(96px + env(safe-area-inset-bottom)) !important} }
@media (min-width:761px) and (max-width:899px){ .slc-teaser{bottom:calc(164px + env(safe-area-inset-bottom)) !important} }

/* chatwolkje: compacter en wat hoger, zodat het niet tegen de knoppen aan zit */
.slc-teaser{max-width:232px !important; padding:9px 30px 10px 12px !important; gap:2px !important; border-width:1.5px !important; border-radius:12px 12px 4px 12px !important}
.slc-teaser b{font-size:14px !important; line-height:1.25 !important}
.slc-teaser small{font-size:12px !important; line-height:1.3 !important}
.slc-teaser .slc-teaser-x{font-size:17px !important; top:3px !important; right:6px !important}
@media (max-width:760px){ .slc-heeft-dock .slc-teaser{bottom:calc(116px + env(safe-area-inset-bottom)) !important; right:12px !important} }
@media (min-width:900px){ .slc-teaser{bottom:calc(104px + env(safe-area-inset-bottom)) !important} }
/* tekst: navy in plaats van zwart */
body{color:#172554}
input,select,textarea{color:#172554}

/* "Liever bellen?"-knop: navy met lichte letters */
.cta-block .cta-call,.cta-call{background:#0f172a !important; border-color:#0f172a !important; color:#fff !important; box-shadow:0 6px 18px rgba(15,23,42,.18)}
.cta-block .cta-call:hover,.cta-call:hover{background:#1e293b !important; border-color:var(--orange) !important; color:#fff !important}
.cta-call .cta-call-label{color:#cbd5e1 !important}
.cta-call .cta-call-nr{color:#fff !important}
.cta-call .cta-call-pijl{color:var(--orange) !important}

/* chatwolkje: compact met icoon */
.slc-teaser{max-width:none !important; width:auto !important; padding:8px 30px 8px 8px !important; border-radius:999px 999px 6px 999px !important}
.slc-teaser .slc-teaser-av{flex:none; width:34px; height:34px; margin-right:2px; border-radius:50%; background:var(--orange,#f26a00); color:#fff !important; display:grid; place-items:center; position:relative}
.slc-teaser-av svg{width:18px; height:18px}
.slc-teaser-av::after{content:""; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:#22c55e; border:2px solid #0f172a}
.slc-teaser .slc-teaser-tx{color:#fff; display:flex; flex-direction:column; gap:1px; white-space:nowrap}
.slc-teaser .slc-teaser-tx b{font-size:14px !important; line-height:1.2 !important}
.slc-teaser .slc-teaser-tx small{font-size:12px !important; line-height:1.25 !important}
.slc-teaser .slc-teaser-x{top:50% !important; transform:translateY(-50%); right:8px !important}