/*
Theme Name: Zadeladvies Charmaine
Theme URI: https://zadeladviescharmaine.nl
Author: YourWebsites
Author URI: https://www.yourwebsites.eu
Description: Blokthema voor Zadeladvies Charmaine. De vormgeving komt uit de goedgekeurde statische site; dit thema neemt die CSS ongewijzigd over.
Version: 1.4.3
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zadeladvies
*/

/* ZADELADVIES-VERSIE: 1.4.3 — Google-reviews, dubbele blokken opgeruimd */

:root{
  --navy:#1f274b;
  --navy-deep:#151b38;
  --navy-soft:#2b3560;
  --gold:#f7b81f;
  --gold-deep:#c8961a;
  --gold-soft:#fbd777;
  --cream:#faf6ee;
  --paper:#fffdf8;
  --ink:#1f274b;
  --serif:"Source Serif 4",Georgia,serif;
  --script:"Italianno",cursive;
  --sans:"Figtree",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Koppen die de structuur compleet maken voor zoekmachines en screenreaders,
   zonder dat ze het ontwerp raken. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Elke <img> draagt width/height uit het bestand, zodat de browser de ruimte
   alvast reserveert (geen layout shift). Zonder height:auto zou dat attribuut
   de foto uitrekken op plekken waar de CSS alleen de breedte regelt.
   Elke class-regel hieronder die wél een hoogte zet, wint van deze regel. */
img{max-width:100%;height:auto}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6}
::selection{background:var(--gold);color:var(--navy)}

/* grain overlay */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* scroll progress */
#progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));width:0;z-index:200}

/* ---------- Nav ---------- */
nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,27,56,.55),transparent);pointer-events:none;opacity:1;transition:opacity .4s;z-index:-1}
nav.scrolled::before{opacity:0}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 4vw;transition:background .4s,box-shadow .4s,padding .4s}
nav.scrolled{background:rgba(31,39,75,.97);box-shadow:0 4px 30px rgba(21,27,56,.35);padding:.7rem 4vw}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:56px;width:auto;display:block}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.92rem;font-weight:500;letter-spacing:.04em;position:relative;transition:color .3s;white-space:nowrap}
.nav-links a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--gold);transition:width .3s}
.nav-links a:not(.cta):hover{color:#fff}
.nav-links a:not(.cta):hover::after{width:100%}
.cta{background:var(--gold);color:var(--navy)!important;padding:.65rem 1.5rem;border-radius:999px;font-weight:600;transition:transform .3s,box-shadow .3s}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(247,184,31,.4)}
.hamburger{display:none;background:none;border:none;cursor:pointer;z-index:110}
.hamburger span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,27,56,.72) 0%,rgba(31,39,75,.28) 26%,rgba(31,39,75,.30) 46%,rgba(21,27,56,.92) 100%),linear-gradient(100deg,rgba(21,27,56,.78) 0%,rgba(21,27,56,.45) 34%,rgba(21,27,56,0) 62%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 4vw 10vh}
.hero-kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1.2rem}
.hero-kicker::before{content:"";width:36px;height:1px;background:var(--gold)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.08;max-width:16ch}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .w span{display:inline-block;transform:translateY(110%);animation:riseup 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 em{font-family:var(--script);font-style:normal;font-weight:400;color:var(--gold);font-size:1.25em;line-height:.8}
@keyframes riseup{to{transform:none}}
.hero p{margin-top:1.4rem;max-width:46ch;font-size:1.08rem;color:rgba(255,255,255,.86);font-weight:300}
.hero-actions{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;font-size:.95rem;padding:.95rem 2rem;border-radius:999px;transition:transform .3s,box-shadow .3s,background .3s;border:none;cursor:pointer;font-family:var(--sans)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(247,184,31,.45)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.6);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-hint::after{content:"";width:1px;height:44px;background:linear-gradient(180deg,var(--gold),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

/* ---------- Marquee ---------- */
.marquee{background:var(--gold);color:var(--navy);overflow:hidden;padding:.85rem 0;position:relative;z-index:3;box-shadow:0 10px 30px rgba(21,27,56,.25)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:slide 28s linear infinite}
.marquee span{font-family:var(--serif);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:3rem}
.marquee span::after{content:"⬡";font-size:.8rem;color:var(--navy)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- USP strip ---------- */
.usp{background:var(--navy);color:#fff;padding:4rem 4vw 3rem;position:relative}
.usp-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.usp-item{display:flex;gap:1rem;align-items:flex-start}
.usp-item .hex{flex-shrink:0;width:46px;height:auto;transition:transform .5s cubic-bezier(.3,1.6,.4,1)}
.usp-item:hover .hex{transform:rotate(-12deg) scale(1.12)}
.usp-item h3{font-family:var(--serif);font-size:1.02rem;font-weight:600;margin-bottom:.2rem}
.usp-item p{font-size:.85rem;color:rgba(255,255,255,.65);line-height:1.5}

/* ---------- Sections ---------- */
section{padding:7rem 4vw}
.wrap{max-width:1200px;margin:0 auto}
.kicker{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.kicker::before{content:"";width:32px;height:1px;background:var(--gold)}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.15;color:var(--navy)}
h2 em{font-family:var(--script);font-style:normal;font-weight:400;color:var(--gold-deep);font-size:1.3em;line-height:.7}

/* Over */
.over{background:var(--cream)}
.over .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:5rem;align-items:center}
.over-img{position:relative}
.over-img .frame{border-radius:2px;overflow:hidden;box-shadow:0 30px 60px rgba(31,39,75,.22)}
.over-img img{width:100%;display:block;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.over-img .frame:hover img{transform:scale(1.05)}
.over-img .badge{position:absolute;bottom:-28px;right:-18px;background:var(--navy);color:#fff;padding:1.2rem 1.6rem;border-radius:2px;box-shadow:0 16px 40px rgba(31,39,75,.35)}
.over-img .badge strong{font-family:var(--script);font-size:2.2rem;color:var(--gold);display:block;line-height:.9}
.over-img .badge span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.over-text p{margin-top:1.3rem;color:#4a5170;font-size:1.02rem;font-weight:300;max-width:52ch}
.ondertekening{display:flex;align-items:center;gap:1.2rem;margin-top:2.4rem}
.ondertekening::before{content:"";width:52px;height:1px;background:var(--gold);flex-shrink:0}
.ondertekening .groet{display:block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#a89f80;margin-bottom:-.35rem}
.ondertekening .naam{font-family:var(--script);font-size:3rem;color:var(--navy);line-height:1}
.ondertekening .rol{display:block;font-size:.8rem;color:#8a8465;margin-top:-.2rem}

/* Stats */
.stats{background:var(--cream);padding-top:0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;border-top:1px solid #e7dfc9;padding-top:3.5rem}
.stat{text-align:center}
.stat .n{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4vw,3.4rem);color:var(--navy);line-height:1}
.stat .n em{color:var(--gold-deep);font-style:normal}
.stat p{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8465;margin-top:.5rem}

/* Werkwijze */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:3.5rem;position:relative}
.steps-grid::before{content:"";position:absolute;top:64px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent);opacity:.5}
.step{background:var(--paper);border:1px solid #ece5d4;padding:2.2rem 1.8rem;border-radius:2px;position:relative;transition:transform .4s,box-shadow .4s,border-color .4s}
.step:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(31,39,75,.14);border-color:var(--gold)}
.step .num{font-family:var(--script);font-size:3.4rem;color:var(--gold);line-height:.8;display:block}
.step h3{font-family:var(--serif);font-size:1.15rem;margin:1rem 0 .5rem;color:var(--navy)}
.step p{font-size:.9rem;color:#5b6180;font-weight:300}

/* Diensten */
.diensten{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.diensten::before{content:"";position:absolute;right:-140px;top:-140px;width:480px;height:480px;background:radial-gradient(circle,rgba(247,184,31,.14),transparent 65%)}
.diensten h2{color:#fff}
.diensten .kicker{color:var(--gold)}
.dienst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.5rem}
.dienst{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);padding:2.4rem 2rem;border-radius:2px;transition:background .4s,transform .4s,border-color .4s;position:relative;overflow:hidden}
.dienst::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold);transition:width .5s cubic-bezier(.2,.6,.2,1)}
.dienst:hover{background:rgba(247,184,31,.09);border-color:rgba(247,184,31,.5);transform:translateY(-6px)}
.dienst:hover::after{width:100%}
.dienst .hex{width:52px;height:auto;margin-bottom:1.4rem}
.dienst h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:.6rem}
.dienst p{font-size:.92rem;color:rgba(255,255,255,.7);font-weight:300}
.dienst .price{margin-top:1.4rem;font-family:var(--serif);color:var(--gold);font-size:1.05rem}

/* Tarieven */
.tarieven{background:var(--paper)}
.tarieven .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:start}
.prijslijst{margin-top:2.2rem}
.prijslijst h3{font-family:var(--serif);font-size:1.15rem;color:var(--navy);margin:1.8rem 0 .6rem}
.prijslijst h3:first-child{margin-top:0}
.prijsrij{display:flex;justify-content:space-between;gap:1.5rem;padding:.65rem 0;border-bottom:1px solid #ece5d4;font-size:.95rem;color:#4a5170}
.prijsrij strong{color:var(--navy);font-weight:600;white-space:nowrap;font-family:var(--serif)}
.prijs-note{margin-top:1.4rem;font-size:.82rem;color:#8a8465;max-width:56ch}
.tijden{background:var(--navy);color:#fff;padding:2.4rem 2.2rem;border-radius:2px;box-shadow:0 24px 60px rgba(31,39,75,.18);position:sticky;top:100px}
.tijden h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:1.2rem}
.tijden h3 em{font-family:var(--script);font-style:normal;font-weight:400;color:var(--gold);font-size:1.3em}
.tijdrij{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.9rem}
.tijdrij span:first-child{font-weight:600}
.tijdrij span:last-child{color:rgba(255,255,255,.75);text-align:right}
.tijden p{margin-top:1.2rem;font-size:.85rem;color:rgba(255,255,255,.7)}

/* Kennis / misvattingen */
.kennis{background:var(--paper)}
.kennis .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:start}
.mythe{border-bottom:1px solid #ece5d4;padding:1.6rem 0}
.mythe .m-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:1rem}
.mythe .m-q h3{font-family:var(--serif);font-size:1.12rem;color:var(--navy);font-weight:600}
.mythe .m-q .plus{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold-deep);display:grid;place-items:center;font-size:1.2rem;transition:transform .4s,background .4s,color .4s}
.mythe.open .m-q .plus{transform:rotate(45deg);background:var(--gold);color:var(--navy)}
.mythe .m-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.6,.2,1)}
.mythe .m-a p{padding:1rem 0 .4rem;color:#4a5170;font-weight:300;font-size:.95rem;max-width:56ch}

/* Reviews */
.reviews{background:var(--cream);overflow:hidden}
.reviews .head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.rev-nav{display:flex;gap:.6rem}
.rev-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--navy);background:transparent;color:var(--navy);font-size:1.1rem;cursor:pointer;transition:background .3s,color .3s,transform .3s}
.rev-nav button:hover{background:var(--navy);color:var(--gold);transform:translateY(-2px)}
.rev-track{display:flex;gap:1.6rem;margin-top:3rem;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.review{flex:0 0 calc(33.333% - 1.1rem);background:#fff;border:1px solid #ece5d4;border-radius:2px;padding:2.2rem;display:flex;flex-direction:column;gap:1.1rem;box-shadow:0 14px 34px rgba(31,39,75,.07)}
.review .stars{color:var(--gold);letter-spacing:.2em;font-size:.95rem}
.review p{font-size:.95rem;color:#4a5170;font-weight:300;font-style:italic;flex:1}
.review .who{display:flex;align-items:center;gap:.8rem}
.review .who .av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-family:var(--serif);font-weight:600}
.review .who strong{font-size:.92rem;color:var(--navy);display:block;line-height:1.2}
.review .who span{font-size:.78rem;color:#8a8465}

/* Quote band */
.quote-band{background:var(--navy);text-align:center;position:relative;overflow:hidden}
.quote-band::before{content:"⬡";position:absolute;font-size:26rem;color:rgba(247,184,31,.05);left:-4rem;top:50%;transform:translateY(-50%)}
.quote-band blockquote{font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.1rem);font-weight:400;font-style:italic;color:#fff;max-width:28ch;margin:0 auto;line-height:1.4;position:relative}
.quote-band .mark{font-family:var(--script);font-size:5rem;color:var(--gold);line-height:.4;display:block;margin-bottom:1rem}
.quote-band cite{display:block;margin-top:1.6rem;font-style:normal;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* Contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.contact-form{background:#fff;border:1px solid #ece5d4;padding:2.6rem;border-radius:2px;box-shadow:0 24px 60px rgba(31,39,75,.1)}
.contact-form label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin:1.2rem 0 .4rem}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:.85rem 1rem;border:1px solid #ddd5c2;border-radius:2px;font-family:var(--sans);font-size:.95rem;background:var(--paper);transition:border-color .3s,box-shadow .3s}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(247,184,31,.18)}
/* Leeftijdsvoorwaarde. Eerst de regel zelf, dan een verplicht vinkje — een
   passieve mededeling voorkomt niet dat er een 15-jarige alleen op stal staat. */
.contact-form .form-note{margin-top:1.8rem;background:var(--paper);border-left:2px solid var(--gold);
  padding:1rem 1.2rem;font-size:.88rem;line-height:1.55;color:#5c5744}
.contact-form .form-note strong{color:var(--navy)}
.contact-form .form-check{display:flex;align-items:flex-start;gap:.7rem;margin-top:1rem;
  font-size:.85rem;line-height:1.5;font-weight:400;letter-spacing:normal;text-transform:none;color:#5c5744;cursor:pointer}
.contact-form .form-check input{width:18px;height:18px;flex-shrink:0;margin-top:.1rem;accent-color:var(--gold-deep);cursor:pointer}
.contact-form button{margin-top:1.8rem;width:100%}
.contact-info p{color:#4a5170;font-weight:300;margin-top:1.2rem;max-width:44ch}
.contact-lines{margin-top:2.4rem;display:grid;gap:1.1rem}
.contact-lines a{display:flex;align-items:center;gap:.9rem;color:var(--navy);text-decoration:none;font-weight:500;transition:color .3s}
.contact-lines a:hover{color:var(--gold-deep)}
.contact-lines .dot{width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-size:1rem;flex-shrink:0}

/* Footer */
footer{background:var(--navy-deep);color:rgba(255,255,255,.6);padding:3.5rem 4vw 2rem}
.foot-grid{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem}
.foot-grid .brand-text .b1{font-size:1.1rem}
.foot-links{display:flex;gap:1.2rem 2rem;flex-wrap:wrap;justify-content:center}
.foot-links a{color:inherit;text-decoration:none;transition:color .3s}
.foot-links a:hover{color:var(--gold)}
.foot-bottom{max-width:1200px;margin:2.5rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
/* Credits staan onder de wettelijke regel en zijn bewust stiller: ze horen erbij,
   maar mogen niet met haar eigen gegevens concurreren. */
.foot-credit{max-width:1200px;margin:1.1rem auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:.4rem 1.6rem;font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.34)}
.foot-credit a{color:rgba(255,255,255,.52);text-decoration:none;border-bottom:1px solid rgba(247,184,31,.3);transition:color .3s,border-color .3s}
.foot-credit a:hover{color:var(--gold);border-color:var(--gold)}

/* WhatsApp float */
.wa{position:fixed;bottom:1.6rem;right:1.6rem;z-index:150;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;box-shadow:0 12px 30px rgba(21,27,56,.3);text-decoration:none;transition:transform .3s,box-shadow .3s}
.wa:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 18px 40px rgba(247,184,31,.5)}
.wa svg{width:28px;height:28px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav-links{position:fixed;inset:0;background:var(--navy-deep);flex-direction:column;justify-content:center;align-items:center;gap:2rem;transform:translateX(100%);transition:transform .4s}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.15rem}
  .hamburger{display:block}
  .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .scroll-hint{display:none}
}
@media(max-width:960px){
  .usp-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid,.dienst-grid{grid-template-columns:1fr 1fr}
  .over .wrap,.contact .wrap,.kennis .wrap,.tarieven .wrap{grid-template-columns:1fr;gap:4rem}
  .tijden{position:static}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .review{flex-basis:calc(50% - .8rem)}
}
@media(max-width:640px){
  .usp-grid,.steps-grid,.dienst-grid{grid-template-columns:1fr}
  section{padding:5rem 6vw}
  .over-img .badge{right:0}
  .review{flex-basis:100%}
  .steps-grid::before{display:none}
  .scroll-hint{display:none}
  .hero-inner{padding-bottom:14vh}
}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .hero h1 .w span{animation:none;transform:none}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Subpagina hero ---------- */
.page-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:10rem 4vw 4.5rem;position:relative;overflow:hidden}
.page-hero::after{content:"⬡";position:absolute;font-size:22rem;color:rgba(247,184,31,.06);right:-5rem;top:50%;transform:translateY(-50%);line-height:1}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .kicker{color:var(--gold)}
.page-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.12;max-width:22ch}
.page-hero h1 em{font-family:var(--script);font-style:normal;font-weight:400;color:var(--gold);font-size:1.25em;line-height:.8}
.page-hero p{margin-top:1.2rem;max-width:52ch;color:rgba(255,255,255,.8);font-weight:300}
.nav-links a.active:not(.cta){color:#fff}
.nav-links a.active:not(.cta)::after{width:100%}

/* CTA band */
.cta-band{background:var(--gold);text-align:center}
.cta-band h2{color:var(--navy)}
.cta-band h2 em{color:var(--navy)}
.cta-band p{color:rgba(31,39,75,.8);max-width:52ch;margin:1rem auto 0}
.cta-band .btn-navy{background:var(--navy);color:#fff;margin-top:2rem}
.cta-band .btn-navy:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(31,39,75,.45)}

/* ---------- Hero slideshow ---------- */
.hero-slides{position:absolute;inset:0}
.hero-slides .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out}
.hero-slides .slide.on{opacity:1}
.hero-slides img,.hero-slides video{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 9s linear}
.hero-slides .slide.on img{transform:scale(1)}
.hero-slides video{transform:none;transition:none}

/* ---------- Trust bar (credentials + merken) ---------- */
.trust{background:var(--paper);border-bottom:1px solid #ece5d4;padding:2.6rem 4vw}
.trust .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(2rem,5vw,4.5rem);flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.trust-item img{height:52px;width:auto;object-fit:contain;filter:saturate(.9)}
/* Het Saddle Professional-logo is een brede ovaal met de naam erín. Op dezelfde
   hoogte als de andere logo's wordt die tekst onleesbaar, dus krijgt het meer
   hoogte. Officieel logo, dus alleen schalen — niet aanpassen. */
.trust-item img[src*="saddle-professional"]{height:74px}
.trust-item div{max-width:20ch}
.trust-item strong{display:block;font-family:var(--serif);font-size:.95rem;color:var(--navy);line-height:1.2}
.trust-item span{font-size:.78rem;color:#8a8465;line-height:1.3}
.trust-label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#a89f80;width:100%;text-align:center;margin-bottom:.4rem}

/* ---------- Merkenrij ---------- */
.merken{display:flex;align-items:center;justify-content:center;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap;margin-top:3rem}
.merken img{height:38px;width:auto;object-fit:contain;opacity:.75;transition:opacity .3s,transform .3s}
.merken img:hover{opacity:1;transform:translateY(-3px)}

/* ---------- Stappen met foto ---------- */
.stap-rij{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-top:4.5rem}
.stap-rij:nth-child(even) .stap-foto{order:2}
.stap-foto{position:relative;border-radius:2px;overflow:hidden;box-shadow:0 28px 60px rgba(31,39,75,.18)}
.stap-foto img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.stap-foto:hover img{transform:scale(1.04)}
.stap-nr{position:absolute;left:0;top:0;background:var(--gold);color:var(--navy);font-family:var(--script);font-size:2.8rem;line-height:1;width:74px;height:74px;display:grid;place-items:center;z-index:2}
.stap-tekst h3{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.75rem);color:var(--navy);margin-bottom:1rem}
.stap-tekst p{color:#4a5170;font-weight:300;margin-bottom:.9rem;max-width:52ch}

/* ---------- Demozadels ---------- */
.zadel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.zadel{background:#fff;border:1px solid #ece5d4;border-radius:2px;overflow:hidden;transition:transform .4s,box-shadow .4s,border-color .4s;display:flex;flex-direction:column}
.zadel:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(31,39,75,.14);border-color:var(--gold)}
.zadel-img{background:var(--cream);aspect-ratio:1/1;padding:1.4rem;overflow:hidden}
.zadel-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.zadel:hover .zadel-img img{transform:scale(1.06)}
.zadel-body{padding:1.3rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.zadel-body h3{font-family:var(--serif);font-size:1.1rem;color:var(--navy)}
.zadel-body .merk{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#a89f80}
.zadel-body .vanaf{margin-top:auto;padding-top:.8rem;font-family:var(--serif);color:var(--gold-deep);font-size:1.02rem}

/* ---------- Info-blokken ---------- */
.info-kaart{background:var(--cream);border-left:3px solid var(--gold);padding:1.6rem 1.8rem;margin-top:2rem;border-radius:2px}
.info-kaart h3{font-family:var(--serif);font-size:1.05rem;color:var(--navy);margin-bottom:.5rem}
.info-kaart p,.info-kaart li{font-size:.93rem;color:#4a5170;font-weight:300}
.info-kaart ul{margin:.5rem 0 0 1.1rem}
.info-kaart li{margin-bottom:.3rem}
.lead{font-size:1.1rem;color:#4a5170;font-weight:300;max-width:62ch}
.body-tekst p{color:#4a5170;font-weight:300;margin-top:1.2rem;max-width:66ch}
.body-tekst h3{font-family:var(--serif);font-size:1.25rem;color:var(--navy);margin-top:2.4rem}

/* ---------- Juridische pagina's ---------- */
.legal{background:var(--paper)}
.legal .wrap{max-width:820px}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-top:2.8rem}
.legal h3{font-family:var(--serif);font-size:1.05rem;color:var(--navy);margin-top:1.8rem;margin-bottom:.4rem}
.legal p,.legal li{color:#4a5170;font-weight:300;font-size:.95rem;margin-top:.8rem}
.legal ul{margin-left:1.2rem}
.legal li{margin-top:.4rem}
.legal .meta{font-size:.85rem;color:#8a8465;margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid #ece5d4}

/* ---------- Footer socials ---------- */
.foot-social{display:flex;gap:.8rem;align-items:center}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:rgba(255,255,255,.7);transition:background .3s,color .3s,border-color .3s}
.foot-social a:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.foot-social svg{width:17px;height:17px}

@media(max-width:960px){
  .zadel-grid{grid-template-columns:1fr 1fr}
  .stap-rij{grid-template-columns:1fr;gap:2rem}
  .stap-rij:nth-child(even) .stap-foto{order:0}
}
@media(max-width:640px){
  .zadel-grid{grid-template-columns:1fr}
  .trust .wrap{gap:1.8rem}
  .trust-item{width:100%;justify-content:flex-start}
}

/* ---------- Filmsectie: scroll-reveal video ---------- */
.film{background:var(--navy-deep);padding:7rem 0 8rem;position:relative;overflow:hidden}
.film::before{content:"";position:absolute;left:50%;top:0;width:120vw;height:60%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,rgba(247,184,31,.10),transparent 62%);pointer-events:none}
.film-head{max-width:1200px;margin:0 auto 3.2rem;padding:0 4vw;position:relative;z-index:2}
.film-head .kicker{color:var(--gold)}
.film-head h2{color:#fff;max-width:24ch;white-space:nowrap}
@media(max-width:640px){.film-head h2{white-space:normal;max-width:16ch}}
.film-head p{color:rgba(255,255,255,.62);font-weight:300;max-width:46ch;margin-top:1.1rem}

.film-stage{position:relative;z-index:2;padding:0 4vw}
.film-frame{position:relative;max-width:1240px;margin:0 auto;overflow:hidden;
  transform:scale(var(--fs,.86));border-radius:calc(10px * (1 - var(--fp,0)));
  box-shadow:0 40px 90px rgba(0,0,0,calc(.28 + .22 * var(--fp,0)));
  transition:transform .12s linear,border-radius .12s linear;will-change:transform}
/* Actiefoto: het hele tafereel telt (Charmaine kijkt links mee), dus ook op
   mobiel een brede uitsnede in plaats van een portretcrop. */
.film-frame img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;object-position:50% 42%}
@media(max-width:640px){.film-frame img{aspect-ratio:4/3;object-position:56% 45%}}
.film-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,27,56,.30) 0%,transparent 34%,transparent 62%,rgba(21,27,56,.62) 100%)}

/* gouden hoeklijnen */
.film-frame .corner{position:absolute;width:44px;height:44px;border:1.5px solid var(--gold);z-index:3;
  opacity:calc(1 - var(--fp,0));transition:opacity .2s linear}
.film-frame .c-tl{top:18px;left:18px;border-right:0;border-bottom:0}
.film-frame .c-br{bottom:18px;right:18px;border-left:0;border-top:0}

.film-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:2.2rem clamp(1.4rem,3vw,3rem);
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.film-cap blockquote{font-family:var(--serif);font-style:italic;color:#fff;font-size:clamp(1rem,1.7vw,1.4rem);
  line-height:1.35;max-width:34ch;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.film-cap cite{font-style:normal;font-family:var(--script);font-size:2rem;color:var(--gold);line-height:1}

.film-note{max-width:1240px;margin:2.4rem auto 0;padding:0 4vw;display:flex;gap:2.5rem;flex-wrap:wrap;
  justify-content:space-between;align-items:center;position:relative;z-index:2}
.film-note span{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.film-note a{color:var(--gold);text-decoration:none;font-weight:600;font-size:.95rem}
.film-note a:hover{text-decoration:underline}

@media(max-width:640px){
  .film{padding:5rem 0 5.5rem}
  .film-frame{transform:scale(var(--fs,.94))}
  .film-frame video{aspect-ratio:3/4;max-height:74vh}
  .film-frame::after{background:linear-gradient(180deg,rgba(21,27,56,.28) 0%,transparent 30%,transparent 48%,rgba(21,27,56,.86) 100%)}
  .film-cap{padding:1.5rem;flex-direction:column;align-items:flex-start;gap:.7rem}
  .film-cap blockquote{font-size:1.02rem;max-width:100%}
  .film-cap cite{font-size:1.65rem}
  .film-frame .corner{width:26px;height:26px;top:14px;left:14px}
  .film-frame .c-br{bottom:14px;right:14px;top:auto;left:auto}
}
@media(prefers-reduced-motion:reduce){
  .film-frame{transform:none!important;border-radius:0!important}
}

/* ---------- Herkenning: signalen ---------- */
.signalen{background:var(--cream);position:relative}
.signalen .wrap{max-width:1200px}
.sig-head{max-width:60ch}
.sig-head p{margin-top:1.1rem;color:#4a5170;font-weight:300;font-size:1.05rem}
.sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3.2rem;background:#e7dfc9;border:1px solid #e7dfc9}
.sig-kaart{background:var(--paper);padding:2rem 1.8rem;display:flex;gap:1.1rem;align-items:flex-start;
  transition:background .35s,transform .35s}
.sig-kaart:hover{background:#fff;transform:translateY(-3px);z-index:2;box-shadow:0 18px 40px rgba(31,39,75,.10)}
.sig-kaart .mark{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gold);
  display:grid;place-items:center;color:var(--gold-deep);font-family:var(--serif);font-weight:600;font-size:.9rem;
  transition:background .35s,color .35s}
.sig-kaart:hover .mark{background:var(--gold);color:var(--navy)}
.sig-kaart p{font-size:.95rem;color:#3d4463;font-weight:400;line-height:1.5}
.sig-slot{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:2.2rem 1.8rem}
.sig-slot strong{font-family:var(--serif);font-size:1.15rem;line-height:1.3}
.sig-slot span{font-size:.9rem;color:rgba(255,255,255,.68);font-weight:300}
.sig-slot a{align-self:flex-start;margin-top:.4rem}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3.5rem;margin-top:3rem}
.faq{border-bottom:1px solid #ece5d4}
.faq .q{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;padding:1.35rem 0}
.faq .q h3{font-family:var(--serif);font-size:1.02rem;color:var(--navy);font-weight:600}
.faq .q .plus{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold);
  color:var(--gold-deep);display:grid;place-items:center;font-size:1rem;transition:transform .4s,background .4s,color .4s}
.faq.open .q .plus{transform:rotate(45deg);background:var(--gold);color:var(--navy)}
.faq .a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.6,.2,1)}
.faq .a p{padding:0 0 1.3rem;color:#4a5170;font-weight:300;font-size:.94rem;max-width:52ch}

@media(max-width:960px){.sig-grid{grid-template-columns:1fr 1fr}}

/* ---------- Sticky mobiele actiebalk ---------- */
.mob-bar{display:none}
@media(max-width:640px){
  .sig-grid,.faq-grid{grid-template-columns:1fr}
  .wa{bottom:5.6rem}
  .mob-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:160;
    background:rgba(21,27,56,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(247,184,31,.25);
    box-shadow:0 -8px 30px rgba(0,0,0,.3)}
  .mob-bar a{padding:.95rem .6rem;text-align:center;text-decoration:none;font-weight:600;font-size:.92rem;
    display:flex;align-items:center;justify-content:center;gap:.45rem}
  .mob-bar .call{color:#fff}
  .mob-bar .book{background:var(--gold);color:var(--navy)}
  .mob-bar svg{width:16px;height:16px}
  footer{padding-bottom:5.5rem}
}

/* ---------- Werkgebied ---------- */
.gebied{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.gebied::before{content:"";position:absolute;right:-160px;bottom:-160px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(247,184,31,.12),transparent 65%)}
.gebied .wrap{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center}
.gebied h2{color:#fff}
.gebied .kicker{color:var(--gold)}
.gebied p{color:rgba(255,255,255,.72);font-weight:300;margin-top:1.1rem;max-width:44ch}
.plaatsen{display:flex;flex-wrap:wrap;gap:.5rem}
.plaatsen span{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.42rem 1rem;font-size:.85rem;
  color:rgba(255,255,255,.8);transition:border-color .3s,color .3s,background .3s}
.plaatsen span:hover{border-color:var(--gold);color:var(--gold)}
.plaatsen .meer{border-style:dashed;color:rgba(255,255,255,.55)}
@media(max-width:960px){.gebied .wrap{grid-template-columns:1fr;gap:2.5rem}}

/* responsbelofte */
.respons{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;font-size:.88rem;
  color:var(--gold-deep);font-weight:600}
.respons::before{content:"";width:8px;height:8px;border-radius:50%;background:#3fbf6a;
  box-shadow:0 0 0 4px rgba(63,191,106,.18);flex-shrink:0}
.page-hero .respons,.gebied .respons{color:var(--gold)}

/* ---------- Reviews (Google-stijl) ---------- */
.reviews{background:var(--cream);overflow:hidden}
.rev-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.rev-score{display:flex;align-items:center;gap:1rem;margin-top:1.4rem}
.rev-score .cijfer{font-family:var(--serif);font-size:2.6rem;color:var(--navy);line-height:1}
.rev-score .st{color:var(--gold);letter-spacing:.15em;font-size:1.05rem}
.rev-score small{display:block;color:#8a8465;font-size:.82rem;margin-top:.2rem}
.rev-track{display:flex;gap:1.6rem;margin-top:3rem;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.review{flex:0 0 calc(33.333% - 1.1rem);background:#fff;border:1px solid #ece5d4;border-radius:2px;padding:2rem;
  display:flex;flex-direction:column;gap:1rem;box-shadow:0 14px 34px rgba(31,39,75,.07)}
.review .stars{color:var(--gold);letter-spacing:.18em;font-size:.95rem}
.review p{font-size:.94rem;color:#4a5170;font-weight:300;flex:1;line-height:1.6}
.review .who{display:flex;align-items:center;gap:.8rem;padding-top:.4rem;border-top:1px solid #f2ecdd}
.review .who .av{width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold);
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;flex-shrink:0}
.review .who strong{font-size:.9rem;color:var(--navy);display:block;line-height:1.2}
.review .who span{font-size:.76rem;color:#8a8465}
.rev-nav{display:flex;gap:.6rem}
.rev-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--navy);background:transparent;
  color:var(--navy);font-size:1.05rem;cursor:pointer;transition:background .3s,color .3s,transform .3s}
.rev-nav button:hover{background:var(--navy);color:var(--gold);transform:translateY(-2px)}

@media(max-width:960px){.review{flex-basis:calc(50% - .8rem)}}
@media(max-width:640px){.review{flex-basis:100%}}

/* ---------- Pagina-banner met foto ---------- */
.page-hero.met-foto{padding:13rem 4vw 6rem;background:var(--navy-deep)}
.page-hero.met-foto::after{display:none}
.ph-media{position:absolute;inset:0;overflow:hidden;z-index:0}
.ph-media img{width:100%;height:118%;object-fit:cover;object-position:var(--pos,50% 26%);will-change:transform;
  transform:translate3d(0,var(--py,0px),0) scale(1.02)}
.ph-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,27,56,.86) 0%,rgba(31,39,75,.55) 42%,rgba(21,27,56,.90) 100%),
             linear-gradient(100deg,rgba(21,27,56,.72) 0%,rgba(21,27,56,.32) 45%,rgba(21,27,56,.10) 75%)}
.page-hero.met-foto .wrap{position:relative;z-index:2}
.page-hero.met-foto h1{text-shadow:0 2px 30px rgba(0,0,0,.35)}
.page-hero.met-foto p{color:rgba(255,255,255,.88)}
/* dunne gouden afsluiting onderaan de banner */
.page-hero.met-foto::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft),transparent)}

@media(max-width:640px){
  .page-hero.met-foto{padding:9.5rem 6vw 4rem}
}
@media(prefers-reduced-motion:reduce){
  .ph-media img{transform:none!important;height:100%}
}

/* ---------- Keurmerken in de footer ---------- */
.foot-keur{max-width:1200px;margin:2.6rem auto 0;padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.10);
  display:flex;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap;align-items:flex-start}
.keur-blok{display:flex;flex-direction:column;gap:.9rem}
.keur-blok .label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.keur-logos{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.keur-logos span{background:#fff;border-radius:3px;padding:.5rem .7rem;display:grid;place-items:center;
  transition:transform .3s,box-shadow .3s}
.keur-logos span:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.keur-logos img{height:30px;width:auto;display:block;object-fit:contain}
.keur-logos .groot img{height:36px}
.keur-logos img[src*="saddle-professional"]{height:52px}
@media(max-width:640px){
  .foot-keur{gap:2rem}
  .keur-logos img{height:26px}
  .keur-logos img[src*="saddle-professional"]{height:42px}
}

/* ============================================================
   WordPress-aanpassingen
   ------------------------------------------------------------
   Alles hierboven is de goedgekeurde huisstijl, ongewijzigd
   overgenomen uit assets/style.css. Hieronder staan alleen de
   correcties die nodig zijn omdat WordPress andere elementen
   uitspuugt dan de statische site. Houd deze lijst kort en
   documenteer elke regel; dit is de enige plek waar het thema
   van de bron afwijkt.
   ============================================================ */

/* De kickers waren <span> in de statische site. In de blokeditor is
   een losse span niet bewerkbaar, dus zijn het <p> geworden. Daardoor
   erven ze de grijze paragraafkleur van hun sectie. Kleur en marges
   terugzetten naar wat .kicker hoort te zijn. */
.sig-head p.kicker,
.over-text p.kicker,
.diensten p.kicker,
.gebied p.kicker,
.kennis p.kicker,
.film-head p.kicker {
  color: var(--gold-deep);
  font-size: .78rem;
  font-weight: 600;
  margin-top: 0;
}
.diensten p.kicker,
.film-head p.kicker { color: var(--gold) }

/* Blokgroepen van WordPress zetten zelf geen layout; onze eigen
   klassen doen dat. Voorkom dat de standaard flow-layout van
   .wp-block-group marges toevoegt binnen onze rasters. */
.sig-grid > .wp-block-group,
.sig-kaart > * { margin-block-start: 0 }

/* WPForms in de jas van het goedgekeurde formulier.
   ------------------------------------------------------------
   Het statische formulier verstuurde niets; WPForms doet dat wel, maar brengt
   eigen markup en eigen opmaak mee. Hieronder krijgen die elementen dezelfde
   opmaak als de regels hierboven voor .contact-form. Niets nieuws bedacht:
   dit spiegelt regel voor regel wat er stond. */

.contact-form .wpforms-container,
.contact-form .wpforms-form,
.contact-form .wpforms-field { margin: 0; padding: 0; border: 0 }

.contact-form .wpforms-field-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 1.2rem 0 .4rem;
}

/* Het eerste veld hoeft geen marge boven zich: de doos heeft al padding. */
.contact-form .wpforms-field:first-child .wpforms-field-label { margin-top: 0 }

.contact-form .wpforms-field input[type="text"],
.contact-form .wpforms-field input[type="email"],
.contact-form .wpforms-field input[type="tel"],
.contact-form .wpforms-field textarea,
.contact-form .wpforms-field select {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid #ddd5c2;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .95rem;
  background: var(--paper);
  transition: border-color .3s, box-shadow .3s;
}

.contact-form .wpforms-field input:focus,
.contact-form .wpforms-field textarea:focus,
.contact-form .wpforms-field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(247, 184, 31, .18);
}

/* Het vinkje: zelfde vorm als .form-check hierboven. */
.contact-form .wpforms-field-checkbox ul { list-style: none; margin: 1rem 0 0; padding: 0 }
.contact-form .wpforms-field-checkbox li { display: flex; align-items: flex-start; gap: .7rem }
.contact-form .wpforms-field-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: .1rem;
  accent-color: var(--gold-deep);
  cursor: pointer;
}
.contact-form .wpforms-field-checkbox label {
  font-size: .85rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #5c5744;
  cursor: pointer;
}

/* De knop kreeg in de bron .btn .btn-gold mee. */
.contact-form .wpforms-submit-container { padding: 0 }
.contact-form button.wpforms-submit {
  margin-top: 1.8rem;
  width: 100%;
  display: inline-block;
  padding: .95rem 2.2rem;
  border: 0;
  border-radius: 2px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.contact-form button.wpforms-submit:hover { background: var(--gold-soft); transform: translateY(-2px) }

/* Foutmeldingen in de huisstijl in plaats van WPForms-rood. */
.contact-form .wpforms-error { color: #a8322b; font-size: .82rem; margin-top: .35rem }
.contact-form input.wpforms-error,
.contact-form textarea.wpforms-error,
.contact-form select.wpforms-error { border-color: #a8322b }

/* WPForms levert zijn eigen opmaak met hoge specificiteit. In plaats van daar
   met !important overheen te gaan, zetten we de variabelen die het zelf
   aanbiedt. Dat blijft werken als de plugin zijn CSS herschrijft. */
.contact-form .wpforms-container {
  --wpforms-field-border-color: #ddd5c2;
  --wpforms-field-background-color: var(--paper);
  --wpforms-field-text-color: var(--ink);
  --wpforms-field-border-radius: 2px;
  --wpforms-label-color: var(--navy);
  --wpforms-label-sublabel-color: #5c5744;
  --wpforms-label-error-color: #a8322b;
  --wpforms-button-background-color: var(--gold);
  --wpforms-button-text-color: var(--navy);
  --wpforms-button-border-radius: 2px;
  --wpforms-field-size-input-height: auto;
}