/* Emis Finance v2 — 1:1 naar aangeleverd homepage-design + brand guide
   navy #0B1F3A · goud #C9A227 · Playfair Display (koppen) · Montserrat (body) */

@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* 2026-08-10 — kaartruimte op één schaal.
     Was: gap 24/24/28/32 en padding 32-28 / 34-30 op losse breekpunten. Daardoor
     KEERDE de verhouding om: op mobiel en tablet stond er minder ruimte TUSSEN de
     kaarten (24) dan erbinnen (28), op pc juist meer (32 om 30). Dat is waarom het
     op elk apparaat anders oogde. Nu schuiven gap en horizontale padding met
     dezelfde formule mee, dus blijft de verhouding overal gelijk. */
  --kaart-gap: clamp(24px, 2.4vw, 32px);
  --kaart-pad-x: clamp(24px, 2.4vw, 32px);
  --kaart-pad-y: clamp(28px, 2.9vw, 36px);
  --navy:#0B1F3A; --navy-2:#132c50; --navy-3:#0e2545;
  --goud:#C9A227; --goud-d:#a8861d; --goud-l:#d9b23a;
  /* Tekst-token: alleen voor goudkleurige TEKST op lichte vlakken (WCAG AA).
     #7E6412 = 5,65:1 op #fff · 5,08:1 op #F2F3F3 · 4,99:1 op #F1F1ED.
     De merkkleur --goud blijft ongewijzigd voor vlakken, randen en knopachtergronden. */
  --goud-t:#7E6412;
  --licht:#F3F5F7; --ink:#1A1A1A; --dim:#374151; --line:#e5e9f0;
  --shadow:0 14px 40px rgba(11,31,58,.12); --shadow-sm:0 3px 14px rgba(11,31,58,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
html{scroll-behavior:smooth}
body{font:400 16.5px/1.65 'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;height:auto}
a{color:var(--navy);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:var(--navy);line-height:1.16;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.8vw,3.4rem)}
h2{font-size:clamp(1.65rem,2.5vw,2.25rem)}  /* sectiekop — zelfde curve als .center h2 */
h3{font:600 1.12rem/1.35 'Montserrat',sans-serif;color:var(--navy)}
.serif{font-family:'Playfair Display',Georgia,serif}
.muted{color:var(--dim)}
.goud{color:var(--goud-t)}
.center{text-align:center}
.ic{vertical-align:-5px}
section{padding:76px 0}
.kicker{display:block;font:600 .78rem/1.4 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--goud-t);margin-bottom:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 .97rem/1 'Montserrat',sans-serif;padding:16px 28px;border-radius:12px;transition:.18s;border:1.5px solid transparent;cursor:pointer}
.btn--primary{background:var(--navy);color:#fff!important;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--navy-2);transform:translateY(-1px)}
.btn--gold{background:var(--goud);color:var(--navy)!important}
.btn--gold:hover{background:var(--goud-l)}
.btn--ghost-inv{border-color:rgba(255,255,255,.4);color:#fff!important}
.btn--ghost-inv:hover{border-color:#fff}

/* Header — wit, logo links, tel-cirkel + burger rechts (mobiel) */
.hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:26px;height:80px}
.hdr__brand{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.hdr__brand img{width:auto;height:52px}
.brand-tekst{display:flex;flex-direction:column;line-height:1.15}
.brand-naam{font:700 1.5rem/1 'Playfair Display',Georgia,serif;color:var(--navy);letter-spacing:.04em}
.brand-naam .goudnaam{color:var(--goud)}
.brand-slogan{font:600 .6rem/1.4 'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.hdr__nav{display:flex;gap:26px;margin-left:auto}
.hdr__nav a{font:600 .93rem/1 'Montserrat',sans-serif;color:var(--dim);padding:8px 0;border-bottom:2px solid transparent}
.hdr__nav a:hover,.hdr__nav a.is-on{color:var(--navy);border-color:var(--goud)}
.hdr__cta .btn{padding:13px 20px}
.hdr__tel{display:none;width:44px;height:44px;border:1.5px solid var(--goud);border-radius:50%;align-items:center;justify-content:center;color:var(--goud-d);flex:0 0 auto}
.hdr__burger{display:none;background:none;border:0;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer}
.hdr__burger span{display:block;width:24px;height:2.2px;background:var(--navy);border-radius:2px}
.mnav{display:none}
body.nav-open .mnav{display:flex;flex-direction:column;gap:2px;position:fixed;inset:80px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);padding:16px 22px 26px;z-index:49;box-shadow:var(--shadow)}
.mnav a{font:600 1.02rem/1 'Montserrat',sans-serif;padding:14px 4px;border-bottom:1px solid var(--licht);color:var(--navy)}
.mnav .btn{margin-top:14px}

/* Hero — wit, exact naar design */
.hero{padding:74px 0 56px;background:#fff}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{margin-bottom:0}
.hero h1 .accent{color:var(--goud-d);display:block}
.hero p.lead{font-size:1.06rem;color:var(--dim);margin:22px 0 26px;max-width:33em}
.hero__usps{list-style:none;margin:0 0 30px;display:grid;gap:14px}
.hero__usps li{display:flex;align-items:center;gap:13px;font-weight:600;color:var(--navy);font-size:1rem}
.chk{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--navy);display:inline-flex;align-items:center;justify-content:center}
.chk svg{width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero .btn--primary{width:100%;max-width:460px;padding:18px 28px;font-size:1rem}
.hero__note{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--dim);margin-top:14px}
.hero__note .ic{color:var(--goud-d)}

/* Review-badges */
.badges{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap;align-items:flex-start}
.badge{display:flex;flex-direction:column;gap:4px;flex:0 0 auto;min-width:min-content}
.badge__top{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;font:600 .95rem/1 'Montserrat',sans-serif;color:var(--ink);white-space:nowrap;line-height:1}
.badge__score{display:flex;align-items:center;gap:8px;font:700 1.15rem/1 'Montserrat',sans-serif;color:var(--ink);white-space:nowrap}
.stars{display:inline-flex;flex-wrap:nowrap;flex-shrink:0;gap:2px;white-space:nowrap;line-height:1;align-items:center}
.badges .stars{display:inline-flex;flex-wrap:nowrap;gap:2px}
.stars svg{width:17px;height:17px;flex:0 0 auto}
.badge__sub{font-size:.82rem;color:var(--dim);text-decoration:underline}

/* Hero-visual — navy brand-kaart met cirkelmotief (stijl projectvoorstel) */
.brandcard{position:relative;background:radial-gradient(circle at 78% 18%,rgba(201,162,39,.22),transparent 55%),linear-gradient(150deg,var(--navy) 0%,#0a1c34 100%);border-radius:24px;padding:48px 42px;color:#fff;box-shadow:var(--shadow);overflow:hidden}
.brandcard::before,.brandcard::after{content:"";position:absolute;border:1px solid rgba(201,162,39,.28);border-radius:50%;pointer-events:none}
.brandcard::before{width:340px;height:340px;right:-90px;top:-90px}
.brandcard::after{width:520px;height:520px;right:-180px;top:-180px}
.brandcard img{height:72px;width:auto;margin-bottom:22px}
.brandcard h2{color:#fff;font-size:1.45rem;margin-bottom:10px}
.brandcard>p{color:#c7d0de;margin-bottom:16px;font-size:.97rem}
.brandcard .rij{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);font-weight:600;position:relative;flex-wrap:wrap;word-break:break-word}
.brandcard .rij .ic{color:var(--goud)}
.brandcard .rij a{color:#fff}

/* Donkere band — "Meer dan cijfers" met foto, exact naar design */
.band{background:linear-gradient(115deg,var(--navy) 0%,var(--navy-3) 55%,#0a1c34 100%);color:#fff;padding:86px 0 150px;position:relative}
.band .kicker{color:var(--goud)}
.band__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.band h2{color:#fff;font-size:clamp(1.8rem,2.5vw,2.25rem)}  /* wit op donkere band, maar wél dezelfde maat */
.band h2 .accent{color:var(--goud)}
.band p{color:#c7d0de;margin-top:18px;max-width:30em}
.band__foto{position:relative}
.band__foto::before{content:"";position:absolute;top:20px;left:20px;right:-14px;bottom:-14px;border:2px solid rgba(201,162,39,.4);border-radius:20px;pointer-events:none}
.band__foto img{width:100%;border-radius:18px;box-shadow:0 22px 55px rgba(0,0,0,.45);display:block;border:1px solid rgba(201,162,39,.35);position:relative}

/* Vertrouwd-kaart — wit, overlapt de donkere band */
.trust{margin-top:-92px;position:relative;z-index:2;padding:0 0 76px}
.trust__card{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:44px 48px}
.trust__card h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:30px}
.trust__logos{display:flex;gap:34px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.klogo{filter:grayscale(1);opacity:.75;transition:.2s;width:auto}
.klogo:hover{filter:none;opacity:1}
.tlogo{display:flex;align-items:center;gap:10px;color:#8a94a6;filter:grayscale(1)}
.tlogo svg{width:30px;height:30px;flex:0 0 auto;stroke:#8a94a6;fill:none;stroke-width:1.6}
.tlogo b{font:700 .82rem/1.2 'Montserrat',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b7585;display:block}
.tlogo small{font:600 .62rem/1.3 'Montserrat',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#9aa3b2;display:block}

/* Pagina-hero (subpagina's) — navy met cirkelmotief */
.phero{position:relative;background:radial-gradient(circle at 82% 8%,rgba(201,162,39,.20),transparent 55%),linear-gradient(150deg,var(--navy) 0%,#0a1c34 100%);color:#fff;padding:76px 0 68px;overflow:hidden}
.phero::before,.phero::after{content:"";position:absolute;border:1px solid rgba(201,162,39,.22);border-radius:50%;pointer-events:none}
.phero::before{width:420px;height:420px;right:-120px;top:-160px}
.phero::after{width:640px;height:640px;right:-230px;top:-270px}
.phero .kicker{color:var(--goud)}
.phero h1{color:#fff;position:relative}
.phero p.lead{color:#c7d0de;font-size:1.08rem;max-width:36em;margin-top:18px;position:relative}

/* Diensten */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kaart-gap);margin-top:46px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:var(--kaart-pad-y) var(--kaart-pad-x);box-shadow:var(--shadow-sm);transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ic{color:var(--goud-d)}
.card h3{margin:16px 0 8px}
.card p{color:var(--dim);font-size:.95rem;font-weight:400}
/* Gewicht expliciet zetten (05-08-2026): zonder deze regel ERFT de alinea het gewicht
   van zijn omhulsel. Op /emisfinance is dat een gewone container (400), maar in de
   Bricks-versie op /wpemi is de kaart een <a> die van het thema 600 meekrijgt — daar
   stonden vijf dienstomschrijvingen dus halfvet terwijl ze op de andere versie normaal
   waren. Beide sites laden deze stylesheet, dus dit trekt ze in één keer gelijk. */
.sec-alt{background:radial-gradient(circle at 88% 10%,rgba(201,162,39,.08),transparent 46%),linear-gradient(180deg,#f4f6f9 0%,#ecf0f5 100%)}

/* Werkwijze — 3 fasen (uit projectvoorstel) */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kaart-gap);margin-top:46px;counter-reset:stap}
.stap{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px 30px;position:relative}
.stap::before{counter-increment:stap;content:counter(stap,decimal-leading-zero);font:700 2.5rem/1 'Playfair Display',serif;color:var(--goud);display:block;margin-bottom:14px}
.stap h3{margin-bottom:8px}
.stap p{color:var(--dim);font-size:.95rem}

/* Werkgebied */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 19px;font:600 .88rem/1 'Montserrat',sans-serif;color:var(--navy)}

/* CTA-strook */
.cta{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;border-radius:24px;padding:58px 52px;display:flex;align-items:center;justify-content:space-between;gap:36px;box-shadow:var(--shadow)}
.cta h2{color:#fff;margin-bottom:10px}
.cta p{color:#c7d0de}
.cta__btns{display:flex;gap:14px;flex:0 0 auto;flex-wrap:wrap}

/* Formulier + contact */
.form{display:grid;gap:16px;max-width:560px}
.form label{font:600 .88rem/1 'Montserrat',sans-serif;color:var(--navy);display:block;margin-bottom:7px}
.form input,.form textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font:400 1rem/1.4 'Montserrat',sans-serif;color:var(--ink);background:#fff}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--goud)}
.form .hp{position:absolute;left:-9999px}
.alert{border-radius:12px;padding:16px 19px;font-weight:600}
.alert--ok{background:#e8f5ec;color:#14532d}
.alert--err{background:#fdecec;color:#7f1d1d}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-info .rij{display:flex;gap:13px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--navy)}
.contact-info .rij .ic{color:var(--goud-d)}

/* Footer */
.ftr{background:var(--navy);color:#d7deea;padding:66px 0 0;margin-top:44px}
.ftr__grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.3fr;gap:40px;padding-bottom:46px}
.ftr h3,.ftr h4{color:#fff;font:600 1.05rem/1.2 'Montserrat',sans-serif;margin-bottom:16px;letter-spacing:.04em}
/* 05-08: was .95rem = 15,2px, terwijl de links eronder 16px zijn — de kolomkop was dus
   kleiner dan zijn eigen lijst. Gewicht 600 en de letterafstand blijven; die geven het
   labelkarakter, de grootte hoeft dat niet te doen. */
.ftr a{display:block;color:#b9c4d6;padding:5px 0;font-size:.94rem}
.ftr a:hover{color:var(--goud)}
.ftr p{font-size:.94rem;padding:4px 0}
.ftr p a{display:inline-block;padding:6px 0}
.ftr__tag{display:none}
.muted-inv{color:#b9c4d6}
.ftr__base{border-top:1px solid rgba(255,255,255,.14);padding:20px 22px;font-size:.85rem;color:#93a1b8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Responsive */
@media(max-width:980px){
  .hero__grid,.band__grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .grid3,.stappen{grid-template-columns:1fr 1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .hdr__nav,.hdr__cta{display:none}
  .hdr__tel{display:inline-flex;margin-left:auto}
  .hdr__burger{display:flex}
  .cta{flex-direction:column;text-align:center;padding:46px 28px}
  .trust__logos{grid-template-columns:repeat(2,1fr);gap:22px}
  .trust__card{padding:34px 28px}
  .band{padding-bottom:130px}
}
@media(max-width:600px){
  .grid3,.stappen{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  section{padding:54px 0}
  .hero{padding:54px 0 44px}
  .badges{gap:24px}
  .hero .btn--primary{max-width:none}
}

/* ===== v4: topbar, dropdowns, carrousel, animaties ===== */
.topbar{background:var(--navy);color:#c7d0de;font:600 .8rem/1 'Montserrat',sans-serif}
.topbar__in{display:flex;align-items:center;gap:22px;height:38px}
.topbar a{color:#e8ecf3;display:inline-flex;align-items:center;gap:6px}
.topbar a:hover{color:var(--goud)}
.topbar span{display:inline-flex;align-items:center;gap:6px}
.topbar__spacer{flex:1}
.topbar .ic{color:var(--goud)}
.topbar .tb-kort{display:none}
@media(max-width:760px){
  /* mobiel: tel+mail/wa als ronde iconen */
  .topbar .tb-txt{display:none}
  .topbar .tb-kort{display:inline}
  .topbar__in{align-items:center}
  .topbar a,.topbar__tel,.topbar .topbar__tel{
    gap:0;
    padding:0;border:1px solid rgba(201,162,39,.45);border-radius:50%;
    justify-content:center;align-items:center;box-sizing:border-box;flex-shrink:0;
  }
  .topbar a .ic,.topbar__tel .ic,.topbar a>svg{width:14px;height:14px;margin:0;flex-shrink:0}
}

/* Dropdown-menu */
.ddw{position:relative}
.ddw>a{display:inline-flex;align-items:center;gap:4px}
.dd{position:absolute;top:100%;left:-14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;min-width:280px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:60;max-height:70vh;overflow:auto}
.ddw:hover .dd,.ddw:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd a{display:block;padding:10px 14px;border-radius:9px;font:600 .88rem/1.3 'Montserrat',sans-serif;color:var(--dim);border-bottom:0!important}
.dd a:hover{background:var(--licht);color:var(--navy)}
.mnav details{border-bottom:1px solid var(--licht)}
.mnav summary{font:600 1.02rem/1 'Montserrat',sans-serif;padding:14px 4px;color:var(--navy);cursor:pointer;list-style:none}
.mnav details a{font-size:.93rem;padding:10px 16px}

/* Page-hero met formulier */
.phero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;position:relative}
.phero__form{background:#fff;border-radius:20px;padding:34px 32px;box-shadow:var(--shadow);color:var(--ink)}
.phero__form h2{font-size:1.3rem;margin-bottom:18px;color:var(--navy)}
.hero__usps--inv li{color:#fff}
.revscore{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:22px;font:600 .95rem/1 'Montserrat',sans-serif;flex-wrap:wrap}
.revscore strong{font-size:1.2rem}
.revscore--inv{justify-content:flex-start;color:#e8ecf3;margin-top:26px}
.revscore--inv strong{color:#fff}

/* Review-carrousel (marquee, 2 rijen — zoals Martis) */
.revsec{background:var(--licht);padding:76px 0;overflow:hidden}
.revmarq{position:relative;overflow:hidden;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);padding:12px 0 8px;margin-top:44px}
.revmarq-fade{position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.revmarq-fade--l{left:0;background:linear-gradient(to right,var(--licht),rgba(243,245,247,0))}
.revmarq-fade--r{right:0;background:linear-gradient(to left,var(--licht),rgba(243,245,247,0))}
.revmarq-row{overflow:hidden}
.revmarq-row+.revmarq-row{margin-top:20px}
.revtrack{display:flex;gap:22px;width:max-content;animation-name:revscroll;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
.revmarq:hover .revtrack{animation-play-state:paused}
/* Snelheid marquee — instelbaar zonder code: zet --rev-speed (rij 1) / --rev-speed2 (rij 2) op een
   parent. In Bricks: element selecteren -> Style -> CSS -> Custom CSS: %root%{--rev-speed:20s}.
   !important zodat dit ook wint van de inline animation-duration in de Bricks-import. */
.revtrack{animation-duration:var(--rev-speed,18s)!important}
.revmarq-row+.revmarq-row .revtrack{animation-duration:var(--rev-speed2,24s)!important}
@keyframes revscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.revcard{flex:0 0 360px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px;box-shadow:var(--shadow-sm)}
.revcard__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.revcard__top>div{flex:1}
.revcard__top strong{display:block;font:600 .95rem/1.3 'Montserrat',sans-serif;color:var(--navy)}
.revcard__avatar{width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--goud);display:inline-flex;align-items:center;justify-content:center;font:700 1.1rem/1 'Playfair Display',serif;flex:0 0 auto}
.revcard__stars{display:inline-flex;gap:1px;margin-top:3px}
.revcard__stars svg{width:13px;height:13px}
.revcard blockquote{font-size:.92rem;color:var(--dim);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.helpgrid{grid-template-columns:1fr 1fr!important;gap:12px}.helpgrid .mcard{flex-direction:column;padding:16px 14px;gap:8px}.helpgrid .mcard h3{font-size:1rem}}
@media(max-width:640px){.revcard{flex-basis:300px;width:300px;padding:20px 18px}.revmarq-fade--l,.revmarq-fade--r{width:50px}.revtrack{gap:16px}}

/* Bewegende cirkels (brandcard + phero + band) */
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-22px,18px) scale(1.06)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-14px) scale(.95)}100%{transform:translate(0,0) scale(1)}}
.brandcard::before,.phero::before{animation:drift1 11s ease-in-out infinite}
.brandcard::after,.phero::after{animation:drift2 16s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.brandcard::before,.brandcard::after,.phero::before,.phero::after,.revtrack{animation:none}}

/* Typemachine-effect */
.type-caret::after{content:"";display:inline-block;width:3px;height:1em;background:var(--goud);margin-left:4px;vertical-align:-2px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Scroll-reveal */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .45s ease,transform .45s ease}
html.js .rv.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* Kaarten als link */
a.card{display:block}
a.card h3{transition:.15s}
a.card:hover h3{color:var(--goud-d)}
.card{border-top:3px solid transparent}
.card:hover{border-top-color:var(--goud)}

@media(max-width:980px){
  .phero__grid{grid-template-columns:1fr;gap:36px}
  .revcard{flex-basis:300px}
}

/* ===== Mobiel: groter logo + veel betere leesbaarheid (28-07) ===== */
@media(max-width:760px){
  body{font-size:16px;line-height:1.65}
  .hdr__in{height:74px}
  .hdr__brand{gap:10px}
  .hdr__brand img{height:48px!important;width:auto!important}
  .brand-naam{font-size:1.35rem}
  .brand-slogan{font-size:.52rem;letter-spacing:.18em}
  .hero{padding:46px 0 40px}
  .hero h1{font-size:1.85rem;line-height:1.18;letter-spacing:0}
  .hero .kicker{font-size:.62rem;letter-spacing:.13em}
  .hero--v55 .kicker{font-size:clamp(.5rem,2.15vw + .28rem,.82rem)!important;letter-spacing:.07em!important;white-space:nowrap}
  .hero p.lead{font-size:.97rem;line-height:1.6}
  .hero__usps li{font-size:.95rem}
  .hero .btn--primary{font-size:.85rem;padding:15px 12px;gap:8px;white-space:nowrap}
  .kicker{font-size:.85rem}
  h2{font-size:1.8rem}
  .brandcard{padding:38px 26px}
  .brandcard img{height:104px!important;width:auto!important;margin-bottom:24px}
  .brandcard h2{font-size:1.65rem}
  .brandcard>p{font-size:1.05rem}
  .brandcard .rij{font-size:1.02rem}
  .card p{font-size:1rem}
  .stap p{font-size:1rem}
  .revcard blockquote{font-size:1rem}
  .phero h1{font-size:1.85rem}
  .phero p.lead{font-size:1.1rem}
  .ftr a,.ftr p{font-size:1rem}
}

/* v5.3 — fotokaders + achtergronden */
.fotoblok{position:relative;margin:0 14px 14px 0}
.fotoblok::before{content:"";position:absolute;top:18px;left:18px;right:-14px;bottom:-14px;border:2px solid rgba(201,162,39,.38);border-radius:22px;pointer-events:none}
.fframe{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 26px 60px rgba(11,31,58,.22);isolation:isolate;margin:0}
.fframe img{display:block;width:100%;height:auto}
.fframe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,58,0) 60%,rgba(11,31,58,.34) 100%);pointer-events:none}
.fframe::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--goud),#e6c766 55%,var(--goud));z-index:1}
@media(max-width:760px){.fotoblok{margin:0 8px 8px 0}.fotoblok::before{top:12px;left:12px;right:-8px;bottom:-8px}}

/* v5.4 — mockup-secties (Emrah 28-07): logoband, helpgrid, 4-stappen-proces */
.btn--outline{border-color:var(--navy);color:var(--navy)!important;background:#fff}
.btn--outline:hover{background:var(--navy);color:#fff!important}
.hero__notes{display:flex;gap:26px;flex-wrap:wrap}
.logoband{background:radial-gradient(circle at 82% 20%,rgba(201,162,39,.16),transparent 55%),linear-gradient(115deg,var(--navy) 0%,#0a1c34 100%);padding:30px 0 34px}
.logoband__titel{font-size:1.15rem;color:#fff;margin-bottom:20px;font-weight:700}
.logoband__titel .accent{color:var(--goud)}
.logoband__logos{display:flex;gap:46px;align-items:center;justify-content:center;flex-wrap:wrap}
.logoband .klogo{background:#fff;padding:12px 20px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.25);height:70px!important;width:auto;object-fit:contain;transition:.2s}
.logoband .klogo:hover{transform:translateY(-2px)}
.helpgrid .mcard{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:var(--kaart-pad-y) var(--kaart-pad-x);box-shadow:var(--shadow-sm)}
.mcard__ic{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:linear-gradient(150deg,#f6f1df,#efe4c2);display:inline-flex;align-items:center;justify-content:center;color:var(--goud-d)}
.mcard h3{font-size:1rem;margin-bottom:4px}
.mcard p{color:var(--dim);font-size:.9rem;line-height:1.55;margin:0}
.proces{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px;position:relative}
.proces::before{content:"";position:absolute;top:26px;left:11%;right:11%;border-top:2px dashed rgba(201,162,39,.5)}
.pstap{text-align:center;position:relative;padding:0 6px}
.pstap__nr{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--navy);color:var(--goud);font:700 1.15rem/1 'Montserrat',sans-serif;box-shadow:var(--shadow-sm);border:2px solid var(--goud)}
.pstap__ic{display:block;color:var(--goud-d);margin:16px 0 8px}
.pstap h3{font-size:1rem;margin-bottom:6px}
.pstap p{color:var(--dim);font-size:.88rem;line-height:1.55;margin:0}
@media(max-width:900px){.proces{grid-template-columns:repeat(2,1fr);gap:34px 20px}.proces::before{display:none}}
@media(max-width:520px){.proces{grid-template-columns:1fr}.logoband__logos{gap:30px}}

/* v5.4b — diensten-hero trust, formcta, truststrip, navy-proces */
.ptrust{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px}
.ptrust span{display:inline-flex;align-items:center;gap:8px;font:600 .88rem/1 'Montserrat',sans-serif;color:#c7d0de}
.ptrust .ic{color:var(--goud)}
.formcta{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;background:radial-gradient(circle at 82% 12%,rgba(201,162,39,.18),transparent 55%),linear-gradient(150deg,var(--navy) 0%,#0a1c34 100%);border-radius:24px;padding:46px 44px;box-shadow:var(--shadow)}
.formcta h2,.formcta .brxe-heading,.formcta .hero__usps li{color:#fff!important}
.formcta .accent,.formcta h2 .accent{color:var(--goud,#C9A227)!important}
.formcta__form{background:#fff;border-radius:18px;padding:26px}
.truststrip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.tsi{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.tsi .ic{color:var(--goud-d);flex:0 0 auto;margin-top:2px}
.tsi strong{display:block;font-size:.92rem;color:var(--navy)}
.tsi span{font-size:.8rem;color:var(--dim);line-height:1.45}
.proces--navy .pstap h3{color:#fff}
.proces--navy .pstap p{color:#c7d0de}
.proces--navy .pstap__ic{color:var(--goud)}
.proces--navy.proces::before{border-top-color:rgba(201,162,39,.45)}
@media(max-width:900px){.formcta{grid-template-columns:1fr;padding:34px 26px}.truststrip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.truststrip{grid-template-columns:1fr}}

/* v5.6 — footer-logoknop (animated logo co-agent; CSS hersteld na style.css-clobber) */
.ftr__logo-btn{background:none;border:0;padding:0;cursor:pointer;display:inline-block;line-height:0}
.ftr__logo-anim:not(.ftr__brand){display:block;height:auto;width:auto;max-width:100%;animation:ef-logo-float 6s ease-in-out infinite}
@media(max-width:760px){.ftr__logo-anim:not(.ftr__brand) img{height:190px!important;max-height:190px!important;max-width:min(100%,440px)!important}}
.ftr__logo-btn:hover .ftr__logo-anim,.ftr__logo-btn:focus-visible .ftr__logo-anim{filter:drop-shadow(0 0 14px rgba(201,162,39,.45))}
@keyframes ef-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.ftr__logo-anim:not(.ftr__brand){animation:none}}

/* v5.7 — logoslider (klantwens: 1 rij, links->rechts, dun, zoals reviews-marquee) */
.logomarq{overflow:hidden;position:relative;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logotrack{display:flex;gap:34px;width:max-content;align-items:center;animation:logoscroll 28s linear infinite}
.logomarq:hover .logotrack{animation-play-state:paused}
@keyframes logoscroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.logotrack .klogo{background:#fff;padding:9px 16px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.22);height:56px!important;width:auto;object-fit:contain;flex:0 0 auto}
@media(max-width:760px){.logotrack .klogo{height:46px!important;padding:7px 12px}.logotrack{gap:22px;animation-duration:22s}.logoband{padding:24px 0 28px}.logoband__titel{font-size:1rem;margin-bottom:16px}}
@media (prefers-reduced-motion:reduce){.logotrack{animation:none}}

/* ===== v5.5c — hero text iets groter (was v5.5b) =====
   v5.5 — hero-hiërarchie (klantfeedback Emrah 29-07 19:55)
   H1 heel groot · introtekst duidelijk kleiner + dikgedrukt · USP's iets kleiner
   dan de intro en semi-bold · CTA-knop groot · ondertekst CTA klein en subtiel.
   Minder ruimte tussen de kicker bovenaan en de H1. */
.hero--v55{padding:38px 0 52px}
.hero--v55 .kicker{font-size:clamp(.58rem,2.1vw + .32rem,.98rem);letter-spacing:clamp(.07em,.35vw,.14em);margin-bottom:6px;white-space:nowrap}
/* Tekstkolom iets breder zodat de H1 groot kan zonder dat 'Persoonlijk betrokken.' afbreekt.
   Alleen op desktop: onder 980px is de hero al 1 kolom en moet dat zo blijven. */
.hero--v55 h1{
  font-size:clamp(1.75rem,0.85rem + 4.4vw,4.15rem);
  line-height:1.14;
  letter-spacing:-.01em;
  text-wrap:balance;
  max-width:11.5em;
}
.hero--v55 h1 .hero__h1-main{
  display:inline;
  font-size:inherit;
}
.hero--v55 h1 .accent{
  display:inline;
  font-size:inherit;
  margin-top:0;
  white-space:nowrap;
}
.hero--v55 h1{
  white-space:nowrap;
  text-wrap:nowrap;
}
.hero--v55 p.lead{font-size:.99rem;font-weight:500;color:var(--ink);margin:14px 0 20px;max-width:34em}
.hero--v55 .hero__usps{margin:0 0 22px;gap:10px}
.hero--v55 .hero__usps li{font-size:.92rem;font-weight:600}
.hero--v55 .hero__usps .chk{width:23px;height:23px}
.hero--v55 .hero__usps .chk svg{width:12px;height:12px;stroke:var(--goud)!important}
.hero--v55 .btn--primary{padding:21px 32px;font-size:1.08rem;max-width:480px}
.hero__subline{display:inline-flex;align-items:center;gap:7px;margin:9px 0 0;font-size:.88rem;font-weight:400;color:var(--dim)}
.hero__subline .ic{color:var(--goud-d)}

@media(max-width:980px){
  .hero--v55{padding:40px 0 40px}
}
@media(max-width:760px){
  .hero--v55{padding:32px 0 36px}
  .hero--v55 .kicker{font-size:clamp(.5rem,2.15vw + .28rem,.82rem);letter-spacing:.07em;white-space:nowrap}
  .hero--v55 h1{
    line-height:1.14;
    max-width:100%;
    font-size:clamp(.92rem,3.6vw + .38rem,2.32rem);
  }
  .hero--v55 h1 .hero__h1-main{font-size:inherit}
  .hero--v55 p.lead{font-size:1.02rem;margin:12px 0 18px}  /* 05-08: was .94rem = 15px,
      terwijl de gewone tekst 16px is. Een introzin hoort nooit kleiner te zijn dan de
      alinea's eronder; dat leest als bijschrift in plaats van als opening. */
  .hero--v55 .hero__usps{margin-bottom:20px;gap:9px}
  .hero--v55 .hero__usps li{font-size:.88rem}
  .hero--v55 .btn--primary{font-size:.95rem;padding:17px 14px}
  .hero--v55 .badges{margin-top:20px;gap:20px}
  .badges .stars svg{width:15px;height:15px}
  .hero--v55 h1{
    font-size:clamp(1.75rem,0.85rem + 3.8vw,4.15rem);
  }
  .hero__subline{font-size:.84rem;margin-top:8px}
}

.hero--v55 .badges{margin-top:24px;gap:28px}

/* Badge-varianten */
.badge__sub--plain{text-decoration:none}
.badges .badge__score .ic{color:var(--goud-d)}

/* Hero mobiel/tablet: 1 kolom (bandfoto-overlay blijft apart). Desktop split: zie v5.14. */
@media(max-width:991px){
  .hero--v55 .hero__grid{display:block}
  .hero--v55 .hero__grid>.rv{max-width:min(760px,100%)}
  .hero__form-col{display:none}
}

/* Bandfoto — lege ruimte links (website-mockup.jpg): 2 mannen rechts, laptop linksonder,
   tekstzone links ~48%. Desktop: navy kolom + foto. Tablet: hybrid. Mobiel: overlay in linkerkolom. */
.bandfoto{--bandfoto-zone:48%;--bandfoto-laptop:34%;padding:0 0 24px;overflow:visible;position:relative}
.bandfoto__grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:440px}
.bandfoto__tekst{display:flex;align-items:center;padding:74px 40px 74px max(22px,calc((100vw - 1180px)/2 + 22px))}
.bandfoto__beeld{position:relative;min-height:340px}
.bandfoto__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 45%;display:block}
.bandfoto__beeld::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(11,31,58,.55) 12%,rgba(11,31,58,0) 34%)}
.bandfoto__body{display:flex;gap:12px;align-items:stretch;margin-top:14px}
.bandfoto__accent{display:none}
.band.bandfoto{background:linear-gradient(115deg,var(--navy) 0%,var(--navy-3) 55%,#0a1c34 100%);padding:0 0 24px}
.bandfoto__tekst h2{color:#fff;font-size:clamp(1.35rem,2.8vw,2.1rem)}
.bandfoto__tekst h2 .accent{color:var(--goud)}
.bandfoto__tekst p{color:#c7d0de;margin-top:0;max-width:30em}
/* Tablet hybrid (761–980px): tekst links, foto rechts, smallere tekstkolom */
@media(min-width:761px) and (max-width:980px){
  .bandfoto__grid{grid-template-columns:46% 54%;min-height:380px}
  .bandfoto__tekst{padding:44px 24px 44px max(18px,calc((100vw - 1180px)/2 + 18px))}
  .bandfoto__tekst h2{font-size:clamp(1.15rem,2.2vw,1.55rem)}
  .bandfoto__tekst p{font-size:.92rem;max-width:26em}
  .bandfoto__beeld img{object-position:58% 48%}
  .bandfoto__beeld::before{background:linear-gradient(90deg,var(--navy) 0%,rgba(11,31,58,.48) 10%,rgba(11,31,58,0) 30%)}
}
/* Mobiel (≤760px): full-width foto, tekst in linkse lege zone boven laptop */
@media(max-width:760px){
  section.band.bandfoto{padding:0 0 36px;background:transparent}
  .band.bandfoto{padding:0 0 36px;background:transparent}
  .bandfoto{--bandfoto-zone:52%;--bandfoto-laptop:32%}
  .bandfoto__grid{display:grid;grid-template-columns:1fr;grid-template-areas:"photo";min-height:0;position:relative;width:100%;max-width:none;margin:0;isolation:isolate}
  .bandfoto__beeld{grid-area:photo;min-height:0;height:clamp(360px,92vw,480px);position:relative;width:100%;max-width:none;margin:0}
  .bandfoto__beeld img{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:38% 58%;display:block}
  .bandfoto__beeld::before{display:block;width:var(--bandfoto-zone);right:auto;background:linear-gradient(180deg,rgba(11,31,58,.36) 0%,rgba(11,31,58,.16) 16%,rgba(11,31,58,.04) 34%,transparent 48%),linear-gradient(90deg,rgba(11,31,58,.34) 0%,rgba(11,31,58,.10) 58%,transparent 100%)}
  .bandfoto__tekst{grid-area:photo;position:absolute;top:0;left:0;right:auto;bottom:var(--bandfoto-laptop);z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(10px,2.8vw,18px) 8px clamp(6px,1.8vw,12px) clamp(14px,3.8vw,18px);pointer-events:none;width:var(--bandfoto-zone);max-width:var(--bandfoto-zone);box-sizing:border-box}
  .bandfoto__tekst .rv{width:100%;max-width:100%}
  .bandfoto__tekst h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.05rem,4.6vw,1.25rem);line-height:1.22;margin:0;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);font-weight:700;text-align:left}
  .bandfoto__tekst h2 .accent{display:inline;color:var(--goud-l)}
  .bandfoto__body{display:flex;gap:7px;align-items:stretch;margin-top:7px}
  .bandfoto__accent{display:block;width:3px;flex:0 0 3px;background:var(--goud);border-radius:2px;align-self:stretch}
  .bandfoto__tekst p{color:rgba(255,255,255,.93);font-family:'Montserrat',sans-serif;font-size:clamp(0.78rem,3.2vw,0.88rem);line-height:1.36;margin:0;max-width:100%;text-shadow:0 1px 8px rgba(0,0,0,.35);text-align:left}
}


/* v5.13 — logocard overlapping bandfoto (Reward-style mockup Aug 2): witte kaart over fotobodem, static grid */
.bandfoto__logocard{position:relative;z-index:5;background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(11,31,58,.12);padding:24px;margin:-52px auto 0;max-width:min(920px,calc(100% - 44px))}
.bandfoto__logocard-title{margin:0 0 18px;text-align:center;font:700 clamp(.88rem,2.6vw,1.02rem)/1.35 'Montserrat',sans-serif;color:var(--navy)!important;background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important;-webkit-text-fill-color:var(--navy)!important;padding-bottom:0!important;display:block!important}.bandfoto__logocard-title::after{display:none!important;content:none!important}
.bandfoto__logogrid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 22px}
.bandfoto__logo{display:block;height:42px;width:auto;max-width:calc(33.333% - 16px);object-fit:contain;background:transparent!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:none;opacity:1;transition:opacity .2s,filter .2s}
.bandfoto__logo:hover{opacity:1;filter:grayscale(0%)}
@media(min-width:761px){
  .bandfoto{padding-bottom:56px}
  .bandfoto__logocard{margin-top:-56px}
  .bandfoto__logogrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px;justify-items:center}
  .bandfoto__logo{height:50px;max-width:100%}
}
@media(max-width:760px){
  .bandfoto{padding-bottom:36px}
  .bandfoto__logocard{margin:-52px 18px 0;padding:22px 18px 20px;max-width:none}
  .bandfoto__logocard-title{margin-bottom:16px;font-size:.875rem;color:var(--navy)!important}
  .bandfoto__logogrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 10px;justify-items:center;align-items:center}
  .bandfoto__logo{height:34px;max-width:100%;width:100%;object-fit:contain}
  .bandfoto__logogrid .bandfoto__logo:nth-child(1){grid-column:1/3}
  .bandfoto__logogrid .bandfoto__logo:nth-child(2){grid-column:3/5}
  .bandfoto__logogrid .bandfoto__logo:nth-child(3){grid-column:5/7}
  .bandfoto__logogrid .bandfoto__logo:nth-child(4){grid-column:2/4}
  .bandfoto__logogrid .bandfoto__logo:nth-child(5){grid-column:4/6}
}

/* ══ Klantontwerp Emrah (WA 02-08-2026 22:17 + 22:23, "Aanpassen naar dit") ══════════ */

/* Kicker met gouden lijntjes ernaast */
.kicker--rules{display:flex;align-items:center;justify-content:center;gap:16px}
.kicker--rules::before,.kicker--rules::after{content:"";height:1px;width:54px;background:var(--goud);opacity:.8}

/* Korte gouden streep onder een sectiekop + introzin eronder */
.sec-rule{width:64px;height:2px;background:var(--goud);border:0;margin:18px auto 0;border-radius:2px}
.sec-lead{max-width:620px;margin:16px auto 0;color:var(--dim);font-size:1rem;line-height:1.7;text-align:center}

/* Kaarten: serif-kop + gouden accentstreep onderin (klantwens) */
.helpgrid .mcard{flex-direction:column;align-items:stretch;gap:14px;padding:var(--kaart-pad-y) var(--kaart-pad-x)}
.helpgrid .mcard h3{font-family:'Playfair Display',serif;font-weight:500;font-size:1.18rem;margin:0 0 6px}
.helpgrid .mcard .mcard__rule{display:block;width:40px;height:2px;background:var(--goud);border-radius:2px;margin-top:16px}
.helpgrid .mcard__ic{background:linear-gradient(150deg,#f7f3e6,#f1e8cf)}

/* Navy CTA-balk onder de kaarten */
.ctabar{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,var(--navy-2),var(--navy));
  border-radius:18px;padding:24px 26px;margin-top:34px;box-shadow:var(--shadow-sm)}
.ctabar__ic{flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:var(--goud);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center}
.ctabar__t{flex:1 1 auto;min-width:0}
.ctabar__t strong{display:block;font-family:'Playfair Display',serif;font-weight:500;font-size:1.28rem;line-height:1.3;color:#fff}
.ctabar__t span{display:block;margin-top:6px;color:#c7d0de;font-size:.92rem}
.ctabar__btn{flex:0 0 auto;width:56px;height:56px;border-radius:14px;background:var(--goud);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:.15s}
.ctabar__btn:hover{background:var(--goud-l);transform:translateX(2px)}
@media(max-width:640px){
  .ctabar{flex-wrap:wrap;gap:14px;padding:20px}
  .ctabar__ic{width:48px;height:48px}
  .ctabar__t strong{font-size:1.08rem}
  .ctabar__btn{width:48px;height:48px}
}

/* Werkwijze als tijdlijn (vervangt de gecentreerde 4-koloms opzet) */
.proces--tl{display:block;margin-top:38px;position:relative}
.proces--tl::before{display:none}
.proces--tl .pstap{display:grid;grid-template-columns:56px 72px 1fr;align-items:start;gap:0 20px;
  text-align:left;padding:26px 0;position:relative}
.proces--tl .pstap + .pstap{border-top:1px solid var(--line)}
/* doorlopende gouden lijn door de nummercirkels heen */
.proces--tl::after{content:"";position:absolute;left:27px;top:44px;bottom:44px;width:2px;background:var(--goud);opacity:.55}
.proces--tl .pstap__nr{position:relative;z-index:1;width:56px;height:56px;font-size:1.1rem;grid-column:1;grid-row:1}
/* expliciete plaatsing: zonder dit plaatsen de kinderen zichzelf en valt de <p> in kolom 1 */
.proces--tl .pstap__ic{grid-column:2;grid-row:1}
.proces--tl .pstap h3{grid-column:3;grid-row:1}
.proces--tl .pstap p{grid-column:3;grid-row:2}
.proces--tl .pstap__ic{margin:0;width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,#f7f3e6,#f1e8cf);
  display:inline-flex;align-items:center;justify-content:center;align-self:start}
.proces--tl .pstap h3{font-size:1.12rem;margin:6px 0 6px}
.proces--tl .pstap p{font-size:.94rem;line-height:1.65;max-width:52ch}
@media(max-width:640px){
  /* 2026-08-04 (klantwens Emrah, 02-08): het icoonrondje stond op mobiel op display:none,
     maar zijn ontwerp is juist een MOBIELE schermafdruk mét die iconen naast het nummer.
     Daarom blijven het hier drie kolommen; nummer en icoon iets kleiner zodat er op een
     390px-scherm nog ~240px voor de tekst overblijft. */
  .proces--tl .pstap{grid-template-columns:42px 46px 1fr;gap:0 11px;padding:22px 0}
  .proces--tl .pstap h3{grid-column:3;grid-row:1}
  .proces--tl .pstap p{grid-column:3;grid-row:2}
  .proces--tl .pstap__nr{width:42px;height:42px;font-size:.94rem}
  .proces--tl .pstap__ic{grid-column:2;grid-row:1;display:inline-flex;width:46px;height:46px}
  .proces--tl .pstap__ic svg{width:22px;height:22px}
  .proces--tl::after{left:20px}
  .proces--tl .pstap h3{margin-top:2px;font-size:1.05rem}
}
@media(max-width:400px){
  /* onder de 400px wordt drie kolommen te krap voor leesbare regels — dan wint de tekst */
  .proces--tl .pstap{grid-template-columns:40px 1fr}
  .proces--tl .pstap h3,.proces--tl .pstap p{grid-column:2}
  .proces--tl .pstap__ic{display:none}
}



/* v5.12 — trust-band strak onder diensten-hero */
.phero:has(+ .tbar){padding-bottom:56px!important}
@media (min-width:992px){.phero:has(+ .tbar){padding-bottom:64px!important}}
.phero:has(+ .tbar) + .tbar{border-top:0}
@media(min-width:992px){
  .phero:has(+ .tbar) + .tbar .tbar__grid{padding:18px 0}
}



/* v5.14 — advies-form card + desktop hero/diensten layout (Aug 4) */
.advies-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px 26px;box-shadow:0 14px 44px rgba(11,31,58,.11);position:relative;overflow:hidden}
.advies-card::before{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;background:linear-gradient(90deg,var(--goud),var(--goud-l));border-radius:0 0 3px 3px}
.advies-card__kicker{display:block;font:600 .72rem/1.35 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-d);margin:0 0 8px}
.advies-card__title{font-size:1.32rem;color:var(--navy);margin:0 0 8px;line-height:1.28}
.advies-card__sub{font-size:.88rem;color:var(--dim);margin:0 0 18px;line-height:1.55}
.advies-card .form{max-width:none;gap:13px}
.advies-card .form label{font-size:.84rem;margin-bottom:6px}
.advies-card .form input,.advies-card .form textarea{padding:12px 14px;font-size:.95rem;border-radius:11px}
.advies-card .form textarea{min-height:88px;resize:vertical}
.advies-card .btn--primary{width:100%;max-width:none;padding:16px 18px;font-size:.96rem;margin-top:2px}
.advies-card .alert{margin-bottom:0;font-size:.92rem}
.advies-card--inv{border:0;box-shadow:0 18px 48px rgba(0,0,0,.22)}
.advies-card--inv .advies-card__title{color:var(--navy)}

.phero__actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
.phero__form--diensten{background:transparent;padding:0;box-shadow:none}
.phero__form:has(.advies-card){background:transparent;border-radius:0;padding:0;box-shadow:none;color:inherit}
.phero__form .advies-card{margin:0}

@media(min-width:992px){
  .hero--v55{padding:58px 0 68px;background:linear-gradient(180deg,#fff 0%,#f7f9fc 100%)}
  .hero--v55 .hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(320px,.88fr);gap:44px 56px;align-items:center}
  .hero--v55 .hero__grid>.rv{max-width:none}
  .hero--v55 .kicker{font-size:.98rem;margin-bottom:10px}
  .hero--v55 h1 .hero__h1-main{font-size:clamp(2.05rem,2.6vw,2.85rem)}
  .hero--v55 h1 .accent{font-size:clamp(2.05rem,2.6vw,2.85rem);margin-top:.06em}
  .hero--v55 p.lead{font-size:1.08rem;margin:18px 0 24px;max-width:36em}
  .hero--v55 .hero__usps{margin-bottom:28px;gap:12px}
  .hero--v55 .hero__usps li{font-size:1rem}
  .hero--v55 .btn--primary{max-width:400px;padding:19px 28px;font-size:1.02rem}
  .hero--v55 .badges{margin-top:30px;gap:32px}
  .hero__form-col{display:block;align-self:stretch;content-visibility:visible}
  .hero__form-col .advies-card{height:100%;display:flex;flex-direction:column;justify-content:center}

  .phero{padding:84px 0 76px}
  .phero__grid{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:52px 56px;align-items:start}
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline){position:sticky;top:22px;background:transparent;padding:0;box-shadow:none}
  .phero h1{font-size:clamp(2rem,3vw,2.75rem);line-height:1.12}
  .phero p.lead{font-size:1.12rem;max-width:38em}

  section:not(.hero):not(.phero):not(.band):not(.bandfoto){padding:84px 0}
  .grid3{margin-top:50px}
  .card{border-radius:20px}
  .card h3{font-size:1.2rem;margin:18px 0 10px}
  .card p{font-size:.97rem;line-height:1.65}
  .helpgrid .mcard{padding:var(--kaart-pad-y) var(--kaart-pad-x)}
  .helpgrid .mcard h3{font-size:1.22rem}
  /* SECTIEKOPPEN — één maat (05-08-2026).
   Er stonden drie regels voor dezelfde soort kop die 0,05rem verschilden:
   .center h2 (1.85/2.4vw/2.35), .revsec .center h2 (1.9/2.5/2.45) en
   .sec-alt .center h2 (1.9/2.5/2.4). Dat is geen ontwerpkeuze maar drift, en het is
   precies waarom de klant zei dat er "geen regels" leken te zijn: op desktop stonden
   er vier bijna-gelijke kopmaten naast elkaar (34,6 / 36 / 37,6 / 38,4px).
   Alle drie nu 1.9rem / 2.5vw / 2.4rem. Kaartkoppen (.trust__card h2) blijven hun
   eigen, duidelijk kleinere maat houden — dat is de tweede en laatste laag. */
  .center h2{font-size:clamp(1.9rem,2.5vw,2.4rem)}  /* 05-08: samengevoegd, zie hieronder */
  .sec-lead{font-size:1.05rem;max-width:680px}
  .ctabar{padding:28px 32px;margin-top:40px}
  .cta{padding:62px 56px}
  .formcta{padding:52px 48px;gap:52px}
}
/* === v5.14c — Diensten hero = wpemi (dark form, geen witte kaart) === */
.phero__form--inline{
  background:transparent!important;border-radius:0!important;padding:0!important;
  box-shadow:none!important;color:inherit!important;position:static!important;top:auto!important;
}
.phero__form--inline > h2.serif{
  color:#fff!important;margin:0 0 16px;font-size:1.42rem;line-height:1.22;font-weight:700;
}
.phero__form--inline .hero__form label{
  color:#fff!important;opacity:.92!important;font-family:Montserrat,sans-serif!important;
  font-weight:600!important;font-size:.74rem!important;line-height:1.3!important;margin-bottom:4px!important;
}
.phero__form--inline .hero__form label span{display:none!important}
.phero__form--inline .hero__form input,
.phero__form--inline .hero__form textarea{
  background:#fff!important;border:1px solid #d8dfe8!important;color:var(--ink)!important;
  padding:11px 13px!important;font-size:.92rem!important;border-radius:10px!important;width:100%;
}
.phero__form--inline .hero__form input:focus,
.phero__form--inline .hero__form textarea:focus{
  border-color:var(--goud)!important;box-shadow:0 0 0 3px rgba(201,162,39,.35)!important;outline:none;
}
.phero__form--inline .hero__form textarea{min-height:70px!important;resize:vertical}
.phero__form--inline .hero__form .btn--primary,
.phero__form--inline .hero__form button[type=submit]{
  background:var(--goud)!important;color:var(--navy)!important;font-weight:700!important;
  width:100%;padding:14px 22px!important;border:0!important;border-radius:10px!important;
}
.phero__form--inline .hero__form .btn--primary:hover,
.phero__form--inline .hero__form button[type=submit]:hover{
  background:var(--goud-l)!important;box-shadow:0 8px 22px rgba(201,162,39,.35)!important;
}
@media(min-width:992px){
  .phero:has(.phero__grid--inline){padding:68px 0 52px!important}
  .phero__grid--inline{
    align-items:center!important;gap:40px 44px!important;
    grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr)!important;
  }
  .phero__form--inline .hero__form{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    column-gap:14px!important;row-gap:11px!important;align-items:start;
  }
  .phero__form--inline .hero__form > div:nth-child(5),
  .phero__form--inline .hero__form > div:last-of-type{grid-column:1 / -1!important}
}
@media(max-width:991px){
  .phero__form--inline{
    margin-top:28px;background:#fff!important;border-radius:20px!important;padding:22px 20px 20px!important;
    box-shadow:0 14px 44px rgba(11,31,58,.14)!important;color:var(--ink)!important;
  }
  .phero__form--inline > h2.serif,
  .phero__form--inline .hero__form label{color:var(--navy)!important;opacity:1!important}
  .phero__form--inline .hero__form{display:block}
}



@media(max-width:991px){
  .phero__grid--diensten{display:block}
  .phero__form--diensten{margin-top:32px}
  .phero__form--diensten .advies-card--inv{box-shadow:0 12px 40px rgba(11,31,58,.14)}
}

.formcta__cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;min-height:180px}
.formcta__cta .btn--primary{width:100%;max-width:360px;justify-content:center}
.formcta__cta-note{margin:0;font-size:.9rem;color:var(--dim)}
.formcta__cta-note a{color:var(--navy);font-weight:600}

/* v5.15 — mobile hero form + desktop section polish (Aug 4 session) */
.hero-form-mobile{display:none;content-visibility:hidden;contain-intrinsic-size:0 400px}
@media(max-width:991px){
  .hero-form-mobile{display:block;content-visibility:visible;padding:28px 0 40px;background:linear-gradient(180deg,#f7f9fc 0%,#fff 100%)}
  .hero__form-col{content-visibility:hidden;contain-intrinsic-size:0 420px}
  .hero-form-mobile .advies-card{box-shadow:0 12px 40px rgba(11,31,58,.10)}
}

@media(min-width:992px){
  .revsec{padding:96px 0 88px}
  .revsec .center h2{font-size:clamp(1.9rem,2.5vw,2.4rem)}
  .revscore{margin-top:28px;font-size:1rem}
  .revmarq{margin-top:52px;padding:16px 0 12px}
  .revcard{flex:0 0 380px;padding:28px 28px 26px;border-radius:20px}
  .revcard blockquote{font-size:.95rem;-webkit-line-clamp:5}
  .proces--tl{max-width:860px;margin-left:auto;margin-right:auto;margin-top:46px}
  .proces--tl .pstap{padding:32px 0}
  .proces--tl .pstap h3{font-size:1.22rem;margin:8px 0 8px}
  .proces--tl .pstap p{font-size:.98rem;max-width:56ch}
  .helpgrid{grid-template-columns:repeat(3,1fr);gap:var(--kaart-gap);margin-top:52px}
  .bandfoto__logocard{padding:32px 44px 30px;margin-top:-64px;max-width:980px}
  .bandfoto__logocard-title{font-size:1.06rem;margin-bottom:22px}
  .bandfoto__logo{height:54px}
  .hero--v55 .badges{align-items:center}
  .badge__score{font-size:1.2rem}
  .sec-alt .center h2{font-size:clamp(1.9rem,2.5vw,2.4rem)}
  /* v5.12: diensten-hero compact — geen sticky (pariteit wpemi) */
  .phero__grid--diensten{grid-template-columns:minmax(0,1.14fr) minmax(260px,.80fr);gap:44px 48px}
  .phero__form--diensten{position:static;top:auto;align-self:start}
  .phero__form--diensten .advies-card{
    position:static;top:auto;max-height:none;overflow:visible;
    padding:20px 18px 18px;border-radius:16px;
    box-shadow:0 14px 40px rgba(0,0,0,.20);
  }
  .phero__form--diensten .advies-card__title{font-size:1.18rem;margin:0 0 14px;line-height:1.25}
  .phero__form--diensten .advies-card .form{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:9px;align-items:start}
  .phero__form--diensten .advies-card .form>div:nth-child(5),
  .phero__form--diensten .advies-card .form>div:last-of-type{grid-column:1/-1}
  .phero__form--diensten .advies-card .form label{font-size:.72rem;margin-bottom:3px}
  .phero__form--diensten .advies-card .form label span{display:none}
  .phero__form--diensten .advies-card .form input,
  .phero__form--diensten .advies-card .form textarea{padding:10px 12px;font-size:.88rem;border-radius:10px}
  .phero__form--diensten .advies-card .form textarea{min-height:48px;max-height:72px}
  .phero__form--diensten .advies-card .btn--primary{padding:12px 16px;font-size:.88rem;margin-top:0}
}

@media(min-width:1200px){
  .wrap{max-width:1240px}
  .hero--v55 .hero__grid{gap:48px 64px}
  /* gap volgt nu --kaart-gap */
  .helpgrid .mcard{padding:var(--kaart-pad-y) var(--kaart-pad-x)}
}

/* v5.16 — duplicate-form fix companion, mockup polish, dienst typography (Aug 4 session) */

/* Hero trust badges — side-by-side like mockup */
.badges--hero{align-items:flex-end;gap:28px 36px}
.badges--hero .badge{min-width:0}
.badges--hero .badge__top{margin-bottom:2px}
.badges--hero .badge__score{font-size:1.08rem;gap:6px}
.badges--hero .badge__sub{font-size:.8rem;text-decoration:underline;text-underline-offset:2px}
.hero__subline .ic{color:var(--goud-d)}
@media(min-width:992px){
  .badges--hero{gap:40px;margin-top:32px;padding-top:4px}
  .badges--hero .badge__score{font-size:1.14rem}
  .badges--hero .badge:not(:last-child){padding-right:36px;border-right:1px solid var(--line)}
}

/* Logocard — mockup: floating white card with gold accent */
.bandfoto__logocard{border-top:3px solid var(--goud);border-radius:18px}
@media(min-width:992px){
  .bandfoto__logocard{box-shadow:0 12px 40px rgba(11,31,58,.14),0 2px 8px rgba(11,31,58,.06)}
}

/* Dienst pages — readable prose + sticky form spacing */
.dienst-prose{max-width:54ch}
.dienst-prose h2{font-size:clamp(1.45rem,2.2vw,1.75rem);line-height:1.25;margin:0 0 4px}
.dienst-prose h2[style]{font-size:1.35rem!important;margin-top:28px!important}
.dienst-prose .muted{font-size:1rem;line-height:1.72;margin-top:14px}
.phero__grid--diensten{align-items:start}
.phero__form--diensten .advies-card{max-height:none;overflow:visible}
@media(min-width:992px){
  .phero{padding:88px 0 80px}
  .phero h1{font-size:clamp(2.05rem,3.2vw,2.85rem)}
  .phero p.lead{font-size:1.1rem;line-height:1.65;margin-top:16px}
  .phero:has(.phero__grid--diensten){padding:72px 0 48px}
  .phero__form--diensten{position:static;top:auto}
  .phero__form--diensten .advies-card{position:static;max-height:none;overflow:visible}
  .band__grid,.band__grid--dienst{align-items:start!important;grid-template-columns:1.12fr .88fr!important;gap:60px!important}
  .band__grid>*:last-child,.band__grid--dienst>*:last-child{position:sticky;top:104px;align-self:start}
  .band__grid>*:first-child,.band__grid--dienst>*:first-child{max-width:66ch}
  section:not(.hero):not(.phero):not(.band):not(.bandfoto) .band__grid,
  section:not(.hero):not(.phero):not(.band):not(.bandfoto) .band__grid--dienst{gap:56px 64px;align-items:start!important}
  .dienst-prose h2{font-size:1.72rem}
}

/* Section backgrounds — subtle navy/gold wash on alternating blocks */
section:not(.hero):not(.phero):not(.band):not(.bandfoto):not(.hero-form-mobile):nth-of-type(even){background:linear-gradient(180deg,#fafbfc 0%,#fff 100%)}

/* Lead-form success: één zichtbare melding op homepage (desktop vs mobiel slot) */
@media(max-width:640px){.lf-ok--desktop{display:none!important}}
@media(min-width:641px){.lf-ok--mobile{display:none!important}}
.topbar__tel{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#0B1F3A}
.topbar__tel .ic{color:#a8861d}
.ftr__social{display:flex;gap:12px;margin-top:14px}
.ftr__social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(201,162,39,.45);border-radius:50%;color:var(--goud);padding:0}
.ftr__social a:hover{background:rgba(201,162,39,.12);color:var(--goud-l)}
@media(max-width:640px){
  .topbar__tel .tb-txt{display:none}
}

.hero-form-success{padding:18px 0 0}
.hero-form-success .alert{margin:0}

/* v5.17 — contact/offerte form card polish, contact NAP (Aug 4 session) */
.phero--contact .phero__grid,.phero--offerte .phero__grid{align-items:start}
.contact__nap{margin-top:28px;display:grid;gap:12px}
.contact__nap p{display:flex;align-items:flex-start;gap:12px;margin:0;font:500 .98rem/1.45 Montserrat,sans-serif;color:var(--dim)}
.contact__nap a{color:var(--navy);font-weight:600}
.contact__nap a:hover{color:var(--goud-d)}
.phero--contact .phero__form,.phero--offerte .phero__form{background:transparent;padding:0;box-shadow:none}
.phero--offerte{background:linear-gradient(150deg,var(--navy) 0%,#0a1c34 100%);color:#fff;padding:72px 0 80px}
.phero--offerte .lead{color:#d8e0ec}
.phero--offerte h1{color:#fff}
.phero--offerte .kicker{color:var(--goud-l)}
@media(min-width:901px){
  .phero--contact .phero__form,.phero--offerte .phero__form{position:sticky;top:96px}
}

/* Skip-link (a11y — WCAG 2.4.1 bypass blocks). Markup staat in de header. */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:300;background:#fff;color:var(--navy);padding:10px 16px;border-radius:8px}


/* v5.18 — perf + FAQ polish, inline CSS consolidation (Aug 5) */
:root{--rev-speed:18s;--rev-speed2:24s}

/* FAQ accordion — navy/gold, consistent across all pages */
.faq{max-width:780px;margin:36px auto 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:0 24px;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:rgba(201,162,39,.35);box-shadow:0 6px 24px rgba(11,31,58,.08)}
.faq summary{font:600 1.02rem/1.45 Montserrat,sans-serif;color:var(--navy);padding:18px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s}
.faq summary:hover{color:var(--goud-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--goud-d);font-size:1.45rem;line-height:1;flex:0 0 auto;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{content:"\2212";color:var(--goud)}
.faq details[open] summary{border-bottom:1px solid var(--line);margin-bottom:0;padding-bottom:16px}
.faq p{color:var(--dim);padding:16px 0 18px;margin:0;font-size:.97rem;line-height:1.68}
@media(max-width:640px){
  .faq{margin-top:28px}
  .faq details{padding:0 16px;border-radius:12px}
  .faq summary{font-size:.96rem;padding:15px 0}
  .faq p{font-size:.93rem;padding:12px 0 16px}
}

/* Header inline → CSS: bandfoto desktop full-width overlay */
@media(min-width:761px){
.bandfoto__grid{display:block!important;grid-template-columns:none!important;position:relative;min-height:clamp(460px,42vw,560px)}
.bandfoto__beeld{position:absolute!important;inset:0!important;z-index:0!important;min-height:0!important;width:100%!important;height:100%!important}
.bandfoto__beeld img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:72% center!important}
.bandfoto__beeld::before{display:block!important;background:linear-gradient(90deg,rgba(9,24,46,.85) 0%,rgba(9,24,46,.6) 28%,rgba(9,24,46,.25) 46%,transparent 62%)!important}
.bandfoto__tekst{position:relative!important;z-index:2!important;display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;min-height:clamp(460px,42vw,560px);max-width:min(60%,600px);padding:56px 40px 56px max(22px,calc((100vw - 1180px)/2 + 22px))!important;pointer-events:none}
.bandfoto__tekst .rv{max-width:none}
.bandfoto__tekst h2{color:#fff!important;font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;font-size:clamp(1.6rem,2.5vw,2.25rem)!important;line-height:1.14!important;margin:0!important;text-align:left!important;text-shadow:0 2px 16px rgba(0,0,0,.5)!important}
.bandfoto__tekst h2 .accent{display:block!important;color:var(--goud-l)!important;margin-top:.08em}
.bandfoto__accent{display:block!important;width:3px!important;flex:0 0 3px!important;background:var(--goud)!important;border-radius:2px;align-self:stretch}
.bandfoto__body{display:flex!important;gap:14px!important;align-items:stretch!important;margin-top:18px!important}
.bandfoto__tekst p{color:rgba(255,255,255,.93)!important;font-family:Montserrat,sans-serif!important;font-size:clamp(.98rem,1.5vw,1.12rem)!important;line-height:1.5!important;margin:0!important;max-width:26em!important;text-align:left!important;text-shadow:0 1px 10px rgba(0,0,0,.45)!important}
.band.bandfoto{background:var(--navy)!important}
}

/* Header inline → CSS: mobile logo sizing */
@media(max-width:640px){
.hdr__in{gap:6px}
.hdr__brand img{height:42px!important;width:auto!important}
.hdr__brand .brand-naam{font-size:1rem;line-height:1.05}
.hdr__brand .brand-slogan{display:block!important;font-size:.62rem;letter-spacing:.01em;margin-top:3px}
.hdr__tel{display:inline-flex!important;margin-left:auto;width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;padding:0}
.hdr__tel .ic{width:18px;height:18px;margin:0}
.hdr__cta{display:none}
.hdr__burger{margin-left:6px!important;width:36px;flex:0 0 36px}
}

/* Footer inline → CSS: overlay mobile menu */
.ef-menu{position:fixed;inset:0;z-index:200;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.ef-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.ef-menu__bg{position:absolute;inset:0;background:rgba(6,16,32,.55)}
.ef-menu__panel{position:absolute;top:0;right:0;bottom:0;width:min(100%,440px);background:linear-gradient(180deg,#0b1f3a,#081428);display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(26px);transition:transform .32s ease;box-shadow:-14px 0 44px rgba(0,0,0,.4)}
.ef-menu.is-open .ef-menu__panel{transform:none}
.ef-menu__head{display:flex;align-items:center;gap:10px;background:#fff;padding:13px 15px;position:sticky;top:0;z-index:3}
.ef-menu__brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ef-menu__brand img{height:38px;width:auto;flex:0 0 auto}
.ef-menu__brand b{display:block;font:800 1rem/1 Playfair Display,serif;color:var(--navy);letter-spacing:.01em}
.ef-menu__brand i{display:block;font:600 .62rem/1.2 Montserrat,sans-serif;color:#6b7a90;letter-spacing:.05em;text-transform:uppercase;margin-top:3px;white-space:nowrap}
.ef-menu__phone{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--goud);color:var(--goud);flex:0 0 auto}
.ef-menu__x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:none;border:none;color:var(--navy);cursor:pointer;flex:0 0 auto}
.ef-menu__nav{display:flex;flex-direction:column;padding:4px 18px}
.ef-menu__nav a{display:flex;align-items:center;gap:15px;padding:15px 2px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.ef-menu__nav a:last-child{border-bottom:none}
.ef-mi__ic{flex:0 0 26px;color:var(--goud);display:inline-flex;align-items:center;justify-content:center}
.ef-mi__t{flex:1;min-width:0}
.ef-mi__t b{display:block;font:700 1.2rem/1.15 Playfair Display,serif;color:#fff}
.ef-mi__t i{display:block;font:400 .8rem/1.3 Montserrat,sans-serif;color:#9fb0c4;margin-top:2px}
.ef-mi__ch{flex:0 0 auto;color:var(--goud);display:inline-flex}
.ef-menu__nav a:hover .ef-mi__t b,.ef-menu__nav a:active .ef-mi__t b{color:var(--goud-l)}
.ef-menu__label{font:700 .72rem/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--goud);padding:18px 20px 10px}
.ef-menu__cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 18px}
.ef-mc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:14px 5px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.03)}
.ef-mc__ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(201,162,39,.14);color:var(--goud)}
.ef-mc b{font:700 .76rem/1.15 Montserrat,sans-serif;color:#fff;word-break:break-word}
.ef-mc i{font:400 .67rem/1.1 Montserrat,sans-serif;color:#9fb0c4}
.ef-menu__btns{display:flex;flex-direction:column;gap:10px;padding:18px}
.ef-menu__btn{display:flex;align-items:center;gap:10px;padding:15px 18px;border-radius:12px;font:700 1rem/1 Montserrat,sans-serif}
.ef-menu__btn .ef-ar{margin-left:auto}
.ef-menu__btn--gold{background:var(--goud);color:#0b1f3a}
.ef-menu__btn--out{background:none;border:1.5px solid rgba(201,162,39,.6);color:var(--goud)}
.ef-menu__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 28px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.ef-menu__usp{display:flex;align-items:center;gap:9px;font:600 .82rem/1.25 Montserrat,sans-serif;color:#cdd8e6}
.ef-menu__usp b{color:var(--goud);font-weight:700}
.ef-menu__usp>svg{color:var(--goud);flex:0 0 auto}
.ef-menu__rating{display:flex;align-items:center;gap:5px;font:400 .7rem/1.1 Montserrat,sans-serif;color:#9fb0c4;text-align:right}
.ef-menu__rating b{font-weight:800;font-size:.95rem;color:#fff}
.ef-menu__rating .stars{display:inline-flex}

/* Responsive audit fixes — tablet/mobile overflow */
html{overflow-x:clip}
.wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
@media(min-width:768px) and (max-width:991px){
  .hero--v55{padding:48px 0 56px}
  .phero{padding:64px 0 56px}
  .phero__grid{gap:32px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .helpgrid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:375px){
  .hero--v55 h1{font-size:clamp(1.65rem,8.5vw,2rem)}
  .revcard{flex-basis:280px;width:280px}
  .advies-card{padding:22px 18px 20px}
}

/* topbar overrides (was inline in header) */
.hero--v55 .hero__usps .chk svg{stroke:var(--goud)!important}
.topbar{background:#fff!important;color:#5a6675!important;border-bottom:1px solid #e5e9f0}
.topbar a{color:#0B1F3A!important}
.topbar a:hover{color:#a8861d!important}
.topbar .ic{color:#a8861d!important}

/* === Performance v2 (2026-08-05) === */
.stars-css{color:#FBBC04;font-size:.95em;letter-spacing:.04em;line-height:1}
.stars-css.revcard__stars{display:block;font-size:13px;margin-top:3px}
.stars-css.revscore__stars{font-size:17px}
.revsec{content-visibility:auto;contain-intrinsic-size:auto 520px}
.revtrack{will-change:auto}
.revmarq.is-paused .revtrack{animation-play-state:paused!important}
.revmarq:not(:hover) .revtrack{animation-play-state:running}
@media(max-width:760px){
  .revmarq-row+.revmarq-row{display:none}
  .revcard[data-clone]{display:none!important}
  .revtrack{animation:none!important;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 max(16px,calc((100vw - 1180px)/2 + 16px));gap:14px;scrollbar-width:none}
  .revtrack::-webkit-scrollbar{display:none}
  .revcard{scroll-snap-align:start;flex:0 0 min(300px,82vw)}
  .revmarq-fade{display:none}
}
@media(max-width:960px){.mnav{display:none!important}}

/* ─── Offerte-aanvraagpagina: balans tussen introtekst en formulier ───────────
   05-08-2026. Klacht: "formulier is lang en knikt links/rechts, hele opbouw
   moet beter". Gemeten: linkerkolom 364px hoog, formulierkolom 1320px — dus
   meters leegte naast een eindeloze kolom. De velden staan inmiddels in vaste
   paren (Gravity Forms #3); dit laat de introtekst meescrollen zodat hij naast
   het hele formulier zichtbaar blijft in plaats van bovenaan te blijven hangen.
   Alleen op desktop: onder elkaar op mobiel heeft sticky geen zin. */
@media (min-width: 992px) {
  body.page-id-3503 .phero__grid > *:first-child {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}

/* ===== 06-08: nieuwskaarten met foto ===================================
 * Dezelfde beeldverhouding voor elk bericht, anders oogt de rij ongelijk —
 * de bronbeelden lopen van 1.00 tot 1.78. De kaart houdt zijn eigen padding,
 * dus het beeld gaat er met een negatieve marge overheen naar de rand. */
.nieuws-kaart__beeld {
  display: block;
  margin: -22px -22px 16px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: #eef2f7;
}
.nieuws-kaart__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .32s ease;
}
.nieuws-kaart:hover .nieuws-kaart__beeld img { transform: scale(1.04); }

/* ─── Knop in de hero: gelijk op /emisfinance en /wpemi ──────────────────────
   05-08-2026. Beide sites laden deze stylesheet, maar in de Bricks-versie krijgt
   de knop er nog `bricks-button` bij, en die zette hem terug naar 15px/500 terwijl
   hij op de andere versie 1.08rem/600 was. Iets specifieker (a.btn--primary) zodat
   deze regel aan beide kanten wint zonder !important. */
.hero--v55 a.btn.btn--primary { font-size: 1.08rem; font-weight: 600; }

/* ===== FOOTER premium + mega logo (wpemi aug 2026) ====================== */
.ftr {
  position: relative;
  background:
    radial-gradient(130% 160% at 92% -8%, rgba(224,185,72,.28), transparent 58%),
    radial-gradient(90% 120% at 4% 108%, rgba(201,162,39,.12), transparent 52%),
    linear-gradient(168deg, #081525 0%, #0B1F3A 38%, #061222 100%) !important;
  box-shadow: inset 0 1px 0 rgba(240,208,120,.22);
  border-top: 1px solid rgba(201,162,39,.18);
}
.ftr::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 280px;
  pointer-events: none;
  background:
    radial-gradient(90% 120% at 78% 0%, rgba(255,220,130,.14), transparent 62%),
    linear-gradient(180deg, rgba(201,162,39,.06), transparent);
}
.ftr::after {
  content: "";
  display: block;
  height: 7px;
  width: 100%;
  background: linear-gradient(90deg, #8a6b14 0%, #C9A227 18%, #f0d078 50%, #C9A227 82%, #8a6b14 100%);
  box-shadow: 0 -2px 18px rgba(201,162,39,.45);
}
.ftr__grid, .ftr__base { position: relative; z-index: 1; }
.ftr h3, .ftr h4, .ftr .brxe-heading {
  color: #f2d98a !important;
  letter-spacing: .06em;
  text-shadow: 0 1px 16px rgba(201,162,39,.28);
}
.ftr a { transition: color .2s ease, text-shadow .2s ease; }
.ftr a:hover {
  color: #f8e6a8 !important;
  text-shadow: 0 0 12px rgba(201,162,39,.35);
}
.ftr .muted-inv { color: #d2dce9 !important; }
.ftr__base {
  border-top: 1px solid rgba(201,162,39,.32) !important;
  background: rgba(0,0,0,.22) !important;
  color: #b5c4d9 !important;
}
.ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand),
.ftr:not(.ftr--v2) a.ftr__logo-anim:not(.ftr__brand),
.ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim,
#brx-footer .brxe-image.ftr__logo-anim {
  display: block !important;
  width: min(680px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  line-height: 0 !important;
  overflow: visible !important;
  margin: 0 0 14px !important;
}
.ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand) img,
.ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim img,
#brx-footer .ftr__logo-anim:not(.ftr__brand) img,
#brx-footer .brxe-image.ftr__logo-anim img {
  width: min(680px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 32px rgba(201,162,39,.38)) drop-shadow(0 0 48px rgba(201,162,39,.16));
  animation: ef-logo-float 6s ease-in-out infinite;
}
.ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim:hover img {
  filter: drop-shadow(0 12px 40px rgba(240,208,120,.55)) drop-shadow(0 0 56px rgba(201,162,39,.28));
  transform: scale(1.02);
}
.ftr__grid > div:first-child,
.ftr .ftr__grid > .brxe-div:first-child {
  max-width: min(720px, 100%) !important;
}
@media (max-width: 900px) {
  .ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand) img,
  .ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim img {
    width: min(560px, 100%) !important;
  }
}
@media (max-width: 760px) {
  .ftr__grid { gap: 28px !important; }
  .ftr .ftr__grid > .brxe-div:first-child {
    text-align: center;
    max-width: 100% !important;
  }
  .ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand),
  .ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim {
    margin-inline: auto !important;
  }
  .ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand) img,
  .ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim img {
    width: min(520px, 94vw) !important;
    margin-inline: auto !important;
  }
}
@media (max-width: 480px) {
  .ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand) img,
  .ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim img {
    width: min(440px, 96vw) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand) img { animation: none !important; }
}

/* ===== Footer brand: icon + goud/wit (niet volledig wit logo) ================= */
.ftr:not(.ftr--v2) .ftr__brand {
  display: flex !important;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  text-decoration: none !important;
  margin: 0 0 18px !important;
  max-width: min(720px, 100%);
  animation: ef-logo-float 6s ease-in-out infinite;
}
.ftr:not(.ftr--v2) .ftr__brand-icon {
  width: clamp(96px, 14vw, 156px) !important;
  height: auto !important;
  flex: 0 0 auto;
  display: block !important;
  filter: drop-shadow(0 10px 28px rgba(201,162,39,.42)) drop-shadow(0 0 36px rgba(201,162,39,.14));
}
.ftr__brand-tekst { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ftr__brand-naam {
  font: 700 clamp(1.65rem, 3.8vw, 2.85rem)/1.05 'Montserrat', sans-serif;
  color: #fff !important;
  letter-spacing: .05em;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.ftr__brand-naam .goud { color: #e8c04a !important; text-shadow: 0 0 22px rgba(201,162,39,.35); }
.ftr__brand-slogan {
  margin-top: 8px;
  font: 500 clamp(.82rem, 1.6vw, 1rem)/1.4 'Montserrat', sans-serif;
  color: #c8d4e4 !important;
  letter-spacing: .03em;
}
.ftr:not(.ftr--v2) .ftr__brand:hover .ftr__brand-icon {
  filter: drop-shadow(0 12px 36px rgba(240,208,120,.55)) drop-shadow(0 0 48px rgba(201,162,39,.22));
  transform: scale(1.03);
}
.ftr__brand:hover .ftr__brand-naam .goud { color: #f5d878 !important; }

/* Premium footer — alle pagina's (#brx-footer) */
#brx-footer .ftr,
.ftr.itl-footer {
  position: relative;
  background:
    radial-gradient(130% 160% at 92% -8%, rgba(224,185,72,.28), transparent 58%),
    radial-gradient(90% 120% at 4% 108%, rgba(201,162,39,.12), transparent 52%),
    linear-gradient(168deg, #081525 0%, #0B1F3A 38%, #061222 100%) !important;
  box-shadow: inset 0 1px 0 rgba(240,208,120,.22);
  border-top: 1px solid rgba(201,162,39,.18);
}
#brx-footer .ftr::before,
.ftr.itl-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 280px;
  pointer-events: none;
  background:
    radial-gradient(90% 120% at 78% 0%, rgba(255,220,130,.14), transparent 62%),
    linear-gradient(180deg, rgba(201,162,39,.06), transparent);
}
#brx-footer .ftr::after,
.ftr.itl-footer::after {
  content: "";
  display: block;
  height: 7px;
  width: 100%;
  background: linear-gradient(90deg, #8a6b14 0%, #C9A227 18%, #f0d078 50%, #C9A227 82%, #8a6b14 100%);
  box-shadow: 0 -2px 18px rgba(201,162,39,.45);
}
#brx-footer .ftr h3,
#brx-footer .ftr h4,
#brx-footer .ftr .brxe-heading,
.ftr h3, .ftr h4, .ftr .brxe-heading {
  color: #f2d98a !important;
  letter-spacing: .06em;
  text-shadow: 0 1px 16px rgba(201,162,39,.28);
}
#brx-footer .ftr a:hover, .ftr a:hover { color: #f8e6a8 !important; }
#brx-footer .ftr .muted-inv, .ftr .muted-inv { color: #d2dce9 !important; }
#brx-footer .ftr__base, .ftr__base {
  border-top: 1px solid rgba(201,162,39,.32) !important;
  background: rgba(0,0,0,.22) !important;
  color: #b5c4d9 !important;
}
.ftr__grid > div:first-child,
.ftr .ftr__grid > .brxe-div:first-child { max-width: min(720px, 100%) !important; }

@media (max-width: 760px) {
  #brx-footer .ftr .ftr__grid > .brxe-div:first-child,
  .ftr__grid > div:first-child { text-align: center; max-width: 100% !important; }
  .ftr:not(.ftr--v2) .ftr__brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-inline: auto !important;
  }
  .ftr__brand-tekst { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ftr__brand, .ftr__brand-icon { animation: none !important; transition: none !important; }
}

/* ─── Kritische review 05-08-2026 ────────────────────────────────────────────
   1. "33 reviews" stond onderstreept maar is geen link (het is een <span>). Onder
      een sterrenscore leest onderstreepte tekst als "klik hier voor het bewijs" —
      dat wekt een verwachting die niet waargemaakt wordt. Onderstreping weg.
   2. Tikdoelen: hamburger was 36x42, de bel/mail/WhatsApp-iconen 30x30. De richtlijn
      is 44x44 en dit zijn juist de knoppen die op een telefoon het meest worden
      aangeraakt. Formaat blijft visueel gelijk; het RAAKVLAK groeit via padding.
   3. De eyebrow brak op mobiel met "& BV'S" alleen op regel 2. */
.hero__rating-count, .rating__count, .hero--v55 .rating a[href=""] { text-decoration: none; }
span.hero__rating-count, .hero--v55 span[class*="rating"] { text-decoration: none !important; }

/* v5.15 06-08 — regio-hero (.phero__form--diensten) op DONKERE hero: labels wit op navy (alleen zonder witte kaart) */
.phero__form--diensten:not(:has(.advies-card)) > h2,
.phero__form--diensten:not(:has(.advies-card)) h2{color:#fff!important}
.phero__form--diensten label,.phero__form--diensten .form label{color:#fff!important;opacity:.94}
.phero__form--diensten .form input,.phero__form--diensten .form textarea{background:#fff!important;color:var(--ink)!important;border:1px solid #d8dfe8!important}
.phero__form--diensten input::placeholder,.phero__form--diensten textarea::placeholder{color:#7c8797!important;opacity:1}

/* v5.16 06-08 — hero-form MET .advies-card: labels wit op DONKERE hero (titels → v5.20) */
.phero__form:has(.advies-card) label,
.phero__form:has(.advies-card) .form label{color:#fff!important}
.phero__form:has(.advies-card) .form input:not([type=hidden]),
.phero__form:has(.advies-card) .form textarea{background:#fff!important;color:#16233b!important;border:1px solid #d8dfe8!important}
.phero__form:has(.advies-card) .form input::placeholder,
.phero__form:has(.advies-card) .form textarea::placeholder{color:#6b7688!important;opacity:1!important}

/* v5.17 06-08 — DE ECHTE FIX: op desktop (>=992px) wordt de kale .phero__form transparant (regel ~679) → navy labels donker-op-donker op de hero. Hier: tekst WIT, velden WIT met donkere tekst + leesbare placeholder. Alleen desktop; mobiel blijft witte kaart. */
@media(min-width:992px){
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) h2,
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) label,
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) .form label{color:#fff!important}
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) .form input:not([type=hidden]),
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) .form textarea{background:#fff!important;color:#16233b!important;border:1px solid #d8dfe8!important}
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) .form input::placeholder,
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) .form textarea::placeholder{color:#6b7688!important;opacity:1!important}
}


/* v5.18 07-08 — FIX wit-op-wit labels: .advies-card / .phero__form--diensten is ALTIJD een
   WITTE kaart (background:#fff, regel 644) op ELK breakpoint. v5.15/v5.16 zetten de labels op
   #fff -> labels onzichtbaar (wit op wit), zowel mobiel als desktop (bevestigd met screenshots
   boekhouder-den-haag 07-08). Labels terug naar navy. De inputs (wit veld + donkere tekst +
   donkere placeholder) waren al goed en blijven ongemoeid. */
.phero__form--diensten label,.phero__form--diensten .form label,
.phero__form:has(.advies-card) label,.phero__form:has(.advies-card) .form label,
.advies-card .form label{color:var(--navy)!important;opacity:1!important}

/* v5.20 08-08 — wit-op-wit titels in witte advies-form (v5.15/v5.16 zette h2 op #fff in witte kaart) */
.phero__form--diensten .advies-card__title,
.phero__form--diensten .advies-card h2,
.phero__form:has(.advies-card) .advies-card__title,
.phero__form:has(.advies-card) h2.advies-card__title,
.advies-card h2.advies-card__title{color:#0B1F3A!important;opacity:1!important}

/* v5.15 — mobiel hero 1 regel + trustline; klantlogo's uit (aug 2026) */
.hero__trust{margin:8px 0 0;font:700 clamp(.54rem,2.2vw + .3rem,.92rem)/1.25 Montserrat,sans-serif;color:var(--navy);white-space:nowrap;letter-spacing:.02em}
@media(max-width:760px){.hero__trust{margin:6px 0 2px;font-size:clamp(.5rem,2.35vw + .24rem,.78rem)}}
/* 10-08: klantlogo.s + Trustpilot HEROPGENOMEN op uitdrukkelijk verzoek eigenaar
   (waren verborgen "tot transparante logo.s + schriftelijke toestemming per klant").
   LET OP: zorg per klant dat je toestemming hebt om hun logo te tonen. */

/* ══ v5.19 FOOTER HERONTWERP (aug 2026) — ftr--v2, geen klantlogo's ═════════ */
.ftr.ftr--v2 {
  position: relative;
  padding: 48px 0 0;
  margin-top: 44px;
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(224,185,72,.22), transparent 55%),
    radial-gradient(80% 100% at 0% 100%, rgba(201,162,39,.1), transparent 50%),
    linear-gradient(168deg, #081525 0%, #0B1F3A 42%, #061222 100%) !important;
  border-top: 1px solid rgba(201,162,39,.2);
  box-shadow: inset 0 1px 0 rgba(240,208,120,.18);
}
.ftr.ftr--v2::before { display: none !important; }
.ftr.ftr--v2::after {
  content: "";
  display: block;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, #8a6b14, #C9A227 20%, #f0d078 50%, #C9A227 80%, #8a6b14);
}
.ftr--v2 .ftr__shell { position: relative; z-index: 1; }
.ftr--v2 .ftr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 44px);
  padding-bottom: 36px;
}
.ftr--v2 .ftr__heading {
  margin: 0 0 14px;
  font: 600 .95rem/1.2 'Montserrat', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f2d98a !important;
}
.ftr--v2 .ftr__nav { display: flex; flex-direction: column; gap: 2px; }
.ftr--v2 .ftr__nav a,
.ftr--v2 .ftr__contact a {
  display: block;
  padding: 5px 0;
  font-size: .92rem;
  color: #c5d0de !important;
  text-decoration: none;
}
.ftr--v2 .ftr__nav a:hover,
.ftr--v2 .ftr__contact a:hover { color: #f8e6a8 !important; }
.ftr--v2 .ftr__contact p {
  margin: 0;
  padding: 5px 0;
  font-size: .92rem;
  color: #c5d0de;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ftr--v2 .ftr__contact .ic { flex: 0 0 auto; margin-top: 2px; color: #e8c04a; }
.ftr--v2 .ftr__kvk { opacity: .85; font-size: .86rem !important; margin-top: 6px !important; }

/* Brand — compact icoon + tekst, NOOIT navy-icoon op donker */
.ftr--v2 .ftr:not(.ftr--v2) .ftr__brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
  max-width: 100% !important;
  width: auto !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  animation: none !important;
}
.ftr--v2 .ftr__brand-icon {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 4px 14px rgba(201,162,39,.35));
  animation: none !important;
}
.ftr--v2 .ftr__brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ftr--v2 .ftr__brand-name {
  display: block;
  font: 700 1.35rem/1.05 'Montserrat', sans-serif;
  color: #fff !important;
  letter-spacing: .04em;
}
.ftr--v2 .ftr__brand-name .goud { color: #e8c04a !important; }
.ftr--v2 .ftr__brand-tag {
  display: block;
  font: 500 .78rem/1.35 'Montserrat', sans-serif;
  color: #b8c8da !important;
  letter-spacing: .04em;
}
.ftr--v2 .ftr__intro {
  margin: 0 0 10px;
  font-size: .9rem;
  line-height: 1.55;
  color: #d2dce9;
  max-width: 28em;
}
.ftr--v2 .ftr__hours {
  margin: 0 0 14px;
  font-size: .88rem;
  color: #b8c8da;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ftr--v2 .ftr__social { display: flex; gap: 10px; }
.ftr--v2 .ftr__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(201,162,39,.4);
  border-radius: 50%;
  color: #e8c04a;
  padding: 0;
}
.ftr--v2 .ftr__social a:hover { background: rgba(201,162,39,.12); }

.ftr--v2 .ftr__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(201,162,39,.28);
  font-size: .84rem;
  color: #9aabb9;
}
.ftr--v2 .ftr__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ftr--v2 .ftr__legal a {
  color: #9aabb9 !important;
  text-decoration: none;
  padding: 0;
  display: inline;
  font-size: .84rem;
}
.ftr--v2 .ftr__legal a:hover { color: #f8e6a8 !important; }

/* Verberg oude mega-logo / klantlogo resten */
.ftr--v2 .ftr__logo-anim,
.ftr--v2 .bandfoto__logocard,
.ftr--v2 .logoband,
.ftr--v2 .logotrack { display: none !important; }

@media (max-width: 980px) {
  .ftr--v2 .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr--v2 .ftr__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ftr--v2 { padding-top: 36px; }
  .ftr--v2 .ftr__grid { grid-template-columns: 1fr; gap: 28px; }
  .ftr--v2 .ftr__col--brand { text-align: center; }
  .ftr--v2 .ftr__brand {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    text-align: left;
  }
  .ftr--v2 .ftr__brand-text { align-items: flex-start; }
  .ftr--v2 .ftr__intro { margin-inline: auto; }
  .ftr--v2 .ftr__hours { justify-content: center; }
  .ftr--v2 .ftr__social { justify-content: center; }
  .ftr--v2 .ftr__base { flex-direction: column; text-align: center; }
  .ftr--v2 .ftr__legal { justify-content: center; }
}
/* v5.20 — footer v2 polish: win van legacy mega-logo + geen slogan */
.ftr:not(.ftr--v2) .ftr__brand-icon { /* legacy Bricks only */ }
.ftr.ftr--v2 .ftr__brand,
.ftr.ftr--v2 a.ftr:not(.ftr--v2) .ftr__brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  max-width: 100% !important;
  animation: none !important;
  transform: none !important;
}
.ftr.ftr--v2 .ftr__brand-icon,
.ftr.ftr--v2 img.ftr__brand-icon {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex: 0 0 48px !important;
  margin: 0 !important;
  animation: none !important;
  transform: none !important;
}
.ftr.ftr--v2 .ftr:not(.ftr--v2) .ftr__brand:hover .ftr__brand-icon { transform: none !important; }
.ftr.ftr--v2 .ftr__brand-text {
  display: flex;
  align-items: center;
  min-width: 0;
}
.ftr.ftr--v2 .ftr__brand-name {
  font: 700 1.2rem/1 'Montserrat', sans-serif !important;
  white-space: nowrap;
}
.ftr.ftr--v2 .ftr__brand-tag { display: none !important; }
.ftr.ftr--v2::before { display: none !important; content: none !important; }

@media (max-width: 640px) {
  .ftr.ftr--v2 .ftr__col--brand { text-align: left; }
  .ftr.ftr--v2 .ftr__brand {
    justify-content: flex-start !important;
    margin-inline: 0 !important;
  }
}
/* v5.21 — mobiel: contact-rondjes verder van rand + meer ruimte ertussen */
@media (max-width: 760px) {
  .topbar .wrap.topbar__in,
  .topbar .topbar__in {
    padding-left: max(22px, env(safe-area-inset-left)) !important;
    padding-right: max(22px, env(safe-area-inset-right)) !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .topbar__spacer {
    flex: 1 1 16px !important;
    min-width: 16px !important;
  }
  .topbar a,
  .topbar .topbar__tel,
  .topbar__tel {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
  }
  .topbar__in > span:first-child {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 38%;
    gap: 5px;
    font-size: .72rem;
  }
  .topbar .tb-kort { font-size: .68rem; letter-spacing: -.01em; }
}

@media (max-width: 480px) {
  .topbar .wrap.topbar__in,
  .topbar .topbar__in {
    padding-left: max(26px, env(safe-area-inset-left)) !important;
    padding-right: max(26px, env(safe-area-inset-right)) !important;
    gap: 18px !important;
  }
  .topbar__spacer { min-width: 20px !important; }
  .topbar a,
  .topbar .topbar__tel,
  .topbar__tel {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  /* uren: alleen klok-icoon in rondje — meer ruimte voor contact-iconen */
  .topbar__in > span:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(201,162,39,.45);
    border-radius: 50%;
    box-sizing: border-box;
    overflow: visible;
  }
  .topbar__in > span:first-child .tb-txt,
  .topbar__in > span:first-child .tb-kort { display: none !important; }
}

@media (max-width: 640px) {
  .ftr.ftr--v2 .wrap.ftr__shell,
  .ftr--v2 .ftr__shell {
    padding-left: max(24px, env(safe-area-inset-left)) !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
  }
  .ftr--v2 .ftr__social {
    gap: 16px !important;
    padding: 6px 4px 2px;
    justify-content: flex-start !important;
  }
  .ftr--v2 .ftr__social a {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
  }
  .ftr--v2 .ftr__contact {
    padding-inline: 4px;
  }
  .ftr--v2 .ftr__contact p {
    gap: 14px;
    padding: 8px 0;
  }
  .hdr__in {
    gap: 10px !important;
  }
  .hdr__tel {
    margin-right: 4px !important;
  }
}

/* === v5.15 — Gravity Forms leesbaar in witte formulierkaart (offerte/contact) ===
   GF's eigen thema zette labels/titel/velden wit; in de witte .phero__form-kaart = onzichtbaar
   (offerte-aanvraag = 38 velden). Bricks-forms (.hero__form) blijven ongemoeid: die zijn al
   goed (wit op de donkere hero desktop / navy op witte kaart mobiel). */
.gform_wrapper{--gf-ctrl-label-color-primary:var(--navy);--gf-ctrl-label-color-secondary:var(--navy);--gf-color-primary:var(--goud)}
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label,
.gform_wrapper .gform_title,
.gform_wrapper .gsection_title,
.gform_wrapper .gchoice label,
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .ginput_container label,
.gform_wrapper .gfield_consent_label,
.gform_wrapper .gform-field-label{color:var(--navy)!important}
.gform_wrapper .gform_description,
.gform_wrapper .gfield_description,
.gform_wrapper .gsection_description{color:#4b5563!important}
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required *{color:var(--goud)!important}
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select{color:var(--ink)!important}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{color:#98a2b3!important;opacity:1}
/* Vangnet: mocht een GF-formulier ooit in de donkere transparante hero-variant staan -> wit behouden */
.phero__form--inline .gform_wrapper .gfield_label,
.phero__form--diensten .gform_wrapper .gfield_label,
.phero__form--inline .gform_wrapper .gform_title,
.phero__form--diensten .gform_wrapper .gform_title,
.phero__form--inline .gform_wrapper label,
.phero__form--diensten .gform_wrapper label{color:#fff!important}


/* === v5.15d — Offerte/contact Gravity-Form op een echte witte kaart + navy labels ===
   De .phero__form blijft op desktop transparant (r.679) en meerdere !important-regels
   (r.1321, .offerte-gf, .phero__form label) maakten alle labels wit -> onleesbaar zodra het
   hoge formulier onder de donkere hero op wit uitkomt. :has() (v5.15c) pakte niet in de cascade.
   Oplossing zonder :has: geef de .gform_wrapper ZELF een witte kaart (dekt de hero achter het
   formulier) en zet alle labels navy met genoeg specificiteit om r.1321 (0,3,1) te verslaan.
   Alleen offerte + contact hebben een Gravity-Form binnen .phero__form; home/regio/diensten
   gebruiken Bricks-forms (.hero__form) en blijven ongemoeid. */
.phero .phero__form .gform_wrapper{
  background:#fff!important;border-radius:16px!important;padding:26px 24px!important;
  box-shadow:var(--shadow)!important;
}
.phero .phero__form .gform_wrapper .gfield_label,
.phero .phero__form .gform_wrapper .gform_title,
.phero .phero__form .gform_wrapper .gsection_title,
.phero .phero__form .gform_wrapper .gchoice label,
.phero .phero__form .gform_wrapper .ginput_container label,
.phero .phero__form .gform_wrapper .gfield_consent_label,
.phero .phero__form .gform_wrapper label{color:var(--navy)!important}
.phero .phero__form .gform_wrapper .gfield_required{color:var(--goud)!important}
.phero .phero__form .gform_wrapper .gfield_description,
.phero .phero__form .gform_wrapper .gform_description{color:#4b5563!important}
.phero .phero__form .gform_wrapper input:not([type=submit]):not([type=button]),
.phero .phero__form .gform_wrapper textarea,
.phero .phero__form .gform_wrapper select{color:var(--ink)!important;background:#fff!important;border:1px solid #d8dfe8!important}

/* === v5.16 — merkconsistentie: oranje accenten → merkgoud (10-08) ===
   Locatie-/service-pagina's gebruikten off-brand fel oranje; DB-swap (#fc4e00/#f48020 → #c9a227)
   maakte badge/diagonaal/telefoonknop goud. Restpunten hier: Gravity-Forms-knop (oranje uit
   GF/stla, niet uit Bricks-DB) + badges met witte tekst op goud (contrast). */
.gform_wrapper .gform_button,
.gform_wrapper input[type=submit],
.gform_footer .gform_button,
.gform_footer input[type=submit]{
  background:var(--goud)!important;background-image:none!important;color:var(--navy)!important;
  border:1px solid var(--goud)!important;font-weight:700!important;
}
.gform_wrapper .gform_button:hover,
.gform_footer .gform_button:hover{background:var(--goud-l)!important;color:var(--navy)!important}
/* gouden pill-badges ("Onze Diensten" e.d.): navy tekst i.p.v. wit voor leesbaarheid */
#brxe-yazcll,#brxe-hwmlvf{color:var(--navy)!important}

/* === v5.17 — plain .phero__form (regio/offerte/contact) = WITTE kaart op mobiel (10-08) ===
   De titel .serif + form-labels kregen wit (bedoeld voor de transparante kaart op de donkere hero,
   desktop). Op mobiel is die kaart wit (regel 251) → wit-op-wit titel "Maak direct een afspraak".
   .phero__form--inline (kern-diensten) had dit al via r.755; de plain variant (regio/offerte/contact)
   niet. Alleen mobiel; desktop blijft wit-op-donkere-hero. */
@media(max-width:991px){
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) .serif,
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) > h2,
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) > h3,
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) .hero__form label,
  .phero__form:not(.phero__form--diensten):not(.phero__form--inline) .form label{color:var(--navy)!important}
}

/* === v5.18 — reviews mobiel: TWEE rijen zichtbaar, tegengestelde richting (10-08) ===
   Regel 1028 verborg de 2e rij ≤760px; de engine (v1.5.0) laat even/oneven rijen de andere
   kant op scrollen. Hier zetten we de 2e rij weer zichtbaar op mobiel + houden de JS-marquee
   soepel (geen manuele overflow-scroll die ermee botst). */
@media(max-width:760px){
  .revsec .revmarq-row + .revmarq-row{display:block!important}
  .revsec .revtrack{overflow:visible!important;width:max-content!important;scroll-snap-type:none!important;padding:0!important}
}

/* === v5.19 — .band__grid (o.a. over-ons) stapelt op mobiel (10-08) ===
   Was een 2-koloms-grid met VASTE px-breedtes (≈198px + 190px + gap) → rechter kolom (kaarten)
   viel buiten beeld op mobiel. Op smal scherm 1 kolom (tekst boven, kaarten eronder). */
@media(max-width:760px){
  .band__grid{grid-template-columns:1fr!important;gap:22px!important}
}
/* contrast-fix 20260811153546 */