/* =============================================================
   SM Boog-hero
   De concept-hero: tekens-boog met lichtgolf en dither, merk-icoon,
   titel met accent-woord, ringknop + WhatsApp-knop, videokaart, en
   een eigen vaste kopbalk met licht/donker-knop. Donker is de
   standaard; de keuze wordt onthouden (sm-boog-hero.js).
   Bedoeld als EEN per pagina (de kopbalk en het thema zijn
   pagina-breed).
   ============================================================= */

/* ---------- tokens: donker is de standaard, licht klapt om ---------- */
.sm-bh{
  --bg:#0a0909; --ink:#fff;
  --accent:#3DC78F; --accent-2:#276B4D; --op-accent:#04261a;
  --tekst-2:rgba(255,255,255,.72);
  --gedempt:rgba(255,255,255,.58);
  --rand:rgba(255,255,255,.10);
  --grid:rgba(255,255,255,.14);
  --boog:rgba(255,255,255,.48);       /* neutraal, geen groen; sterk genoeg om op te vallen */
  --boog-fel:rgba(255,255,255,.85);   /* de top van de lichtgolf door de tekens */
  --vlak-hover:rgba(255,255,255,.07);
  --glas:rgba(10,9,9,.72);
  --wa:#25D366;
  --mono:ui-monospace,"SF Mono","Fira Code","JetBrains Mono",Menlo,monospace;
  --serif:Georgia,"Times New Roman",serif;
  --sm-easing:cubic-bezier(.165,.84,.44,1);
  box-sizing:border-box;
  background:var(--bg); color:var(--ink);
  font-family:"Google Sans","Product Sans",Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease, color .4s ease;
}
.sm-bh *, .sm-bh *::before, .sm-bh *::after{ box-sizing:inherit; }
.sm-bh[data-thema="licht"]{
  --bg:#f4f6f5; --ink:#0d1512;
  --accent:#0f8f74;                    /* leesbaar groen op licht */
  --tekst-2:rgba(13,21,18,.75);
  --gedempt:rgba(13,21,18,.62);
  --rand:rgba(13,21,18,.13);
  --grid:rgba(13,21,18,.16);
  --boog:rgba(13,21,18,.46);
  --boog-fel:rgba(13,21,18,.85);
  --vlak-hover:rgba(13,21,18,.06);
  --glas:rgba(244,246,245,.78);
}

/* dubbele header voorkomen: draagt deze hero zijn eigen kopbalk, dan gaat
   de site-header-template dicht, plus eventuele ruimte op body. */
body:has(.sm-bh--eigenbalk) .elementor-location-header,
body:has(.sm-bh--eigenbalk) [data-elementor-type="header"],
body:has(.sm-bh--eigenbalk) .elementor-widget-sm-site-header{ display:none !important; }
body:has(.sm-bh--eigenbalk){ padding-top:0 !important; margin-top:0 !important; }
/* ingelogd: onze balk onder de WordPress-werkbalk hangen in plaats van erachter */
body.admin-bar .sm-bh .kopbalk{ top:32px; }
@media (max-width:782px){ body.admin-bar .sm-bh .kopbalk{ top:46px; } }
/* onder 600px is de WP-werkbalk absolute en scrolt hij WEG; dan moet onze
   balk gewoon op 0 plakken, anders hangt hij na het scrollen 46px te laag */
@media (max-width:600px){ body.admin-bar .sm-bh .kopbalk{ top:0; } }

/* ---------- de simpele vaste kopbalk ---------- */
.sm-bh .kopbalk{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px clamp(16px,4vw,32px);
  background:var(--glas);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rand);
  transition:background .4s ease, border-color .4s ease;
}
.sm-bh .kopbalk .merklink{ display:flex; align-items:center; }
.sm-bh .kopbalk .merklink img{ height:30px; width:auto; display:block; }
.sm-bh .kopbalk .rechts{ display:flex; align-items:center; gap:10px; }
.sm-bh .themaknop{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--rand);
  background:transparent; color:var(--ink); cursor:pointer;
  display:grid; place-items:center; transition:background .3s ease, border-color .3s ease;
}
.sm-bh .themaknop:hover{ background:var(--vlak-hover); border-color:var(--accent); }
.sm-bh .themaknop svg{ width:17px; height:17px; }
.sm-bh .themaknop .zon{ display:none; }
.sm-bh[data-thema="licht"] .themaknop .zon{ display:block; }
.sm-bh[data-thema="licht"] .themaknop .maan{ display:none; }

/* desktop-nav in de balk */
.sm-bh .navlinks{ display:flex; align-items:center; gap:4px; margin-left:auto; margin-right:10px; }
.sm-bh .navlinks a{
  padding:8px 12px; border-radius:8px; text-decoration:none;
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--tekst-2);
  transition:color .15s ease, background .15s ease;
}
.sm-bh .navlinks a:hover{ color:var(--ink); background:var(--vlak-hover); }

/* mobiel menu: de details-hamburger.
   3 streepjes 18x1.6px, open = bovenste en onderste draaien naar een kruis,
   middelste vervaagt. Paneel hangt fixed onder de balk. */
.sm-bh .site-menu{ display:none; position:relative; }
/* zelfde maat en vorm als de themaknop, zodat de twee rondjes
   op mobiel als een gelijk setje naast elkaar staan */
.sm-bh .menu-toggle{
  width:38px; height:38px; padding:0; border-radius:999px;
  border:1px solid var(--rand); color:var(--gedempt); cursor:pointer; background:none;
  display:inline-flex; justify-content:center; align-items:center; list-style:none;
  transition:color .15s, background .3s ease, border-color .3s ease;
}
.sm-bh .menu-toggle:hover{ background:var(--vlak-hover); border-color:var(--accent); }
.sm-bh .menu-toggle::-webkit-details-marker{ display:none; }
.sm-bh .menu-toggle:hover,
.sm-bh .site-menu[open] .menu-toggle{ color:var(--ink); }
.sm-bh .burger{ gap:4px; flex-direction:column; display:flex; }
.sm-bh .burger span{
  width:18px; height:1.6px; background:currentColor; border-radius:1px; display:block;
  transition:transform .25s ease, opacity .25s ease;
}
.sm-bh .site-menu[open] .burger span:first-child{ transform:translateY(5.6px) rotate(45deg); }
.sm-bh .site-menu[open] .burger span:nth-child(2){ opacity:0; }
.sm-bh .site-menu[open] .burger span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }
.sm-bh .menu-paneel{
  z-index:92; border:1px solid var(--rand);
  background:color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter:saturate(140%) blur(18px); -webkit-backdrop-filter:saturate(140%) blur(18px);
  gap:4px; padding:8px; display:grid; position:fixed; top:52px; left:12px; right:12px;
}
.sm-bh .menu-paneel a{
  width:100%; min-height:42px; padding:0 12px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:flex-start;
  font-size:.9rem; font-weight:600; text-decoration:none; color:var(--tekst-2);
  border-radius:8px; transition:color .15s ease, background .15s ease;
}
.sm-bh .menu-paneel a:hover{ color:var(--ink); background:var(--vlak-hover); }
@media (max-width:820px){
  .sm-bh .navlinks{ display:none; }
  .sm-bh .site-menu{ display:block; }
}

/* ---------- de hero ---------- */
/* posities exact gemeten van de bron: boog start direct onder de 54px-balk,
   de content wordt 96px omhoog over de boog getrokken (daardoor staat het
   icoon in de opening), onderrand komt uit de 68px content-padding. */
.sm-bh-hero{
  position:relative; overflow:hidden; text-align:center;
  border-bottom:1px solid var(--rand);
  padding:52px 0 0;
}
.sm-bh-hero::before{
  content:""; z-index:0; pointer-events:none; position:absolute; inset:0;
  background-image:radial-gradient(var(--grid) 1px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(#000,#0000 90%); mask-image:linear-gradient(#000,#0000 90%);
}

/* de tekens-boog, kleur neutraal */
.sm-bh-hero .art{
  pointer-events:none; user-select:none; justify-content:center;
  height:min(30vh,300px); display:flex; overflow:hidden;
  position:relative; z-index:1;
  margin-top:-36px;  /* de boog een stuk omhoog: de lege bovenrand valt onder de balk weg */
  -webkit-mask-image:linear-gradient(#0000 0%,#000 40% 68%,#0000 92%);
  mask-image:linear-gradient(#0000 0%,#000 40% 68%,#0000 92%);
}
/* pantser tegen thema-CSS: WordPress geeft <pre> een eigen (lichte)
   achtergrond, padding en wrapping voor code-blokken. Alles hard terug
   naar kaal, anders wordt de boog een witte balk. */
.sm-bh-hero .art pre{
  font-family:var(--mono) !important; letter-spacing:1px; color:var(--boog) !important;
  flex-shrink:0; margin:0 !important; font-size:11px !important; line-height:1.3 !important;
  background-color:transparent !important; background-image:none !important;
  border:0 !important; border-radius:0 !important;
  padding:0 !important; box-shadow:none !important; text-shadow:none !important;
  white-space:pre !important; overflow:visible !important;
  width:auto !important; max-width:none !important;
}
/* de lichtgolf: een heldere baan die traag door de tekens trekt.
   Alleen als de browser tekst kan inkleuren met een achtergrond,
   anders blijft de vaste kleur gewoon staan. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  @media (prefers-reduced-motion:no-preference){
    .sm-bh-hero .art pre{
      color:transparent !important;
      background-image:linear-gradient(100deg,
        var(--boog) 0%, var(--boog) 40%,
        var(--boog-fel) 50%,
        var(--boog) 60%, var(--boog) 100%) !important;
      background-size:220% 100% !important;
      -webkit-background-clip:text !important; background-clip:text !important;
      animation:sm-bh-boog-glans 7s linear infinite;
    }
    @keyframes sm-bh-boog-glans{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
  }
}
/* ---------- variant: de tekens-regen ----------
   Zelfde vak als de boog (zelfde hoogte, zelfde -36px omhoog, zelfde
   vervaag-masker), alleen een doek in plaats van de <pre>. Het doek
   blijft doorzichtig, dus het stippelpatroon van de hero staat er
   gewoon doorheen. Kleuren komen uit de tokens en klappen mee met
   de licht/donker-knop. */
.sm-bh-hero .art--regen{
  --regen:var(--accent);
  --regen-kop:#ffffff;
}
.sm-bh[data-thema="licht"] .art--regen{ --regen-kop:#0d1512; }
/* rustige variant: dezelfde neutrale tint als de boog */
.sm-bh-hero .art--regen.regen--neutraal{
  --regen:var(--boog);
  --regen-kop:var(--boog-fel);
}
.sm-bh-hero .art--regen canvas{
  display:block; width:100%; height:100%; flex:1 1 auto;
}

/* het merk-icoon: 72px hoog in de tekstkolom met gloed-schaduw.
   Hoogte instelbaar via --bh-merk-h (schuifje "Maat van het merk-beeld"),
   zodat ook een staand avatar-beeld genoeg ruimte krijgt. */
.sm-bh-hero .merk-img{
  width:auto; height:var(--bh-merk-h, 72px); max-width:220px;
  object-fit:contain; display:block; margin:0 auto 10px;
  filter:drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 55%, transparent));
}
/* rond icoontje: avatar in een app-icoon-rondje met dun accent-randje,
   donker vlak eronder zodat een transparante uitsnede netjes vult */
.sm-bh-hero .merk-img--rond{
  width:var(--bh-merk-h, 72px); height:var(--bh-merk-h, 72px);
  object-fit:cover; border-radius:50%;
  background:#0d0d0c;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---------- de content ---------- */
.sm-bh-hero .content{ z-index:1; position:relative; padding:0 32px 0; margin:-96px 0 0; }
.sm-bh-hero .eyebrow{
  font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); font-size:.72rem; font-weight:600; display:block;
}
.sm-bh-hero h1{
  letter-spacing:-.03em; color:var(--ink); margin:20px auto 22px;
  font-size:clamp(2.4rem,5.6vw,3.8rem); font-weight:600; line-height:1.08; max-width:18ch;
}
/* smalle telefoons: iets kleiner, zodat de langste regel ("Ze zoeken jou.") 15% speling houdt */
@media (max-width:380px){ .sm-bh-hero h1{ font-size:2.28rem; } }
.sm-bh-hero h1 em{
  font-family:var(--serif); letter-spacing:-.015em; color:var(--accent);
  font-style:italic; font-weight:400;
}
.sm-bh-hero .beschrijving{ color:var(--gedempt); max-width:620px; margin:0 auto; font-size:1rem; line-height:1.8; }
/* gecentreerde intro: regels gelijk verdelen, geen kort staartje */
.sm-bh-hero .beschrijving{ text-wrap:balance; }

/* =========================================================
   De knoppen. Recept exact uit sm-base ("Ga voor vertrouwd"):
   ringlicht rondom + adem, hover-fly, gloed, icoon-schuif.
   Kleuren via de tokens hierboven; de knop zelf is zwart en
   wordt wit op hover.
   ========================================================= */
.sm-bh-hero .acties{ justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-top:36px; display:flex; }
/* zinnetje boven de knoppen, knipoog eronder, bewijsregel boven de titel */
.sm-bh-hero .sm-bh-knop-intro{ color:var(--ink); font-size:.95rem; margin:28px auto 0; max-width:34ch; text-wrap:balance; }
.sm-bh-hero .sm-bh-knop-intro + .acties{ margin-top:14px; }
.sm-bh-hero .sm-bh-knipoog{ color:var(--gedempt); font-size:.85rem; font-style:italic; margin:14px auto 0; max-width:40ch; text-wrap:balance; }
.sm-bh-hero .sm-bh-bewijs{ color:var(--gedempt); font-size:.85rem; margin:14px auto 0; display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; }
.sm-bh-hero .sm-bh-sterren{ color:#f5b301; letter-spacing:2px; }
@media (max-width:767px){
  /* mobiel: strakker, zodat de video in beeld blijft */
  .sm-bh-hero .sm-bh-knop-intro{ margin-top:18px; }
  .sm-bh-hero .sm-bh-knop-intro + .acties{ margin-top:8px; }
  .sm-bh-hero .sm-bh-knipoog{ margin-top:8px; max-width:none; font-size:.8rem; line-height:1.4; }
  /* twee knoppen naast elkaar als het past (korte knoptekst) */
  .sm-bh-hero .acties{ gap:8px; }
  .sm-bh-hero .acties .sm-btn{ padding-left:1.1rem; padding-right:1.1rem; }
}
.sm-bh .sm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:16px; letter-spacing:.5px; line-height:1.2;
  border:0; cursor:pointer; border-radius:100px;
  text-decoration:none; transition:all .4s var(--sm-easing);
  position:relative; padding:.75rem 2rem;
  -webkit-tap-highlight-color:transparent;
}
/* het ringlicht, exact: draai 3s lineair + adem 4s tussen 1 en 1.2 */
.sm-bh .sm-btn-ring{ z-index:0; overflow:hidden; background:transparent; color:#fff; }
.sm-bh .sm-btn-ring::before{
  content:""; position:absolute; top:50%; left:50%;
  width:190%; aspect-ratio:1; translate:-50% -50%; z-index:-2;
  background:conic-gradient(from 0deg,
    transparent 0deg 250deg,
    var(--sm-accent, var(--accent-2)) 300deg,
    var(--sm-accent-2, var(--accent)) 340deg,
    #fff 352deg,
    transparent 360deg);
  animation:sm-bh-ring-draai 3s linear infinite, sm-bh-ring-adem 4s ease-in-out infinite;
}
.sm-bh .sm-btn-ring::after{
  content:""; position:absolute; inset:2px; border-radius:inherit; z-index:-1;
  background:#0a0909;                     /* de knop zelf: zwart */
  transition:background .4s var(--sm-easing);
}
.sm-bh .sm-btn-ring:hover{ color:#0d1512; }
.sm-bh .sm-btn-ring:hover::after{ background:#fff; }  /* hover: wit */
@keyframes sm-bh-ring-draai{ to{ rotate:360deg; } }
@keyframes sm-bh-ring-adem{ 0%,100%{ scale:1; } 50%{ scale:1.2; } }
.sm-bh .sm-hover-fly:hover{ transform:translate(0,-6px); }
.sm-bh .sm-hschaduw-gloed:hover{ box-shadow:0 14px 30px color-mix(in srgb, var(--accent) 45%, transparent); }
.sm-bh .sm-btn-ic{ display:inline-flex; align-items:center; transition:transform .4s var(--sm-easing); }
.sm-bh .sm-btn-ic svg{ width:1.2em; height:1.2em; fill:currentColor; }
.sm-bh .sm-icoon-schuif:hover .sm-ic-na{ transform:translateX(8px); }

/* beide hero-knoppen minstens 44px hoog, goed te raken op de telefoon */
.sm-bh-hero .sm-btn{ min-height:44px; }

/* de WhatsApp-knop: ghost met een subtiele groene gloed (bewuste keuze) */
.sm-bh-hero .wa-knop{
  background:transparent; border:1px solid var(--rand); color:var(--tekst-2);
  font-size:14px; padding:.625rem 1.5rem;
  box-shadow:0 0 22px -6px color-mix(in srgb, var(--wa) 45%, transparent);
}
.sm-bh-hero .wa-knop:hover{
  background:var(--vlak-hover); color:var(--ink); border-color:color-mix(in srgb, var(--wa) 40%, var(--rand));
  box-shadow:0 0 26px -4px color-mix(in srgb, var(--wa) 60%, transparent);
  transform:translate(0,-3px);
}
.sm-bh-hero .wa-knop svg{ width:17px; height:17px; fill:var(--wa); }

/* ---------- de video: exact de sm-videokaart-variant ----------
   Waarden 1-op-1 uit sm-videokaart.css: kaart max 800px, frame 21:9,
   radius 15 (10 op mobiel), kantel 3 graden met hover-oprichting,
   schaduw-lg, scroll-opkomst. Speelknop = de widget-maat (100px,
   68 mobiel) in de glas-stijl. */
.sm-bh .smv4-vid{ max-width:800px; margin:40px auto 0; padding:0 22px 68px; }
.sm-bh .vk-frame{
  position:relative; display:block; width:100%; overflow:hidden;
  aspect-ratio:21/9; background:#0a0909; border-radius:15px; isolation:isolate;
  box-shadow:0 .25rem .5rem rgba(0,0,0,.05), 0 1.5rem 2.2rem rgba(0,0,0,.1);
  transform:perspective(200px) rotateX(3deg) translateY(-30px);
  transition:transform .5s var(--sm-easing);
  will-change:transform;
}
.sm-bh .vk-frame:hover{ transform:perspective(500px) rotateX(0deg) translateY(10px) scale(1.1); }
@media (max-width:1024px){ .sm-bh .vk-frame:hover{ transform:perspective(500px) rotateX(0deg) translateY(10px) scale(1); } }
@media (max-width:767px){
  .sm-bh .vk-frame{ border-radius:10px; transform:none; }
  .sm-bh .vk-frame:hover{ transform:none; }
}
.sm-bh .vk-frame video,.sm-bh .vk-frame iframe{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border:0; display:block; z-index:1;
}
/* de stille loop is donker gefilmd; zachtjes naar normaal licht tillen.
   Alleen de loop, niet de YouTube-video die na de klik komt.
   Instelbaar via het schuifje "Loop lichter maken" in de widget. */
.sm-bh .vk-frame video{ filter:brightness(var(--bh-vid-licht, 1.25)); }
/* de Wistia-speler in de pagina zelf vult de kaart */
.sm-bh .vk-frame wistia-player{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
/* geluidsknop naast play/pauze */
.sm-bh .vk-geluid{
  position:absolute; left:52px; top:12px; z-index:5; width:32px; height:32px; padding:0; margin:0;
  display:grid; place-items:center; cursor:pointer; color:#fff; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(10,9,9,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .3s var(--sm-easing), background .3s var(--sm-easing);
  -webkit-tap-highlight-color:transparent;
}
.sm-bh .vk-geluid:hover{ transform:scale(1.08); background:rgba(10,9,9,.65); }
.sm-bh .vk-geluid:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sm-bh .vk-geluid svg{ width:15px; height:15px; fill:currentColor; display:none; }
.sm-bh .vk-geluid[data-staat="uit"] .vk-i-stil,
.sm-bh .vk-geluid[data-staat="aan"] .vk-i-luid{ display:block; }
/* stil: de geluidsknop ademt zacht, zodat bezoekers zien dat er geluid is */
@media (prefers-reduced-motion: no-preference){
  .sm-bh .vk-geluid[data-staat="uit"]{ animation:vk-geluid-adem 2.4s ease-in-out infinite; }
}
@keyframes vk-geluid-adem{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); } }
@media (max-width:767px){ .sm-bh .vk-geluid{ left:42px; top:8px; width:28px; height:28px; } }
/* speler geopend: Wistia's eigen knoppen nemen het over, alleen de sluitknop blijft */
.sm-bh .vk-frame.vk-open .vk-geluid, .sm-bh .vk-frame.vk-open .vk-pauze, .sm-bh .vk-frame.vk-open .vk-play--vlak{ display:none; }
.sm-bh .vk-sluit{
  display:none; position:absolute; left:12px; top:12px; z-index:6; width:32px; height:32px; padding:0; margin:0;
  place-items:center; cursor:pointer; color:#fff; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(10,9,9,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); -webkit-tap-highlight-color:transparent;
}
.sm-bh .vk-sluit svg{ width:14px; height:14px; fill:currentColor; display:block; }
.sm-bh .vk-sluit:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sm-bh .vk-sluit::after{ content:""; position:absolute; inset:-7px; }
.sm-bh .vk-frame.vk-open .vk-sluit{ display:grid; }
@media (max-width:767px){ .sm-bh .vk-sluit{ left:8px; top:8px; width:28px; height:28px; } }
/* klein in beeld, maar het raakvlak blijft groot genoeg voor een duim */
.sm-bh .vk-geluid::after, .sm-bh .vk-pauze::after{ content:""; position:absolute; inset:-7px; }
/* de speler die na de klik komt (iframe of mp4) speelt op eigen licht */
.sm-bh .vk-frame .vk-speler{ filter:none; }
/* het stilstaande beeld: altijd onderop, zichtbaar als de loop niet speelt */
.sm-bh .vk-frame .vk-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; }
.sm-bh .vk-frame iframe[hidden]{ display:none; }
/* knop-plek "hoek": de hele kaart start de video met geluid, rechtsonder play/pauze voor het voorproefje */
.sm-bh .vk-play.vk-play--vlak{
  inset:0; left:0; top:0; translate:none; width:100%; height:100%;
  border:0; border-radius:0; background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none; z-index:3;
}
.sm-bh .vk-play.vk-play--vlak:hover, .sm-bh .vk-play.vk-play--vlak:active{ transform:none; }
.sm-bh .vk-play.vk-play--vlak:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.sm-bh .vk-pauze{
  position:absolute; left:12px; top:12px; z-index:5; width:32px; height:32px; padding:0; margin:0;
  display:grid; place-items:center; cursor:pointer; color:#fff; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(10,9,9,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .3s var(--sm-easing), background .3s var(--sm-easing);
  -webkit-tap-highlight-color:transparent;
}
.sm-bh .vk-pauze:hover{ transform:scale(1.08); background:rgba(10,9,9,.65); }
.sm-bh .vk-pauze:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sm-bh .vk-pauze svg{ width:14px; height:14px; fill:currentColor; display:none; }
.sm-bh .vk-pauze[data-staat="speelt"] .vk-i-pauze,
.sm-bh .vk-pauze[data-staat="pauze"] .vk-i-speel{ display:block; }
@media (max-width:767px){ .sm-bh .vk-pauze{ left:8px; top:8px; width:28px; height:28px; } }
/* de loop als link-voorproefje: klikt niet, de speelknop erboven wel */
.sm-bh .vk-frame .vk-loop{ pointer-events:none; }
/* Shorts: staande kaart in het midden, 9:16 */
.sm-bh .vk-frame--staand{
  aspect-ratio:9/16; max-width:min(340px, 100%); margin-inline:auto;
}
/* de scroll-opkomst van de widget zelf: gescrubd, dus heen en terug */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sm-bh .smv4-vid{
      animation:sm-bh-kaart-komt-op linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 32%;
    }
  }
}
@keyframes sm-bh-kaart-komt-op{
  from{ opacity:0; transform:translateY(46px) scale(.965); }
  to{ opacity:1; transform:none; }
}
/* speelknop: widget-motor, glas-stijl */
.sm-bh .vk-play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  transform:scale(1); width:100px; height:100px; z-index:4;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.35); padding:0; margin:0; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .5s var(--sm-easing), background .4s var(--sm-easing);
  -webkit-tap-highlight-color:transparent;
}
.sm-bh .vk-play svg{ width:40px; height:40px; fill:currentColor; display:block; }
.sm-bh .vk-play:hover{ transform:scale(1.1); }
.sm-bh .vk-play:active{ transform:scale(1.02); }
@media (max-width:767px){
  .sm-bh .vk-play{ width:68px; height:68px; }
  .sm-bh .vk-play svg{ width:27px; height:27px; }
}
/* beperk beweging: geen kantel (staat hierboven al), loop pauzeert via JS */
.sm-bh .vid-bij{ margin:22px auto 0; font-size:13px; line-height:1.5; color:var(--gedempt); max-width:60ch; text-wrap:balance; }

/* =========================================================
   Het pixfort-groen onder aan de hero: een zachte groene gloed
   die van onderaf opkomt (recept .sm-hero-gr uit de videokaart-
   module: gradient-laag op lage sterkte) + de groene lijn
   (de sm-balk: verloop groen naar lime) precies op de rand.
   ========================================================= */
.sm-bh-hero--groen{ border-bottom:0; }
.sm-bh-hero .bh-groen{
  position:absolute; left:0; right:0; bottom:0; height:min(34vh,320px);
  pointer-events:none; z-index:0;
  background-image:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 26%, transparent) 100%);
}
.sm-bh-hero .bh-lijn{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:block; height:var(--bh-lijn-h,3px);
  background-image:linear-gradient(-90deg, var(--sm-groen,#10b981) 0%, var(--sm-lime,#d2f65a) 100%);
}
/* de lopende variant: zelfde recept als sm-balk-loop uit de videokaart-
   module (vier kleurstops, 300% breed, 14s lineair rond) */
.sm-bh-hero .bh-lijn--loop{
  background-image:linear-gradient(90deg,
    var(--sm-groen,#10b981), var(--sm-lime,#d2f65a),
    var(--sm-groen,#10b981), var(--sm-lime,#d2f65a));
  background-size:300% 100%;
  animation:sm-bh-balk-schuif 14s linear infinite;
}
@keyframes sm-bh-balk-schuif{ from{ background-position:0 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .sm-bh-hero .bh-lijn--loop{ animation:none; } }

/* ---------- de neonbuis ----------
   Zelfde dunne lijn op precies dezelfde plek, maar dan als neon: een
   donkergroene buis die zacht gloeit, met een lichtje dat er steeds
   doorheen trekt. De gekleurde gloed is hier het effect zelf, geen
   schaduw; daarom staat hij er bewust op.
   ::before = de gloed rond de buis (ademt rustig)
   ::after  = het lichtje dat langsloopt */
.sm-bh-hero .bh-lijn--neon{
  background-image:none;
  background-color:var(--bh-neon-buis, color-mix(in srgb, var(--sm-groen,#10b981) 42%, #04140e));
  overflow:visible;
}
.sm-bh-hero .bh-lijn--neon::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:0 0 6px var(--sm-groen,#10b981),
             0 0 16px var(--sm-groen,#10b981),
             0 0 34px var(--sm-groen,#10b981);
  opacity:calc(var(--bh-neon-kracht,55) / 100);
  animation:sm-bh-neon-adem 3.6s ease-in-out infinite;
}
.sm-bh-hero .bh-lijn--neon::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:26%;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--sm-lime,#d2f65a), transparent);
  filter:blur(1px) drop-shadow(0 0 7px var(--sm-lime,#d2f65a));
  animation:sm-bh-neon-loop var(--bh-neon-tempo,5s) linear infinite;
}
@keyframes sm-bh-neon-loop{
  from{ transform:translateX(-130%); }
  to{ transform:translateX(500%); }
}
@keyframes sm-bh-neon-adem{
  0%,100%{ opacity:calc(var(--bh-neon-kracht,55) / 100); }
  50%    { opacity:calc(var(--bh-neon-kracht,55) / 145); }
}
@media (prefers-reduced-motion:reduce){
  .sm-bh-hero .bh-lijn--neon::before{ animation:none; }
  .sm-bh-hero .bh-lijn--neon::after{ animation:none; opacity:.5; }
}
/* content en video boven de gloed houden */
.sm-bh-hero .content{ z-index:1; }
.sm-bh .smv4-vid{ position:relative; z-index:1; }

/* =========================================================
   Thema-brug: de SM-widgets op dezelfde pagina klappen mee met
   de licht/donker-knop van deze hero. Staat de hero op donker,
   dan krijgen ze van buitenaf hun eigen donkere waardenset
   (exact uit hun eigen css). Op licht blijft hun band-keuze staan.
   ========================================================= */
body:has(.sm-bh:not([data-thema="licht"])) .sm-km{
  --km-bg:#0a0909; --km-vlak:#121111; --km-vlak-2:#191818;
  --km-ink:#ffffff; --km-stil:rgba(255,255,255,.56); --km-hair:rgba(255,255,255,.10);
  --km-accent:#74dec4;
  --km-chip-bg:#151414; --km-chip-rand:rgba(255,255,255,.12); --km-chip-ink:rgba(255,255,255,.82);
  --km-knop-vlak:#0a0909; --km-knop-ink:#ffffff;
  --km-knop-hover-vlak:#ffffff; --km-knop-hover-ink:#0a0909;
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh:not([data-thema="licht"])) .sm-pk{
  --pk-bg:#0a0909; --pk-ink:#ffffff; --pk-stil:rgba(255,255,255,.58);
  --pk-rand:rgba(255,255,255,.10); --pk-kaart:rgba(255,255,255,.04); --pk-accent:#3DC78F;
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh:not([data-thema="licht"])) .sm-bf{
  --bf-bg:#0a0909; --bf-ink:#ffffff; --bf-tekst:rgba(255,255,255,.72); --bf-stil:rgba(255,255,255,.58);
  --bf-rand:rgba(255,255,255,.10);
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh:not([data-thema="licht"])) .sm-tl{
  --tl-bg:#0a0909; --tl-ink:#ffffff; --tl-tekst:rgba(255,255,255,.72); --tl-stil:rgba(255,255,255,.58);
  --tl-rand:rgba(255,255,255,.10); --tl-accent:#3DC78F;
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh:not([data-thema="licht"])) .sm-rv{
  --rv-bg:#0a0909; --rv-ink:#ffffff; --rv-tekst:rgba(255,255,255,.72); --rv-stil:rgba(255,255,255,.58);
  --rv-rand:rgba(255,255,255,.10); --rv-kaart:rgba(255,255,255,.04); --rv-accent:#3DC78F;
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh:not([data-thema="licht"])) .sm-tk{
  --tk-bg:#0a0909; --tk-ink:#ffffff; --tk-stil:rgba(255,255,255,.62); --tk-rand:rgba(255,255,255,.10);
  --tk-kaart:rgba(255,255,255,.045); --tk-soc:#1c1c1c; --tk-rol:rgba(255,255,255,.82); --tk-accent:#3DC78F;
  transition:background .4s ease, color .4s ease;
}

body:has(.sm-bh:not([data-thema="licht"])) .sm-uit{
  --uit-bg:#0a0909; --uit-ink:#ffffff; --uit-stil:rgba(255,255,255,.62); --uit-zwak:rgba(255,255,255,.42);
  --uit-rand:rgba(255,255,255,.10); --uit-vlak:#121111; --uit-vlak-2:rgba(255,255,255,.045);
  --uit-accent:#3DC78F;
  transition:background .4s ease, color .4s ease;
}

body:has(.sm-bh:not([data-thema="licht"])) .sm-rs{
  --rs-bg:#0a0909; --rs-ink:#ffffff; --rs-tekst:rgba(255,255,255,.72); --rs-stil:rgba(255,255,255,.58);
  --rs-rand:rgba(255,255,255,.10); --rs-accent:#3DC78F; --rs-slecht:#f0724f;
  --rs-paneel:rgba(255,255,255,.04); --rs-na-bg:rgba(255,255,255,.05);
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh:not([data-thema="licht"])) .sm-dg{
  --dg-bg:#0a0909; --dg-ink:#ffffff; --dg-tekst:rgba(255,255,255,.72); --dg-stil:rgba(255,255,255,.58);
  --dg-rand:rgba(255,255,255,.10); --dg-accent:#3DC78F;
  --dg-glas-a:rgba(255,255,255,.02); --dg-glas-b:rgba(0,0,0,.2);
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh:not([data-thema="licht"])) .sm-dp{
  --dp-bg:#0a0909; --dp-ink:#ffffff; --dp-tekst:rgba(255,255,255,.72); --dp-stil:rgba(255,255,255,.58);
  --dp-mark-bg:transparent; --dp-mark-ink:var(--dp-lime);
  --dp-t-mist:#1c1f1e; --dp-t-contrast:#f4f6f5; --dp-t-contrast-ink:#0d1512;
  --dp-t-vlak:#151414; --dp-t-vlak-ink:#ffffff; --dp-t-lime:var(--dp-lime); --dp-t-den:#17422f;
  --sm-badge-accent:#3DC78F;
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh:not([data-thema="licht"])) .sm-ftk{
  --ftk-bg:#0a0909; --ftk-ink:#ffffff; --ftk-tekst:rgba(255,255,255,.72); --ftk-stil:rgba(255,255,255,.58);
  --ftk-rand:rgba(255,255,255,.10); --ftk-vlak:rgba(255,255,255,.04); --ftk-accent:#3DC78F;
  transition:background .4s ease, color .4s ease;
}
/* Alle ringknoppen op deze pagina's in dezelfde kleuren: groen naar
   lime, zoals de knop bij over-mij (het ADO-groengeel, aldus John).
   Drie klassen diep, zodat deze regel wint van de losse overrides per
   widget (zoals .sm-pk .sm-btn-ring die er donkergroen van maakte). */
body:has(.sm-bh) .sm-btn.sm-btn-ring{
  --sm-accent:#3DC78F;
  --sm-accent-2:#D2F65A;
}

/* de glow-kaarten (diensten): van DCS-goud naar de concept-tinten,
   in beide standen; het draaiende lichtrandje loopt groen naar lime */
body:has(.sm-bh:not([data-thema="licht"])) .dcs-wd{
  --wd-bg:#0a0909; --wd-accent:#3DC78F; --wd-titel:#ffffff; --wd-tekst:rgba(255,255,255,.6);
  --wd-kaart-bg:rgba(255,255,255,.03); --wd-kaart-bg-hover:rgba(255,255,255,.05);
  --wd-rand-lijn:rgba(61,199,143,.10); --wd-rand-1:rgba(61,199,143,.12);
  --wd-rand-2:rgba(61,199,143,1); --wd-rand-3:rgba(210,246,90,.95);
  --wd-glow-kleur:rgba(61,199,143,.22); --wd-chip-bg:rgba(61,199,143,.14);
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh[data-thema="licht"]) .dcs-wd{
  --wd-bg:#f4f6f5; --wd-accent:#0f8f74; --wd-titel:#0d1512; --wd-tekst:rgba(13,21,18,.75);
  --wd-kaart-bg:rgba(13,21,18,.03); --wd-kaart-bg-hover:rgba(13,21,18,.05);
  --wd-rand-lijn:rgba(13,21,18,.13); --wd-rand-1:rgba(15,143,116,.14);
  --wd-rand-2:rgba(15,143,116,1); --wd-rand-3:rgba(16,185,129,.95);
  --wd-glow-kleur:rgba(15,143,116,.15); --wd-chip-bg:rgba(15,143,116,.12);
  transition:background .4s ease, color .4s ease;
}

/* de over-mij-sectie (sm-verhaal) mee laten klappen. LET OP: de kleuren
   mogen NIET als instelling op de widget staan, want Elementor schrijft die
   met hogere voorrang weg en dan wint de brug nooit. Daarom staan bg, ink en
   grijs op de pagina leeg. */
body:has(.sm-bh:not([data-thema="licht"])) .sm-verhaal,
html[data-sm-thema="donker"] .sm-verhaal{
  --sm-verhaal-bg:#0a0909;
  --sm-verhaal-ink:#ffffff;
  --sm-verhaal-grijs:rgba(255,255,255,.62);
  transition:background .4s ease, color .4s ease;
}
body:has(.sm-bh[data-thema="licht"]) .sm-verhaal,
html[data-sm-thema="licht"] .sm-verhaal{
  --sm-badge-accent:#0f8f74;
  --sm-verhaal-bg:#f4f6f5;
  --sm-verhaal-ink:#0d1512;
  --sm-verhaal-grijs:rgba(13,21,18,.66);
  transition:background .4s ease, color .4s ease;
}

/* ---------- de gloed-wolken (Gicon-recept) ----------
   Twee zachte radiale gloed-wolken, diagonaal tegenover elkaar, vast aan
   het scherm zodat de pagina eroverheen scrolt. Bij Gicon liggen ze
   ACHTER doorzichtige secties; onze secties zijn dicht, dus hier liggen
   ze eroverheen met een blend die alleen donkere vlakken optilt en tekst
   ongemoeid laat. Ze faden pas in als de hero uit beeld scrolt (js). */
.sm-bh-wolken{
  position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1.4s ease;
  mix-blend-mode:screen;
}
.sm-bh-wolken[data-aan="ja"]{ opacity:1; }
.sm-bh-wolken::before,
.sm-bh-wolken::after{
  content:""; position:absolute; width:100%;
  background:radial-gradient(circle at 50% 50%, #3DC78F, transparent 70%);
  opacity:calc(var(--wolk-kracht, 30) / 100);
}
/* de plaatsing van Gicon, exact: een wolk linksboven en een rechtsonder,
   allebei grotendeels buiten beeld */
.sm-bh-wolken::before{ top:-60%; left:-50%; bottom:0; }
.sm-bh-wolken::after{ top:0; bottom:-60%; right:-50%; }
/* in de lichte stand tilt screen niets op; dan drukken de wolken juist
   zachtjes een diepere groentint in het licht */
html[data-sm-thema="licht"] .sm-bh-wolken,
body:has(.sm-bh[data-thema="licht"]) .sm-bh-wolken{
  mix-blend-mode:multiply;
}
html[data-sm-thema="licht"] .sm-bh-wolken::before,
html[data-sm-thema="licht"] .sm-bh-wolken::after,
body:has(.sm-bh[data-thema="licht"]) .sm-bh-wolken::before,
body:has(.sm-bh[data-thema="licht"]) .sm-bh-wolken::after{
  background:radial-gradient(circle at 50% 50%, #0f8f74, transparent 70%);
  opacity:calc(var(--wolk-kracht, 30) / 160);
}
@media (max-width:1200px){
  .sm-bh-wolken::before,
  .sm-bh-wolken::after{
    background:radial-gradient(circle at 50% 50%, #3DC78F, transparent 50%);
  }
}


/* De hero-titel komt letter voor letter binnen.
   De starthouding hangt aan .sm-bh-letters, en die class zet het script
   pas nadat het splitsen gelukt is. Draait het script niet, dan staat de
   titel er gewoon. Geen transition-shorthand: die zet de vertraging per
   letter terug op nul, en dan komt alles tegelijk. */
.sm-bh-h1 .sm-bh-w { display: inline-block; white-space: nowrap; }
.sm-bh-h1.sm-bh-letters { overflow: hidden; padding-bottom: .08em; }
.sm-bh-h1.sm-bh-letters .sm-bh-l {
  display: inline-block;
  animation-name: sm-bh-letter-op;
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.165, .84, .44, 1);
  animation-delay: var(--d, 0ms);
  animation-fill-mode: both;
}
/* De letters staan meteen in de pagina (PHP). Ze wachten tot het lettertype er is, zodat
   ze in de echte letter binnenkomen en de kop daarna niet meer verspringt. Een klein
   script direct achter de kop haalt .sm-bh-wacht weg: zodra het lettertype er is, en
   uiterlijk na 1,2 seconde. */
.sm-bh-h1.sm-bh-letters.sm-bh-wacht .sm-bh-l { animation-play-state: paused; }

/* Reserveletter voor de kop zolang Inter nog onderweg is: Arial (of Roboto op Android)
   op de maat van Inter gezet. Gemeten op de hero-zin: Inter Bold is 2,9% breder dan
   Arial Bold en 8,9% breder dan Roboto Bold; boven 97% en onder 24% van de letterhoogte.
   Zo houdt de kop dezelfde regels als Inter binnenkomt. */
@font-face { font-family: "SM Inter Terug A"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 102.9%; ascent-override: 94.3%; descent-override: 23.3%; line-gap-override: 0%; }
@font-face { font-family: "SM Inter Terug R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 700; size-adjust: 108.9%; ascent-override: 89.1%; descent-override: 22%; line-gap-override: 0%; }
/* alleen in de portret-hero (johnschreve.nl), zodat de kop op andere sites zijn eigen letter houdt */
.sm-ph .sm-bh-h1 { font-family: var(--uicore-typography--h1-f, "Inter"), "SM Inter Terug A", "SM Inter Terug R", sans-serif; }

@keyframes sm-bh-letter-op {
  from { opacity: 0; transform: translateY(105%); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-bh-h1.sm-bh-letters .sm-bh-l { animation-name: none; }
}

/* hover-paar mint + warm oranje, alleen in de ring om de knop; naast het rust-paar groen + lime */
body:has(.sm-bh) .sm-btn.sm-btn-ring:hover,
body:has(.sm-bh) .sm-btn.sm-btn-ring:focus-visible { --sm-accent:#4FD1C5; --sm-accent-2:#FFA45B; }