@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/satoshi-700.woff2) format('woff2')}
  @font-face{font-family:'Satoshi';font-style:normal;font-weight:800 900;font-display:swap;src:url(fonts/satoshi-900.woff2) format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(fonts/inter-latin.woff2) format('woff2')}


  /* Vervangletters met dezelfde maat als Inter/Satoshi: geen verspringende tekst als de echte font binnenkomt (CLS).
     Maten berekend uit de fontbestanden t.o.v. Arial, 7 okt 2026. */
  @font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo'),local('Helvetica');size-adjust:106.4%;ascent-override:91.05%;descent-override:22.67%;line-gap-override:0%}
  @font-face{font-family:'Satoshi Fallback';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arimo Bold'),local('Helvetica Bold');size-adjust:97.4%;ascent-override:103.69%;descent-override:24.64%;line-gap-override:10.27%}
  @font-face{font-family:'Satoshi Fallback';font-weight:800 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arimo Bold'),local('Helvetica Bold');size-adjust:100.77%;ascent-override:100.23%;descent-override:23.82%;line-gap-override:9.92%}

  :root{
    /* #4A90B8 haalt geen 4,5:1 op wit — interactieve tekst/knoppen gebruiken --blauw-h (4,7:1), hover --blauw-d */
    --blauw:#4A90B8; --blauw-h:#3D7A9E; --blauw-d:#336685; --navy:#0F1B2D; --navy2:#1a2744;
    --licht:#E8F1F7; --warm:#FAF8F5; --warm2:#F3EFE9; --beige:#EDE3CE;
    --t1:#0F1B2D; --t2:#4a5568; --rand:#e2e8f0; --geel:#FBBC05;
    --r:14px; --kop:'Satoshi','Satoshi Fallback',sans-serif; --body:'Inter','Inter Fallback',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--t1);background:var(--warm);line-height:1.6;-webkit-font-smoothing:antialiased}
  img,video,canvas{max-width:100%;display:block}
  h1,h2,h3{font-family:var(--kop);line-height:1.15;letter-spacing:-0.02em}
  ::selection{background:var(--blauw);color:#fff}
  a{color:var(--blauw-h)}
  :focus-visible{outline:3px solid var(--blauw);outline-offset:2px;border-radius:4px}
  .knop{display:inline-block;background:var(--blauw-h);color:#fff !important;font-weight:700;font-size:15px;
    padding:13px 26px;border-radius:54px;text-decoration:none;border:none;cursor:pointer;font-family:var(--body);
    transition:background .2s,transform .2s}
  .knop:hover{background:var(--blauw-d);transform:translateY(-1px)}
  .knop.klein{padding:10px 20px;font-size:14px}
  .sectie{padding:96px 32px}
  .in{max-width:1200px;margin:0 auto}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--navy)}
  .eyebrow::before{content:"";display:inline-block;width:11px;height:11px;background:var(--blauw);-webkit-mask:url(favicon.svg) center/contain no-repeat;mask:url(favicon.svg) center/contain no-repeat}
  /* text-wrap:balance verdeelt een kop gelijk over de regels — voorkomt een los weeswoord op regel 2 (27 jul) */
  .sectie h2{font-size:clamp(28px,3.6vw,46px);font-weight:800;margin:14px 0 0;max-width:24ch;text-wrap:balance}
  .sectie .intro{font-size:17px;color:var(--t2);margin-top:16px;max-width:60ch}
  .g-badge{display:inline-flex;align-items:center;gap:9px;border-radius:54px;padding:9px 16px}
  .g-badge .st{color:var(--geel);letter-spacing:1px;font-size:13.5px}
  .g-badge b{font-size:15.5px}
  .g-badge span{font-size:12.5px}

  /* ── nav (glas → vast) ── */
  .nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
    gap:20px;padding:15px 32px;color:#fff;background:rgba(255,255,255,0.10);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.18);
    transition:background .3s,color .3s,border-color .3s}
  .nav.vast{background:rgba(250,248,245,0.92);color:var(--navy);border-color:var(--rand)}
  .nav .in{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
  /* Logo (v5.0): symbool als vorm + woordmerk als echte tekst in Satoshi Black, zodat het net zo scherp
     is als de rest van de site. Maten gemeten op het Affinity-woordmerk (98% gelijk). Sen 6 okt. */
  .logo{display:inline-flex;align-items:flex-start;font:900 32.5px/1 'Satoshi',sans-serif;letter-spacing:-0.0025em;
    color:inherit;text-decoration:none;white-space:nowrap}
  .logo .zon{width:1em;height:1.0389em;margin-right:.2087em;flex:none;fill:var(--blauw)}
  .logo span{margin-top:.0076em}
  .nav:not(.vast) .logo{color:#F3EFE9}
  .site-home .nav .logo{color:var(--navy)}
  @media (max-width:560px){.nav .logo{font-size:26px}}
  .nav ul{display:flex;gap:24px;align-items:center;list-style:none}
  .nav ul a{font-size:14px;font-weight:600;color:inherit;text-decoration:none}
  .nav ul a:hover{color:var(--blauw)}
  .nav ul a.actief{color:#9CC4DB}
  .nav.vast ul a.actief{color:var(--blauw-h)}
  .nav .rechts{display:flex;align-items:center;gap:18px}
  .nav .tel{font-size:13.5px;font-weight:700;color:inherit;text-decoration:none;opacity:0.92}
  .nav .tel .tel-ikoon{display:none}
  @media (max-width:900px){.nav .tel .tel-ikoon{display:block}}

  /* ── hero (optie 1, af) ── */
  .hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:center;background:var(--navy)}
  .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero::after{content:"";position:absolute;inset:0;background:
    radial-gradient(90% 60% at 30% 55%, rgba(15,27,45,0.30), transparent 65%),
    linear-gradient(180deg,rgba(15,27,45,0.38),rgba(15,27,45,0.04) 42%,rgba(15,27,45,0.62))}
  .hero .in{position:relative;z-index:5;width:100%;padding:40px 32px 90px}
  .kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.13);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.3);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:0.07em;
    text-transform:uppercase;border-radius:54px;padding:8px 16px;margin-bottom:18px}
  .kicker::before{content:"";display:inline-block;width:11px;height:11px;background:#9CC4DB;-webkit-mask:url(favicon.svg) center/contain no-repeat;mask:url(favicon.svg) center/contain no-repeat}
  .hero h1{color:#fff;font-size:clamp(32px,4.6vw,58px);font-weight:800;max-width:15ch;text-shadow:0 2px 24px rgba(15,27,45,0.4)}
  .hero p.sub{color:rgba(255,255,255,0.92);font-size:17px;margin:16px 0 26px;max-width:44ch}
  .hero .acties{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .knop.ghostw{background:rgba(255,255,255,0.13);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.45)}
  .knop.ghostw:hover{background:rgba(255,255,255,0.24)}
  .vinkrij{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
  .vinkrij span{color:rgba(255,255,255,0.92);font-size:13.5px;font-weight:600;text-shadow:0 1px 12px rgba(15,27,45,0.5)}
  .vinkrij span::before{content:"✓ ";color:#9CC4DB;font-weight:800}
  .glas{background:rgba(255,255,255,0.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.35);color:#fff}
  .kaartje{border-radius:16px;padding:18px 20px;max-width:290px;box-shadow:0 16px 50px rgba(15,27,45,0.25)}
  .kaartje .kop2{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;font-size:14.5px}
  .auto-tag{background:var(--licht);color:var(--blauw-h);font-size:11px;font-weight:700;padding:3px 10px;border-radius:54px}
  .balk{height:7px;border-radius:6px;background:rgba(127,127,127,0.25);margin:12px 0 8px;overflow:hidden}
  .balk i{display:block;height:100%;width:72%;background:var(--blauw);border-radius:6px;animation:vullen 4s ease-in-out infinite alternate}
  @keyframes vullen{from{width:34%}to{width:88%}}
  .kaartje .meta{display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,0.85)}
  .hero .kaart1{position:absolute;right:6%;top:20%;z-index:6}
  .hero .kaart2{position:absolute;right:13%;top:52%;z-index:6}
  .glas.g-badge b,.glas.g-badge span{color:#fff}
  .glas.g-badge span.st{color:var(--geel)}
  .zweef{animation:zweef 5s ease-in-out infinite alternate}
  .zweef2{animation:zweef 6s .8s ease-in-out infinite alternate}
  @keyframes zweef{from{transform:translateY(0)}to{transform:translateY(-14px)}}
  .statstrip{position:absolute;left:0;right:0;bottom:0;z-index:7;background:rgba(15,27,45,0.45);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,0.16)}
  .statstrip .rij{max-width:1200px;margin:0 auto;padding:14px 32px;display:flex;justify-content:space-between;
    gap:18px;flex-wrap:wrap;color:#fff;font-size:13.5px;font-weight:600}
  .statstrip .rij span::before{content:"✓ ";color:#9CC4DB;font-weight:800}
  .statstrip .rij .ster::before{content:"★ ";color:var(--geel)}
  section[id],div[id]{scroll-margin-top:84px}
  .knop{white-space:nowrap}

  /* ── waarom sunvio (B) ── */
  .waarom{background:#fff}
  .waarom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:44px}
  .wkaart{background:var(--warm);border:1px solid var(--rand);border-radius:var(--r);padding:28px}
  .wkaart .ik{width:48px;height:48px;border-radius:12px;background:var(--licht);color:var(--blauw);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .wkaart h3{font-size:16.5px;font-family:var(--body);font-weight:700}
  .wkaart p{font-size:14.5px;color:var(--t2);margin-top:6px}

  /* ── showroom (drie tabs, elk een loop-video) ── */
  .showcase{position:relative;background:var(--warm2)}
  .showcase-plak{padding:110px 32px 96px}
  .showcase-kop{text-align:center;margin-bottom:34px}
  .showcase-kop h2{font-size:clamp(26px,3.4vw,42px);font-weight:800;margin:12px auto 0;max-width:24ch;text-wrap:balance}
  .tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px;flex-wrap:wrap}
  .tab{font-family:var(--body);font-size:14.5px;font-weight:700;color:var(--t2);background:#fff;
    border:1px solid var(--rand);border-radius:54px;padding:13px 24px;cursor:pointer;transition:all .2s}
  .tab:hover{border-color:var(--blauw);color:var(--blauw)}
  .tab.actief{background:var(--navy);color:#fff;border-color:var(--navy)}
  .paneel{display:none}
  .paneel.actief{display:block}
  .paneel-link{display:inline-block;margin-top:18px;font-size:14px;font-weight:700;color:var(--blauw-h);text-decoration:none}
  .kader video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .showcase-grid{max-width:1200px;margin:0 auto;width:100%;display:grid;grid-template-columns:5fr 7fr;gap:52px;align-items:center}
  .stops{display:flex;flex-direction:column;gap:14px}
  .stop{padding:12px 0}
  .stop + .stop{border-top:1px solid var(--rand)}
  .stop .nr{font-size:11.5px;font-weight:700;letter-spacing:0.1em;color:var(--blauw-h);text-transform:uppercase}
  .stop h3{font-size:18px;font-weight:800;margin:4px 0 4px}
  .stop p{font-size:14px;color:var(--t2)}
  .kader{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(15,27,45,0.22);
    aspect-ratio:16/9;background:var(--navy)}

  /* ── binnenin ── */
  .binnenin{background:#fff}
  .binnenin .in{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:56px;align-items:center}
  .punten{display:flex;flex-direction:column;gap:26px;margin-top:34px}
  .punt{display:flex;gap:16px}
  .punt .ikoon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--licht);display:flex;
    align-items:center;justify-content:center;color:var(--blauw)}
  .punt h3{font-size:16px;font-weight:700;font-family:var(--body)}
  .punt p{font-size:14.5px;color:var(--t2);margin-top:3px}
  .binnenin img{border-radius:var(--r)}
  .binnenin figcaption{margin-top:12px;font-size:13px;color:var(--t2);text-align:center}

  /* ── kleurkiezer ── */
  .kleuren{background:var(--warm2)}
  .kleuren .in{display:grid;grid-template-columns:4fr 7fr;gap:56px;align-items:center}
  .stalen{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
  .staal{width:64px;height:64px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 6px rgba(15,27,45,0.18);
    cursor:pointer;transition:transform .2s,box-shadow .2s;padding:0}
  .staal:hover{transform:scale(1.08)}
  .staal.actief{box-shadow:0 0 0 3px var(--blauw),0 1px 6px rgba(15,27,45,0.18)}
  .staal-label{font-size:15px;font-weight:700;margin-top:18px}
  .staal-label em{font-style:normal;color:var(--t2);font-weight:500;font-size:13.5px;margin-left:8px}
  .kleur-beeld{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 12px 40px rgba(15,27,45,0.12);aspect-ratio:4/3;background:#ddd}
  .kleur-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
  .kleur-beeld img.actief{opacity:1}
  .kleuren .noot{font-size:13px;color:var(--t2);margin-top:14px}

  /* ── zo werkt het (C) ── */
  .stappen{background:#fff}
  .stap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:48px}
  .stap{background:var(--warm);border:1px solid var(--rand);border-radius:var(--r);padding:28px;position:relative}
  .stap .nr{position:absolute;top:-16px;left:24px;width:34px;height:34px;border-radius:50%;background:var(--blauw-h);
    color:#fff;font-family:var(--kop);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
  .stap h3{font-size:16px;font-family:var(--body);font-weight:700;margin-top:6px}
  .stap p{font-size:14px;color:var(--t2);margin-top:6px}

  /* ── eigen werk (B) ── */
  .werk{background:var(--warm2)}
  .werk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:44px}
  .werkfoto{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
  .werkfoto img{width:100%;height:100%;object-fit:cover}
  .werkfoto span{position:absolute;bottom:14px;left:14px;background:rgba(15,27,45,0.82);color:#fff;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:54px}

  /* ── reviews donker (B) ── */
  .reviews-wrap{background:#fff;padding:96px 32px}
  .reviews{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:24px;
    padding:64px 56px;position:relative;overflow:hidden;max-width:1200px;margin:0 auto}
  .reviews::before{content:"";position:absolute;right:-30px;top:-60px;width:260px;height:260px;background:rgba(74,144,184,0.10);-webkit-mask:url(favicon.svg) center/contain no-repeat;mask:url(favicon.svg) center/contain no-repeat}
  .reviews .g-badge{background:#fff;color:var(--t1);margin-bottom:26px}
  .reviews .g-badge span{color:var(--t2)}
  .reviews h2{color:#fff;max-width:18ch}
  .rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
  .rev{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r);padding:26px}
  .rev .st{color:var(--geel);letter-spacing:2px;font-size:15px}
  .rev p{font-size:14.5px;color:#DCE6EF;margin:12px 0 18px}
  .rev b{font-size:14px}
  .rev small{display:block;font-size:12px;color:#8FA1B5;margin-top:2px}
  .rev-link{display:inline-block;margin-top:28px;color:#fff;font-size:14px;font-weight:600}

  /* ── nazorg (B) ── */
  .nazorg{background:#fff;padding-top:0}
  .nazorg .in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .nazorg img{border-radius:var(--r)}
  .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
  .chip{background:var(--licht);color:var(--navy);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:54px}
  .chip::before{content:"✓ ";color:var(--blauw-h);font-weight:800}

  /* ── cta ── */
  .cta{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;position:relative;overflow:hidden}
  .cta::before{content:"";position:absolute;right:-40px;top:-70px;width:320px;height:320px;background:rgba(74,144,184,0.12);-webkit-mask:url(favicon.svg) center/contain no-repeat;mask:url(favicon.svg) center/contain no-repeat}
  .cta .in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
  .cta h2{color:#fff}
  .cta .intro{color:#B9C7D6}
  .cta ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
  .cta li{font-size:15px;color:#DCE6EF}
  .cta li::before{content:"✓ ";color:var(--blauw);font-weight:800}
  .formulier{background:#fff;border-radius:var(--r);padding:34px;color:var(--t1);box-shadow:0 20px 60px rgba(0,0,0,0.3)}
  .formulier h3{font-size:20px;font-weight:800;margin-bottom:20px}
  .veld{margin-bottom:16px}
  .veld label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
  .veld input{width:100%;padding:12px 14px;border:1px solid var(--rand);border-radius:8px;font-family:var(--body);font-size:15px;background:#fff;color:var(--t1)}
  .veld input:focus{outline:2px solid var(--blauw);border-color:var(--blauw)}
  .formulier .knop{width:100%;text-align:center;margin-top:6px}
  .formulier .privacy{font-size:12px;color:var(--t2);margin-top:12px;text-align:center}

  footer{background:var(--navy);color:#8FA1B5;padding:34px 32px;font-size:13px}
  footer .in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
  footer .logo{color:#F3EFE9}
  footer a{color:#B9C7D6;text-decoration:underline}

  @media (max-width:900px){
    .nav{padding:13px 20px}
    .nav ul{display:none}
    /* 55+-doelgroep: nummer op mobiel leesbaar, niet alleen een icoon (PRODUCT.md) */
    .nav .tel{border-radius:999px;background:var(--licht);color:var(--blauw-d);padding:10px 14px;
      display:inline-flex;align-items:center;gap:7px;opacity:1;font-size:14px}
    .nav .tel .tel-ikoon{width:15px;height:15px}
    .nav.vast .tel{background:var(--licht)}
    .sectie{padding:64px 20px}
    .binnenin .in,.kleuren .in,.cta .in,.nazorg .in{grid-template-columns:1fr;gap:36px}
    .hero{flex-direction:column;justify-content:center}
    .hero .kaart1{position:static;margin:4px auto 0}
    .hero .kaart2{display:none}
    .hero .in{padding:76px 20px 0}
    .statstrip .rij{justify-content:center;padding:12px 16px}
    .statstrip .rij span:not(.ster){display:none}
    .showcase-plak{padding:80px 20px 64px}
    .showcase-grid{grid-template-columns:1fr;gap:30px}
    .showcase-grid .kader{order:-1}
    .reviews{padding:40px 24px}
    .reviews-wrap{padding:64px 20px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .zweef,.zweef2,.balk i{animation:none}
    .stop,.staal,.knop{transition:none}
  }

/* ── aanvulling 14 jul: volledige footer (alle pagina's) ── */
footer .voet-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;align-items:start;
  max-width:1180px;margin:0 auto;padding-bottom:30px}
footer .voet-grid p{margin-top:12px;line-height:1.7;max-width:280px}
footer h2,footer h4{color:#fff;font-family:var(--body);line-height:inherit;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
footer .voet-grid ul{list-style:none;margin:0;padding:0}
footer .voet-grid li{margin-bottom:9px}
footer .voet-grid a{text-decoration:none}
footer .voet-grid a:hover{color:#fff}
footer .voet-onder{max-width:1180px;margin:0 auto;padding-top:22px;border-top:1px solid rgba(255,255,255,0.12);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:900px){footer .voet-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .voet-grid{grid-template-columns:1fr}}

/* ── aanvulling 14 jul-2: mobiel menu (hamburger) ── */
.hamb{display:none;background:#fff;border:1px solid var(--rand);cursor:pointer;width:44px;height:44px;
  border-radius:12px;align-items:center;justify-content:center;color:var(--t1);flex:none;padding:0}
.nav ul .alleen-mobiel{display:none}
@media (max-width:900px){
  .hamb{display:flex}
  .nav .knop.klein{display:none}
  .nav ul.open{display:flex;position:fixed;top:70px;left:14px;right:14px;flex-direction:column;gap:2px;
    background:#fff;border:1px solid var(--rand);border-radius:16px;padding:10px;
    box-shadow:0 24px 60px rgba(15,27,45,0.28);z-index:97}
  .nav ul.open li a{display:block;padding:13px 16px;font-size:16px;font-weight:700;color:var(--t1);border-radius:10px}
  .nav ul.open li a:active{background:var(--licht)}
  .nav ul.open .alleen-mobiel{display:block;border-top:1px solid var(--rand);margin-top:6px;padding-top:6px}
  .nav ul.open .alleen-mobiel a{color:var(--blauw-h)}
}

/* ── aanvulling 22 jul-2: reviews-blok "revmove" — links tekst + Google-score, rechts verticaal
     bewegende reviewkaarten (Sessy-model, besluit Sen 22 jul). Zelfde blok op élke pagina met reviews.
     Kolom 1 schuift omhoog, kolom 2 omlaag · pauze bij hover · reduced-motion = stilstaand.
     Alleen échte reviews — nooit verzinnen; de 4,9-scorekaart vult de loop. ── */
.revmove .rm-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.rm-tekst>p{color:var(--t2);font-size:15.5px;line-height:1.7;margin:16px 0 24px;max-width:44ch}
.rbadge2{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--rand);
  border-radius:60px;padding:12px 22px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.rbadge2 .st{color:var(--geel);font-size:16px;letter-spacing:2px}
.rbadge2 b{font-size:18px;color:var(--t1)}
.rbadge2 span{font-size:13.5px;color:var(--t2)}
.rm-link{display:block;margin-top:16px;color:var(--blauw-h);font-weight:700;font-size:14.5px;text-decoration:none}
.rm-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:430px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.rm-loop{display:flex;flex-direction:column;animation:rm-op 30s linear infinite}
.rm-omlaag .rm-loop{animation-name:rm-neer;animation-duration:38s}
.rm-kolommen:hover .rm-loop{animation-play-state:paused}
.rm-set{display:flex;flex-direction:column;gap:20px;padding-bottom:20px;flex:none}
@keyframes rm-op{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes rm-neer{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.rm-kaart{background:#fff;border:1px solid var(--rand);border-radius:16px;padding:22px;
  box-shadow:0 2px 12px rgba(0,0,0,.05)}
.rm-kop{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rm-avatar{width:38px;height:38px;border-radius:50%;background:var(--licht);color:var(--blauw-h);
  font-weight:800;font-size:15px;display:grid;place-items:center;flex:none}
.rm-kop .wie b{display:block;font-size:14.5px;color:var(--t1)}
.rm-kop .wie small{color:var(--t2);font-size:12px;line-height:1.4;display:block}
.rm-kop>svg{margin-left:auto;flex:none}
.rm-kaart .st{color:var(--geel);letter-spacing:2px;font-size:14.5px;display:block;margin-bottom:8px}
.rm-kaart p{font-size:14.5px;line-height:1.65;color:var(--t1);max-width:none}
.rm-score{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 22px}
.rm-score b{font-family:var(--kop);font-weight:800;font-size:34px;color:var(--t1);line-height:1}
.rm-score .st{margin:0}
.rm-score small{color:var(--t2);font-size:12.5px}
@media(max-width:900px){.revmove .rm-wrap{grid-template-columns:1fr}.rm-kolommen{height:400px}}
@media(max-width:560px){.rm-kolommen{grid-template-columns:1fr;height:380px}.rm-omlaag{display:none}}
@media (prefers-reduced-motion:reduce){.rm-loop,.rm-omlaag .rm-loop{animation:none}}

/* Hero-formaat: overal dezelfde hoogte, behalve de homepage (besluit Sen 24 sep 2026).
   `body` ervoor wint van de pagina-eigen <style>-blokken. */
body .herof:not(.house-hero),body .phero{min-height:720px;display:flex;align-items:center}
body .herof:not(.house-hero)>.in,body .phero>.in{width:100%}
body .phero{align-items:flex-end} /* tekst onderaan, op het donkere verloop */
@media(max-width:860px){body .herof:not(.house-hero),body .phero{min-height:720px}}
/* Hero-kaart voor info- en plaatspagina's: dezelfde glazen kaart + 2 knoppen als de
   productpagina's (besluit Sen 24 sep 2026). Productpagina's houden hun eigen .kaart. */
.hero-kaart{background:rgba(255,255,255,0.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.28);border-radius:22px;padding:clamp(28px,3.2vw,44px);max-width:520px;
  box-shadow:0 20px 60px rgba(0,0,0,0.28)}
.hero-kaart .sub{margin:14px 0 24px !important}
.hero-kaart .acties{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-kaart .knop.witr{background:#fff;color:var(--navy) !important;border:1px solid var(--rand)}
.hero-kaart .knop.witr:hover{background:var(--warm)}
@media(max-width:860px){.hero-kaart{max-width:none;padding:28px 22px}}
.hero-kaart .acties .bel{color:#fff;font-weight:600;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.hero-kaart .acties .bel:hover{text-decoration:underline}
@media(max-width:560px){.hero-kaart .acties{flex-direction:column;align-items:flex-start;gap:6px}}