/* UPgemerkt, definitieve visuele afwerking
   Eén consistente laag bovenop de basisstijl. */
:root{
  --wrap:1240px;
  --radius:18px;
  --radius-sm:12px;
}
body{overflow-wrap:break-word}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
img,video{max-width:100%}
.wrap{padding-inline:clamp(22px,4vw,48px)}
.sec{padding-block:clamp(72px,8vw,112px)}
.sec__lede{max-width:64ch}
.reveal{will-change:opacity,transform}
.mt{margin-top:clamp(32px,5vw,56px)}

/* Navigatie */
.nav{border-bottom:1px solid rgba(255,255,255,.06)}
.nav.is-stuck{background:rgba(8,8,9,.92);box-shadow:0 10px 40px rgba(0,0,0,.22)}
.nav__links{gap:clamp(18px,2vw,30px)}
.nav__links a{font-size:.89rem}
.brand__txt{letter-spacing:.01em}

/* Knoppen: duidelijk, maar niet schreeuwerig. */
.btn{
  min-height:48px;padding:14px 25px;border-radius:8px;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(245,166,35,.18)}
.btn--ghost{border-width:1px;border-radius:8px}
.btn:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}

/* Bewijs direct na de hero. */
.home-feature{padding-top:clamp(72px,8vw,108px);padding-bottom:clamp(72px,8vw,108px)}
.home-feature .summer-case{padding:clamp(26px,4vw,48px);border:1px solid rgba(255,255,255,.12);border-radius:22px;background:#0d0d0f}
.home-feature .summer-case>figcaption{max-width:930px}
.home-feature .summer-case h2{max-width:13em;margin:12px 0 20px;font-size:clamp(2.55rem,4.6vw,4.8rem);line-height:1.02;letter-spacing:-.05em}
.home-feature .summer-case>figcaption>p:not(.ue-meta){max-width:710px;color:#aaa8a2}
.home-feature>.btn{margin-top:26px}
.geelvlak{padding:clamp(38px,4vw,56px) 0}
.geelvlak__zin{max-width:18em;font-size:clamp(1.8rem,3.5vw,3.25rem)}
.geelvlak__bij{max-width:760px;margin-top:12px;font-size:1rem;opacity:.76}

/* Keuzekaarten */
.routes{gap:18px}
.route{
  min-height:340px;padding:clamp(26px,3vw,38px);border-radius:18px;
  border:1px solid rgba(16,16,16,.12);box-shadow:0 16px 45px rgba(25,20,10,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.route:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(25,20,10,.1);border-color:rgba(131,96,0,.4)}
.route__ico{width:56px;height:56px}
.route h3{font-size:clamp(1.2rem,1.6vw,1.48rem);line-height:1.28}
.route .btn{align-self:flex-start}

/* Beeld en tekst: minder 50/50, meer redactioneel. */
.beeldtekst{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(42px,7vw,100px)}
.beeldtekst--links{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.beeldtekst__beeld img{min-height:430px;object-fit:cover;border-radius:16px}
.beeldtekst__tekst{max-width:560px}

/* Klanten en stappen */
.klanten--2{gap:18px}
.klant{border-radius:16px;overflow:hidden}
.steps{gap:18px}
.step{padding:30px;border-left:1px solid rgba(16,16,16,.16)}
.step__n{font-size:.78rem}

/* Gratis scan */
#wat-we-bekijken,#scan-aanvragen,#contactformulier{scroll-margin-top:86px}
.home-scan{position:relative;overflow:hidden;background:#f2eee5}
.home-scan::after{content:"";position:absolute;right:-120px;bottom:-220px;width:520px;aspect-ratio:1;border:1px solid rgba(131,96,0,.18);border-radius:50%;pointer-events:none}
.home-scan__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(48px,8vw,110px);align-items:center}
.home-scan__points{display:grid;gap:0;margin:0;padding:0;list-style:none}
.home-scan__points li{padding:18px 0;border-bottom:1px solid rgba(16,16,16,.14);color:#6e6757}
.home-scan__points strong{display:block;color:#101010;font-size:1.04rem}

/* Contact */
.contact-belofte{max-width:58ch;margin:16px 0 26px;color:var(--muted);font-size:1.05rem;line-height:1.7}
.contact-stappen{display:grid;gap:0;margin:0 0 30px;padding:0;list-style:none}
.contact-stappen li{display:grid;gap:3px;padding:16px 0;border-bottom:1px solid var(--line)}
.contact-stappen strong{color:var(--text)}
.contact-stappen span{color:var(--muted);font-size:.92rem}
.contact-scan{display:grid;gap:5px;margin-top:28px;padding:20px;border:1px solid rgba(245,166,35,.38);border-radius:14px;background:rgba(245,166,35,.08);color:var(--text);text-decoration:none;transition:.2s}
.contact-scan:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(245,166,35,.13)}
.contact-scan span{color:var(--gold)}
.form{border-radius:18px}
.form__intro,.form__klein,.form__note,.mail-aanvraag{grid-column:1/-1}
.form__intro{margin:-4px 0 10px;color:var(--muted);line-height:1.55}
.form__note:empty{display:none}
.form input,.form textarea,.form select{min-height:48px}

/* Cases: rustige navigatie en compacte verdieping. */
.is-cases-page main>.hero{padding-bottom:42px}
.is-cases-page main>.hero .lede{max-width:680px}
.is-cases-page .case-clients{position:sticky;z-index:20;top:68px;padding-block:12px;background:rgba(0,0,0,.94);backdrop-filter:blur(12px)}
.case-clients{display:flex;flex-wrap:wrap;gap:10px}
.case-clients a{flex:1 1 170px;padding:14px 17px;border-radius:10px;font-size:1rem;transition:.2s}
.case-clients a:hover{transform:translateY(-2px)}
.case-clients span{margin-top:3px}
.is-cases-page .client-section{padding-block:clamp(58px,7vw,88px)}
.is-cases-page .client-section+.client-section{border-top:1px solid var(--line)}
.is-cases-page .client-heading{margin-bottom:34px;padding-top:26px}
.is-cases-page .ue-projects{gap:34px}
.is-cases-page .ue-projects>figure{
  padding:clamp(18px,2.4vw,30px);border:1px solid var(--line);border-radius:20px;
  background:#0d0d0f;box-shadow:0 20px 60px rgba(0,0,0,.16)
}
.is-cases-page .ue-projects>figure[hidden]{display:none}
.is-cases-page .ue-projects>figure.case-feature{border-color:rgba(245,166,35,.3)}
.is-cases-page .ue-projects>figure.case-compact{grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:34px}
.is-cases-page .case-compact .ue-work-stage img{height:390px;object-fit:cover}
.is-cases-page .case-compact .ue-work-stage video{height:390px;max-height:none;aspect-ratio:auto;object-fit:contain}
.is-cases-page .case-compact h3{font-size:clamp(1.45rem,2.1vw,1.95rem);margin-bottom:12px}
.is-cases-page .case-compact figcaption>p:not(.ue-meta):not(.ue-case-source){max-width:64ch;color:#aaa8a2}
.is-cases-page .case-compact .ue-case-results{grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0;gap:9px}
.is-cases-page .case-compact .ue-case-results>div{min-height:94px;padding:14px}
.is-cases-page .case-compact .ue-case-results strong{font-size:clamp(1.1rem,1.55vw,1.42rem)}
.is-cases-page .case-more{display:flex;margin:22px auto 0;min-width:min(100%,310px)}
.is-cases-page .approach-toggle-wrap{display:flex;justify-content:center;padding-block:34px 68px}
.is-cases-page #anders{scroll-margin-top:90px}
.is-cases-page #anders[hidden]{display:none}
.resultaat-cases details{max-width:80ch}
.resultaat-cases summary{min-height:44px}
.resultaat-cases .ue-insights{display:none}
.resultaat-cases .ue-case-source{max-width:75ch}
.summer-video video{box-shadow:0 14px 42px rgba(0,0,0,.22)}

/* Blog */
.blog-hub__hero .lede{max-width:760px}
.blog-themas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.blog-themas span{margin-right:6px;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}
.blog-themas a{padding:8px 13px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.88rem}
.blog-themas a:hover{border-color:var(--gold);color:var(--gold)}
.blog-feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);margin-top:28px;border:1px solid rgba(16,16,16,.13);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 55px rgba(25,20,10,.08)}
.blog-feature__beeld{min-height:410px}
.blog-feature__beeld img{width:100%;height:100%;object-fit:cover}
.blog-feature__tekst{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(30px,5vw,64px)}
.blog-feature__tekst h2{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1.08;margin:8px 0 18px}
.blog-feature__tekst p:not(.art__datum){color:#6e6757;line-height:1.7;margin-bottom:26px}
.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px}
.blog-grid .art{border-radius:16px;overflow:hidden}
.blog-guide{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:clamp(40px,8vw,110px)}
.blog-guide__links{display:grid}
.blog-guide__links a{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.blog-guide__links strong{color:var(--text);font-size:1.08rem}
.blog-guide__links span{color:var(--gold)}

/* Organische resultaatvisual */
.ue-organic-stage{min-height:390px;padding:clamp(26px,4vw,52px);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 75% 20%,rgba(255,190,0,.13),transparent 38%),#101013}
.organic-chart{width:min(620px,100%);padding:clamp(22px,4vw,40px);border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(0,0,0,.42)}
.organic-chart__head{display:flex;align-items:end;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.organic-chart__head span{color:#d2d0ca;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}
.organic-chart__head strong{color:var(--gold);font-family:var(--ff-head);font-size:clamp(2rem,5vw,3.7rem)}
.organic-chart__bars{height:180px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(48px,10vw,100px);padding-top:22px}
.organic-chart__bars>div{height:100%;display:grid;grid-template-rows:1fr auto auto;justify-items:center;gap:4px}
.organic-chart__bars i{width:clamp(52px,7vw,82px);align-self:end;border-radius:7px 7px 2px 2px;background:var(--gold)}
.organic-chart__bars span{font-family:var(--ff-head);font-size:1.25rem;font-weight:700;color:#fff}
.organic-chart__bars small,.organic-chart>p{color:#9d9a93}
.organic-chart>p{text-align:center;margin:16px 0 0;font-size:.78rem}

/* Footer */
.foot__onder .ai-note{flex-basis:100%;margin:6px 0 0;color:var(--muted);font-size:0.78rem;line-height:1.5;opacity:.7}

@media(max-width:1100px) and (min-width:901px){
  .hero--reus.hero--beeld .hero__inner{grid-template-columns:minmax(360px,.9fr) minmax(440px,1.1fr)}
  .hero--reus .hero__reus{font-size:clamp(4rem,6.5vw,5.2rem)}
  .hero--reus .hero__beeld{height:500px}
}
@media(max-width:900px){
  .hero--reus.hero--beeld{padding-top:74px}
  .hero--reus.hero--beeld .hero__inner{display:flex;min-height:auto;flex-direction:column;padding-top:44px;padding-bottom:54px}
  .hero--reus .hero__reus{max-width:8em;font-size:clamp(3.4rem,12vw,6.2rem);margin-bottom:28px}
  .hero--reus .hero__beeld{order:3;width:100%;height:clamp(280px,62vw,440px);margin:34px 0 0;border-radius:14px}
  .hero--reus .hero__beeld::before{background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 55%)}
  .hero--reus .hero__onder{order:2;max-width:650px;padding:0}
  .beeldtekst,.beeldtekst--links{grid-template-columns:1fr}
  .home-scan__inner{grid-template-columns:1fr}
  .blog-feature,.blog-guide{grid-template-columns:1fr}
  .blog-feature__beeld{min-height:290px}
  .is-cases-page .case-clients{position:static;background:none}
  .is-cases-page .case-compact .ue-case-results{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .wrap{padding-inline:20px}
  .sec{padding-block:62px}
  .hero--reus .hero__reus{font-size:clamp(3.2rem,16vw,5rem)}
  .hero--reus .hero__cta{align-items:stretch;flex-direction:column;gap:12px}
  .hero--reus .hero__cta .btn--ghost{align-self:flex-start}
  .home-feature .summer-case{padding:18px}
  .home-feature .summer-case h2{font-size:clamp(2.2rem,11vw,3.2rem)}
  .summer-case .ue-case-results{grid-template-columns:1fr 1fr}
  .case-clients{display:grid;grid-template-columns:1fr 1fr;padding-bottom:20px}
  .case-clients a{min-width:0;padding:13px;font-size:0.875rem}
  .case-clients .case-client-cta{grid-column:1/-1}
  .is-cases-page .client-section{padding-block:50px}
  .is-cases-page .ue-projects>figure{padding:16px;border-radius:14px}
  .is-cases-page .ue-projects>figure.case-compact{grid-template-columns:1fr;gap:20px}
  .is-cases-page .case-compact .ue-work-stage img,.is-cases-page .case-compact .ue-work-stage video{height:auto;max-height:68vh}
  .is-cases-page .case-compact .ue-case-results{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .resultaat-cases .ue-case-results>div{padding:16px 13px;min-height:108px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* Casesoverzicht: één hoofdverhaal per merk, met een eigen kleurvlak. */
.is-cases-page .case-clients{
  margin-bottom:28px;padding:12px clamp(14px,2vw,22px);
  border:1px solid var(--line);border-radius:14px;
}
.is-cases-page .case-clients a{background:#111114;border-color:rgba(255,255,255,.1)}
.is-cases-page .case-clients a:nth-child(2),
.is-cases-page .case-clients a:nth-child(4){background:#eee9df;color:#101010;border-color:#eee9df}
.is-cases-page .case-clients a:nth-child(2) span,
.is-cases-page .case-clients a:nth-child(4) span{color:#6e6757}
.is-cases-page .client-section{
  margin-top:18px;margin-bottom:18px;padding:clamp(34px,5vw,64px);
  border:1px solid rgba(255,255,255,.1);border-radius:26px;background:#0d0d0f;
}
.is-cases-page .client-section+.client-section{border-top:1px solid rgba(255,255,255,.1)}
.is-cases-page #qualibuild,
.is-cases-page #podcast{background:#eee9df;color:#101010;border-color:#eee9df}
.is-cases-page #qualibuild .client-heading,
.is-cases-page #podcast .client-heading{border-top-color:#101010}
.is-cases-page #qualibuild .client-heading p:not(.ue-eyebrow),
.is-cases-page #podcast .client-heading p:not(.ue-eyebrow){color:#625e55}

/* De bovenkopjes van deze twee blokken stonden in het gewone goud op een
   cremekleurige achtergrond. Gemeten contrast 1,38 terwijl 4,5 het minimum
   is: dat leest zo goed als niet. Een donkerder goud houdt de kleur maar
   maakt de tekst leesbaar (5,28). */
.is-cases-page #qualibuild .client-heading .ue-eyebrow,
.is-cases-page #podcast .client-heading .ue-eyebrow{color:#7E580C}
.is-cases-page #qualibuild .ue-projects>figure,
.is-cases-page #podcast .ue-projects>figure{background:#fff;border-color:rgba(16,16,16,.12);box-shadow:0 18px 50px rgba(30,22,10,.08)}
.is-cases-page #qualibuild .ue-projects>figure figcaption>p,
.is-cases-page #podcast .ue-projects>figure figcaption>p{color:#625e55}
.is-cases-page #qualibuild .ue-case-results>div,
.is-cases-page #podcast .ue-case-results>div{background:#f5f2eb;border-color:rgba(16,16,16,.12)}
.is-cases-page #qualibuild .ue-case-results strong,
.is-cases-page #podcast .ue-case-results strong{color:#765600}
.is-cases-page #qualibuild .ue-case-results span,
.is-cases-page #podcast .ue-case-results span{color:#625e55}
.is-cases-page #qualibuild .ue-case-results>div:first-child,
.is-cases-page #podcast .ue-case-results>div:first-child{background:var(--gold);border-color:var(--gold)}
.is-cases-page #qualibuild .ue-case-results>div:first-child strong,
.is-cases-page #qualibuild .ue-case-results>div:first-child span,
.is-cases-page #podcast .ue-case-results>div:first-child strong,
.is-cases-page #podcast .ue-case-results>div:first-child span{color:#15120b}
.is-cases-page #qualibuild details,
.is-cases-page #podcast details{border-color:rgba(16,16,16,.15)}
.is-cases-page #qualibuild summary,
.is-cases-page #podcast summary{color:#765600}
.is-cases-page #qualibuild .btn--ghost,
.is-cases-page #podcast .btn--ghost{color:#101010;border-color:#101010}
.is-cases-page .case-media-more{max-width:none;margin:28px 0 12px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.is-cases-page .case-media-more>summary{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;color:var(--text);background:#151518}
.is-cases-page .case-media-more>summary::after{content:"+";color:var(--gold);font-size:1.4rem}
.is-cases-page .case-media-more[open]>summary::after{content:"−"}
.is-cases-page .case-media-more .summer-videos{padding:0 18px 18px;margin:18px 0 0}
.is-cases-page .summer-case>details:not(.case-media-more){max-width:760px}
.is-cases-page .case-more{background:transparent}
@media(max-width:760px){
  .is-cases-page .case-clients{margin-inline:20px}
  .is-cases-page .client-section{margin:12px 12px;padding:26px 16px;border-radius:18px}
  .is-cases-page .case-media-more .summer-videos{padding:0 12px 12px}
}

/* CTA in het casesoverzicht moet altijd duidelijk afsteken. */
.is-cases-page .case-clients .case-client-cta{
  background:var(--gold);
  color:#101010;
  border-color:var(--gold);
  box-shadow:0 12px 32px rgba(245,166,35,.14);
}
.is-cases-page .case-clients .case-client-cta span{color:#3d2d08}
.is-cases-page .case-clients .case-client-cta:hover{
  background:var(--gold-lt);
  color:#000;
  border-color:var(--gold-lt);
}

/* Homepagehero v2: één volle compositie in plaats van twee halve kolommen. */
@media(min-width:901px){
  .hero--reus.hero--beeld{
    position:relative;
    min-height:calc(100vh - 20px);
    padding:74px 0 0;
    background:#000;
  }
  .hero--reus.hero--beeld .hero__inner{
    position:relative;
    display:block;
    min-height:calc(100vh - 74px);
    padding-top:clamp(76px,10vh,120px);
    padding-bottom:clamp(74px,9vh,110px);
  }
  .hero--reus .eyebrow,
  .hero--reus .hero__reus,
  .hero--reus .hero__onder{
    position:relative;
    z-index:4;
    width:min(630px,52vw);
    max-width:none;
  }
  .hero--reus .hero__reus{
    margin:20px 0 34px;
    font-size:clamp(5rem,7.2vw,8rem);
    line-height:.87;
  }
  .hero--reus .hero__onder{padding:0}
  .hero--reus .hero__beeld{
    position:absolute;
    z-index:1;
    inset:0 auto 0 50%;
    width:100vw;
    height:100%;
    min-height:100%;
    margin:0;
    transform:translateX(-50%);
    border-radius:0;
  }
  .hero--reus .hero__beeld img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  .hero--reus .hero__beeld::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    background:
      linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 15%,rgba(0,0,0,.88) 34%,rgba(0,0,0,.52) 52%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.06) 100%);
  }
  .hero--reus .hero__beeld::after{
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    background:
      linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 35%,rgba(0,0,0,.1) 72%,#000 100%);
  }
  .hero--reus .hero__onder .lede{
    max-width:34em;
    color:#dedcd7;
    text-shadow:0 2px 18px rgba(0,0,0,.55);
  }
  .hero--reus .hero__bij{color:#bbb7ae}
}
@media(min-width:901px) and (max-height:780px){
  .hero--reus.hero--beeld .hero__inner{padding-top:62px;padding-bottom:64px}
  .hero--reus .hero__reus{font-size:clamp(4.6rem,6.6vw,6.8rem);margin-bottom:26px}
  .hero--reus .hero__onder .lede{margin-bottom:22px}
}

/* Werkelijke full-bleed hero: achtergrond hoort bij de sectie, niet bij de .wrap. */
@media(min-width:901px){
  .hero--fullbleed{
    position:relative !important;
    width:100% !important;
    min-height:calc(100vh - 20px) !important;
    padding:74px 0 0 !important;
    overflow:hidden !important;
    background:
      linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 16%,rgba(0,0,0,.88) 36%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.08) 100%),
      linear-gradient(180deg,transparent 68%,#000 100%),
      url("../assets/beelden/hero-upgemerkt-ai.jpg") center center / cover no-repeat !important;
  }
  .hero--fullbleed .hero__inner{
    display:block !important;
    min-height:calc(100vh - 74px) !important;
    padding-top:clamp(72px,9vh,112px) !important;
    padding-bottom:clamp(72px,9vh,108px) !important;
  }
  .hero--fullbleed .hero__beeld{
    display:none !important;
  }
  .hero--fullbleed .eyebrow,
  .hero--fullbleed .hero__reus,
  .hero--fullbleed .hero__onder{
    width:min(720px,58vw) !important;
    max-width:720px !important;
    margin-left:0 !important;
  }
  .hero--fullbleed .eyebrow{
    margin-bottom:18px !important;
    color:var(--gold) !important;
  }
  .hero--fullbleed .hero__reus{
    margin-top:0 !important;
    margin-bottom:34px !important;
    font-size:clamp(5rem,7vw,7.8rem) !important;
  }
  .hero--fullbleed .hero__onder{
    display:block !important;
    padding:0 !important;
  }
  .hero--fullbleed .hero__onder .lede{
    width:auto !important;
    max-width:620px !important;
    margin:0 0 28px !important;
    font-size:clamp(1.06rem,1.25vw,1.22rem) !important;
    line-height:1.62 !important;
  }
  .hero--fullbleed .hero__actie{
    display:block !important;
  }
  .hero--fullbleed .hero__cta{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:18px 24px !important;
    margin:0 !important;
  }
  .hero--fullbleed .hero__bij{
    max-width:610px !important;
    margin:20px 0 0 !important;
  }
}
@media(min-width:901px) and (max-height:800px){
  .hero--fullbleed .hero__inner{padding-top:52px !important;padding-bottom:58px !important}
  .hero--fullbleed .hero__reus{font-size:clamp(4.4rem,6.2vw,6.6rem) !important;margin-bottom:24px !important}
  .hero--fullbleed .hero__onder .lede{margin-bottom:20px !important}
}

/* Organische kanalen: visuele samenvatting zonder screenshots of gemengde totalen. */
.organic-network-stage{min-height:410px;padding:clamp(28px,5vw,60px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 76% 18%,rgba(245,166,35,.17),transparent 36%),#0b0b0d}
.organic-network-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.organic-network-grid>div{min-width:0;padding:clamp(18px,2.5vw,28px);border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.045)}
.organic-network-grid span{display:block;margin-bottom:22px;color:var(--gold);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em}
.organic-network-grid strong{display:block;color:#fff;font-family:var(--ff-head);font-size:clamp(1.7rem,3vw,3rem);line-height:1}
.organic-network-grid small{display:block;margin-top:9px;color:#aaa8a2;line-height:1.35}
.organic-network-stage>p{margin:24px 0 0;color:#aaa8a2;font-size:.85rem}
.organic-network-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.organic-network-stage--light{background:linear-gradient(145deg,#171718,#080809)}
.is-cases-page .organic-overview-case figcaption>p:not(.ue-meta){max-width:68ch}
@media(max-width:760px){
  .organic-network-stage{min-height:auto;padding:20px}
  .organic-network-grid{grid-template-columns:1fr}
  .organic-network-grid--2{grid-template-columns:1fr 1fr}
}

/* Organische cases: één brede, leesbare resultatenkaart zonder dubbele cijferkolom. */
.resultaat-cases .organic-overview-case{
  display:block;
  overflow:hidden;
}
.resultaat-cases .organic-overview-case .organic-network-stage{
  display:none;
}
.resultaat-cases .organic-overview-case figcaption{
  width:100%;
  max-width:none;
}
.resultaat-cases .organic-overview-case h3{
  max-width:760px;
  margin-bottom:18px;
  font-size:clamp(2rem,3.8vw,3.35rem);
  line-height:1.02;
}
.resultaat-cases .organic-overview-case figcaption>p:not(.ue-meta){
  max-width:760px;
  font-size:clamp(1rem,1.4vw,1.12rem);
  line-height:1.7;
}
.resultaat-cases .organic-overview-case .ue-case-results{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:34px;
}
.resultaat-cases .organic-overview-case .ue-case-results>div{
  min-height:145px;
}
@media(max-width:980px){
  .resultaat-cases .organic-overview-case .ue-case-results{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .resultaat-cases .organic-overview-case h3{font-size:clamp(1.9rem,10vw,2.65rem)}
  .resultaat-cases .organic-overview-case .ue-case-results{grid-template-columns:1fr}
  .resultaat-cases .organic-overview-case .ue-case-results>div{min-height:112px}
}

/* Podcasttegel in het case-menu: meteen de studio tonen. */
.is-cases-page .case-clients a[href="#podcast"]{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:116px;
  justify-content:flex-end;
  color:#fff;
  border-color:rgba(245,166,35,.42);
  background-image:linear-gradient(180deg,rgba(5,5,6,.55) 0%,rgba(5,5,6,.75) 45%,rgba(5,5,6,.92) 92%),url("../assets/beelden/studio-breed.jpg");
  background-size:cover;
  background-position:center 56%;
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.is-cases-page .case-clients a[href="#podcast"] span{color:#e9e2d5}

.is-cases-page .case-clients .case-client-logo{
  display:block;
  width:auto;
  max-width:88%;
  height:38px;
  margin:0 0 9px;
  object-fit:contain;
  object-position:left center;
}
.is-cases-page .case-clients .case-client-logo--qualibuild{
  height:42px;
  max-width:82%;
}
@media(max-width:560px){
  .is-cases-page .case-clients .case-client-logo{height:30px;max-width:94%}
  .is-cases-page .case-clients .case-client-logo--qualibuild{height:34px}
}

/* Live marketingscan */
.scan-live{background:#0b0b0d;color:#f7f2e9}
.scan-live__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(420px,1.22fr);gap:clamp(36px,6vw,90px);align-items:start}
.scan-live__copy{position:sticky;top:110px}
.scan-live__copy h2{font-size:clamp(2.4rem,5vw,4.5rem);line-height:.98;margin:14px 0 24px}
.scan-live__copy p:not(.eyebrow){max-width:540px;color:#aaa8a2;font-size:1.08rem;line-height:1.7}
.scan-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:clamp(24px,4vw,42px);border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#131315;box-shadow:0 26px 70px rgba(0,0,0,.25)}
.scan-form .field{min-width:0}.scan-form .field--full,.scan-form .check,.scan-form button,.scan-form .scan-status{grid-column:1/-1}
.scan-form label:not(.check){display:block;margin-bottom:8px;font-size:.82rem;font-weight:600;color:#ddd8cf}
.scan-form input{width:100%;height:52px;padding:0 15px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:#0c0c0e;color:#fff;font:inherit}
.scan-form input:focus{outline:2px solid var(--gold);outline-offset:2px}
.scan-form .check{display:flex;gap:10px;align-items:flex-start;color:#aaa8a2;font-size:.82rem;line-height:1.5}.scan-form .check input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.scan-status{min-height:24px;margin:0;color:var(--gold);font-size:.84rem}
.scan-resultaat{scroll-margin-top:100px;padding-block:clamp(58px,7vw,90px);background:#eee9df;color:#111}
.scan-score{display:flex;align-items:center;gap:28px;padding-bottom:30px;border-bottom:1px solid rgba(0,0,0,.14)}
.scan-score>div{display:flex;align-items:baseline;color:#111}.scan-score strong{font-family:var(--ff-head);font-size:clamp(4rem,9vw,7rem);line-height:.8}.scan-score span{font-size:1.1rem;color:#6b6459}.scan-score p{font-size:1.05rem;line-height:1.6;color:#514c44}
.scan-deelscores{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.scan-deelscores .scan-deelscore{display:inline-flex;padding:7px 11px;border:1px solid rgba(0,0,0,.16);border-radius:999px;color:#29251f;font-size:.78rem;font-weight:700;line-height:1.2}.scan-deelscores .is-wacht{color:#756e63;font-weight:500}
.scan-checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none;padding:26px 0 44px;margin:0}.scan-checks li{display:flex;gap:9px;align-items:center;padding:13px;border:1px solid rgba(0,0,0,.12);border-radius:9px;font-size:.82rem}.scan-checks li span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;font-weight:700}.scan-checks .is-ok span{background:#dce9d9;color:#1d5a27}.scan-checks .is-mis span{background:#ffd166;color:#4d3500}
.scan-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.scan-tips article{padding:clamp(22px,3vw,32px);border:1px solid rgba(0,0,0,.13);border-radius:14px;background:#fff}.scan-tips b{color:#a87500;font-size:.8rem;letter-spacing:.12em}.scan-tips h3{font-size:clamp(1.15rem,2vw,1.45rem);margin:18px 0 10px}.scan-tips p{color:#625e55;line-height:1.65;font-size:.92rem}
.scan-next{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;padding:24px 28px;border-radius:14px;background:#111;color:#fff}.scan-next p{margin:0;color:#aaa8a2;line-height:1.55}.scan-next b{color:#fff}
.scan-resultaat.is-low{background:#220708;color:#fff}
.scan-resultaat.is-low .scan-score{border-color:rgba(255,150,145,.22)}
.scan-resultaat.is-low .scan-score>div,.scan-resultaat.is-low .scan-score strong{color:#ff6b63}
.scan-resultaat.is-low .scan-score span,.scan-resultaat.is-low .scan-score p{color:#e3c2bd}
.scan-resultaat.is-low .scan-deelscores .scan-deelscore{border-color:rgba(255,255,255,.22);color:#fff}.scan-resultaat.is-low .scan-deelscores .is-wacht{color:#d4aaa5}
.scan-resultaat.is-low .scan-score b{color:#fff}
.scan-resultaat.is-low .eyebrow{color:#ff746d}
.scan-resultaat.is-low .scan-checks li{background:#310b0e;border-color:#672229;color:#f7e7e3}
.scan-resultaat.is-low .scan-checks .is-ok span{background:#493128;color:#ffd6cc}
.scan-resultaat.is-low .scan-checks .is-mis span{background:#d13b37;color:#fff}
.scan-resultaat.is-low .scan-tips article{background:#310b0e;border-color:#672229}
.scan-resultaat.is-low .scan-tips b{color:#ff746d}
.scan-resultaat.is-low .scan-tips h3{color:#fff}
.scan-resultaat.is-low .scan-tips p{color:#dfbbb6}
.scan-resultaat.is-low .scan-next{background:#090304;border:1px solid #672229}
@media(max-width:900px){.scan-live__grid{grid-template-columns:1fr}.scan-live__copy{position:static}.scan-checks{grid-template-columns:1fr 1fr}.scan-tips{grid-template-columns:1fr}}
@media(max-width:560px){.scan-form{grid-template-columns:1fr;padding:20px}.scan-form .field{grid-column:1/-1}.scan-score{align-items:flex-start;flex-direction:column}.scan-checks{grid-template-columns:1fr}.scan-next{align-items:flex-start;flex-direction:column}}

/* ---------- Cases-pagina schoof zijwaarts op een telefoon ----------
   De klantenbalk en de klantensecties hadden width:100% samen met een
   marge links en rechts. Die twee tellen op, dus werd het geheel breder
   dan het scherm en kon je de pagina zijwaarts slepen. Met width:auto
   houdt een blok rekening met zijn eigen marges. */
@media (max-width:640px){
  .case-clients{width:auto;max-width:100%;margin-inline:0}
  .case-clients a{flex:1 1 100%}
  .client-section{width:auto}
}

/* ---------- Dit al UPgemerkt? Drie staande video's ----------
   Volgens de schets: drie verticale filmpjes naast elkaar, de middelste
   hoger dan de twee buitenste, en ze overlappen elkaar een beetje. De
   middelste ligt bovenop. Op een telefoon vallen de verschuiving en de
   overlap weg, want daar staan ze onder elkaar. */
.upshow{padding-block:clamp(56px,8vw,96px) clamp(80px,10vw,130px);overflow:hidden}
.upshow__eyebrow{text-align:center}
.upshow__kop{
  text-align:center;font-family:var(--ff-head);font-weight:700;
  font-size:clamp(1.9rem,5vw,3.1rem);line-height:1.06;margin:0 0 14px;
}
.upshow__lede{
  text-align:center;color:var(--muted);max-width:34em;
  margin:0 auto clamp(38px,6vw,62px);font-size:1rem;
}

.upshow__rij{
  display:flex;justify-content:center;align-items:flex-start;
  padding-top:52px;padding-bottom:44px;
}
.upshow__kaart{
  margin:0;flex:0 0 clamp(190px,23vw,290px);position:relative;
  transition:transform .3s ease;
}
.upshow__kaart video{
  display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  background:#000;border-radius:18px;border:1px solid var(--line-2);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
}
/* de middelste hoger en bovenop, de buitenste iets lager */
.upshow__kaart--midden{transform:translateY(-46px);z-index:3}
.upshow__kaart--zij{transform:translateY(34px);z-index:1}
/* de overlap: de buitenste schuiven naar de middelste toe */
.upshow__kaart--zij:first-child{margin-right:clamp(-52px,-4vw,-24px)}
.upshow__kaart--zij:last-child{margin-left:clamp(-52px,-4vw,-24px)}
.upshow__kaart--midden:hover{transform:translateY(-56px)}
.upshow__kaart--zij:hover{transform:translateY(24px);z-index:4}

.upshow__kaart figcaption{
  margin-top:16px;text-align:center;display:grid;gap:3px;
}
.upshow__kaart figcaption strong{
  font-family:var(--ff-head);font-size:1.02rem;
}
.upshow__kaart figcaption span{color:var(--muted);font-size:.84rem;line-height:1.45}
.upshow__kaart figcaption a{
  margin-top:6px;color:var(--gold);font-family:var(--ff-head);
  font-weight:600;font-size:.84rem;text-decoration:none;
}
.upshow__kaart figcaption a:hover{text-decoration:underline}
.upshow__kaart figcaption a::after{content:" \2192"}

/* Op een telefoon onder elkaar, zonder verschuiving en zonder overlap. */
@media (max-width:760px){
  .upshow__rij{flex-direction:column;align-items:center;gap:38px;padding:0}
  .upshow__kaart,
  .upshow__kaart--midden,
  .upshow__kaart--zij{
    transform:none;flex:0 0 auto;width:min(310px,100%);margin:0;
  }
  .upshow__kaart--midden:hover,.upshow__kaart--zij:hover{transform:none}
  .upshow{padding-block:clamp(48px,8vw,70px)}
}

/* Wie liever geen beweging ziet, krijgt ze ook niet. */
@media (prefers-reduced-motion:reduce){
  .upshow__kaart{transition:none}
  .upshow__kaart--midden:hover{transform:translateY(-46px)}
  .upshow__kaart--zij:hover{transform:translateY(34px)}
}

/* De gratis scan als tweede actie in het aanbodmenu. Iets rustiger dan
   de boekingsknop, want boeken is de sterkere stap. */
.drop__menu .drop__actie--scan{color:var(--gold);font-weight:600}
.drop__menu .drop__actie--scan:hover{background:rgb(var(--gold-rgb) / .12)}

/* ---------- Uitleg bij de scan en de contactstappen ---------- */
.scan-uitleg{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:34px 0 26px}
.scan-uitleg article{border:1px solid var(--line-2);border-radius:14px;padding:20px 22px;
background:var(--surface-2)}
.scan-uitleg h3{font-family:var(--ff-head);font-size:1rem;margin:0 0 7px}
.scan-uitleg p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.scan-uitleg__voet{color:var(--muted);font-size:.9rem;line-height:1.65;
border-left:2px solid rgb(var(--gold-rgb) / .5);padding-left:16px;margin:0}

.contact-stappen{display:grid;gap:22px;margin:32px 0 26px}
.contact-stappen article{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
align-items:start}
.contact-stappen b{grid-row:span 2;font-family:var(--ff-head);font-size:1.5rem;
color:rgb(var(--gold-rgb) / .55);line-height:1}
.contact-stappen h3{font-family:var(--ff-head);font-size:1.05rem;margin:0}
.contact-stappen p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}
.contact-stappen__voet{color:var(--muted);font-size:.9rem;line-height:1.65;
border-left:2px solid rgb(var(--gold-rgb) / .5);padding-left:16px;margin:0}

@media (max-width:640px){
  .scan-uitleg{grid-template-columns:1fr;gap:14px}
  .contact-stappen article{grid-template-columns:1fr;gap:4px}
  .contact-stappen b{grid-row:auto}
}

/* De sociale kanalen in de voet. Dit is ook wat Google gebruikt om te zien
   dat die profielen bij dit bedrijf horen. */
.foot__socials{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.foot__socials a{color:var(--muted);font-size:.86rem;text-decoration:none}
.foot__socials a:hover{color:var(--gold)}

/* ---------- Bestandsveld voor het cv ----------
   Het standaard bestandsveld van de browser past niet bij de rest van
   het formulier, dus geven we het dezelfde behandeling als de andere
   velden. De knop zelf laten we door de browser tekenen, dat werkt
   betrouwbaarder dan hem verstoppen achter een eigen knop. */
.field--bestand input[type=file]{
  width:100%;padding:11px 13px;font:inherit;font-size:.92rem;
  /* Zelfde reden als bij de andere velden: in een lichte sectie kantelt
     --text mee en stond de bestandsnaam zwart op zwart. */
  background:var(--veld-vlak);color:var(--veld-tekst);
  border:1px dashed var(--veld-rand);border-radius:var(--radius-sm);
  cursor:pointer;
}
.field--bestand input[type=file]:hover{border-color:rgb(var(--gold-rgb) / .5)}
.field--bestand input[type=file]:focus{outline:none;border-color:var(--gold)}
.field--bestand input[type=file]::file-selector-button{
  margin-right:12px;padding:7px 14px;border:0;border-radius:100px;
  background:rgb(var(--gold-rgb) / .16);color:var(--gold);
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
}
.field--bestand input[type=file]::file-selector-button:hover{
  background:rgb(var(--gold-rgb) / .26);
}
.veld__bij{font-weight:400;color:var(--muted);font-size:.82rem}
.veld__hint{display:block;margin-top:7px;font-size:.82rem;color:var(--muted)}

/* Aantal openstaande vacatures naast Jobs in het menu. Een bezoeker ziet
   meteen dat er echt iets openstaat, en niet enkel een lege jobspagina. */
.nav__telling{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;margin-left:7px;padding:0 5px;
  border-radius:100px;background:var(--gold);color:#101010;
  font-size:0.78rem;font-weight:700;line-height:1;
  vertical-align:middle;transform:translateY(-1px);
}
/* In het uitgeklapte menu op telefoon staat de link over de volle breedte,
   dus schuift het bolletje netjes naar rechts in plaats van tegen het woord. */
@media (max-width:860px){
  .nav__links > a[href$="jobs"]{display:flex;align-items:center;justify-content:space-between}
  .nav__telling{margin-left:auto}
}

/* ---------- Leesbreedte van lange teksten ----------
   Op de vacaturepagina liepen de regels tot 113 tekens door. Een oog
   verliest dan zijn plaats bij het terugspringen naar de volgende regel,
   en dat is precies wat lange teksten vermoeiend maakt. 45 tot 75 tekens
   is de comfortabele band; 58ch komt hier op ongeveer 73 tekens uit.
   Dit raakt elke pagina met lange tekst: de vacature, de blogartikels,
   het privacybeleid, de voorwaarden en de cases. Koppen, beelden en
   blokken houden hun volle breedte. */
.rijk p, .rijk ul, .rijk ol{max-width:58ch}

/* Dezelfde reden, voor de kleine tekst onder formulieren en in de voet. */
.form__klein, .veld__hint, .ai-note, .check span{max-width:62ch}
.ai-note{margin-inline:auto}

/* ---------- Wie zijn toestel om meer contrast vraagt, krijgt het ----------
   In macOS staat dat onder Toegankelijkheid, Beeldscherm, Contrast verhogen.
   Windows en Android hebben hetzelfde. Wie die knop aanzet, heeft er een
   reden voor. De browser vertelt ons dat, dus gebruiken we het: de grijze
   tekst wordt bijna wit, de lijnen worden duidelijker en de knopranden
   dikker. Voor alle anderen verandert er niets. */
@media (prefers-contrast: more) {
  :root{
    --muted:#D8D8DC;
    --line:rgba(255,255,255,.28);
    --line-2:rgba(255,255,255,.42);
  }
  body{color:#FFFFFF}
  .rijk p, .rijk ul, .rijk ol, .lede, .sec__lede{color:#E4E4E8}
  .foot__note, .foot__onder, .foot__onder a, .form__klein, .veld__hint{color:#C9C9CF}
  .btn--ghost, .kaart, .aanbod, .boek{border-width:2px}
  a:not(.btn){text-decoration:underline;text-underline-offset:3px}
}

/* ---------- Beelden op de Wedding Event Podcast-pagina ---------- */
.wep__beeld{margin:0}
.wep__beeld img{
  width:100%;max-width:614px;height:auto;display:block;
  border-radius:var(--radius);border:1px solid var(--line-2);
}

/* ---------- Mobiel nagemeten op 412 pixels ----------
   Gevonden door elke pagina in een kader van 412 bij 915 te laden en per
   element de plaats op te meten. Geen enkele pagina liep horizontaal over,
   maar deze drie zaken kwamen er wel uit. */

/* 1. Safari zoomt in zodra je een veld aantikt dat kleiner is dan 16px, en
      zoomt daarna niet terug uit. Die regel stond al in styles.css, maar ze
      werkte nergens: `.form input` weegt zwaarder dan het kale `input`, dus
      bleven de velden op .96rem staan. Het bestandsveld was zelfs .92rem en
      stond helemaal buiten de regel. Nu wel met hetzelfde gewicht, zodat de
      sollicitatie en het contactformulier op een telefoon stil blijven. */
@media (max-width:640px){
  .form input,.form select,.form textarea,
  .field--bestand input[type=file]{font-size:1rem}
}

/* 2. Duimmaat. Apple houdt 44 pixels aan, Google 48. De links onderaan
      stonden op 23 en de pijlen van de agenda op 38. De hoogte groeit,
      de letter niet, dus het beeld blijft hetzelfde. */
@media (max-width:760px){
  .foot__links{gap:2px}
  .foot__links a,
  .foot__socials a{min-height:44px;display:inline-flex;align-items:center}
  .res__pijl{width:44px;height:44px}
  .brand{min-height:44px}
  body.wep .wep-text-link{min-height:44px}
}

/* ---------- Staande foto's in een drieluik ----------
   .trio__vak img staat vast op 4:3, liggend. Modefoto's zijn staand, en in
   een liggend kader verlies je hoofd en voeten, precies wat je wil tonen.
   Deze variant maakt het kader staand, met dezelfde verhouding als de foto. */
.trio--staand .trio__vak img{aspect-ratio:2/3}
@media (max-width:760px){
  /* Op een telefoon staan ze onder elkaar. Een volle 2:3 wordt dan erg hoog,
     dus daar iets minder hoog, zodat je niet eindeloos moet scrollen. */
  .trio--staand .trio__vak img{aspect-ratio:3/4}
}

/* Drie staande foto's naast elkaar met de gewone tussenruimte van 22 pixels
   lezen als één lange strook in plaats van als drie aparte beelden. Meer lucht
   ertussen, meer ruimte boven het blok en een marge onder de bijschriften
   zodat de volgende sectie er niet tegenaan plakt. */
.trio--staand{
  gap:clamp(26px,3.2vw,44px);
  margin-top:clamp(34px,5vw,64px);
  padding-bottom:clamp(40px,6vw,76px);
}
.trio--staand .trio__vak figcaption{margin-top:16px}

/* ===========================================================
   Vraagknop rechtsonder. Geen extern script, geen cookie:
   een rond knopje dat een kaartje opent met het gezicht van
   Annouk, daaronder drie manieren om contact te nemen.
   =========================================================== */
.vraag{
  position:fixed;right:24px;bottom:var(--vraag-bodem,24px);z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-family:var(--ff-body);transition:bottom .25s ease
}

/* Het kaartje met de begroeting */
.vraag__kaart{
  display:none;width:min(304px,calc(100vw - 32px));
  background:#fff;color:#101010;border-radius:14px;padding:16px;
  box-shadow:0 14px 44px rgba(0,0,0,.3)
}
.vraag__wie{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.vraag__foto{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.vraag__naam{margin:0;font-family:var(--ff-head);font-size:.94rem;line-height:1.3;color:#5B5B5B;font-weight:400}
.vraag__naam strong{font-weight:600;color:#101010}
.vraag__tekst{margin:0;font-size:.9rem;line-height:1.55;color:#3C3C3C}
.vraag__groet{display:block;margin-bottom:2px}

/* De drie knoppen, elk apart en rechts uitgelijnd */
.vraag__acties{display:none;flex-direction:column;align-items:flex-end;gap:7px}
.vraag__acties a{
  display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:999px;
  font-family:var(--ff-head);font-weight:600;font-size:.88rem;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .16s ease,background .16s ease,color .16s ease
}
.vraag__acties a:hover{transform:translateY(-2px)}
.vraag__acties a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.vraag__acties svg{width:17px;height:17px;flex:0 0 auto}
.vraag__acties .is-geel{background:var(--gold);color:#101010}
.vraag__acties .is-geel:hover{background:var(--gold-lt)}
.vraag__acties .is-wit{background:#fff;color:#101010}
.vraag__acties .is-wit:hover{background:#101010;color:#fff}
.vraag__wa{color:#1EA952}
.vraag__acties .is-wit:hover .vraag__wa{color:#4ADE80}

.vraag.is-open .vraag__kaart{display:block}
.vraag.is-open .vraag__acties{display:flex}
.vraag.is-open .vraag__kaart,.vraag.is-open .vraag__acties a{animation:vraagOp .2s ease both}
.vraag.is-open .vraag__acties a:nth-child(2){animation-delay:.04s}
.vraag.is-open .vraag__acties a:nth-child(3){animation-delay:.08s}
@keyframes vraagOp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* De knop zelf */
.vraag__knop{
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);color:#101010;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.34);
  transition:background .18s ease,transform .18s ease
}
.vraag__knop:hover{background:var(--gold-lt);transform:translateY(-2px)}
.vraag__knop:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vraag__knop svg{width:26px;height:26px}
.vraag__kruis{display:none}
.vraag.is-open .vraag__praat{display:none}
.vraag.is-open .vraag__kruis{display:block;width:22px;height:22px}

@media (prefers-reduced-motion:reduce){
  .vraag.is-open .vraag__kaart,.vraag.is-open .vraag__acties a{animation:none}
  .vraag__knop:hover,.vraag__acties a:hover{transform:none}
}
@media (max-width:600px){.vraag{right:16px;bottom:var(--vraag-bodem,16px)}}
@media print{.vraag{display:none}}