/* Homepage v2 - bouwt voort op style.css.
   Concept: een schermvullende echte foto als binnenkomer, warm hout als tweede accent naast het donkerblauw,
   echte projecten met diepte (parallax) en een voor-en-na-schuif. Geen bouwanimatie meer op de achtergrond. */

:root{
  --wood:#d9a066;        /* warm houtaccent uit de foto's */
  --wood-soft:#f2c993;
  --night:#050f22;
}
.home{background:
  radial-gradient(1200px 600px at 85% 0%,rgba(217,160,102,.07),transparent 60%),
  linear-gradient(rgba(150,185,255,.04) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,rgba(150,185,255,.04) 1px,transparent 1px) 0 0/32px 32px,
  var(--bg)}
.home main{position:relative;z-index:2}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Binnenkomer ===== */
.x-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-top:calc(var(--nav) + env(safe-area-inset-top,0px))}
.x-hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--night)}
.x-hero-img{position:absolute;inset:-6% 0 0;width:100%;height:112%;object-fit:cover;object-position:50% 40%;transform-origin:50% 40%;animation:heroZoom 14s cubic-bezier(.2,.6,.2,1) both;will-change:transform}
@keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.x-hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,15,34,.55) 0%,rgba(5,15,34,0) 28%,rgba(5,15,34,.2) 55%,rgba(5,15,34,.92) 100%),
  linear-gradient(90deg,rgba(5,15,34,.78) 0%,rgba(5,15,34,.35) 45%,rgba(5,15,34,0) 75%)}
.x-hero-glow{position:absolute;left:55%;top:20%;width:40vw;height:40vw;max-width:620px;max-height:620px;border-radius:50%;background:radial-gradient(circle,rgba(242,201,147,.18),transparent 65%);filter:blur(10px);z-index:1;animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
.x-hero-inner{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:clamp(40px,9vh,96px)}
.x-hero-text{max-width:760px;min-width:0}
.x-h1{margin:0;font-family:var(--f-display);text-transform:uppercase;font-weight:800;line-height:.9;letter-spacing:-.01em;font-size:clamp(3.2rem,8.6vw,7.6rem);text-wrap:balance}
.x-kicker{display:flex;align-items:center;gap:12px;font-weight:500;font-size:.8rem;line-height:1.4;color:var(--wood-soft);margin-bottom:22px;letter-spacing:.18em}
.x-kicker::before{content:"";width:40px;height:2px;background:var(--wood)}
.x-line{display:block}
.x-w{display:inline-block;animation:wordIn .9s cubic-bezier(.16,1,.3,1) both}
.x-line:nth-of-type(2) .x-w:nth-child(1){animation-delay:.05s}
.x-line:nth-of-type(2) .x-w:nth-child(2){animation-delay:.12s}
.x-line:nth-of-type(2) .x-w:nth-child(3){animation-delay:.19s}
.x-line:nth-of-type(3) .x-w:nth-child(1){animation-delay:.32s}
.x-line:nth-of-type(3) .x-w:nth-child(2){animation-delay:.39s}
.x-line:nth-of-type(3) .x-w:nth-child(3){animation-delay:.46s}
@keyframes wordIn{from{opacity:0;transform:translateY(40%) rotate(2deg)}to{opacity:1;transform:none}}
.x-warm{color:var(--wood-soft)}
.x-sub{margin-top:24px;max-width:36em;font-size:clamp(1.05rem,1.4vw,1.25rem);color:#dfe6f3;animation:fadeUp .9s .55s both}
.x-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;animation:fadeUp .9s .7s both}
.x-cta .btn.ghost{background:rgba(5,15,34,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.x-proof{flex:none;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;background:rgba(5,15,34,.62);border:1px solid rgba(242,201,147,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-decoration:none;color:var(--ink);animation:fadeUp .9s .9s both;transition:border-color .25s,transform .25s var(--ease)}
.x-proof:hover{border-color:var(--wood);transform:translateY(-3px)}
.x-proof-pics{display:flex}
.x-proof-pics img{width:52px;height:52px;object-fit:cover;border:2px solid var(--night);margin-left:-14px}
.x-proof-pics img:first-child{margin-left:0}
.x-proof-text{display:flex;flex-direction:column;line-height:1.2}
.x-proof-text b{font-family:var(--f-display);text-transform:uppercase;font-size:1.3rem;letter-spacing:.03em}
.x-proof-text span{font-size:.85rem;color:var(--ink-soft)}
.x-proof .icon{color:var(--wood-soft)}

.x-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-soft);text-decoration:none;font-size:.62rem}
.x-scroll i{width:1px;height:36px;background:linear-gradient(var(--wood-soft),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== Vertrouwen ===== */
.x-trust{background:var(--night);border-block:1px solid rgba(242,201,147,.18)}
.x-trust-list{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:0}
.x-trust-list li{display:flex;align-items:center;gap:14px;padding:22px 18px;border-right:1px solid var(--line);min-width:0}
.x-trust-list li:last-child{border-right:0}
.x-trust-list .icon{width:26px;height:26px;color:var(--wood-soft);stroke-width:1.8}
.x-trust-list span{display:flex;flex-direction:column;color:var(--ink-soft);font-size:.92rem;line-height:1.35}
.x-trust-list b{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;color:var(--ink)}

/* ===== Koppen ===== */
.x-head{max-width:640px;margin-bottom:40px}
.x-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--wood-soft)}
.x-eyebrow::before{content:"";width:28px;height:2px;background:var(--wood)}
.x-head h2{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:.92;margin-top:14px;text-wrap:balance}
.x-head p{margin-top:18px;color:var(--ink-soft);font-size:1.1rem;max-width:36em}

/* ===== Projecten in beeld ===== */
.x-work{padding-block:110px 90px}
.x-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:240px;gap:16px}
.x-tile{position:relative;display:block;overflow:hidden;border:1px solid var(--line);background:var(--panel);text-decoration:none;color:var(--ink);will-change:transform}
.x-tile img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transition:transform .8s var(--ease)}
.x-tile:hover img{transform:scale(1.05)}
.x-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(5,15,34,.85))}
.t-big{grid-column:span 2;grid-row:span 2}
.t-wide{grid-column:span 2}
.x-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:2px}
.x-cap .mono{color:var(--wood-soft);font-size:.66rem}
.x-cap b{font-family:var(--f-display);text-transform:uppercase;font-size:1.45rem;letter-spacing:.02em;line-height:1}
.x-more{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}

/* ===== Voor en na ===== */
.x-ba{padding-block:90px;background:linear-gradient(180deg,transparent,rgba(5,15,34,.6) 20%,rgba(5,15,34,.6) 80%,transparent)}
.x-ba-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.x-ba-grid .x-head{margin-bottom:0}
.x-ba-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.x-ba-steps li{display:flex;align-items:center;gap:14px;font-weight:500}
.x-ba-steps span{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;background:var(--wood);color:var(--night);font-family:var(--f-display);font-weight:800}
.x-slider{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;border:1px solid rgba(242,201,147,.3);box-shadow:0 30px 60px rgba(0,0,0,.45);user-select:none;touch-action:pan-y}
.x-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.x-before-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.x-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--wood-soft);transform:translateX(-1px);pointer-events:none}
.x-handle svg{max-width:none;position:absolute;top:50%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%);padding:12px;background:var(--wood);border-radius:50%;fill:none;stroke:var(--night);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.x-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.x-range:focus-visible+*{outline:none}
.x-slider:focus-within{outline:3px solid var(--blue-soft);outline-offset:3px}
.x-tag{position:absolute;top:14px;z-index:2;background:rgba(5,15,34,.8);padding:6px 10px;font-size:.66rem;color:var(--ink);pointer-events:none}
.x-tag-l{left:14px}.x-tag-r{right:14px}

/* ===== Overige secties: nu zonder bouwachtergrond, dus breder ===== */
.home .sec{padding-block:90px}
.home .glass.col,.home .glass.col-wide{max-width:none}
.home .rule{background:var(--wood)}
.home .sec-head .mono{color:var(--wood-soft)}

/* Diensten */
.x-services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.x-svc{display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);min-width:0;transition:border-color .25s,transform .25s var(--ease)}
.x-svc:hover{border-color:var(--wood);transform:translateY(-4px)}
.x-svc img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.x-svc div{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.x-svc h3{font-size:1.5rem;font-weight:800}
.x-svc p{color:var(--ink-soft);font-size:.96rem}
.x-svc a{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--wood);font-weight:600}
.x-note{margin-top:22px;border:1px solid var(--line);border-left:3px solid var(--wood);background:rgba(5,15,34,.5);padding:20px 24px;max-width:900px}
.x-note h3{font-size:1.4rem;font-weight:800}
.x-note p{margin-top:8px;color:var(--ink-soft)}

/* Over mij */
.home .about{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:40px}
.home .about .ph{aspect-ratio:3/4;border-color:rgba(242,201,147,.3)}
.home .about .ph::before{display:none}
.home .about-text{max-width:40em}
.about-quote{margin:22px 0;padding:6px 0 6px 18px;border-left:3px solid var(--wood);font-family:var(--f-display);text-transform:uppercase;font-weight:700;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.15;color:var(--wood-soft)}
.home .about-text .sign{color:var(--ink)}
@media (max-width:600px){.home .about{grid-template-columns:1fr}.home .about .ph{max-width:280px}}

/* Verwachtingen */
.x-promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:pr}
.x-promises li{counter-increment:pr;background:var(--glass);border:1px solid var(--line);padding:24px;min-width:0;position:relative}
.x-promises li::before{content:"0" counter(pr);display:block;font-family:var(--f-mono);font-size:.75rem;color:var(--wood-soft);margin-bottom:10px;letter-spacing:.14em}
.x-promises h3{font-size:1.45rem;font-weight:800}
.x-promises p{margin-top:8px;color:var(--ink-soft);font-size:.96rem}
#afspraken .mini-cta{margin-top:26px}

/* Reveal: zichtbaar in rust, schuift alleen in als JS draait */
.js-anim [data-reveal]{opacity:0;transform:translateY(28px)}
.js-anim [data-reveal].is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ===== Responsief ===== */
@media (max-width:1100px){
  .x-services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-trust-list li:nth-child(2){border-right:0}
  .x-trust-list li:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .x-hero-inner{flex-direction:column;align-items:flex-start}
  .x-hero-media::after{background:linear-gradient(180deg,rgba(5,15,34,.5) 0%,rgba(5,15,34,.1) 30%,rgba(5,15,34,.7) 62%,rgba(5,15,34,.95) 100%)}
  .x-hero-img{object-position:42% 40%}
  .x-scroll{display:none}
  .x-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}
  .x-ba-grid{grid-template-columns:1fr;gap:28px}
  .x-promises{grid-template-columns:1fr 1fr}
  .home .sec{padding-block:64px}
  .x-work{padding-block:72px 60px}
}
@media (max-width:600px){
  .x-hero{min-height:calc(100svh - var(--callbar))}
  .x-cta .btn{flex:1 1 100%}
  .x-proof{width:100%}
  .x-trust-list{grid-template-columns:1fr}
  .x-trust-list li{border-right:0;border-bottom:1px solid var(--line)}
  .x-trust-list li:last-child{border-bottom:0}
  .x-bento{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .t-big{grid-column:span 2;grid-row:span 2}
  .x-cap b{font-size:1.1rem}
  .x-services,.x-promises{grid-template-columns:1fr}
  .x-slider{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .x-hero-img,.x-hero-glow,.x-w,.x-sub,.x-cta,.x-proof,.x-scroll i{animation:none}
  .x-tile img,.x-svc,.x-proof{transition:none}
  .js-anim [data-reveal]{opacity:1;transform:none}
}

/* Mobiele balk: foto sturen als hoofdactie, bellen als tweede */
@media (max-width:900px){.callbar.callbar-2{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}.callbar.callbar-2 .btn{width:100%}}
.x-proof-pics img{object-position:42% 42%}

/* ===== Keuzehulp (3 klikken) en "wat gebeurt er na je bericht" ===== */
.x-micro{margin-top:14px;font-size:.92rem;color:var(--wood-soft);display:flex;align-items:center;gap:8px;animation:fadeUp .9s .8s both}
.x-micro::before{content:"";width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.x-quiz{padding-block:90px;background:linear-gradient(180deg,transparent,rgba(5,15,34,.65) 18%,rgba(5,15,34,.65) 82%,transparent)}
.x-quiz-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.x-quiz-grid .x-head{margin-bottom:0}
.x-next{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;counter-reset:n}
.x-next li{display:flex;gap:14px;align-items:flex-start}
.x-next li>span{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;background:var(--wood);color:var(--night);font-family:var(--f-display);font-weight:800}
.x-next b{display:block;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.12rem}
.x-next div{color:var(--ink-soft);font-size:.95rem;line-height:1.4}
.x-next.is-compact{margin-top:24px;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.x-quiz-card{position:relative;background:var(--glass);border:1px solid rgba(242,201,147,.3);padding:clamp(22px,3vw,34px);box-shadow:0 30px 60px rgba(0,0,0,.35);min-width:0}
.x-quiz-progress{height:4px;background:var(--line);margin:-4px 0 16px}
.x-quiz-progress i{display:block;height:100%;width:0;background:var(--wood);transition:width .4s var(--ease)}
.x-quiz-step{color:var(--wood-soft);font-size:.7rem;margin-bottom:6px}
.x-q{border:0;margin:0 0 18px;padding:0;min-width:0}
.x-q legend{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1;margin-bottom:16px;padding:0}
.x-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.x-opts label{position:relative;cursor:pointer;min-width:0}
.x-opts input{position:absolute;opacity:0;width:1px;height:1px}
.x-opts span{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:58px;padding:12px 14px;border:1px solid var(--line);background:rgba(5,15,34,.55);font-weight:600;line-height:1.25;transition:border-color .2s,background-color .2s,transform .2s var(--ease)}
.x-opts small{font-weight:400;font-size:.82rem;color:var(--ink-soft)}
.x-opts label:hover span{border-color:var(--wood-soft);transform:translateY(-2px)}
.x-opts input:checked+span{border-color:var(--wood);background:rgba(217,160,102,.16)}
.x-opts input:focus-visible+span{outline:3px solid var(--blue-soft);outline-offset:2px}
.x-done-title{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:2rem;line-height:1}
.x-summary{margin:12px 0 18px;color:var(--ink-soft);border-left:3px solid var(--wood);padding-left:12px}
.x-hint{margin-top:12px;font-size:.88rem;color:var(--ink-soft)}
.x-quiz-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;border-top:1px solid var(--line);padding-top:14px}
.x-back{min-height:44px;padding:0 4px;background:none;border:0;color:var(--ink);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.x-back[hidden]{display:none!important}
.x-quiz-alt{font-size:.9rem;color:var(--ink-soft)}
.x-quiz-alt a{color:var(--ink);text-decoration-color:var(--wood);text-underline-offset:3px}
/* Zonder JavaScript staan alle vragen onder elkaar; met JavaScript één tegelijk */
.x-quiz-card.is-js .x-q{display:none}
.x-quiz-card.is-js .x-q.is-on{display:block;animation:fadeUp .4s both}
@media (max-width:900px){
  .x-quiz-grid{grid-template-columns:1fr;gap:28px}
  .x-next.is-compact{grid-template-columns:1fr 1fr}
  .x-quiz{padding-block:64px}
}
@media (max-width:600px){
  .x-opts{grid-template-columns:1fr}
  .x-next.is-compact{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.x-quiz-card.is-js .x-q.is-on,.x-micro{animation:none}.x-opts span{transition:none}}

/* ===== Hover: diensten en projecttegels worden iets groter (alleen met muis) ===== */
@media (hover:hover) and (pointer:fine){
  .x-services > li.x-svc,
  .js-anim .x-services > li.x-svc.is-in{transition:opacity .8s var(--ease),transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease)}
  .x-services > li.x-svc:hover,
  .x-services > li.x-svc:focus-within,
  .js-anim .x-services > li.x-svc.is-in:hover,
  .js-anim .x-services > li.x-svc.is-in:focus-within{position:relative;z-index:2;transform:scale(1.04);border-color:var(--wood);box-shadow:0 22px 44px -20px rgba(5,15,34,.65)}
  .x-bento > a.x-tile{transition:transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease)}
  .x-bento > a.x-tile:hover,
  .x-bento > a.x-tile:focus-visible{z-index:2;transform:scale(1.04);border-color:var(--wood);box-shadow:0 22px 44px -20px rgba(5,15,34,.65)}
}
@media (prefers-reduced-motion:reduce){
  .x-services > li.x-svc:hover,.x-services > li.x-svc:focus-within,
  .js-anim .x-services > li.x-svc.is-in:hover,.js-anim .x-services > li.x-svc.is-in:focus-within,
  .x-bento > a.x-tile:hover,.x-bento > a.x-tile:focus-visible{transform:none}
}

/* ===== Voor en na in de keuzehulp (AI-impressie met schuif) ===== */
.x-ba-fig{margin:28px 0 0}
.x-ba-fig figcaption{margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:.9rem;color:var(--ink-soft)}
.x-ba-fig figcaption .mono{font-size:.66rem;color:var(--wood-soft);border:1px solid rgba(242,201,147,.35);padding:3px 7px}
.x-ba-fig .x-slider{box-shadow:0 24px 48px rgba(0,0,0,.4)}
@media (min-width:901px){.x-quiz-card{position:sticky;top:calc(var(--nav) + 24px)}}
@media (max-width:600px){.x-ba-fig .x-slider{aspect-ratio:16/10}}

/* ===== Binnenkomer past ook op lage laptopschermen ===== */
/* De kop schaalt nu mee met de breedte én de hoogte van het scherm */
.x-h1{font-size:clamp(3.2rem,min(8.6vw,15vh),7.6rem)}
@media (min-width:901px) and (max-height:820px){
  .x-hero{padding-top:calc(var(--nav) + 28px + env(safe-area-inset-top,0px))}
  .x-hero-inner{padding-bottom:clamp(28px,5vh,48px)}
  .x-kicker{margin-bottom:14px}
  .x-sub{margin-top:16px}
  .x-cta{margin-top:22px}
  .x-micro{margin-top:10px}
  .x-scroll{display:none}
}

/* ===== Welkomstkop + reviews (nov 2026) ===== */
.x-h1{font-size:clamp(2.7rem,min(6.6vw,12.5vh),6.4rem)}
.x-line:nth-of-type(3) .x-w:nth-child(4){animation-delay:.53s}
.x-line:nth-of-type(3) .x-w:nth-child(5){animation-delay:.6s}
.x-rating{margin-top:18px;display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:.95rem;animation:fadeUp .9s .7s both}
.x-rating b{font-family:var(--f-display);font-size:1.15rem}
.x-rating:hover span:last-child{text-decoration:underline;text-decoration-color:var(--wood);text-underline-offset:4px}
.x-rating + .x-micro{margin-top:8px}
.x-reviews{padding-block:30px 100px}
.x-ba-fig .x-slider{aspect-ratio:4/3}
@media (max-width:700px){.x-reviews{padding-block:20px 64px}}
@media (prefers-reduced-motion:reduce){.x-rating{animation:none}}

#afspraken .x-head{max-width:none}