/* ==========================================================================
   PUBMARKET BRAND FOUNDATION
   Designtokens + herbruikbare componentklassen.
   Gebruik in Elementor via Advanced > CSS Classes, of rechtstreeks in
   HTML-widgets en de PHP-templates van het thema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS - Silka (lokaal). Plaats de woff2-bestanden in assets/fonts/.
   Verwachte bestandsnamen staan hieronder; fallback-stack vangt op tot de
   bestanden geplaatst zijn.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Silka';src:url('../fonts/silka-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Silka';src:url('../fonts/silka-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Silka';src:url('../fonts/silka-regularitalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Silka';src:url('../fonts/silka-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Silka';src:url('../fonts/silka-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Silka';src:url('../fonts/silka-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Silka';src:url('../fonts/silka-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* --------------------------------------------------------------------------
   2. DESIGNTOKENS
   -------------------------------------------------------------------------- */
:root{
  --pm-ink:#07041A;
  --pm-ink-2:#0E0926;
  --pm-ink-3:#15103A;
  --pm-ink-4:#1C1652;
  --pm-fuchsia:#FF2E97;
  --pm-magenta:#E6007E;
  --pm-purple:#8A3CC0;
  --pm-violet:#8A6BD8;
  --pm-lilac:#C3BCEA;
  --pm-midnight:#1B1464;
  --pm-paper:#F4F2FB;
  --pm-muted:#A49DCB;
  --pm-teal:#2BE0BD; /* UITSLUITEND voor positieve groeicijfers */
  --pm-grad:linear-gradient(100deg,var(--pm-fuchsia) 0%,var(--pm-magenta) 34%,var(--pm-purple) 66%,var(--pm-midnight) 100%);
  --pm-font:'Silka',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --pm-mono:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
  --pm-radius:6px;
  --pm-wrap:1280px;
  --pm-gutter:clamp(20px,4vw,40px);
  --pm-section:clamp(72px,10vw,140px);
  --pm-border:1px solid rgba(196,188,234,.14);
}

/* --------------------------------------------------------------------------
   3. BASIS
   -------------------------------------------------------------------------- */
body{background:var(--pm-ink);color:var(--pm-lilac);font-family:var(--pm-font);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased}
.pm-body,.elementor p{color:var(--pm-lilac)}
h1,h2,h3,h4,.pm-title{font-family:var(--pm-font);font-weight:900;letter-spacing:-.02em;line-height:1.02;color:var(--pm-paper)}
.pm-title em,.pm-title .pm-accent{font-style:normal;color:var(--pm-fuchsia)}
a{color:inherit}
img,video{max-width:100%;display:block}

.pm-skip{position:absolute;left:-999px;top:0;z-index:1000;background:var(--pm-fuchsia);color:#fff;padding:12px 20px;font-weight:700}
.pm-skip:focus{left:12px;top:12px}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--pm-fuchsia);outline-offset:3px;border-radius:2px}

.pm-wrap{max-width:var(--pm-wrap);margin-inline:auto;padding-inline:var(--pm-gutter)}
.pm-section{position:relative;padding-block:var(--pm-section)}
.pm-section--tight{padding-block:calc(var(--pm-section)*.55)}
.pm-bg-ink2{background:var(--pm-ink-2)}
.pm-bg-ink3{background:var(--pm-ink-3)}
.pm-bg-ink4{background:var(--pm-ink-4)}
.pm-bg-grad{background:var(--pm-grad)}

/* Filmkorrel-overlay tegen steriele vlakken */
.pm-grain{position:relative}
.pm-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Eyebrow: mono hoofdletterlabel boven titels */
.pm-eyebrow{font-family:var(--pm-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pm-muted);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pm-eyebrow::before{content:"";width:26px;height:2px;background:var(--pm-fuchsia)}
.pm-eyebrow--bare::before{display:none}

.pm-lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:var(--pm-lilac);max-width:60ch}
.pm-h1{font-size:clamp(2.6rem,6.5vw,5.4rem)}
.pm-h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.pm-h3{font-size:clamp(1.3rem,2vw,1.7rem)}

/* Knoppen */
.pm-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--pm-font);font-weight:700;font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;padding:15px 30px;border-radius:var(--pm-radius);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease,background .22s ease}
.pm-btn--primary{background:var(--pm-fuchsia);color:#fff}
.pm-btn--primary:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 rgba(255,46,151,.3)}
.pm-btn--ghost{background:transparent;color:var(--pm-paper);border-color:rgba(244,242,251,.32)}
.pm-btn--ghost:hover{border-color:var(--pm-fuchsia);color:var(--pm-fuchsia)}

/* --------------------------------------------------------------------------
   4. HEADER & FOOTER (gerenderd door het thema)
   -------------------------------------------------------------------------- */
.pm-header{position:fixed;inset-inline:0;top:0;z-index:100;background:rgba(7,4,26,.72);backdrop-filter:blur(16px);border-bottom:var(--pm-border);transition:background .3s}
.pm-header.is-scrolled{background:rgba(7,4,26,.92)}
.pm-header__in{max-width:var(--pm-wrap);margin-inline:auto;padding:14px var(--pm-gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
.pm-header__logo img{height:36px;width:auto}
.pm-nav{display:flex;align-items:center;gap:28px}
.pm-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.pm-nav a{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pm-lilac);text-decoration:none;transition:color .2s}
.pm-nav a:hover,.pm-nav .current-menu-item a{color:var(--pm-fuchsia)}
.pm-lang{font-family:var(--pm-mono);font-size:.72rem;letter-spacing:.15em;display:flex;gap:8px}
.pm-lang a{color:var(--pm-muted);text-decoration:none}
.pm-lang a[aria-current],.pm-lang a:hover{color:var(--pm-paper)}
.pm-burger{display:none;background:none;border:0;color:var(--pm-paper);font-size:1.6rem;line-height:1;cursor:pointer}
@media(max-width:980px){
  .pm-nav{display:none;position:fixed;inset:60px 0 auto;background:var(--pm-ink-2);border-bottom:var(--pm-border);padding:24px var(--pm-gutter);flex-direction:column;align-items:flex-start}
  .pm-nav.is-open{display:flex}
  .pm-nav ul{flex-direction:column;gap:16px}
  .pm-burger{display:block}
}
main{padding-top:66px}

.pm-footer{background:var(--pm-ink-2);border-top:var(--pm-border);padding:64px 0 32px;font-size:.92rem}
.pm-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.pm-footer h4{font-size:.72rem;font-family:var(--pm-mono);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--pm-muted);margin:0 0 14px}
.pm-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pm-footer a{color:var(--pm-lilac);text-decoration:none}
.pm-footer a:hover{color:var(--pm-fuchsia)}
.pm-footer__logo img{height:40px;margin-bottom:14px}
.pm-footer__bottom{margin-top:48px;padding-top:24px;border-top:var(--pm-border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--pm-muted);font-family:var(--pm-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:820px){.pm-footer__grid{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------------------------------
   5. HERO + POWER METER / EQUALIZER
   -------------------------------------------------------------------------- */
.pm-hero{position:relative;overflow:hidden;padding-block:clamp(90px,12vw,160px) clamp(60px,8vw,110px)}
.pm-hero__glow{position:absolute;width:720px;height:720px;border-radius:50%;filter:blur(120px);opacity:.28;pointer-events:none;background:radial-gradient(circle,var(--pm-fuchsia),transparent 66%);top:-220px;right:-160px;z-index:0}
.pm-hero__glow--violet{background:radial-gradient(circle,var(--pm-violet),transparent 66%);top:auto;bottom:-260px;left:-200px;right:auto}
.pm-hero .pm-wrap{position:relative;z-index:2}

.pm-eq{display:flex;align-items:flex-end;gap:6px;height:120px}
.pm-eq span{flex:1;min-width:4px;background:var(--pm-grad);border-radius:2px 2px 0 0;transform-origin:bottom;animation:pm-eq 1.6s ease-in-out infinite alternate}
@keyframes pm-eq{from{transform:scaleY(.18)}to{transform:scaleY(1)}}

/* --------------------------------------------------------------------------
   6. INDEXRAIL (links, mono sectienummers)
   -------------------------------------------------------------------------- */
.pm-rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:50;display:grid;gap:14px;font-family:var(--pm-mono);font-size:.62rem;letter-spacing:.18em;color:var(--pm-muted)}
.pm-rail a{text-decoration:none;color:inherit;display:flex;align-items:center;gap:8px;transition:color .2s}
.pm-rail a::before{content:"";width:14px;height:1px;background:currentColor;transition:width .2s}
.pm-rail a:hover,.pm-rail a.is-active{color:var(--pm-fuchsia)}
.pm-rail a.is-active::before{width:26px}
@media(max-width:1400px){.pm-rail{display:none}}

/* --------------------------------------------------------------------------
   7. DASHBOARDPANEEL + TELLERS + LIVE-INDICATOR
   -------------------------------------------------------------------------- */
.pm-dash{background:linear-gradient(160deg,var(--pm-ink-3),var(--pm-ink-2));border:var(--pm-border);border-radius:12px;padding:clamp(24px,3vw,40px);position:relative}
.pm-dash__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px;font-family:var(--pm-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pm-muted)}
.pm-live{display:inline-flex;align-items:center;gap:8px;color:var(--pm-teal)}
.pm-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pm-teal);animation:pm-pulse 1.6s ease-in-out infinite}
@keyframes pm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.pm-dash__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px}
.pm-stat{border-left:2px solid rgba(196,188,234,.18);padding-left:16px}
.pm-stat__num{font-weight:900;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.02em;color:var(--pm-paper);line-height:1.05}
.pm-stat__num.is-growth{color:var(--pm-teal)}
.pm-stat__label{font-family:var(--pm-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pm-muted);margin-top:8px}

/* --------------------------------------------------------------------------
   8. MERKENMARQUEE (trusted by)
   -------------------------------------------------------------------------- */
.pm-marquee{overflow:hidden;border-block:var(--pm-border);padding-block:22px;position:relative}
.pm-marquee__track{display:flex;gap:56px;width:max-content;animation:pm-marquee 36s linear infinite;font-weight:700;font-size:1.02rem;color:var(--pm-muted);white-space:nowrap;align-items:center}
.pm-marquee__track span::after{content:"·";margin-left:56px;color:var(--pm-fuchsia)}
.pm-marquee:hover .pm-marquee__track{animation-play-state:paused}
@keyframes pm-marquee{to{transform:translateX(-50%)}}

/* --------------------------------------------------------------------------
   9. THINK FEEL DO + GROEIMODEL-BLOKKEN
   -------------------------------------------------------------------------- */
.pm-tfd{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(196,188,234,.14);border:var(--pm-border);border-radius:12px;overflow:hidden}
.pm-tfd__cell{background:var(--pm-ink-2);padding:clamp(24px,3vw,40px);transition:background .25s}
.pm-tfd__cell:hover{background:var(--pm-ink-3)}
.pm-tfd__num{font-family:var(--pm-mono);font-size:.7rem;letter-spacing:.2em;color:var(--pm-fuchsia)}
.pm-tfd__cell h3{margin:14px 0 10px;font-size:1.5rem}
@media(max-width:820px){.pm-tfd{grid-template-columns:1fr}}

.pm-blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pm-block{background:var(--pm-ink-2);border:var(--pm-border);border-radius:12px;padding:clamp(22px,2.6vw,34px);position:relative;overflow:hidden}
.pm-block::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--pm-grad)}
.pm-block--wide{grid-column:1/-1}
.pm-block h3{margin:0 0 10px}
@media(max-width:820px){.pm-blocks{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   10. AARRR-FUNNEL
   -------------------------------------------------------------------------- */
.pm-funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:funnel}
.pm-funnel__stage{background:var(--pm-ink-2);border:var(--pm-border);border-radius:10px;padding:20px 16px;text-align:center;position:relative}
.pm-funnel__stage::before{counter-increment:funnel;content:"0" counter(funnel);font-family:var(--pm-mono);font-size:.62rem;letter-spacing:.18em;color:var(--pm-muted);display:block;margin-bottom:10px}
.pm-funnel__stage strong{display:block;color:var(--pm-paper);font-weight:700;font-size:.95rem}
.pm-funnel__stage small{display:block;margin-top:8px;color:var(--pm-muted);font-size:.78rem;line-height:1.4}
.pm-funnel__stage.is-active{border-color:var(--pm-fuchsia);background:linear-gradient(180deg,rgba(255,46,151,.12),var(--pm-ink-2))}
.pm-funnel__stage.is-active::before{color:var(--pm-fuchsia)}
@media(max-width:900px){.pm-funnel{grid-template-columns:1fr 1fr}.pm-funnel__stage:last-child{grid-column:1/-1}}

/* --------------------------------------------------------------------------
   11. KAARTEN (diensten & cases), RIJEN, PROCES, CHECKLIST, META-STRIP
   -------------------------------------------------------------------------- */
.pm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.pm-card{display:flex;flex-direction:column;gap:14px;background:var(--pm-ink-2);border:var(--pm-border);border-radius:12px;padding:clamp(22px,2.4vw,32px);text-decoration:none;color:inherit;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;position:relative;overflow:hidden}
.pm-card:hover{transform:translateY(-6px);border-color:rgba(255,46,151,.5);box-shadow:0 18px 44px rgba(7,4,26,.55)}
.pm-card__kicker{font-family:var(--pm-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pm-fuchsia)}
.pm-card h3{margin:0;font-size:1.35rem}
.pm-card p{margin:0;font-size:.95rem}
.pm-card__tags{margin-top:auto;font-family:var(--pm-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pm-muted)}
.pm-card__arrow{color:var(--pm-fuchsia);font-weight:700}
.pm-card--case .pm-media{margin:-32px -32px 4px}
@media(max-width:640px){.pm-card--case .pm-media{margin:-22px -22px 4px}}

.pm-rows{display:grid;border-top:var(--pm-border)}
.pm-row{display:grid;grid-template-columns:64px 1fr 2fr;gap:22px;padding:26px 0;border-bottom:var(--pm-border);align-items:baseline}
.pm-row__num{font-family:var(--pm-mono);font-size:.7rem;letter-spacing:.18em;color:var(--pm-fuchsia)}
.pm-row h3{margin:0;font-size:1.15rem}
.pm-row p{margin:0;font-size:.95rem}
@media(max-width:720px){.pm-row{grid-template-columns:1fr;gap:8px}}

.pm-process{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:step}
.pm-process__step{background:var(--pm-ink-2);border:var(--pm-border);border-radius:10px;padding:24px}
.pm-process__step::before{counter-increment:step;content:"Step 0" counter(step);font-family:var(--pm-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pm-fuchsia);display:block;margin-bottom:12px}
.pm-process__step h4{margin:0 0 8px;font-size:1.05rem}
.pm-process__step p{margin:0;font-size:.9rem}

.pm-check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pm-check li{position:relative;padding-left:34px;color:var(--pm-lilac)}
.pm-check li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:5px;background:rgba(255,46,151,.16);border:1px solid var(--pm-fuchsia)}
.pm-check li::after{content:"";position:absolute;left:5px;top:7px;width:8px;height:5px;border-left:2px solid var(--pm-fuchsia);border-bottom:2px solid var(--pm-fuchsia);transform:rotate(-45deg)}

.pm-meta-strip{display:flex;flex-wrap:wrap;gap:0;border:var(--pm-border);border-radius:10px;overflow:hidden;background:var(--pm-ink-2)}
.pm-meta-strip>div{flex:1 1 160px;padding:18px 22px;border-right:var(--pm-border)}
.pm-meta-strip>div:last-child{border-right:0}
.pm-meta-strip dt{font-family:var(--pm-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pm-muted);margin-bottom:6px}
.pm-meta-strip dd{margin:0;color:var(--pm-paper);font-weight:700;font-size:.92rem}

/* Kruimelpad + vorige/volgende */
.pm-crumbs{font-family:var(--pm-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pm-muted);margin-bottom:22px}
.pm-crumbs a{color:inherit;text-decoration:none}
.pm-crumbs a:hover{color:var(--pm-fuchsia)}
.pm-prevnext{display:flex;justify-content:space-between;gap:18px;border-top:var(--pm-border);padding-top:30px}
.pm-prevnext a{text-decoration:none;color:var(--pm-lilac);max-width:46%}
.pm-prevnext a:hover strong{color:var(--pm-fuchsia)}
.pm-prevnext small{display:block;font-family:var(--pm-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pm-muted);margin-bottom:6px}
.pm-prevnext strong{color:var(--pm-paper);transition:color .2s}

/* --------------------------------------------------------------------------
   12. CTA-BAND
   -------------------------------------------------------------------------- */
.pm-cta-band{background:var(--pm-grad);border-radius:16px;padding:clamp(36px,5vw,64px);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden}
.pm-cta-band h2{margin:0;color:#fff;font-size:clamp(1.6rem,3.2vw,2.5rem);max-width:24ch}
.pm-cta-band p{margin:6px 0 0;color:rgba(255,255,255,.85)}
.pm-cta-band .pm-btn--primary{background:#fff;color:var(--pm-midnight)}
.pm-cta-band .pm-btn--primary:hover{box-shadow:7px 7px 0 rgba(255,255,255,.25)}

/* --------------------------------------------------------------------------
   13. MEDIA-SLOTS & ART-DIRECTED PLACEHOLDERS
   Gebruik: <figure class="pm-media pm-media--g2" data-media="image"
            data-ratio="16:9" data-slot="home-hero" data-note="sfeerbeeld team">
   Zodra er een <img> of <video> in staat, verdwijnt de placeholder-look vanzelf.
   -------------------------------------------------------------------------- */
.pm-media{position:relative;overflow:hidden;border-radius:12px;margin:0;background:var(--pm-grad);isolation:isolate}
.pm-media[data-ratio="16:9"]{aspect-ratio:16/9}
.pm-media[data-ratio="21:9"]{aspect-ratio:21/9}
.pm-media[data-ratio="4:3"]{aspect-ratio:4/3}
.pm-media[data-ratio="3:2"]{aspect-ratio:3/2}
.pm-media[data-ratio="1:1"]{aspect-ratio:1/1}
.pm-media[data-ratio="3:4"]{aspect-ratio:3/4}
/* gradientvarianten per slot */
.pm-media--g1{background:linear-gradient(120deg,var(--pm-fuchsia),var(--pm-purple) 60%,var(--pm-midnight))}
.pm-media--g2{background:linear-gradient(160deg,var(--pm-ink-4),var(--pm-purple) 55%,var(--pm-magenta))}
.pm-media--g3{background:linear-gradient(135deg,var(--pm-midnight),var(--pm-violet) 60%,var(--pm-fuchsia))}
.pm-media--g4{background:linear-gradient(115deg,var(--pm-magenta),var(--pm-midnight) 70%)}
.pm-media--g5{background:linear-gradient(150deg,var(--pm-purple),var(--pm-ink-3) 70%)}
/* korrel + stijgende lijnen */
.pm-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Cg fill='none' stroke='rgba(244,242,251,.28)' stroke-width='1.4'%3E%3Cpolyline points='10,180 70,150 120,160 190,90 240,105 290,30'/%3E%3Cpolyline points='10,195 90,175 160,180 230,140 290,120' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  background-size:100% 100%,140px 140px;background-repeat:no-repeat,repeat}
/* mono label met inhoud + formaat */
.pm-media::after{content:attr(data-ratio) " · " attr(data-note);position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--pm-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,251,.85);background:rgba(7,4,26,.55);padding:6px 10px;border-radius:4px;backdrop-filter:blur(4px)}
/* echt beeld/video vult het slot en verbergt de placeholder-lagen */
.pm-media>img,.pm-media>video,.pm-media>iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}
.pm-media.has-media::before,.pm-media.has-media::after{display:none}
.pm-media:has(>img[src]:not([src=""])),.pm-media:has(>video[src]),.pm-media:has(>video>source[src]){--pm-filled:1}
.pm-media:has(>img[src]:not([src=""]))::before,.pm-media:has(>img[src]:not([src=""]))::after,
.pm-media:has(>video>source[src])::before,.pm-media:has(>video>source[src])::after{display:none}
/* Elementor Image-widget met placeholder-SVG: klasse voor radius/consistentie */
.pm-img .elementor-widget-container img,.pm-img img{border-radius:12px;width:100%}

/* Video-facade (content-video, geen autoplay) */
.pm-video-facade{cursor:pointer}
.pm-video-facade .pm-play{position:absolute;inset:0;z-index:4;display:grid;place-items:center}
.pm-video-facade .pm-play span{width:78px;height:78px;border-radius:50%;background:rgba(7,4,26,.6);border:2px solid rgba(244,242,251,.7);display:grid;place-items:center;transition:transform .2s,border-color .2s;backdrop-filter:blur(6px)}
.pm-video-facade:hover .pm-play span{transform:scale(1.08);border-color:var(--pm-fuchsia)}
.pm-video-facade .pm-play span::after{content:"";margin-left:5px;border-left:18px solid var(--pm-paper);border-block:11px solid transparent}

/* --------------------------------------------------------------------------
   14. GALERIJ, FORMULIER, REVEAL, HULPKLASSEN
   -------------------------------------------------------------------------- */
.pm-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}

.pm-form{display:grid;gap:16px;max-width:640px}
.pm-form label{display:grid;gap:8px;font-family:var(--pm-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pm-muted)}
.pm-form input,.pm-form textarea,.pm-form select{background:var(--pm-ink-2);border:var(--pm-border);border-radius:8px;padding:14px 16px;color:var(--pm-paper);font-family:var(--pm-font);font-size:1rem;width:100%}
.pm-form input:focus,.pm-form textarea:focus{border-color:var(--pm-fuchsia);outline:none}
.pm-form__hp{position:absolute!important;left:-9999px!important;opacity:0}
.pm-form__msg{padding:14px 18px;border-radius:8px;font-weight:600;display:none}
.pm-form__msg.is-ok{display:block;background:rgba(43,224,189,.12);border:1px solid var(--pm-teal);color:var(--pm-teal)}
.pm-form__msg.is-err{display:block;background:rgba(255,46,151,.12);border:1px solid var(--pm-fuchsia);color:var(--pm-fuchsia)}

.pm-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.pm-reveal.is-in{opacity:1;transform:none}

.pm-grid-2{display:grid!important;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.pm-grid-32{display:grid!important;grid-template-columns:3fr 2fr;gap:clamp(24px,4vw,56px);align-items:center}
/* In Elementor: binnencontainers volgen het grid, niet hun flex-breedte */
.pm-grid-2>*,.pm-grid-32>*{width:100%!important;max-width:100%!important;min-width:0}
@media(max-width:860px){.pm-grid-2,.pm-grid-32{grid-template-columns:1fr!important}}
.pm-btnrow{display:flex;gap:14px;flex-wrap:wrap;margin:0}

.pm-timeline{display:grid;gap:0;border-left:2px solid rgba(196,188,234,.18);padding-left:32px}
.pm-timeline__item{position:relative;padding-block:26px}
.pm-timeline__item::before{content:"";position:absolute;left:-39px;top:36px;width:12px;height:12px;border-radius:50%;background:var(--pm-fuchsia);box-shadow:0 0 0 5px rgba(255,46,151,.18)}
.pm-timeline__year{font-family:var(--pm-mono);font-size:.72rem;letter-spacing:.2em;color:var(--pm-fuchsia)}
.pm-timeline__item h3{margin:8px 0 6px}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .pm-eq span,.pm-marquee__track,.pm-live::before{animation:none}
  .pm-eq span{transform:scaleY(.7)}
  .pm-reveal{opacity:1;transform:none;transition:none}
  .pm-card,.pm-btn{transition:none}
  html{scroll-behavior:auto}
  .pm-media video[autoplay]{display:none}
}