Klantquote met resultaatgetal Nieuw

<!-- Klantquote met resultaatgetal · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xrq">
  <div class="xrq__inner">
    <figure class="xrq__quote">
      <span class="xrq__eyebrow">Case · Dakwerken Mulder, Alkmaar</span>
      <blockquote class="xrq__text">"Vroeger kwamen aanvragen vooral via de buurvrouw. Nu bellen mensen uit Heiloo en Castricum die ons via de site vinden, met foto's van hun dak er al bij."</blockquote>
      <figcaption class="xrq__who"><span class="xrq__av" aria-hidden="true">JM</span><span><b>Jeroen Mulder</b>eigenaar, 3e generatie dakdekker</span></figcaption>
    </figure>
    <div class="xrq__result">
      <strong class="xrq__num" data-to="38">+0%</strong>
      <span class="xrq__lab">meer offerteaanvragen</span>
      <p class="xrq__sub">Van gemiddeld 21 naar 29 per maand, gemeten over het eerste kwartaal na livegang van de nieuwe site.</p>
      <div class="xrq__chart" aria-hidden="true">
        <i style="--h:62%"></i><i style="--h:70%"></i><i style="--h:58%"></i><i class="xrq__live" style="--h:78%"></i><i class="xrq__hi" style="--h:86%"></i><i class="xrq__hi" style="--h:94%"></i>
      </div>
      <div class="xrq__months"><span>apr</span><span>mei</span><span>jun</span><span>jul</span><span>aug</span><span>sep</span></div>
    </div>
  </div>
</div>
</div>

/* Klantquote met resultaatgetal · NedDev · eigen werk. */
.xrq{background:#f1ece4;color:#1f2a33;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xrq *{box-sizing:border-box}
.xrq__inner{max-width:1120px;margin:0 auto;padding:56px 32px;display:grid;grid-template-columns:1.45fr 1fr;gap:56px;align-items:center;min-height:420px}
.xrq__quote{margin:0}
.xrq__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a6541f;margin-bottom:20px}
.xrq__text{margin:0 0 28px;font-size:clamp(22px,2.6vw,32px);line-height:1.28;font-weight:500;letter-spacing:-.01em;text-indent:-.4em}
.xrq__who{display:flex;align-items:center;gap:14px;font-size:14px;color:#5a6670}
.xrq__who b{display:block;color:#1f2a33;font-size:15px}
.xrq__av{width:46px;height:46px;border-radius:50%;background:#1f2a33;color:#f1ece4;display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:.04em}
.xrq__result{border-left:2px solid #1f2a33;padding-left:36px}
.xrq__num{display:block;font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(56px,7vw,92px);line-height:1;color:#b8612c;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xrq__lab{display:block;font-weight:700;font-size:18px;margin-top:10px}
.xrq__sub{font-size:14px;line-height:1.5;color:#5a6670;margin:8px 0 22px;max-width:34ch}
.xrq__chart{display:flex;align-items:flex-end;gap:8px;height:80px;border-bottom:1px solid #1f2a33}
.xrq__chart i{flex:1;height:var(--h);background:#cfc4b4;transform-origin:bottom;transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.xrq__chart i:nth-child(2){transition-delay:.05s}.xrq__chart i:nth-child(3){transition-delay:.1s}.xrq__chart i:nth-child(4){transition-delay:.15s}.xrq__chart i:nth-child(5){transition-delay:.2s}.xrq__chart i:nth-child(6){transition-delay:.25s}
.xrq__chart .xrq__live,.xrq__chart .xrq__hi{background:#b8612c}
.xrq__live{position:relative}
.xrq__live::before{content:'livegang';position:absolute;left:-4px;top:-20px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:#1f2a33;white-space:nowrap}
.xrq.is-in .xrq__chart i{transform:scaleY(1)}
.xrq__months{display:flex;gap:8px;margin-top:6px}
.xrq__months span{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:#7c8790}
@media(prefers-reduced-motion:reduce){.xrq__chart i{transition:none}}
@media(max-width:820px){.xrq__inner{grid-template-columns:minmax(0,1fr);padding:36px 18px;gap:30px}.xrq__result{border-left:0;border-top:2px solid #1f2a33;padding:24px 0 0}}

// Klantquote met resultaatgetal · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xrq');if(!w)return;var n=w.querySelector('.xrq__num'),to=+n.getAttribute('data-to');
var red=matchMedia('(prefers-reduced-motion: reduce)').matches;
function run(){w.classList.add('is-in');if(red){n.textContent='+'+to+'%';return;}var t0=null;function f(t){if(!t0)t0=t;var p=Math.min(1,(t-t0)/1300),e=1-Math.pow(1-p,3);n.textContent='+'+Math.round(to*e)+'%';if(p<1)requestAnimationFrame(f);}requestAnimationFrame(f);}
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(e){if(e[0].isIntersecting){run();io.disconnect();}},{threshold:.3});io.observe(w);}else run();
}
init(document.querySelector('.jouw-container'));