/* ============================================================
   Offerte-balk — overlapt de hero (half erover, half eronder).
   Layout overgenomen van verhuisbedrijf.nl, omgezet naar de
   Excellent PM-huisstijl: blauwe kaart (--kleur1) + oranje knop
   (--kleur2), font Roboto-Medium (--font).
   ============================================================ */
.offerte-overlay{ position:relative; margin-top:-30px; z-index:5; padding:0 clamp(16px,4vw,40px) 60px; }
.of-wrap{ position:relative; max-width:1280px; margin:0 auto; }
.of-box{
  position:relative; z-index:2;
  background:var(--kleur1); color:#fff;
  border-radius:28px;
  padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,52px);
  box-shadow:0 24px 60px -10px rgba(55,108,181,.40);
}
/* Google-badge rechtsboven */
/* Reviews als uitgeknipte PNG, netjes ingepast rechtsboven op de offerte-balk */
.of-trust{ position:absolute; top:26px; right:90px; z-index:5; }
.of-reviews-img{ display:block; height:96px; width:auto; }
@media(max-width:880px){ .of-trust{ display:none; } }
/* Titel + subtitel */
.of-title{ font-family:var(--font); font-weight:700; letter-spacing:-.01em; line-height:1.05; font-size:clamp(24px,2.4vw,34px); margin:0 0 6px !important; color:#fff; }
.of-sub{ font-family:var(--font); font-size:14px; line-height:1.4; color:rgba(255,255,255,.88); margin:0 0 10px; }
/* Subtiele beschikbaarheids-hint (zomerplanning) */
.of-avail{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.92); letter-spacing:.01em; margin:0 0 20px; }
.of-avail .of-dot{ width:8px; height:8px; border-radius:50%; background:var(--kleur2); box-shadow:0 0 0 4px rgba(239,126,24,.20); flex:0 0 auto; }
/* De witte pill met velden */
.of-form{ margin:0; }
.of-pill{
  display:grid;
  grid-template-columns:.8fr 1px .8fr 1px 1fr 1px 1.2fr auto;
  align-items:stretch; gap:0;
  background:#fff; border-radius:999px; overflow:hidden;
  padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.of-field{ display:flex; flex-direction:column; justify-content:center; padding:8px 18px; min-width:0; cursor:text; }
.of-field span{ font-family:var(--font); font-size:11px; font-weight:700; color:var(--kleur1); letter-spacing:.02em; line-height:1; margin:0 0 4px; text-transform:uppercase; opacity:.9; }
.of-field input, .of-field select{ border:none; outline:none; background:none; font-family:var(--font); font-size:15px; color:#000; width:100%; padding:0; line-height:1.4; appearance:none; }
.of-field input::placeholder{ color:#9b9b9b; }
.of-field input:focus, .of-field select:focus{ outline:none; }
.of-field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23376cb5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 0 center; padding-right:18px;
}
.of-field input[type="date"]{ font-family:var(--font); color:#000; }
.of-field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.15); cursor:pointer; opacity:.7; }
.of-divider{ background:rgba(55,108,181,.18); width:1px; align-self:center; height:38px; }
/* Knop in merkoranje */
.of-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--kleur2); color:#fff; border:none; border-radius:999px;
  padding:14px 24px; font-family:var(--font); font-weight:700; font-size:15px; line-height:1;
  letter-spacing:.005em; cursor:pointer; white-space:nowrap;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 16px -4px rgba(239,126,24,.5);
}
.of-cta:hover{ background:#d96f10; transform:translateY(-1px); box-shadow:0 10px 22px -4px rgba(239,126,24,.65); }
.of-cta svg{ width:16px; height:16px; }
/* Mobiel: velden onder elkaar */
@media(max-width:760px){
  .offerte-overlay{ margin-top:-40px; padding-bottom:48px; }
  .of-pill{ grid-template-columns:1fr; border-radius:18px; padding:8px; gap:6px; }
  .of-divider{ display:none; }
  .of-field{ padding:10px 16px; border-bottom:1px solid rgba(55,108,181,.10); }
  .of-cta{ justify-content:center; border-radius:14px; padding:14px 20px; }
}

/* ============================================================
   Team-sectie ("ONS TEAM") op exact dezelfde breedte + uitlijning
   als de offerte-balk: zelfde zijgoot (clamp) + max 1280px, i.p.v.
   Bootstrap's smallere .container (1140px) + margin 0 50px.
   ============================================================ */
#team{ margin-left:0; margin-right:0; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px); background-image:none; }
#team .container{ max-width:1280px; padding-left:0; padding-right:0; }

/* Team als één nette kaart: foto links (flush + vullend) en tekst rechts,
   samen in één afgerond blok met schaduw. */
#team .row.team{
  --bs-gutter-x: 0;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 18px 50px -16px rgba(55,108,181,.28);
}
#team .row.team > div:last-child{ padding: 28px 24px 32px; }            /* mobiel: tekst-padding */
#team .row.team > div:first-child img{ border-radius: 24px 24px 0 0; }  /* mobiel: bovenhoeken rond */
@media (min-width: 768px){
  #team .row.team{ align-items: stretch; }
  #team .row.team > div:first-child{ position: relative; padding: 0; min-height: 380px; }
  #team .row.team > div:first-child img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px 0 0 24px; }
  #team .row.team > div:last-child{ padding: 40px 52px 44px 44px; }     /* desktop: tekst-padding */
}
/* Knoppenrij: offerte (blauw) + bel nu (oranje) naast elkaar */
#team .team-cta{ display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
#team .team-cta .schaduw{ margin-left: 0; }
#team .schaduw-bel a{ background: var(--kleur2); }
#team .schaduw-bel a:hover{ background: #d96f10; }
#team .schaduw-bel a span i{ margin-right: 8px; }

/* Faded hero-chevrons (header2.webp) rechts in het witte tekstvlak van het team-blok.
   Witte sluier eroverheen zodat het echt subtiel/faded is; achter de tekst. */
#team .row.team > div:last-child{
  position: relative;
  background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), url(/img/header2.webp);
  background-repeat: no-repeat, no-repeat;
  background-position: center, right bottom;
  background-size: cover, 56%;
  border-radius: 0 0 24px 24px;          /* mobiel: onderhoeken rond */
}
@media (min-width: 768px){
  #team .row.team > div:last-child{ background-size: cover, 60%; border-radius: 0 24px 24px 0; }
}

/* ============================================================
   Hero-payoffs naar links — zodat de witte tekstblokken niet
   over de mannen in het rechter hero-vlak vallen.
   ============================================================ */
#banner .payoff1{ left: 4%; }
#banner .payoff2{ left: 8%; }
#banner .payoff3{ left: 3%; }

/* Schone USP-balk onder de offerte-balk: 3 kernpunten, gecentreerd */
.usp-bar{ padding: 28px clamp(16px,4vw,40px) 4px; }
.usp-bar .usp-wrap{ max-width:1280px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px 54px; }
.usp-bar .usp{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font); font-weight:700; font-size:1.2rem; color:var(--kleur1); }
.usp-bar .usp i{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--kleur2); color:#fff; font-size:.78rem; flex:0 0 auto; }

/* ============================================================
   Reviews-sectie onder het team-blok: koptekst met inline
   oranje/blauw accent-iconen + bewegende rij Google-reviews.
   ============================================================ */
#reviews-blok{ padding: 58px clamp(16px,4vw,40px) 66px; overflow:hidden; }
.rb-intro{ max-width:840px; margin:0 auto 38px; text-align:center; }
.rb-title{ font-family:var(--font); font-weight:700; font-size:clamp(1.5rem,2.7vw,2.2rem); line-height:1.3; color:var(--kleur1)!important; margin:0 0 12px!important; }
.rb-ico{ display:inline-flex; align-items:center; justify-content:center; width:1.18em; height:1.18em; border-radius:50%; vertical-align:middle; margin:0 .05em; }
.rb-ico svg{ width:.62em; height:.62em; }
.rb-ico-orange{ background:var(--kleur2); }
.rb-ico-blue{ background:var(--kleur1); }
.rb-sub{ font-family:var(--font); font-size:1.12rem; color:#444; margin:0; }
.rb-sub strong{ color:var(--kleur2); }
.rb-marquee{ position:relative; }
.rb-marquee::before,.rb-marquee::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.rb-marquee::before{ left:0; background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.rb-marquee::after{ right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }
.rb-track{ display:flex; gap:22px; width:max-content; animation:rb-scroll 48s linear infinite; padding:14px 0; }
.rb-marquee:hover .rb-track{ animation-play-state:paused; }
@keyframes rb-scroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .rb-track{ animation:none; } }
.rb-card{ flex:0 0 340px; max-width:340px; background:#fff; border:1px solid #ececec; border-radius:14px; padding:22px 24px; box-shadow:0 10px 26px -14px rgba(0,0,0,.22); }
.rb-card-top{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.rb-avatar{ width:42px; height:42px; border-radius:50%; color:#fff; font-family:var(--font); font-weight:700; font-size:1.15rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rb-meta{ display:flex; flex-direction:column; line-height:1.25; flex:1 1 auto; min-width:0; }
.rb-name{ font-family:var(--font); font-weight:700; color:#202124; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-date{ font-size:.82rem; color:#70757a; }
.rb-g{ width:22px; height:22px; flex:0 0 auto; }
.rb-stars{ color:#fbbc04; font-size:1.06rem; letter-spacing:2px; margin-bottom:9px; }
.rb-text{ font-family:var(--font); font-size:.95rem; line-height:1.55; color:#3c4043; margin:0; }
@media (max-width:600px){ .rb-card{ flex-basis:280px; max-width:280px; } .rb-marquee::before,.rb-marquee::after{ width:40px; } }

/* ============ STAPPENPLAN ============ */
#stappenplan{ padding:64px clamp(16px,4vw,40px) 70px; background:linear-gradient(180deg,#f4f7fb 0%,#ffffff 100%); }
.sp-intro{ max-width:760px; margin:0 auto 50px; text-align:center; }
.sp-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:700; color:var(--kleur1); background:rgba(55,108,181,.10); padding:5px 13px; border-radius:20px; }
.sp-title{ font-family:var(--font); font-weight:700; font-size:clamp(1.5rem,2.7vw,2.2rem); line-height:1.25; color:#16243c!important; margin:16px 0 12px!important; }
.sp-title span{ color:var(--kleur1); }
.sp-sub{ font-family:var(--font); font-size:1.1rem; color:#444; margin:0; }

/* rail-stepper: iconen als knooppunten op een blauw-naar-oranje lijn */
.sp-steps{ list-style:none; margin:0 auto; padding:0; max-width:980px; display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.sp-steps::before{ content:""; position:absolute; top:34px; left:10%; right:10%; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--kleur1),var(--kleur2)); }
.sp-step{ position:relative; text-align:center; padding:0 12px; }
.sp-node{ position:relative; z-index:1; width:68px; height:68px; margin:0 auto 18px; border-radius:50%; background:#fff; border:4px solid var(--kleur1); color:var(--kleur1); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -10px rgba(55,108,181,.55); transition:transform .25s ease; }
.sp-node .sp-icon{ display:flex; }
.sp-node .sp-icon svg{ width:30px; height:30px; }
.sp-step:hover .sp-node{ transform:translateY(-5px); }
.sp-num{ position:absolute; top:-8px; right:50%; transform:translateX(34px); width:26px; height:26px; border-radius:50%; background:var(--kleur1); color:#fff; font-family:var(--font); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.sp-step-title{ font-family:var(--font); font-weight:700; font-size:1.02rem; line-height:1.3; color:#16243c!important; margin:0 0 7px!important; }
.sp-step-text{ font-family:var(--font); font-size:.9rem; line-height:1.5; color:#54606e; margin:0; }

/* laatste stap: garantie-accent in oranje */
.sp-step-final .sp-node{ border-color:var(--kleur2); color:var(--kleur2); }
.sp-step-final .sp-num{ background:var(--kleur2); }
.sp-guarantee{ display:inline-block; margin-top:10px; font-family:var(--font); font-weight:700; font-size:.76rem; color:var(--kleur2); background:rgba(239,126,24,.12); padding:5px 11px; border-radius:16px; }

.sp-cta-wrap{ text-align:center; margin-top:46px; }
.sp-cta{ display:inline-block; background:var(--kleur1); color:#fff!important; font-family:var(--font); font-weight:700; font-size:1.05rem; padding:15px 38px; border-radius:32px; box-shadow:0 12px 26px -10px rgba(55,108,181,.6); transition:background-color .25s ease, transform .2s ease; }
.sp-cta:hover{ background:var(--kleur2); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(239,126,24,.6); }
.sp-cta-note{ display:block; margin-top:13px; font-family:var(--font); font-size:.9rem; color:#70757a; }

@media (max-width:900px){
  .sp-steps{ grid-template-columns:1fr 1fr; gap:38px 10px; }
  .sp-steps::before{ display:none; }
}
@media (max-width:520px){
  .sp-steps{ grid-template-columns:1fr; }
}

/* ============ FAQ ============ */
#faq{ padding:60px clamp(16px,4vw,40px) 74px; background:#ffffff; }
.faq-intro{ max-width:760px; margin:0 auto 40px; text-align:center; }
.faq-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:700; color:var(--kleur1); background:rgba(55,108,181,.10); padding:5px 13px; border-radius:20px; }
.faq-title{ font-family:var(--font); font-weight:700; font-size:clamp(1.5rem,2.7vw,2.2rem); line-height:1.25; color:#16243c!important; margin:16px 0 12px!important; }
.faq-title span{ color:var(--kleur1); }
.faq-sub{ font-family:var(--font); font-size:1.1rem; color:#444; margin:0; }
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border:1px solid #e3e9f2; border-radius:14px; background:#fff; margin-bottom:14px; box-shadow:0 6px 18px -14px rgba(22,36,60,.5); overflow:hidden; }
.faq-item[open]{ border-color:var(--kleur1); }
.faq-q{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-family:var(--font); font-weight:700; font-size:1.02rem; line-height:1.35; color:#16243c; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{ content:""; flex:none; width:11px; height:11px; border-right:2.5px solid var(--kleur1); border-bottom:2.5px solid var(--kleur1); transform:rotate(45deg); transition:transform .25s ease; margin-top:-4px; }
.faq-item[open] .faq-q::after{ transform:rotate(-135deg); margin-top:4px; }
.faq-a{ padding:0 22px 20px; font-family:var(--font); font-size:.96rem; line-height:1.6; color:#54606e; }

/* ============ TRUSTOO ============ */
#trustoo{ --trustoo:#16b79b; --trustoo-d:#0e8a78; --ster:#ffb400; padding:66px clamp(16px,4vw,40px) 76px; background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.74) 38%,rgba(255,255,255,.76) 100%),url(/img/team.webp) center/cover no-repeat; }
.tr-wrap{ max-width:1180px; margin:0 auto; }
.tr-intro{ max-width:800px; margin:0 auto 36px; text-align:center; }
.tr-eyebrow{ display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.11em; font-size:.74rem; font-weight:700; color:var(--trustoo-d); background:rgba(22,183,155,.12); padding:6px 14px; border-radius:20px; }
.tr-eyebrow svg{ width:16px; height:16px; color:var(--trustoo); }
.tr-title{ font-family:var(--font); font-weight:700; font-size:clamp(1.5rem,2.7vw,2.2rem); line-height:1.22; color:#16243c!important; margin:15px 0 12px!important; }
.tr-title span{ color:var(--trustoo); }
.tr-sub{ font-family:var(--font); font-size:1.08rem; color:#54606e; margin:0; }

/* score-hero + trust-signalen */
.tr-hero{ display:grid; grid-template-columns:300px 1fr; gap:24px; margin-bottom:34px; }
.tr-score{ position:relative; overflow:hidden; background:#fff; border:1px solid #e2efeb; border-radius:20px; padding:30px 24px 26px; text-align:center; box-shadow:0 20px 44px -26px rgba(14,138,120,.5); }
.tr-score::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--trustoo),#62d2c0); }
.tr-logo{ display:inline-flex; align-items:center; gap:7px; color:var(--trustoo); font-family:var(--font); font-weight:800; font-size:1.32rem; letter-spacing:-.02em; margin-bottom:10px; }
.tr-logo svg{ width:26px; height:26px; }
.tr-bignum{ font-family:var(--font); font-weight:800; font-size:4rem; line-height:1; color:#16243c; }
.tr-bignum small{ font-size:1.3rem; color:#9aa6b2; font-weight:700; }
.tr-stars{ color:var(--ster); font-size:1.5rem; letter-spacing:3px; margin:8px 0 6px; }
.tr-label{ font-family:var(--font); font-size:.95rem; color:#54606e; }
.tr-label strong{ color:#16243c; }
.tr-awards{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.tr-medal{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font); font-size:.76rem; font-weight:700; color:#7a5b00; background:linear-gradient(180deg,#fff5d8,#ffe7a3); border:1px solid #f2cf78; padding:5px 11px; border-radius:16px; }
.tr-medal svg{ width:15px; height:15px; color:#e0a400; }

.tr-chips{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-content:center; }
.tr-chip{ display:flex; align-items:center; gap:13px; background:#fff; border:1px solid #e7edf3; border-radius:14px; padding:14px 16px; box-shadow:0 12px 26px -22px rgba(0,0,0,.3); }
.tr-chip .tr-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:rgba(22,183,155,.12); color:var(--trustoo-d); display:flex; align-items:center; justify-content:center; }
.tr-chip .tr-ic svg{ width:21px; height:21px; }
.tr-chip b{ display:block; font-family:var(--font); font-size:.96rem; color:#16243c; line-height:1.2; }
.tr-chip > span:last-child > span{ font-size:.82rem; color:#70757a; }

/* cta */
.tr-cta-wrap{ text-align:center; margin-top:38px; }
.tr-cta{ display:inline-flex; align-items:center; gap:9px; background:var(--trustoo); color:#fff!important; font-family:var(--font); font-weight:700; font-size:1.02rem; padding:15px 34px; border-radius:32px; box-shadow:0 14px 28px -10px rgba(14,138,120,.6); transition:background-color .2s ease, transform .2s ease; }
.tr-cta svg{ width:20px; height:20px; }
.tr-cta:hover{ background:var(--trustoo-d); transform:translateY(-2px); }
.tr-cta-note{ display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-family:var(--font); font-size:.88rem; color:#70757a; }
.tr-cta-note svg{ width:17px; height:17px; color:var(--trustoo); }

@media (max-width:880px){
  .tr-hero{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .tr-chips{ grid-template-columns:1fr; }
}

/* ============================================================
   DIENSTEN-blok onder de CTA-band: 4 dienstkaarten
   (klein plaatje + tekst eronder), responsive 4 -> 2 -> 1.
   ============================================================ */
.diensten{ padding:64px clamp(16px,4vw,40px) 76px; background:#f6f8fb; }
.dn-wrap{ max-width:1280px; margin:0 auto; }
.dn-head{ text-align:center; max-width:760px; margin:0 auto 38px; }
.dn-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:700; color:var(--kleur2); }
.dn-title{ font-family:var(--font); font-weight:700; font-size:clamp(1.5rem,2.7vw,2.1rem); line-height:1.25; color:#16243c!important; margin:10px 0 0!important; }
.dn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.dn-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #e7eef6; border-radius:16px; overflow:hidden; text-decoration:none; box-shadow:0 10px 26px -16px rgba(55,108,181,.30); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.dn-card:hover{ transform:translateY(-4px); box-shadow:0 20px 42px -18px rgba(55,108,181,.45); border-color:#d4e0ef; }
.dn-img{ aspect-ratio:4/3; overflow:hidden; background:#eef2f7; }
.dn-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.dn-card:hover .dn-img img{ transform:scale(1.05); }
.dn-body{ padding:16px 18px 20px; }
.dn-card h3{ font-family:var(--font); font-weight:700; font-size:1.06rem; color:var(--kleur1); margin:0 0 5px; display:flex; align-items:center; gap:7px; }
.dn-arrow{ color:var(--kleur2); font-weight:700; opacity:0; transform:translateX(-4px); transition:opacity .2s ease, transform .2s ease; }
.dn-card:hover .dn-arrow{ opacity:1; transform:translateX(0); }
.dn-card p{ font-family:var(--font); font-size:.9rem; line-height:1.45; color:#5b6573; margin:0; }
@media (max-width:980px){ .dn-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .dn-grid{ grid-template-columns:1fr; } }

/* ============================================================
   VERHUIZERS-FOTO + OFFERTEFORMULIER (onder het Trustoo-blok):
   foto links, formulier rechts; stapelt op mobiel.
   ============================================================ */
/* ===== offerteformulier (mooier) ===== */
html{ scroll-behavior:smooth; }
#offerte{ scroll-margin-top:96px; }
.vform-section{ padding:64px clamp(16px,4vw,40px) 88px; background:linear-gradient(180deg,#eef3fa 0%,#f6f8fb 60%); }
.vform-wrap{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch; }
.vform-photo{ border-radius:22px; overflow:hidden; box-shadow:0 24px 55px -20px rgba(23,52,99,.40); min-height:420px; }
.vform-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.vform-card{ position:relative; overflow:hidden; background:#fff; border:1px solid #e7eef6; border-radius:22px; box-shadow:0 24px 55px -20px rgba(23,52,99,.38); padding:clamp(28px,3vw,44px); }
.vform-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.13em; font-size:.74rem; font-weight:700; color:var(--kleur2); background:rgba(239,126,24,.10); padding:5px 12px; border-radius:20px; }
.vform-title{ font-family:var(--font); font-weight:700; font-size:clamp(1.45rem,2.4vw,2.05rem); line-height:1.18; color:#16243c!important; margin:14px 0 8px!important; }
.vform-title span{ color:var(--kleur1); }
.vform-lead{ font-family:var(--font); font-size:.98rem; line-height:1.55; color:#54606e; margin:0 0 24px; }
.vf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px 16px; }
.vf-full{ grid-column:1 / -1; }
.vform-card label{ display:block; font-family:var(--font); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#5d6b7c; margin:0 0 7px; }
.vform-card input, .vform-card select{ width:100%; border:1.5px solid #e2eaf4; border-radius:12px; padding:13px 14px 13px 44px; font-family:var(--font); font-size:15px; color:#16243c; background-color:#f5f8fc; background-repeat:no-repeat; background-position:15px center; background-size:19px; transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; appearance:none; -webkit-appearance:none; }
#vf-naam{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236486b3%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M5%2020c0-3.6%203.1-5.5%207-5.5s7%201.9%207%205.5%27%2F%3E%3C%2Fsvg%3E"); }
#vf-tel{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236486b3%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204h3.8l1.7%204.3-2.2%201.4a11.5%2011.5%200%200%200%205.6%205.6l1.4-2.2L19.5%2016V19.8a1%201%200%200%201-1%201A15.8%2015.8%200%200%201%203.2%205a1%201%200%200%201%201-1z%27%2F%3E%3C%2Fsvg%3E"); }
#vf-mail{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236486b3%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27m3.5%207.5%208.5%205.5%208.5-5.5%27%2F%3E%3C%2Fsvg%3E"); }
#vf-van, #vf-naar{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236486b3%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s7-6.3%207-11a7%207%200%201%200-14%200c0%204.7%207%2011%207%2011z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.4%27%2F%3E%3C%2Fsvg%3E"); }
#vf-datum{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236486b3%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%274.5%27%20width%3D%2717%27%20height%3D%2716%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3.5%209.5h17M8%202.5v4M16%202.5v4%27%2F%3E%3C%2Fsvg%3E"); }
#vf-type{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236486b3%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2011%2012%204l8.5%207%27%2F%3E%3Cpath%20d%3D%27M5.5%209.7V20h13V9.7%27%2F%3E%3C%2Fsvg%3E"); background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236486b3%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2011%2012%204l8.5%207%27%2F%3E%3Cpath%20d%3D%27M5.5%209.7V20h13V9.7%27%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23376cb5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-position:15px center,right 15px center; background-size:19px,12px; }
.vform-card input::placeholder{ color:#9aa6b4; }
.vform-card input:focus, .vform-card select:focus{ outline:none; border-color:var(--kleur1); background-color:#fff; box-shadow:0 0 0 3px rgba(55,108,181,.16); }
.vform-hp{ position:absolute; left:-9999px; }
.vf-submit{ grid-column:1 / -1; margin-top:8px; background:linear-gradient(135deg,var(--kleur2),#f7972f); color:#fff; border:none; border-radius:13px; padding:16px 20px; font-family:var(--font); font-weight:700; font-size:16px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; box-shadow:0 12px 26px -8px rgba(239,126,24,.6); }
.vf-submit::after{ content:"\2192"; font-size:1.15rem; transition:transform .18s ease; }
.vf-submit:hover{ transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 16px 32px -8px rgba(239,126,24,.65); }
.vf-submit:hover::after{ transform:translateX(4px); }
.vf-submit:disabled{ opacity:.7; cursor:default; transform:none; }
.vform-note{ grid-column:1 / -1; margin:12px 0 0; font-family:var(--font); font-size:13px; color:#70757a; text-align:center; }
.vform-success{ display:none; background:#eef7f0; border:1px solid #cfe8d6; color:#1e6b3a; border-radius:12px; padding:18px 20px; font-family:var(--font); font-size:1rem; line-height:1.5; }
@media (max-width:860px){ .vform-wrap{ grid-template-columns:1fr; } .vform-photo{ min-height:300px; } .vf-grid{ grid-template-columns:1fr; } }

/* Achtergrond-foto uit het Trustoo-blok gehaald (op verzoek) — schone lichte achtergrond */
#trustoo{ background:linear-gradient(180deg,#f6f9fc 0%,#ffffff 100%); }